/* ==========================================================================
   AiAssistent — оформление.
   Правила, из которых всё выросло:
   • Это приложение, а не «сайт, который влез в телефон»: фиксированный каркас,
     скроллятся только внутренние области, страница целиком — никогда.
   • Любая зона нажатия — минимум 48×48. Всё важное достаётся большим пальцем.
   • Поля ввода 16px, иначе iOS зумит страницу при фокусе.
   • Безопасные зоны iPhone учитываются сверху и снизу.
   • Тёмная тема для дома, светлая — чтобы читать с телефона на улице.
   ========================================================================== */

:root{
  --bg:#0c0c11; --bg2:#121218; --surface:#16161d; --surface2:#1d1d26; --surface3:#26262f;
  --line:#2b2b36; --line2:#3a3a47;
  --text:#ececf3; --muted:#9a9aab; --faint:#6e6e80;
  --accent:#7c6cff; --accent-ink:#fff; --accent-soft:#1e1a3a;
  --claude:#c98a5b; --claude-soft:#2a1d13;
  --gpt:#3fbf8f; --gpt-soft:#0f2a20;
  --synth:#7c6cff; --synth-soft:#1e1a3a;
  --warn:#f0b03c; --warn-soft:#2f2410;
  --danger:#f4685f; --danger-soft:#301715;
  --ok:#4ade80;
  --radius:16px; --radius-sm:11px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
  --app-h:100dvh;
  --vv-top:0px;
  --tap:48px;
  --shadow:0 10px 34px rgba(0,0,0,.45);
}

:root[data-theme="light"]{
  --bg:#f4f5f8; --bg2:#eceef3; --surface:#ffffff; --surface2:#f2f3f7; --surface3:#e6e8ef;
  --line:#dfe2ea; --line2:#c9cdd9;
  --text:#15161c; --muted:#5d6273; --faint:#858b9c;
  --accent:#5b4bdb; --accent-ink:#fff; --accent-soft:#ecebfd;
  --claude:#a35c25; --claude-soft:#fbf0e6;
  --gpt:#0f8a63; --gpt-soft:#e6f6ef;
  --synth:#5b4bdb; --synth-soft:#ecebfd;
  --warn:#a06a05; --warn-soft:#fdf3e0;
  --danger:#c8392f; --danger-soft:#fdeceb;
  --ok:#12844d;
  --shadow:0 10px 28px rgba(20,22,40,.14);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* Атрибут hidden должен побеждать любой display из компонентных правил */
[hidden]{display:none !important}

/* Небольшая кнопка может выглядеть тихо, но попадать по ней надо пальцем.
   Расширяем невидимую зону нажатия, не трогая внешний размер. */
.modechip,.chip .x,.lane-head .fold,.rwhy,.trace-head{position:relative}
.modechip::after,.chip .x::after,.lane-head .fold::after{
  content:'';position:absolute;inset:-10px -6px;
}
/* «почему» — строчная ссылка высотой 18px. Чтобы попасть по ней большим пальцем,
   невидимая зона нажатия должна дотянуть высоту до 44+, а не до 38. */
.rwhy::after{content:'';position:absolute;inset:-14px -10px}
html,body{margin:0;padding:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--bg); color:var(--text);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}
button,input,textarea{font:inherit;color:inherit}
button{border:none;background:none;cursor:pointer;padding:0}

/* Каркас приложения: фиксирован, высоту диктует visualViewport (клавиатура) */
#app{
  position:fixed; left:0; right:0; top:var(--vv-top);
  height:var(--app-h);
  display:flex; flex-direction:column;
  padding-left:var(--sal); padding-right:var(--sar);
}

/* ─────────────── верхняя панель ─────────────── */
.topbar{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:var(--sat) 8px 0; height:calc(54px + var(--sat));
  background:var(--surface); border-bottom:1px solid var(--line);
}
.brand{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; font-weight:650; letter-spacing:.2px; font-size:16px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--faint);transition:background .25s, box-shadow .25s}
.dot.live{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent)}
.dot.busy{background:var(--warn);box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 22%,transparent);animation:pulse 1.1s infinite}
@keyframes pulse{50%{opacity:.35}}
.topbtn{
  width:var(--tap); height:var(--tap); border-radius:14px; color:var(--muted); font-size:18px;
  display:flex;align-items:center;justify-content:center;
}
.topbtn:active{background:var(--surface2)}
#statusIcon{font-size:13px;font-weight:700;letter-spacing:-1px}

