/* Чат (chat.js; группа меню под «Столом»). Цвета — токены темы (shared.css, tokens.css); подписи серые, без жирного,
   время и ID — моноширинным, всплывающее — плавно (~0,3 с). Узкое окно (< 620 px, телефон) — список и переписка
   по очереди (.narrow / .conv). */
.chbox{height:100%;min-height:0;position:relative}
.chx{display:grid;grid-template-columns:var(--chlw,290px) minmax(0,1fr);height:100%;min-height:0;position:relative;overflow:hidden}
/* граница списка и переписки: тянуть мышью (chat.js split), двойной щелчок — исходная */
.chsplit{position:absolute;top:0;bottom:0;left:var(--chlw,290px);width:8px;margin-left:-4px;cursor:col-resize;z-index:7;touch-action:none}
.chsplit::after,.cosplit::after{content:'';position:absolute;left:4px;top:0;bottom:0;width:1px;background:transparent;transition:background-color .2s}
.chsplit:hover::after,.chsplit.on::after,.cosplit:hover::after,.cosplit.on::after{background:var(--amber)}
.chx.narrow .chsplit{display:none}
.resizing,.resizing *{user-select:none}
.chx.narrow{grid-template-columns:1fr}
.chx.narrow .chc{display:none}
.chx.narrow.conv .chc{display:flex}
.chx.narrow.conv .chl{display:none}
.chin{height:26px;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:0 8px;color:var(--tx);font:12px var(--sans);outline:none;transition:border-color .18s,box-shadow .18s}
.chin:focus{border-color:color-mix(in srgb,var(--amber) 55%,var(--line));box-shadow:0 0 0 1px var(--glow-soft)}
.chin::placeholder{color:var(--dim);opacity:.8}
.chlink{color:var(--dim);text-decoration:underline;text-underline-offset:2px;cursor:pointer;transition:color .15s}
.chlink:hover{color:var(--tx)}
.chcp{font-family:var(--mono);cursor:copy;transition:color .15s}
.chcp:hover{color:var(--amber)}
.chv{width:12px;height:12px;flex:none;vertical-align:-2px}
.chv circle{fill:var(--blue)}
.chv path{fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chav{position:relative;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;
  font:10.5px var(--mono);letter-spacing:.02em;color:var(--dim);border:1px solid var(--line2);background:var(--bg)}
.chav.g{border-radius:7px}
/* в сети — зелёная точка на аватаре, не в сети — серая */
.chdot{position:absolute;right:-2px;bottom:-1px;width:10px;height:10px;box-sizing:border-box;border-radius:50%;border:2px solid var(--panel);
  background:var(--line2);transition:background .3s}
.chdot.on{background:var(--green)}
.chonl{color:var(--green)}
.chty{color:var(--blue)}                                  /* «Печатает…» */

/* ── список ── */
.chl{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:var(--panel)}
.chx.narrow .chl{border-right:0}
.chlh{display:flex;gap:6px;padding:8px;border-bottom:1px solid var(--line);align-items:center;flex:none}
.chlh .chin{flex:1}
.chls{flex:1;overflow-y:auto;min-height:0}
.chsec{font:9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:10px 12px 4px}
.chr{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:center;padding:7px 10px 7px 12px;cursor:pointer;
  border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);transition:background .15s,box-shadow .15s}
.chr.on{background:color-mix(in srgb,var(--amber) 7%,transparent);box-shadow:inset 2px 0 0 var(--amber)}
@media(hover:hover){.chr:hover{background:color-mix(in srgb,var(--tx) 4%,transparent)}}
.chrt{min-width:0;display:flex;flex-direction:column;gap:1px}
.chrn{display:flex;align-items:center;gap:4px;min-width:0;color:var(--tx);font-size:12px;white-space:nowrap}
.chrn>span{overflow:hidden;text-overflow:ellipsis}
.chrl{color:var(--dim);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chrl.chnv{opacity:.65}                                   /* «не подтверждён» — тише компании */
.chrm{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:0}
.chrd{font:10px var(--mono);color:var(--dim);white-space:nowrap}
.chu{min-width:17px;height:16px;padding:0 5px;border-radius:8px;background:var(--amber);color:var(--bg);font:10px/16px var(--mono);text-align:center}
/* закреплённые и колокол: булавка — при наведении (у закреплённых видна всегда), колокол — янтарная полоса и значок */
.chrmi{display:flex;gap:5px;align-items:center;min-height:16px}
.chpinb{width:16px;height:16px;padding:0;border:0;background:none;color:var(--dim);cursor:pointer;opacity:0;transition:opacity .2s,color .15s}
.chpinb svg,.chpinh svg{width:12px;height:12px;fill:currentColor}
.chpinb.on{opacity:.75;color:var(--tx)}
.chpinb:hover{color:var(--amber);opacity:1}
@media(hover:hover){.chr:hover .chpinb{opacity:1}}
.chr.bell{background:color-mix(in srgb,var(--amber) 9%,transparent);box-shadow:inset 3px 0 0 var(--amber)}
.chbt{color:var(--amber)}
.chbi{display:inline-flex;vertical-align:-2px;margin-right:4px;color:var(--amber);animation:chring 1.2s ease-in-out 2}
.chbi svg,.chbl svg,.chtbell svg,.chbelld svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.chbi svg{width:11px;height:11px}
@keyframes chring{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}}
.chnone{padding:16px 14px;color:var(--dim);font-size:11.5px;line-height:1.55;text-align:center}
.chlf{flex:none;border-top:1px solid var(--line);padding:7px 12px;font-size:11px;color:var(--dim);display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden}
.chlf .chlfn{color:var(--tx);overflow:hidden;text-overflow:ellipsis}
.chlf .chcp{font-size:10.5px}

