/* Оформление кабинета. Цвета утверждены 10.11.2026: светлая основа, яркий синий акцент,
   тёмно-синий — только в логотипе. Тёмная тема включается по настройке устройства. */
/* Шрифт Manrope — свой, без Google (страница не зависит от сторонних сайтов, это надёжнее из России). */
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/manrope-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/manrope-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{
  --app:#f5f6f8; --surface:#ffffff; --surface2:#eceef2; --ink:#161a22; --muted:#6b7381; --line:#dfe2e8;
  --fill:#1f6feb; --on-fill:#ffffff; --brand:#14224a; --toast:#1b2030;
  --accent:#1f6feb; --accent-soft:#e3eefe; --bubble:#e3eefe; --on-bubble:#161a22;
  --ok:#1b8558; --ok-soft:#dff3ea; --warn:#a86a12; --warn-soft:#f8ecd6; --danger:#cf3f37; --danger-soft:#fbe9e7;
  --shadow:0 10px 30px rgba(15,27,60,.16);
}
@media (prefers-color-scheme: dark){ :root{
  --app:#111318; --surface:#1a1d24; --surface2:#232730; --ink:#eceef2; --muted:#9097a5; --line:#2a2e38;
  --fill:#2f7bf6; --on-fill:#ffffff; --brand:#e7ecf7; --toast:#2a2e38;
  --accent:#6ca8ff; --accent-soft:#18283f; --bubble:#1c2c47; --on-bubble:#eceef2;
  --ok:#52c891; --ok-soft:#12301f; --warn:#e3ad4f; --warn-soft:#33270f; --danger:#ff7b71; --danger-soft:#3a1c1a;
  --shadow:0 10px 30px rgba(0,0,0,.55); color-scheme:dark } }

[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--app);color:var(--ink);font-family:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.5;-webkit-text-size-adjust:100%}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:left}
a{color:var(--accent)}
.sprite{display:none}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

.app{position:relative;height:100dvh;display:flex;overflow:hidden;background:var(--app)}
.home,.chat{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;position:relative}
.app[data-screen="home"] .chat,.app[data-screen="chat"] .home,.app[data-screen="login"] .home,.app[data-screen="login"] .chat{display:none}
.app:not([data-screen="login"]) .login{display:none}
.ib{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;color:inherit}
.ib:hover{background:color-mix(in srgb,currentColor 10%,transparent)}

