/* Мятная тема «Глубокий зелёный каркас». Цвета и размеры — только здесь.
   Каркас (шапка, боковая панель, заголовки окон) — тёмно-зелёный, содержимое — светлый мятный «лист».
   Тёмная тема переопределяет те же переменные внизу файла.
   Логотип (все файлы в 2x):
     swan.png          — светлый лебедь для тёмно-зелёного каркаса, иконки вкладки и тёмной темы;
     swan-sheet.png    — лебедь с зелёным телом для светлого листа (главная, пустой чат, аватар);
     wordmark.png      — белая надпись «Рядом», только на каркасе;
     wordmark-ink.png  — та же надпись тёмно-зелёным, для светлого фона (печать, превью ссылки). */
:root {
  color-scheme: light dark;
  /* Каркас */
  --frame: #0c3a32;
  --frame-2: #144a40;
  --frame-3: #1c5b4f;
  --frame-ink: #f1fcf7;
  --frame-muted: #a6d4c4;
  --frame-line: rgba(190, 255, 228, .12);
  --frame-accent: #5ee6b0;
  --frame-accent-hover: #86efc6;
  --frame-accent-ink: #062a22;
  /* Лист с содержимым */
  --bg: #eef8f3;
  --surface: #ffffff;
  --surface-2: #e5f4ec;
  --surface-3: #d0eadd;
  --ink: #0d2b25;
  --ink-2: #3a5a52;
  --muted: #557067;
  --line: #cfe5da;
  /* Рамка полей ввода: не меньше 3:1 к фону */
  --line-input: #6a9284;
  /* Край листа: в тёмной теме — тонкая светлая линия, чтобы лист не терялся в каркасе */
  --sheet-edge: transparent;
  --accent: #0a7a5a;
  --accent-strong: #08664b;
  --accent-soft: #d6f3e5;
  --accent-ink: #0a6a4f;
  --on-accent: #ffffff;
  /* Главная кнопка на листе — изумрудная: зелёная, но не чёрная */
  --primary: #0d7356;
  --primary-hover: #0a5f47;
  --on-primary: #ffffff;
  --primary-icon: #c4f7e1;
  /* Плитки с иконками — светлые мятные; тёмная заливка только у выбранного варианта */
  --tile: #d2f0e2;
  --tile-ink: #0b6b4f;
  --tile-calm: #d4eef1;
  --tile-calm-ink: #0b6570;
  --calm: #0e7480;
  --calm-soft: #dcf0f2;
  /* Красный — только для предупреждений об опасности */
  --danger: #c42b45;
  --danger-hover: #a92139;
  --danger-soft: #fde8ec;
  --danger-line: #f3b9c4;
  --danger-ink: #9a1f37;
  --danger-glow: rgba(196, 43, 69, .28);
  /* Светлая красная кнопка на каркасе (каркас одинаковый в обеих темах) */
  --danger-soft-frame: #fde8ec;
  --danger-ink-frame: #9a1f37;
  --danger-line-frame: #f08aa0;
  /* Наведение на «Помощь» на каркасе: текст остаётся читаемым в обеих темах */
  --danger-soft-frame-hover: #ffffff;
  --user-bubble: #0d7356;
  --user-ink: #ffffff;
  --focus-sheet: #0b8a63;
  --focus-frame: #5ee6b0;
  --focus: var(--focus-sheet);
  --mint: #5ee6b0;
  --mint-glow: rgba(62, 214, 160, .18);
  --sheet-bg:
    radial-gradient(900px 420px at 12% -8%, var(--mint-glow), transparent 62%),
    radial-gradient(700px 380px at 100% 0%, color-mix(in srgb, var(--calm) 8%, transparent), transparent 60%),
    var(--bg);
  /* Лебедь на листе и «пруд» под ним */
  --swan-sheet: url("/swan-sheet.png");
  --pond: rgba(62, 214, 160, .30);
  --pond-core: rgba(10, 80, 60, .16);
  --shadow-sm: 0 1px 2px rgba(12, 58, 50, .07);
  --shadow: 0 1px 2px rgba(12, 58, 50, .06), 0 12px 32px rgba(12, 58, 50, .10);
  --sheet-radius: 28px;
  --nav-h: 72px;
  --column: 760px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--frame);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; overflow: hidden; background: var(--frame); }