/* ── новая группа ── */
.chgf{display:flex;flex-direction:column;gap:8px;padding:0 10px 12px}
.chgf .chsec{padding:10px 2px 0}
.chsel{display:flex;flex-wrap:wrap;gap:5px}
.chsel:empty{display:none}
.chsel .chip,.chsetb .chip{height:22px;font-size:10.5px;font-weight:400;cursor:pointer;background:none;color:var(--tx);border-color:var(--line2)}
.chsel .chip:hover,.chsetb .chip:hover{border-color:color-mix(in srgb,var(--red) 55%,var(--line2))}
.chgr{max-height:260px;overflow-y:auto;margin:0 -10px;border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.chgr:empty{display:none}
.chgact{display:flex;gap:6px}

/* ── переписка ── */
/* overflow — скрытая панель участников (сдвинута вправо для появления) не должна сдвигать весь чат вбок */
.chc{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;overflow:hidden;background:var(--bg);container:chc/inline-size}
.chc>.chm,.chc>.chfw{transition:margin-right .34s cubic-bezier(.22,1,.36,1),margin-left .34s cubic-bezier(.22,1,.36,1)}
@container chc (min-width:760px){.chc.pon>.chm,.chc.pon>.chfw{margin-right:var(--chpw,290px)}.chc.pon>.chnew{right:calc(var(--chpw,290px) + 16px)}}   /* широко — участники рядом, а не поверх */
.chempty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:12px;line-height:1.6;text-align:center;padding:20px}
.chch{height:46px;flex:none;display:flex;align-items:center;gap:9px;padding:0 10px;border-bottom:1px solid var(--line);background:var(--panel)}
.chback{display:none;padding:0 8px}
.chx.narrow .chback{display:inline-flex}
.chct{min-width:0;display:flex;flex-direction:column;gap:1px}
.chcn{display:flex;align-items:center;gap:5px;min-width:0;font-size:12.5px;color:var(--tx);white-space:nowrap}
.chcn>span{overflow:hidden;text-overflow:ellipsis}
.chcs{font:10.5px var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chm{flex:1;overflow-y:auto;min-height:0;padding:6px 0 10px;overscroll-behavior:contain}
.chmore{display:block;margin:6px auto 4px;background:none;border:1px solid var(--line);border-radius:10px;color:var(--dim);font:10px var(--mono);padding:2px 10px;cursor:pointer;transition:color .15s,border-color .15s}
.chmore:hover{color:var(--tx);border-color:var(--line2)}
.chday{display:flex;justify-content:center;margin:12px 0 4px}
.chday span{font:10px var(--mono);color:var(--dim);letter-spacing:.04em;padding:1px 9px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
/* свои — справа (время справа, без имени, текст в лёгкой тонированной «облачке»), чужие — слева с именем;
   ширина сообщения ограничена с другой стороны, чтобы длинная строка не шла через весь экран */
.chmsg{display:grid;grid-template-columns:50px minmax(0,1fr);padding:1px var(--chside,12%) 1px 0;position:relative;transition:background .15s}
.chmsg.me{grid-template-columns:minmax(0,1fr) 50px;padding:1px 0 1px var(--chside,12%)}
.chmsg:not(.cont){margin-top:var(--chgap,7px)}
.chmt{font:10px/18px var(--mono);color:var(--dim);text-align:right;padding-right:9px}
.chmsg.me .chmt{order:2;text-align:left;padding:0 0 0 9px}
.chmsg.cont .chmt{opacity:0;transition:opacity .15s}
.chmx{min-width:0;padding-left:9px}
.chmsg.me .chmx{display:flex;flex-direction:column;align-items:flex-end;padding:0 9px 0 0}
.chmsg.me .chmx>*{max-width:100%}
.chmsg.me .chmb:not(.big){background:color-mix(in srgb,var(--amber) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--amber) 14%,var(--line));
  border-radius:9px 9px 3px 9px;padding:4px 10px}
html.light .chmsg.me .chmb:not(.big){background:color-mix(in srgb,var(--amber) 9%,#fff)}
.chmsg.me.cont .chmb:not(.big){border-top-right-radius:3px}
.chmn{display:flex;align-items:center;gap:4px;font-size:11px;line-height:18px;color:var(--dim)}
.chmn span{cursor:default;transition:color .15s}
.chmn span:hover{color:var(--tx)}
.chmb{font-size:var(--chfs,12.5px);line-height:calc(var(--chfs,12.5px) * 1.44);color:var(--tx);white-space:pre-wrap;overflow-wrap:anywhere}
.chmb a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.chmb.big{font-size:30px;line-height:38px}               /* только эмодзи (до трёх) — крупно */
.chrd{margin-top:1px}
.chmx .chrd{font:9.5px var(--mono);color:var(--dim)}
/* исправить своё: карандаш под временем (виден при наведении, на сенсорных — всегда); исправляемое — янтарная рамка */
.chedb{display:block;margin-top:1px;padding:0 2px;border:0;background:none;font:12px/14px var(--mono);color:var(--dim);cursor:pointer;opacity:0;transition:opacity .15s,color .15s}
.chmsg.me .chedb{margin-left:-2px}
.chedb:hover{color:var(--amber)}
@media(hover:none){.chedb{opacity:.7}.chmsg.cont .chmt:has(.chedb){opacity:1}}
.chmsg.editing .chmb{outline:1px dashed color-mix(in srgb,var(--amber) 70%,transparent);outline-offset:2px}
.chmsg.editing .chrd{margin-top:5px}                       /* «изменено · прочитано» — не под рамкой */
.chedbar{display:none;align-items:center;gap:10px;padding:5px 10px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--amber) 7%,var(--panel));
  font-size:11px;color:var(--amber)}
.chedbar.on{display:flex}
.chedbar .chverd{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chedbar .chpx{margin-left:auto}
@media(hover:hover){
  .chmsg:hover{background:color-mix(in srgb,var(--tx) 3%,transparent)}
  .chmsg.cont:hover .chmt{opacity:1}
  .chmsg:hover .chedb{opacity:.75}
}
/* стикер: эмодзи и подпись в рамке цвета смысла; картинка/GIF — по размерам, клик — целиком */
.chst{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:108px;height:96px;margin:3px 0;border:1px solid var(--line2);border-radius:10px;
  background:color-mix(in srgb,var(--panel) 70%,var(--bg));user-select:none}
.chste{font-size:38px;line-height:44px}
.chstc{font:9.5px var(--mono);letter-spacing:.08em;color:var(--dim);text-align:center;padding:0 4px}
.chst.st-g{border-color:color-mix(in srgb,var(--green) 55%,var(--line2))}.chst.st-g .chstc{color:var(--green)}
.chst.st-r{border-color:color-mix(in srgb,var(--red) 55%,var(--line2))}.chst.st-r .chstc{color:var(--red)}
.chst.st-a{border-color:color-mix(in srgb,var(--amber) 55%,var(--line2))}.chst.st-a .chstc{color:var(--amber)}
.chst.st-b{border-color:color-mix(in srgb,var(--blue) 50%,var(--line2))}.chst.st-b .chstc{color:var(--blue)}
.chimg{position:relative;display:block;margin:3px 0;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.chimg img{display:block;width:100%;height:100%;object-fit:cover}
.chgif{position:absolute;left:6px;bottom:6px;font:9px var(--mono);letter-spacing:.1em;color:#fff;background:rgba(0,0,0,.55);border-radius:3px;padding:1px 4px}
.chc.drop::after{content:'отпустите — GIF или картинка';position:absolute;inset:46px 0 0;display:flex;align-items:center;justify-content:center;z-index:8;
  font:11px var(--mono);letter-spacing:.08em;color:var(--amber);background:color-mix(in srgb,var(--bg) 82%,transparent);border:1px dashed var(--amber)}
/* медиатека во вкладке GIF: поиск, разделы, сетка, источники и лицензии */
.chmh{position:sticky;top:-8px;z-index:1;display:flex;flex-direction:column;gap:7px;padding:2px 0 6px;background:var(--panel)}
.chmq{width:100%}
.chmsec{display:flex;gap:12px;flex-wrap:wrap}
.chmw{display:flex;flex-direction:column;gap:6px;min-height:120px}
.chmh,.chmw,.chmf{flex:none}                                  /* в прокручиваемой колонке панели не сжимать — иначе подпись наезжает на сетку */
.chmg{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:4px}
.chmi{height:62px;border:0;border-radius:8px;background:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s}
.chmi:hover{background:color-mix(in srgb,var(--amber) 9%,transparent);transform:scale(1.06)}
.chmi img{width:52px;height:52px;object-fit:contain}
.chmi:disabled{opacity:.45}
.chmf{font:9.5px var(--mono);color:var(--dim);line-height:1.5;padding-top:5px;border-top:1px solid var(--line)}
.chmf a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.chmf:empty{display:none}
.chpk.wide:has(.chmw){max-height:440px}
/* в переписке: из медиатеки — как стикер (без рамки и фона); живые эмодзи — анимации медиатеки */
.chlib{display:inline-block;margin:2px 0}
.chlib img{display:block;width:128px;height:128px;object-fit:contain}
.chlib:not(.anim) img{width:112px;height:112px}
img.chae{vertical-align:middle;object-fit:contain}
.chst img.chste{width:46px;height:46px}
.chmb.big img.chae{width:46px;height:46px;margin-right:3px}
/* оформление текста: **жирный**, _курсив_, __подчёркнутый__, ~~зачёркнутый~~, `моно` (метки — в chat.js fmt) */
.chbox b.fb,.chfpv b.fb{font-weight:650;color:var(--tx)}
.chbox i.fi,.chfpv i.fi{font-style:italic}
.chbox u.fu,.chfpv u.fu{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.chbox s.fs,.chfpv s.fs{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--tx) 70%,transparent)}
.chbox code.fc,.chfpv code.fc{font:.92em var(--mono);background:color-mix(in srgb,var(--tx) 8%,transparent);border-radius:3px;padding:0 4px}
/* строка кнопок оформления над полем ввода («Aa») */
.chfmt{display:none;align-items:center;gap:4px;padding:6px 10px 0;background:var(--panel);border-top:1px solid var(--line);min-width:0}
.chfmt.on{display:flex;animation:chfmtin .25s ease-out}
@keyframes chfmtin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.chfmt.on+.chf{border-top:0}
.chfb{min-width:28px;height:24px;padding:0 6px;border:1px solid var(--line);border-radius:4px;background:none;color:var(--tx);cursor:pointer;font:13px/1 var(--sans);transition:border-color .15s,color .15s}
.chfb:hover{border-color:color-mix(in srgb,var(--amber) 60%,var(--line));color:var(--amber)}
.chfb.b{font-weight:700}.chfb.i{font-style:italic}.chfb.u{text-decoration:underline;text-underline-offset:2px}.chfb.s{text-decoration:line-through}.chfb.c{font:10.5px var(--mono)}
.chfpv{flex:1;min-width:0;margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--tx)}
.chfpv:empty{display:none}
.chfh{margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chtaa{font:600 12px var(--sans);letter-spacing:-.02em;width:30px}
/* бумага в тексте — ссылка на карточку */
.chmb a.chsl,.chtbl a.chsl{color:var(--tx);text-decoration:none;border-bottom:1px dotted color-mix(in srgb,var(--blue) 75%,transparent);transition:color .15s,border-color .15s}
.chmb a.chsl:hover,.chtbl a.chsl:hover{color:var(--blue);border-bottom-style:solid}
/* таблица в сообщении: прокрутка вбок, числа — вправо; «копировать таблицу» — при наведении */
.chtbx{display:flex;align-items:flex-end;gap:8px;max-width:100%;margin:3px 0}   /* «копировать» — справа от таблицы, без лишней строки */
.chtblw{min-width:0;overflow-x:auto}
.chtbl{border-collapse:collapse;font-size:11.5px;line-height:16px}
.chtbl th,.chtbl td{border:1px solid var(--line);padding:3px 8px;text-align:left;vertical-align:top;white-space:nowrap}
.chtbl th{font-weight:400;color:var(--dim);background:var(--panel)}
.chtbl td{color:var(--tx)}
.chtbl td.n{text-align:right;font-family:var(--mono);font-size:11px}
.chtcp{font:9.5px var(--mono);color:var(--dim);cursor:copy;opacity:0;transition:opacity .2s,color .15s}
.chtcp:hover{color:var(--amber)}
@media(hover:hover){.chmsg:hover .chtcp{opacity:1}}
@media(hover:none){.chtcp{opacity:.8}}
/* колокол в переписке */
.chmsg.bell .chmx{box-shadow:inset 2px 0 0 var(--amber);background:color-mix(in srgb,var(--amber) 7%,transparent);border-radius:0 6px 6px 0;padding:3px 10px 4px 11px}
.chmsg.bell .chmx{justify-self:start;max-width:100%}                    /* выделение колокола — по тексту, не на всю ширину */
.chmsg.me.bell .chmx{justify-self:end;box-shadow:inset -2px 0 0 var(--amber);border-radius:6px 0 0 6px;padding:3px 11px 4px 10px}   /* свой колокол — полоса справа */
.chmsg.me.bell .chmb{background:none;border:0;padding:0}
.chbl{display:flex;gap:5px;align-items:center;font:9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin:1px 0 2px}
.chbl svg{width:12px;height:12px}
.chsys{text-align:center;font-size:11px;color:var(--dim);margin:8px 16px;line-height:1.5}
/* «Поддержка FinFacts»: янтарная отметка и карточка обращения «написать нам» */
.chv.sys circle{fill:var(--amber)}
.chsys.chfbn{display:flex;flex-direction:column;gap:4px;text-align:left;width:min(520px,86%);margin:10px auto;padding:8px 12px;border:1px solid color-mix(in srgb,var(--amber) 35%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--amber) 5%,transparent)}
.chsys.chfbn>span{margin-left:0;opacity:1}
.chfbh{font:11px var(--sans);color:var(--amber)}.chfbh i{font-style:normal;color:var(--dim);margin-left:8px}
.chfbt{white-space:pre-wrap;color:var(--tx);font:12px/1.5 var(--sans);line-height:1.5;overflow-wrap:anywhere}
.chsys span{font:10px var(--mono);margin-left:6px;opacity:.75}
.chnew{position:absolute;right:16px;bottom:64px;z-index:4;font:10.5px var(--mono);color:var(--bg);background:var(--amber);border-radius:10px;padding:2px 10px;cursor:pointer;
  opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .3s ease,transform .32s cubic-bezier(.22,1,.36,1)}
.chnew.on{opacity:1;transform:none;pointer-events:auto}
.chfw{flex:none;position:relative}
.chf{display:flex;gap:8px;align-items:flex-end;padding:8px 10px;border-top:1px solid var(--line);background:var(--panel)}
/* кнопки эмодзи / стикеры / GIF и панель над полем ввода */
.chtools{display:flex;gap:2px;align-self:center}
.chtb{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:none;color:var(--dim);cursor:pointer;transition:color .15s,background .15s}
.chtb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.chtb.gif{font:9.5px var(--mono);letter-spacing:.06em;width:34px}
.chtb:hover,.chtb.on{color:var(--amber);background:color-mix(in srgb,var(--amber) 8%,transparent)}
.chpk{position:absolute;left:10px;bottom:calc(100% + 6px);z-index:9;width:min(372px,calc(100% - 20px));max-height:330px;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.35);
  opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .3s ease,transform .34s cubic-bezier(.22,1,.36,1)}
html.light .chpk{box-shadow:0 12px 28px rgba(30,45,70,.16)}
.chpk.on{opacity:1;transform:none;pointer-events:auto}
.chpkt{display:flex;gap:14px;padding:8px 12px 6px;border-bottom:1px solid var(--line);flex:none}
.chpkb{display:flex;flex-direction:column;gap:6px;padding:8px 10px 10px;overflow-y:auto;min-height:0}
.chpkh{display:block;font:9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.chemo{display:grid;grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:2px}
.chemo button{height:32px;border:0;border-radius:6px;background:none;font-size:20px;line-height:1;cursor:pointer;transition:background .15s,transform .15s}
.chemo button:hover{background:color-mix(in srgb,var(--amber) 10%,transparent);transform:scale(1.12)}
.chsts{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:6px}
.chsts button{border:0;background:none;padding:0;cursor:pointer;border-radius:10px;transition:transform .15s}
.chsts button:hover{transform:translateY(-2px)}
.chsts .chst{margin:0}
.chprev{display:flex;justify-content:center;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:6px;max-height:190px}
.chprev img{max-width:100%;max-height:176px;object-fit:contain}
.chpka{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chpk.wide{width:min(600px,calc(100% - 20px));max-height:400px}
/* узкая переписка (телефон, окно на столе): кнопки — строкой над полем, поле — во всю ширину */
@container chc (max-width:520px){
  .chfh{display:none}
  .chf{flex-wrap:wrap;row-gap:6px}
  .chtools{width:100%;gap:4px}
  .chta{min-width:0}
}
.chtbell{color:color-mix(in srgb,var(--amber) 70%,var(--dim))}
/* редактор таблицы */
.chte{overflow:auto;max-height:220px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.chte table{border-collapse:collapse}
.chte td{padding:0;border:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.chtc{width:96px;height:24px;border:0;background:none;color:var(--tx);font:11.5px var(--sans);padding:0 6px;outline:none;transition:background .15s}
.chtc.h{color:var(--dim);background:var(--panel)}
.chtc:focus{background:color-mix(in srgb,var(--amber) 9%,transparent)}
.chtck{display:inline-flex;gap:5px;align-items:center;font-size:10.5px;color:var(--dim);cursor:pointer}
/* колокол: пояснение */
.chbelld{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start;font-size:11.5px;line-height:1.5;color:var(--tx)}
.chbelld svg{width:20px;height:20px;color:var(--amber)}
/* подсказка бумаги над полем ввода */
.chsug{position:absolute;left:10px;right:10px;bottom:calc(100% + 4px);z-index:8;display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px 8px;
  background:var(--panel);border:1px solid var(--line);border-radius:7px;box-shadow:0 8px 22px rgba(0,0,0,.28);
  opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1)}
html.light .chsug{box-shadow:0 8px 20px rgba(30,45,70,.14)}
.chsug.on{opacity:1;transform:none;pointer-events:auto}
.chsugh{font:9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.chsugi{display:inline-flex;gap:5px;align-items:baseline;padding:2px 8px;border:1px solid var(--line);border-radius:5px;cursor:pointer;font-size:11.5px;color:var(--tx);transition:border-color .15s,background .15s}
.chsugi small{font:9.5px var(--mono);color:var(--dim)}
.chsugi:hover{border-color:var(--line2)}
.chsugi.on{border-color:color-mix(in srgb,var(--blue) 60%,var(--line));background:color-mix(in srgb,var(--blue) 8%,transparent)}
/* шапка: закрепить, PDF; панель выгрузки */
.chico{padding:0 7px;min-width:28px;justify-content:center}
.chico.on{color:var(--amber)}
.chpdf{font:9.5px var(--mono);letter-spacing:.06em}
.chexp{position:absolute;top:52px;right:10px;z-index:9;width:min(380px,calc(100% - 20px));display:flex;flex-direction:column;gap:9px;padding:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.35);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .3s ease,transform .34s cubic-bezier(.22,1,.36,1)}
html.light .chexp{box-shadow:0 12px 28px rgba(30,45,70,.16)}
.chexp.on{opacity:1;transform:none;pointer-events:auto}
.chexh{font:9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.chexr{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap}
.chexr label{display:inline-flex;gap:6px;align-items:center;font-size:11px;color:var(--dim)}
.chexr input[type=date]{width:140px;font-family:var(--mono);font-size:11.5px;color-scheme:dark}
html.light .chexr input[type=date]{color-scheme:light}
/* «Настройки»: звук колокола */
.chsnd{height:22px;font-size:10.5px;font-weight:400;cursor:pointer;background:none;color:var(--dim);border-color:var(--line2)}
.chsnd.on{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,var(--line2))}
/* участники: метка администратора, кнопка назначения */
.chpmb{display:flex;gap:4px;align-items:center}
.chadm{border:1px solid var(--line);border-radius:4px;background:none;color:var(--dim);font:9.5px var(--mono);padding:1px 5px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.chadm:hover{color:var(--tx);border-color:var(--line2)}
.chadm.on{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,var(--line))}
.chkpos{font-size:11px;color:var(--dim)}
.chposin{width:306px;max-width:100%}
.chta{flex:1;resize:none;height:34px;min-height:34px;max-height:140px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:7px 10px;
  color:var(--tx);font:var(--chfs,12.5px)/1.44 var(--sans);outline:none;transition:border-color .18s,box-shadow .18s}
.chta:focus{border-color:color-mix(in srgb,var(--amber) 55%,var(--line));box-shadow:0 0 0 1px var(--glow-soft)}
.chta::placeholder{color:var(--dim);opacity:.8}
.chsend{height:34px}
.chnote{padding:10px 12px;font-size:11px;color:var(--dim);text-align:center;border-top:1px solid var(--line);background:var(--panel)}

/* ── участники группы: выезжает справа ── */
.chp{position:absolute;top:46px;right:0;bottom:0;width:var(--chpw,290px);max-width:100%;z-index:5;display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line);
  box-shadow:-10px 0 28px rgba(0,0,0,.18);opacity:0;transform:translateX(24px);pointer-events:none;transition:opacity .3s ease,transform .34s cubic-bezier(.22,1,.36,1)}
.chp.on{opacity:1;transform:none;pointer-events:auto}
.chph{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;font:9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line)}
.chpx,.chrm1{background:none;border:0;color:var(--dim);font-size:15px;line-height:1;cursor:pointer;padding:2px 4px;transition:color .15s}
.chpx:hover{color:var(--tx)}.chrm1:hover{color:var(--red)}
.chpr,.chpa{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line)}
.chpr{flex-direction:row}.chpr .chin{flex:1}
.char:empty{display:none}
.char{margin:0 -10px}
.chpl{flex:1;overflow-y:auto;min-height:0}
.chpm{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:center;padding:6px 10px 6px 12px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.chpf{flex:none;padding:8px 10px;border-top:1px solid var(--line)}

/* ── первый заход ── */
.chjoin{display:flex;align-items:flex-start;justify-content:center;height:100%;padding:24px 16px;overflow:auto}
.chjc{width:100%;max-width:380px;display:flex;flex-direction:column;gap:10px;margin:auto 0}   /* по центру, а длинная форма — с верха, не обрезаясь */
.chj2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:380px){.chj2{grid-template-columns:1fr}}
/* верификация: при входе — под именем (или «позже»), у вошедших — полоска над списком и окно */
.cvf{display:flex;flex-direction:column;gap:9px;margin-top:4px;padding:11px 12px 12px;border:1px solid color-mix(in srgb,var(--blue) 35%,var(--line));border-radius:8px;
  background:color-mix(in srgb,var(--blue) 5%,var(--panel));transition:background .25s,border-color .25s}
.cvfh{display:flex;align-items:center;gap:10px}
.cvft{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx)}
.cvft .chv{width:14px;height:14px}
.cvfh .cvlater{margin-left:auto;height:24px;padding:0 11px;font-size:11px;flex:none}   /* «позже» — кнопка, как остальные */
/* «Компания» под почтой: что подтянулось по домену (как поле только для чтения) и «не та компания?» → выбор и запрос в поддержку */
.cvco{display:flex;flex-direction:column;gap:4px}
.cvco[hidden],.cvfix[hidden],.cvfixb[hidden]{display:none}
.cvcol{font-size:10.5px;color:var(--dim)}
.cvcov{display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;min-height:32px;padding:4px 6px 4px 10px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.cvcon{font-size:13px;color:var(--tx)}
.cvco.company .cvcon,.cvco.domain .cvcon{color:var(--blue)}
.cvcos{flex:1;min-width:120px;font-size:10.5px;color:var(--dim);line-height:1.35}
.cvco.disposable .cvcos{color:var(--red)}
.cvfixb{display:inline-flex;align-items:center;gap:4px;flex:none;margin-left:auto;padding:2px 0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:11px;line-height:1.2;color:var(--dim);transition:color .15s}   /* тихая ссылка с карандашом, не кнопка в рамке */
.cvfixb svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.cvfixb span{border-bottom:1px dotted color-mix(in srgb,var(--dim) 60%,transparent);transition:border-color .15s}
.cvfixb:hover,.cvfixb:focus-visible{color:var(--amber);outline:none}
.cvfixb:hover span,.cvfixb:focus-visible span{border-bottom-color:currentColor}
/* панель «Какая компания правильная?» — мягкая (06.10.2026): тонкая синяя полоса слева вместо рамки, ссылки вместо кнопок */
.chfix.cvfix{gap:8px;padding:10px 12px;border:0;border-left:2px solid color-mix(in srgb,var(--blue) 55%,transparent);border-radius:0 6px 6px 0;
  background:color-mix(in srgb,var(--blue) 5%,var(--bg))}   /* .chfix.cvfix — сильнее общего .chfix ниже в файле */
.cvxh{display:flex;align-items:baseline;gap:10px;font-size:12px;color:var(--tx)}
.cvxl{align-self:flex-start;padding:0;border:0;border-bottom:1px dotted color-mix(in srgb,var(--dim) 60%,transparent);background:none;cursor:pointer;
  font:inherit;font-size:11px;line-height:1.3;color:var(--dim);transition:color .15s,border-color .15s}
.cvxl:hover,.cvxl:focus-visible{color:var(--amber);border-bottom-color:currentColor;outline:none}
.cvxc{margin-left:auto}
.cvxsel{align-items:baseline}.cvxsel .cvxl{align-self:auto}
.cvxe{font-size:11px;color:var(--dim);padding:4px 8px}
.cvxn{font-size:10.5px;line-height:1.5;color:var(--dim)}
.cvf.flat{margin:0;padding:0;border:0;background:none}   /* в окне верификации — без своей рамки: окно и есть верификация */
.cvfix .chfq,.cvfix .chfname,.cvfix .chfnote,.cvfix .chfr{max-width:none}
.cvfb{display:flex;flex-direction:column;gap:9px}
.cvf.off{background:var(--panel);border-color:var(--line)}
.cvf.off .cvfb{display:none}
.cvf.off .cvft{color:var(--dim)}
.cvfco{font-size:11px;color:var(--dim);line-height:1.5}
.cvfco:empty{display:none}
.cvfco span{color:var(--tx)}
.cvfco.company span,.cvfco.domain span{color:var(--blue)}
.cvfco.disposable{color:var(--red)}
.chjb{flex-wrap:wrap;gap:8px 0}
.cvfs{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--dim);line-height:1.5}
.cvfs li{position:relative;padding-left:13px}
.cvfs li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--dim)}
.cvfs .chv,.cvfco .chv{width:11px;height:11px;vertical-align:-1px}
.cvmail{color:var(--tx);font-family:var(--mono)}
.cvcode{font-family:var(--mono);letter-spacing:.2em}
.chjb .hbtn+.hbtn{margin-left:8px}
/* карточка «Пройдите верификацию» над всеми чатами: заголовок, пояснение, под ними «Пройти» и «Позже» */
.cvban{display:none;flex-direction:column;gap:5px;margin:8px 8px 4px;padding:11px 12px 12px;flex:none;
  border:1px solid color-mix(in srgb,var(--blue) 35%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--blue) 6%,var(--panel))}
