/* ОКНО ВОПРОСОВ UnitShifter — оформление.
   Краски, шрифт, угол и высота органов — те же, что у показа (scripts/web/dashboard.css):
   величины переписаны сюда, потому что окно отдаётся сервером отдельно от выпуска
   и листа показа не получает. Меняется краска показа — меняется и здесь. */

@font-face{
 font-family:'Merriweather 87'; font-style:normal; font-weight:300 900;
 font-display:swap; src:url(font/Merriweather87-cyrillic.woff2) format('woff2');
 unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
 font-family:'Merriweather 87'; font-style:normal; font-weight:300 900;
 font-display:swap; src:url(font/Merriweather87-latin.woff2) format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
  U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
 color-scheme:light;
 --acc:#0088b0; --acc2:#d6006c;
 --paper:#f3f2f2; --surface:#f3f2f2; --surface2:#eae9e9; --card:#f8f7f7; --btnface:#fff;
 --ink:#201e1d; --ink2:#5f5e5d; --ink3:#6a6868; --hair:#d5d3d2;
 --good:#006786; --crit:#aa0b56; --wash1:rgba(0,136,176,.08);
 --veil:rgba(243,242,242,.86); --shade:rgba(32,30,29,.55);
 --r:5px; --h:32px; --wrap:760px;
 /* ПОЛЯ И ПРОСВЕТЫ ОКНА — ВЕЛИЧИНЫ ПОКАЗА, А НЕ СВОИ (27.09.2026, D-2026-09-27-675, слово
    владельца: «Сделай окно в дизайне инструмента - со скругленными углами и стандартными для
    инструмента отступами горизонтально и вертикально»). Окно в отчёте — карточка, и поля у
    него карточки. Дом каждой величины — scripts/web/dashboard.css; меняется там — меняется здесь:
      --поле-г, --поле-в — поле карточки (.card{padding:16px 18px}): 18 по горизонтали от края
        окна у всех блоков (шапка, беседа, поле вопроса, вход, сообщение), 16 по вертикали у
        верхнего края (шапка) и нижнего (поле вопроса);
      --gap-v — вертикальный просвет между блоками (:root, --gap-v:12px);
      --gap-орг — просвет между органами в ряду (:root, --gap-орг:10px): кнопки шапки, ряд под
        полем;
      --разрядка-прописных — разрядка прописных, набранных кеглем текста (вкладки .tab и
        заголовок h1: letter-spacing:.02em); у мелких подписей (.lbl, 12 px) своя — .1em.
    До 27.09.2026 здесь стояли 16 по бокам, 10/16 сверху, 8/10 у поля и 8/14 между блоками —
    числа, назначенные по месту. --r — скругление --r-seg. */
 --поле-г:18px; --поле-в:16px; --gap-v:12px; --gap-орг:10px; --разрядка-прописных:.02em;
 --font-serif:'Merriweather 87',Georgia,serif;
 --font-mono:ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
 :root{
  color-scheme:dark;
  --acc:#00a0cf; --acc2:#d83977;
  --paper:#1a1918; --surface:#1a1918; --surface2:#262423; --card:#211f1e; --btnface:#2f2c2b;
  --ink:#f3f2f2; --ink2:#c3c2c2; --ink3:#a1a09f; --hair:#3a3736;
  --good:#4fbde4; --crit:#ff90b1; --wash1:rgba(0,160,207,.12);
  --veil:rgba(26,25,24,.86); --shade:rgba(0,0,0,.66);
 }
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{height:100%; background:var(--paper)}
body{margin:0; height:100vh; height:100dvh; display:flex; flex-direction:column;
 background:var(--paper); color:var(--ink);
 font-family:var(--font-serif); font-size:15px; line-height:1.45;
 -webkit-text-size-adjust:100%; text-size-adjust:100%}
button,input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
:focus:not(:focus-visible){outline:none}

.lbl{font-size:12px; line-height:1.3; text-transform:uppercase; letter-spacing:.1em;
 color:var(--ink3); font-weight:400}
.muted{color:var(--ink2)}
.wrap{max-width:var(--wrap); margin:0 auto; width:100%}

/* ---------- органы ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
 height:var(--h); padding:0 14px; border-radius:var(--r);
 border:1px solid transparent; background:var(--acc); color:var(--paper);
 font-family:var(--font-serif); font-size:14px; font-weight:600; line-height:1;
 white-space:nowrap; cursor:pointer}
.btn:hover{background:var(--good)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn:disabled:hover{background:var(--acc)}
.btn.ghost{background:var(--btnface); color:var(--ink); border-color:var(--hair); font-weight:400}
.btn.ghost:hover{background:var(--surface2); border-color:var(--ink3)}
.btn.ghost:disabled:hover{background:var(--btnface); border-color:var(--hair)}
.btn.wide{width:100%}
.btn svg{width:16px; height:16px; flex:0 0 auto}

input[type=password],input[type=text]{display:block; width:100%; height:var(--h);
 padding:0 10px; border:1px solid var(--hair); border-radius:var(--r);
 background:var(--btnface); color:var(--ink)}
input[type=password]:focus-visible,input[type=text]:focus-visible,textarea:focus-visible{
 outline:2px solid var(--acc); outline-offset:0; border-color:transparent}

.alert{display:flex; align-items:flex-start; gap:8px; padding:6px 6px 6px 10px;
 border:1px solid var(--crit); border-radius:var(--r); color:var(--crit);
 background:var(--card); font-size:13.5px; line-height:1.4}
.alert>span{flex:1 1 auto; min-width:0; padding-top:2px; overflow-wrap:anywhere}
.alert .x{flex:0 0 auto; width:24px; height:24px; border:0; background:transparent;
 color:inherit; font-size:18px; line-height:1; cursor:pointer; border-radius:var(--r)}

/* ---------- шапка ----------
   ЗАГОЛОВОК «UnitShifter · ВОПРОСЫ И ОТВЕТЫ» (27.09.2026, D-2026-09-27-675: «Заголовок "ВОПРОСЫ И
   ОТВЕТЫ" сделай заглавными после UnitShifter»): прописные стоят в разметке буквами (index.html),
   а не text-transform, — их видят innerText, чтец и подсадки; здесь — лишь разрядка прописных
   показа. Верх шапки — поле карточки (16), низ — просвет между блоками (12) до черты. */
.top{flex:0 0 auto; background:var(--surface); border-bottom:1px solid var(--hair);
 padding:var(--поле-в) var(--поле-г) var(--gap-v)}
.top-row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap-орг)}
.brand{display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 auto}
.brand-t{font-size:15px; white-space:nowrap; color:var(--ink2)}
.brand-t b,.login h1 b{color:var(--ink); font-weight:700}
.brand-n{letter-spacing:var(--разрядка-прописных)}
.top-act{display:flex; gap:var(--gap-орг); flex:0 0 auto; margin-left:auto}

