/* ise-chat: мобильный — основной сценарий. Тёмная и светлая темы, safe-area, тап-таргеты ≥44px. */
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; } /* display:flex на секциях не должен перебивать hidden */
input, textarea, button, select { font: inherit; } /* поля ≥16px — iOS не зумит при фокусе */

:root {
  color-scheme: dark light;
  --bg: #1c1c28; --panel: #26263a; --panel2: #202030; --fg: #e8e8f0; --mut: #a3a3ba;
  --line: #3a3a55; --acc: #6ea8fe; --acc-fg: #10101c; --err: #ff7b72; --user: #2f4368;
  --ok: #51cf66; --ok-fg: #10241a; --err-fg: #2b0f0d; --pin-bg: #2a2a44;
  --neutral: #5a5a78; --neutral-fg: #f0f0f8;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2f2f7; --panel: #ffffff; --panel2: #e9e9f2; --fg: #1b1b26; --mut: #5c5c70;
    --line: #c9c9dc; --acc: #2f6fed; --acc-fg: #ffffff; --err: #c62f22; --user: #d7e3fb;
    --ok: #2b8a3e; --ok-fg: #ffffff; --err-fg: #ffffff; --pin-bg: #e4ecfb;
    --neutral: #8a8aa0; --neutral-fg: #ffffff;
  }
}

html, body { height: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font: 16px/1.45 -apple-system, system-ui, sans-serif;
  /* Прокручивается ЛЕНТА сообщений, а не страница. Без этого длинный ответ
     растил документ, поле ввода уезжало под нижний край, и экран выглядел
     зависшим (дефект с прода 2026-08-02). */
  overflow: hidden;
}

#offline { position: fixed; top: 0; left: 0; right: 0; background: #7a5b00; color: #fff; text-align: center; padding: calc(4px + env(safe-area-inset-top)) 8px 4px; z-index: 10; font-size: 13px; }
.error { color: var(--err); min-height: 1.2em; font-size: 14px; padding: 2px 10px; }

/* ---------- вход ---------- */
#view-login { display: flex; align-items: center; justify-content: center; height: 100dvh; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
#login-form { display: flex; flex-direction: column; gap: 12px; width: min(340px, 92vw); }
#login-form h1 { font-size: 22px; text-align: center; margin-bottom: 8px; }
#login-form input { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); }
#login-form button { padding: 14px; border-radius: 12px; border: 0; background: var(--acc); color: var(--acc-fg); font-weight: 600; min-height: 48px; }

/* ---------- каркас чата ----------
   Три полосы фиксированной высоты: шапка/сайдбар — лента — поле ввода.
   Ключ к тому, чтобы поле ввода не уезжало: min-height:0 на КАЖДОМ звене
   flex-цепочки (по умолчанию min-height:auto не даёт элементу сжаться меньше
   содержимого, и лента распирает контейнер вместо того, чтобы прокручиваться). */
#view-chat { display: flex; height: 100dvh; max-height: 100dvh; overflow: hidden; }
#sidebar { width: 240px; flex: 0 0 auto; background: var(--panel); display: flex; flex-direction: column; padding: 10px; gap: 10px; min-height: 0; }
#sidebar-top { display: flex; gap: 8px; flex: 0 0 auto; }
/* Порядок в шапке (просьба владельца): профиль → лента последних сессий → список → «＋».
   «＋» в правом углу — самое частое действие под большим пальцем правой руки. */
