/* Проводник — Порог. Тишина, глубина, достоинство. */

:root, html[data-theme="dark"] {
  /* ширина колонки чата = ширине страниц политики/о-нас: телефон → во всю ширину;
     планшет → 760px; десктоп → 50vw (растёт на больших экранах). max() даёт 760 до ~1520px,
     дальше 50vw. Та же формула у .terms-page/.doc-page — чат и контент совпадают по ширине. */
  --chat-max: max(760px, 50vw);
  --bg: #262E3A;
  --text: #d2d5da;
  --accent: #6b6358;
  --text-dim: #98a0ab;
  --line: #3a4350;
  --brand: #eef0f3;
  --card: #2c3542;
  --surface: #2f3845;          /* пузырь Проводника */
  --surface-user: #3a382f;     /* пузырь человека (тёплый) */
  --user-text: #f0ebe2;
  --input-bg: #2f3845;
  --daysep-bg: rgba(255, 255, 255, 0.08);
  --send-fg: #f4f1ea;
  --avatar-grad: radial-gradient(circle at 50% 35%, #323d4c, #262E3A);
  --head-bg: rgba(38, 46, 58, 0.85);
  --glass-bg: rgba(38, 46, 58, 0.5);
  --glass-border: rgba(255, 255, 255, 0.14);
  --panel-bg: #2f3845;
  --overlay: rgba(20, 24, 30, 0.82);
  --fade: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html[data-theme="light"] {
  --bg: #f4f1ea;
  --text: #2e2a24;
  --accent: #6b6358;
  --text-dim: #6f685d;
  --line: #e3ddd0;
  --brand: #2e2a24;
  --card: #ffffff;
  --surface: #ffffff;
  --surface-user: #e7dcc7;
  --user-text: #2e2a24;
  --input-bg: #ffffff;
  --daysep-bg: rgba(0, 0, 0, 0.07);
  --send-fg: #f4f1ea;
  --avatar-grad: radial-gradient(circle at 50% 35%, #ffffff, #ece5d8);
  --head-bg: rgba(244, 241, 234, 0.85);
  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-border: rgba(0, 0, 0, 0.08);
  --panel-bg: #ffffff;
  --overlay: rgba(120, 114, 104, 0.45);
}

html { transition: background-color 0.3s var(--fade); }
body { transition: background-color 0.3s var(--fade), color 0.3s var(--fade); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: hidden;
  -webkit-text-size-adjust: 100%;   /* iOS: не раздувать шрифт в ландшафте (был ×2) */
  text-size-adjust: 100%;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1.25rem;
  text-align: center;
  line-height: 1.7;
}

/* Плавное появление */
.fade-in {
  opacity: 0;
  transform: translateY(8px);
  animation: rise 1.6s var(--fade) forwards;
}
.fade-in.d1 { animation-delay: 0.3s; }
.fade-in.d2 { animation-delay: 1.0s; }
.fade-in.d3 { animation-delay: 1.8s; }
.fade-in.d4 { animation-delay: 2.6s; }

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; opacity: 1; transform: none; }
}

h1.brand {
  font-size: clamp(2.4rem, 8vw, 4rem);
  font-weight: normal;
  letter-spacing: 0.04em;
  color: var(--brand);
  margin-bottom: 2.5rem;
}

.tagline {
  font-size: clamp(1.05rem, 3.5vw, 1.35rem);
  color: var(--text);
  margin-bottom: 1.5rem;
}

.intro {
  max-width: 30rem;
  margin: 0 auto 1.5rem;
  font-size: clamp(1.05rem, 3.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--text);
}
.intro p { margin: 0 0 0.7rem; }
.intro p:last-child { margin-bottom: 0; font-size: 0.85em; color: var(--text-dim); }

.glyph {
  font-size: 1.4rem;
  color: var(--accent);
  margin: 1.5rem 0;
  letter-spacing: 0.3em;
}

.level {
  color: var(--text-dim);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  margin-bottom: 2rem;
}
.level strong { color: var(--accent); font-weight: normal; }

/* Кнопки */
.btn {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.8rem 2.6rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 12px;
  font-family: inherit;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.5s var(--fade), color 0.5s var(--fade);
}
.btn:hover { background: var(--accent); color: var(--bg); }
.btn:disabled { opacity: 0.5; cursor: default; }

/* Модальное окно формы */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  z-index: 1000;   /* выше плавающих кнопок (z-index 100) */
}
.overlay.open { display: flex; animation: fadeBg 0.6s var(--fade); }
@keyframes fadeBg { from { opacity: 0; } to { opacity: 1; } }

.form-card {
  width: 100%;
  max-width: 380px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 2.5rem 2rem;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  margin-left: auto;
  margin-right: auto;
}

.field { margin-bottom: 1.4rem; text-align: left; }
.field label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.field input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.4s var(--fade);
}
.field input:focus { border-color: var(--accent); }
.field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  outline: none;
  resize: vertical;
  min-height: 5rem;
}
.field textarea:focus { border-color: var(--accent); }