/* ШАПКА — РУЧКА ОКНА В ОТЧЁТЕ (27.09.2026, D-2026-09-27-675, дословно: «Узкую панель с пятью
   точками посередние сверх за которую можно перетаскивать окно убери - сделай возможность
   перетаскивать за строку заголовка в любом месте - курсор становится отображением стрелки в 4
   направляениях кроме наведения на кнопки "Новая беседа" и "Выйти"»). Лишь в полном окне отчёта
   (html[data-вид] ставит chat.js по знаку отчёта; у окна, открытого прямо адресом, вида нет) и лишь
   у отчёта, что тянет окно по знакам 'тянуть' (html.шапка-ручка — по drag=1 в хеше рамки, chat.js,
   «ТЯГА ЗА ШАПКУ — ЛИШЬ У ОТЧЁТА, ЧТО ЕЁ ЗНАЕТ»; прежний выпуск 1.1.1281 тянет окно своей ручкой, и
   курсор move над шапкой у него лгал — находка сквозной проверки сессии 292):
   курсор move по всей строке — у кнопок свой (.btn: pointer, у недоступной — not-allowed), и
   нажатие на них перетаскивания не начинает (chat.js, шапкаТянуть). Текст шапки не
   выделяется — ни протяжкой, ни двойным щелчком (двойной щелчок возвращает место окна). Пока
   тянут (html.тянется), курсор move стоит и над полем: рамка едет под указателем, но у края
   окна браузера упирается, и указатель сходит с шапки. */
html.шапка-ручка[data-вид="полный"] .top{cursor:move; touch-action:none; -webkit-user-select:none; user-select:none}
html.тянется,html.тянется *{cursor:move !important; -webkit-user-select:none !important; user-select:none !important}

/* ---------- поле листа ---------- */
main{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
 padding:var(--gap-v) var(--поле-г)}