.banner{
  flex:0 0 auto; padding:9px 14px; font-size:13px; line-height:1.35;
  background:var(--warn-soft); color:var(--warn); border-bottom:1px solid var(--line);
}

/* ─────────────── экраны ─────────────── */
#screens{flex:1 1 auto; position:relative; overflow:hidden}
.screen{position:absolute; inset:0; display:none; flex-direction:column; overflow:hidden}
.screen.active{display:flex}
.screen.slide-in{animation:slideIn .18s ease-out}
@keyframes slideIn{from{opacity:.4;transform:translateX(var(--from,14px))}to{opacity:1;transform:none}}

/* ─────────────── чат ─────────────── */
.stream{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:14px 12px 6px; scroll-behavior:smooth;
}
.stream>*{max-width:760px;margin-left:auto;margin-right:auto}

.hero{text-align:center;padding:34px 18px 10px;color:var(--muted)}
.hero-ico{font-size:34px;color:var(--accent);margin-bottom:10px}
.hero h2{margin:0 0 8px;font-size:19px;color:var(--text);font-weight:650}
.hero p{margin:0 auto;max-width:340px;font-size:14.5px;line-height:1.5}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.hero-chips button{
  padding:11px 16px;min-height:46px;border-radius:23px;border:1px solid var(--line);
  background:var(--surface);font-size:13.5px;color:var(--text);
}
.hero-chips button:active{background:var(--surface2)}

.msg{
  padding:11px 14px;border-radius:var(--radius);margin:0 0 12px;
  white-space:pre-wrap;overflow-wrap:anywhere;font-size:15.5px;line-height:1.52;
}
.msg.user{
  margin-left:auto;max-width:86%;background:var(--accent);color:var(--accent-ink);
  border-bottom-right-radius:5px;white-space:pre-wrap;
}
.msg.user .att{display:block;margin-top:7px;font-size:12.5px;opacity:.85}

.routenote{
  display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:9px 12px;
  border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line);
  font-size:13px;color:var(--muted);line-height:1.42;
}
.routenote b{color:var(--text);font-weight:600}
.routenote .rico{color:var(--accent);flex:0 0 auto}

/* «Идёт работа» — одна тихая строка о задаче, запущенной с ДРУГОГО устройства
   (свою видно прямо в потоке). Первый экран не грузим: подробности по нажатию. */
