/* ============================================================================
   Голосовой ассистент — дизайн-система.
   Светлый фон, воздух, мягкие сине-голубые акценты, деликатные тени.
   Единая шкала радиусов/теней/анимаций; никаких случайных значений по месту.
   ========================================================================== */

:root {
  /* Палитра: холодный светлый фон, синий акцент, фиолетовый — обработка */
  --bg: #f6f8fc;
  --bg-soft: #eef3fb;
  --surface: #ffffff;
  --surface-2: #fbfcff;

  --brand-500: #2f6bff;
  --brand-600: #2160e6;
  --brand-400: #5b8cff;
  --brand-300: #9dbaff;
  --brand-100: #e4ecff;
  --brand-50: #f2f6ff;

  --violet-500: #7c5cff;
  --violet-300: #b9a8ff;
  --violet-50: #f3f0ff;

  --green-500: #16a34a;
  --green-50: #eafaf0;
  --red-500: #e5484d;
  --red-50: #fdeeee;
  --amber-500: #d9822b;

  --text: #101828;
  --text-2: #475467;
  --text-3: #8a94a6;
  --border: #e6ebf4;
  --border-strong: #d5dEEA;

  /* Радиусы — единая шкала */
  --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-20: 20px; --r-24: 24px; --r-full: 999px;

  /* Тени — очень мягкие */
  --sh-1: 0 4px 20px rgba(16, 24, 40, .06);
  --sh-2: 0 8px 32px rgba(16, 24, 40, .08);
  --sh-3: 0 20px 60px rgba(16, 24, 40, .12);
  --glow-blue: 0 0 0 10px rgba(47, 107, 255, .06), 0 18px 44px rgba(47, 107, 255, .22);
  --glow-violet: 0 0 0 10px rgba(124, 92, 255, .07), 0 18px 44px rgba(124, 92, 255, .24);

  /* Отступы (8px-система) */
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-48: 48px;

  /* Движение */
  --t-hover: 150ms;
  --t-press: 100ms;
  --t-state: 320ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --topbar-h: 60px;
  --composer-h: 76px;
}

* { box-sizing: border-box; }

/* Атрибут hidden обязан побеждать display у компонентов (иначе скрытые кнопки видны) */
[hidden] { display: none !important; }

/* Полосы прокрутки: тонкие, полупрозрачные, появляются деликатно.
   Системные широкие плиты выглядят чужеродно в такой лёгкой раскладке. */
* { scrollbar-width: thin; scrollbar-color: rgba(16, 24, 40, .14) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(16, 24, 40, .14); border-radius: var(--r-full); }
*::-webkit-scrollbar-thumb:hover { background: rgba(16, 24, 40, .24); }
*::-webkit-scrollbar-corner { background: transparent; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(1100px 620px at 78% -12%, #eaf1ff 0%, rgba(234, 241, 255, 0) 62%),
    radial-gradient(900px 520px at 8% 4%, #f0f5ff 0%, rgba(240, 245, 255, 0) 58%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-8);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================ Каркас экрана */
.app {
  height: calc(100dvh - 32px);
  margin: 16px auto;
  display: flex;
  flex-direction: column;
  max-width: 760px;
  padding: 0 var(--s-24);
  transition: max-width var(--t-state) var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
  /* Карточка приложения — как в макете: белая плита со скруглением и мягкой тенью */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-24);
  box-shadow: var(--sh-2);
}
/* Декоративные круги на фоне — лёгкая «космическая» глубина из макета */
body::before, body::after {
  content: ''; position: fixed; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle at 30% 30%, rgba(147,183,255,.28), rgba(147,183,255,0) 70%);
}
body::before { width: 420px; height: 420px; top: -120px; right: -80px; }
body::after  { width: 320px; height: 320px; bottom: -100px; left: -60px; }

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding-top: env(safe-area-inset-top);
  flex: 0 0 auto;
}
.topbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.topbar__logo {
  width: 28px; height: 28px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(160deg, var(--brand-400), var(--brand-600));
  display: grid; place-items: center; color: #fff; box-shadow: var(--sh-1);
}
.topbar__logo svg { width: 17px; height: 17px; }
/* Логотип-иконка приложения: показываем целиком, без синей плашки под ней */
.topbar__logo svg { width: 19px; height: 19px; }
.topbar__logout { padding-left: 10px; padding-right: 12px; }
.topbar__title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__spacer { flex: 1 1 auto; }
.topbar__actions { display: flex; align-items: center; gap: var(--s-8); min-width: 0; flex: 0 1 auto; }
.app[data-compact="1"] .topbar__logo { display: none; }