.cvban.on{display:flex}
.cvbh{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tx)}
.cvbh .chv{width:14px;height:14px}
.cvbd{font-size:11px;line-height:1.5;color:var(--dim)}
.cvbb{display:flex;gap:8px;margin-top:5px}
.cvban .hbtn{height:26px;padding:0 14px;font-size:11px}
.cvw{position:relative;max-width:400px}
.cvm .chwb{border-color:color-mix(in srgb,var(--blue) 45%,var(--line))}
.cvm{align-items:flex-start;overflow-y:auto}.cvm .chwb{margin:auto 0}   /* высокое окно (раскрыт выбор компании) — прокручивается, не обрезается */
.cvw .cvwc{display:flex;flex-direction:column;gap:10px}
.cvx{position:absolute;top:8px;right:8px}
.chjt{font:400 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.chjd{font-size:12px;color:var(--tx);line-height:1.55}
.chjl{display:flex;flex-direction:column;gap:4px;font-size:10.5px;color:var(--dim)}
.chjl .chin{height:32px;font-size:13px}
.chjb{display:flex}
.chjb .hbtn{height:30px;padding:0 14px}
.chjn{font-size:10.5px;color:var(--dim);line-height:1.6}
.chjcb{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.chjcb[hidden]{display:none}
.cherr{font-size:11px;color:var(--red)}
.cherr:empty{display:none}

/* ── карточка человека ── */
.chcard{position:fixed;z-index:300;width:max-content;min-width:200px;max-width:300px;background:var(--panel);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);padding:10px 12px;display:flex;flex-direction:column;gap:8px;
  opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .3s ease,transform .34s cubic-bezier(.22,1,.36,1)}
html.light .chcard{box-shadow:0 10px 26px rgba(30,45,70,.16)}
.chcard.on{opacity:1;transform:none;pointer-events:auto}
.chkn{display:flex;gap:10px;align-items:center}
.chkt{display:flex;flex-direction:column;gap:2px;min-width:0}
.chki{display:flex;gap:6px;align-items:baseline;font-size:10.5px;color:var(--dim);flex-wrap:wrap}
.chki .chcp{color:var(--tx);font-size:11px}
.chkv{font-size:10px;color:var(--dim)}
.chka{display:flex;gap:6px;font-size:10.5px;color:var(--dim)}

/* ── кнопка в шапке ── */
.chbtn{position:relative;padding:0 7px}
.chbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.chbtn i{position:absolute;top:-6px;right:-7px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--amber);color:var(--bg);
  font:9.5px/15px var(--mono);font-style:normal;text-align:center;transform:scale(0);transition:transform .28s cubic-bezier(.22,1,.36,1)}