.boot{padding-top:18vh; text-align:center}

/* вход */
.login{padding-top:6vh}
.login-card{max-width:380px; margin:0 auto; background:var(--card);
 border:1px solid var(--hair); border-radius:var(--r); padding:var(--поле-в) var(--поле-г)}
.login h1{font-size:18px; font-weight:400; color:var(--ink2); margin:0 0 6px; line-height:1.3}
/* ВХОД И СООБЩЕНИЕ В ОКНЕ ОТЧЁТА (D-2026-09-27-675): заголовок несёт шапка — она видна во всех
   видах, чтобы окно всегда можно было сдвинуть, — и заголовок карточки входа спрятан (он
   остаётся в разметке: на него ссылается aria-labelledby входа). Карточки — блоки окна, как
   беседа: во всю ширину, в 18 px от края, от черты шапки — просвет между блоками. */
html.встроено .login h1{display:none}
html.встроено .login,html.встроено .notice{padding-top:0}
html.встроено .login-card,html.встроено .notice-card{max-width:none}
.login p{margin:0 0 16px; font-size:14px}
.login form{display:flex; flex-direction:column; gap:10px}
.login .lbl{margin-bottom:-4px}
.check{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink2);
 min-height:var(--h); cursor:pointer}
.check input{width:16px; height:16px; margin:0; accent-color:var(--acc)}

/* Вид сообщения: окно открыто без сборки либо сборка из отчёта не открыта
   сервером (26.09.2026, D-2026-09-26-668) — слова сервера, без выбора сборок. */
.notice{padding-top:6vh}
.notice-card{max-width:420px; margin:0 auto; background:var(--card);
 border:1px solid var(--hair); border-radius:var(--r); padding:var(--поле-в) var(--поле-г)}
.notice-card p{margin:0; font-size:15px; line-height:1.5; color:var(--ink)}

/* ---------- беседа ---------- */
.log{display:flex; flex-direction:column; gap:var(--gap-v)}
.log>.loading{color:var(--ink3); margin:0; font-size:14px}

.empty h2{font-size:19px; font-weight:700; margin:4px 0 6px; line-height:1.3}
.empty p{margin:0 0 8px; color:var(--ink2)}
.empty p:last-of-type{margin-bottom:16px}
.examples{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.examples .btn{height:auto; min-height:var(--h); padding:7px 12px; justify-content:flex-start;
 text-align:left; white-space:normal; line-height:1.4; font-size:14px}

.msg.user{display:flex; flex-direction:column; align-items:flex-end}
.bubble{max-width:88%; padding:8px 12px; border-radius:var(--r);
 background:var(--wash1); border:1px solid transparent; color:var(--ink);
 white-space:pre-wrap; overflow-wrap:anywhere}
.umeta{margin-top:3px; font-size:12px; color:var(--ink3); text-align:right; max-width:88%}

.msg.bot{background:var(--card); border:1px solid var(--hair); border-radius:var(--r);
 padding:10px 12px; min-width:0}

.trace{margin:0 0 8px; padding-bottom:6px; border-bottom:1px dashed var(--hair)}
.trace summary{cursor:pointer; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
 min-height:24px; list-style:none; border-radius:var(--r)}
.trace summary::-webkit-details-marker{display:none}
.trace summary::before{content:'▸'; font-size:11px; color:var(--ink3); width:10px}
.trace[open] summary::before{content:'▾'}
.trace-n{font-size:12px; color:var(--ink3)}
.steps{list-style:none; margin:6px 0 2px; padding:0 0 0 16px; font-size:13px; color:var(--ink2)}
.steps li{position:relative; margin:3px 0; overflow-wrap:anywhere}
.steps li.step::before{content:''; position:absolute; left:-12px; top:.55em; width:5px; height:5px;
 border-radius:50%; background:var(--acc)}
.steps li.mid{margin:6px 0; padding:4px 0 4px 10px; border-left:2px solid var(--hair);
 color:var(--ink2); font-size:13px}
.steps li.mid .md p:last-child,.steps li.mid .md ul:last-child,.steps li.mid .md ol:last-child{margin-bottom:0}

.pending{display:flex; align-items:center; gap:8px; margin-top:4px; font-size:13px; color:var(--ink3);
 min-width:0}
.pending-t{overflow-wrap:anywhere; min-width:0}
.dots{display:inline-flex; gap:3px; flex:0 0 auto}
.dots i{width:5px; height:5px; border-radius:50%; background:var(--acc); opacity:.25;
 animation:dot 1.2s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.25} 40%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .dots i{animation:none; opacity:.7} }