.main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding-top: clamp(8px, 4vh, 40px);
}

.footer {
  flex: 0 0 auto;
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.6;
  padding: var(--s-16) 0 var(--s-24);
  border-top: 1px solid var(--border);
  margin-top: var(--s-16);
}
.footer a { color: var(--brand-600); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ================================================================= Кнопки */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-12);
  padding: 10px 16px;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease), box-shadow var(--t-hover) var(--ease),
              background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), opacity var(--t-hover);
  white-space: nowrap;
}
.btn__icon { display: inline-flex; }
.btn__icon svg { width: 17px; height: 17px; }
.btn--sm { padding: 7px 12px; font-size: 13px; border-radius: var(--r-8); }
.btn--lg { padding: 13px 22px; font-size: 15px; border-radius: var(--r-16); }

.btn--primary { background: linear-gradient(180deg, var(--brand-500), var(--brand-600)); color: #fff; box-shadow: 0 6px 18px rgba(47, 107, 255, .24); }
.btn--primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(47, 107, 255, .3); }
.btn--primary:active:not(:disabled) { transform: translateY(0) scale(.98); }

.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--sh-1); }
.btn--secondary:hover:not(:disabled) { border-color: var(--brand-300); transform: translateY(-1px); }
.btn--secondary:active:not(:disabled) { transform: scale(.98); }

.btn--quiet { background: transparent; color: var(--text-2); border-color: transparent; }
.btn--quiet:hover:not(:disabled) { background: var(--bg-soft); color: var(--text); }