button, input, textarea { font: inherit; color: inherit; }
button, a, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
a { color: var(--accent-ink); }
[hidden] { display: none !important; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only, #conversation-intro, .message > strong { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 20; padding: 12px 16px; border-radius: 12px; background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.skip-link:focus { top: 12px; }

/* Кнопки */
.primary-button, .soft-button, .outline-button, .danger-button, .danger-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; border: 1px solid transparent; border-radius: 14px; font-weight: 600; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.primary-button { background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 22%, transparent); }
.primary-button .icon { color: var(--primary-icon); }
.primary-button:not(:disabled):hover { background: var(--primary-hover); }
/* Неактивная главная кнопка — спокойная мятная, а не полупрозрачная зелёная */
.primary-button:disabled { background: var(--surface-3); color: var(--muted); box-shadow: none; opacity: 1; }
.primary-button:disabled .icon { color: currentColor; }
.soft-button { background: var(--accent-soft); color: var(--accent-ink); }
.soft-button:not(:disabled):hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.outline-button { border-color: var(--line); background: var(--surface); color: var(--ink); }
.outline-button:not(:disabled):hover { border-color: var(--accent); }
.danger-button { background: var(--danger-soft); color: var(--danger-ink); }
.danger-button:not(:disabled):hover { border-color: var(--danger-line); }
.danger-outline { border: 1.5px solid var(--danger); background: var(--danger-soft); color: var(--danger-ink); }
.danger-outline:not(:disabled):hover { background: var(--danger); color: #fff; }
.big { min-height: 54px; padding: 12px 24px; border-radius: 16px; font-size: 17px; }
.wide { width: 100%; margin-top: 10px; }
.text-button { min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--accent-ink); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
/* Кнопки на каркасе: «Выйти», меню, «Назад» */
.round-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--frame-2); color: var(--frame-ink); }
.help-button, .exit-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; font-size: 14px; font-weight: 600; white-space: nowrap; }
/* «Помощь» — сплошная красная: на зелёном каркасе её видно сразу */
.help-button { background: var(--danger); color: #fff; box-shadow: 0 6px 16px var(--danger-glow); }
.help-button:not(:disabled):hover { background: var(--danger-hover); }
.exit-button { background: var(--frame-2); color: var(--frame-ink); }
.help-button .icon, .exit-button .icon, .round-button .icon { width: 20px; height: 20px; }
.exit-button:not(:disabled):hover, .round-button:not(:disabled):hover, .back-button:not(:disabled):hover { background: var(--frame-3); }

/* Каркас: всё, что стоит на тёмно-зелёной подложке */
.sidebar, .topbar, .home-nav, .page-nav, .dialog-heading { --focus: var(--focus-frame); color: var(--frame-ink); }

/* Каркас чата: на телефоне — шапка и лист под ней, на широком экране — боковая панель + лист */
.app { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--frame); }
.sidebar { display: none; }
#app-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 14px; }
.brand { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px 0 2px; border: 0; border-radius: 12px; background: none; color: inherit; }
.brand-mark { display: block; width: 32px; height: 36px; object-fit: contain; }
.brand-wordmark { display: block; width: 92px; height: auto; }
.chat-heading { display: none; flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; color: var(--frame-ink); }
.toolbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Боковая панель на каркасе */
/* Отступ под логотипом: рамка фокуса не налезает на «Новый чат» */
.side-brand { display: flex; align-items: center; gap: 10px; min-height: 60px; margin-bottom: 12px; padding: 6px 8px; border: 0; border-radius: 14px; background: none; color: inherit; text-align: left; }
.side-brand .brand-mark { width: 42px; height: 47px; }
.side-brand .brand-wordmark { width: 106px; }
.side-brand small { display: block; margin-top: 5px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--frame-muted); }
.new-chat-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 0; border-radius: 14px; background: var(--frame-accent); color: var(--frame-accent-ink); font-weight: 700; box-shadow: 0 8px 22px rgba(0, 0, 0, .18); transition: background-color .15s ease; }
.new-chat-button:not(:disabled):hover { background: var(--frame-accent-hover); }
.side-label { margin: 20px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--frame-muted); }
.side-chat-list { display: grid; gap: 2px; max-height: 30vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--frame-3) transparent; }
.side-chat-list .chat-entry { min-height: 40px; padding: 9px 12px; border: 0; background: transparent; color: var(--frame-ink); font-weight: 400; }
.side-chat-list .chat-entry:not(:disabled):hover { background: var(--frame-2); }
.side-chat-list .chat-entry[aria-current="true"] { background: var(--frame-2); color: var(--frame-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--frame-accent); }
.side-tools { display: grid; gap: 2px; }
.side-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 9px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--frame-ink); text-align: left; }
.side-row:not(:disabled):hover { background: var(--frame-2); }
.side-row .icon { width: 20px; height: 20px; color: var(--frame-accent); }
.side-row span { display: flex; flex-direction: column; min-width: 0; }
.side-row small { font-size: 12px; color: var(--frame-muted); }
/* Карточка «Хочешь поговорить с человеком?» — светлая на тёмном каркасе, чтобы её было видно сразу */
.side-help { --focus: var(--focus-sheet); display: grid; gap: 8px; margin-top: auto; padding: 16px; border-radius: 20px; background: var(--danger-soft); color: var(--ink); }
.side-help-title { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; line-height: 1.35; color: var(--danger-ink); }
.side-help-title .icon { width: 20px; height: 20px; }
.side-help .call-button { justify-content: center; background: var(--danger); color: #fff; box-shadow: 0 6px 16px var(--danger-glow); }
.side-help .call-button:hover { background: var(--danger-hover); }
.side-help-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.side-help-note a { color: var(--danger-ink); font-weight: 700; }
.side-help .text-button { justify-self: start; min-height: 32px; padding: 0; color: var(--danger-ink); font-size: 13px; }
.side-footer { margin: 6px 10px 0; }
.side-footer .text-button { color: var(--frame-muted); font-size: 12px; }

/* Лист с перепиской: колонка текста по центру не шире --column */
.conversation { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; background: var(--sheet-bg); color: var(--ink); box-shadow: 0 0 0 1px var(--sheet-edge); }
#messages { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px max(16px, calc((100% - var(--column)) / 2)) 12px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* Пустой чат */
#empty { min-height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 8px 0; }
.welcome { text-align: center; }
/* Лебедь на листе: на светлом — вариант с зелёным телом, в тёмной теме — светлый.
   Под ним — мягкий мятный «пруд» вместо тени; это фон самой картинки, ниже неё есть отступ. */
.home-swan, .welcome-swan, .avatar { content: var(--swan-sheet); }
.home-swan, .welcome-swan { box-sizing: border-box; object-fit: contain; object-position: 50% 0; background:
    radial-gradient(closest-side, var(--pond-core), transparent) 50% calc(100% - (var(--pond-h) - var(--pond-core-h)) / 2) / 56% var(--pond-core-h) no-repeat,
    radial-gradient(closest-side, var(--pond), transparent) 50% 100% / 100% var(--pond-h) no-repeat; }
.welcome-swan { --pond-h: 22px; --pond-core-h: 9px; display: block; width: 104px; height: 103px; margin: 0 auto; padding: 0 10px 9px; }
.welcome h2 { margin: 22px 0 6px; font-size: 28px; line-height: 1.2; letter-spacing: -.025em; }
.welcome p { max-width: 420px; margin: 0 auto; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.starter { display: grid; gap: 12px; }
.starter-title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.prompt-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.prompt-chips button { min-height: 52px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 500; text-align: left; box-shadow: var(--shadow-sm); }
.prompt-chips button:not(:disabled):hover, .starter-card:hover, .reply-actions button:not(:disabled):hover, .menu-row:hover, button.feature:hover { border-color: var(--accent); }
.starter-card { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); text-align: left; box-shadow: var(--shadow-sm); }
.starter-card > span:nth-child(2) { flex: 1; min-width: 0; }
.starter-card strong { display: block; font-size: 15px; }
.starter-card small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.tile-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 13px; background: var(--tile); color: var(--tile-ink); }
.tile-icon.calm { background: var(--tile-calm); color: var(--tile-calm-ink); }
.chevron { width: 16px; color: var(--muted); }
/* Замок стоит в строке текста, чтобы при переносе он не отрывался от фразы */
.starter-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }
.starter-note .icon { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; }