.note{margin-top:6px; font-size:13px; color:var(--ink2)}
.note.bad{color:var(--crit)}
/* ответ, упавший до первого слова: заметка встаёт на место пустого ответа */
.answer:empty + .note{margin-top:0}
.foot{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:8px}
.info{font-size:12px; color:var(--ink3); font-variant-numeric:tabular-nums}
.acts{display:flex; gap:6px; margin-left:auto}
.acts .btn{font-size:12.5px; padding:0 10px; color:var(--ink2)}

/* ---------- разметка ответа ---------- */
.md{overflow-wrap:break-word; min-width:0}
.md>:first-child{margin-top:0}
.md p{margin:0 0 .65em}
.md>:last-child{margin-bottom:0}
.md h3{font-size:16px; font-weight:700; margin:.9em 0 .4em; line-height:1.3}
.md h4{font-size:15px; font-weight:700; margin:.8em 0 .3em; line-height:1.3}
.md ul,.md ol{margin:0 0 .65em; padding-left:1.4em}
.md li{margin:.15em 0}
.md li>ul,.md li>ol{margin:.15em 0 .2em}
.md strong{font-weight:700}
.md code{font-family:var(--font-mono); font-size:.86em; background:var(--surface2);
 padding:.05em .3em; border-radius:3px; overflow-wrap:anywhere}
.md pre{margin:0 0 .65em; padding:8px 10px; overflow-x:auto; background:var(--surface2);
 border-radius:var(--r); font-size:13px; line-height:1.4}
.md pre code{background:none; padding:0; font-size:inherit; overflow-wrap:normal}
.md hr{border:0; border-top:1px solid var(--hair); margin:1em 0}
.md blockquote{margin:0 0 .65em; padding:2px 0 2px 10px; border-left:3px solid var(--hair);
 color:var(--ink2)}
.md .tbl{max-width:100%; overflow-x:auto; margin:0 0 .8em; border:1px solid var(--hair);
 border-radius:var(--r); background:var(--btnface)}
.md table{border-collapse:collapse; min-width:100%; font-size:13.5px; line-height:1.35;
 font-variant-numeric:tabular-nums}
.md th{padding:6px 10px; text-align:left; vertical-align:bottom; background:var(--surface2);
 border-bottom:1px solid var(--hair); font-size:11.5px; font-weight:600;
 text-transform:uppercase; letter-spacing:.04em; color:var(--ink2)}
.md td{padding:5px 10px; vertical-align:top; border-bottom:1px solid var(--hair)}
.md tbody tr:last-child td{border-bottom:0}
.md th.n,.md td.n{text-align:right; white-space:nowrap}
/* Текстовая клетка не сжимается в столбик по слову: числа стоят без переноса,
   и без нижней границы ширины название фонда уходило бы в пять строк. */
.md td:not(.n):not(.c){min-width:9em}
.md th.c,.md td.c{text-align:center}

/* ---------- поле вопроса ----------
   Верх — просвет между блоками (12) от черты, низ — поле карточки (16) у нижнего края окна. */
.composer{flex:0 0 auto; background:var(--surface); border-top:1px solid var(--hair);
 padding:var(--gap-v) var(--поле-г) calc(var(--поле-в) + env(safe-area-inset-bottom, 0px))}
.composer .alert{margin-bottom:var(--gap-v)}
.qhead{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px}
.count{font-size:12px; color:var(--ink3); font-variant-numeric:tabular-nums}
.count.over{color:var(--crit)}
/* ПОЛЕ — ДВЕ СТРОКИ ПО УМОЛЧАНИЮ (27.09.2026, D-2026-09-27-675: «Блок ввода вопроса по умолчанию
   сделай на 2 строки»): rows="2" в разметке и наименьшая высота здесь — две строки набора и поля
   с чертой, выраженные теми же переменными, что строка и поля самого правила (--строка-q,
   --поле-q, --черта-q): поменяешь поле — наименьшая высота пойдёт за ним, как и мера grow()
   (chat.js), которая берёт вычисленный стиль. Растёт по тексту до 40 % окна. Прежде — одна
   строка (--h, 32 px). */