.otherrun{
  display:flex;gap:9px;align-items:center;margin:0 0 12px;padding:10px 12px;
  border-radius:var(--radius-sm);background:var(--surface);
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));
  font-size:13px;color:var(--muted);line-height:1.4;
}
.otherrun .or-dot{
  flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--accent);
  animation:orpulse 1.5s ease-in-out infinite;
}
.otherrun .or-tx{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.otherrun .or-go{
  flex:0 0 auto;padding:7px 12px;min-height:36px;border-radius:18px;
  border:1px solid var(--line);background:var(--surface2);color:var(--accent);font-size:13px;
}
.otherrun .or-go:active{background:var(--surface)}
@keyframes orpulse{0%,100%{opacity:1}50%{opacity:.28}}
@media (prefers-reduced-motion:reduce){.otherrun .or-dot{animation:none}}

/* Строка «уведомления» в шторке состояния кликабельна целиком */
.stat[style*="cursor"]:active{background:var(--surface2)}

/* карточка одной дорожки (модели) */
.lane{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  margin:0 0 12px;overflow:hidden;
}
.lane[data-lane="claude"]{border-color:color-mix(in srgb,var(--claude) 40%,var(--line))}
.lane[data-lane="gpt"]{border-color:color-mix(in srgb,var(--gpt) 40%,var(--line))}
.lane[data-lane="synthesis"]{border-color:color-mix(in srgb,var(--synth) 46%,var(--line))}

.lane-head{
  display:flex;align-items:center;gap:9px;padding:0 12px;min-height:46px;
  background:var(--surface2);border-bottom:1px solid var(--line);
}
.lane-head .badge{
  font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;
}
.lane[data-lane="claude"] .badge{background:var(--claude-soft);color:var(--claude)}
.lane[data-lane="gpt"] .badge{background:var(--gpt-soft);color:var(--gpt)}
.lane[data-lane="synthesis"] .badge{background:var(--synth-soft);color:var(--synth)}
.lane[data-lane="system"] .badge{background:var(--danger-soft);color:var(--danger)}
.lane-head .via{flex:1;font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lane-head .fold{
  width:44px;height:44px;border-radius:10px;color:var(--muted);font-size:13px;
  display:flex;align-items:center;justify-content:center;margin-right:-8px;
}
.lane-head .fold:active{background:var(--surface3)}
.lane.collapsed .lane-body{display:none}
.lane.collapsed .fold{transform:rotate(-90deg)}

.lane-body{padding:12px 14px}

/* живой поток работы агента */
.trace{border-radius:var(--radius-sm);background:var(--surface2);margin:0 0 10px;overflow:hidden}
.trace-head{
  display:flex;align-items:center;gap:8px;padding:0 11px;min-height:46px;
  font-size:12.5px;color:var(--muted);
}
.trace-head .spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.trace-head .tcount{margin-left:auto;font-size:11.5px;color:var(--faint)}
.trace-lines{padding:0 11px 9px;display:flex;flex-direction:column;gap:6px;max-height:none}
.trace.folded .trace-lines{display:none}
.tline{display:flex;gap:8px;align-items:flex-start;font-size:12.8px;line-height:1.42;color:var(--muted)}
.tline .tk{
  flex:0 0 auto;font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;
  padding:2px 6px;border-radius:6px;background:var(--surface3);color:var(--faint);margin-top:1px;
}
.tline.stage .tk{color:var(--accent);background:var(--accent-soft)}
.tline.thinking .tk{color:var(--warn);background:var(--warn-soft)}
.tline.tool .tk{color:var(--gpt);background:var(--gpt-soft)}
.tline.error .tk{color:var(--danger);background:var(--danger-soft)}
.tline .tx{flex:1;overflow-wrap:anywhere}
.tline.error .tx{color:var(--danger)}

/* текст ответа */
.answer{font-size:15.5px;line-height:1.58;overflow-wrap:anywhere}
.answer.streaming::after{
  content:'';display:inline-block;width:8px;height:16px;vertical-align:-3px;margin-left:2px;
  background:var(--accent);animation:caret .9s steps(1) infinite;border-radius:2px;
}
@keyframes caret{50%{opacity:0}}
.answer p{margin:0 0 10px}
.answer p:last-child{margin-bottom:0}
.answer h3{font-size:15.5px;margin:14px 0 7px;font-weight:650}
.answer ul,.answer ol{margin:0 0 10px;padding-left:21px}
.answer li{margin:0 0 5px}
.answer code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;
  background:var(--surface3);padding:1px 5px;border-radius:5px;
}
.answer pre{
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 10px;
}
.answer pre code{background:none;padding:0;font-size:13px;line-height:1.5}
.answer a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.answer strong{font-weight:650}
.answer blockquote{margin:0 0 10px;padding-left:11px;border-left:3px solid var(--line2);color:var(--muted)}

/* блок расхождений — его прячем в последнюю очередь, он самый ценный */
.diverge{
  margin:12px 0 0;padding:11px 13px;border-radius:var(--radius-sm);
  background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 38%,transparent);
}
.diverge .dhead{
  display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--warn);margin-bottom:7px;
}
.diverge .answer{font-size:14.5px}
.verify{margin-top:10px;padding:11px 13px;border-radius:var(--radius-sm);background:var(--surface2);border:1px solid var(--line)}
.verify .dhead{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:7px}
.verify .answer{font-size:14.5px}

.msgacts{display:flex;gap:8px;margin-top:11px}
.msgacts button{
  min-height:44px;padding:0 15px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface2);font-size:13.5px;color:var(--muted);
}
.msgacts button:active{background:var(--surface3)}

/* ─────────────── композер ─────────────── */
.composer-wrap{
  flex:0 0 auto;background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:var(--sab);
}
.attachrow{display:flex;gap:7px;overflow-x:auto;padding:9px 12px 0;-webkit-overflow-scrolling:touch}
.chip{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;height:34px;padding:0 6px 0 11px;
  border-radius:17px;background:var(--surface2);border:1px solid var(--line);font-size:12.5px;
  max-width:200px;
}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .x{width:26px;height:26px;border-radius:13px;color:var(--muted);flex:0 0 auto;font-size:15px}
.chip.pending{opacity:.6}