.btn--danger { background: var(--surface); color: var(--red-500); border-color: #f4cdcd; }
.btn--danger:hover:not(:disabled) { background: var(--red-50); }

.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.btn__spinner { display: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin 700ms linear infinite; }
.btn.is-loading .btn__label, .btn.is-loading .btn__icon { visibility: hidden; }
.btn.is-loading .btn__spinner { display: block; position: absolute; }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-12);
  border: 1px solid transparent;
  background: transparent; color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease),
              transform var(--t-press) var(--ease), border-color var(--t-hover) var(--ease), box-shadow var(--t-hover);
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn--sm { width: 30px; height: 30px; border-radius: var(--r-8); }
.icon-btn--sm svg { width: 16px; height: 16px; }
.icon-btn:hover:not(:disabled) { background: var(--bg-soft); color: var(--text); }
.icon-btn:active:not(:disabled) { transform: scale(.94); }
.icon-btn.is-active { color: var(--brand-600); background: var(--brand-50); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn--solid { background: linear-gradient(180deg, var(--brand-500), var(--brand-600)); color: #fff; box-shadow: 0 6px 16px rgba(47, 107, 255, .28); }
.icon-btn--solid:hover:not(:disabled) { transform: translateY(-1px); background: linear-gradient(180deg, var(--brand-400), var(--brand-500)); color: #fff; }
.icon-btn--solid:disabled { background: #e7ebf2; color: var(--text-3); box-shadow: none; opacity: 1; }

/* ============================================================ Статус-бейдж */
.status-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 500; color: var(--text-2);
  box-shadow: var(--sh-1);
  transition: color var(--t-state), border-color var(--t-state);
}
.status-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: 0 0 auto; }
.status-badge[data-state="connected"] .status-badge__dot { background: var(--green-500); }
.status-badge[data-state="connected"] { color: var(--green-500); }
.status-badge[data-state="connecting"] .status-badge__dot { background: var(--brand-500); animation: pulse-dot 1.4s var(--ease) infinite; }
.status-badge[data-state="listening"] .status-badge__dot { background: var(--brand-400); animation: pulse-dot 1.6s var(--ease) infinite; }
.status-badge[data-state="listening"] { color: var(--brand-600); }
.status-badge[data-state="processing"] .status-badge__dot { background: var(--violet-500); animation: pulse-dot 1.2s var(--ease) infinite; }
.status-badge[data-state="processing"] { color: var(--violet-500); }
.status-badge[data-state="speaking"] .status-badge__dot { background: var(--brand-500); }
.status-badge[data-state="error"] .status-badge__dot { background: var(--red-500); }
.status-badge[data-state="error"] { color: var(--red-500); border-color: #f4cdcd; background: var(--red-50); }
.status-badge[data-state="offline"] .status-badge__dot { background: var(--text-3); }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }

/* ======================================================== Голосовая кнопка */
.voice {
  position: relative;
  display: flex; flex-direction: column; align-items: center; flex: 0 0 auto;
  padding: clamp(16px, 5vh, 44px) 0 clamp(12px, 3vh, 28px);
  flex: 0 0 auto;
}
.voice__halo, .voice__wave {
  position: absolute; top: clamp(16px, 5vh, 44px); left: 50%;
  width: var(--orb, 132px); height: var(--orb, 132px);
  transform: translateX(-50%);
  pointer-events: none;
}
.voice__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--brand-300);
  opacity: 0; transform: scale(1);
}
.voice__btn {
  position: relative;
  width: var(--orb, 132px); height: var(--orb, 132px);
  border-radius: 50%;
  border: none; cursor: pointer;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--brand-400) 0%, var(--brand-600) 100%);
  color: #fff;
  box-shadow: var(--glow-blue);
  transition: transform var(--t-press) var(--ease), box-shadow var(--t-state) var(--ease), background var(--t-state) var(--ease);
}
.voice__btn svg { width: 42px; height: 42px; }
.voice__icon { display: grid; place-items: center; transition: opacity var(--t-state) var(--ease), transform var(--t-state) var(--ease); }
.voice__icon--warn { position: absolute; opacity: 0; transform: scale(.7); }
.voice__dots { position: absolute; display: flex; gap: 7px; opacity: 0; transform: scale(.7); transition: opacity var(--t-state), transform var(--t-state); }
.voice__dots i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: dots 1.4s var(--ease) infinite; }
.voice__dots i:nth-child(2) { animation-delay: .18s; }
.voice__dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dots { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

.voice__btn:hover { transform: scale(1.035); box-shadow: 0 0 0 14px rgba(47, 107, 255, .07), 0 22px 52px rgba(47, 107, 255, .28); }
.voice__btn:active { transform: scale(.965); transition-duration: var(--t-press); }
.voice__btn:disabled { cursor: not-allowed; }

.voice__title { margin-top: 42px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; text-align: center; }
.voice__hint { margin-top: 5px; font-size: 13.5px; color: var(--text-3); text-align: center; max-width: 34ch; }
.voice__retry { margin-top: var(--s-12); display: none; }

/* --- Состояние: неактивна / подключено (светлая поверхность, тонкое кольцо) */
.voice[data-state="idle"] .voice__btn,
.voice[data-state="connected"] .voice__btn {
  background: linear-gradient(160deg, var(--brand-400) 0%, var(--brand-600) 100%);
  color: #fff;
  box-shadow: var(--glow-blue);
}

/* --- Подключение */
.voice[data-state="connecting"] .voice__ring { animation: ring-out 2s var(--ease) infinite; opacity: .5; }
.voice[data-state="connecting"] .voice__ring--2 { animation-delay: .6s; }
.voice[data-state="connecting"] .voice__ring--3 { animation-delay: 1.2s; }

/* --- Слушаю: кольца + радиальная волна */
.voice[data-state="listening"] .voice__btn { box-shadow: 0 0 0 16px rgba(47, 107, 255, .08), 0 20px 50px rgba(47, 107, 255, .3); }
.voice[data-state="listening"] .voice__ring { animation: ring-out 2.4s var(--ease) infinite; opacity: .55; }
.voice[data-state="listening"] .voice__ring--2 { animation-delay: .8s; }
.voice[data-state="listening"] .voice__ring--3 { animation-delay: 1.6s; }
@keyframes ring-out {
  0% { opacity: .55; transform: scale(1); }
  70% { opacity: .06; transform: scale(1.55); }
  100% { opacity: 0; transform: scale(1.7); }
}

.voice__bar {
  position: absolute; left: 50%; top: 50%;
  width: 2px; height: calc(10px + var(--h, 0) * 26px);
  margin-left: -1px;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, var(--brand-400), rgba(91, 140, 255, 0));
  border-radius: var(--r-full);
  opacity: 0;
  transition: height 90ms linear, opacity var(--t-state);
  /* Отталкиваем штрих за край круга */
  translate: 0 calc(var(--orb, 132px) / 2 + 6px);
}
.voice[data-state="listening"] .voice__bar { opacity: .85; }