.chbtn i.on{transform:scale(1)}
.chbtn.bell{color:var(--amber)}
.chbtn.bell svg{animation:chring 1.2s ease-in-out 3}

/* ── «Настройки» ── */
.chsetn{display:flex;gap:6px;flex-wrap:wrap;align-items:center;word-break:normal}
.chsetn .chin{width:150px}
/* подтверждение: статус, почта → код, компания по домену */
.chver{display:grid;grid-template-columns:62px minmax(0,1fr);gap:7px 10px;align-items:center;word-break:normal}
.chvs{grid-column:1/-1;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.chvl{font-size:10.5px;color:var(--dim);letter-spacing:.03em}
.chvf{display:flex;gap:6px 8px;align-items:center;flex-wrap:wrap;min-width:0}
.chverd{font:10.5px var(--mono);color:var(--dim)}
.chfno{font-family:var(--sans)}   /* номер обращения: «№» в моноширинном мелко похож на «₽» */
.chem,.chco{width:250px}
.chcodein{width:112px;font-family:var(--mono);letter-spacing:.2em}
.chco{background:transparent;color:var(--tx);cursor:default}
.chco:focus{border-color:var(--line);box-shadow:none}
.chmaila{font:11.5px var(--mono);color:var(--tx)}
/* «не та компания»: выбор правильной из «Компаний» или своё название → запрос администратору */
.chfix{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;margin-top:2px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;
  background:color-mix(in srgb,var(--panel) 55%,var(--bg));animation:chfixin .3s cubic-bezier(.22,1,.36,1)}
@keyframes chfixin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.chfixh{display:block;font:9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.chfix .chlink{align-self:flex-start}
.chfq,.chfname,.chfnote{width:100%;max-width:440px}
.chfr{display:flex;flex-direction:column;max-height:250px;overflow-y:auto;max-width:440px}
.chfr:empty{display:none}
.chfo{display:flex;flex-direction:column;gap:1px;padding:5px 8px;border-radius:4px;cursor:pointer;transition:background .15s}
.chfo:hover{background:color-mix(in srgb,var(--amber) 8%,transparent)}
.chfo span{color:var(--tx);font-size:12px}
.chfo small,.chfsel small{font:10px var(--mono);color:var(--dim);letter-spacing:0}
.chfsel{display:flex;gap:4px 10px;align-items:baseline;flex-wrap:wrap;font-size:12.5px;color:var(--tx)}
.chfnote{height:auto;min-height:46px;padding:6px 8px;resize:vertical;line-height:1.45}
.chfact{display:flex;gap:8px 10px;align-items:center;flex-wrap:wrap}
.chfixst{color:var(--amber)}
.chsetb{display:flex;gap:5px;flex-wrap:wrap;word-break:normal}
.chsetc{display:flex;gap:10px;align-items:baseline;word-break:normal}
.chcode{font:14px var(--mono);letter-spacing:.12em;color:var(--amber)}
.chcodet{font:10.5px var(--mono);color:var(--dim)}

/* ── новые сообщения: мягкое свечение при открытии чата и у пришедших — плавно гаснет ── */
@keyframes chglow{0%{background:color-mix(in srgb,var(--amber) 15%,transparent)}35%{background:color-mix(in srgb,var(--amber) 11%,transparent)}100%{background:transparent}}
.chmsg.glow{animation:chglow 2.6s ease-out backwards}
@media(prefers-reduced-motion:reduce){.chmsg.glow{animation-duration:.8s}}

/* ── вид чата (шестерёнка): классы на .chbox — местами ── */
.chv-lr .chx{grid-template-columns:minmax(0,1fr) var(--chlw,290px)}          /* список чатов справа */
.chv-lr .chl{order:2;border-right:0;border-left:1px solid var(--line)}
.chv-lr .chsplit{left:calc(100% - var(--chlw,290px))}
.chv-lr .chx.narrow{grid-template-columns:1fr}
.chv-ml .chmsg.me{grid-template-columns:50px minmax(0,1fr);padding:1px var(--chside,12%) 1px 0}   /* свои — слева, как чужие */
.chv-ml .chmsg.me .chmt{order:0;text-align:right;padding:0 9px 0 0}
.chv-ml .chmsg.me .chmx{align-items:flex-start;padding:0 0 0 9px}
.chv-ml .chmsg.me .chmb:not(.big){border-radius:9px 9px 9px 3px}
.chv-ml .chmsg.me.bell .chmx{justify-self:start;box-shadow:inset 2px 0 0 var(--amber);border-radius:0 6px 6px 0;padding:3px 10px 4px 11px}
.chv-pl .chp{right:auto;left:0;border-left:0;border-right:1px solid var(--line);box-shadow:10px 0 28px rgba(0,0,0,.18);transform:translateX(-24px)}   /* участники слева */
.chv-pl .chp.on{transform:none}
@container chc (min-width:760px){.chv-pl .chc.pon>.chm,.chv-pl .chc.pon>.chfw{margin-right:0;margin-left:var(--chpw,290px)}.chv-pl .chc.pon>.chnew{right:16px}}
.chv-nf .chmsg.me .chmb:not(.big){background:none;border-color:transparent;padding:0}          /* свои — без рамки */

/* шестерёнка и панель «Вид чата» */
.chgear{padding:0 7px;display:inline-flex;align-items:center}
.chgear svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.chgear:hover svg,.chgear.on svg{transform:rotate(60deg)}
.chgear.on{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,var(--line))}
.chgear2{height:26px;flex:none}
.chvw{position:fixed;z-index:320;width:min(380px,calc(100vw - 16px));max-height:calc(100vh - 80px);overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 14px 34px rgba(0,0,0,.38);opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .34s cubic-bezier(.22,1,.36,1)}
html.light .chvw{box-shadow:0 12px 30px rgba(30,45,70,.16)}
.chvw.on{opacity:1;transform:none}
.chvh{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;font:9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line)}
.chvb{display:grid;grid-template-columns:120px minmax(0,1fr);gap:9px 10px;align-items:center;padding:12px}
.chvl{font-size:11px;color:var(--dim)}
.chvsec{grid-column:1/-1;font:9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:6px;padding-top:9px;border-top:1px solid var(--line)}
.chvr{display:flex;gap:8px;align-items:center;min-width:0}
.chvr input[type=range]{flex:1;min-width:0;accent-color:var(--amber)}
.chvn{font:11.5px var(--mono);color:var(--tx);min-width:28px;text-align:right}
.chvu{font:10px var(--mono);color:var(--dim);white-space:nowrap}
.chvfs{height:24px;padding:0 8px;font-size:11px}
.chvs2{display:flex;gap:12px;flex-wrap:wrap}
.chvf{display:flex;gap:10px;align-items:baseline;justify-content:space-between;padding:9px 12px;border-top:1px solid var(--line)}