/* Сообщения: твои — изумрудные справа, ответы — белые карточки слева */
.message { position: relative; display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; }
.avatar { flex: 0 0 32px; width: 32px; height: 36px; margin-top: 1px; object-fit: contain; }
.message p { max-width: min(620px, calc(100% - 42px)); margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 6px 20px 20px 20px; background: var(--surface); color: var(--ink); font-size: 16px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--shadow-sm); }
.message.user { justify-content: flex-end; }
.message.user p { max-width: min(560px, 85%); border-color: transparent; border-radius: 20px 6px 20px 20px; background: var(--user-bubble); color: var(--user-ink); box-shadow: 0 6px 18px color-mix(in srgb, var(--user-bubble) 18%, transparent); }
.message-time { display: block; margin-top: 6px; font-size: 11px; line-height: 1.2; text-align: right; color: var(--muted); }
.message.user .message-time { color: color-mix(in srgb, var(--user-ink) 88%, transparent); }
/* Пока не пришло первое слово ответа — три точки; дальше текст появляется по словам */
.streaming p { min-height: 48px; }
.streaming p:empty, .pending p:empty { display: flex; align-items: center; --dot-off: color-mix(in srgb, var(--muted) 30%, transparent); }
.streaming p:empty::after, .pending p:empty::after { content: ""; width: 7px; height: 7px; margin-right: 22px; border-radius: 50%; animation: typing 1.2s ease-in-out infinite; }
@keyframes typing {
  0%, 100% { background: var(--muted); box-shadow: 11px 0 var(--dot-off), 22px 0 var(--dot-off); }
  33% { background: var(--dot-off); box-shadow: 11px 0 var(--muted), 22px 0 var(--dot-off); }
  66% { background: var(--dot-off); box-shadow: 11px 0 var(--dot-off), 22px 0 var(--muted); }
}
/* Варианты ответа под последним сообщением — их предлагает ИИ по смыслу разговора */
.reply-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 18px 42px; }
.reply-actions button { min-height: 40px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 20px; background: var(--accent-soft); color: var(--accent-ink); font-size: 14px; font-weight: 500; text-align: left; }
.reply-contacts { max-width: 620px; margin: -4px 0 16px 42px; padding: 12px 12px 4px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-2); }
.reply-contacts-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; margin: -6px 0 2px; }
.reply-contacts-title { margin: 0 0 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.reply-contacts-all { min-height: 32px; max-width: 100%; padding: 4px; font-size: 12px; text-align: left; }

/* Карточка риска с кнопками звонка */
.safety-notice { flex-shrink: 0; display: flex; align-items: flex-start; gap: 4px; margin: 0 max(16px, calc((100% - var(--column)) / 2)) 10px; padding: 14px 6px 14px 16px; border: 1px solid color-mix(in srgb, var(--calm) 25%, transparent); border-radius: 20px; background: var(--calm-soft); color: var(--ink); }
.safety-notice[data-level="danger"] { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-ink); }
.safety-body { flex: 1; min-width: 0; }
#safety-text { margin: 0 0 10px; font-size: 15px; font-weight: 500; line-height: 1.45; }
.safety-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.call-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 22px; background: var(--primary); color: var(--on-primary); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.call-button .icon { width: 18px; height: 18px; }
.call-danger { background: var(--danger); color: #fff; }
/* В красной карточке второй номер — белый с красной рамкой, чтобы тревога была одного цвета */
.safety-notice[data-level="danger"] .call-button:not(.call-danger) { background: var(--surface); color: var(--danger-ink); box-shadow: inset 0 0 0 1.5px var(--danger); }
.safety-notice:not([data-level="danger"]) .call-danger { display: none; }
.safety-more { min-height: 44px; padding: 0 14px; border: 1px solid currentColor; border-radius: 22px; background: transparent; color: inherit; font-size: 14px; font-weight: 600; }
.safety-close { flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 22px; }

/* Поле ввода */
#writing-panel { flex: 0 0 auto; padding: 6px max(16px, calc((100% - var(--column)) / 2)) max(12px, env(safe-area-inset-bottom)); }
#chat-form { margin: 0; }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--line-input); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); transition: border-color .15s ease, box-shadow .15s ease; }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow); }
#prompt, #rehearsal-input { flex: 1; min-width: 0; min-height: 44px; height: 44px; max-height: min(160px, 30dvh); padding: 11px 6px; border: 0; background: transparent; color: var(--ink); font-size: 16px; line-height: 22px; resize: none; field-sizing: content; }
#prompt:focus-visible, #rehearsal-input:focus-visible { outline: none; }
#prompt::placeholder, #rehearsal-input::placeholder { color: var(--muted); }
#send, .send-button { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--primary); color: var(--primary-icon); transition: background-color .15s ease; }
#send:not(:disabled):hover, .send-button:not(:disabled):hover { background: var(--primary-hover); }
#send:disabled, .send-button:disabled { background: var(--surface-3); color: var(--muted); opacity: 1; }
#send .icon, .send-button .icon { width: 20px; height: 20px; }
#feedback { max-height: 48px; margin: 8px 6px 0; overflow: auto; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
#feedback:empty { display: none; }
.service-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 8px 6px 0; font-size: 11px; line-height: 1.3; color: var(--muted); text-align: center; }
#connection[data-ready="true"] { display: none; }