textarea#q{--строка-q:1.45; --поле-q:4px; --черта-q:1px;
 display:block; width:100%; max-height:40vh; resize:none;
 min-height:calc(2 * var(--строка-q) * 1em + 2 * var(--поле-q) + 2 * var(--черта-q));
 padding:var(--поле-q) 10px; border:var(--черта-q) solid var(--hair); border-radius:var(--r);
 background:var(--btnface); color:var(--ink); line-height:var(--строка-q); overflow-y:hidden}
/* ПОДСКАЗКА ПОЛЯ — КРАСКОЙ БРАУЗЕРА, КАК В ПОЛЯХ «ПОИСК» ОТЧЁТА (26.09.2026,
   D-2026-09-26-672: «серым шрифтом, как в полях "Поиск" инструмента, чтоб не путать с уже
   введённым чёрным текстом»). Отчёт своей краски подсказки не ставит, и Chromium даёт ей
   rgb(117,117,117) в обеих темах (замер 26.09.2026); прежняя краска окна --ink3 (106,104,104)
   читалась почти введённым текстом и снята. Введённое — --ink. */
.qrow{display:flex; align-items:center; gap:var(--gap-орг); margin-top:var(--gap-v); flex-wrap:wrap}
.qrow .spring{flex:1 1 0}
/* Скрепка слева, «Спросить голосом» и «Спросить» — группой справа (D-2026-09-27-673): группа
   переносится целиком, микрофон не отрывается от «Спросить»; подпись скрепки в тесном ряду
   сжимается многоточием раньше, чем ряд перенесётся. */
/* ГРУППА НЕ ШИРЕ РЯДА (27.09.2026, D-2026-09-27-673, по внешней проверке): в окне 360 px
   надпись ожидания раздвигала «Спросить», и группа выходила за край рамки. Теперь группа
   сжимается до ширины ряда, а сжимается в ней лишь подпись «Спросить голосом»
   (многоточием; полное имя — у кнопки для чтеца). «Спросить» не сжимается никогда. */
.qgo{display:flex; align-items:center; gap:var(--gap-орг); flex:0 1 auto; min-width:0; max-width:100%; margin-left:auto}
.qgo .mic{flex:0 1 auto; min-width:0}
.qgo .mic span{min-width:0; overflow:hidden; text-overflow:ellipsis}
.qgo #send,.qgo #stop{flex:0 0 auto}
.attach{flex:0 1 auto; min-width:0}
.attach span{min-width:0; overflow:hidden; text-overflow:ellipsis}
.mic.on{border-color:var(--acc2); color:var(--acc2); background:var(--btnface)}
.mic.on svg{animation:pulse 1.2s infinite ease-in-out}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){ .mic.on svg{animation:none} }
.mic-hint{margin:6px 0 0; font-size:11.5px; color:var(--ink3); line-height:1.35}

/* Знак ↗ «развернуть» — только у свёрнутого окна в отчёте (ниже). */
.expand{display:none; align-items:center; justify-content:center; flex:0 0 auto;
 width:24px; height:20px; margin:-2px -4px -2px 0; padding:0; border:0; border-radius:var(--r);
 background:transparent; color:var(--ink2); cursor:pointer}
.expand:hover{color:var(--acc); background:var(--surface2)}
.expand svg{width:14px; height:14px}
.qhead .count{margin-left:auto}
.qhead .lbl{margin-right:auto}

