/* FROST 5 — кабинет-нить клиента (/c/<токен>). Эталон — docs/frost5/mock/c2.html, вкладки «Кабинет» и «Telegram».
   Все цвета — токены family.css: ни одного вбитого цвета, иначе светлая и тёмная темы разъедутся.
   Иерархию держат волосяные линии и заливка одного слоя, а не тени: теней почти нет. */

html, body { height: 100%; margin: 0; overflow: hidden; }

/* ---------- каркас ---------- */
/* Слои нити: c0 — поверхность, cb — пузырь, cc — карточка. В тёмной шаг между слоями берём через уровень
   (bg→p2), чтобы пузырь отличался от фона заметнее соседнего уровня; в светлой пузыри и карточки — белая бумага
   на сером фоне (как в Telegram), а вложенное отделяют линии, не заливка: у p1/p2 светлой разница всего ≈4. */
.cab {
  --cb: var(--p2); --cc: var(--p2); --ce: var(--edge); --cm: var(--mu);
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr);
  /* --h ставит скрипт по visualViewport: когда на телефоне поднимается клавиатура, строка ввода остаётся над ней */
  height: var(--h, 100dvh); color: var(--fg);
}
html.light .cab { --cb: var(--p1); --cc: var(--p1); }
/* ---------- Тёмная тема: вторичный серый текст на новой лестнице (замер ui-contrast, сверка прода 3.56.20) ----------
   Лестница p1/p2/p3 (L* 19.6 → 29.1 → 38.5, шаги 9.5 и 9.4) лежит в sky.css и общая для всех страниц над океаном. На втором уровне
   прежний серый --fa (#9AA3B2) давал 3.8:1, поэтому в рабочем месте и кабинете он светлее: #B1BAC8 — 4.9:1 на p2. */
html.sky-glass:not(.light) body { --fa: #B1BAC8; }

.cab > * { min-width: 0; min-height: 0; }

.cabtop { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--edge); background: var(--p1); }
.mk { display: flex; align-items: center; gap: 8px; flex: none; font: 800 italic 16px var(--disp); }
/* Знак FROST 5 (вариант A «Кристалл-узел», утверждён владельцем 08.10): цвета токенами — живёт в обеих темах */
.mk-s { width: 20px; height: 20px; flex: none; }
.mk-ice { stroke: var(--ice); } .mk-icef { fill: var(--ice); } .mk-volt { fill: var(--volt); } .mk-ink { fill: var(--bg); }
.mk-ice path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: mkdraw .5s cubic-bezier(.22,1,.36,1) forwards; }
.mk-icef circle, .mk-volt { transform-box: fill-box; transform-origin: center; animation: mkpop .36s cubic-bezier(.34,1.56,.64,1) .35s both; }
@keyframes mkdraw { to { stroke-dashoffset: 0; } }
@keyframes mkpop { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
/* «Меньше движения» у владельца: короче, но не выключено */
@media (prefers-reduced-motion: reduce) { .mk-ice path { animation-duration: .25s; } .mk-icef circle, .mk-volt { animation-duration: .18s; animation-delay: .15s; } }
.prj { flex: 0 1 auto; min-width: 0; text-align: left; color: var(--mu); font-size: 13px; font-weight: 700; }   /* название проекта стоит у знака, дальше «На сайт»; распорка .sp уводит языки и тему вправо */
/* Язык — одна кнопка со списком (как на главной): <details> раскрывает список без скрипта; ссылки «?lang=» ведут на эту же страницу */
.sp { flex: 1; }
.lang1 { position: relative; flex: none; }
.lang1 > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: var(--r2); border: 1px solid var(--edge2); background: var(--p2); color: var(--fg); font: 800 12px var(--f); letter-spacing: .05em; cursor: pointer; user-select: none; }
.lang1 > summary::-webkit-details-marker { display: none; }
.lang1 > summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.lang1 > summary:focus-visible, .lang1-m a:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.lang1-m { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; display: grid; min-width: 170px; padding: 6px; border-radius: var(--r2); background: var(--p1); border: 1px solid var(--edge2); box-shadow: var(--sh); }
.lang1-m a { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 9px; color: var(--fg); text-decoration: none; font: 600 13.5px var(--f); }
.lang1-m a b { font: 800 12px var(--f); color: var(--mu); width: 22px; }
/* Наведение действует только там, где указатель умеет наводиться. На телефоне наведения нет: браузер
   вешает :hover после КАСАНИЯ и держит, пока не тапнешь в другое место — кнопка остаётся подсвеченной,
   стрелка уехавшей. Владелец 28.10: «интерфейсы кнопки все былмает». */