@media(max-width:720px){
  .chmsg{grid-template-columns:44px minmax(0,1fr)}
  .chv-ml .chmsg.me{grid-template-columns:44px minmax(0,1fr)}
  .chmsg.me{grid-template-columns:minmax(0,1fr) 44px}
  .chtb{width:34px;height:34px}
  .chta{font-size:16px}                                   /* iPhone не увеличивает страницу при фокусе */
  .chjl .chin,.chlh .chin{font-size:16px}
  .chp{top:46px;width:100%}
  .chver{grid-template-columns:1fr;gap:4px}
  .chvl{margin-top:4px}
  .chem,.chco{width:100%;font-size:16px}
  .chcodein{font-size:16px}
  .chexr input[type=date],.chtc,.chcap{font-size:16px}
  .chtc{width:110px;height:30px}
  .chblk{padding:0 7px}
}
/* плашка «смена имени снимет подтверждение» (chat.js warnRename): поверх всего, плавно; по умолчанию в фокусе «Отмена» */
.chwarn{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.45);
  opacity:0;transition:opacity .3s cubic-bezier(.2,.8,.2,1)}
html.light .chwarn{background:rgba(20,30,45,.25)}
.chwarn.on{opacity:1}
.chwb{width:min(440px,100%);box-sizing:border-box;background:var(--panel);border:1px solid color-mix(in srgb,var(--amber) 55%,var(--line));border-radius:8px;
  padding:14px 16px 12px;box-shadow:0 14px 40px rgba(0,0,0,.45);transform:translateY(6px) scale(.98);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
html.light .chwb{box-shadow:0 10px 30px rgba(30,45,70,.18)}
.chwarn.on .chwb{transform:none}
.chwh{font:11px var(--mono);letter-spacing:.06em;color:var(--amber);margin-bottom:8px}
.chwt{font-size:12px;line-height:1.5;color:var(--tx)}
.chwl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 2px;font:10.5px var(--mono)}
.chwl span:nth-child(odd){color:var(--dim)}.chwl span:nth-child(even){color:var(--tx);overflow-wrap:anywhere}
.chwa{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.chwa .chwok{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 55%,var(--line))}