/* одна тихая строка вместо панели кнопок */
.metarow{display:flex;align-items:center;gap:8px;padding:8px 12px 0}
.modechip{
  display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:17px;
  font-size:13px;color:var(--muted);background:transparent;border:1px solid var(--line);
}
.modechip:active{background:var(--surface2)}
.modechip .mi{color:var(--accent);font-size:12px}
.modechip .mc{color:var(--faint);font-size:10px}
.modechip.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent);background:var(--accent-soft)}

/* пояснения в шторке выбора модели */
.opt.sel{background:var(--accent-soft)}
.opt.sel .od{color:var(--accent);font-weight:600}
.opt .off-note{color:var(--warn)}

.voicebar{
  display:flex;align-items:center;gap:10px;margin:9px 12px 0;padding:9px 11px;
  border-radius:var(--radius-sm);background:var(--danger-soft);
  border:1px solid color-mix(in srgb,var(--danger) 36%,transparent);
}
.vlevel{display:flex;gap:3px;align-items:flex-end;height:20px;flex:0 0 auto}
.vlevel i{width:3px;height:6px;border-radius:2px;background:var(--danger);animation:vb .9s ease-in-out infinite}
.vlevel i:nth-child(2){animation-delay:.12s}.vlevel i:nth-child(3){animation-delay:.24s}
.vlevel i:nth-child(4){animation-delay:.36s}.vlevel i:nth-child(5){animation-delay:.48s}
@keyframes vb{0%,100%{height:6px}50%{height:18px}}
.vtext{flex:1;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbtn{height:34px;padding:0 13px;border-radius:17px;background:var(--danger);color:#fff;font-size:13px;font-weight:600}
.vbtn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line2)}

.composer{display:flex;gap:8px;align-items:flex-end;padding:9px 12px 10px}
.composer textarea{
  flex:1 1 auto;min-width:0;min-height:var(--tap);max-height:34vh;
  padding:12px 15px;border-radius:23px;border:1px solid var(--line);
  background:var(--surface2);color:var(--text);
  font-size:16px;line-height:1.4;resize:none;outline:none;overflow-y:auto;
}
.composer textarea:focus{border-color:var(--accent)}
.composer textarea::placeholder{color:var(--faint)}
.cbtn{
  flex:0 0 auto;width:var(--tap);height:var(--tap);border-radius:50%;
  border:1px solid var(--line);background:var(--surface2);color:var(--text);
  display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;
}
.cbtn:active{background:var(--surface3);transform:scale(.94)}
.cbtn.send{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.cbtn.send.stop{background:var(--danger);border-color:var(--danger);font-size:16px}
.cbtn.mic.rec{background:var(--danger);border-color:var(--danger);color:#fff;animation:pulse 1s infinite}
.cbtn[disabled]{opacity:.4}

/* ─────────────── списки, карточки ─────────────── */
.toolrow{flex:0 0 auto;display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.searchinput{
  flex:1;height:var(--tap);border-radius:24px;border:1px solid var(--line);
  background:var(--surface2);padding:0 17px;font-size:16px;outline:none;
}
.searchinput:focus{border-color:var(--accent)}
.toolbtn{width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line);background:var(--surface2);font-size:17px}

.list{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:10px 12px calc(96px + var(--sab))}
.list>*{max-width:760px;margin-left:auto;margin-right:auto}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;margin-bottom:10px;
}
.card h4{margin:0 0 5px;font-size:15.5px;font-weight:650;line-height:1.3}
.card .sub{margin:0;font-size:13px;color:var(--muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.tag{font-size:11.5px;color:var(--accent);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:3px 9px;border-radius:999px}
.cardact{display:flex;gap:8px;margin-top:11px}
.cardact button{
  /* 44px — нижняя граница, по которой палец попадает уверенно.
     Было 42: визуально почти то же, но промахи на ходу заметны. */
  flex:1;min-height:44px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface2);font-size:13.5px;color:var(--text);
}
.cardact button:active{background:var(--surface3)}
.cardact button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.cardact button.icon{flex:0 0 46px}

.frow{
  display:flex;align-items:center;gap:11px;padding:11px 12px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);
  min-height:62px;
}
.frow .fico{
  flex:0 0 38px;height:38px;border-radius:10px;background:var(--surface2);
  display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--muted);
}
.frow .fmain{flex:1;min-width:0}
.frow .fname{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .fmeta{font-size:12px;color:var(--muted);margin-top:2px}
.frow .fmeta .warnx{color:var(--warn)}
.frow .fmeta .okx{color:var(--ok)}
.frow .fgo{flex:0 0 40px;height:40px;border-radius:10px;color:var(--muted);font-size:19px}

.empty{color:var(--muted);text-align:center;padding:48px 26px;font-size:14.5px;line-height:1.5}
.storagenote{
  flex:0 0 auto;padding:9px 14px;font-size:12.5px;line-height:1.4;
  background:var(--surface2);border-bottom:1px solid var(--line);color:var(--muted);
}
.storagenote b{color:var(--text)}
.storagenote.warn{background:var(--warn-soft);color:var(--warn)}
.storagenote.warn b{color:var(--warn)}

.fab{
  position:absolute;right:16px;bottom:calc(18px + var(--sab));
  width:58px;height:58px;border-radius:29px;background:var(--accent);color:var(--accent-ink);
  font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 45%,transparent);
}
.fab:active{transform:scale(.93)}

