body{margin:0}
*{box-sizing:border-box}
.pb{--paper:#F7F4EE;--surface:#FFFFFF;--fill:#F4F1EC;--field:#FBFAF7;--nav-active:#EAE4D9;--line:#E7E1D7;--line-2:#EFEBE4;--dash:#CFC6B8;--ink:#141414;--ink-2:#55504A;--ink-3:#6E685F;--primary:#141414;--on-primary:#FFFFFF;--ink-on-dark:#BDB6AC;--accent:#8C5E34;--note:#FBF6EF;--note-line:#E9DCCB;--success:#3F7A4A;--danger:#9A3B2A;--danger-line:#E7C9C2;--danger-bg:#FBF1EE;--placeholder-img:#EAE5DD;--overlay:rgba(247,244,238,0.94);--chip-on-img:rgba(255,255,255,0.94);--logo-taupe:#ADA296;--logo-light:#F3F2F0;--sh-pop:0 10px 30px rgba(20,20,20,0.14);
--r-card:12px;--r-group:10px;--r-field:8px;--r-btn:6px;--r-badge:4px;--r-bubble:16px;--r-tail:4px;--gap-xs:6px;--gap-s:8px;--gap-m:12px;--gap-l:16px;--gap-xl:20px;--gap-2xl:24px;--tap:44px;
--sans:"Manrope",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--logo:"Bebas Neue",sans-serif;
font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink);background:var(--paper)}
.pb.dark{--paper:#1E1B17;--surface:#2A2621;--fill:#312D26;--field:#25221E;--nav-active:#3A352D;--line:#3D3830;--line-2:#34302A;--dash:#5A5348;--ink:#F3EFE8;--ink-2:#CBC3B7;--ink-3:#A79F93;--primary:#F3EFE8;--on-primary:#1E1B17;--ink-on-dark:#55504A;--accent:#D2A274;--note:#2F2A23;--note-line:#4A4236;--success:#86BE92;--danger:#E8927F;--danger-line:#5A3A32;--danger-bg:#33241F;--placeholder-img:#3A352D;--overlay:rgba(30,27,23,0.94);--chip-on-img:rgba(42,38,33,0.94);--sh-pop:0 10px 30px rgba(0,0,0,0.45)}
.win{display:flex;flex-direction:column;position:relative;overflow:hidden}
.top{display:flex;align-items:center;gap:var(--gap-m);padding:0 var(--gap-l);height:64px;flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--line)}
.top.phone{height:auto;padding:58px var(--gap-l) var(--gap-m)}
.logo{display:flex;align-items:center;gap:var(--gap-s);text-decoration:none;color:var(--ink)}
.logo-sq{width:32px;height:32px;border:2px solid var(--logo-taupe);border-radius:var(--r-btn);background:var(--logo-light);display:flex;align-items:center;justify-content:center;font-family:var(--logo);font-size:17px;letter-spacing:0.02em;color:#141414;line-height:1;padding-top:2px}
.logo-sq.lg{width:56px;height:56px;font-size:30px;border-radius:var(--r-group)}
.wm{font-weight:600;font-size:15px;letter-spacing:-0.02em;display:flex;align-items:flex-start;gap:2px}
.wm small{font-family:var(--logo);font-size:10px;letter-spacing:0.04em;color:var(--ink-3);line-height:1}
.sep{width:1px;height:28px;background:var(--line)}
.who{display:flex;align-items:center;gap:var(--gap-s);flex:1;min-width:0}
.av{width:32px;height:32px;border-radius:999px;background:var(--fill);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;color:var(--ink-2);position:relative;flex-shrink:0}
.av .dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:999px;border:2px solid var(--surface);background:var(--success)}
.av .dot.off{background:var(--dash)}
.who-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.name{font-weight:600;font-size:15px}
.state{font-size:12px;color:var(--ink-3)}
.state.on{color:var(--success)}
.state.typ{color:var(--accent)}
.ibtn{width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--ink-2);border-radius:var(--r-field);cursor:pointer;flex-shrink:0;padding:0}
.ibtn:hover{background:var(--fill)}
.ibtn svg,.btn svg{width:18px;height:18px}
.feed{flex:1;display:flex;flex-direction:column;gap:var(--gap-s);padding:var(--gap-l);overflow:hidden;justify-content:flex-end}
.day{align-self:center;font-family:var(--mono);font-size:10px;letter-spacing:0.08em;color:var(--ink-3);padding:var(--gap-s) 0}
.row{display:flex;flex-direction:column;gap:3px;max-width:82%}
.row.me{align-self:flex-end;align-items:flex-end}
.row.them{align-self:flex-start;align-items:flex-start}
.bub{padding:9px 13px;border-radius:var(--r-bubble);font-size:14px;line-height:1.45}
.them .bub{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:var(--r-tail)}
.me .bub{background:var(--primary);color:var(--on-primary);border-bottom-right-radius:var(--r-tail)}
.meta{font-family:var(--mono);font-size:10px;color:var(--ink-3);display:flex;gap:4px;align-items:center;padding:0 4px}
.meta svg{width:12px;height:12px;color:var(--accent)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;width:300px;max-width:100%}
.card.pic{width:170px}
.them .card{border-bottom-left-radius:var(--r-tail)}
.me .card{border-bottom-right-radius:var(--r-tail)}
.img{position:relative;padding:4px}
.ph{width:100%;aspect-ratio:4/5;background:var(--placeholder-img);border-radius:var(--r-group);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap-xs);color:var(--ink-3);font-family:var(--mono);font-size:11px}
.ph svg{width:28px;height:28px}
.ph.sq{aspect-ratio:1/1}
.onimg{position:absolute;right:10px;bottom:10px;display:flex;gap:var(--gap-xs)}
.chip{height:32px;padding:0 10px;border-radius:var(--r-badge);border:1px solid var(--line);background:var(--chip-on-img);color:var(--ink);font:500 12px var(--sans);display:flex;align-items:center;gap:var(--gap-xs);cursor:pointer}
.chip svg{width:14px;height:14px}
.cap{padding:6px 10px 8px;font-size:13px;color:var(--ink-2)}
.file{display:flex;align-items:center;gap:var(--gap-m);padding:var(--gap-m)}
.ext{width:40px;height:48px;border-radius:var(--r-btn);background:var(--fill);border:1px solid var(--line-2);display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-family:var(--mono);font-size:10px;font-weight:500;color:var(--accent);flex-shrink:0}
.ftxt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.fname{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsize{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.btn{height:36px;padding:0 12px;border-radius:var(--r-field);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 13px var(--sans);display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-xs);cursor:pointer;white-space:nowrap;flex-shrink:0}
.btn:hover{background:var(--fill)}
.btn.pri{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.lg{height:48px;border-radius:var(--r-group);font-size:14px;font-weight:600;width:100%}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.list{border-top:1px solid var(--line-2)}
.list .file+.file{border-top:1px solid var(--line-2)}
.mhead{display:flex;align-items:center;justify-content:space-between;padding:var(--gap-m);gap:var(--gap-s)}
.mhead b{font-size:13px;font-weight:600}
.thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:0 4px 4px}
.thumbs .ph{border-radius:var(--r-btn);font-size:10px;aspect-ratio:4/3}
.thumbs .ph svg{width:18px;height:18px}
.typing{display:flex;gap:4px;align-items:center;height:22px}
.typing i{width:6px;height:6px;border-radius:999px;background:var(--ink-3);display:block}
.typing i:nth-child(2){opacity:.7}.typing i:nth-child(3){opacity:.45}
.comp{flex-shrink:0;display:flex;align-items:flex-end;gap:var(--gap-s);padding:var(--gap-m);background:var(--surface);border-top:1px solid var(--line)}
.comp.phone{padding:var(--gap-s) var(--gap-m) 34px}
.fieldwrap{flex:1;min-width:0}
.ta{width:100%;min-height:var(--tap);max-height:120px;resize:none;border:1px solid var(--line);border-radius:var(--r-group);background:var(--field);color:var(--ink);font:400 14px/1.45 var(--sans);padding:11px 14px;display:block}
.ta::placeholder{color:var(--ink-3)}
.send{width:var(--tap);height:var(--tap);border-radius:var(--r-group);border:0;background:var(--primary);color:var(--on-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.send svg{width:18px;height:18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.prog{padding:0 var(--gap-m) var(--gap-m);display:flex;flex-direction:column;gap:var(--gap-xs)}
.bar{height:4px;border-radius:999px;background:var(--line-2);overflow:hidden}
.bar span{display:block;height:100%;background:var(--ink);border-radius:999px}
.prow{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.card.err{border-color:var(--danger-line);background:var(--danger-bg)}
.errmsg{display:flex;gap:var(--gap-s);align-items:flex-start;padding:0 var(--gap-m);font-size:13px;color:var(--danger)}
.errmsg svg{width:16px;height:16px;flex-shrink:0;margin-top:2px}
.acts{display:flex;gap:var(--gap-s);padding:var(--gap-m)}
.drop{position:absolute;inset:12px;border:2px dashed var(--accent);border-radius:var(--r-card);background:var(--overlay);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap-m);text-align:center;padding:var(--gap-2xl)}
.drop .dicon{width:64px;height:64px;border-radius:999px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.drop .dicon svg{width:28px;height:28px}
.drop h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-0.02em}
.drop p{margin:0;color:var(--ink-2);font-size:13px}
.dropfiles{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.ob{flex:1;display:flex;flex-direction:column;padding:40px 32px 32px;gap:var(--gap-2xl)}
.step{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:0.04em}
.h1{margin:0;font-size:32px;line-height:1.05;font-weight:600;letter-spacing:-0.04em}
.sub{margin:0;font-size:15px;color:var(--ink-2)}
.fld{display:flex;flex-direction:column;gap:var(--gap-xs)}
.fld label{font-size:12px;color:var(--ink-2);font-weight:500}
.inp{height:var(--tap);border:1px solid var(--line);border-radius:var(--r-field);background:var(--field);color:var(--ink);font:400 14px var(--sans);padding:0 14px;width:100%}
.inp.mono{font-family:var(--mono);font-size:13px;letter-spacing:0.04em}
.inp.bad{border-color:var(--danger)}
.inrow{display:flex;gap:var(--gap-s)}
.hint{font-size:12px;color:var(--ink-3)}
.hint.bad{color:var(--danger);display:flex;gap:var(--gap-xs);align-items:center}
.hint.bad svg{width:14px;height:14px}
.spacer{flex:1}
.bell{width:56px;height:56px;border-radius:var(--r-group);background:var(--fill);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.bell svg{width:26px;height:26px}
.notif{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-pop);padding:var(--gap-m);display:flex;gap:var(--gap-m);align-items:flex-start}
.notif .logo-sq{width:36px;height:36px;flex-shrink:0}
.ntxt{flex:1;min-width:0;line-height:1.35}
.ntop{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3)}
.ntitle{font-weight:600;font-size:13px}
.nbody{font-size:13px;color:var(--ink-2)}
.note{background:var(--note);border:1px solid var(--note-line);border-radius:var(--r-group);padding:var(--gap-m);font-size:12px;color:var(--ink-2)}
.pop{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-pop);display:flex;flex-direction:column;overflow:hidden;height:100%}
.pophead{display:flex;align-items:center;gap:var(--gap-s);padding:var(--gap-m) var(--gap-l);border-bottom:1px solid var(--line-2)}
.pophead .logo-sq{width:26px;height:26px;font-size:14px}
.count{font-family:var(--mono);font-size:10px;background:var(--primary);color:var(--on-primary);border-radius:999px;padding:2px 7px}
.mini{flex:1;display:flex;flex-direction:column;gap:6px;padding:var(--gap-m) var(--gap-l);overflow:hidden;justify-content:flex-end}
.mini .bub{font-size:13px;padding:7px 11px}
.mini .card{width:270px}
.mini .row{max-width:94%}
.popfoot{display:flex;flex-direction:column;gap:var(--gap-s);padding:var(--gap-m) var(--gap-l) var(--gap-l);border-top:1px solid var(--line-2)}
.popfoot .inrow .inp{height:40px}
.popfoot .send{width:40px;height:40px}
.linkrow{display:flex;justify-content:space-between;align-items:center}
.linkrow a{color:var(--accent);font-size:13px;font-weight:500;text-decoration:none}
.linkrow a:hover{text-decoration:underline}
.kbd{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.unread{align-self:center;font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:0.08em;display:flex;align-items:center;gap:var(--gap-s);width:100%}
.unread::before,.unread::after{content:"";flex:1;height:1px;background:var(--note-line)}