/* --- Обработка: фиолетовый, точки вместо микрофона, медленное вращение */
.voice[data-state="processing"] .voice__btn {
  background: linear-gradient(160deg, var(--violet-300) 0%, var(--violet-500) 100%);
  box-shadow: var(--glow-violet);
}
.voice[data-state="processing"] .voice__icon { opacity: 0; transform: scale(.6); }
.voice[data-state="processing"] .voice__dots { opacity: 1; transform: scale(1); }
.voice[data-state="processing"] .voice__halo { animation: slow-spin 3.4s linear infinite; }
.voice[data-state="processing"] .voice__ring { opacity: .35; border-color: var(--violet-300); border-style: dashed; }
@keyframes slow-spin { to { transform: translateX(-50%) rotate(360deg); } }

/* --- Отвечает */
.voice[data-state="speaking"] .voice__btn { background: linear-gradient(160deg, var(--brand-400), var(--brand-600)); box-shadow: 0 0 0 12px rgba(47, 107, 255, .07), 0 18px 44px rgba(47, 107, 255, .26); animation: breathe 2.4s var(--ease) infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* --- Ошибка / нет сети: спокойная индикация, без красного экрана */
.voice[data-state="error"] .voice__btn,
.voice[data-state="offline"] .voice__btn {
  background: var(--surface);
  color: var(--red-500);
  box-shadow: 0 0 0 1px #f4cdcd, var(--sh-2);
}
.voice[data-state="offline"] .voice__btn { color: var(--text-3); box-shadow: 0 0 0 1px var(--border-strong), var(--sh-1); }
.voice[data-state="error"] .voice__icon,
.voice[data-state="offline"] .voice__icon { opacity: 0; transform: scale(.6); }
.voice[data-state="error"] .voice__icon--warn,
.voice[data-state="offline"] .voice__icon--warn { opacity: 1; transform: scale(1); }
.voice[data-state="error"] .voice__title { color: var(--red-500); }
.voice[data-state="error"] .voice__retry { display: inline-flex; }

/* ================================================================= Диалог */
.thread {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--s-12);
  padding: var(--s-8) 2px var(--s-16);
}
/* Пустая лента остаётся распоркой: панель ввода прижата к низу карточки */
.thread:empty { padding: 0; }

.msg-row { display: flex; flex-direction: column; gap: 5px; max-width: 100%; }
.msg-row--user { align-items: flex-end; }
.msg-row--assistant, .msg-row--system { align-items: flex-start; }

.msg {
  display: flex; gap: 10px; align-items: flex-start;
  max-width: min(86%, 620px);
  padding: 10px 14px;
  border-radius: var(--r-16);
  box-shadow: var(--sh-1);
  animation: msg-in var(--t-state) var(--ease) both;
}
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.msg-row--user .msg {
  background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
  color: #fff;
  border-bottom-right-radius: var(--r-8);
}
.msg-row--assistant .msg {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: var(--r-8);
}
.msg-row--system .msg {
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--text-2);
  font-size: 13.5px;
  box-shadow: none;
}
.msg__avatar { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); margin-top: 1px; }
.msg__avatar svg { width: 14px; height: 14px; }
.msg__col { min-width: 0; }
.msg__who { font-size: 11px; font-weight: 600; opacity: .65; margin-bottom: 2px; }
.msg__body { white-space: pre-wrap; word-wrap: break-word; }
.msg__time { font-size: 11px; opacity: .55; margin-top: 3px; }
.msg-actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--t-hover); }
.msg-row:hover .msg-actions, .msg-row:focus-within .msg-actions { opacity: 1; }

