/* Garuda Chat. One stylesheet, mobile first: phone is one column, laptop adds the rail, list and conversation side by side. */
:root {
  --navy: #17192e; --amber: #e89045; --gold: #ffc866;
  --bg: #f4f1ec; --panel: #ffffff; --panel-2: #f7f5f1; --line: #e6e1d8; --ink: #1c1d2b; --ink-2: #63646f; --ink-3: #8e8f99;
  --accent: #b85f12; --accent-ink: #ffffff; --accent-fill: #c9691a; --accent-soft: #fbeddc; --danger: #c62f2f; --read: #1a7fd6; --online: #1f9d55;
  --mine: #ffe6c7; --mine-ink: #2b2118; --theirs: #ffffff; --meta: #7c6f60; --conv-bg: #efeae1; --pattern: rgba(120, 90, 50, .07);
  --shadow: 0 1px 2px rgba(23, 25, 46, .08), 0 4px 16px rgba(23, 25, 46, .06); --shadow-lg: 0 12px 40px rgba(23, 25, 46, .22);
  --app-height: 100dvh; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0d0e1a; --panel: #15172a; --panel-2: #1c1e34; --line: #2a2c45; --ink: #eceaf2; --ink-2: #a4a5b5; --ink-3: #7b7c8e;
  --accent: #f3a55c; --accent-ink: #1b1409; --accent-fill: #e89045; --accent-soft: #33261a; --danger: #ff7b7b; --read: #5cb8ff; --online: #4cd38a;
  --mine: #4a3218; --mine-ink: #f8ecdc; --theirs: #20223a; --meta: #b3a899; --conv-bg: #0f1020; --pattern: rgba(255, 200, 120, .035);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .25); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--ink); font: 15px/1.4 var(--font); overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
button:disabled { cursor: default; opacity: .55; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--accent); }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ic { width: 22px; height: 22px; flex: none; }
.muted { color: var(--ink-2); }
.center { text-align: center; }
.pad { padding: 16px; }
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.check-row { flex-direction: row !important; align-items: center; font-weight: 400 !important; }
.link { color: var(--accent); font-weight: 600; }