@media (hover:hover){.lang1-m a:hover{ background: var(--p2); }} .lang1-m a[aria-current] { background: var(--ice-soft); } .lang1-m a[aria-current] b { color: var(--ice-t); }
/* телефон: у кнопки языка только код, цели нажатия 44px */
@media (max-width: 600px) { .lang1 > summary { height: 44px; min-width: 44px; justify-content: center; padding: 0 10px; } .lang1 > summary svg { display: none; } .lang1-m a { height: 44px; } }

.ib { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r3); border: 1px solid var(--edge); background: transparent; color: var(--fg); cursor: pointer; transition: transform var(--t1) var(--ease), background-color var(--t1); }
.ib:active { transform: scale(.985); }
.ib svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.ib:focus-visible, .chip:focus-visible, .cd summary:focus-visible, .in:focus-visible, .rmk:focus-visible, .rb:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }

.cabmain { display: flex; flex-direction: column; border-right: 1px solid var(--edge); }

/* ---------- закреплённая полоса статуса ---------- */
.pin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--edge); background: var(--metal), var(--p1); flex: none; }
.pin .hl { font: 800 italic 17px/1.18 var(--disp); text-transform: uppercase; margin: 2px 0; overflow-wrap: anywhere; }
.pin .sub { color: var(--mu); font-size: 12.5px; line-height: 1.4; }
.pin .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pin .batt { width: 150px; }
.pin .tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* чек-лист на телефоне: свёрнутый блок под полосой статуса */
.tdm { display: none; border-bottom: 1px solid var(--edge); background: var(--p1); flex: none; }
.tdm summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; cursor: pointer; font-size: 13px; font-weight: 700; }
.tdm summary::-webkit-details-marker { display: none; }
.tdm summary:after, .cd.dt summary:after { content: ""; width: 7px; height: 7px; margin: 0 4px 3px 2px; flex: none; border-right: 2px solid var(--mu); border-bottom: 2px solid var(--mu); transform: rotate(45deg); transition: transform var(--t2) var(--ease); }
.tdm[open] summary:after, .cd.dt[open] summary:after { transform: rotate(-135deg) translate(-2px, -2px); }
.tdm summary .sp { flex: 1; }
.tdm .tl { padding: 0 16px 8px; }