/* ============================================================ Панель ввода */
.composer-wrap {
  position: sticky; bottom: 0;
  width: 100%;
  flex: 0 0 auto;
  padding: var(--s-12) 0 var(--s-8);
  background: linear-gradient(180deg, rgba(246, 248, 252, 0) 0%, var(--bg) 26%);
}
.composer {
  display: flex; align-items: flex-end; gap: var(--s-8);
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-20);
  box-shadow: var(--sh-2);
  transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.composer:focus-within { border-color: var(--brand-300); box-shadow: 0 0 0 4px rgba(47, 107, 255, .08), var(--sh-2); }
.composer.is-error { border-color: #f0bcbc; }

.field { flex: 1 1 auto; min-width: 0; }
.field__input {
  width: 100%;
  border: none; background: transparent; outline: none;
  padding: 9px 2px;
  resize: none;
  max-height: 148px;
  line-height: 1.45;
}
.field__input::placeholder { color: var(--text-3); }
.field__input:disabled { color: var(--text-3); }
.field__error { display: none; }
.field.is-error ~ * { }

.attach-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 var(--s-8); }
.attach-row:empty { display: none; }

.file-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-full); box-shadow: var(--sh-1);
  max-width: 260px;
}
.file-chip__icon { color: var(--brand-600); display: inline-flex; }
.file-chip__icon svg { width: 15px; height: 15px; }
.file-chip__col { display: flex; flex-direction: column; min-width: 0; }
.file-chip__name { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip__meta { font-size: 11px; color: var(--text-3); }

/* ============================================== Быстрые действия (чипы) ====
   Ряд кнопок под лентой: «Ответить», «Лайк», «Читать полностью», «Время»,
   «Завершить», а также варианты выбора (ask_choice). Ни одна из них ничего не
   отправляет — только ставит задачу ассистенту; отправка по-прежнему живёт
   исключительно за кнопкой «Подтвердить» в черновике. */
.quick-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: var(--s-8) 0 0;
}
.quick-row[hidden] { display: none; }
.quick-row__title { width: 100%; font-size: 12.5px; color: var(--text-3); margin-bottom: 2px; }
.quick-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  font-size: 13px; font-weight: 500; line-height: 1;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-full);
  box-shadow: var(--sh-1); cursor: pointer;
  transition: border-color var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease), transform var(--t-state) var(--ease);
}
.quick-chip:hover { border-color: var(--brand-600); box-shadow: var(--sh-2); }
.quick-chip:active { transform: translateY(1px); }
.quick-chip__hint { font-size: 11px; color: var(--text-3); font-weight: 400; }

/* Баннер самодиагностики: интеграция отвалилась — сообщаем ДО того, как
   пользователь упрётся в отказ сам. */