/* ---------- окно в отчёте: свёрнутое (26.09.2026, D-2026-09-26-672) ----------
   Отчёт держит окно рамкой и сворачивает его в правый нижний угол до 440 × 182 px
   (dashboard.css, .вопроспанель): остаётся один блок вопроса — «Ваш вопрос», поле,
   «Спросить голосом», «Спросить» («Остановить» — пока идёт ответ) и знак ↗; скрепки и ряда
   вложений нет (D-2026-09-27-673) — приложенное в полном окне остаётся приложенным. Шапка,
   беседа и подсказка голоса сняты; поле занимает остаток высоты; ряд кнопок в одну
   строку; тревога — одна строка с многоточием (слова целиком — в подсказке). Вне беседы
   (вход, сообщение, подъём) — одна строка-кнопка «развернуть» (.mini). Вид ставит
   chat.js (html[data-вид]) по знаку отчёта.
   ПОЛЯ — ТЕ ЖЕ, ЧТО У ПОЛНОГО (27.09.2026, D-2026-09-27-675): 18 по бокам, 16 сверху и снизу,
   от поля до ряда кнопок — просвет между блоками; ПОЛЕ ВОПРОСА — НЕ НИЖЕ ДВУХ СТРОК, как в
   полном, И С ТРЕВОГОЙ ТОЖЕ: «В свёрнутом виде две строки обязаны быть видны» (задание пакета
   D-2026-09-27-675). Высота свёрнутого, 182 px, — наименьшая, при которой всё это видно и при
   тревоге (замер 27.09.2026 — у правила .вопроспанель[data-вид="свёрнутый"] в dashboard.css:
   151,5 px без тревоги, 181,5 с тревогой). До находки проверки тревога брала строку у поля
   (поле сжималось до одной строки, --h) при высоте 160 — две строки тогда видны не были. Без
   тревоги поле занимает остаток высоты — сверх двух строк. */
html[data-вид="свёрнутый"] .top,
html[data-вид="свёрнутый"] main,
html[data-вид="свёрнутый"] .mic-hint,
html[data-вид="свёрнутый"] #attach,
html[data-вид="свёрнутый"] .atts,
html[data-вид="свёрнутый"] .dropzone{display:none !important}
html[data-вид="свёрнутый"] .composer{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
 border-top:0; padding:var(--поле-в) var(--поле-г)}
html[data-вид="свёрнутый"] .composer>.wrap,
html[data-вид="свёрнутый"] #askForm{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
html[data-вид="свёрнутый"] .expand{display:inline-flex}
html[data-вид="свёрнутый"] .qhead{align-items:center}
html[data-вид="свёрнутый"] textarea#q{flex:1 1 auto; max-height:none; overflow-y:auto}
html[data-вид="свёрнутый"] .qrow{flex-wrap:nowrap}
html[data-вид="свёрнутый"] .composer .alert{flex:0 0 auto; align-items:center; margin-bottom:6px;
 padding:1px 2px 1px 8px; font-size:12.5px}
html[data-вид="свёрнутый"] .alert>span{padding-top:0; white-space:nowrap; overflow:hidden;
 text-overflow:ellipsis}
html[data-вид="свёрнутый"] .alert .x{width:20px; height:20px; font-size:16px}
/* НИЗКАЯ РАМКА — СВЁРНУТОЕ ПРЕЖНЕГО ОТЧЁТА (27.09.2026, находка сквозной проверки сессии 292). Страницу
   окна служба отдаёт с диска при всяком запросе (сервер.py, _статика), и этот лист получают и те, кто
   держит выпуск 1.1.1281 и старше: их свёрнутое — 440 × 150 (рамка 148 px), а поля 16 и поле в две
   строки выше требуют рамки в 180 (замер проверки: с тревогой «Спросить» уходила за нижний край рамки
   прежнего отчёта на 15,5 px). В рамке ниже 165 px свёрнутое берёт поля, какие были у него до
   D-2026-09-27-675 (8 сверху, 10 снизу, 8 от поля до ряда), и поле не ниже одной строки (--h): без
   тревоги поле и так в две строки с лишним, с тревогой — в одну. Порог — между 148 прежнего и 180
   нынешнего свёрнутого (182 без черты, dashboard.css), с запасом на округление при масштабе страницы.
   Бока — поле листа, 18: ширина рамки у обоих 440. */
@media (max-height: 164px){
 html[data-вид="свёрнутый"] .composer{padding-top:8px; padding-bottom:10px}
 html[data-вид="свёрнутый"] textarea#q{min-height:var(--h)}
 html[data-вид="свёрнутый"] .qrow{margin-top:8px}
}
.mini{margin:var(--поле-в) var(--поле-г); width:calc(100% - 2 * var(--поле-г)); justify-content:space-between; gap:10px;
 height:auto; min-height:var(--h); padding:7px 12px; white-space:normal; text-align:left; line-height:1.35}
.mini span{min-width:0; overflow-wrap:anywhere}

/* ---------- вложения (27.09.2026, D-2026-09-27-673) ----------
   Ряд чипов над полем: миниатюра либо значок рода, имя с многоточием, размер, полоса
   загрузки, ×. В пузыре вопроса — те же файлы кнопками над текстом. Место, куда отпустить
   перетаскиваемые файлы, — пунктир краской акцента поверх окна. Просмотр картинки —
   <dialog> в оформлении окна. Ширины миниатюр — числами: политика окна (style-src 'self')
   атрибута style не исполняет, и мера задаётся листом. */