/* ---------- нить ---------- */
.conv { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.thread { flex: 1; min-height: 0; position: relative; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; padding: 16px var(--gut); scroll-padding: 12px 0; overscroll-behavior: contain; }
/* Нить и ввод держим одной колонкой ≤ 760px по центру: на широком экране карточки у левого края оставляли пустую полосу справа */
.thread > * { flex: none; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.thread > .rise { animation: rise var(--t3) var(--ease) both; }

.m { max-width: min(720px, 86%); padding: 10px 13px; border-radius: 16px 16px 16px 5px; background: var(--cb); border: 1px solid var(--ce); font-size: 14px; line-height: 1.42; align-self: flex-start; white-space: pre-wrap; overflow-wrap: anywhere; }
.m .who { display: block; margin-bottom: 2px; color: var(--ice-t); font: 700 11.5px/1.3 var(--f); }
.m .at { margin-left: 8px; color: var(--cm); font: 500 10.5px var(--mono); white-space: nowrap; }
.m.me { align-self: flex-end; border-radius: 16px 16px 5px 16px; background: var(--ice); border-color: transparent; color: var(--ice-ink); font-weight: 700; }
.m.me .at { color: inherit; opacity: .75; }
.m.pend { opacity: .7; }
.m.ty { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
/* «Агент думает» — знак «Кристалл-узел» (тот же, что в шапке) по кругу проигрывает её анимацию, период 1.6 с: лучи прорисовываются →
   узлы выпрыгивают → искра вспыхивает → короткая пауза → знак гаснет и всё снова (владелец 09.10: «наш анимирующийся логотип в чате,
   когда агент думает»). Цвета — токены. «Меньше движения» (у владельца включено системно): лучи стоят целиком, узлы и искра только
   пульсируют — движение мягче, но не выключено. */
.typing{display:inline-flex;align-items:center}
.think{display:block;width:22px;height:22px;flex:none;overflow:visible}
.think .tk-ice{stroke:var(--ice)} .think .tk-icef{fill:var(--ice)} .think .tk-spark{fill:var(--volt)} .think .tk-ink{fill:var(--bg)}
.think .tk-arm{stroke-dasharray:40;stroke-dashoffset:40;animation:tkdraw 1.6s cubic-bezier(.22,1,.36,1) infinite}
.think .tk-arm:nth-child(2){animation-delay:.04s} .think .tk-arm:nth-child(3){animation-delay:.08s} .think .tk-arm:nth-child(4){animation-delay:.12s}
.think .tk-arm:nth-child(5){animation-delay:.16s} .think .tk-arm:nth-child(6){animation-delay:.2s}
.think .tk-node,.think .tk-spark{transform-box:fill-box;transform-origin:center;opacity:0}
.think .tk-node{animation:tkpop 1.6s cubic-bezier(.34,1.56,.64,1) infinite}
.think .tk-spark{animation:tkspark 1.6s ease-out infinite}
@keyframes tkdraw{0%{stroke-dashoffset:40;opacity:1}30%,72%{stroke-dashoffset:0;opacity:1}88%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes tkpop{0%,26%{transform:scale(.2);opacity:0}46%,72%{transform:scale(1);opacity:1}88%,100%{transform:scale(.6);opacity:0}}
@keyframes tkspark{0%,45%{transform:scale(0);opacity:0}56%{transform:scale(1.35);opacity:1}64%,72%{transform:scale(1);opacity:1}88%,100%{transform:scale(.6);opacity:0}}
@keyframes tkpulse{0%,100%{transform:scale(.82);opacity:.45}50%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .think .tk-arm{animation:none;stroke-dashoffset:0}
  .think .tk-node{animation:tkpulse 1.6s ease-in-out infinite;opacity:.45}
  .think .tk-node:nth-child(2){animation-delay:.2s} .think .tk-node:nth-child(3){animation-delay:.4s} .think .tk-node:nth-child(4){animation-delay:.6s} .think .tk-node:nth-child(5){animation-delay:.8s}
  .think .tk-spark{animation:tkpulse 1.6s ease-in-out infinite;animation-delay:.5s;opacity:.45}
}
@keyframes blink { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* ошибка — строка в нити, а не всплывающее окно */
.m.err { align-self: stretch; max-width: none; display: flex; align-items: center; gap: 12px; background: var(--pk-soft); border-color: var(--pk); box-shadow: inset 3px 0 0 var(--pk); }
.m.err span { flex: 1; min-width: 0; }

.sep { align-self: center; max-width: 100%; padding: 3px 10px; border-radius: 99px; background: var(--cb); border: 1px solid var(--ce); color: var(--cm); font: 600 11.5px var(--f); text-align: center; overflow-wrap: anywhere; }
.sep.day { font: 600 10.5px var(--mono); letter-spacing: .08em; }
.ver { align-self: center; color: var(--fa); font: 500 10.5px var(--mono); }
.ver.vm { display: none; }

/* ---------- карточки событий ---------- */
.cd { align-self: stretch; width: 100%; background: var(--metal), var(--cc); border: 1px solid var(--ce); border-radius: var(--r1); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
html.light .cd { box-shadow: var(--sh); }
.cd .hd { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cd .hd .btn { height: 32px; padding: 0 12px; flex: none; }
.cd .hd .mn, .cd summary .mn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cd .hd .mn b, .cd summary .mn b { font-size: 14px; line-height: 1.25; }
.sm { font-size: 12px; line-height: 1.35; }
.gl { width: 30px; height: 30px; border-radius: 9px; background: var(--p3); display: grid; place-items: center; flex: none; font: 800 italic 14px var(--disp); color: var(--ice-t); font-style: italic; }
html.light .gl { background: var(--p2); }
.ttl { font: 800 italic 20px/1.1 var(--disp); text-transform: uppercase; }
.bigp { font: 800 italic 34px/1 var(--disp); }
.cd p { margin: 0; font-size: 13.5px; line-height: 1.42; }

/* карточка-сворачиваемая (цена, этапы): сводка — одна строка, подробности — по нажатию */
.cd.dt { display: block; padding: 0 14px; }
.cd.dt summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; }
.cd.dt summary::-webkit-details-marker { display: none; }
.cd.dt .dtb { padding: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.tot { font: 700 14px var(--f); font-variant-numeric: tabular-nums; }

/* строки внутри карточки — волосяные линии, не заливка */
.ln { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 0; border-top: 1px solid var(--ce); font-size: 13px; }
.ln .mn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ln.two { min-height: 46px; }
.ln .nm { flex: 1; min-width: 0; }
.ln .mono { font-size: 12.5px; flex: none; }

/* ряд фильтров всегда одной строкой (Г175): лишнее уезжает в горизонтальную прокрутку с затуханием у края */
.chips { display: flex; gap: 6px; flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding-right:28px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,black calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,black calc(100% - 28px),transparent); }
.chips::-webkit-scrollbar { display: none; }
.chips > * { flex: none; }
.chip { height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--ce); background: transparent; color: var(--fg); font: 700 12.5px var(--f); cursor: pointer; transition: transform var(--t1) var(--ease), background-color var(--t1); }
.chip:active { transform: scale(.985); filter: brightness(1.15); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: transparent; }
.meth { padding: 8px 0 0; border-top: 1px solid var(--ce); }
.meth .mono { margin-top: 3px; word-break: break-all; }

/* Согласие на документ: галочка «прочитал(а)» → «Согласен». Вся строка — цель нажатия (≥44px), сама галочка 22px с рамкой цвета --mu
   (контраст рамки к карточке ≥3:1 в обеих темах), отмеченная — заливка --ice с тёмной «птичкой». */
.rd { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 13.5px; line-height: 1.35; font-weight: 600; }
.rd input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; display: grid; place-content: center; border: 2px solid var(--mu); border-radius: 6px; background: transparent; cursor: pointer; transition: background-color var(--t1) var(--ease), border-color var(--t1) var(--ease); }
.rd input:checked { background: var(--ice); border-color: var(--ice); }
.rd input:checked::after { content: ""; width: 10px; height: 5px; border-left: 2.5px solid var(--ice-ink); border-bottom: 2.5px solid var(--ice-ink); transform: rotate(-45deg) translate(1px, -1px); }
.rd input:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.rd input:disabled { opacity: .6; cursor: default; }
/* Мелкая строка под кнопкой: что фиксирует подтверждение + ссылка на условия работы (оферту) */
.fine { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.tl2 { color: var(--ice-t); font: 700 12px/1.35 var(--f); text-decoration: underline; text-underline-offset: 3px; }
.tl2:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-radius: 4px; }
/* Заглушка счёта: реквизитов пока нет — честно говорим об этом, без чипов и кнопок. Без заливки: в тёмной теме шаг между карточкой и вложенной заливкой был ΔL* 5.9 (<9), волосяная рамка и акцентная полоска слева различимы без неё. */
.stub { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--r2); border: 1px solid var(--ce); box-shadow: inset 3px 0 0 var(--ice); }
.stub b { font-size: 14px; }
.stub span { color: var(--mu); font-size: 13px; line-height: 1.45; }

.acts { display: flex; flex-wrap: wrap; gap: 8px; }
.acts .btn { text-decoration: none; }
.btn[disabled] { opacity: .7; cursor: default; filter: none; transform: none; }
.rmk { width: 100%; min-height: 76px; resize: vertical; padding: 10px 12px; border-radius: var(--r2); border: 1px solid var(--ce); background: var(--p2); color: var(--fg); font: 500 14px/1.4 var(--f); }
html.light .rmk { background: var(--p2); }

.docb { max-height: 46vh; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--ce); border-radius: var(--r2); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.docb h1, .docb h2, .docb h3 { margin: .9em 0 .3em; font: 800 14px/1.3 var(--f); }
.docb h1:first-child, .docb h2:first-child, .docb h3:first-child { margin-top: 0; }
.docb p, .docb ul, .docb ol { margin: .4em 0; }
.docb table { width: 100%; border-collapse: collapse; }
.docb td, .docb th { padding: 3px 6px; border-top: 1px solid var(--ce); text-align: left; vertical-align: top; }
.docb img { max-width: 100%; height: auto; }

/* ---------- строка ввода: прикреплена к низу ---------- */
.comp { display: flex; gap: 8px; align-items: center; flex: none; padding: 10px var(--gut) max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--edge); background: var(--p1); }
.comp[hidden] { display: none; }
.comp .in { flex: 1; min-width: 0; height: 44px; border-radius: 22px; background: var(--p2); border: 1px solid var(--edge); padding: 0 16px; color: var(--fg); font: 600 14px var(--f); outline: 0; }
.comp .in:focus { border-color: var(--ice-t); }
.comp .in::placeholder { color: var(--mu); }
.rb { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--edge); background: var(--p2); color: var(--fg); display: grid; place-items: center; cursor: pointer; flex: none; transition: transform var(--t1) var(--ease), background-color var(--t1); }
.rb:active { transform: scale(.985); filter: brightness(1.2); }
.rb[disabled] { opacity: .7; cursor: default; }
.rb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rb.send { background: var(--ice); color: var(--ice-ink); border-color: transparent; }
.rb.mic[aria-pressed="true"] { background: var(--pk); color: var(--bg); border-color: transparent; animation: pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px var(--pk-soft); } }