.banner {
  padding: 10px 12px; border-radius: var(--r-12);
  font-size: 13px; margin-bottom: var(--s-8);
}
.banner[hidden] { display: none; }
.banner--warn { background: var(--red-50); color: #a33; border: 1px solid #f4cdcd; }

/* ====================================================== Встроенные сообщения */
.inline-msg {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-12);
  font-size: 13.5px;
  margin-bottom: var(--s-8);
  animation: msg-in var(--t-state) var(--ease) both;
}
.inline-msg__icon { display: inline-flex; flex: 0 0 auto; }
.inline-msg__icon svg { width: 18px; height: 18px; }
.inline-msg__text { flex: 1 1 auto; }
.inline-msg--error { background: var(--red-50); color: #a33; border: 1px solid #f4cdcd; }
.inline-msg--offline { background: var(--bg-soft); color: var(--text-2); border: 1px solid var(--border-strong); }
.inline-msg--info { background: var(--brand-50); color: var(--text-2); border: 1px solid var(--brand-100); }

/* ================================================================ Разделы */
.section { width: 100%; display: none; flex-direction: column; gap: var(--s-16); padding-bottom: var(--s-24); }
/* min-height:0 обязателен: без него лента диалога не ограничена по высоте и
   последние сообщения уезжают под панель ввода вместо прокрутки. */
.section.is-active { display: flex; flex: 1 1 auto; min-height: 0; }
#section-chat { gap: 0; padding-bottom: 0; }
.section__head { display: flex; align-items: flex-start; gap: var(--s-12); }
.section__title { font-size: 22px; font-weight: 650; letter-spacing: -.02em; margin: 0; }
.section__subtitle { color: var(--text-3); font-size: 13.5px; margin: 3px 0 0; }

/* В разделах карточка шире: узкая колонка хороша для разговора, но тарифы в неё
   не помещаются. Тарифов четыре — при 1060px они шли «3 + 1», при 1180px встают в ряд. */
.app:has(.sections.is-open) { max-width: 1180px; }

/* Разделы: боковое меню + содержимое. Открываются поверх разговора отдельным экраном. */
.sections { display: none; width: 100%; gap: var(--s-24); }
.sections.is-open { display: flex; flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%; }
/* Воздух вокруг содержимого раздела: иначе тени карточек срезаются краем прокрутки */
.sections__body { padding: 4px 6px 32px; }
.sections__nav { margin: 4px 0 4px 4px; }
.sections__nav {
  flex: 0 0 196px;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-8);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-20); box-shadow: var(--sh-1);
  align-self: flex-start; position: sticky; top: var(--s-16);
}
.sections__back { justify-content: flex-start; margin-bottom: var(--s-4); }
.sections__nav .nav-item { width: 100%; justify-content: flex-start; }
.sections__body { flex: 1 1 auto; min-width: 0; }

.nav { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-16); box-shadow: var(--sh-1); }
.nav-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: none; background: transparent;
  border-radius: var(--r-12); cursor: pointer;
  color: var(--text-2); font-size: 13.5px; font-weight: 500;
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.nav-item__icon { display: inline-flex; }
.nav-item__icon svg { width: 17px; height: 17px; }
.nav-item:hover { background: var(--bg-soft); color: var(--text); }
.nav-item.is-active { background: var(--brand-50); color: var(--brand-600); font-weight: 600; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-20);
  box-shadow: var(--sh-1);
  padding: var(--s-16);
}
.card__title { font-size: 13px; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--s-12); }

/* Коннекторы */
.conn-list { display: flex; flex-direction: column; gap: var(--s-8); }
.conn-empty, .conn-loading { padding: 18px; text-align: center; color: var(--text-3); font-size: 13.5px;
  background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--r-16); }