.attach svg{width:16px; height:16px}
/* РЯД ЧИПОВ НЕ ВЫТЕСНЯЕТ ПОЛЕ И «СПРОСИТЬ» (27.09.2026, D-2026-09-27-673, по внешней
   проверке): прежде ряд рос без предела, и в наименьшем окне отчёта (360 × 300) пять
   чипов уводили «Спросить» за нижний край рамки. Ряд — не выше двух строк чипов и края
   третьей (край виден — есть что прокрутить; в окне 600 px пять чипов и так в две строки),
   а в низком окне (ниже 400 px) — одна строка с прокруткой вбок и поле беседы с узкими
   отступами. Замер 27.09.2026, пять чипов: 360 × 300, 360 × 380, 360 × 420, 360 × 480,
   600 × 480, 600 × 300 — поле и «Спросить» в рамке, без прокрутки документа.
   РЯД ПОД ПОЛЕМ В НИЗКОМ ОКНЕ — В ОДНУ СТРОКУ (27.09.2026, D-2026-09-27-675): поле в две строки
   и поля карточки взяли у окна 360 × 300 с пятью чипами 32 px сверх рамки (замер: документ окна
   330 px при рамке 298 — «Спросить» ушёл за нижний край). Ряд под полем в узком окне
   переносился на вторую строку (+42 px); в низком окне он не переносится. ТЕСНОТУ БЕРЁТ СНАЧАЛА
   ПОДПИСЬ СКРЕПКИ (находка проверки 27.09.2026): ряд сжимал обе подписи в долю их ширин, и в
   окне 360 × 300 «Спросить голосом» сжималась до «С.» (13 px из 115), а скрепка держала 83. Теперь
   скрепка сжимается первой (flex-shrink 1000 против 1 у группы) до одного значка — её наименьшая
   ширина: поля .btn (0 14px), черта (1px), значок (.btn svg, 16px) и просвет (.btn, gap 6px), —
   и лишь потом подпись «Спросить голосом»; распорка в тесном ряду снята — группу и без неё
   прижимает вправо margin-left:auto, а её просвет брал 10 px у подписи. Замер 27.09.2026: 360 ×
   300 — скрепка значком, «Спросить голосом» 106 px из 115; 420 × 300 — подпись микрофона
   целиком. Полные имена — у кнопок для чтеца. Поле остаётся в две строки. */
.atts{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 6px; max-height:92px; overflow-y:auto;
 overscroll-behavior:contain}
@media (max-height: 400px){
 main{padding-top:4px; padding-bottom:4px}
 .atts{flex-wrap:nowrap; max-height:none; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin}
 .atts .att{flex:0 0 auto}
 .qrow{flex-wrap:nowrap}
 .qrow .spring{display:none}
 .qrow .attach{flex-shrink:1000; min-width:calc(2 * 14px + 2 * 1px + 16px + 6px)}
}
.att{position:relative; display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:100%;
 height:36px; padding:0 2px 0 3px; border:1px solid var(--hair); border-radius:var(--r);
 background:var(--btnface); font-size:12.5px; line-height:1.2; overflow:hidden}
.att[data-state="uploading"]{border-style:dashed}
.att-th{flex:0 0 auto; width:28px; height:28px; object-fit:cover; border-radius:3px; background:var(--surface2)}
.att-ic{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
 border-radius:3px; background:var(--surface2); color:var(--ink2); font-family:var(--font-mono);
 font-size:9px; font-weight:700; letter-spacing:.02em}