#btn-account { order: 1; flex: 0 0 auto; }
#conv-list { order: 2; }
#sidebar-top { order: 3; }
#who { order: 4; }
#btn-new { flex: 1; min-height: 44px; border-radius: 10px; border: 0; background: var(--acc); color: var(--acc-fg); font-weight: 700; }
#btn-account, #btn-list { min-width: 44px; min-height: 44px; border-radius: 10px; border: 0; background: var(--panel2); color: var(--mut); font-size: 18px; flex: 0 0 auto; }
#btn-list { color: var(--fg); }
/* padding:0 — у ul есть UA-отступ 40px слева, он съедал четверть ширины экрана под заголовки */
#conv-list { list-style: none; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#conv-list li { flex: none; display: flex; align-items: center; gap: 2px; padding: 2px 4px; border-radius: 10px; color: var(--mut); }
#conv-list li.active { background: var(--panel2); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.conv-title { flex: 1; min-height: 40px; text-align: left; border: 0; background: transparent; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; padding: 0 6px; border-radius: 8px; }
.conv-btn { border: 0; background: transparent; color: var(--mut); cursor: pointer; font-size: 15px; min-width: 40px; min-height: 40px; border-radius: 8px; visibility: hidden; }
#conv-list li:hover .conv-btn, #conv-list li.active .conv-btn { visibility: visible; }
.conv-btn:hover { background: var(--line); color: var(--fg); }
.conv-btn.pin { filter: grayscale(1) opacity(0.6); }
.conv-btn.pin.on { filter: none; }
#conv-list li.pinned .conv-title::before { content: "📌 "; font-size: 12px; }
.conv-btn.del.armed { visibility: visible; background: var(--err); color: #fff; font-size: 13px; padding: 0 10px; }
#who { font-size: 12px; color: var(--mut); padding: 0 4px; }

#chat { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 12px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ---------- пузыри ---------- */
.msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--user); border-bottom-right-radius: 6px; }
.msg.assistant { align-self: flex-start; background: var(--panel); border-bottom-left-radius: 6px; }
.msg.live { opacity: 0.9; }

/* Плавное проявление приходящего текста: слово выезжает слева и набирает плотность.
   Только opacity/transform — это композитные свойства, телефон их тянет даром.
   Анимация висит на слове ~0.16 с и больше ничего не стоит: класс не снимается
   вручную, старые слова схлопываются в обычный текст (compactLive в app.ts). */
@keyframes ise-reveal {
  from { opacity: 0; transform: translate3d(-0.22em, 0, 0); }
  to { opacity: 1; transform: none; }
}
.msg.live .reveal { animation: ise-reveal 0.16s ease-out both; will-change: opacity, transform; }
/* от такого движения некоторым людям физически плохо — уважаем настройку системы */
@media (prefers-reduced-motion: reduce) {
  .msg.live .reveal { animation: none; }
}
.msg.system { align-self: center; background: transparent; border: 1px dashed var(--line); color: var(--mut); font-size: 14px; max-width: 94%; }
.msg.system.err { border-color: var(--err); color: var(--err); }
.msg.tool-note { align-self: flex-start; color: var(--mut); font-size: 13px; padding: 0 6px; }
.msg.tool { align-self: flex-start; font-size: 13px; color: var(--mut); background: transparent; max-width: 94%; padding: 4px 6px; }
.msg.tool summary { min-height: 32px; display: flex; align-items: center; cursor: pointer; }
.msg.tool pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel2); padding: 8px; border-radius: 8px; margin-top: 6px; max-height: 240px; overflow-y: auto; }
.msg.tool.err summary { color: var(--err); }

/* «думает»: три пульсирующие точки — видно, что ассистент жив, а не завис */
.msg.typing { display: flex; gap: 5px; align-items: center; min-width: 56px; min-height: 40px; }
.msg.typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--mut); animation: blink 1.2s infinite both; }
.msg.typing .typing-what { animation: none; width: auto; height: auto; border-radius: 0; background: none; color: var(--mut); font-size: 14px; margin-left: 4px; opacity: 1; }
.msg.typing span:nth-child(2) { animation-delay: 0.2s; }
.msg.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* ---------- пустое состояние ---------- */
.welcome { align-self: center; margin-top: auto; margin-bottom: 6px; max-width: 36ch; color: var(--mut); display: flex; flex-direction: column; gap: 10px; }
.welcome-title { font-size: 20px; font-weight: 700; color: var(--fg); }
.welcome .example { min-height: 46px; text-align: left; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer; }
.welcome .example:active { background: var(--panel2); }
.welcome-mut { font-size: 13px; }

/* ---------- карточка подтверждения ---------- */
.confirm-card { align-self: stretch; border: 1.5px solid var(--acc); border-radius: 14px; padding: 14px; background: var(--panel); }
.confirm-title { color: var(--mut); font-size: 13px; }
.confirm-tool { font-weight: 700; font-size: 17px; margin: 6px 0; }
.confirm-tool-raw { font-weight: 400; font-size: 12px; color: var(--mut); margin-left: 6px; }
.confirm-args { background: var(--panel2); border-radius: 10px; padding: 10px; font-size: 15px; max-height: 220px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; }
.confirm-buttons { display: flex; gap: 12px; margin-top: 12px; }
.confirm-buttons button { flex: 1; min-height: 48px; border-radius: 12px; border: 0; font-weight: 700; font-size: 16px; }
.confirm-buttons .ok { background: var(--acc); color: var(--acc-fg); }
.confirm-buttons .no { background: var(--panel2); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- шторка «все разговоры» (ADR 0056) ---------- */
#conv-overlay { position: fixed; inset: 0; z-index: 30; background: var(--bg); display: flex; flex-direction: column;
  padding: calc(8px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); gap: 10px; }