/* ─────────────── таббар ─────────────── */
.tabbar{
  flex:0 0 auto;display:flex;background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:var(--sab);
}
.tab{
  flex:1;min-height:56px;color:var(--faint);font-size:11px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
}
.tab .ti{font-size:20px;line-height:1}
.tab.active{color:var(--accent)}
.tab:active{background:var(--surface2)}
.tab .badge-n{
  position:absolute;transform:translate(14px,-14px);min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* ─────────────── шторка снизу ─────────────── */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40;animation:fade .18s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:41;
  background:var(--surface);border-radius:22px 22px 0 0;border-top:1px solid var(--line);
  box-shadow:var(--shadow);
  max-height:88dvh;display:flex;flex-direction:column;
  padding-bottom:var(--sab);
  transform:translateY(0);transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
.sheet.closing{transform:translateY(101%)}
.sheet.opening{animation:sheetUp .24s cubic-bezier(.2,.8,.3,1)}
@keyframes sheetUp{from{transform:translateY(101%)}to{transform:translateY(0)}}
.sheet-grip{padding:11px 0 6px;display:flex;justify-content:center;flex:0 0 auto;touch-action:none;cursor:grab}
.sheet-grip i{width:42px;height:4px;border-radius:2px;background:var(--line2);display:block}
.sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 18px;-webkit-overflow-scrolling:touch}
.sheet h3{margin:4px 0 14px;font-size:18px;font-weight:650}
.sheet label{display:block;font-size:12.5px;color:var(--muted);margin:0 0 6px}
.sheet .field{margin-bottom:14px}
.sheet input[type=text],.sheet textarea{
  width:100%;border-radius:12px;border:1px solid var(--line);background:var(--surface2);
  padding:12px 14px;font-size:16px;outline:none;resize:vertical;
}
.sheet input[type=text]{height:var(--tap)}
.sheet textarea{min-height:120px;line-height:1.45}
.sheet input:focus,.sheet textarea:focus{border-color:var(--accent)}
.sheet .row{display:flex;gap:9px;margin-top:6px}
.sheet .row button{flex:1;min-height:50px;border-radius:13px;font-size:15px;background:var(--surface2);border:1px solid var(--line)}
.sheet .row button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:650}
.sheet .row button.danger{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 40%,transparent);color:var(--danger)}

.optlist{display:flex;flex-direction:column;gap:2px;margin:0 -4px}
.opt{
  display:flex;align-items:center;gap:13px;min-height:56px;padding:0 12px;border-radius:13px;
  font-size:15.5px;text-align:left;width:100%;
}
.opt:active{background:var(--surface2)}
.opt .oi{
  flex:0 0 38px;height:38px;border-radius:11px;background:var(--surface2);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.opt .od{flex:1}
.opt .od small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.opt.danger{color:var(--danger)}
.opt.danger .oi{background:var(--danger-soft)}

.statlist{display:flex;flex-direction:column;gap:9px}
.stat{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border-radius:12px;background:var(--surface2);border:1px solid var(--line)}
.stat .si{flex:0 0 26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px}
.stat.ok .si{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok)}
.stat.no .si{background:var(--warn-soft);color:var(--warn)}
.stat .sd{flex:1;min-width:0}
.stat .sd b{display:block;font-size:14.5px;font-weight:600;margin-bottom:2px}
.stat .sd span{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}