.form-card .btn { width: 100%; margin-top: 0.5rem; }

.form-note {
  margin-top: 1.4rem;
  font-size: 0.82rem;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}
.form-note a { color: var(--accent); text-decoration: none; }
.form-note a:hover { color: var(--text); }

.notice {
  margin: 2rem auto 0;
  max-width: 22rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.notice p { margin: 0 0 0.6rem; }
.notice p:last-child { margin-bottom: 0; }
.notice-lead { color: var(--text); }

.error {
  color: #b06a5e;
  font-size: 0.85rem;
  min-height: 1.2em;
  margin-top: 0.8rem;
}

.origin-block {
  margin-top: 2.5rem;
  max-width: 30rem;
  color: var(--text-dim);
  font-size: 0.98rem;
}
.origin-block p { margin-bottom: 0.4rem; }

.muted-link {
  margin-top: 2.5rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.muted-link a { color: var(--text-dim); text-decoration: none; cursor: pointer; }
.muted-link a:hover { color: var(--accent); }

/* ===== Чат (/room) — телеграм-стиль, mobile-first ===== */
:root {
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* iOS PWA: статусбар полностью прозрачный (apple-mobile-web-app-status-bar-style=
   black-translucent) — контент уходит под него, без оверлея/полоски.
   Иконки часов/батареи iOS принудительно белые: в тёмной теме читаются, в
   светлой могут сливаться с кремовым фоном — это ограничение iOS (цвет иконок
   поменять нельзя). По решению Картографа держим чистую прозрачность. */

body.room {
  position: sticky;    /* sticky (≈relative без скролл-контейнера): НЕ fixed → iOS не
                          заслоняет нижнюю зону home-indicator непрозрачной полосой.
                          Композер на bottom:0 с прозрачным padding-bottom = зона
                          индикатора прозрачная, сквозь неё виден контент. */
  inset: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}

.chat {
  position: absolute;      /* absolute внутри fixed-body → НЕ fixed, нет iOS-бага */
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 760px;
  height: 100dvh;          /* JS держит = visualViewport.height */
  overflow: hidden;
}

/* --- Плавающие стеклянные элементы поверх ленты --- */
.glass-tag, .glass-btn {
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
}
.glass-tag {
  position: absolute;
  top: calc(0.7rem + var(--safe-t));
  will-change: transform;
  /* к левому краю колонки чата: на узких — 0.9rem, на широких — край центр-колонки */
  left: max(0.9rem, calc((100vw - var(--chat-max)) / 2 + 0.9rem));
  z-index: 100;
  max-width: 52%;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  color: var(--brand);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.glass-actions {
  position: absolute;
  top: calc(0.7rem + var(--safe-t));
  will-change: transform;
  /* к правому краю колонки чата (зеркально glass-tag) */
  right: max(0.9rem, calc((100vw - var(--chat-max)) / 2 + 0.9rem));
  z-index: 100;
  display: flex;
  gap: 0.5rem;
}
.glass-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--accent);
  cursor: pointer;
  transition: transform 0.15s var(--fade);
}
.glass-btn:active { transform: scale(0.9); }

/* --- Лента --- */
.feed {
  position: absolute;       /* скроллится внутри комнаты; контент проезжает под композером */
  inset: 0;
  max-width: var(--chat-max);   /* центр-колонка на широких (планшет/ландшафт/десктоп) */
  margin-left: auto;
  margin-right: auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: calc(3.6rem + var(--safe-t)) 0.9rem calc(var(--composer-h, 5rem) + 0.6rem);
}

.day-sep {
  width: fit-content;
  margin: 0.9rem auto 0.7rem;
  padding: 0.2rem 0.85rem;
  background: var(--daysep-bg);
  color: var(--text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  border-radius: 999px;
  text-align: center;
}

.row { margin-bottom: 0.45rem; }
.row.user { text-align: right; }
.row.assistant { text-align: left; }

.msg {
  display: inline-block;
  text-align: left;
  position: relative;
  max-width: 84%;
  padding: 0.55rem 0.8rem 0.5rem;
  border-radius: 18px;
  line-height: 1.5;
  font-size: 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: pop 0.28s var(--fade);
}
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; } }

.row.assistant .msg {
  background: var(--surface);
  color: var(--text);
  border-bottom-left-radius: 6px;
}
.row.user .msg {
  background: var(--surface-user);
  color: var(--user-text);
  border-bottom-right-radius: 6px;
}

.msg .time {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.66rem;
  color: var(--text-dim);
  opacity: 0.8;
  vertical-align: baseline;
  float: right;
  margin-top: 0.35rem;
}
.row.user .msg .time { color: var(--user-text); opacity: 0.55; }

.msg.error-msg { background: #2a1715; color: #d98a7c; }

/* Подсказки следующего шага — тихие, ненавязчивые */
.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.15rem 0 0.5rem;
  animation: pop 0.28s var(--fade);
}
.chip {
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 0.32rem 0.7rem;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.2s, color 0.2s, border-color 0.2s;
  text-align: left;
}
.chip:hover { opacity: 1; color: var(--text); border-color: var(--text-dim); }

/* Индикатор «печатает» */
.typing { display: inline-flex; gap: 5px; align-items: center; padding: 0.2rem 0; }
.typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-dim);
  animation: blink 1.2s infinite ease-in-out both;
}
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* --- Поле ввода --- */
/* Без фона-бара: только стеклянное поле + кнопка. Высота = высоте поля. */
.composer {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  padding: 0 0.6rem;          /* без вертикальных паддингов → высота = высоте поля */
  background: none;
}
.composer .input-wrap {
  flex: 1;
  min-height: 46px;                     /* вровень с кнопкой отправки */
  display: flex;
  align-items: flex-end;
  background: var(--glass-bg);          /* стекло вместо непрозрачного фона */
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 23px;
  padding: 0.15rem 0.5rem;                /* симметрично (кнопка эмодзи убрана) */
  transition: border-color 0.3s var(--fade);
}
.composer textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;   /* 16px+ — иначе Safari зумит при фокусе (и всё «дёргается») */
  line-height: 1.45;
  padding: 0.55rem 0.2rem;
  outline: none;
  max-height: 140px;
  overflow-y: auto;
}
.composer textarea::placeholder { color: var(--text-dim); }