#conv-overlay-head { display: flex; align-items: center; justify-content: space-between; }
#conv-overlay-head h2 { font-size: 20px; }
#btn-overlay-close { min-width: 48px; min-height: 48px; border: 0; border-radius: 12px; background: var(--panel2); color: var(--fg); font-size: 22px; }
#conv-search { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); }
#conv-hint { display: none; color: var(--mut); font-size: 12px; padding: 0 4px; }
@media (hover: none) { #conv-hint { display: block; } } /* на мыши действия и так видны по наведению */
#conv-full { list-style: none; padding: 0; overflow: hidden auto; flex: 1; display: flex; flex-direction: column; gap: 4px; }

/* Строка: заголовок от левого края во всю ширину; действия — панель поверх строки (ADR 0057),
   в поток не встают и ширину у заголовка не отнимают. */
/* flex: none — иначе при десятках разговоров строки ужимаются по высоте (тап-таргет уезжает к 16px) */
/* touch-action: pan-y — ЛЕЧЕНИЕ дефекта, из-за которого свайп не работал вовсе:
   при auto браузер забирал жест себе и слал pointercancel через два движения.
   Вертикальную прокрутку по-прежнему ведёт он, горизонталь остаётся нам. */
.ovl-item { position: relative; flex: none; display: flex; align-items: center; border-radius: 12px; overflow: hidden;
  touch-action: pan-y; }
/* закреплённые видно не только по булавке — отдельный фон */
.ovl-item.pinned { background: var(--pin-bg); }
.ovl-group { color: var(--mut); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 4px 2px; }

/* подложка с названием действия — проступает на месте, которое освобождает строка */
.ovl-hint { position: absolute; inset: 0; display: flex; align-items: center; border-radius: 12px;
  font-weight: 700; font-size: 15px; padding: 0 18px; pointer-events: none; opacity: 0; }
.ovl-hint[data-side="left"] { justify-content: flex-start; }
.ovl-hint[data-side="right"] { justify-content: flex-end; }
.ovl-hint[data-action="delete"] { background: var(--err); color: var(--err-fg); }
.ovl-hint[data-action="pin"] { background: var(--ok); color: var(--ok-fg); }
/* «Открепить» — снятие, а не установка: приглушённый нейтральный тон.
   Красный занят удалением и означал бы опасность, которой здесь нет. */
.ovl-hint[data-action="unpin"] { background: var(--neutral); color: var(--neutral-fg); }
.ovl-item.dragging .ovl-main { background: var(--panel); border-radius: 12px; }
.ovl-item.armed .ovl-hint { font-size: 16px; }
.ovl-item.active { background: var(--panel2); box-shadow: inset 0 0 0 1.5px var(--acc); }
.ovl-item.open { background: var(--panel2); }
.ovl-main { flex: 1; min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 10px;
  border: 0; background: transparent; color: var(--fg); cursor: pointer; padding: 6px 8px 6px 4px; border-radius: 12px; text-align: left; }
.ovl-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovl-item.pinned .ovl-title::before { content: "📌 "; font-size: 13px; }
.ovl-date { color: var(--mut); font-size: 12px; flex: none; font-variant-numeric: tabular-nums; }
.ovl-actions { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 4px;
  padding-left: 14px; background: var(--panel); box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.5);
  transform: translateX(101%); transition: transform 0.18s ease; pointer-events: none; }
.ovl-item.open .ovl-actions { transform: none; pointer-events: auto; }
@media (hover: hover) {
  .ovl-item:hover .ovl-actions, .ovl-item:focus-within .ovl-actions { transform: none; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .ovl-actions { transition: none; } }
.ovl-actions .conv-btn { display: block; visibility: visible; min-width: 44px; min-height: 44px; }
/* резервный путь без жеста: кнопка «⋯» есть всегда */
.conv-btn.more { visibility: visible; min-width: 40px; min-height: 44px; font-size: 18px; flex: none; z-index: 1;
  transition: opacity 0.12s ease-out; }
/* во время жеста «⋯» уходит: иначе подпись действия уезжает под кнопку и обрезается */
.ovl-item.dragging .conv-btn.more { opacity: 0; pointer-events: none; }
#conv-full .ovl-item.open .conv-btn.more { color: var(--fg); }
.ovl-empty { color: var(--mut); text-align: center; padding: 24px 0; }

/* ---------- учётная запись и смена пароля (ADR 0058) ---------- */
#account-overlay { position: fixed; inset: 0; z-index: 31; background: var(--bg); display: flex; flex-direction: column;
  padding: calc(8px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); gap: 14px; overflow-y: auto; }