/* ─────────────── тосты ─────────────── */
.toasts{
  position:fixed;left:0;right:0;bottom:calc(84px + var(--sab));z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px;
}
.toast{
  max-width:420px;padding:11px 16px;border-radius:13px;background:var(--surface3);
  color:var(--text);font-size:14px;box-shadow:var(--shadow);border:1px solid var(--line2);
  animation:toastIn .2s ease-out;
}
.toast.err{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 40%,transparent);color:var(--danger)}
.toast.ok{background:var(--gpt-soft);border-color:color-mix(in srgb,var(--gpt) 40%,transparent);color:var(--gpt)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ─────────────── планшет и десктоп ─────────────── */
@media (min-width:820px){
  .stream,.list{padding-left:24px;padding-right:24px}
  .composer{max-width:808px;margin:0 auto;width:100%}
  .metarow,.attachrow,.voicebar{max-width:808px;margin-left:auto;margin-right:auto;width:100%}
  .toolrow{max-width:784px;margin:0 auto;width:100%}
  .sheet{left:50%;transform:translateX(-50%);max-width:560px;border-radius:22px 22px 0 0}
  .sheet.opening{animation:sheetUpD .24s cubic-bezier(.2,.8,.3,1)}
  @keyframes sheetUpD{from{transform:translate(-50%,101%)}to{transform:translate(-50%,0)}}
  .sheet.closing{transform:translate(-50%,101%)}
  .fab{right:calc(50% - 380px)}
}
@media (max-width:400px){
  .modepick{padding:0 12px;font-size:13px}
  .hero{padding-top:24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .stream{scroll-behavior:auto}
}

/* ─────────────── экран входа ───────────────
   Занимает весь экран поверх приложения: пока сессии нет, показывать нечего.
   Высоту берём у visualViewport (--app-h), поэтому клавиатура не выдавливает
   кнопку «Войти» за край и страница не начинает прокручиваться целиком. */
#gate{
  position:fixed; left:0; right:0; top:var(--vv-top);
  height:var(--app-h); z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--sat) + 20px) calc(var(--sal) + 22px) calc(var(--sab) + 20px) calc(var(--sar) + 22px);
  background:var(--bg); overflow-y:auto;
}
.gatebox{
  width:100%; max-width:380px; display:flex; flex-direction:column;
}
.gate-ico{font-size:38px;color:var(--accent);text-align:center;line-height:1}
.gatebox h1{margin:14px 0 6px;font-size:22px;font-weight:650;text-align:center;letter-spacing:.2px}
.gate-sub{margin:0 0 22px;font-size:14.5px;line-height:1.5;color:var(--muted);text-align:center}
.gate-note{
  margin:0 0 18px;padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--warn-soft);color:var(--warn);font-size:13.5px;line-height:1.45;
}
.gate-label{font-size:12.5px;color:var(--faint);margin:0 0 7px 3px;font-weight:600;letter-spacing:.3px}
#gatePassword{
  width:100%; min-height:54px; padding:0 16px;
  border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--surface); color:var(--text);
  font-size:17px; /* меньше 16px — iOS зумит страницу при фокусе */
  outline:none;
}
#gatePassword:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
#gatePassword[disabled]{opacity:.5}
.gate-error{
  margin:12px 0 0;padding:11px 14px;border-radius:var(--radius-sm);
  background:var(--danger-soft);color:var(--danger);font-size:13.5px;line-height:1.45;
}
.gate-submit{
  margin-top:16px; min-height:54px; border-radius:var(--radius-sm);
  background:var(--accent); color:var(--accent-ink); font-size:16px; font-weight:650;
  width:100%;
}
.gate-submit:active{transform:scale(.985)}
.gate-submit[disabled]{opacity:.55}
.gate-foot{margin:18px 2px 0;font-size:12px;line-height:1.5;color:var(--faint);text-align:center}
/* Пока открыт вход, приложение под ним не должно ловить нажатия */
html[data-gate="1"] #app{pointer-events:none;filter:blur(2px)}

/* ─────────────── дорожка не выполнила задачу ───────────────
   Ошибка видна сразу в карточке, без разворачивания лога. */