.conn-card {
  display: flex; align-items: center; gap: var(--s-12);
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-16); box-shadow: var(--sh-1);
  transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), transform var(--t-hover);
}
.conn-card:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); }
.conn-card__icon { width: 34px; height: 34px; border-radius: var(--r-8); display: grid; place-items: center; background: var(--bg-soft); color: var(--brand-600); flex: 0 0 auto; }
.conn-card__icon svg { width: 18px; height: 18px; }
.conn-card__col { flex: 1 1 auto; min-width: 0; }
.conn-card__name { font-weight: 600; font-size: 14.5px; }
.conn-card__desc { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.conn-state { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: var(--r-full); background: var(--bg-soft); color: var(--text-2); white-space: nowrap; }
.conn-state[data-state="connected"] { background: var(--green-50); color: var(--green-500); }
.conn-state[data-state="error"] { background: var(--red-50); color: var(--red-500); }
.conn-state[data-state="reauth"] { background: #fff5e8; color: var(--amber-500); }
.conn-state[data-state="connecting"] { background: var(--brand-50); color: var(--brand-600); }

/* Настройки */
.settings-group { display: flex; flex-direction: column; gap: 2px; }
.toggle-row, .field-row {
  display: flex; align-items: center; gap: var(--s-16);
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}
.settings-group > *:last-child { border-bottom: none; }
.toggle-row { cursor: pointer; }
.toggle-row__col, .field-row__col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.toggle-row__label, .field-row__label { font-size: 14px; font-weight: 500; }
.toggle-row__hint, .field-row__hint { font-size: 12.5px; color: var(--text-3); }

.toggle { position: relative; flex: 0 0 auto; }
.toggle__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.toggle__track {
  display: block; width: 44px; height: 26px; border-radius: var(--r-full);
  background: #d7dfea; transition: background-color var(--t-state) var(--ease);
  position: relative;
}
.toggle__track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .18);
  transition: transform var(--t-state) var(--ease);
}
.toggle__input:checked + .toggle__track { background: var(--brand-500); }
.toggle__input:checked + .toggle__track::after { transform: translateX(18px); }
.toggle__input:disabled + .toggle__track { opacity: .45; cursor: not-allowed; }
.toggle__input:focus-visible + .toggle__track { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.select { position: relative; flex: 0 0 auto; }
.select__el {
  appearance: none; -webkit-appearance: none;
  padding: 8px 32px 8px 12px;
  border-radius: var(--r-12); border: 1px solid var(--border-strong);
  background: var(--surface); font-size: 13.5px; font-weight: 500;
  cursor: pointer; min-width: 148px;
  transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover);
}
.select__el:hover { border-color: var(--brand-300); }
.select__el:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 4px rgba(47, 107, 255, .1); }
.select__el:disabled { opacity: .5; cursor: not-allowed; }
.select__chevron { position: absolute; right: 9px; top: 50%; transform: translateY(-50%) rotate(90deg); color: var(--text-3); pointer-events: none; display: inline-flex; }
.select__chevron svg { width: 15px; height: 15px; }

/* Тарифы */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: var(--s-16); padding-top: 12px; }
.price-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-12);
  padding: var(--s-24) var(--s-16) var(--s-16);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-20); box-shadow: var(--sh-1);
  transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), border-color var(--t-hover);
}
.price-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.price-card[data-popular="1"], .price-card:has(.price-card__tag) { border-color: var(--brand-300); box-shadow: var(--sh-2); }
.price-card__tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--brand-500), var(--brand-600)); color: #fff;
  font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: var(--r-full);
  box-shadow: 0 6px 16px rgba(47, 107, 255, .28); white-space: nowrap;
}
.price-card__name { font-size: 16px; font-weight: 650; margin: 0; }
.price-card__price { display: flex; align-items: baseline; gap: 5px; }
.price-card__amount { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.price-card__period { font-size: 13px; color: var(--text-3); }
.price-card__desc { font-size: 12.5px; color: var(--text-3); margin: 0; }
.price-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; }
.price-card__item { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.price-card__item--muted { color: var(--text-3); padding-left: 23px; }
.price-card__check { color: var(--green-500); display: inline-flex; flex: 0 0 auto; margin-top: 1px; }
.price-card__check svg { width: 15px; height: 15px; }
.price-card[data-state="current"] { border-color: var(--green-500); }
.price-card[data-state="failed"] { border-color: #f4cdcd; }
.pay-note { text-align: center; color: var(--text-3); font-size: 12.5px; display: flex; align-items: center; justify-content: center; gap: 7px; }

/* =============================================== Модальные окна и тосты */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 24, 40, .34);
  backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: var(--s-24);
  animation: fade-in 180ms var(--ease) both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: min(460px, 100%);
  background: var(--surface); border-radius: var(--r-20);
  box-shadow: var(--sh-3); padding: var(--s-16);
  animation: modal-in var(--t-state) var(--ease) both;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal__head { display: flex; align-items: center; gap: var(--s-12); margin-bottom: var(--s-12); }
.modal__title { font-size: 17px; font-weight: 650; margin: 0; flex: 1 1 auto; }
.modal__body { color: var(--text-2); font-size: 14px; }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--s-8); margin-top: var(--s-16); }