#account-head { display: flex; align-items: center; justify-content: space-between; }
#account-head h2 { font-size: 20px; }
#btn-account-close { min-width: 48px; min-height: 48px; border: 0; border-radius: 12px; background: var(--panel2); color: var(--fg); font-size: 22px; }
#account-who { color: var(--mut); font-size: 14px; padding: 0 2px; }
#pw-form, #profile-form { display: flex; flex-direction: column; gap: 10px; width: min(360px, 100%); }
#profile-form h3 { font-size: 16px; margin-top: 6px; }
#profile-form input, #profile-form textarea { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); }
#profile-form textarea { resize: vertical; min-height: 96px; font: inherit; }
#profile-form button { padding: 14px; border-radius: 12px; border: 0; background: var(--acc); color: var(--acc-fg); font-weight: 600; min-height: 48px; }
#pw-form h3 { font-size: 16px; }
#pw-form input { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); }
#pw-form button { padding: 14px; border-radius: 12px; border: 0; background: var(--acc); color: var(--acc-fg); font-weight: 600; min-height: 48px; }
.hint { color: var(--mut); font-size: 13px; }
.ok-msg { color: var(--acc); font-size: 14px; padding: 2px; }
#btn-logout { align-self: flex-start; min-height: 48px; padding: 0 20px; border-radius: 12px; border: 0;
  background: var(--panel2); color: var(--err); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- «Сессия удалена — Отменить» ---------- */
#toast { position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--panel); color: var(--fg); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), inset 0 0 0 1px var(--line); }
.toast-text { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-action { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px;
  background: var(--acc); color: var(--acc-fg); font-weight: 700; }

/* ---------- настройка жестов ---------- */
#swipe-settings { display: flex; flex-direction: column; gap: 8px; width: min(360px, 100%); }
#swipe-settings h3 { font-size: 16px; }
.swipe-row { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--fg); font-size: 15px; }

/* ---------- ввод (всегда у нижнего края, никогда не уезжает) ---------- */
#send-form { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: var(--bg); }
/* пустая строка ошибки не должна занимать полосу у нижнего края — там место ввода */
#send-error { flex: 0 0 auto; }
#send-error:empty { display: none; }
#input { flex: 1; resize: none; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font-size: 16px; }
#send-form button { width: 52px; min-height: 48px; border-radius: 14px; border: 0; background: var(--acc); color: var(--acc-fg); font-size: 22px; }
/* «Остановить» занимает место кнопки отправки, чтобы поле ввода не прыгало */
#btn-stop { background: var(--panel2); color: var(--err); box-shadow: inset 0 0 0 1.5px var(--err); font-size: 16px; }

/* ---------- мобильный (основной сценарий): «＋» всегда на экране в шапке ---------- */
@media (max-width: 700px) {
  #view-chat { flex-direction: column; }
  #sidebar { width: 100%; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px;
    padding: calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 6px calc(8px + env(safe-area-inset-left)); }
  #sidebar-top { flex: 0 0 auto; }
  .btn-label { display: none; }
  #btn-new { min-width: 52px; font-size: 22px; line-height: 1; }
  #conv-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 0 14px 2px 2px; scroll-padding: 0 14px; }
  #conv-list li { flex: 0 0 auto; max-width: 48vw; background: var(--panel2); }
  #conv-list li.active { box-shadow: inset 0 0 0 1.5px var(--acc); }
  .conv-title { min-height: 44px; font-size: 14px; }
  /* чипы — чистые переключатели; закрепить/удалить живут в шторке «☰» (ADR 0056) */
  #conv-list li .conv-btn { display: none; }
  #who { display: none; }
  #messages { padding: 12px 10px; }
}

/* десктоп: подпись у «＋» */
@media (min-width: 701px) {
  .plus { margin-right: 2px; }
  /* на десктопе кнопки удобнее сверху, лента под ними */
  #btn-account { order: 1; align-self: stretch; }
  #sidebar-top { order: 2; }
  #conv-list { order: 3; }
  #who { order: 4; }
}