/* ─────────────── что агент делает прямо сейчас ───────────────
   Строка живёт над композером и видна при любой прокрутке потока.
   Главный вопрос с телефона — «оно вообще работает?» — должен иметь ответ всегда. */
.livebar{
  display:flex; align-items:center; gap:10px;
  margin:0 10px 6px; padding:9px 12px;
  border-radius:var(--radius-sm);
  background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  font-size:13px; line-height:1.35; color:var(--text);
}
.lb-spin{
  flex:0 0 auto; width:13px; height:13px; border-radius:50%;
  border:2px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-top-color:var(--accent); animation:lbspin .8s linear infinite;
}
@keyframes lbspin{to{transform:rotate(360deg)}}
.lb-text{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted)}
.lb-stop{
  flex:0 0 auto; min-height:34px; min-width:56px; padding:0 12px; border-radius:9px;
  background:var(--surface2); border:1px solid var(--line); color:var(--text); font-size:13px;
  position:relative;
}
/* Кнопка выглядит компактно, а пальцем ловится с запасом */
.lb-stop::after{content:'';position:absolute;inset:-8px -6px}
.lb-stop:active{background:var(--surface3)}

/* ─────────────── промпт в два касания ─────────────── */
.promptpick{display:flex;flex-direction:column;gap:2px;margin:12px -4px 0;max-height:46vh;overflow-y:auto}
.pp-row{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:60px; padding:10px 12px; border-radius:12px; text-align:left;
}
.pp-row:active{background:var(--surface2)}
.pp-main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px}
.pp-main b{font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pp-main small{
  font-size:12.5px; color:var(--muted); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pp-go{flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--accent-soft);
  color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700}
.pp-empty{padding:18px 4px; color:var(--muted); font-size:14px}

/* ─────────────── последние файлы в шторке «Прикрепить» ─────────────── */
.recentfiles{margin:2px 0 14px}
.rf-head{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--faint);font-weight:700;margin:0 2px 8px}
.rf-load{font-size:13px;color:var(--muted);padding:2px}
.rf-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.rf-strip::-webkit-scrollbar{display:none}
.rf-chip{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  min-height:46px; max-width:210px; padding:0 13px; border-radius:23px;
  background:var(--surface2); border:1px solid var(--line); color:var(--text); font-size:13.5px;
}
.rf-chip:active{background:var(--surface3)}
.rf-ico{color:var(--accent);flex:0 0 auto}
.rf-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.lane.failed{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.laneerr{
  display:flex; gap:10px; align-items:flex-start;
  margin:10px 0 2px; padding:12px 13px; border-radius:var(--radius-sm);
  background:var(--danger-soft); color:var(--danger);
  font-size:13.5px; line-height:1.45; overflow-wrap:anywhere;
}
.laneerr .ei{flex:0 0 auto;font-weight:700;line-height:1.45}

/* «Лимит подписки до 13:59», «перехожу на запасной путь» — сообщение, а не поломка.
   Спокойный тон: красный здесь врал бы владельцу об исправности приложения. */
.lanenote{
  display:flex; gap:10px; align-items:flex-start;
  margin:10px 0 2px; padding:12px 13px; border-radius:var(--radius-sm);
  background:var(--surface2); color:var(--text);
  border:1px solid color-mix(in srgb,var(--warn) 34%,var(--line));
  font-size:13.5px; line-height:1.45; overflow-wrap:anywhere;
}
.lanenote .ni{flex:0 0 auto;color:var(--warn);line-height:1.45}
.tline.notice .tk{color:var(--warn)}

/* ─────────────── медиа: фото, видео, звук ───────────────
   Владелец кидает в базу снимки экрана и объектов. Строка «▣ IMG_2841.HEIC»
   про них не говорит ничего, поэтому в списке показываем само изображение,
   а в карточке — полноценный просмотр. Байты идут из хранилища напрямую. */
.fico.fthumb{padding:0;overflow:hidden;background:var(--surface2)}
.fico.fthumb img{width:100%;height:100%;object-fit:cover;display:block}
.fmedia{margin:0 0 14px;border-radius:var(--radius);overflow:hidden;background:var(--surface2);
        display:flex;align-items:center;justify-content:center}
.fmedia img,.fmedia video{width:100%;max-height:46vh;object-fit:contain;display:block;background:#000}
.fmedia img{cursor:zoom-in}
.fmedia.audio{padding:10px 12px;background:transparent}
.fmedia audio{width:100%}