/* ---------- правая колонка (компьютер) ---------- */
.ctxc { border-left: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; background: var(--p1); }
.blk { background: var(--p2); border: 1px solid var(--edge); border-radius: var(--r2); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
html.light .blk { background: var(--bg); }
.blk .row { min-height: 34px; font-size: 13px; }
.blk .rowb { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; border-radius: var(--r3); }
@media (hover:hover){.blk .rowb:hover{ background: var(--p3); }}
@media (hover:hover){html.light .blk .rowb:hover{ background: var(--p3); }}
.blk .big { font: 800 italic 26px/1 var(--disp); }
.blk .nt { margin-top: 4px; }
.tk { display: flex; gap: 10px; align-items: center; min-height: 34px; font-size: 13px; }
.tk i { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--edge2); flex: none; display: grid; place-items: center; }
.tk.done i { background: var(--gr); border-color: transparent; }
.tk.done i:after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--ice-ink); border-bottom: 2px solid var(--ice-ink); transform: rotate(-45deg) translateY(-1px); }
.tk.done span { color: var(--mu); text-decoration: line-through; }
.ctxc .ver { margin-top: auto; align-self: flex-start; }

/* ---------- телефон / мини-апп Telegram: та же страница ---------- */
@media (max-width: 760px) {
  .cab { grid-template-columns: minmax(0, 1fr); }
  .cabmain { border-right: 0; }
  .ctxc { display: none; }
  .tdm:not([hidden]) { display: block; }
  .ver.vm { display: block; }
  .cabtop { padding: 0 8px 0 14px; }
  .ib { width: 44px; height: 44px; }
  .pin { grid-template-columns: minmax(0, 1fr); padding: 9px 14px; gap: 6px; }
  .pin .hl { font-size: 15px; }
  .pin .rt { flex-direction: row; align-items: center; gap: 12px; }
  .pin .batt { flex: 1; width: auto; }
  .pin .tags { justify-content: flex-end; flex: none; }
  .cab { --gut: 12px; }
  .thread { padding: 12px var(--gut); }
  .m { max-width: 90%; }
  .chip { height: 44px; padding: 0 14px; }
  /* кнопки-«клавиатура» карточки: по два в ряд, 44px, как у карточки бота в Telegram */
  .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .acts .btn { height: 44px; border: 0; background: var(--ice-soft); color: var(--fg); border-radius: var(--r3); }
  .acts .btn.pri { background: var(--volt); color: var(--volt-ink); }
  .acts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cd .hd .btn { height: 44px; }
  .tl2 { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
  .m.err { flex-direction: column; align-items: stretch; }
  .m.err .btn { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  /* движение короче (токены семьи), но не выключено; знак «думает» пульсирует — см. блок .think выше */
}

/* Знак — ссылка на сайт: без подчёркивания, цвет текста, отклик на касание */
/* знак 78×20: зона нажатия растёт до 44px отступом с обратным вылетом — шапка выглядит и стоит как прежде */
a.mk { color: inherit; text-decoration: none; border-radius: 8px; transition: opacity var(--t1); padding: 12px 0; margin: -12px 0; }
@media (hover:hover){a.mk:hover{ opacity: .85; }} a.mk:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }

/* Кнопка «На сайт» в шапке (владелец 09.10: «где кнопка на сайт из кабинета») — заметная, мягкий акцент, цель ≥ 44 на телефоне */
.tosite { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 12px; flex: none;
  background: var(--ice-soft); color: var(--ice-t); border: 1px solid color-mix(in srgb, var(--ice) 45%, transparent);
  font: 700 13px var(--f); text-decoration: none; white-space: nowrap; transition: filter var(--t1), transform var(--t1); }
@media (hover:hover){.tosite:hover{ filter: brightness(1.1); }} .tosite:active { transform: scale(.985); }
.tosite:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
@media (max-width: 600px) { .tosite { height: 44px; padding: 0 12px; } }

/* Сенсорные экраны любой ширины: шапка, кнопки и строки контекста — цели нажатия 44px (на телефоне стоймя так уже было) */
@media (pointer:coarse) {
  .tosite, .ib, .lang1 > summary { min-height: 44px; min-width: 44px; }
  .btn, .chip, .blk .rowb { min-height: 44px; }
  .lang1-m a { height: 44px; }
}
/* Вырез и скругления в альбомной ориентации (страница с viewport-fit=cover): шапка не уходит под них */
@media (min-width: 761px) { .cabtop { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } }
/* Телефон: знак · «На сайт» · язык · тема · «Меню» в одной строке на 320–430 (владелец 09.10: «языки и тему рядом»). Название проекта прячется (на 390
   от него оставалось «Проект:…»), зазоры уже; на ≤400 слово у знака убрано — остаётся значок с зоной нажатия 44px. */
@media (max-width: 760px) {
  .cabtop { gap: 4px; padding: 0 max(8px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }
  .prj { display: none; }
  .tosite { padding: 0 10px; }
}
@media (max-width: 400px) { a.mk { font-size: 0; gap: 0; padding: 12px; margin: -12px; } }

/* Большой монитор: окно кабинета не растягивается на весь экран — чат и боковая колонка остаются рядом */
@media (min-width: 1900px) { .cab { max-width: 1800px; margin: 0 auto; } }

/* Поля нити и строки ввода — один токен: на компьютере нить и карточки занимают всю среднюю колонку до правой (без пустого поля), на телефоне 12 */
.cab { --gut: 24px; }
.thread > [data-focus] { scroll-margin-top: 12px; }

/* То же и в кабинете клиента: пульс микрофона и точки «печатает» при «меньше движения» не идут. */
@media (prefers-reduced-motion:reduce){
  .rb.mic,.rb.mic::after{animation:none!important}
}