/* вход */
.login{margin:auto;width:min(380px,100% - 32px);background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px 22px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.login p{margin:0;color:var(--muted)}
.login .who{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:16px;font-weight:700}
.login .who:hover{background:var(--surface2)}
.login .who small{display:block;font-weight:500;color:var(--muted)}

.btn.big{padding:13px 18px;font-size:16px;text-align:center;text-decoration:none;display:block}
.login .check{font-size:44px;font-weight:800;letter-spacing:.12em;text-align:center;color:var(--accent);background:var(--accent-soft);border-radius:16px;padding:10px}
.login .wait{font-size:13.5px;text-align:center}
.sheet .doc .av{width:42px;height:42px;font-size:15px}

/* главный экран */
.hhead{background:var(--surface);border-bottom:1px solid var(--line);padding:12px 10px 12px 16px;padding-top:max(12px,env(safe-area-inset-top));display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:11px;flex:1;min-width:0;color:var(--brand)}
.brand .mark{width:30px;height:30px;stroke-width:2.2}
.brand b{display:block;font-size:17px;font-weight:700;letter-spacing:.3em;line-height:1.1}
.brand span{display:block;font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
.tabpane{display:none;flex:1;min-height:0;overflow-y:auto;padding-bottom:108px}
.app[data-tab="law"] [data-pane="law"],.app[data-tab="know"] [data-pane="know"],.app[data-tab="cost"] [data-pane="cost"],.app[data-tab="me"] [data-pane="me"]{display:block}
.ptitle{font-size:22px;font-weight:800;padding:16px 16px 4px;margin:0}
.psub{padding:0 16px;margin:0;color:var(--muted);font-size:14px}
/* Фильтры дел: кнопки-«таблетки» в одну строку, подпись и серая цифра справа. Без прокрутки:
   подписи короткие, чтобы все четыре помещались; на совсем узком экране переносятся на вторую строку. */
.chips{display:flex;flex-wrap:wrap;gap:4px;padding:10px 12px 8px}
.chip{flex:1 1 auto;text-align:center;white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--muted);padding:7px 7px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.chip i{font-style:normal;opacity:.7;margin-left:3px}
.case{display:flex;gap:12px;align-items:center;width:100%;padding:11px 14px}
.case:hover,.case.cur{background:var(--surface2)}
.av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:16px;letter-spacing:.04em;--c:var(--accent);color:var(--c);background:color-mix(in srgb,var(--c) 15%,var(--surface));flex:none}
.av.s1{--c:var(--muted)} .av.s2{--c:var(--ok)} .av.s3{--c:var(--warn)}
.cm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ct{display:flex;gap:8px;align-items:baseline}
.ct b{flex:1;min-width:0;font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct time{font-size:12px;color:var(--muted)}
.cs{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);min-width:0}
.cs span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;white-space:nowrap}
.st.you{background:var(--accent-soft);color:var(--accent)} .st.wait{background:var(--warn-soft);color:var(--warn)} .st.done{background:var(--ok-soft);color:var(--ok)}
.cp{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blank{padding:40px 24px;text-align:center;color:var(--muted)}
.blank b{display:block;color:var(--ink);font-size:17px;margin-bottom:4px}
.fab{position:absolute;right:16px;bottom:calc(96px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;background:var(--fill);color:var(--on-fill);display:grid;place-items:center;box-shadow:var(--shadow);z-index:3}
.app:not([data-tab="law"]) .fab{display:none}
.app.founder[data-tab="know"] .fab{display:grid}
.sbar{display:flex;align-items:center;gap:4px;margin:10px 12px 4px;padding:2px 2px 2px 14px;background:var(--surface);border:1px solid var(--line);border-radius:999px}
.sbar:focus-within{border-color:var(--accent)}
.sbar input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:16px;padding:8px 0}
.sbar input::-webkit-search-cancel-button{display:none}
.case .av svg{width:22px;height:22px}
mark{background:var(--accent-soft);color:var(--accent);border-radius:3px;padding:0 1px}
.cp.two{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ktitle{font-weight:700;margin-top:14px}
.card h3{display:flex;align-items:flex-start;gap:8px}
.card h3 span{flex:1;min-width:0}
.card h3 .ib{width:32px;height:32px;margin:-6px -8px -6px 0;color:var(--muted)}
.card h3 .ib svg{width:17px;height:17px}
.card.off{opacity:.55}
.card.off h3 span::after{content:" · отключено";font-weight:500;color:var(--muted)}
.fam{font-size:12.5px;font-weight:700;color:var(--muted);padding:14px 4px 2px;text-transform:none}
.turn.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%,40%{background:var(--accent-soft);box-shadow:0 0 0 8px var(--accent-soft)}100%{background:transparent;box-shadow:0 0 0 8px transparent}}
.turn{border-radius:12px}
.form select{border:1px solid var(--line);border-radius:12px;background:var(--app);padding:11px 12px;font:inherit;font-size:16px;color:inherit;width:100%}
.form .btns{display:flex;gap:8px;flex-wrap:wrap}
.nav{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:6px;box-shadow:var(--shadow);z-index:4}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px 6px;border-radius:20px;font-size:11.5px;font-weight:600;color:var(--muted)}
.nav button.on{background:var(--accent-soft);color:var(--accent)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;margin:10px 12px;padding:14px 16px}
.card h3{margin:0 0 6px;font-size:14.5px}
.card p{margin:3px 0;color:var(--muted);font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.who-row{display:flex;gap:14px;align-items:center}
.meter{height:10px;border-radius:5px;background:var(--surface2);overflow:hidden;margin:10px 0 6px}
.meter i{display:block;height:100%;background:var(--accent);border-radius:5px}
.meter.warn i{background:var(--warn)} .meter.blocked i{background:var(--danger)}
.big{font-size:28px;font-weight:800;letter-spacing:-.01em}
.row{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid var(--line);font-size:14.5px;width:100%}
.row:first-of-type{border-top:0}
.row span{color:var(--muted)}

/* чат */
.chead{display:flex;align-items:center;gap:6px;padding:8px 6px;padding-top:max(8px,env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--line)}
.chead .av{width:40px;height:40px;font-size:13px}
.chn{flex:1;min-width:0}
.chn b{display:block;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chn span{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pin{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;background:var(--surface);border-bottom:1px solid var(--line);font-size:13.5px}
.pin svg{color:var(--accent);width:18px;height:18px}
.pin div{flex:1;min-width:0;border-left:2px solid var(--accent);padding-left:9px}
.pin b{display:block;color:var(--accent);font-size:12.5px}
.pin span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.msgs{flex:1;min-height:0;overflow-y:auto;padding:16px 14px 20px}
.msgs-in{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.turn{display:flex;flex-direction:column;gap:18px}
.m{display:flex;flex-direction:column;gap:6px;min-width:0}
.m.me{align-items:flex-end}
.bub{max-width:86%;background:var(--bubble);color:var(--on-bubble);padding:10px 14px;border-radius:20px 20px 6px 20px;font-size:15.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.files{display:flex;flex-direction:column;gap:5px;align-items:flex-end;max-width:86%}
.file{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:7px 11px;font-size:13.5px;font-weight:600;max-width:100%;color:var(--ink);text-decoration:none}
.file span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file svg{width:18px;height:18px;color:var(--accent)}
.file.up{opacity:.55}
.meta{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);padding-right:4px}
.meta svg{width:14px;height:14px}
.txt{font-size:16px;line-height:1.6;overflow-wrap:anywhere}
.txt>*{margin:0 0 10px} .txt>*:last-child{margin-bottom:0}
.txt h4{font-size:16.5px;font-weight:800;margin-top:16px}
.txt>h4:first-child{margin-top:0}
.txt ul,.txt ol{padding-left:22px} .txt li{margin:5px 0}
.txt b{font-weight:700}
.txt code{background:var(--surface2);border-radius:5px;padding:1px 5px;font-size:.92em}
.txt blockquote{border-left:3px solid var(--line);padding-left:12px;color:var(--muted)}
.txt hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.tw{overflow-x:auto}
.txt table{border-collapse:collapse;font-size:14.5px;min-width:100%}
.txt th,.txt td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top}
.txt th{background:var(--surface2);font-weight:700}
.acts{display:flex;gap:2px;color:var(--muted);margin-left:-9px}
.acts .ib{width:38px;height:38px} .acts svg{width:19px;height:19px}
.draft{border:1px solid var(--line);background:var(--surface);border-radius:18px;overflow:hidden}
.dh{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 0 14px;color:var(--muted);font-size:13.5px;font-weight:600}
.dh>span{display:flex;align-items:center;gap:7px} .dh svg{width:18px;height:18px}
.dh .tools{gap:0}
.db{padding:6px 16px 16px;font-size:15.5px;line-height:1.55;white-space:pre-wrap}
.doc{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:10px 8px 10px 12px}
.dico{width:42px;height:42px;border-radius:11px;background:var(--fill);color:var(--on-fill);display:grid;place-items:center;font-weight:800;font-size:15px;flex:none}
.dico.up{background:var(--surface2);color:var(--muted)}
.dm{flex:1;min-width:0} .dm b{display:block;font-size:14.5px;overflow-wrap:anywhere} .dm small{color:var(--muted);font-size:12.5px}
.fin{font-size:11px;font-weight:700;color:var(--ok);background:var(--ok-soft);padding:2px 7px;border-radius:6px;margin-left:6px;white-space:nowrap}
.note{border-radius:14px;padding:10px 14px;font-size:14.5px;background:var(--warn-soft);color:var(--warn)}
.note.err{background:var(--danger-soft);color:var(--danger);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.btn{padding:8px 16px;border-radius:999px;font-weight:700;font-size:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.btn.p{background:var(--fill);color:var(--on-fill);border-color:transparent}
.btn:disabled{opacity:.5}
.mem{border:1px dashed var(--accent);background:var(--accent-soft);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.mem b{font-size:14px;color:var(--accent)} .mem p{margin:2px 0 0;font-size:14.5px} .mem strong{font-weight:700}
.mem small{color:var(--muted)}
.mb{display:flex;gap:8px;flex-wrap:wrap}
.mem.done{border-style:solid;border-color:var(--line);background:var(--surface)}
.mem.done b{color:var(--ok);display:flex;align-items:center;gap:6px}
.mem.done svg{width:17px;height:17px}
.mem.done .btn{padding:6px 14px;font-size:13.5px}
.think{display:flex;gap:5px;padding:8px 0;align-items:center;color:var(--muted);font-size:13.5px}
.think i{width:8px;height:8px;border-radius:50%;background:var(--muted);animation:bl 1.1s infinite}
.think i:nth-child(2){animation-delay:.18s} .think i:nth-child(3){animation-delay:.36s;margin-right:6px}
@keyframes bl{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}

/* поле ввода */
.comp{padding:6px 22px 14px;padding-bottom:max(14px,env(safe-area-inset-bottom));background:linear-gradient(to top,var(--app) 70%,transparent)}
.comp-in{max-width:600px;margin:0 auto}
.att{display:flex;gap:6px;flex-wrap:wrap;padding:0 4px 6px}
.att .file button{color:var(--muted);display:grid;place-items:center} .att .file button svg{width:15px;height:15px;color:inherit}
.bar{display:flex;align-items:flex-end;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:30px;padding:6px;box-shadow:0 4px 18px rgba(15,27,60,.10);min-height:60px}
.cb{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--muted)}
.cb svg{width:24px;height:24px}
.cb:hover{background:var(--surface2)}
.cb.main{color:var(--ink)}
.cb.main.has{background:var(--fill);color:var(--on-fill)}
.cb.main .s{display:none} .cb.main.has .s{display:block} .cb.main.has .mc{display:none}
.bar textarea{flex:1;min-width:0;border:0;outline:0;resize:none;background:none;font-size:16.5px;line-height:1.4;padding:11px 4px;max-height:150px}
.bar textarea::placeholder{color:var(--muted)}
/* запись голоса: одно нажатие на микрофон — запись идёт сама, палец держать не нужно */
.rec{display:flex;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:30px;padding:6px;box-shadow:0 4px 18px rgba(15,27,60,.10);min-height:60px}
.rec .dot{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:bl 1s infinite;margin-left:6px;flex:none}
.rec time{font-variant-numeric:tabular-nums;font-weight:700;font-size:16px;margin:0 8px;flex:none}
.wave{flex:1;min-width:0;display:flex;align-items:center;gap:3px;height:30px;overflow:hidden}
.wave i{flex:none;width:3px;height:4px;border-radius:2px;background:var(--accent);transition:height .08s}
.rec.paused .dot{animation-play-state:paused;opacity:.4}
.rec.paused .wave i{opacity:.4}
.rec .cb{margin-left:4px} /* пауза, карандаш и отправка — на равных промежутках */
.bub.voice-wait{display:flex;align-items:center;gap:8px;color:var(--muted)}
.bub.voice-wait .think{padding:0}
.bub.voice-fail{display:flex;flex-direction:column;align-items:flex-end;gap:8px;background:var(--danger-soft);color:var(--danger)}
#rpause.on{background:var(--accent-soft);color:var(--accent)}
.cb.go{background:var(--fill);color:var(--on-fill)}
.cb.go:hover{background:var(--fill)}
.bar.busy textarea{opacity:.6}
.nochat{margin:auto;text-align:center;color:var(--muted);padding:24px}
.chat.empty>:not(.nochat){display:none}
.chat:not(.empty) .nochat{display:none}

/* шторка и подсказка */
.sheet-wrap{position:absolute;inset:0;background:rgba(4,9,22,.5);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet{background:var(--surface);border-radius:24px 24px 0 0;width:100%;max-width:520px;max-height:82%;overflow-y:auto;padding:8px 14px calc(18px + env(safe-area-inset-bottom))}
.sheet h3{margin:8px 4px 6px;font-size:17px;display:flex;justify-content:space-between;align-items:center}
.sheet .grab{width:38px;height:4px;border-radius:2px;background:var(--line);margin:2px auto 4px}
.sheet .doc{border:0;border-top:1px solid var(--line);border-radius:0;padding-left:4px}
.sheet .doc:first-of-type{border-top:0}
.mi{display:flex;align-items:center;gap:14px;width:100%;padding:13px 6px;font-size:15.5px;font-weight:600;border-top:1px solid var(--line)}
.mi:first-of-type{border-top:0} .mi svg{color:var(--accent)} .mi.on{color:var(--accent)}
.form{display:flex;flex-direction:column;gap:10px;padding:4px}
.form label{font-size:13px;font-weight:600;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.form input,.form textarea{border:1px solid var(--line);border-radius:12px;background:var(--app);padding:11px 12px;font-size:16px;outline:0;width:100%}
.form input:focus,.form textarea:focus{border-color:var(--accent)}
.form textarea{min-height:160px;resize:vertical}
.mi.danger,.mi.danger svg{color:var(--danger)}
.btn.danger{background:var(--danger);color:#fff;border-color:transparent}
.btns.pad{display:flex;gap:8px;padding:4px 6px 6px}
.case{-webkit-touch-callout:none;user-select:none}

.card.flat{margin:8px 0;background:var(--app)}
.card.flat ul{margin:0;padding-left:18px} .card.flat li{margin:3px 0;font-size:14px;color:var(--ink)}
.row b small{display:block;font-weight:500;color:var(--muted);font-size:12.5px}
.sheet .row span{white-space:nowrap;font-size:13px}
.fb{border-top:1px solid var(--line);padding:12px 4px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.fb:first-of-type{border-top:0}
.fb.off{opacity:.55}
.fb p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.fbh{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);flex-wrap:wrap}
.fb .btn{padding:6px 14px;font-size:13.5px}

/* сравнение документов */
.sheet.wide{max-width:820px;max-height:92%}
.mi span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.mi small{font-weight:500;color:var(--muted);font-size:12.5px}
.blank.left{text-align:left;padding:6px 6px 10px}
.dsum{font-size:14px;color:var(--muted);padding:4px 4px 10px;overflow-wrap:anywhere}
.dsum b{color:var(--ink)}
.dleg{font-size:12.5px;padding:0 4px 8px;display:flex;gap:10px}
.d{margin:0 0 6px;padding:7px 10px;border-radius:10px;font-size:14.5px;line-height:1.5;overflow-wrap:anywhere;border-left:3px solid transparent}
.d.same{color:var(--muted)}
.d.add{background:var(--ok-soft);border-left-color:var(--ok)}
.d.del{background:var(--danger-soft);border-left-color:var(--danger);text-decoration:line-through}
.d.mod{background:var(--surface2);border-left-color:var(--accent)}
ins{background:var(--ok-soft);color:var(--ok);text-decoration:none;border-radius:3px;padding:0 2px;font-weight:600}
del{background:var(--danger-soft);color:var(--danger);border-radius:3px;padding:0 2px}
.dgap{text-align:center;color:var(--muted);line-height:1;padding:2px 0 8px}
.toast{position:absolute;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--toast);color:#fff;padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:600;z-index:30;max-width:88%;text-align:center;box-shadow:var(--shadow)}

/* широкий экран: список слева, чат справа */
@media (min-width:860px){
  .app:not([data-screen="login"]) .home{display:flex;flex:0 0 372px;border-right:1px solid var(--line)}
  .app:not([data-screen="login"]) .chat{display:flex}
  .back{display:none}
  .chead{padding-left:16px}
  .msgs{padding:22px 28px}
  .comp{padding:6px 28px 18px}
  .sheet-wrap{align-items:center}
  .sheet{border-radius:24px}
  .sheet .grab{display:none}
}