/* Тёмная тема без переключателя: ассистент открывают на телефоне, часто вечером.
   Светлую добавим, если попросят - лишний тумблер сейчас только шум. */
:root {
  --bg: #1b1c1e; --panel: #26282b; --text: #e8e8e8; --dim: #9aa0a6;
  --accent: #4c8bf5; --error: #ff6b6b; --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Отступы под «чёлку» и домашний индикатор вешаются на шапку и на строку
   ввода, а НЕ на body. Иначе безопасная зона съедает высоту у всего экрана
   разом, лента сжимается, а под строкой ввода остаётся мёртвая полоса. */
.screen { display: flex; flex-direction: column; height: 100vh; }
/* dvh - высота видимой области, а не «первоначальной». На iOS это разница
   между «строка ввода прижата к низу» и «висит где-то посередине». */
@supports (height: 100dvh) { .screen { height: 100dvh; } }
[hidden] { display: none !important; }

/* --- вход --- */
#login { align-items: center; justify-content: center; padding: 0 16px; }
#login-form { display: flex; flex-direction: column; gap: 12px; width: min(320px, 88vw); }
#login-form h1 { text-align: center; font-size: 22px; margin: 0 0 8px; }
input, textarea, select, button {
  font: inherit; color: var(--text); background: var(--panel);
  border: 1px solid #3a3d41; border-radius: var(--radius); padding: 12px;
}
button { cursor: pointer; }
#login-form button { background: var(--accent); border-color: var(--accent); font-weight: 600; }
.error { color: var(--error); font-size: 14px; margin: 0; }

/* --- чат --- */
#chat header {
  display: flex; gap: 8px; align-items: center;
  padding: calc(6px + env(safe-area-inset-top)) 12px 6px;
  border-bottom: 1px solid #303336; background: var(--bg);
}
#chat header select { padding: 8px 10px; max-width: 45%; }
#thread-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--dim); font-size: 14px;
}

/* Иконки нарисованы в разметке, а не эмодзи: эмодзи выглядят по-разному в
   каждой системе, а скрепка из шрифта на iOS вообще похожа на кнопку. */
.icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ghost { background: transparent; border-color: #3a3d41; }
#messages {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch;
}
/* Пустой разговор - не пустой экран: иначе непонятно, загрузилось ли вообще. */
#messages:empty::before {
  content: "Спросите что-нибудь. Можно текстом, голосом или прислать фото.";
  margin: auto; padding: 0 24px; text-align: center; color: var(--dim); font-size: 15px;
}
.bubble { max-width: 88%; padding: 10px 14px; border-radius: var(--radius); overflow-wrap: anywhere; }
.bubble.user { align-self: flex-end; background: var(--accent); }
.bubble.assistant { align-self: flex-start; background: var(--panel); }
.bubble.error { align-self: center; background: transparent; color: var(--error); font-size: 14px; text-align: center; }
.bubble.pending { min-width: 48px; min-height: 20px; opacity: .6; }
.bubble p:first-child { margin-top: 0; }
.bubble p:last-child { margin-bottom: 0; }
.bubble pre { background: #17181a; padding: 10px; border-radius: 8px; overflow-x: auto; }
.bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.bubble h2, .bubble h3 { font-size: 1.05em; margin: .6em 0 .3em; }

#ios-hint { margin: 0 14px 8px; padding: 10px 14px; background: var(--panel); border-radius: var(--radius); font-size: 14px; color: var(--dim); }
#ios-hint button { padding: 4px 10px; font-size: 13px; margin-left: 6px; }

#composer {
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid #303336; background: var(--bg);
}
#composer .row { display: flex; gap: 8px; align-items: flex-end; }
#composer textarea { flex: 1; resize: none; max-height: 160px; }
.icon { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; font-size: 18px; }
#send { background: var(--accent); border-color: var(--accent); }
#mic.recording { background: var(--error); border-color: var(--error); }
#attachment { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--dim); padding-bottom: 8px; }
#attachment button { padding: 2px 10px; }


/* --- запись голоса --- */
/* Состояние должно быть видно без чтения: пульс - слушаю, столбики - идёт
   запись, спиннер - обрабатываю. Без этого непонятно, началось ли вообще. */
#recorder {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--panel); border: 1px solid #3a3d41; border-radius: var(--radius);
}
#recorder button { padding: 8px 14px; font-size: 14px; }
#rec-state { font-size: 14px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: var(--dim); }
.pulse {
  width: 10px; height: 10px; border-radius: 50%; background: var(--error);
  animation: pulse 1.2s ease-in-out infinite; flex: none;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }

.levels { display: flex; gap: 3px; align-items: center; height: 22px; flex: 1; }
.levels i { display: block; width: 3px; height: 20%; background: var(--accent); border-radius: 2px;
  animation: bounce 1s ease-in-out infinite; }
.levels i:nth-child(2) { animation-delay: .1s } .levels i:nth-child(3) { animation-delay: .2s }
.levels i:nth-child(4) { animation-delay: .3s } .levels i:nth-child(5) { animation-delay: .4s }
.levels i:nth-child(6) { animation-delay: .5s } .levels i:nth-child(7) { animation-delay: .6s }
@keyframes bounce { 0%, 100% { height: 20% } 50% { height: 100% } }

/* Обработка: пульс и столбики гаснут, крутится спиннер */
#recorder.busy .pulse, #recorder.busy .levels { display: none; }
#recorder.busy #rec-cancel, #recorder.busy #rec-stop { display: none; }
#recorder.busy::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid #3a3d41; border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* --- список разговоров --- */
#drawer { position: fixed; inset: 0; z-index: 10; display: flex; }
#drawer-panel {
  width: min(300px, 82vw); background: var(--panel); display: flex; flex-direction: column;
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  gap: 10px; animation: slide .18s ease-out;
}
@keyframes slide { from { transform: translateX(-100%) } }
#drawer-shade { flex: 1; background: rgba(0, 0, 0, .5); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drawer-head button { padding: 6px 10px; font-size: 14px; }
#thread-list { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; display: flex;
  flex-direction: column; gap: 4px; }
#thread-list li { display: flex; align-items: center; gap: 4px; }
#thread-list button.pick {
  flex: 1; text-align: left; background: transparent; border: none; padding: 10px;
  border-radius: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#thread-list li.current button.pick { background: #34373b; }
#thread-list button.kill { background: transparent; border: none; color: var(--dim); padding: 8px; }
.wide { width: 100%; }