.input { width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; outline: none; }
.input:focus { border-color: var(--accent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 22px; font-weight: 600; white-space: nowrap; transition: filter .12s, transform .08s; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--accent-fill); color: #fff; }
:root[data-theme="dark"] .btn.primary { color: #1b1409; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: var(--panel-2); border: 1px solid var(--line); }
.btn.danger { background: var(--danger); color: #fff; }
:root[data-theme="dark"] .btn.danger { color: #2a0c0c; }
.btn.small { min-height: 34px; padding: 0 14px; font-size: 14px; }
.btn.full { width: 100%; }
.btn.big { min-height: 50px; font-size: 16px; }
.danger-text { color: var(--danger); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: var(--ink-2); flex: none; transition: background .12s; }
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.icon-btn.small { width: 32px; height: 32px; }
.icon-btn.small .ic { width: 18px; height: 18px; }
.icon-btn.accent { color: var(--accent); }
.icon-btn.danger { color: var(--danger); }

.av { --s: 48px; display: inline-flex; align-items: center; justify-content: center; width: var(--s); height: var(--s); border-radius: 50%; flex: none; overflow: hidden; color: #fff; font-weight: 600; font-size: calc(var(--s) * .38); background: hsl(var(--h, 30) 45% 42%); user-select: none; }
.av img { width: 100%; height: 100%; object-fit: cover; }

/* Boot and sign in */
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--navy); z-index: 50; }
.boot img { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.07); opacity: .8; } }
.auth { position: fixed; inset: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: calc(24px + var(--safe-top)) 20px calc(24px + var(--safe-bottom)); background: radial-gradient(120% 70% at 50% 0, #2a2c4d 0, var(--navy) 60%); }
.auth-card { width: 100%; max-width: 400px; padding: 28px 22px; background: var(--panel); border-radius: 22px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 14px; text-align: center; }
.auth-card .stack { text-align: left; }
.auth-logo { margin: 0 auto; border-radius: 22px; }
.auth-card h1 { font-size: 26px; letter-spacing: -.3px; }
.password-wrap { position: relative; display: block; }
.password-wrap .input { padding-right: 46px; }
.password-wrap .icon-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.form-error { color: var(--danger); font-size: 14px; font-weight: 400; min-height: 1px; }
.form-error:empty { display: none; }
.legal { font-size: 12.5px; }
.segmented { display: flex; gap: 4px; padding: 4px; background: var(--panel-2); border-radius: 14px; margin: 0 0 4px; }
.segmented button { flex: 1; padding: 9px 8px; border-radius: 10px; text-align: center; font-weight: 600; color: var(--ink-2); }
.segmented button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.page-body > .segmented { margin: 0 16px; }

/* App frame */
.app { position: fixed; inset: 0; height: var(--app-height); display: flex; background: var(--panel); }
.rail { display: none; }
.side { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; padding-top: var(--safe-top); background: var(--panel); }
.tab { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.main { position: fixed; inset: 0; height: var(--app-height); z-index: 5; transform: translateX(100%); transition: transform .2s ease; visibility: hidden; background: var(--conv-bg); display: flex; flex-direction: column; }
.chat-open .main { transform: none; visibility: visible; }
.details { display: none; }
.welcome { display: none; }

.bottom-nav { display: flex; padding-bottom: var(--safe-bottom); background: var(--panel); border-top: 1px solid var(--line); }
.nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 7px; color: var(--ink-2); }
.nav-btn small { font-size: 12px; font-weight: 600; }
.nav-ic { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: 15px; transition: background .15s; }
.nav-btn.on { color: var(--ink); }
.nav-btn.on .nav-ic { background: var(--accent-soft); color: var(--accent); }
.nav-badge { position: absolute; top: -2px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-fill); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
:root[data-theme="dark"] .nav-badge { color: #1b1409; }
.nav-badge.dot { min-width: 9px; width: 9px; height: 9px; padding: 0; top: 2px; right: 14px; }

.side-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 6px 16px; min-height: 56px; }
.side-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -.3px; }
.side-actions { display: flex; }
.side-search { display: flex; align-items: center; gap: 10px; margin: 2px 12px 8px; padding: 0 14px; height: 42px; background: var(--panel-2); border-radius: 21px; color: var(--ink-3); }
.side-search .ic { width: 18px; height: 18px; }
.side-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink); font: inherit; font-size: 16px; }
.side-search.in-page { margin: 10px 12px; }
.alert-banner { display: flex; align-items: center; gap: 10px; margin: 0 12px 8px; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--accent-soft); font-size: 14px; line-height: 1.3; }
.alert-banner > span { flex: 1; min-width: 0; }
.alert-banner > .ic { color: var(--accent); }
.chips { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; scrollbar-width: none; flex: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 6px 14px; border-radius: 16px; background: var(--panel-2); color: var(--ink-2); font-size: 14px; font-weight: 600; }
.chip.on { background: var(--accent-soft); color: var(--accent); }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 84px; }
.list-label { padding: 14px 16px 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.list-empty { padding: 48px 28px; text-align: center; color: var(--ink-2); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.list-empty h3 { color: var(--ink); }
.list-empty img { border-radius: 18px; }
.conn-note { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); padding: 6px 14px; border-radius: 16px; background: var(--navy); color: #fff; font-size: 13px; box-shadow: var(--shadow); white-space: nowrap; }

.chat-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 14px; min-height: 70px; transition: background .1s; }
button.chat-row:hover { background: var(--panel-2); }
.chat-row.active { background: var(--accent-soft); }
.row-av { position: relative; flex: none; display: flex; }
.online-dot { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--online); border: 2px solid var(--panel); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-top, .row-bottom { display: flex; align-items: center; gap: 8px; }
.row-top strong { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: 16px; }
.row-top time { flex: none; font-size: 12px; color: var(--ink-3); }
.chat-row.unread .row-top time { color: var(--accent); font-weight: 600; }
.row-preview { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); font-size: 14px; }
.row-preview .ic { width: 15px; height: 15px; vertical-align: -3px; display: inline-block; }
.row-preview em { color: var(--ink-3); }
.typing-text { color: var(--accent); font-weight: 600; }
.row-flags { flex: none; display: flex; align-items: center; gap: 5px; color: var(--ink-3); }
.row-flags .ic { width: 15px; height: 15px; }
.flag-call { color: var(--online); }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent-fill); color: #fff; font-size: 12px; line-height: 20px; text-align: center; font-weight: 700; }
:root[data-theme="dark"] .badge { color: #1b1409; }
.badge.quiet { background: var(--ink-3); }
.archived-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 18px 12px 26px; color: var(--ink-2); font-weight: 600; }
.archived-row span { flex: 1; }
.archived-row small { color: var(--accent); }
.archived-row .ic:last-child { width: 16px; height: 16px; }
.tick { display: inline-flex; color: var(--ink-3); vertical-align: -3px; margin-right: 3px; }
.tick .ic { width: 16px; height: 16px; }
.tick.read { color: var(--read); }
.fab { position: absolute; right: 16px; bottom: 14px; width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--accent-fill); color: #fff; box-shadow: var(--shadow-lg); z-index: 2; }
:root[data-theme="dark"] .fab { color: #1b1409; }
.fab:active { transform: scale(.96); }

/* Sliding pages */
.pages { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.page { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--panel); transform: translateX(100%); transition: transform .2s ease; pointer-events: auto; padding-top: var(--safe-top); z-index: 6; }
.page.in { transform: none; }
.fixed-page { position: fixed; z-index: 30; height: var(--app-height); inset: 0; }
.page-head { display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 6px 8px; border-bottom: 1px solid var(--line); flex: none; }
.page-head h2 { flex: 1; font-size: 18px; font-weight: 600; }
.page-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(24px + var(--safe-bottom)); }
.page-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 24px; }
.person { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 16px; }
button.person:hover { background: var(--panel-2); }
.person-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.person-text strong { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.person-text small { color: var(--ink-2); font-size: 13.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.round-ic { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-fill); color: #fff; flex: none; }
:root[data-theme="dark"] .round-ic { color: #1b1409; }
.tickbox { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.tickbox.on { background: var(--accent-fill); border-color: var(--accent-fill); }
.tickbox .ic { width: 15px; height: 15px; stroke-width: 3; }
.picked { display: flex; gap: 8px; padding: 10px 12px 2px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.picked button { display: flex; align-items: center; gap: 6px; flex: none; padding: 3px 8px 3px 3px; border-radius: 18px; background: var(--panel-2); font-size: 13px; }
.picked .ic { width: 14px; height: 14px; color: var(--ink-3); }
.avatar-pick { width: 120px; height: 120px; margin: 8px auto; border-radius: 50%; background: var(--panel-2); color: var(--ink-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; text-align: center; overflow: hidden; }
.avatar-pick img { width: 100%; height: 100%; object-fit: cover; }
.fab.show { position: sticky; float: right; bottom: 16px; margin: -60px 16px 0 0; }

.set-row { display: flex; align-items: center; gap: 16px; width: 100%; padding: 13px 16px; }
button.set-row:hover, label.set-row:hover { background: var(--panel-2); }
.set-ic { color: var(--ink-2); display: flex; flex: none; }
.set-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.set-text strong { font-weight: 500; }
.set-text small { color: var(--ink-2); font-size: 13.5px; }
.set-row > .ic { width: 18px; height: 18px; color: var(--ink-3); }
.set-row.danger, .set-row.danger .set-ic { color: var(--danger); }
.info-group { background: var(--panel); margin-bottom: 8px; }
.toggle input { position: absolute; opacity: 0; width: 0; }
.switch { position: relative; width: 44px; height: 26px; flex: none; border-radius: 13px; background: var(--line); transition: background .15s; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.toggle input:checked + .switch { background: var(--accent-fill); }
.toggle input:checked + .switch::after { transform: translateX(18px); }
.toggle { position: relative; cursor: pointer; }
.toggle input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.profile-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px 16px; border-bottom: 8px solid var(--panel-2); }
.profile-card strong { font-size: 18px; font-weight: 600; }
.profile-card > .ic { color: var(--ink-3); width: 18px; height: 18px; }
.app-version { padding: 16px; font-size: 13px; }
.profile-photo { display: flex; justify-content: center; padding: 24px; }
.profile-photo button { position: relative; }
.photo-badge { position: absolute; right: 4px; bottom: 4px; width: 42px; height: 42px; border-radius: 50%; background: var(--accent-fill); color: #fff; display: flex; align-items: center; justify-content: center; }

/* Conversation */
.conv { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; background: var(--conv-bg); }
.conv-head { display: flex; align-items: center; gap: 2px; padding: calc(6px + var(--safe-top)) 4px 6px; min-height: 58px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none; z-index: 3; }
.conv-peer { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 2px 4px; border-radius: 10px; }
.conv-peer-text { min-width: 0; display: flex; flex-direction: column; }
.conv-peer-text strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: 16px; }
.conv-peer-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); font-size: 13px; }
.title-lock .ic { width: 13px; height: 13px; vertical-align: -1px; color: var(--online); display: inline-block; }
.conv-actions { display: flex; flex: none; }
.typing { color: var(--accent); font-weight: 600; }
.typing i { display: inline-block; width: 3px; height: 3px; margin-left: 2px; border-radius: 50%; background: currentColor; animation: blink 1.2s infinite; vertical-align: 2px; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 40% { opacity: .2; } }
.conv-banner { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 14px; flex: none; z-index: 2; }
.conv-banner > span { flex: 1; min-width: 0; }
.conv-banner .ic { width: 18px; height: 18px; color: var(--ink-3); }
.conv-banner.pinned > span { cursor: pointer; color: var(--ink-2); }
.conv-search { display: flex; align-items: center; gap: 4px; padding: 6px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none; }
.msg-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 10px 0 6px; background-color: var(--conv-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23785a32' stroke-opacity='.075' stroke-width='1.6'%3E%3Cpath d='M16 20c6-8 16-8 22 0-6 2-9 6-11 12-2-6-5-10-11-12z'/%3E%3Ccircle cx='70' cy='24' r='7'/%3E%3Cpath d='M58 70l12-10 12 10-12 10z'/%3E%3Cpath d='M16 66c4-4 10-4 14 0s10 4 14 0'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="dark"] .msg-scroll { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23ffc878' stroke-opacity='.04' stroke-width='1.6'%3E%3Cpath d='M16 20c6-8 16-8 22 0-6 2-9 6-11 12-2-6-5-10-11-12z'/%3E%3Ccircle cx='70' cy='24' r='7'/%3E%3Cpath d='M58 70l12-10 12 10-12 10z'/%3E%3Cpath d='M16 66c4-4 10-4 14 0s10 4 14 0'/%3E%3C/g%3E%3C/svg%3E"); }
[data-wallpaper="plain"] .msg-scroll { background-image: none; }
[data-wallpaper="dawn"] .msg-scroll { background-image: linear-gradient(170deg, #fde6c6, #f5d6dc 60%, #dcd6ef); }
[data-wallpaper="forest"] .msg-scroll { background-image: linear-gradient(170deg, #dbe9d4, #c8ddd2 60%, #b9d3d8); }
[data-wallpaper="dusk"] .msg-scroll { background-image: linear-gradient(170deg, #2b2d55, #4a2f5e 60%, #6d3b57); }
.wallpaper-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.wallpaper-grid button { aspect-ratio: 3 / 4; border-radius: 14px; border: 2px solid var(--line); display: flex; align-items: flex-end; justify-content: center; padding: 8px; font-size: 13px; font-weight: 600; background: var(--conv-bg); }
.wallpaper-grid button.on { border-color: var(--accent); }
.wp-dawn { background: linear-gradient(170deg, #fde6c6, #dcd6ef) !important; color: #3a2c1c; }
.wp-forest { background: linear-gradient(170deg, #dbe9d4, #b9d3d8) !important; color: #1c3a2c; }
.wp-dusk { background: linear-gradient(170deg, #2b2d55, #6d3b57) !important; color: #fff; }
.msg-list { display: flex; flex-direction: column; gap: 2px; padding: 0 clamp(8px, 4vw, 64px); max-width: 1100px; margin: 0 auto; }
.msg-loading { display: flex; justify-content: center; padding: 18px; }
.msg-loading span { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.date-chip { display: flex; justify-content: center; padding: 10px 0 8px; position: sticky; top: 0; z-index: 1; pointer-events: none; }
.date-chip span { padding: 4px 12px; border-radius: 10px; background: var(--panel); color: var(--ink-2); font-size: 12.5px; font-weight: 500; box-shadow: var(--shadow); }
.unread-mark { display: flex; justify-content: center; margin: 8px 0; padding: 4px; border-radius: 8px; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.unread-mark span { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.system-line { display: flex; justify-content: center; padding: 6px 12px; text-align: center; }
.system-line > span, .system-line.notice, .call-line button { padding: 5px 12px; border-radius: 10px; background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--ink-2); font-size: 13px; box-shadow: var(--shadow); max-width: 92%; }
.system-line.notice { margin: 4px auto 10px; }
.system-line.notice .ic { width: 13px; height: 13px; vertical-align: -2px; display: inline-block; }
.call-line button { display: flex; align-items: center; gap: 8px; }
.call-line .ic { width: 17px; height: 17px; color: var(--online); }
.call-line.missed .ic { color: var(--danger); }
.call-line time { font-size: 11.5px; color: var(--ink-3); }
.msg { display: flex; flex-direction: column; align-items: flex-start; margin-top: 6px; position: relative; }
.msg.cont { margin-top: 1px; }
.msg.mine { align-items: flex-end; }
.bubble { position: relative; max-width: min(78%, 620px); min-width: 72px; padding: 6px 9px 6px; border-radius: 14px; background: var(--theirs); box-shadow: 0 1px 1px rgba(23, 25, 46, .1); overflow-wrap: anywhere; }
.msg.theirs:not(.cont) .bubble { border-top-left-radius: 4px; }
.msg.mine .bubble { background: var(--mine); color: var(--mine-ink); }
.msg.mine:not(.cont) .bubble { border-top-right-radius: 4px; }
.msg.flash .bubble { animation: flash 1.3s ease; }
@keyframes flash { 25% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent); } }
.msg.pending .bubble { opacity: .85; }
.sender { color: hsl(var(--h) 55% 42%); font-weight: 600; font-size: 13.5px; margin-bottom: 1px; }
:root[data-theme="dark"] .sender { color: hsl(var(--h) 65% 70%); }
.text { white-space: pre-wrap; line-height: 1.38; font-size: 15.5px; }
.text a { color: var(--read); overflow-wrap: anywhere; }
.text code { font-family: ui-monospace, Consolas, monospace; font-size: 14px; background: color-mix(in srgb, var(--ink) 8%, transparent); padding: 1px 4px; border-radius: 4px; white-space: pre-wrap; }
.mention { color: var(--accent); font-weight: 600; }
.meta-space { display: inline-block; width: 74px; height: 1px; }
.meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: -14px -2px -2px 8px; position: relative; font-size: 11.5px; color: var(--meta); line-height: 16px; white-space: nowrap; }
.meta em { font-style: normal; margin-right: 2px; }
.meta .tick { margin: 0; color: var(--meta); }
.meta .tick.read { color: var(--read); }
.meta .tick .ic { width: 15px; height: 15px; }
.meta-star .ic, .meta-timer .ic { width: 11px; height: 11px; }
.meta-star .ic { fill: currentColor; }
.meta.over { position: absolute; float: none; right: 8px; bottom: 6px; margin: 0; padding: 1px 6px; border-radius: 9px; background: rgba(0, 0, 0, .45); }
.meta.over .meta { float: none; margin: 0; color: #fff; }
.meta.over .tick, .meta.over .tick.read { color: #fff; }
.msg:not(.text) .bubble > .meta { float: right; margin-top: 2px; margin-bottom: -1px; }
.msg.text .bubble > .meta { margin-top: -15px; }
.emoji-only .bubble { background: none !important; box-shadow: none; padding: 2px 0; }
.emoji-only .text { font-size: 38px; line-height: 1.15; }
.emoji-only .meta-space { display: none; }
/* The time sits in its own small pill under a big emoji, never on top of it (as on WhatsApp). */
.emoji-only .bubble { display: flex; flex-direction: column; align-items: flex-start; }
.emoji-only.mine .bubble { align-items: flex-end; }
.emoji-only .meta, .emoji-only .meta.over { position: static; float: none; display: inline-flex; margin: 2px 0 0; padding: 1px 8px; border-radius: 10px; background: var(--panel); color: var(--meta); box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.deleted { display: flex; align-items: center; gap: 6px; font-style: italic; color: var(--ink-3); font-size: 14.5px; flex-wrap: wrap; }
.msg.mine .deleted { color: var(--meta); }
.deleted .ic { width: 16px; height: 16px; }
.deleted .meta { float: none; margin: 0 0 0 auto; }
.forwarded { display: flex; align-items: center; gap: 4px; color: var(--meta); font-size: 12.5px; font-style: italic; }
.forwarded .ic { width: 13px; height: 13px; }
.quote { display: flex; align-items: stretch; width: 100%; min-width: 150px; margin-bottom: 4px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--ink) 7%, transparent); border-left: 3.5px solid hsl(var(--h) 55% 45%); }
.quote > span { flex: 1; min-width: 0; padding: 4px 8px; display: flex; flex-direction: column; font-size: 13.5px; color: var(--ink-2); }
.msg.mine .quote > span { color: color-mix(in srgb, var(--mine-ink) 72%, transparent); }
.quote b { color: hsl(var(--h) 55% 40%); font-size: 13px; }
:root[data-theme="dark"] .quote b { color: hsl(var(--h) 65% 70%); }
.quote img { width: 48px; height: 48px; object-fit: cover; flex: none; }
.msg-menu { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; border-radius: 50%; display: none; align-items: center; justify-content: center; color: var(--ink-2); background: color-mix(in srgb, var(--panel) 80%, transparent); }
.msg-menu .ic { width: 16px; height: 16px; }
@media (hover: hover) { .bubble:hover .msg-menu { display: flex; } }
.reactions { display: flex; gap: 3px; margin: -5px 8px 2px; padding: 1px 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: 13.5px; position: relative; z-index: 1; }
.reactions span.mine { font-weight: 700; }
.retry { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--danger); font-size: 12.5px; }
.retry .ic { width: 14px; height: 14px; }
.search-hit { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; padding: 8px 12px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
.search-hit strong { font-size: 13px; color: var(--accent); }
.to-bottom { position: absolute; right: 14px; bottom: 76px; width: 42px; height: 42px; border-radius: 50%; background: var(--panel); color: var(--ink-2); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); z-index: 3; }
.to-bottom span:empty { display: none; }
.to-bottom span { position: absolute; top: -6px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent-fill); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }

/* Message content */
.media { position: relative; display: block; width: 280px; max-width: 100%; margin: -3px -6px 3px; width: calc(min(280px, 66vw) + 12px); max-width: calc(100% + 12px); border-radius: 11px; overflow: hidden; background: rgba(0, 0, 0, .08); min-height: 100px; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; max-height: 420px; }
.msg.image .bubble, .msg.video .bubble { padding: 6px; }
.play-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: flex; align-items: center; justify-content: center; }
.dur-badge { position: absolute; left: 8px; bottom: 6px; padding: 1px 6px; border-radius: 9px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11.5px; }
.upload-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.upload-ring svg { position: absolute; inset: 3px; transform: rotate(-90deg); fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 3; }
.upload-ring .value { stroke: #fff; transition: stroke-dasharray .2s; stroke-linecap: round; }
.upload-ring.small { position: relative; left: auto; top: auto; transform: none; width: 34px; height: 34px; flex: none; }
.pending-media img, .pending-media video { filter: brightness(.8); }
.file-card { display: flex; flex-direction: column; width: 100%; min-width: 240px; max-width: 320px; margin-bottom: 2px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.file-card > .ic { display: none; }
.pdf-thumb { width: 100%; max-height: 150px; object-fit: cover; object-position: top; }
.file-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; }
.file-icon { width: 38px; height: 38px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--accent-fill); color: #fff; }
.file-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.file-text strong { font-weight: 600; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.file-text small { color: var(--meta); font-size: 12.5px; }
.file-row > .ic { width: 20px; height: 20px; color: var(--meta); }
.voice { display: flex; align-items: center; gap: 8px; min-width: 230px; max-width: 290px; padding: 3px 0 0; }
.voice-play { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--accent-fill); color: #fff; display: flex; align-items: center; justify-content: center; }
.voice-play .ic { width: 18px; height: 18px; }
.voice-track { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.voice-track input { width: 100%; accent-color: var(--accent-fill); height: 16px; margin: 0; }
.voice-track small { color: var(--meta); font-size: 11.5px; height: 12px; }
.voice-speed { flex: none; padding: 2px 7px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 9%, transparent); font-size: 12px; font-weight: 700; }
.msg.audio .bubble > .meta { margin-top: -12px; }
.location-card { display: flex; align-items: center; gap: 10px; min-width: 230px; padding: 4px; color: inherit; text-decoration: none; }
.map-art { width: 56px; height: 56px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #c62f2f; background: linear-gradient(135deg, #cfe4c5 0 40%, #bcd9ea 40% 70%, #eadfbc 70%); }
.contact-card { min-width: 230px; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.contact-top { display: flex; align-items: center; gap: 10px; }
.poll { display: flex; flex-direction: column; gap: 6px; min-width: min(280px, 66vw); padding: 2px; }
.poll > strong { font-size: 15.5px; font-weight: 600; }
.poll > small { color: var(--meta); font-size: 12.5px; }
.poll-option { display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; align-items: center; width: 100%; padding: 4px 0; }
.poll-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--meta); display: flex; align-items: center; justify-content: center; color: #fff; }
.poll-option.mine .poll-check { background: var(--accent-fill); border-color: var(--accent-fill); }
.poll-check .ic { width: 13px; height: 13px; stroke-width: 3; }
.poll-label { display: flex; justify-content: space-between; gap: 8px; }
.poll-bar { grid-column: 2; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.poll-bar i { display: block; height: 100%; background: var(--accent-fill); transition: width .25s; }
.poll-votes { color: var(--accent); font-size: 13.5px; font-weight: 600; padding: 6px 0 12px; text-align: center; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); margin-top: 2px; }
.vote-group { margin-bottom: 14px; }
.vote-group h4 { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-bottom: 6px; }
.vote-group h4 small { color: var(--ink-3); margin-left: auto; }
.vote-group h4 .ic { width: 16px; height: 16px; color: var(--read); }
.vote-name { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.vote-name small { margin-left: auto; color: var(--ink-3); }

/* Composer */
.composer-area { flex: none; padding-bottom: var(--safe-bottom); position: relative; }
.composer { display: flex; align-items: flex-end; gap: 6px; padding: 6px 8px 8px; }
.composer-box { flex: 1; min-width: 0; display: flex; align-items: flex-end; background: var(--panel); border-radius: 24px; box-shadow: var(--shadow); padding: 3px; }
.composer-box .icon-btn { width: 42px; height: 42px; }
#composer-input { flex: 1; min-width: 0; max-height: 132px; padding: 10px 2px; border: 0; background: none; outline: none; resize: none; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.35; }
.send-round { width: 48px; height: 48px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-fill); color: #fff; box-shadow: var(--shadow); transition: transform .08s; }
:root[data-theme="dark"] .send-round { color: #1b1409; }
.send-round:active { transform: scale(.94); }
.composer-note { padding: 14px 16px; text-align: center; color: var(--ink-2); background: var(--panel); border-top: 1px solid var(--line); }
.reply-bar { display: flex; align-items: center; gap: 8px; margin: 6px 8px 0; padding: 7px 6px 7px 10px; background: var(--panel); border-radius: 14px; box-shadow: var(--shadow); }
.reply-accent { width: 4px; align-self: stretch; border-radius: 2px; background: var(--accent-fill); }
.reply-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; color: var(--ink-2); }
.reply-text b { color: var(--accent); font-size: 13px; }
.mention-list { margin: 6px 8px 0; background: var(--panel); border-radius: 14px; box-shadow: var(--shadow); max-height: 220px; overflow-y: auto; }
.mention-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; }
.mention-list small { color: var(--ink-3); }
.recording { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--panel); border-top: 1px solid var(--line); }
.rec-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--danger); animation: blink 1s infinite; }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.rec-hint { flex: 1; color: var(--ink-2); font-size: 14px; }
.emoji-panel { height: 260px; overflow-y: auto; background: var(--panel); border-top: 1px solid var(--line); }
.emoji-grid { padding: 6px 10px 14px; }
.emoji-grid h4 { padding: 8px 2px 4px; font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.emoji-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
.emoji-row button { height: 40px; font-size: 24px; text-align: center; border-radius: 8px; }
.emoji-row button:hover { background: var(--panel-2); }

/* Overlays */
#overlays { position: relative; z-index: 40; }
.overlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.scrim { position: absolute; inset: 0; background: rgba(8, 9, 20, .5); opacity: 0; transition: opacity .15s; }
.overlay.in .scrim { opacity: 1; }
.sheet { position: relative; width: 100%; max-height: 88dvh; display: flex; flex-direction: column; background: var(--panel); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-lg); transform: translateY(24px); opacity: 0; transition: transform .17s ease, opacity .15s; padding-bottom: var(--safe-bottom); }
.overlay.in .sheet { transform: none; opacity: 1; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 4px 18px; flex: none; }
.sheet-head h2 { font-size: 18px; font-weight: 600; }
.sheet-body { padding: 8px 16px 16px; overflow-y: auto; }
.sheet.tall { height: 80dvh; }
.sheet.tall .sheet-body { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 10px; }
.forward-list { flex: 1; overflow-y: auto; margin: 0 -16px; }
.sheet.dialog { max-width: 420px; }
.sheet.dialog .sheet-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.sheet.dialog h3 { font-size: 18px; font-weight: 600; }
.sheet.dialog .center { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.sheet.action-sheet .sheet-body { padding: 8px 0 8px; }
.menu-list { display: flex; flex-direction: column; }
.menu-item { display: flex; align-items: center; gap: 16px; width: 100%; padding: 13px 20px; font-size: 16px; }
.menu-item:hover { background: var(--panel-2); }
.menu-item .ic { color: var(--ink-2); }
.menu-item.danger, .menu-item.danger .ic { color: var(--danger); }
.menu-title { padding: 10px 20px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.react-bar { display: flex; justify-content: space-between; gap: 2px; padding: 4px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.react-bar button { width: 44px; height: 44px; font-size: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: transform .1s; }
.react-bar button:hover { transform: scale(1.15); background: var(--panel-2); }
.react-bar button.on { background: var(--accent-soft); }
.attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 16px 8px; padding: 8px 0 12px; }
.attach-grid button { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 13px; text-align: center; color: var(--ink-2); }
.att-ic { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.att-ic.a { background: #7c4dcc; } .att-ic.b { background: #d9486e; } .att-ic.c { background: #4167d9; } .att-ic.d { background: #d97b1f; } .att-ic.e { background: #1f9d55; } .att-ic.f { background: #1a93b8; } .att-ic.g { background: #b8921a; }
.preview-stage { display: flex; justify-content: center; align-items: center; background: #000; border-radius: 14px; overflow: hidden; min-height: 180px; }
.preview-stage img, .preview-stage video { max-height: 55dvh; }
.file-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px; color: #fff; text-align: center; }
.caption-row { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.caption-row .send-round { margin-left: auto; }
.link-box { padding: 12px; border-radius: 12px; background: var(--panel-2); font-size: 14px; word-break: break-all; margin: 10px 0; }
.sheet-body > .btn + .btn { margin-top: 8px; }
.mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: .5px; }
.recovery { columns: 2; line-height: 1.9; }
.steps { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.safety-number { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; padding: 14px; border-radius: 12px; background: var(--panel-2); font-family: ui-monospace, Consolas, monospace; font-size: 15px; text-align: center; }

.toast { position: fixed; left: 50%; bottom: calc(92px + var(--safe-bottom)); transform: translate(-50%, 16px); max-width: min(92vw, 440px); padding: 10px 16px; border-radius: 14px; background: #2a2c45; color: #fff; font-size: 14.5px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 70; box-shadow: var(--shadow-lg); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Info pages */
.info-page .page-body { background: var(--panel-2); }
.info-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px 16px; background: var(--panel); margin-bottom: 8px; text-align: center; }
.info-hero h2 { font-size: 22px; font-weight: 600; margin-top: 6px; }
.info-hero p { color: var(--ink-2); }
.info-actions { display: flex; gap: 10px; margin-top: 12px; }
.info-actions button { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--line); color: var(--accent); font-size: 13px; font-weight: 500; }
.info-actions button:hover { background: var(--accent-soft); }
.info-card { padding: 12px 16px; background: var(--panel); margin-bottom: 8px; display: block; width: 100%; }
.info-card small { color: var(--ink-2); }
.info-card.tappable { cursor: pointer; }
.gallery-strip { display: flex; gap: 4px; padding: 0 16px 12px; overflow-x: auto; background: var(--panel); margin-bottom: 8px; scrollbar-width: none; }
.gallery-strip button { width: 76px; height: 76px; flex: none; border-radius: 8px; overflow: hidden; background: var(--panel-2); display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.gallery-strip img { width: 100%; height: 100%; object-fit: cover; }
[data-gallery] .list-label { background: var(--panel); }
.role-tag { padding: 2px 8px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; flex: none; }
.info-page .list-label { background: var(--panel); }

/* Media viewer */
.viewer-overlay, .status-overlay { background: #000; z-index: 45; }
.viewer { position: absolute; inset: 0; display: flex; flex-direction: column; color: #fff; }
.viewer .icon-btn { color: #fff; }
.viewer-bar { display: flex; align-items: center; gap: 8px; padding: calc(6px + var(--safe-top)) 8px 6px; background: rgba(0, 0, 0, .6); z-index: 2; }
.viewer-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.viewer-title small { color: #bbb; }
.viewer-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pinch-zoom; }
.viewer-stage > img, .viewer-stage > video { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .15s; }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 2; }
.viewer-nav.prev { left: 10px; } .viewer-nav.next { right: 10px; }
.viewer-pdf { display: flex; flex-direction: column; align-items: center; gap: 10px; max-height: 100%; overflow: auto; padding: 8px; }
.pdf-controls { display: flex; align-items: center; gap: 10px; color: #fff; }
.pdf-controls .btn { min-height: 36px; color: #fff; background: rgba(255, 255, 255, .14); border: 0; }

/* Status */
.status-ring { position: relative; display: flex; padding: 3px; border-radius: 50%; background: conic-gradient(var(--accent-fill), var(--gold), var(--accent-fill)); }
.status-ring .av { border: 2px solid var(--panel); }
.status-ring.seen { background: var(--line); }
.add-status { position: relative; display: flex; }
.add-status i { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-fill); color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid var(--panel); }
.add-status i .ic { width: 13px; height: 13px; stroke-width: 3; }
.status-view { position: absolute; inset: 0; color: #fff; display: flex; flex-direction: column; }
.status-bars { display: flex; gap: 3px; padding: calc(8px + var(--safe-top)) 8px 4px; position: relative; z-index: 3; }
.status-bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.status-bars i { display: block; height: 100%; width: 0; background: #fff; }
.status-head { display: flex; align-items: center; gap: 8px; padding: 4px 8px; position: relative; z-index: 3; }
.status-head .icon-btn { color: #fff; }
.status-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.status-who small { color: #ddd; }
.status-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.status-stage img, .status-stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
.status-text { padding: 40px 28px; font-size: clamp(22px, 5vw, 34px); line-height: 1.3; text-align: center; font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; }
.status-caption { position: absolute; left: 0; right: 0; bottom: calc(64px + var(--safe-bottom)); padding: 10px 20px; text-align: center; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); z-index: 2; }
.status-caption:empty { display: none; }
.status-views { position: absolute; left: 50%; bottom: calc(18px + var(--safe-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; color: #fff; z-index: 4; padding: 8px 14px; }
.status-zone { position: absolute; top: 90px; bottom: 70px; width: 33%; z-index: 2; }
.status-zone.prev { left: 0; } .status-zone.next { right: 0; width: 67%; }
.status-input { width: 100%; height: 220px; padding: 20px; border: 0; border-radius: 14px; color: #fff; font: inherit; font-size: 22px; text-align: center; resize: none; outline: none; }
.status-input::placeholder { color: rgba(255, 255, 255, .6); }
.color-row { display: flex; gap: 8px; justify-content: center; margin: 12px 0; }
.color-row button { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); }

/* Calls */
.call { position: fixed; inset: 0; z-index: 42; background: radial-gradient(120% 80% at 50% 0, #2a2c4d, #0d0e1a 70%); color: #fff; display: flex; flex-direction: column; height: var(--app-height); overflow: hidden; user-select: none; -webkit-user-select: none; }
body.call-sheet #overlays { z-index: 44; }
.call .icon-btn { color: #fff; }
/* Remote people: one full-screen tile in a one-to-one call, a grid of named tiles in a group */
.call-stage { position: absolute; inset: 0; display: grid; gap: 4px; grid-template-columns: 1fr; grid-auto-rows: 1fr; transition: opacity .35s; }
.call:not(.tiled):not(.has-remote-video) .call-stage { opacity: 0; pointer-events: none; }
.call.tiled .call-stage { inset: calc(62px + var(--safe-top)) 8px calc(104px + var(--safe-bottom)); gap: 8px; }
.call-stage[data-count="2"] { grid-template-rows: 1fr 1fr; }
.call-stage[data-count="3"], .call-stage[data-count="4"], .call-stage[data-count="5"], .call-stage[data-count="6"], .call-stage[data-count="7"] { grid-template-columns: 1fr 1fr; }
.call-tile { position: relative; overflow: hidden; min-height: 0; transition: box-shadow .2s; }
.call.tiled .call-tile { border-radius: 18px; background: rgba(255, 255, 255, .07); }
.call-tile video { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.call-tile.no-video video { opacity: 0; }
.tile-face { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.call.tiled .call-tile.no-video .tile-face { display: flex; }
.tile-face .av { box-shadow: 0 0 0 calc(var(--lvl, 0) * 16px) rgba(52, 199, 89, .3); transition: box-shadow .12s; }
.tile-label { position: absolute; left: 8px; bottom: 8px; display: none; align-items: center; gap: 5px; max-width: calc(100% - 16px); padding: 3px 9px; border-radius: 10px; background: rgba(0, 0, 0, .5); font-size: 13px; }
.call.tiled .tile-label { display: flex; }
.tile-label b { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tile-label .ic { width: 14px; height: 14px; }
.tile-mic, .tile-hand, .tile-weak { display: none; }
.call-tile.muted .tile-mic, .call-tile.hand .tile-hand { display: inline-flex; }
.call-tile.weak .tile-weak { display: inline-flex; color: #ffcf5c; }
.call.tiled .call-tile.speaking, .call.tiled .call-tile.active-speaker { box-shadow: inset 0 0 0 3px #34c759; }
.call-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .5), transparent 24%, transparent 68%, rgba(0, 0, 0, .6)); opacity: 0; transition: opacity .3s; }
.call.has-remote-video:not(.tiled) .call-shade { opacity: 1; }
.call.has-local-video:not(.has-remote-video):not(.tiled) .call-shade { opacity: 1; background: rgba(8, 9, 20, .45); }
.call-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: calc(8px + var(--safe-top)) 8px 8px; z-index: 3; transition: opacity .3s; }
.call.phase-incoming .call-top .icon-btn, .call.phase-calling [data-k=add] { visibility: hidden; }
.call-lock { display: flex; align-items: center; gap: 5px; font-size: 13px; color: rgba(255, 255, 255, .8); }
.call-lock .ic { width: 14px; height: 14px; }
.call.has-remote-video .call-lock, .call.tiled .call-lock { visibility: hidden; }
/* Name, status and the voice animation */
.call-identity { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; z-index: 2; padding: 16px; pointer-events: none; transition: opacity .3s; }
.call-identity button { pointer-events: auto; }
.call-names h2 { font-size: 27px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.call-names p { margin-top: 4px; color: rgba(255, 255, 255, .8); font-size: 16px; font-variant-numeric: tabular-nums; min-height: 1.3em; }
.call-face { position: relative; border-radius: 50%; margin-bottom: 10px; }
.call-face .av { position: relative; z-index: 1; box-shadow: 0 0 0 calc(var(--lvl, 0) * 20px) rgba(255, 255, 255, .16), 0 0 0 calc(var(--lvl, 0) * 40px) rgba(255, 255, 255, .06); transition: box-shadow .12s; }
.call.phase-calling .call-face::before, .call.phase-ringing .call-face::before, .call.phase-incoming .call-face::before,
.call.phase-calling .call-face::after, .call.phase-ringing .call-face::after, .call.phase-incoming .call-face::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); animation: callripple 2.2s ease-out infinite; }
.call.phase-calling .call-face::after, .call.phase-ringing .call-face::after, .call.phase-incoming .call-face::after { animation-delay: 1.1s; }
.call.phase-connecting .call-face .av, .call.phase-reconnecting .call-face .av { animation: callbreathe 1.6s ease-in-out infinite; }
@keyframes callripple { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
@keyframes callbreathe { 50% { opacity: .55; } }
.call.has-remote-video .call-identity, .call.tiled .call-identity { position: absolute; z-index: 4; top: calc(10px + var(--safe-top)); left: 56px; right: 56px; padding: 0; gap: 6px; justify-content: flex-start; }
.call.has-remote-video .call-face, .call.tiled .call-face { display: none; }
.call.has-remote-video .call-names h2, .call.tiled .call-names h2 { font-size: 17px; white-space: nowrap; }
.call.has-remote-video .call-names p, .call.tiled .call-names p { font-size: 14px; margin-top: 0; }
.call-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.call .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .4); color: #fff; font-size: 13px; font-weight: 500; backdrop-filter: blur(6px); animation: chipin .2s ease-out; }
.call .chip .ic { width: 15px; height: 15px; }
.call .chip.warn { background: rgba(255, 176, 32, .24); color: #ffdc94; }
.call .chip.gold { background: rgba(255, 200, 102, .24); color: #ffe2a8; }
.call .chip.action { background: #fff; color: #17192e; font-weight: 600; cursor: pointer; }
.call .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes chipin { from { opacity: 0; transform: translateY(-4px); } }
/* Your own camera: full screen until the other video arrives, then a draggable corner */
.call-local-wrap { position: absolute; z-index: 4; width: 108px; height: 152px; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); touch-action: none; transition: top .25s, left .25s, right .25s, bottom .25s, width .3s, height .3s, border-radius .3s; }
.call-local-wrap.dragging { transition: none; cursor: grabbing; }
.corner-tr { top: calc(62px + var(--safe-top)); right: 12px; }
.corner-tl { top: calc(62px + var(--safe-top)); left: 12px; }
.corner-br { bottom: calc(112px + var(--safe-bottom)); right: 12px; }
.corner-bl { bottom: calc(112px + var(--safe-bottom)); left: 12px; }
.call.controls-hidden .corner-br, .call.controls-hidden .corner-bl { bottom: calc(16px + var(--safe-bottom)); }
.call-local { width: 100%; height: 100%; object-fit: cover; }
.call-local.front { transform: scaleX(-1); }
.local-flip { position: absolute; right: 6px; bottom: 6px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); color: #fff; }
.local-flip .ic { width: 18px; height: 18px; }
.call.has-local-video:not(.has-remote-video):not(.tiled) .call-local-wrap { inset: 0; width: 100%; height: 100%; border-radius: 0; z-index: 0; box-shadow: none; }
.call.has-local-video:not(.has-remote-video):not(.tiled) .local-flip { z-index: 3; position: fixed; right: 16px; bottom: calc(118px + var(--safe-bottom)); width: 46px; height: 46px; }
/* Floating reactions */
.call-float { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.float-emoji { position: absolute; bottom: 130px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 42px; animation: floatup 3.2s ease-out forwards; }
.float-emoji small { font-size: 11px; padding: 1px 7px; border-radius: 8px; background: rgba(0, 0, 0, .5); }
@keyframes floatup { 0% { transform: translateY(0) scale(.5); opacity: 0; } 12% { opacity: 1; transform: translateY(-24px) scale(1.15); } 100% { transform: translateY(-52vh) scale(1); opacity: 0; } }
/* Control bar: the red end button sits apart from the rest */
.call-controls { position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin: auto auto calc(18px + var(--safe-bottom)); padding: 12px 16px; border-radius: 34px; transition: opacity .3s; }
.call:not(.phase-incoming) .call-controls { background: rgba(20, 21, 38, .62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: calc(100% - 24px); }
.call.controls-hidden .call-controls, .call.controls-hidden .call-top, .call.controls-hidden .call-identity { opacity: 0; }
.controls-gap { width: 8px; }
.round { width: 56px; height: 56px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); color: #fff; transition: transform .08s, background .2s; }
.round:hover { background: rgba(255, 255, 255, .24); }
.round:active { transform: scale(.92); }
.round .ic { width: 24px; height: 24px; }
.round.off { background: #fff; color: #17192e; }
.round.on { background: var(--gold); color: #17192e; }
.round.decline { background: #e5383b; }
.round.decline:hover { background: #f04a4d; }
.round.accept { background: #1f9d55; animation: ringpulse 1.2s infinite; }
.round.accept-soft { background: #1f9d55; }
.round.big { width: 70px; height: 70px; }
.round.big .ic { width: 30px; height: 30px; }
@keyframes ringpulse { 50% { box-shadow: 0 0 0 16px rgba(31, 157, 85, .22); } }
.call.phase-incoming .call-controls { flex-direction: column; width: 100%; padding-bottom: 8px; }
.incoming-actions { display: flex; justify-content: space-around; align-items: flex-end; width: 100%; max-width: 380px; }
.call-act { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.call-act small { font-size: 13px; color: rgba(255, 255, 255, .85); }
.pill-btn { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; font-size: 14px; }
.pill-btn .ic { width: 18px; height: 18px; }
@media (max-width: 440px) { .call-controls { gap: 10px; padding: 10px 14px; } .round { width: 52px; height: 52px; } .controls-gap { width: 4px; } }
@media (max-width: 360px) { .call-controls { gap: 7px; padding: 9px 10px; } .round { width: 47px; height: 47px; } .controls-gap { width: 0; } }
/* Minimised: a small floating window you can drag; tap it to return */
.call-mini { display: none; }
.call.minimized { background: transparent; pointer-events: none; }
.call.minimized > :not(.call-mini):not(.call-stage) { display: none; }
.call.minimized .call-stage { position: fixed; inset: auto; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.call.minimized .call-mini { display: flex; position: fixed; right: 12px; top: calc(70px + var(--safe-top)); z-index: 1; align-items: center; gap: 10px; width: 236px; padding: 8px 8px 8px 10px; border-radius: 22px; background: #1f9d55; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); pointer-events: auto; touch-action: none; cursor: pointer; transition: left .25s, top .25s; animation: miniin .25s ease-out; }
.call-mini.dragging { transition: none; cursor: grabbing; }
.call-mini video { display: none; }
.mini-face { flex: none; }
.mini-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mini-text strong { font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mini-text small { font-size: 12.5px; opacity: .9; font-variant-numeric: tabular-nums; }
.call-mini b { display: flex; flex: none; width: 38px; height: 38px; border-radius: 50%; align-items: center; justify-content: center; background: #e5383b; }
.call-mini b .ic { width: 20px; height: 20px; }
.call.minimized .call-mini.with-video { width: 124px; height: 184px; padding: 0; flex-direction: column; justify-content: flex-end; background: #000; overflow: hidden; border-radius: 18px; }
.call-mini.with-video video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.call-mini.with-video .mini-face, .call-mini.with-video .mini-text strong { display: none; }
.call-mini.with-video .mini-text { position: absolute; top: 6px; left: 8px; text-shadow: 0 1px 3px #000; }
.call-mini.with-video b { position: relative; margin-bottom: 10px; }
@keyframes miniin { from { opacity: 0; transform: scale(.85); } }
/* After a call: the result, with Call again */
.call.ended { align-items: center; justify-content: center; animation: miniin .2s ease-out; }
.call-end-card { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 360px; padding: 24px; text-align: center; }
.call-end-card h2 { margin-top: 12px; font-size: 24px; font-weight: 600; }
.end-title { font-size: 17px; color: rgba(255, 255, 255, .92); }
.end-detail { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .65); }
.end-actions { display: flex; gap: 28px; margin-top: 28px; }
/* Sheets opened from a call */
.call-react-row { display: flex; justify-content: space-around; padding: 6px 8px 10px; border-bottom: 1px solid var(--line); }
.call-react-row button { width: 46px; height: 46px; border-radius: 50%; font-size: 28px; transition: transform .1s; }
.call-react-row button:hover { background: var(--panel-2); }
.call-react-row button:active { transform: scale(1.25); }
.call-search { display: block; margin: 0 16px 8px; width: calc(100% - 32px); }
.call-people .menu-item > span, .person-line { flex: 1; min-width: 0; text-align: left; }
.person-line { display: flex; flex-direction: column; }
.person-line small { font-size: 12.5px; color: var(--ink-3); }
.menu-item.static { cursor: default; }
.menu-item .av { flex: none; }
.hand-mark { font-size: 18px; }
/* App lock: above the app and its sheets, below a ringing call screen (calls can be answered while locked) */
.applock { position: fixed; inset: 0; z-index: 41; display: flex; align-items: center; justify-content: center; padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom)); background: var(--bg); overflow-y: auto; }
.applock-box { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 320px; text-align: center; }
.applock-box img { border-radius: 14px; }
.applock-box h2 { font-size: 20px; font-weight: 600; }
.applock-text { color: var(--ink-2); min-height: 2.6em; font-size: 14px; }
.pin-dots { display: flex; gap: 14px; margin: 6px 0 12px; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink-3); transition: background .1s; }
.pin-dots i.on { background: var(--accent); border-color: var(--accent); }
.pin-dots.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.pin-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px; }
.pin-pad button { width: 72px; height: 72px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); font-size: 26px; font-weight: 500; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.pin-pad button:active { background: var(--panel-2); }
.pin-pad button[data-pad="none"] { visibility: hidden; }
.pin-pad .ic { width: 26px; height: 26px; }
.applock-actions { display: flex; gap: 10px; margin-top: 14px; }

/* Link previews and meeting links inside messages */
.link-card { display: flex; flex-direction: column; margin: 2px 0 6px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--ink) 6%, transparent); color: inherit; text-decoration: none; border-left: 3px solid var(--accent); max-width: 340px; }
.link-card[hidden] { display: none; }
.link-card img { width: 100%; max-height: 180px; object-fit: cover; background: var(--panel-2); }
.lc-text { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; min-width: 0; }
.lc-text small { font-size: 12px; color: var(--ink-3); text-transform: lowercase; }
.lc-text b { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc-text span { font-size: 13px; color: var(--ink-2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meet-card { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: inherit; text-decoration: none; min-width: 230px; }
.meet-card > .ic { width: 26px; height: 26px; color: var(--accent); flex: none; }
.meet-card > span:not(.btn) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.meet-card small { color: var(--ink-2); font-size: 12.5px; }
/* Send later */
.sched-bar { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; margin: 0 auto 4px; border-radius: 14px; background: var(--panel); color: var(--ink-2); font-size: 13px; box-shadow: var(--shadow); flex: none; }
.sched-bar[hidden] { display: none; }
.sched-bar .ic { width: 15px; height: 15px; }
.sched-row { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.sched-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sched-text small { color: var(--accent); font-weight: 600; font-size: 12.5px; }
.sched-text span { overflow-wrap: anywhere; }
/* Drag files onto a chat */
.drop-zone { position: absolute; inset: 64px 12px 12px; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 3px dashed var(--accent); border-radius: 18px; background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--accent); font-weight: 600; font-size: 18px; pointer-events: none; }
.drop-zone[hidden] { display: none; }
.drop-zone .ic { width: 40px; height: 40px; }

/* Meetings in the Calls tab */
.meet-box { padding: 12px 16px 4px; }
.meet-box-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.meet-join { display: flex; gap: 8px; flex: 1 1 220px; min-width: 0; }
.meet-join .input { padding: 9px 12px; font-size: 15px; }
.meet-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.meet-row:first-child { margin-top: 8px; }
.meet-row .row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.meet-row strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.meet-row small { color: var(--ink-2); font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.meet-row .live { color: var(--online); font-weight: 600; }
.check-row small { display: block; color: var(--ink-3); font-size: 12.5px; }
.check-row input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.fine { font-size: 13px; color: var(--ink-3); }
.call-row { min-height: 66px; }
.call-row strong.missed { color: var(--danger); }
.call-dir { display: flex; align-items: center; gap: 5px; }
.call-dir .ic { width: 15px; height: 15px; color: var(--online); }
.call-dir.missed .ic { color: var(--danger); }

/* Laptop and desktop */
@media (min-width: 900px) {
  .rail { display: flex; flex-direction: column; justify-content: space-between; width: 68px; flex: none; padding: 12px 0; background: var(--navy); color: #c9cadb; }
  :root[data-theme="dark"] .rail { background: #0b0c18; }
  .rail-top, .rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .rail-top img { border-radius: 12px; margin-bottom: 10px; }
  .rail .nav-btn { flex: none; width: 52px; height: 48px; padding: 0; justify-content: center; border-radius: 14px; color: #c9cadb; }
  .rail .nav-btn small { display: none; }
  .rail .nav-ic { width: 44px; }
  .rail .nav-btn:hover { background: rgba(255, 255, 255, .08); }
  .rail .nav-btn.on { color: #fff; }
  .rail .nav-btn.on .nav-ic { background: rgba(255, 200, 102, .2); color: var(--gold); }
  .rail-me { padding: 4px; border-radius: 50%; }
  .bottom-nav { display: none; }
  .side { flex: 0 0 clamp(320px, 30vw, 420px); border-right: 1px solid var(--line); }
  .main { position: relative; inset: auto; flex: 1; min-width: 0; height: auto; transform: none; visibility: visible; transition: none; }
  .back { display: none !important; }
  .fab { display: none; }
  .fab.show { display: flex; }
  .chat-list { padding-bottom: 8px; }
  .welcome { display: flex; flex: 1; align-items: center; justify-content: center; background: var(--panel-2); border-bottom: 5px solid var(--accent-fill); }
  .welcome-inner { max-width: 440px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ink-2); padding: 20px; }
  .welcome-inner img { border-radius: 26px; }
  .welcome-inner h2 { color: var(--ink); font-size: 26px; font-weight: 600; }
  .welcome-note { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 18px; color: var(--ink-3); }
  .welcome-note .ic { width: 14px; height: 14px; flex: none; }
  .overlay { align-items: center; }
  .sheet { width: 480px; max-width: 92vw; max-height: 82vh; border-radius: 18px; padding-bottom: 0; }
  .sheet.action-sheet { width: 340px; }
  .sheet.popover { position: fixed; width: 260px; border-radius: 14px; }
  .sheet.popover .sheet-body { padding: 6px 0; }
  .overlay:has(.popover) .scrim { background: transparent; }
  .menu-item { padding: 10px 16px; font-size: 15px; }
  .react-bar { padding: 2px 6px 6px; }
  .react-bar button { width: 34px; height: 34px; font-size: 21px; }
  .sheet.send-preview { width: 560px; }
  .bubble { max-width: min(68%, 620px); }
  .toast { bottom: 90px; }
  .call-local-wrap { width: 240px; height: 150px; }
  .call-stage[data-count="2"] { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; }
  .call-stage[data-count="5"], .call-stage[data-count="6"], .call-stage[data-count="7"] { grid-template-columns: 1fr 1fr 1fr; }
  .call-tile video { object-fit: contain; }
  .call.tiled .call-tile video { object-fit: cover; }
  .call.tiled .call-stage { inset: 66px 16px 110px; }
  .call.minimized .call-mini { top: auto; bottom: 24px; right: 24px; }
  .call.minimized .call-mini.with-video { width: 280px; height: 170px; }
  .fixed-page { left: auto; right: 0; width: 420px; box-shadow: var(--shadow-lg); }
  .main > .page { position: absolute; }
  .emoji-panel { position: absolute; left: 12px; bottom: 100%; width: 380px; height: 340px; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); margin-bottom: 4px; }
}
@media (min-width: 1200px) {
  .details { display: block; position: relative; flex: 0 0 380px; border-left: 1px solid var(--line); background: var(--panel); overflow: hidden; }
  .details[hidden] { display: none !important; }
}
@media (pointer: coarse) {
  .bubble { user-select: none; -webkit-user-select: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Static pages share this stylesheet. */
.legal-page { height: 100%; overflow: auto; padding: 32px 20px; max-width: 720px; margin: 0 auto; }