.att-n{min-width:0; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.att-s{flex:0 0 auto; color:var(--ink3); white-space:nowrap; font-variant-numeric:tabular-nums; font-size:11.5px}
.att-x{flex:0 0 auto; width:24px; height:24px; border:0; border-radius:var(--r); background:transparent;
 color:var(--ink2); font-size:17px; line-height:1; cursor:pointer}
.att-x:hover{background:var(--surface2); color:var(--ink)}
.att-bar{position:absolute; left:0; right:0; bottom:0; height:2px}
.att-bar i{display:block; width:0; height:100%; background:var(--acc); transition:width .15s linear}
.att[data-state="done"] .att-bar{display:none}

.uatt{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; max-width:88%; margin:0 0 4px}
.uatt-i{display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:240px; min-height:34px;
 padding:3px 9px 3px 3px; border:1px solid var(--hair); border-radius:var(--r); background:var(--btnface);
 color:var(--ink); font-size:12.5px; line-height:1.25; text-align:left; cursor:pointer}
.uatt-i:hover{border-color:var(--ink3); background:var(--surface2)}
.uatt-i img{flex:0 0 auto; width:56px; height:56px; object-fit:cover; border-radius:3px; background:var(--surface2)}
.uatt-n{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.dropzone{position:fixed; inset:6px; z-index:20; display:flex; align-items:center; justify-content:center;
 border:2px dashed var(--acc); border-radius:8px; background:var(--veil); pointer-events:none}
.dropzone-card{display:flex; flex-direction:column; align-items:center; gap:4px; max-width:calc(100% - 32px);
 padding:14px 18px; border:1px solid var(--hair); border-radius:var(--r); background:var(--card);
 color:var(--ink); font-size:14.5px; text-align:center}
.dropzone-card span{color:var(--ink2); font-size:12.5px}

.viewer{width:min(1100px, calc(100vw - 16px)); max-width:none; max-height:calc(100vh - 16px); margin:auto;
 padding:0; border:1px solid var(--hair); border-radius:var(--r); background:var(--card); color:var(--ink);
 box-shadow:0 10px 36px rgba(32,30,29,.28); overflow:hidden}
.viewer[open]{display:flex; flex-direction:column}
.viewer::backdrop{background:var(--shade)}
.viewer-bar{flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:5px 5px 5px 12px;
 border-bottom:1px solid var(--hair)}
.viewer-t{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
 font-size:13.5px; color:var(--ink2)}
.viewer .x{flex:0 0 auto; width:28px; height:28px; border:0; border-radius:var(--r); background:transparent;
 color:var(--ink); font-size:20px; line-height:1; cursor:pointer}
.viewer .x:hover{background:var(--surface2)}
.viewer-body{flex:1 1 auto; min-height:0; overflow:auto; display:flex; align-items:flex-start;
 justify-content:center; background:var(--surface2)}
.viewer-body img{display:block; max-width:100%; height:auto}

/* ---------- диалог окна ----------
   Подтверждение — своим диалогом в оформлении окна, а не окном браузера
   («сайт … спрашивает»): 26.09.2026, D-2026-09-26-668. Подложка ::backdrop в
   старых Chrome краски :root не наследует — её цвет задан числом. */
.dlg{width:min(420px, calc(100vw - 2 * var(--поле-г))); max-width:none; margin:auto;
 padding:18px 20px 16px; border:1px solid var(--hair); border-radius:var(--r);
 background:var(--card); color:var(--ink); box-shadow:0 10px 36px rgba(32,30,29,.22)}
.dlg::backdrop{background:rgba(32,30,29,.38)}
.dlg-t{margin:0 0 6px; font-size:17px; font-weight:700; line-height:1.3}
.dlg-d{margin:0 0 18px; font-size:14.5px; line-height:1.45; color:var(--ink2)}
.dlg-acts{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px}
/* браузер без showModal: диалог стоит поверх листа сам, подложкой — тень */
.dlg.plain{position:fixed; inset:0; z-index:10; height:max-content;
 box-shadow:0 0 0 100vmax rgba(32,30,29,.38)}
@media (prefers-color-scheme: dark){
 .dlg{box-shadow:0 10px 36px rgba(0,0,0,.55)}
 .dlg::backdrop{background:rgba(0,0,0,.58)}
 .dlg.plain{box-shadow:0 0 0 100vmax rgba(0,0,0,.58)}
}

/* ---------- узкое окно ----------
   Поле по бокам в узком окне НЕ сужается (27.09.2026, D-2026-09-27-675): прежде здесь стояло
   12 px, а окно в отчёте бывает и 360 px — у карточки инструмента поле одно при всякой ширине. */
@media (max-width: 520px){
 .msg.bot{padding:8px 10px}
 .bubble,.umeta{max-width:94%}
 .brand-t{font-size:14px}
 .top-act{margin-left:0}
}

/* Подпись для выключенного JavaScript: отступ классом, а не атрибутом style —
   политика содержимого окна (style-src self) атрибут style не исполняет. */
.noscript{padding:16px}