.toast-host { position: fixed; left: 50%; bottom: calc(var(--composer-h) + 24px); transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: rgba(16, 24, 40, .92); color: #fff;
  padding: 9px 16px; border-radius: var(--r-full);
  font-size: 13px; box-shadow: var(--sh-2);
  opacity: 0; transform: translateY(8px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.toast.is-in { opacity: 1; transform: none; }
.toast--error { background: var(--red-500); }
.toast--success { background: var(--green-500); }

/* Подсказка */
.has-tip { position: relative; }
.has-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: rgba(16, 24, 40, .92); color: #fff; font-size: 12px;
  padding: 5px 9px; border-radius: var(--r-8); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--t-hover), transform var(--t-hover);
  z-index: 20;
}
.has-tip:hover::after, .has-tip:focus-visible::after { opacity: 1; transform: translateX(-50%); }

/* ========================================================= Подтверждение */
.pending {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--brand-100);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--r-16);
  padding: var(--s-16);
  box-shadow: var(--sh-2);
  margin-bottom: var(--s-12);
  animation: msg-in var(--t-state) var(--ease) both;
}
.pending__title { font-size: 12px; font-weight: 650; color: var(--brand-600); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--s-8); }
.pending__body { font-size: 14px; line-height: 1.55; }
.pending__body b { font-weight: 600; }
.pending__actions { display: flex; gap: var(--s-8); margin-top: var(--s-16); flex-wrap: wrap; }
.pending__edit { margin-top: var(--s-12); display: flex; flex-direction: column; gap: var(--s-8); }
.edit-field { display: flex; flex-direction: column; gap: 4px; }
.edit-field span { font-size: 12px; color: var(--text-3); font-weight: 500; }
.edit-field input, .edit-field textarea {
  border: 1px solid var(--border-strong); border-radius: var(--r-8);
  padding: 8px 10px; font-size: 14px; background: var(--surface-2); resize: vertical;
}
.edit-field input:focus, .edit-field textarea:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(47, 107, 255, .1); }

/* ============================================================ Адаптивность */
@media (max-width: 640px) {
  .app { padding: 0 var(--s-16); margin: 8px; width: auto; height: calc(100dvh - 16px); border-radius: var(--r-20); }
  /* «Выйти» на телефоне — только иконка: подпись распирала шапку и выдавливала
     кнопки панели ввода за экран. */
  .topbar__logout .btn__label { display: none; }
  .topbar__logout { padding: 8px; }
  .status-badge { max-width: 148px; }
  .status-badge__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .voice { --orb: 108px; padding-top: var(--s-16); }
  .voice__btn svg { width: 36px; height: 36px; }
  .voice__title { font-size: 19px; margin-top: var(--s-16); }
  /* На телефоне боковое меню разделов становится горизонтальной лентой сверху */
  .sections { flex-direction: column; gap: var(--s-16); }
  .sections__nav {
    flex: 0 0 auto; flex-direction: row; overflow-x: auto;
    position: static; scrollbar-width: none;
  }
  .sections__nav::-webkit-scrollbar { display: none; }
  .sections__nav .nav-item { width: auto; white-space: nowrap; }
  .sections__back { order: -1; }
  .price-grid { grid-template-columns: 1fr; }
  .msg { max-width: 92%; }
  .topbar__title { font-size: 14px; }
  .composer-wrap { padding-bottom: max(var(--s-8), env(safe-area-inset-bottom)); }
}

@media (max-width: 560px) {
  .topbar__title { display: none; }
}

@media (max-width: 380px) {
  .voice { --orb: 96px; }
  .status-badge__text { display: none; }
  .status-badge { padding: 6px; }
}

/* Крупные экраны: чуть больше воздуха */
@media (min-width: 1100px) {
  .voice { --orb: 148px; }
}

/* ========================================== Уважение к отключённым анимациям */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Состояние всё равно должно читаться — усиливаем статические различия */
  .voice[data-state="listening"] .voice__ring { opacity: .5; transform: scale(1.3); }
  .voice[data-state="processing"] .voice__ring { opacity: .4; border-style: dashed; }
  .voice[data-state="listening"] .voice__bar { opacity: .7; }
}

/* Печать не нужна — но пусть не ломается */
@media print { .composer-wrap, .topbar__actions { display: none; } }