/* Кнопка эмодзи внутри поля ввода */
.emoji-toggle {
  flex: none;
  align-self: flex-end;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity 0.2s var(--fade), transform 0.15s var(--fade);
}
.emoji-toggle:hover { opacity: 1; }
.emoji-toggle:active { transform: scale(0.9); }

.send {
  flex: none;
  align-self: flex-end;        /* по нижней кромке, вровень с полем */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--glass-bg);  /* стекло, как у верхних кнопок */
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);                    /* приглушён, пока поле пустое */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.15s var(--fade), color 0.25s var(--fade), opacity 0.3s;
}
.send.has-text { color: var(--accent); }     /* появился текст → самолётик активен */
.send:hover { color: var(--text); }
.send:active { transform: scale(0.92); }
.send:disabled { opacity: 0.45; cursor: default; }
.send svg { width: 19px; height: 19px; display: block; transform: translateX(2px); }

/* Кнопки-иконки в шапке (тема) */
.icon-btn {
  flex: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  transition: background 0.2s var(--fade), transform 0.15s var(--fade);
}
.icon-btn:hover { background: var(--daysep-bg); color: var(--accent); }
.icon-btn:active { transform: scale(0.9); }

/* Композер — fixed «плавающий» бар у низа видимой области. JS ставит --vvb при resize. */
.composer-wrap {
  position: absolute;        /* absolute, НЕ fixed → на iOS не едет при скролле */
  left: 0;
  right: 0;
  max-width: var(--chat-max);   /* та же колонка, что и лента */
  margin-left: auto;
  margin-right: auto;
  bottom: 0;                 /* у низа; padding-bottom — ПРОЗРАЧНАЯ зона индикатора */
  padding-bottom: var(--safe-b);   /* фон сюда НЕ кладём → сквозь зону виден контент */
  z-index: 100;
  touch-action: none;                /* перетягивание по композеру НЕ скроллит ленту */
}
.composer-wrap * { touch-action: none; }            /* вся зона композера — без скролла по жесту */
/* Клавиатура поднята → home-indicator нет, поле садится вплотную к клавиатуре. */
html.kb-open .composer-wrap { padding-bottom: 0; }

/* Android: sticky-body + absolute-композер на Android ведут себя иначе (инпут пропадал).
   Тело — relative, композер — fixed (штатно встаёт над клавиатурой при resizes-content).
   iOS не трогаем (там своя схема со sticky + JS). */
html.is-android body.room { position: relative; }
html.is-android .composer-wrap { position: fixed; }

/* Ширину колонки и положение кнопок теперь держат базовые стили (--chat-max + max()-края):
   телефон-портрет → во всю ширину; планшет/ландшафт/десктоп → центр-колонка. Здесь только
   десктопный штрих — приподнять инпут от края. Гейт по ВЫСОТЕ, чтобы не красть высоту у
   короткого ландшафта телефона (там инпут остаётся прижат к низу). */
@media (min-width: 900px) and (min-height: 600px) {
  .composer-wrap { bottom: 28px; }
  .feed { padding-bottom: calc(var(--composer-h, 5rem) + 28px + 0.6rem); }
}

.emoji-panel {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: calc(100% + 0.35rem);
  max-height: 244px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 0.1rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  z-index: 8;
  animation: pop 0.18s var(--fade);
}
.emoji-panel[hidden] { display: none; }
.emoji-panel button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.55rem;
  line-height: 1;
  padding: 0.3rem 0;
  border-radius: 10px;
}
.emoji-panel button:hover { background: var(--daysep-bg); }

@media (min-width: 600px) {
  .feed { padding-left: 1.4rem; padding-right: 1.4rem; }
}