/* Окна: заголовок на тёмно-зелёной полосе, как шапка сайта */
dialog { --pad: 24px; width: min(540px, calc(100% - 32px)); max-height: 90dvh; padding: 0; border: 0; border-radius: 24px; background: var(--surface); color: var(--ink); line-height: 1.5; box-shadow: 0 30px 90px rgba(3, 26, 21, .38); overflow: hidden; }
/* Шапка с крестиком стоит на месте, прокручивается только содержимое под ней */
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: rgba(3, 26, 21, .55); backdrop-filter: blur(3px); }
.dialog-heading { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 12px 12px var(--pad); background: var(--frame); }
.dialog-body { flex: 1 1 auto; min-height: 0; padding: 18px var(--pad) var(--pad); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.dialog-body > :first-child { margin-top: 0; }
.dialog-heading h2 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; color: var(--frame-ink); }
.dialog-close { flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--frame-2); color: var(--frame-ink); font-size: 22px; }
.dialog-close:hover { background: var(--frame-3); }
h3 { font-size: 16px; }
p { line-height: 1.5; }
.tab-note { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.small-note { color: var(--muted); font-size: 12px; }
.dialog-warning { padding: 12px 14px; border-left: 3px solid var(--accent); border-radius: 6px 14px 14px 6px; background: var(--surface-2); color: var(--ink-2); font-size: 13px; }
.menu-list { display: grid; gap: 8px; }
.menu-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; text-align: left; }
.menu-row > .icon { flex: 0 0 40px; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--tile); color: var(--tile-ink); }
.menu-row > span { display: flex; flex-direction: column; min-width: 0; }
.menu-row small { margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }
.menu-footer, .side-footer, .home-footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.menu-footer { margin-top: 8px; }
.theme-toggle { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.theme-toggle .icon { width: 18px; height: 18px; }
.profile-fields { display: grid; gap: 14px; }
.profile-fields label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.profile-fields .tab-note { font-size: 12px; font-weight: 400; }
/* Текст в поле — обычный, а не жирный, как подпись */
.profile-fields input { font-weight: 400; }
input:not([type="radio"]):not([type="checkbox"]), textarea:not(#prompt):not(#rehearsal-input) { display: block; width: 100%; min-width: 0; min-height: 46px; padding: 11px 14px; border: 1px solid var(--line-input); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 16px; line-height: 1.5; }
input:not([type="radio"]):not([type="checkbox"]):focus-visible, textarea:not(#prompt):not(#rehearsal-input):focus-visible { border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#chat-list { display: grid; gap: 6px; }
.chat-entry { min-height: 46px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-entry[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.new-chat { width: 100%; margin: 12px 0; }
.chat-management { margin-top: 16px; font-size: 14px; overflow-wrap: anywhere; }
.summary-fields { display: grid; gap: 12px; }
.summary-fields label { position: relative; display: block; padding: 14px 40px 6px 16px; border: 1px solid var(--line-input); border-radius: 16px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.summary-fields label:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.summary-fields label > .icon { position: absolute; top: 15px; right: 14px; width: 16px; height: 16px; color: var(--muted); }
.summary-fields textarea { padding: 6px 0 !important; border: 0 !important; background: transparent !important; color: var(--ink); font-size: 15px !important; font-weight: 400; resize: vertical; }
.summary-fields textarea:focus-visible { outline: none; }

/* Контакты помощи: номер — это кнопка звонка */
.contact-tabs { display: flex; gap: 4px; margin-bottom: 16px; padding: 4px; border-radius: 14px; background: var(--surface-2); }
.contact-tabs button { flex: 1; min-height: 42px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.contact-tabs [aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), inset 0 -2px 0 var(--accent); }
.country-label { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* Контакт — компактная строка: название и пояснение слева, номер-кнопка справа */
.contact-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; margin: 8px 0; padding: 12px 14px 12px 50px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow-wrap: anywhere; }
.contact-item > * { grid-column: 1; }
.contact-item h3 { margin: 0; font-size: 15px; line-height: 1.35; }
.contact-item p { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.contact-item .phone-number, .contact-item > .soft-button { grid-column: 2; grid-row: 1 / span 3; }
.contact-icon { position: absolute; grid-column: auto; top: 13px; left: 14px; width: 24px; height: 24px; padding: 4px; border-radius: 8px; background: var(--calm-soft); color: var(--calm); }
.emergency-contact { margin-bottom: 18px; padding-top: 14px; padding-bottom: 14px; border: 1.5px solid var(--danger-line); background: var(--danger-soft); }
.emergency-contact h3 { color: var(--danger-ink); }
.emergency-contact .contact-icon { background: var(--danger); color: #fff; }
.phone-number { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 6px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); font-size: 16px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.phone-number:hover { background: color-mix(in srgb, var(--accent-soft) 85%, var(--accent) 15%); }
/* 112 — самая крупная кнопка в окне */
.emergency-contact .phone-number { min-width: 96px; min-height: 52px; padding: 6px 22px; border-radius: 16px; background: var(--danger); color: #fff; font-size: 23px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 6px 16px var(--danger-glow); }
.emergency-contact .phone-number:hover { background: var(--danger-hover); }
.source-link { justify-self: start; margin-top: 2px; font-size: 12px; color: var(--muted); }
.local-help { margin-top: 22px; }
.local-help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.local-help-head .country-label { margin: 0; }
.local-help-head .text-button { min-height: 32px; padding: 0; font-size: 13px; }
.local-help .tab-note { margin: 6px 0; }
.local-help .tab-note:empty { margin: 0; }
#local-help-title:focus { outline: none; }
.contacts-city-row { display: flex; gap: 8px; margin-top: 8px; }
#contacts-city { flex: 1; min-width: 0; background: var(--surface); }
#save-contacts-city { flex-shrink: 0; }

/* Страницы с прокруткой (главная и подготовка): шапка на каркасе, под ней — светлый лист со скруглёнными углами */
html:not([data-page="chat"]) body { height: auto; min-height: 100dvh; overflow: auto; }
#home-page, .page { display: flow-root; min-height: calc(100dvh - var(--nav-h) - 12px); margin: var(--nav-h) 12px 12px; padding: 0 24px 36px; border-radius: var(--sheet-radius); background: var(--sheet-bg); color: var(--ink); box-shadow: 0 0 0 1px var(--sheet-edge); }
.home-nav, .page-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--nav-h); margin-top: calc(-1 * var(--nav-h)); }

/* Главная */
.home-nav { max-width: 960px; margin-inline: auto; }
.home-logo { display: flex; align-items: center; gap: 8px; }
.home-logo .brand-mark { width: 36px; height: 41px; }
.home-logo .brand-wordmark { width: 104px; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 56px; max-width: 960px; margin: 0 auto; padding: 60px 0 8px; }
.home-hero > * { grid-column: 1; }
.home-swan { --pond-h: 44px; --pond-core-h: 16px; grid-column: 2; grid-row: 1 / span 5; width: 288px; height: 304px; padding: 0 16px 15px; }
#home-title { margin: 0 0 14px; font-size: clamp(32px, 5vw, 52px); line-height: 1.06; letter-spacing: -.035em; }
#home-title:focus { outline: none; }
.home-lead { max-width: 540px; margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.home-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.home-trust { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.home-trust .icon { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.home-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 960px; margin: 52px auto 0; }
.feature { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--ink); text-align: left; box-shadow: var(--shadow-sm); }
.feature .tile-icon { width: 46px; height: 46px; flex-basis: 46px; border-radius: 14px; }
.feature-title { margin-top: 8px; font-size: 17px; }
.feature-text { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.feature-link { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; color: var(--accent-ink); }
.feature-link .icon { width: 16px; height: 16px; }
.home-status { margin: 16px 0 0; font-size: 13px; text-align: center; color: var(--ink-2); }
.home-status:empty { display: none; }
.home-footer { max-width: 960px; margin: 40px auto 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; text-align: center; color: var(--muted); }
.home-footer p { max-width: 520px; margin: 0 auto 4px; }
.home-footer-actions { justify-content: center; }

/* Страница «Подготовиться к разговору» */
.page > :not(.page-nav) { max-width: 720px; margin-left: auto; margin-right: auto; }
.page-nav { position: relative; max-width: 720px; margin-inline: auto; }
/* Логотип по центру шапки, чтобы бренд был на каждом экране (только картинка, без действия) */
.page-nav::after { content: ""; position: absolute; top: 50%; left: 50%; width: 148px; height: 41px; transform: translate(-50%, -50%); background: url("/swan.png") 0 50% / 36px 41px no-repeat, url("/wordmark.png") 100% 50% / 104px auto no-repeat; pointer-events: none; }
.back-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 10px; border: 0; border-radius: 22px; background: var(--frame-2); color: var(--frame-ink); font-size: 14px; font-weight: 600; }
.back-button .icon { width: 20px; height: 20px; }
.back-icon { transform: rotate(180deg); }
.page-intro { margin-top: 0; margin-bottom: 8px; padding-top: 36px; text-align: center; }
.big-tile { width: 60px; height: 60px; margin: 0 auto; border-radius: 18px; }
.big-tile .icon { width: 30px; height: 30px; }
#prepare-page-title { margin: 14px 0 8px; font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -.03em; }
#prepare-page-title:focus, #plan-title:focus, #rehearsal-title:focus { outline: none; }
.page-intro p { max-width: 540px; margin: 0 auto; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.step, .plan, .rehearsal { margin-top: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-sm); }
.step h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 18px; line-height: 1.3; }
.step-number { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 800; }
.step .tab-note { margin: -8px 0 12px; }
/* Карточки выбора: сам переключатель скрыт, но остаётся доступным с клавиатуры */
.choice, .segmented label, .check-chips label { position: relative; }
.choice-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice-body { position: relative; display: flex; align-items: center; gap: 12px; height: 100%; min-height: 66px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.choice-body:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.choice-body strong { display: block; font-size: 15px; }
.choice-body small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.choice-input:checked + .choice-body { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
/* Плитки в карточках выбора одного цвета; у выбранной — тёмная заливка и галочка, чтобы выбор был виден не только цветом */
.choice-body .tile-icon { background: var(--tile); color: var(--tile-ink); transition: background-color .15s ease, color .15s ease; }
.choice-input:checked + .choice-body .tile-icon { background: var(--primary); color: var(--on-primary); }
.choice-input:checked + .choice-body::after { content: "✓"; position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px var(--surface); }
.choice-input:focus-visible + * { outline: 3px solid var(--focus); outline-offset: 2px; }
.field { display: grid; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 600; }
.field-label { margin: 18px 0 8px; font-size: 14px; font-weight: 600; }
.segmented { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); }
.segmented label { flex: 1; }
.segmented span { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 10px; border-radius: 11px; color: var(--ink-2); font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; }
.segmented .choice-input:checked + span { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.step .summary-fields label { padding-right: 16px; }
#prep-fill { margin-top: 12px; }
.check-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.check-chips span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 22px; background: var(--surface); font-size: 14px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.check-chips span:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.check-chips .choice-input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.check-chips .choice-input:checked + span::before { content: "✓"; font-weight: 700; }
.make-plan { display: flex; width: 100%; margin-top: 22px; }
.plan-status { text-align: center; }
/* План разговора */
.plan { border: 1.5px solid var(--accent); box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 12%, transparent); }
.plan-head h2 { margin: 0 0 4px; font-size: 21px; }
.plan-head .tab-note { margin: 0; }
.plan-block { margin-top: 18px; }
.plan-block h3 { margin: 0 0 8px; font-size: 15px; }
.plan-block ul { margin: 0; padding-left: 20px; }
.plan-block li { margin: 4px 0; line-height: 1.5; }
.phrase { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; padding: 12px 14px; border-left: 3px solid var(--accent); border-radius: 6px 14px 14px 6px; background: var(--accent-soft); }
.phrase p { flex: 1; margin: 0; font-size: 15px; line-height: 1.5; }
.copy-chip { flex-shrink: 0; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--accent-ink); font-size: 12px; font-weight: 600; }
.plan-message { min-height: 140px; margin-bottom: 8px; resize: vertical; }
.checklist { display: grid; gap: 6px; }
.checklist label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); line-height: 1.45; cursor: pointer; }
.checklist input { flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.checklist label:has(input:checked) span { color: var(--muted); text-decoration: line-through; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
/* Репетиция: ИИ играет взрослого */
.rehearsal h2 { margin: 0 0 4px; font-size: 21px; }
.rehearsal-log { display: grid; gap: 10px; max-height: min(420px, 55dvh); margin: 14px 0; padding: 4px; overflow-y: auto; }
.rehearsal-line { display: grid; gap: 3px; max-width: 85%; }
.rehearsal-line.mine { justify-self: end; }
.rehearsal-who { font-size: 12px; color: var(--muted); }
.mine .rehearsal-who { text-align: right; }
.rehearsal-line p { margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--surface-2); color: var(--ink); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.mine p { background: var(--user-bubble); color: var(--user-ink); }
.pending p { min-width: 60px; min-height: 42px; }
#rehearsal-form { margin: 0; }
.feedback-card { margin-top: 16px; padding: 16px; border-radius: 16px; background: var(--calm-soft); }
.feedback-card h3 { margin: 0 0 8px; }
.feedback-card p { margin: 0; line-height: 1.55; white-space: pre-wrap; }
.page-note { max-width: 520px; margin: 24px auto 0; font-size: 12px; text-align: center; color: var(--muted); }
.page > .page-note { max-width: 520px; }

/* Лёгкий подъём карточек при наведении */
.starter-card, .feature, .prompt-chips button, .menu-row { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.starter-card:hover, button.feature:hover, .prompt-chips button:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* Широкий экран: боковая панель на каркасе, переписка — на отдельном листе */
@media (min-width: 960px) {
  .app { grid-template-columns: 300px minmax(0, 1fr); }
  .sidebar { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; padding: 14px 14px 16px; scrollbar-width: thin; scrollbar-color: var(--frame-3) transparent; }
  .topbar { min-height: 72px; padding: 12px 12px 12px 22px; }
  .topbar .brand, .menu-button { display: none; }
  .chat-heading { display: block; }
  .conversation { margin: 0 12px 12px 0; border-radius: var(--sheet-radius); }
  /* Рядом уже есть красная карточка с номером, поэтому «Помощь» здесь светлая: одна сплошная красная кнопка на экране */
  .help-button { background: var(--danger-soft-frame); color: var(--danger-ink-frame); box-shadow: inset 0 0 0 1.5px var(--danger-line-frame); }
  .help-button:not(:disabled):hover { background: var(--danger-soft-frame-hover); }
}
/* Планшет: герой поуже, лебедь поменьше */
@media (min-width: 761px) and (max-width: 1023px) {
  .home-hero { column-gap: 32px; padding-top: 48px; }
  .home-swan { --pond-h: 30px; --pond-core-h: 12px; width: 200px; height: 208px; padding: 0 12px 10px; }
}
/* Телефон: листы во всю ширину, окна выезжают снизу или открываются на весь экран */
@media (max-width: 760px) {
  :root { --nav-h: 64px; --sheet-radius: 24px; }
  #home-page, .page { min-height: calc(100dvh - var(--nav-h)); margin: var(--nav-h) 0 0; padding: 0 16px 28px; border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; }
  dialog { --pad: 20px; }
  .sheet { width: 100%; max-width: 540px; max-height: 85dvh; margin: auto auto 0; border-radius: 24px 24px 0 0; }
  .screen-dialog { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; --pad: 18px; }
  .sheet .dialog-body, .screen-dialog .dialog-body { padding-bottom: max(var(--pad), env(safe-area-inset-bottom)); }
  .home-hero { grid-template-columns: minmax(0, 1fr); padding: 28px 0 0; text-align: center; }
  .home-swan { --pond-h: 22px; --pond-core-h: 9px; grid-column: 1; grid-row: auto; width: 140px; height: 134px; margin: 0 auto 24px; padding: 0 14px 8px; }
  .page-nav::after { width: 32px; height: 36px; background: url("/swan.png") 50% 50% / contain no-repeat; }
  .home-lead { margin: 0 auto; font-size: 17px; }
  .home-cta { justify-content: center; }
  .home-features { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .home-cta > * { width: 100%; }
  .page-intro { padding-top: 26px; }
}
@media (max-width: 480px) {
  .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .page { padding: 0 14px 32px; }
  .step, .plan, .rehearsal { padding: 16px; border-radius: 20px; }
  .rehearsal-line { max-width: 92%; }
  /* На узком экране номер переносится под название, чтобы не сжимать текст в столбик */
  .contact-item { grid-template-columns: minmax(0, 1fr); }
  .contact-item .phone-number, .contact-item > .soft-button { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
  /* 112 на телефоне — во всю ширину карточки */
  .emergency-contact .phone-number { justify-self: stretch; min-height: 56px; margin: 10px 0 6px; font-size: 26px; }
}
@media (max-width: 420px) {
  .topbar .brand-wordmark { display: none; }
  .reply-actions, .reply-contacts { margin-left: 0; }
  .help-button, .exit-button { padding: 0 13px; }
  .prompt-chips button { font-size: 14px; }
  .welcome h2 { font-size: 24px; }
  .home-logo .brand-wordmark { width: 92px; }
}
@media (max-width: 359px) {
  .topbar { gap: 8px; padding: 8px 12px; }
  .toolbar-actions { gap: 6px; }
  .help-button, .exit-button { padding: 0 10px; font-size: 13px; }
  .message p { padding: 11px 13px; font-size: 15px; }
  .prompt-chips { grid-template-columns: minmax(0, 1fr); }
  .dialog-heading h2 { font-size: 18px; }
  .home-logo .brand-wordmark { display: none; }
  .page-nav::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .streaming p:empty::after, .pending p:empty::after { animation: none; background: var(--muted); box-shadow: 11px 0 var(--muted), 22px 0 var(--muted); }
  .starter-card:hover, button.feature:hover, .prompt-chips button:not(:disabled):hover { transform: none; }
}

/* Тёмная тема: по настройке устройства (подростки часто пишут ночью) или по кнопке «Тёмная тема».
   Кнопка ставит <html data-theme="light|dark">, и этот выбор сильнее настройки устройства.
   Каркас остаётся тем же зелёным, темнеет только лист с содержимым. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] {
  --frame: #0c3a32;
  --frame-2: #164c42;
  --frame-3: #1e5d51;
  --bg: #0a1512;
  --surface: #10201c;
  --surface-2: #162b25;
  --surface-3: #203a33;
  --ink: #e3f5ee;
  --ink-2: #b0cec4;
  --muted: #8aa99e;
  --line: #233a33;
  --line-input: #527a6c;
  --sheet-edge: rgba(150, 242, 205, .16);
  --accent: #3fd6a0;
  --accent-strong: #5ee6b0;
  --accent-soft: #133a2e;
  --accent-ink: #7fe3bd;
  --on-accent: #052019;
  --primary: #3fd6a0;
  --primary-hover: #5ee6b0;
  --on-primary: #052019;
  --primary-icon: #052019;
  --tile: #0c3a32;
  --tile-ink: #5ee6b0;
  --tile-calm: #0e3c46;
  --tile-calm-ink: #86e3ee;
  --calm: #5cc8d6;
  --calm-soft: #10303a;
  --danger: #c42b45;
  --danger-hover: #d63a55;
  --danger-soft: #3a1820;
  --danger-line: #6b2a3a;
  --danger-ink: #ffa3b4;
  --user-bubble: #155446;
  --user-ink: #f1fcf7;
  --focus-sheet: #5ee6b0;
  --mint: #3fbf93;
  --mint-glow: rgba(52, 199, 154, .09);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
  --swan-sheet: url("/swan.png");
  --pond: rgba(94, 230, 176, .13);
  --pond-core: rgba(0, 0, 0, .30);
  --danger-soft-frame: #4a1a26;
  --danger-ink-frame: #ffc2cd;
  --danger-line-frame: #e0566f;
  --danger-soft-frame-hover: #63243a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --frame: #0c3a32;
    --frame-2: #164c42;
    --frame-3: #1e5d51;
    --bg: #0a1512;
    --surface: #10201c;
    --surface-2: #162b25;
    --surface-3: #203a33;
    --ink: #e3f5ee;
    --ink-2: #b0cec4;
    --muted: #8aa99e;
    --line: #233a33;
    --line-input: #527a6c;
    --sheet-edge: rgba(150, 242, 205, .16);
    --accent: #3fd6a0;
    --accent-strong: #5ee6b0;
    --accent-soft: #133a2e;
    --accent-ink: #7fe3bd;
    --on-accent: #052019;
    --primary: #3fd6a0;
    --primary-hover: #5ee6b0;
    --on-primary: #052019;
    --primary-icon: #052019;
    --tile: #0c3a32;
    --tile-ink: #5ee6b0;
    --tile-calm: #0e3c46;
    --tile-calm-ink: #86e3ee;
    --calm: #5cc8d6;
    --calm-soft: #10303a;
    --danger: #c42b45;
    --danger-hover: #d63a55;
    --danger-soft: #3a1820;
    --danger-line: #6b2a3a;
    --danger-ink: #ffa3b4;
    --user-bubble: #155446;
    --user-ink: #f1fcf7;
    --focus-sheet: #5ee6b0;
    --mint: #3fbf93;
    --mint-glow: rgba(52, 199, 154, .09);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
    --swan-sheet: url("/swan.png");
    --pond: rgba(94, 230, 176, .13);
    --pond-core: rgba(0, 0, 0, .30);
    --danger-soft-frame: #4a1a26;
    --danger-ink-frame: #ffc2cd;
    --danger-line-frame: #e0566f;
    --danger-soft-frame-hover: #63243a;
  }
}

/* Карточка «Хочешь поговорить с человеком?» в тон каркасу. Красный остаётся только у 112. */
:root { --danger-on-frame: #ffa3b4; }
.side-help { --focus: var(--focus-frame); background: var(--frame-2); box-shadow: inset 0 0 0 1px var(--frame-line); color: var(--frame-ink); }
.side-help-title { color: var(--frame-ink); }
.side-help-title .icon { color: var(--frame-accent); }
.side-help .call-button { background: var(--frame-accent); color: var(--frame-accent-ink); box-shadow: none; }
.side-help .call-button:hover { background: var(--frame-accent-hover); }
.side-help-note { color: var(--frame-muted); }
.side-help-note a { color: var(--danger-on-frame); }
.side-help .text-button { color: var(--frame-accent); }

/* Кнопка «Помощь» и ссылка 112 тоже в цветах каркаса, без розового. */
.side-help-note a { color: var(--frame-ink); }
.help-button { background: rgba(94, 230, 176, .14); color: var(--frame-accent-hover); box-shadow: inset 0 0 0 1.5px rgba(94, 230, 176, .5); }
.help-button:not(:disabled):hover { background: rgba(94, 230, 176, .24); }
.help-button .icon { color: var(--frame-accent); }

/* «Контакты помощи» на главной: вторая кнопка рядом с «Начать разговор», без розового. */
.danger-outline { border-color: var(--primary); background: var(--surface); color: var(--accent-ink); }
.danger-outline .icon { color: var(--primary); }
.danger-outline:not(:disabled):hover { background: var(--accent-soft); color: var(--accent-ink); }

/* Каркас на 5% меньше: боковая панель, верхняя полоса и поля вокруг листа. */
:root { --nav-h: 68px; }
.topbar { min-height: 61px; padding: 8px 13px; }
#home-page, .page { min-height: calc(100dvh - var(--nav-h) - 11px); margin: var(--nav-h) 11px 11px; }
@media (min-width: 960px) {
  .app { grid-template-columns: 285px minmax(0, 1fr); }
  .topbar { min-height: 68px; padding: 11px 11px 11px 21px; }
  .conversation { margin: 0 11px 11px 0; }
}
@media (max-width: 760px) {
  :root { --nav-h: 61px; }
  #home-page, .page { min-height: calc(100dvh - var(--nav-h)); margin: var(--nav-h) 0 0; }
}

/* Местные контакты двумя группами: город и весь регион. */
.contact-group-label { margin: 14px 0 4px; }
.contact-group-label:first-child { margin-top: 8px; }

/* Окна: под скруглёнными верхними углами фон окна того же цвета, что заголовок, поэтому по краю угла нет светлой каймы. */
dialog:has(> .dialog-heading:first-child) { background: linear-gradient(var(--frame) 0 32px, var(--surface) 32px); }
/* Сообщение под кнопкой «Заполнить из разговора» не наезжает на кнопку (отрицательный отступ нужен только подписи под заголовком шага). */
.step .tab-note[role="status"] { margin: 10px 0 0; }
.step .tab-note[role="status"]:empty { margin: 0; }

/* «Если ты в опасности» оформлена как обычная карточка контакта и стоит первой в списке «По всей России»: белый фон, мятная кнопка номера. */
.emergency-contact { margin: 8px 0; padding: 12px 14px 12px 50px; border: 1px solid var(--line); background: var(--surface); }
.emergency-contact h3 { color: var(--ink); }
.emergency-contact .contact-icon { background: var(--calm-soft); color: var(--calm); }
.emergency-contact .phone-number { min-width: 0; min-height: 42px; padding: 6px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); font-size: 16px; font-weight: 700; letter-spacing: normal; box-shadow: none; }
.emergency-contact .phone-number:hover { background: color-mix(in srgb, var(--accent-soft) 85%, var(--accent) 15%); }
@media (max-width: 480px) {
  .emergency-contact .phone-number { justify-self: start; min-height: 42px; margin: 8px 0 0; font-size: 16px; }
}

/* Окно помощи: подписи под полем города короткие и одного мелкого шрифта; строка про справочник видна только вместе с найденными контактами. */
.local-help #contacts-status { font-size: 12px; line-height: 1.5; color: var(--muted); }
#local-contacts:empty + .small-note { display: none; }

/* Шаг 2 «О чём разговор»: «Заполнить из разговора» и «Скопировать» рядом, с промежутком; на узком экране переносятся. */
.prep-fill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.prep-fill-row #prep-fill { margin-top: 0; }