:root {
  color-scheme: light;
  --ink:#13243a; --muted:#5a6c82; --subtle:#74859a; --bg:#f0f5fa; --surface:#fff;
  --panel:#edf4fa; --line:#dbe5ef; --action:#006c9a; --action-hover:#005783;
  --accent:#0087af; --soft:#def1fa; --own:#d8f2f1; --danger:#ae2948;
  --shadow:0 12px 42px #16385e16; --rail:#102139; --rail-text:#aebed0;
  --radius:16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-theme=dark] {
  color-scheme:dark;
  --ink:#ecf5fd; --muted:#abbfd2; --subtle:#a1b3c6; --bg:#111b2b; --surface:#182637;
  --panel:#152133; --line:#31445b; --action:#1176a4; --action-hover:#167ca9;
  --accent:#5cd4fa; --soft:#233f58; --own:#19454c; --danger:#ff91a5;
  --shadow:0 12px 42px #050b1480; --rail:#0c1627; --rail-text:#b1c3d6;
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--ink); }
body { overscroll-behavior:none; }
[hidden],.symbols { display:none !important; }
h1,h2,h3,p { margin:0; }
button,input,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.5; }
button, input, textarea, a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
a { color:var(--action); }
img { max-width:100%; }
.icon { width:22px; height:22px; display:inline-block; vertical-align:middle; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.muted { color:var(--muted); line-height:1.5; }
.eyebrow { color:var(--action); font-size:11px; font-weight:800; letter-spacing:.16em; }
.error { color:var(--danger); font-size:14px; line-height:1.4; }
.primary,.secondary,.text-btn {
  display:inline-flex; gap:8px; align-items:center; justify-content:center;
  min-height:43px; border-radius:12px; padding:9px 15px; font-weight:650; text-decoration:none;
}
.primary { background:var(--action); color:white; border:1px solid transparent; }
.primary:hover:not(:disabled) { background:var(--action-hover); }
.secondary { background:var(--panel); color:var(--ink); border:1px solid var(--line); }
.secondary:hover:not(:disabled) { background:var(--soft); }
.text-btn { background:none; border:1px solid transparent; color:var(--accent); }
.text-btn:hover { background:var(--panel); }
.danger { color:var(--danger); }
.wide { width:100%; }
.icon-btn {
  display:inline-grid; place-items:center; flex:none; width:44px; height:44px; min-height:44px;
  border:0; border-radius:12px; padding:0; background:transparent; color:var(--muted);
}
.icon-btn:hover:not(:disabled) { background:var(--panel); color:var(--ink); }
.icon-btn.primary { background:var(--action); color:white; }
.icon-btn.primary:hover:not(:disabled) { background:var(--action-hover); }
label.field,form>label { display:grid; gap:7px; font-size:13px; font-weight:650; }
input:not([type=checkbox]),textarea,select {
  width:100%; min-width:0; min-height:44px; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:11px; padding:10px 12px; font-size:16px;
}
textarea { resize:vertical; line-height:1.4; }
input::placeholder,textarea::placeholder { color:var(--subtle); opacity:1; }
input[type=checkbox] { width:18px; height:18px; accent-color:var(--action); }
form { display:grid; gap:12px; }

.auth { min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto; padding:24px clamp(22px,5vw,80px); background:radial-gradient(ellipse at 30% 16%,var(--surface),var(--bg) 64%); }
.auth-header { display:flex; justify-content:space-between; gap:18px; align-items:center; max-width:1240px; width:100%; margin:auto; }
.brand { display:flex; align-items:center; gap:11px; font-size:22px; letter-spacing:-.045em; }
.brand img { width:40px; height:40px; border-radius:12px; }
.private-tag { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px; font-weight:600; }
.private-tag .icon { width:17px; height:17px; }
.auth-layout { max-width:1060px; margin:auto; width:100%; display:grid; gap:23px; grid-template-columns:minmax(320px,.82fr) 1.18fr; padding:24px 0; align-items:stretch; }
.auth-card { align-self:stretch; display:flex; flex-direction:column; justify-content:center; background:var(--surface); border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow); padding:clamp(24px,3.8vw,48px); }
.auth-card h1 { font-size:clamp(28px,3.3vw,43px); line-height:1.05; letter-spacing:-.045em; margin:12px 0 9px; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:22px 0 17px; background:var(--panel); border:1px solid var(--line); padding:4px; border-radius:13px; }
.auth-tabs button { border:0; background:transparent; color:var(--muted); font-size:14px; font-weight:650; border-radius:9px; padding:10px 5px; }
.auth-tabs button.active { background:var(--surface); color:var(--ink); box-shadow:0 2px 6px #0d2a411b; }
.password-field { position:relative; }
.password-field input { padding-right:49px; }
.password-field button { position:absolute; right:2px; top:0; }
.auth-card .primary { margin-top:3px; }
.auth-story { color:#eefbff; border-radius:26px; position:relative; isolation:isolate; overflow:hidden; padding:26px; min-height:472px; display:flex; flex-direction:column; justify-content:space-between; background:radial-gradient(ellipse at 76% 23%,#12436b,#102343 58%,#0c192f 100%); }
.auth-story::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; background-image:radial-gradient(#99e5ff44 1px,transparent 1px); background-size:22px 22px; mask-image:linear-gradient(180deg,#000,transparent 84%); }
.story-meta { display:flex; justify-content:space-between; color:#a6d2e7; font-size:10px; letter-spacing:.14em; font-weight:750; }
.story-meta .dot { margin-right:5px; }
.story-mark { width:clamp(120px,19vw,218px); align-self:center; margin:15px 0; }
.story-mark img { width:100%; border-radius:27%; box-shadow:0 13px 40px #070c29b8,0 0 0 1px #5aabdd42; transform:rotate(-7deg); }
.story-copy { padding:8px 8px 3px; }
.story-copy h2 { font-size:clamp(35px,4.5vw,64px); line-height:.98; letter-spacing:-.06em; }
.story-copy p { color:#b0cbe1; margin:14px 0; font-size:14px; }
.story-tags { display:flex; flex-wrap:wrap; gap:7px; }
.story-tags span { color:#cae7f7; border:1px solid #4a7694; border-radius:30px; padding:6px 9px; font-size:11px; font-weight:650; }
.story-tags .icon { width:14px; height:14px; margin-right:3px; }
.auth-footer { color:var(--subtle); text-align:center; font-size:12px; padding-bottom:env(safe-area-inset-bottom,0px); }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#45dfc4; vertical-align:1px; }

.shell { height:100dvh; display:grid; grid-template-columns:76px minmax(280px,350px) minmax(0,1fr); overflow:hidden; }
.shell[data-tab]:not([data-tab=chats]) { grid-template-columns:76px minmax(0,1fr); }
.shell[data-tab]:not([data-tab=chats]) .sidebar { display:none; }
.rail { background:var(--rail); display:flex; flex-direction:column; align-items:center; padding:17px 8px 12px; gap:27px; color:var(--rail-text); min-height:0; }
.rail-brand { width:42px; height:42px; border-radius:13px; box-shadow:0 0 0 1px #a4dfff28; }
.rail-items { display:flex; width:100%; flex:1; flex-direction:column; gap:10px; min-height:0; overflow:auto; scrollbar-width:none; }
.nav-btn { position:relative; display:flex; align-items:center; flex-direction:column; gap:4px; border:0; border-radius:12px; padding:8px 2px; background:none; color:inherit; font-size:9px; font-weight:700; min-height:53px; }
.nav-btn.active,.nav-btn:hover { color:#c8f2ff; background:#1d4161; }
.nav-btn b { position:absolute; left:56%; top:3px; background:#64e0eb; color:#0a2840; font-size:9px; border-radius:20px; min-width:15px; padding:2px 3px; }
.rail-profile { border:0; background:none; padding:0; border-radius:50%; color:#fff; }
.sidebar { background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; min-width:0; min-height:0; }
.sidebar-header { display:flex; justify-content:space-between; align-items:flex-end; padding:23px 19px 14px; gap:12px; }
.wordmark { color:var(--accent); font-weight:800; font-size:12px; letter-spacing:.035em; }
.sidebar-header h1 { font-size:33px; letter-spacing:-.06em; margin-top:1px; line-height:1.13; }
.sidebar-tools { padding:0 14px; }
.search-box { display:flex; align-items:center; gap:8px; min-width:0; border-radius:11px; background:var(--panel); color:var(--muted); border:1px solid var(--line); padding-left:10px; }
.search-box .icon { width:18px; height:18px; }
.search-box input { background:none; border:0; min-height:40px; padding:8px 8px 8px 0; }
.filters { display:flex; gap:5px; overflow:auto; scrollbar-width:none; padding:11px 0 12px; }
.filters button { color:var(--muted); font-size:11px; font-weight:650; border-radius:20px; background:var(--panel); border:1px solid transparent; padding:6px 8px; white-space:nowrap; }
.filters button.active { background:var(--soft); color:var(--ink); border-color:var(--line); }
.connection { font-size:12px; padding:6px 2px; color:var(--accent); }
.chat-list { overflow:auto; min-height:0; padding:0 8px 8px; }
.chat-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; width:100%; text-align:left; background:none; border:1px solid transparent; border-radius:12px; padding:10px 8px; align-items:center; min-height:66px; }
.chat-row:hover,.chat-row.selected { background:var(--panel); }
.chat-row.selected { border-color:var(--line); }
.avatar { display:inline-grid; place-items:center; flex:none; width:42px; height:42px; color:#173a51; background:#d4e9fa; border-radius:50%; font-size:14px; font-weight:760; letter-spacing:.01em; vertical-align:middle; }
.avatar.hue-1 { background:#d3f0e3; color:#214b44; }
.avatar.hue-2 { background:#ede2f9; color:#4d3464; }
.avatar.hue-3 { background:#f7e3d2; color:#654332; }
.avatar.hue-4 { background:#e3e9fa; color:#344775; }
.avatar.hue-5 { background:#f8dce7; color:#6a334a; }
.avatar.hue-6 { background:#e5efcd; color:#485b34; }
.avatar-big { width:75px; height:75px; font-size:25px; }
.avatar-wrap { display:inline-flex; position:relative; }
.presence-dot { position:absolute; right:0; bottom:0; background:#139d85; width:12px; height:12px; border-radius:50%; border:2px solid var(--surface); }
.chat-row strong,.chat-row small,.chat-person strong,.chat-person small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-row strong { font-size:14px; }
.chat-row small { margin-top:4px; font-size:12px; color:var(--muted); }
.chat-row-meta { min-width:18px; text-align:right; align-self:start; display:grid; justify-items:end; gap:6px; }
.chat-row-meta time { color:var(--subtle); font-size:10px; white-space:nowrap; }
.unread { background:var(--action); color:white; min-width:19px; text-align:center; border-radius:15px; font-size:10px; font-weight:700; padding:3px 5px; }
.row-indicators { display:flex; gap:4px; align-items:center; color:var(--subtle); }
.row-indicators .icon { width:14px; height:14px; }
.list-empty { padding:24px 13px; color:var(--muted); font-size:14px; line-height:1.5; }
.list-empty strong { color:var(--ink); display:block; margin-bottom:6px; }

.workspace { min-width:0; min-height:0; display:grid; background:var(--bg); position:relative; }
.home,.thread { background-color:var(--bg); background-image:radial-gradient(#688bac2a 1px,transparent 1px); background-size:22px 22px; }
.home { display:grid; place-content:center; justify-items:center; gap:13px; text-align:center; padding:25px; }
.home h2 { font-size:clamp(32px,4vw,55px); letter-spacing:-.06em; }
.home p { color:var(--muted); max-width:330px; line-height:1.5; }
.home-mark { width:94px; height:94px; background:var(--surface); border-radius:28px; box-shadow:var(--shadow); padding:8px; margin-bottom:6px; transform:rotate(-6deg); }
.home-mark img { border-radius:22px; }
.home .primary { margin-top:5px; }
.chat { min-height:0; min-width:0; height:100%; display:flex; flex-direction:column; position:relative; }
.chat-header { display:flex; gap:8px; align-items:center; background:var(--surface); padding:9px clamp(10px,2vw,24px); min-height:68px; border-bottom:1px solid var(--line); }
.chat-person { display:flex; align-items:center; gap:10px; min-width:0; flex:1; text-align:left; padding:0; background:none; border:0; }
.chat-person > span:last-child { min-width:0; }
.chat-person small { color:var(--muted); margin-top:3px; font-size:12px; }
.chat-person small.is-online { color:var(--accent); }
.chat-tools { display:flex; gap:3px; flex:none; }
.mobile-back { display:none; }
.search-banner { display:flex; justify-content:space-between; align-items:center; padding:0 16px; color:var(--muted); background:var(--surface); border-bottom:1px solid var(--line); font-size:13px; }
.thread { flex:1; min-height:0; overflow:auto; padding:16px clamp(10px,4vw,54px); overscroll-behavior-y:contain; }
.messages { display:flex; flex-direction:column; gap:9px; max-width:1000px; margin:auto; }
.older { display:flex; justify-content:center; margin:0 0 12px; }
.older .secondary { font-size:12px; min-height:34px; }
.message-day { align-self:center; font-size:11px; font-weight:700; color:var(--muted); background:var(--surface); border:1px solid var(--line); padding:6px 10px; border-radius:30px; margin:9px 0 4px; }
.message { display:flex; align-items:flex-start; align-self:flex-start; gap:3px; max-width:min(84%,560px); min-width:0; scroll-margin-block:20px; }
.message.mine { align-self:flex-end; flex-direction:row-reverse; }
.bubble { display:grid; gap:5px; min-width:0; min-height:39px; background:var(--surface); border:1px solid var(--line); border-radius:5px 14px 14px 14px; padding:8px 10px 6px; box-shadow:0 1px 2px #18355212; }
.mine .bubble { background:var(--own); border-radius:14px 5px 14px 14px; }
.message:target .bubble,.message.highlight .bubble { outline:2px solid var(--accent); }
.message-body { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.43; }
.message-author { color:var(--accent); font-weight:750; font-size:12px; }
.message-meta { display:flex; align-items:center; gap:4px; justify-content:flex-end; color:var(--subtle); font-size:10px; min-height:12px; }
.message-meta .icon { width:14px; height:14px; }
.message-meta .read { color:var(--accent); }
.message-menu { width:34px; height:34px; min-height:34px; opacity:.7; }
.message-menu .icon { width:17px; height:17px; }
.quote { border:0; border-left:3px solid var(--accent); border-radius:7px; padding:6px 8px; color:var(--ink); text-align:left; background:var(--panel); display:grid; min-width:0; gap:3px; }
.quote strong { color:var(--accent); font-size:11px; }
.quote span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12px; }
.bubble img,.bubble video { max-width:min(100%,360px); max-height:330px; object-fit:contain; border-radius:9px; }
.bubble audio,.voice-note audio { width:min(290px,61vw); height:39px; }
.file-card { display:flex; gap:8px; align-items:center; border-radius:8px; background:var(--panel); padding:8px; color:var(--ink); text-decoration:none; min-width:0; overflow-wrap:anywhere; }
.file-card small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.media-download { font-size:11px; color:var(--muted); justify-self:start; }
.reactions { display:flex; gap:4px; flex-wrap:wrap; }
.reactions button,.emoji-grid button { background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:14px; padding:4px 7px; font-size:12px; }
.reactions button.active { border-color:var(--accent); }
.poll { display:grid; gap:6px; }
.poll .poll-choice { display:flex; align-items:center; justify-content:space-between; gap:16px; border-radius:9px; background:var(--panel); border:1px solid var(--line); padding:8px; text-align:left; font-size:13px; overflow-wrap:anywhere; }
.poll-choice.selected { border-color:var(--accent); font-weight:700; }
.poll-choice b { color:var(--accent); }
.thread-empty { align-self:center; text-align:center; padding:17px 20px; max-width:340px; color:var(--muted); font-size:13px; line-height:1.5; background:var(--surface); border:1px solid var(--line); border-radius:15px; margin:22px 0; }
.jump { position:absolute; right:16px; bottom:90px; z-index:2; font-size:12px; box-shadow:var(--shadow); }
.composer-area { background:var(--surface); border-top:1px solid var(--line); padding:8px clamp(8px,2vw,23px) max(8px,env(safe-area-inset-bottom)); }
.composer { display:flex; gap:7px; align-items:flex-end; }
.compose-input { min-width:0; flex:1; display:flex; align-items:flex-end; gap:3px; background:var(--panel); border:1px solid var(--line); border-radius:14px; }
.compose-input textarea { min-width:0; width:100%; min-height:42px; max-height:130px; resize:none; border:0; background:none; padding:10px; overflow:auto; }
.compose-input .icon-btn { min-height:42px; height:42px; }
.composer .record { color:var(--action); background:var(--soft); }
.composer-note,.voice-note { display:flex; align-items:center; justify-content:space-between; gap:7px; border-left:3px solid var(--accent); padding:6px 7px 6px 10px; margin-bottom:7px; background:var(--panel); border-radius:8px; min-width:0; }
.composer-note > div { min-width:0; }
.composer-note strong { font-size:12px; color:var(--accent); }
.composer-note p { color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.voice-note { flex-wrap:wrap; font-size:13px; }
.voice-note .recording { color:var(--danger); font-weight:700; }
.restricted { font-size:13px; color:var(--muted); padding:7px; }

.page { width:min(100%,1010px); margin:0 auto; overflow:auto; padding:clamp(20px,5vw,65px); }
.page-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:20px; }
.page-head h1 { font-size:clamp(30px,5vw,48px); line-height:1; letter-spacing:-.055em; margin:5px 0 7px; }
.page-head .muted { font-size:14px; }
.stack { display:grid; gap:12px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:17px; box-shadow:var(--shadow); }
.card h2 { font-size:17px; margin-bottom:11px; }
.profile-line { display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.profile-line .muted { margin-top:3px; font-size:13px; }
.preference-line { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding:10px 0; font-size:14px; min-height:48px; }
.preference-line select { width:auto; max-width:50%; }
.call-log { display:grid; gap:7px; }
.call-log-row { display:flex; align-items:center; gap:10px; padding:9px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.call-log-row > div { flex:1; min-width:0; }
.call-log-row strong { display:block; overflow:hidden; text-overflow:ellipsis; }
.call-log-row p { color:var(--muted); font-size:12px; margin-top:4px; }
.status-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px; }
.status-card { min-height:160px; color:#fff; border-radius:17px; display:flex; flex-direction:column; padding:14px; gap:11px; }
.status-card.pine { background:#245856; }
.status-card.violet { background:#583b7b; }
.status-card.ocean { background:#265579; }
.status-card.coral { background:#854651; }
.status-top { display:flex; justify-content:space-between; align-items:center; gap:5px; font-size:13px; }
.status-body { white-space:pre-wrap; overflow-wrap:anywhere; font-size:17px; line-height:1.4; flex:1; }
.status-card time { font-size:11px; opacity:.8; }
.status-card .icon-btn { width:32px; height:32px; min-height:32px; color:#fff; }
.status-card .icon-btn:hover { color:#172d44; }

.modal { border:1px solid var(--line); border-radius:19px; box-shadow:0 18px 90px #0a1e4060; background:var(--surface); color:var(--ink); width:min(94vw,495px); max-height:88dvh; padding:0; }
.modal::backdrop { background:#0d1c36a0; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px 8px 19px; border-bottom:1px solid var(--line); }
.modal-head h2 { font-size:19px; letter-spacing:-.02em; }
.modal-body { padding:16px 19px 20px; display:grid; gap:10px; }
.modal-body .muted { font-size:13px; }
.modal-row { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.modal-actions { display:grid; gap:8px; }
.modal-actions > button { justify-content:flex-start; }
.emoji-grid { display:flex; flex-wrap:wrap; gap:6px; }
.emoji-grid button { font-size:21px; min-width:43px; min-height:43px; }
.roster { display:grid; gap:5px; }
.member-line { display:flex; align-items:center; gap:8px; font-size:14px; }
.member-line > div { flex:1; }
.member-line small { display:block; color:var(--subtle); font-size:11px; }
.member-line .icon-btn { height:34px; min-height:34px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:4px; padding:5px 8px; border:1px solid var(--line); border-radius:15px; background:var(--panel); font-size:12px; }
.chip button { border:0; background:transparent; min-width:26px; min-height:26px; }
.toast { position:fixed; z-index:100; left:50%; bottom:max(18px,env(safe-area-inset-bottom)); transform:translateX(-50%); background:#132640; color:#fff; max-width:min(92vw,510px); min-width:150px; padding:12px 15px; text-align:center; font-size:14px; border-radius:12px; box-shadow:0 12px 45px #091b4f55; }
.call-screen { position:fixed; z-index:90; inset:0; background:#071629c4; display:grid; place-items:center; padding:14px; }
.call-box { width:min(940px,100%); max-height:94dvh; overflow:auto; border:1px solid #57769370; background:radial-gradient(ellipse at top,#213f60,#0d1e34 72%); color:#fff; border-radius:24px; padding:16px; box-shadow:0 24px 85px #0007; display:grid; gap:14px; }
.call-brand { display:flex; align-items:center; gap:8px; color:#c5dfef; font-size:13px; font-weight:700; }
.call-brand img { width:30px; height:30px; border-radius:9px; }
#call-type { margin-left:auto; color:#a8cce3; font-weight:500; }
.call-center { display:grid; justify-items:center; gap:10px; text-align:center; padding:20px 4px; }
.call-center h2 { font-size:clamp(22px,5vw,36px); overflow-wrap:anywhere; }
.call-center p { color:#b5d3e9; font-size:14px; min-height:1.3em; }
.call-box.connected .call-center { padding:2px 0; gap:3px; }
.call-box.connected .call-center .avatar { display:none; }
.call-videos { display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); }
.call-tile { position:relative; background:#091628; border-radius:13px; aspect-ratio:16/10; overflow:hidden; display:grid; place-items:center; max-height:44dvh; }
.call-tile video { width:100%; height:100%; object-fit:contain; }
.call-tile .avatar { position:absolute; }
.call-tile.has-video .avatar { display:none; }
.call-tile span.call-person { position:absolute; bottom:6px; left:6px; background:#000a; border-radius:8px; color:#fff; padding:4px 7px; font-size:11px; }
.call-controls { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:5px 0; }
.call-controls .secondary { color:#eef8ff; background:#244363; border-color:#476683; }
.call-controls .secondary:hover { background:#365d81; }
.call-controls .hangup { background:#ac2b48; color:#fff; }
.call-controls .hangup:hover { background:#8d1e39; }
.call-controls .call-off { background:#5e465e; }
.call-audio { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

@media(max-width:840px) {
  .shell { grid-template-columns:61px minmax(245px,286px) minmax(0,1fr); }
  .shell[data-tab]:not([data-tab=chats]) { grid-template-columns:61px minmax(0,1fr); }
  .chat-tools { gap:0; }
  .chat-tools .icon-btn { width:39px; }
  .chat-find { display:none; }
}
@media(max-width:680px) {
  .auth { padding:17px max(16px,env(safe-area-inset-left)); }
  .auth-header { align-items:center; }
  .auth-layout { width:min(100%,460px); grid-template-columns:1fr; align-items:center; padding:18px 0; }
  .auth-story { display:none; }
  .auth-card { padding:25px 20px; }
  .private-tag { font-size:11px; }
  .auth-footer { padding-top:10px; }
  .shell,.shell[data-tab]:not([data-tab=chats]) { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; }
  .shell[data-tab=chats]:not(.in-chat) .workspace,.shell.in-chat .sidebar { display:none; }
  .shell.in-chat { grid-template-rows:minmax(0,1fr); }
  .shell.in-chat .rail { display:none; }
  .sidebar,.workspace { grid-column:1; grid-row:1; }
  .sidebar { border-right:0; }
  .sidebar-header { padding:17px 16px 12px; }
  .sidebar-tools { padding:0 13px; }
  .filters button { padding:7px 10px; }
  .chat-list { padding:0 6px 10px; }
  .rail { grid-column:1; grid-row:2; flex-direction:row; justify-content:center; gap:0; padding:6px 7px max(6px,env(safe-area-inset-bottom)); }
  .rail-brand,.rail-profile { display:none; }
  .rail-items { max-width:540px; display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
  .nav-btn { min-height:48px; font-size:10px; padding:4px; }
  .chat-header { padding:5px 6px 5px max(4px,env(safe-area-inset-left)); min-height:61px; gap:3px; }
  .chat-header .avatar { width:36px; height:36px; font-size:12px; }
  .mobile-back { display:inline-grid; width:36px; }
  .chat-tools .icon-btn { width:38px; }
  .chat-person { gap:7px; }
  .chat-person strong { font-size:14px; }
  .thread { padding:10px 7px 15px; }
  .message { max-width:92%; }
  .message-menu { width:28px; }
  .compose-input .icon-btn { width:38px; }
  .call-videos { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .call-box { padding:11px; }
  .toast { bottom:max(68px,env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }
.file-media { min-width:0; }
.chip .icon-btn { width:25px; height:25px; min-height:25px; }
.chip .icon-btn .icon { width:14px; height:14px; }