:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Arial", sans-serif;
  color: #17231e;
  background: #eef3f0;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --green: #1d427a;
  --green-dark: #17365f;
  --green-soft: #e8effb;
  --ink: #17231e;
  --muted: #84918b;
  --line: #e9eeeb;
  --panel: #fff;
  --canvas: #f5f8f6;
  --bubble-in: #fff;
  --bubble-out: #e5ecf7;
  --brand-rail: #16345f;
  --shadow: 0 20px 55px rgba(31, 59, 44, .10);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #eaf0ed; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.app-shell {
  width: min(1600px, calc(100vw - 44px)); height: min(960px, calc(100vh - 44px)); min-height: 620px;
  margin: 22px auto; display: grid; grid-template-columns: 82px 340px minmax(0, 1fr); overflow: hidden;
  border: 1px solid rgba(255,255,255,.85); border-radius: 22px; background: var(--panel); box-shadow: var(--shadow);
}
.rail { display:flex; flex-direction:column; align-items:center; padding: 21px 12px 17px; color:#d4e4dc; background:var(--brand-rail); }
.brand-mark { width:45px; height:45px; display:grid; place-items:center; padding:0; overflow:hidden; border:0; border-radius:15px; background:#07145c; cursor:pointer; box-shadow:0 4px 14px #0c2b1f55; }
.brand-mark img { width:100%; height:100%; object-fit:cover; }
.rail-nav { display:flex; flex-direction:column; gap:10px; width:100%; margin-top:39px; }
.rail-button { position:relative; width:56px; height:54px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; margin:0 auto; border:0; border-radius:16px; color:#a8c3b6; background:transparent; cursor:pointer; transition:.18s ease; }
.rail-button:hover { color:#fff; background:#ffffff12; }
.rail-button.active { color:#fff; background:#ffffff18; }
.rail-button.active::before { position:absolute; left:-13px; top:14px; bottom:14px; width:3px; border-radius:0 4px 4px 0; background:#66e29d; content:""; }
.rail-button svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.rail-label { font-size:9px; font-weight:700; letter-spacing:.01em; }
.rail-spacer { flex:1; }
.settings-nav { margin-bottom:16px; }
.my-avatar { position:relative; width:40px; height:40px; border:2px solid #a8e8c4; border-radius:50%; background:#f4b887; color:#653f28; font-size:11px; font-weight:800; cursor:pointer; }
.presence-dot { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border:2px solid #17382d; border-radius:50%; background:#4bd58a; }
.side-panel { min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--line); background:var(--panel); }
.side-head { display:flex; align-items:center; justify-content:space-between; padding:27px 23px 17px; }
.side-head h1 { margin:0; font-size:22px; letter-spacing:-.045em; font-weight:800; }
.side-head p { margin:5px 0 0; color:var(--muted); font-size:11px; font-weight:600; }
.icon-button { width:37px; height:37px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; color:#63746b; background:var(--panel); cursor:pointer; transition:.16s; }
.icon-button:hover { border-color:#b9e8ce; color:var(--green-dark); background:var(--green-soft); }
.icon-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.search-box { display:flex; align-items:center; gap:10px; margin:0 19px 13px; padding:0 12px; height:42px; border:1px solid transparent; border-radius:13px; background:var(--canvas); color:#93a099; }
.search-box:focus-within { border-color:#bce9cf; background:var(--panel); box-shadow:0 0 0 3px #24b97812; }
.search-box svg { flex:0 0 auto; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.search-box input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size:12px; }
.search-box input::placeholder { color:#9aa69f; }
.filter-row { display:flex; gap:5px; padding:0 20px 12px; border-bottom:1px solid var(--line); }
.filter-chip { padding:7px 12px; border:0; border-radius:9px; color:#88958e; background:transparent; font-size:10px; font-weight:800; cursor:pointer; }
.filter-chip.active { color:#14895d; background:var(--green-soft); }
.side-scroll { flex:1; overflow:auto; padding:8px 10px 12px; }
.empty-mini { padding:34px 15px; color:#99a59e; text-align:center; font-size:10px; line-height:1.8; }
.contact-side-label { padding:13px 12px 5px; color:#9ba79f; font-size:8px; font-weight:800; letter-spacing:.12em; }
.second-label { margin-top:8px; }
.saved-side-card { display:flex; flex-direction:column; align-items:flex-start; gap:5px; margin:10px; padding:17px; border:1px solid #e8eeea; border-radius:16px; background:var(--canvas); }
.saved-side-card strong { font-size:11px; }
.saved-side-card span,.side-footnote { color:#8b9891; font-size:9px; line-height:1.7; }
.saved-star { width:34px; height:34px; display:grid; place-items:center; margin-bottom:5px; border-radius:11px; color:#238f62; background:#dff4e8; }
.side-footnote { padding:3px 21px; }
.settings-side { padding:5px 13px; }
.settings-side-item { padding:12px; border-radius:11px; color:#839188; font-size:10px; font-weight:700; }
.settings-side-item.active { color:#188b5d; background:var(--green-soft); }
.mobile-back { display:none; }
.chat-row { width:100%; display:flex; gap:11px; align-items:center; padding:12px 10px; border:0; border-radius:15px; text-align:left; background:transparent; cursor:pointer; transition:.15s; }
.chat-row:hover { background:var(--canvas); }
.chat-row.selected { background:#eaf8f0; }
.avatar { position:relative; flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; border-radius:15px; color:#395046; font-size:12px; font-weight:800; letter-spacing:-.03em; }
.avatar.round { border-radius:50%; }
.avatar.peach { background:#ffe0ca; color:#925d3f; }
.avatar.lilac { background:#e9ddff; color:#7155a1; }
.avatar.blue { background:#d8eaff; color:#4670a0; }
.avatar.yellow { background:#fff0be; color:#97782c; }
.avatar.mint { background:#d8f3e2; color:#378160; }
.avatar.pink { background:#ffdeeb; color:#a45878; }
.chat-meta { min-width:0; flex:1; }
.chat-line { display:flex; align-items:center; justify-content:space-between; gap:7px; }
.chat-name { overflow:hidden; color:var(--ink); font-size:12px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.chat-time { flex:0 0 auto; color:#9aa69f; font-size:9px; font-weight:700; }
.chat-preview { display:block; overflow:hidden; margin-top:5px; color:#89968f; font-size:10px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.chat-preview .sent-check { color:#2ab778; font-weight:900; }
.unread { min-width:18px; height:18px; display:inline-grid; place-items:center; padding:0 5px; border-radius:8px; color:white; background:var(--green); font-size:9px; font-weight:800; }
.online-dot { position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border:2px solid var(--panel); border-radius:50%; background:#45cf83; }
.side-foot { display:flex; align-items:center; gap:8px; padding:13px 20px 15px; border-top:1px solid var(--line); color:#91a098; font-size:9px; font-weight:700; }
.connection-dot { width:7px; height:7px; border-radius:50%; background:#49ce83; box-shadow:0 0 0 3px #49ce8318; }
.main-panel { min-width:0; display:flex; flex-direction:column; position:relative; overflow:hidden; background:var(--canvas); }
.startup-state { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px; color:#84918b; text-align:center; }
.startup-state img { width:96px; height:96px; border-radius:26px; object-fit:cover; box-shadow:0 12px 36px #102c6b30; }
.startup-state strong { margin-top:4px; color:#17382d; font-size:20px; letter-spacing:-.04em; }
.startup-state span { font-size:13px; }
.chat-top { height:82px; flex:0 0 auto; display:flex; align-items:center; padding:0 27px; border-bottom:1px solid var(--line); background:var(--panel); }
.chat-top .avatar { width:43px; height:43px; border-radius:14px; }
.person-info { min-width:0; margin-left:12px; }
.person-info h2 { margin:0; font-size:14px; font-weight:800; letter-spacing:-.025em; }
.person-info p { display:flex; align-items:center; gap:6px; margin:5px 0 0; color:#8c9992; font-size:10px; font-weight:600; }
.top-spacer { flex:1; }
.header-actions { display:flex; gap:8px; }
.secure-tag { display:flex; align-items:center; gap:6px; margin-right:10px; padding:8px 10px; border:1px solid #e2eee7; border-radius:11px; color:#78877e; background:#fbfdfb; font-size:9px; font-weight:800; }
.secure-tag svg { width:13px; height:13px; fill:none; stroke:#45b87d; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.message-scroll { flex:1; min-height:0; overflow-y:auto; padding:27px clamp(20px, 6vw, 86px) 25px; scroll-behavior:smooth; }
.day-divider { display:flex; justify-content:center; margin:0 0 23px; }
.day-divider span { padding:7px 11px; border:1px solid #e8eeea; border-radius:10px; color:#8c9992; background:#fff; font-size:9px; font-weight:800; }
.message-row { display:flex; align-items:flex-end; gap:9px; margin:0 0 12px; }
.message-row.mine { justify-content:flex-end; }
.message-row .avatar { width:29px; height:29px; border-radius:10px; font-size:8px; }
.message-stack { max-width:min(72%, 510px); }
.message-sender { margin:0 0 5px 2px; color:#89968f; font-size:9px; font-weight:800; }
.bubble { position:relative; padding:11px 14px 9px; border:1px solid #edf0ee; border-radius:5px 17px 17px 17px; color:#35423b; background:var(--bubble-in); box-shadow:0 2px 6px #17382d05; font-size:12px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.quote-box { margin:-1px 0 8px; padding:6px 9px; border-left:2px solid #41bf80; border-radius:0 7px 7px 0; color:#7b8d82; background:#edf8f1; font-size:10px; line-height:1.5; }
.mine .bubble { border-color:#d4efdf; border-radius:17px 5px 17px 17px; color:#234133; background:var(--bubble-out); }
.bubble-meta { display:flex; justify-content:flex-end; align-items:center; gap:5px; margin-top:3px; color:#9ba79f; font-size:8px; font-weight:700; }
.bubble-meta .ticks { color:#23b978; font-size:11px; letter-spacing:-3px; padding-right:3px; }
.bubble-meta .ticks.read { color:#2686dc; }
.message-text { white-space:pre-wrap; }
.attachment-item { display:grid; gap:6px; min-width:min(250px,100%); margin-top:7px; }
.attachment-preview { display:block; max-width:260px; max-height:260px; overflow:hidden; border-radius:12px; background:#e9eef5; }
.attachment-preview img { display:block; max-width:100%; max-height:260px; object-fit:contain; }
.attachment-video { display:block; width:min(340px,100%); max-height:280px; border-radius:12px; background:#111827; }
.attachment-audio { display:block; width:min(320px,100%); }
.attachment-file { display:flex; align-items:center; gap:9px; max-width:320px; padding:8px 10px; border:1px solid #dce5ef; border-radius:12px; color:var(--ink); text-decoration:none; background:var(--panel); }
.attachment-file-icon { width:31px; height:31px; display:grid; place-items:center; flex:0 0 auto; border-radius:10px; color:var(--brand-rail); background:#e8eef8; font-size:16px; }
.attachment-file-info { min-width:0; display:grid; gap:3px; }
.attachment-file-info strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.attachment-file-info small { color:var(--muted); font-size:8px; }
.message-tools { display:flex; gap:4px; margin-top:4px; opacity:0; transition:.15s; }
.message-row:hover .message-tools, .message-row:focus-within .message-tools { opacity:1; }
.message-row.mine .message-tools { justify-content:flex-end; }
.mini-action { padding:4px 7px; border:1px solid #e8eeea; border-radius:8px; color:#839188; background:var(--panel); font-size:9px; cursor:pointer; }
.mini-action:hover, .mini-action.saved { color:#19895b; background:var(--green-soft); }
.reaction-list { display:flex; flex-wrap:wrap; gap:4px; }
.reaction-pill { display:inline-flex; align-items:center; gap:4px; margin:5px 0 0 3px; padding:4px 7px; border:1px solid #caebd8; border-radius:9px; color:#63746a; background:var(--panel); font-size:9px; cursor:pointer; }
.reaction-pill.reacted { border-color:#8ed4a8; color:#167b4d; background:var(--green-soft); }
.message-highlight .bubble { animation:message-glow 1.8s ease-out; }
@keyframes message-glow { 0%,35% { box-shadow:0 0 0 4px #ffad6440, 0 4px 20px #e4893240; } 100% { box-shadow:0 2px 6px #17382d05; } }
.pinned-banner { display:flex; align-items:center; gap:10px; padding:9px clamp(18px, 4vw, 56px); border-bottom:1px solid var(--line); background:var(--panel); }
.pin-mark { width:27px; height:27px; display:grid; place-items:center; border-radius:9px; color:#b56a29; background:#fff3e2; font-size:17px; }
.pinned-copy { min-width:0; flex:1; display:grid; gap:2px; border:0; color:var(--ink); background:transparent; text-align:left; cursor:pointer; }
.pinned-copy strong { font-size:9px; }
.pinned-copy span { overflow:hidden; color:var(--muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.pin-remove { width:26px; height:26px; border:0; border-radius:8px; color:var(--muted); background:transparent; font-size:17px; cursor:pointer; }
.message-search-panel { z-index:2; padding:12px clamp(18px,4vw,56px); border-bottom:1px solid var(--line); background:var(--panel); box-shadow:0 5px 15px #18352610; }
.message-search-panel form { display:flex; align-items:center; gap:8px; }
.message-search-panel input { min-width:0; flex:1; height:34px; padding:0 11px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--canvas); font:inherit; font-size:10px; outline:none; }
.message-search-panel input:focus { border-color:#72c99a; }
.message-search-results { display:grid; max-height:190px; overflow:auto; margin-top:7px; }
.search-result { display:flex; justify-content:space-between; gap:14px; padding:8px 5px; border:0; border-top:1px solid var(--line); color:var(--ink); background:transparent; text-align:left; cursor:pointer; }
.search-result span { min-width:0; display:grid; gap:3px; }
.search-result strong { font-size:9px; }
.search-result small { overflow:hidden; color:var(--muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.search-result time,.search-empty { flex:0 0 auto; color:var(--muted); font-size:8px; }
.dark .reaction-pill { border-color:#365b43; color:#bfd0c4; }
.dark .reaction-pill.reacted { border-color:#4f9a68; color:#b2edc4; }
.dark .pinned-banner,.dark .message-search-panel { border-color:var(--line); }
.dark .pin-mark { color:#ffc07d; background:#3b2c1c; }
.compose-wrap { flex:0 0 auto; padding:0 clamp(17px, 4vw, 56px) 17px; }
.emoji-picker { position:absolute; right:70px; bottom:89px; z-index:5; width:min(360px, calc(100% - 32px)); max-height:min(68vh,520px); overflow-y:auto; padding:13px; border:1px solid #e3ece6; border-radius:17px; background:var(--panel); box-shadow:0 16px 42px #17382d24; }
.emoji-picker[hidden] { display:none; }
.emoji-picker-head { display:flex; align-items:center; justify-content:space-between; padding:2px 3px 10px; }
.emoji-picker-head strong { display:block; color:var(--ink); font-size:11px; }
.emoji-picker-head span:not(.emoji-pack-badge) { display:block; margin-top:3px; color:#93a098; font-size:8px; font-weight:700; }
.emoji-pack-badge { width:22px; height:22px; display:grid; place-items:center; border-radius:8px; color:#19895b; background:var(--green-soft); font-size:9px; font-weight:800; }
.emoji-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
.emoji-option { min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 3px 7px; border:1px solid transparent; border-radius:12px; color:#718077; background:transparent; font-size:8px; font-weight:800; cursor:pointer; transition:.15s; }
.emoji-option:hover { transform:translateY(-2px); border-color:#d5eedf; color:#18895b; background:#f2fbf5; }
.emoji-preview { width:44px; height:40px; display:grid; place-items:center; }
.emoji-preview .emoji-inline { width:38px; height:38px; }
.emoji-inline { width:1.45em; height:1.45em; display:inline-block; vertical-align:-.34em; margin:0 .04em; overflow:visible; filter:drop-shadow(0 1px 1px #315a4325); }
.emoji-picker-foot { padding:9px 3px 1px; border-top:1px solid var(--line); color:#98a49d; font-size:8px; text-align:center; }
.compose-card { border:1px solid #e4ebe6; border-radius:18px; background:var(--panel); box-shadow:0 5px 20px #253f3010; }
.reply-strip { display:none; align-items:center; justify-content:space-between; gap:10px; margin:0 13px; padding:10px 5px 8px; border-bottom:1px solid var(--line); color:#708078; font-size:10px; }
.reply-strip.visible { display:flex; }
.reply-strip strong { color:#299269; }
.reply-close { border:0; color:#99a59e; background:transparent; font-size:16px; cursor:pointer; }
.compose-input-row { display:flex; align-items:flex-end; gap:9px; padding:11px 12px 10px 17px; }
.compose-input-row textarea { flex:1; min-height:27px; max-height:120px; resize:none; padding:5px 0; border:0; outline:0; color:var(--ink); background:transparent; font-size:12px; line-height:1.5; }
.compose-input-row textarea::placeholder { color:#a1aaa5; }
.compose-tools { display:flex; align-items:center; gap:5px; }
.compose-tool { width:33px; height:33px; display:grid; place-items:center; border:0; border-radius:11px; color:#94a199; background:transparent; cursor:pointer; }
.compose-tool:hover { color:#19895b; background:var(--green-soft); }
.voice-record-btn.recording { color:#fff; background:#e45858; box-shadow:0 0 0 4px #e4585820; animation:voice-pulse 1.2s ease-in-out infinite; }
@keyframes voice-pulse { 50% { box-shadow:0 0 0 8px #e4585810; } }
.compose-tool svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.send-button { width:37px; height:37px; display:grid; place-items:center; border:0; border-radius:13px; color:#fff; background:var(--green); cursor:pointer; box-shadow:0 4px 10px #1d427a35; transition:.15s; }
.send-button:hover { transform:translateY(-1px); background:var(--green-dark); }
.send-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.compose-hint { padding:0 18px 10px; color:#a0aaa4; font-size:8px; }
.compose-hint { display:flex; justify-content:space-between; gap:10px; }
.compose-hint span:first-child:not(:empty) { color:var(--green-dark); font-weight:700; }
.file-picker-input { display:none !important; }
.paperclip-icon { font-size:15px; line-height:1; }
.attachment-drafts { display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px 0; }
.draft-attachment { display:flex; align-items:center; gap:8px; max-width:100%; padding:6px 9px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--canvas); font-size:9px; }
.draft-attachment span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.draft-attachment button { flex:0 0 auto; border:0; color:var(--muted); background:transparent; font-size:16px; cursor:pointer; }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100%; padding:40px; text-align:center; }
.empty-art { width:75px; height:75px; display:grid; place-items:center; border-radius:25px; color:#219968; background:#e4f7ed; font-size:31px; }
.empty-state h2 { margin:19px 0 7px; font-size:17px; }
.empty-state p { max-width:330px; margin:0; color:#89968f; font-size:11px; line-height:1.7; }
.content-page { min-height:100%; overflow:auto; padding:34px clamp(22px,5vw,70px); }
.page-eyebrow { color:#24976a; font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.page-title { margin:7px 0 7px; font-size:25px; letter-spacing:-.05em; }
.page-subtitle { margin:0; color:#8a9790; font-size:11px; line-height:1.7; }
.contact-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:13px; margin-top:25px; }
.contact-card { display:flex; align-items:center; gap:12px; padding:15px; border:1px solid var(--line); border-radius:17px; background:var(--panel); }
.contact-card .avatar { width:43px; height:43px; }
.contact-copy { flex:1; min-width:0; }
.contact-copy strong { display:block; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.contact-copy span { display:block; margin-top:4px; color:#8c9992; font-size:9px; }
.contact-card .icon-button { flex:0 0 auto; width:32px; height:32px; }
.saved-list { display:grid; gap:10px; margin-top:24px; max-width:700px; }
.saved-card { padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.saved-card-head { display:flex; align-items:center; gap:9px; color:#7b8981; font-size:9px; font-weight:800; }
.saved-card-head .avatar { width:28px; height:28px; border-radius:9px; font-size:8px; }
.saved-card p { margin:11px 0 10px; color:#35423b; font-size:12px; line-height:1.65; }
.saved-card button { padding:0; border:0; color:#219768; background:none; font-size:9px; font-weight:800; cursor:pointer; }
.settings-layout { display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(230px, .8fr); gap:16px; max-width:930px; margin-top:22px; }
.settings-stack { display:grid; align-content:start; gap:12px; }
.settings-card { padding:17px 19px; border:1px solid var(--line); border-radius:17px; background:var(--panel); }
.settings-card h3 { margin:0 0 13px; font-size:11px; }
.profile-photo-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; margin-top:13px; }
.profile-photo-tile,.profile-photo-add { position:relative; min-height:88px; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:var(--canvas); }
.profile-photo-tile img { display:block; width:100%; height:100%; min-height:88px; object-fit:cover; }
.profile-photo-tile button { position:absolute; top:5px; right:5px; width:25px; height:25px; border:0; border-radius:50%; color:#fff; background:#12213dcc; font-size:18px; cursor:pointer; }
.profile-photo-add { display:grid; align-content:center; justify-items:center; gap:3px; padding:8px; border-style:dashed; color:var(--muted); cursor:pointer; }
.profile-photo-add span { color:var(--brand-rail); font-size:22px; }
.profile-photo-add strong { color:var(--ink); font-size:9px; }
.profile-photo-add small { font-size:8px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line); }
.setting-row:first-of-type { border-top:0; }
.setting-copy strong { display:block; font-size:10px; }
.setting-copy span { display:block; margin-top:4px; color:#8b9891; font-size:9px; line-height:1.5; }
.toggle { position:relative; flex:0 0 auto; width:39px; height:23px; border:0; border-radius:20px; background:#d8e0db; cursor:pointer; transition:.2s; }
.toggle::after { position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:white; content:""; transition:.2s; box-shadow:0 1px 4px #0002; }
.toggle.on { background:#28b978; }
.toggle.on::after { left:19px; }
.profile-card { display:flex; align-items:center; gap:12px; padding:16px; border-radius:16px; color:#fff; background:linear-gradient(135deg,#1c5943,#17382d); }
.profile-card .my-avatar { width:47px; height:47px; }
.profile-card strong { display:block; font-size:12px; }
.profile-card span { display:block; margin-top:4px; color:#b5d6c5; font-size:9px; }
.callout { padding:16px; border:1px solid #d6efdf; border-radius:16px; background:#effaf3; }
.callout strong { display:block; color:#25845d; font-size:10px; }
.callout p { margin:6px 0 0; color:#748a7d; font-size:9px; line-height:1.6; }
.toast-region { position:fixed; right:28px; bottom:25px; z-index:10; display:grid; gap:8px; pointer-events:none; }
.toast { padding:12px 16px; border:1px solid #dbebe1; border-radius:13px; color:#254333; background:#fff; box-shadow:0 10px 30px #17382d20; font-size:11px; font-weight:700; animation:toast-in .2s ease-out; }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.dark {
  --ink:#e2ece6; --muted:#9aaba1; --line:#2c3d34; --panel:#1b2b23; --canvas:#14221b; --bubble-in:#24382d; --bubble-out:#214936; --green-soft:#1d3e2e; --shadow:0 20px 55px #0005;
  color:#e2ece6; background:#0d1913;
}
.dark .app-shell { border-color:#31433a; }
.dark .rail { background:#10271d; }
.dark .chat-row.selected { background:#203b2c; }
.dark .chat-name,.dark .bubble,.dark .saved-card p { color:#e0ebe4; }
.dark .bubble { border-color:#30463a; }
.dark .quote-box { color:#bdcfc2; background:#1b3023; }
.dark .mine .bubble { border-color:#2c5940; color:#dff1e5; }
.dark .secure-tag,.dark .day-divider span { border-color:#2c3d34; color:#b4c2ba; background:#1d3026; }
.dark .search-box { background:#14221b; }
.dark .search-box:focus-within { background:#1b2b23; }
.dark .contact-card,.dark .saved-card,.dark .settings-card,.dark .compose-card { border-color:#2c3d34; }
.dark .callout { border-color:#365c44; background:#203b2c; }
.dark .callout strong { color:#85d6a8; }
.dark .callout p { color:#b3c9ba; }
.dark .emoji-picker { border-color:#33463a; }
.dark .emoji-option:hover { border-color:#365d43; color:#a0e4ba; background:#203b2c; }
.dark .toast { border-color:#355343; color:#e0ebe4; background:#1b2b23; }
.dark .icon-button { border-color:#33443b; color:#b7c5bc; background:#1b2b23; }
.dark .icon-button:hover { background:#203b2c; }
.dark .side-panel,.dark .chat-top { border-color:#2c3d34; }
.dark .contact-copy span,.dark .page-subtitle { color:#a1b0a7; }
.dark .filter-chip.active { color:#a0e4ba; }
.dark .side-foot { border-color:#2c3d34; }
@media (max-width: 900px) {
  .app-shell { width:100vw; height:100dvh; min-height:0; margin:0; grid-template-columns:66px 300px minmax(0,1fr); border:0; border-radius:0; }
  .rail { padding-left:5px; padding-right:5px; }
  .rail-button { width:52px; }
  .message-scroll { padding-left:22px; padding-right:22px; }
  .secure-tag { display:none; }
}
@media (max-width: 650px) {
  body { background:var(--panel); }
  .app-shell { grid-template-columns:58px minmax(0,1fr); }
  .rail { padding:14px 3px; }
  .brand-mark { width:40px; height:40px; padding:6px; }
  .rail-nav { margin-top:24px; }
  .rail-button { width:48px; height:50px; }
  .rail-label { display:none; }
  .rail-button.active::before { left:-3px; }
  .my-avatar { width:35px; height:35px; font-size:9px; }
  .side-panel { display:none; }
  .app-shell[data-view="chats"] .main-panel { display:none; }
  .app-shell[data-view="chats"] .side-panel { display:flex; grid-column:2; border-right:0; }
  .app-shell[data-view="chats"].mobile-chat-open .main-panel { display:flex; grid-column:2; }
  .app-shell[data-view="chats"].mobile-chat-open .side-panel { display:none; }
  .mobile-back { display:grid; margin-right:10px; }
  .app-shell[data-view="contacts"] .side-panel { display:none; }
  .app-shell[data-view="channels"] .side-panel { display:none; }
  .app-shell[data-view="contacts"] .main-panel,.app-shell[data-view="saved"] .main-panel,.app-shell[data-view="settings"] .main-panel,.app-shell[data-view="channels"] .main-panel { grid-column:2; }
  .chat-top { height:70px; padding:0 15px; }
  .header-actions .icon-button:nth-child(2) { display:none; }
  .message-scroll { padding:20px 15px; }
  .message-stack { max-width:84%; }
  .message-tools { opacity:1; }
  .message-tools { flex-wrap:wrap; }
  .compose-wrap { padding:0 10px 10px; }
  .compose-hint { display:none; }
  .content-page { padding:25px 17px; }
  .settings-layout { grid-template-columns:1fr; }
  .side-head { padding:20px 17px 14px; }
  .contact-grid { grid-template-columns:1fr; }
}

:root[data-accent="gold"] {
  --green:#bd9842; --green-dark:#8e6f2b; --green-soft:#f7f0df; --bubble-out:#f5eedc; --brand-rail:#514425;
}
:root[data-accent="slate"] {
  --green:#526d91; --green-dark:#3f5678; --green-soft:#e8eef6; --bubble-out:#e5ecf7; --brand-rail:#243d60;
}
:root[data-accent="lagoon"] {
  --green:#197d87; --green-dark:#155e68; --green-soft:#e3f3f1; --bubble-out:#e0f1ef; --brand-rail:#164d62;
}
.rail { background:var(--brand-rail); }
.rail-button.active::before { background:var(--green); }
.presence-dot { border-color:var(--brand-rail); }
.icon-button:hover { border-color:var(--green-soft); color:var(--green-dark); background:var(--green-soft); }
.filter-chip.active,.settings-side-item.active { color:var(--green-dark); background:var(--green-soft); }
.chat-row.selected { background:var(--green-soft); }
.filter-chip.active { color:var(--green-dark); }
.mine .bubble { border-color:var(--green-soft); }
.search-box:focus-within { border-color:var(--green-soft); box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 9%, transparent); }
.page-eyebrow,.empty-art { color:var(--green-dark); }
.empty-art { background:var(--green-soft); }
.mini-action:hover,.mini-action.saved,.compose-tool:hover { color:var(--green-dark); background:var(--green-soft); }
.emoji-pack-badge { color:var(--green-dark); background:var(--green-soft); }
.toggle.on { background:var(--green); }
.profile-card { background:linear-gradient(135deg,#234d84,var(--brand-rail)); }
.callout { border-color:var(--green-soft); background:var(--green-soft); }
.callout strong { color:var(--green-dark); }
.chat-top .avatar { flex:0 0 auto; }
.message-row .avatar { flex:0 0 auto; }
.bubble { font-size:13px; }
.message-sender { margin:0 0 5px 4px; color:#89968f; font-size:10px; font-weight:700; }
.chat-empty { min-height:100%; }
.side-foot.online .connection-dot { background:#38b978; }
.side-foot.connecting .connection-dot { background:#ef9c48; }
.side-foot.offline .connection-dot { background:#b9c2bd; }
#app-shell[hidden],.auth-root[hidden] { display:none !important; }
.auth-root { position:fixed; inset:0; z-index:20; overflow:auto; background:radial-gradient(circle at 50% 15%,#e7eef9 0,#f3f6fb 36%,#eef2f6 100%); color:#17231e; }
.auth-page { min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.auth-card { width:min(100%,440px); padding:28px; border:1px solid #ffffffcc; border-radius:25px; background:#ffffffed; box-shadow:0 28px 90px #10294c1c; }
.auth-brand { display:flex; align-items:center; gap:12px; margin-bottom:27px; }
.auth-brand img { width:55px; height:55px; border-radius:17px; object-fit:cover; box-shadow:0 8px 22px #10294c20; }
.auth-brand strong { display:block; color:#1b3054; font-size:19px; letter-spacing:-.04em; }
.auth-brand span { display:block; margin-top:3px; color:#8b969f; font-size:10px; }
.auth-intro h1 { margin:0; color:#1b3054; font-size:25px; letter-spacing:-.05em; }
.auth-intro p { margin:7px 0 19px; color:#7c8994; font-size:12px; line-height:1.6; }
.auth-switch { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:4px; border-radius:13px; background:#f0f3f7; }
.auth-switch button { padding:10px; border:0; border-radius:10px; color:#7b8792; background:transparent; font-size:11px; font-weight:800; cursor:pointer; }
.auth-switch button.active { color:var(--green-dark); background:#fff; box-shadow:0 2px 8px #1a34521a; }
.auth-form { display:grid; gap:13px; margin-top:18px; }
.auth-form label,.server-config label,.setting-field { display:grid; gap:6px; color:#596775; font-size:10px; font-weight:800; }
.auth-form input,.server-config input,.setting-field input { width:100%; min-height:44px; padding:0 13px; border:1px solid #e1e7ee; border-radius:12px; outline:0; color:#1b2d40; background:#fff; font-size:12px; font-weight:500; }
.auth-form input:focus,.server-config input:focus,.setting-field input:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.primary-button { min-height:43px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 17px; border:0; border-radius:12px; color:#fff; background:var(--green); font-size:11px; font-weight:800; cursor:pointer; transition:transform .15s,background .15s; }
.primary-button:hover { transform:translateY(-1px); background:var(--green-dark); }
.primary-button:disabled { opacity:.65; cursor:wait; transform:none; }
.primary-button.small { min-height:34px; padding:0 12px; border-radius:10px; font-size:10px; }
.auth-error { min-height:16px; color:#bd4538; font-size:10px; line-height:1.5; }
.auth-success { margin:15px 0 0; padding:12px 13px; border:1px solid #bfd6c8; border-radius:12px; color:#215137; background:#edf7f0; font-size:11px; font-weight:700; line-height:1.6; }
.auth-legal { margin-top:17px; color:#8d98a2; font-size:9px; line-height:1.6; text-align:center; }
.server-config { display:grid; gap:7px; margin-top:18px; padding-top:16px; border-top:1px solid #e9edf2; }
.server-input-row { display:flex; gap:7px; }
.server-input-row input { min-width:0; }
.server-save { flex:0 0 auto; padding:0 11px; border:0; border-radius:11px; color:var(--green-dark); background:var(--green-soft); font-size:10px; font-weight:800; cursor:pointer; }
.server-config small { color:#89959f; font-size:9px; line-height:1.5; }
.auth-colors { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:17px; color:#87929d; font-size:9px; }
.apk-download { display:block; margin-top:12px; color:var(--green-dark); font-size:11px; font-weight:800; text-align:center; text-decoration:none; }
.apk-download:hover { text-decoration:underline; }
.color-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.color-choice { display:inline-flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; color:#65717d; background:var(--panel); font-size:9px; font-weight:800; cursor:pointer; }
.color-choice i { width:18px; height:18px; display:block; border:1px solid #1b305422; border-radius:50%; background:var(--swatch); }
.color-choice.selected { border-color:var(--green); color:var(--green-dark); background:var(--green-soft); }
.welcome-state { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px; text-align:center; }
.welcome-state img { width:112px; height:112px; margin-bottom:25px; border-radius:30px; object-fit:cover; box-shadow:0 14px 42px #142c511c; }
.welcome-state h1 { margin:8px 0; color:#1b3054; font-size:clamp(26px,4vw,40px); letter-spacing:-.06em; line-height:1.08; }
.welcome-state p { max-width:330px; margin:0 0 18px; color:#86919a; font-size:12px; line-height:1.7; }
.settings-field { margin-bottom:12px; }
.settings-field input { margin-top:1px; }
.profile-logo { width:48px; height:48px; flex:0 0 auto; border-radius:15px; object-fit:cover; }
.logout-button { width:100%; min-height:40px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid #f0d9d6; border-radius:12px; color:#b64f45; background:#fff8f6; font-size:10px; font-weight:800; cursor:pointer; }
.logout-button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.toast.error { border-color:#f0c9c5; color:#9d3832; background:#fff6f5; }
@media (max-width:650px) {
  .auth-card { padding:22px 19px; border-radius:21px; }
  .auth-page { align-items:start; padding-top:max(18px,env(safe-area-inset-top)); }
  .welcome-state img { width:92px; height:92px; border-radius:25px; }
  .color-grid { gap:6px; }
  .color-choice { padding:7px 8px; }
}

/* Account photos, 24-hour stories, and cross-device continuation. */
.my-avatar img { position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.profile-photo-gallery { grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); }
.profile-photo-tile { min-height:116px; aspect-ratio:1; border-color:color-mix(in srgb,var(--green) 16%,var(--line)); }
.profile-photo-tile img { min-height:116px; }
.profile-photo-tile.is-primary { outline:2px solid #8968ff; outline-offset:1px; }
.profile-photo-tile .profile-photo-select-main,.profile-photo-main-badge { position:absolute; right:5px; bottom:5px; left:5px; width:auto; min-height:25px; padding:5px 6px; border:0; border-radius:9px; color:#fff; background:#21163fdb; font-size:9px; font-weight:800; text-align:center; cursor:pointer; }
.profile-photo-main-badge { display:block; color:#fff; background:#6b52d9ed; cursor:default; }
.profile-photo-tile [data-delete-profile-photo] { top:5px; right:5px; }
.private-media-unavailable { opacity:.3; }
.profile-story-upload-status { display:inline-block; margin-left:9px; color:var(--muted); font-size:10px; }
.profile-stories-list { display:grid; gap:8px; margin-top:14px; }
.profile-story-card { position:relative; display:flex; min-width:0; border:1px solid var(--line); border-radius:13px; background:var(--canvas); }
.profile-story-open { display:flex; align-items:center; gap:11px; min-width:0; flex:1; padding:8px; border:0; color:var(--ink); background:transparent; text-align:left; cursor:pointer; }
.profile-story-open>img,.profile-story-video-thumb { width:58px; height:58px; flex:0 0 58px; overflow:hidden; border-radius:11px; object-fit:cover; }
.profile-story-video-thumb { display:grid; place-content:center; gap:3px; color:#fff; background:linear-gradient(145deg,#40246a,#8968ff); text-align:center; }
.profile-story-video-thumb>span { font-size:18px; }
.profile-story-video-thumb small { font-size:8px; }
.profile-story-card-copy { display:grid; gap:5px; min-width:0; }
.profile-story-card-copy strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.profile-story-card-copy small { color:var(--muted); font-size:9px; }
.profile-story-delete { align-self:center; width:30px; height:30px; margin:0 8px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:var(--panel); font-size:17px; cursor:pointer; }
.profile-story-empty { margin:12px 0 0; padding:14px; border-radius:12px; color:var(--muted); background:var(--canvas); font-size:10px; line-height:1.5; }
.profile-overlay,.story-viewer-overlay { position:fixed; z-index:110; inset:0; display:grid; place-items:center; padding:22px; background:#101321a8; backdrop-filter:blur(8px); }
.profile-overlay[hidden],.story-viewer-overlay[hidden] { display:none!important; }
.profile-dialog { width:min(760px,100%); max-height:min(900px,92dvh); overflow:auto; padding:24px; border:1px solid var(--line); border-radius:24px; color:var(--ink); background:var(--panel); box-shadow:0 30px 90px #11182b45; }
.profile-dialog-head,.profile-public-summary,.profile-section-heading { display:flex; align-items:center; gap:14px; }
.profile-dialog-head { justify-content:space-between; padding-bottom:15px; border-bottom:1px solid var(--line); }
.profile-dialog-head h2 { margin:5px 0 0; font-size:22px; letter-spacing:-.04em; }
.profile-dialog-head .page-eyebrow { color:#7459e7; }
.profile-public-summary { padding:17px 0 20px; }
.profile-public-avatar { width:74px; height:74px; flex:0 0 74px; display:grid; place-items:center; overflow:hidden; border:2px solid var(--line); border-radius:23px; color:#fff; background:var(--brand-rail); font-size:21px; font-weight:800; }
.profile-public-avatar.has-stories { border:3px solid #ff8273; box-shadow:0 0 0 3px #8d67ff35; }
.profile-public-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-public-copy { min-width:0; flex:1; display:grid; gap:4px; }
.profile-public-copy strong { font-size:16px; }
.profile-public-copy span,.profile-public-copy small { color:var(--muted); font-size:10px; }
.profile-public-section { margin-top:4px; padding-top:17px; border-top:1px solid var(--line); }
.profile-section-heading { justify-content:space-between; margin-bottom:12px; }
.profile-section-heading h3 { margin:0; font-size:14px; }
.profile-section-heading p { margin:4px 0 0; color:var(--muted); font-size:9px; }
.profile-section-count { min-width:35px; padding:6px 9px; border-radius:10px; color:#6850ce; background:#8968ff19; font-size:10px; font-weight:900; text-align:center; }
.profile-public-stories { display:flex; flex-wrap:wrap; gap:12px; min-height:76px; }
.profile-public-story { width:76px; display:grid; justify-items:center; gap:6px; padding:0; border:0; color:var(--ink); background:transparent; font-size:9px; cursor:pointer; }
.profile-public-story img,.profile-public-story .profile-story-video-thumb { width:66px; height:66px; border:2px solid #ff8273; border-radius:50%; object-fit:cover; }
.profile-public-story .profile-story-video-thumb { display:grid; border-color:#8968ff; }
.profile-public-story>span:last-child { max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-public-photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:9px; }
.profile-public-photo { position:relative; min-height:112px; aspect-ratio:1; overflow:hidden; border-radius:13px; background:var(--canvas); }
.profile-public-photo img { width:100%; height:100%; object-fit:cover; }
.profile-public-photo.is-primary { outline:2px solid #8968ff; outline-offset:-2px; }
.profile-public-photo span { position:absolute; right:5px; bottom:5px; left:5px; padding:5px; border-radius:8px; color:#fff; background:#21163fda; font-size:9px; font-weight:800; text-align:center; }
.story-viewer-overlay { z-index:120; padding:12px; background:#090a10ed; }
.story-viewer { position:relative; width:min(460px,100%); height:min(880px,94dvh); display:flex; flex-direction:column; overflow:hidden; border:1px solid #ffffff24; border-radius:25px; color:#fff; background:#12131a; box-shadow:0 30px 100px #0009; }
.story-progress { position:absolute; z-index:2; top:12px; right:14px; left:14px; height:3px; overflow:hidden; border-radius:3px; background:#ffffff55; }
.story-progress i { display:block; width:100%; height:100%; transform-origin:left center; background:#fff; animation-name:story-progress; animation-timing-function:linear; }
@keyframes story-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.story-viewer-head { position:absolute; z-index:2; top:24px; right:15px; left:16px; display:flex; align-items:center; justify-content:space-between; }
.story-viewer-person { display:grid; gap:3px; text-shadow:0 1px 5px #0008; }
.story-viewer-person strong { font-size:13px; }
.story-viewer-person small { color:#ffffffb8; font-size:9px; }
.story-viewer-close { width:34px; height:34px; border:1px solid #ffffff55; border-radius:50%; color:#fff; background:#0005; font-size:22px; cursor:pointer; }
.story-viewer-media { flex:1; min-height:0; display:grid; place-items:center; background:#07080b; }
.story-viewer-image,.story-viewer-video { display:block; width:100%; height:100%; object-fit:contain; }
.story-viewer-caption { position:absolute; right:18px; bottom:67px; left:18px; margin:0; padding:9px 12px; border-radius:12px; color:#fff; background:#0007; font-size:13px; line-height:1.4; }
.story-viewer-nav { position:absolute; z-index:1; top:48%; width:36px; height:46px; border:0; border-radius:13px; color:#fff; background:#0003; font-size:32px; cursor:pointer; }
.story-viewer-prev { left:6px; }
.story-viewer-next { right:6px; }
.story-reply-button { position:absolute; right:14px; bottom:12px; left:14px; min-height:40px; border:1px solid #ffffff65; border-radius:22px; color:#fff; background:#171823d9; font-size:11px; font-weight:800; cursor:pointer; }
.continue-here-banner { position:fixed; z-index:90; top:12px; left:50%; width:min(520px,calc(100vw - 24px)); display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:var(--panel); box-shadow:0 12px 40px #0b143d33; transform:translateX(-50%); }
.continue-here-banner[hidden] { display:none!important; }
.continue-here-mark { width:31px; height:31px; flex:0 0 31px; display:grid; place-items:center; border-radius:10px; color:#6751d0; background:#8968ff20; font-size:18px; }
.continue-here-copy { min-width:0; flex:1; display:grid; gap:3px; }
.continue-here-copy strong { font-size:10px; }
.continue-here-copy small { overflow:hidden; color:var(--muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.continue-here-dismiss { width:28px; height:28px; border:0; border-radius:8px; color:var(--muted); background:transparent; font-size:18px; cursor:pointer; }
.continue-here-button { min-height:34px; display:inline-flex; align-items:center; gap:5px; padding:0 9px; border:1px solid #8968ff45; border-radius:11px; color:#674fd0; background:#8968ff12; font-size:10px; font-weight:800; cursor:pointer; white-space:nowrap; }
.continue-here-button:hover { background:#8968ff25; }
.chat-profile-link { padding:0; border:0; color:inherit; background:transparent; font:inherit; text-align:left; cursor:pointer; }
.chat-profile-link:hover { color:var(--green-dark); }
.contact-profile-open,.people-profile-button { min-width:0; flex:1; display:flex; align-items:center; gap:11px; padding:0; border:0; color:var(--ink); background:transparent; text-align:left; cursor:pointer; }
.contact-profile-open .contact-copy { display:block; }
.people-row { display:flex; align-items:center; gap:11px; min-width:0; padding:10px 12px; border-bottom:1px solid var(--line); }
.people-profile-button .avatar { flex:0 0 43px; }
.people-profile-hint { color:var(--muted); font-size:9px; }
.people-row>.primary-button { flex:0 0 auto; }
.dark .profile-dialog,.dark .profile-story-card,.dark .continue-here-banner { border-color:var(--line); background:var(--panel); }
@media (max-width:650px) {
  .profile-photo-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .profile-photo-tile,.profile-photo-add { min-height:0; aspect-ratio:1; }
  .profile-photo-tile img { min-height:0; height:100%; }
  .profile-overlay { padding:0; }
  .profile-dialog { width:100%; height:100dvh; max-height:100dvh; overflow:auto; padding:18px 15px calc(24px + env(safe-area-inset-bottom)); border:0; border-radius:0; }
  .profile-public-summary { flex-wrap:wrap; }
  .profile-public-summary .primary-button { margin-left:auto; }
  .profile-public-photos { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .profile-public-photo { min-height:0; }
  .continue-here-button { width:33px; min-width:33px; justify-content:center; padding:0; font-size:16px; }
  .continue-here-button span { display:none; }
  .continue-here-banner { top:calc(8px + env(safe-area-inset-top)); gap:7px; padding:8px; }
  .continue-here-banner>.primary-button { min-height:32px; padding:0 8px; font-size:9px; }
  .people-row { padding-right:7px; padding-left:7px; }
  .people-profile-hint { display:none; }
  .people-row>.primary-button { min-height:34px; padding:0 9px; font-size:9px; }
}

[hidden] { display:none !important; }
.channel-side-actions { padding:0 19px 9px; }
.channel-avatar { flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; border-radius:15px; color:var(--green-dark); background:var(--green-soft); font-size:22px; font-weight:800; }
.channel-avatar.large { width:48px; height:48px; font-size:24px; }
.channel-start-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:780px; margin:23px 0; }
.channel-start-grid .settings-card { display:grid; align-content:start; gap:12px; }
.channel-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; max-width:780px; }
.channel-card { display:grid; gap:8px; padding:16px; border:1px solid var(--line); border-radius:16px; text-align:left; color:var(--ink); background:#fff; cursor:pointer; }
.channel-card:hover { border-color:#b7cbe9; background:var(--green-soft); }
.channel-card strong { font-size:13px; }
.channel-card span { color:var(--muted); font-size:10px; }
.secondary-button,.danger-button { min-height:36px; padding:0 13px; border:1px solid #dce4ee; border-radius:11px; color:#314e78; background:#f5f8fc; font-size:10px; font-weight:800; cursor:pointer; }
.secondary-button:hover { background:#e9f0fb; }
.danger-button { border-color:#f2d1ce; color:#a0443c; background:#fff5f3; }
.danger-button:hover { background:#ffe8e4; }
.secondary-button.small,.danger-button.small { min-height:33px; padding:0 10px; white-space:nowrap; }
.call-button { color:var(--green-dark); background:var(--green-soft); }
.call-button svg { width:18px; height:18px; }
.channel-feed .channel-message { width:min(100%,760px); max-width:760px; margin:0 auto 14px; padding:17px 18px; border:1px solid var(--line); border-radius:17px; background:var(--panel); box-shadow:0 7px 24px #203b2c0b; }
.channel-message.mine { margin-left:auto; border-color:#d5e2f3; border-radius:14px 14px 4px 14px; background:var(--bubble-out); }
.channel-message strong { color:var(--green-dark); font-size:10px; }
.channel-message p { margin:6px 0; font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.channel-post-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.channel-post-head time { margin-left:auto; color:var(--muted); font-size:9px; }
.channel-post-avatar { width:31px; height:31px; display:grid; place-items:center; border-radius:11px; color:#fff; background:linear-gradient(145deg,#315b92,#172962); font-size:10px; font-weight:800; }
.channel-message .channel-post-head strong { font-size:11px; }
.channel-reader-note { padding:15px 20px max(18px,env(safe-area-inset-bottom)); color:var(--muted); text-align:center; font-size:10px; }
.group-avatar { flex:0 0 auto; display:grid; place-items:center; }
.group-create-page>.icon-button { margin:0 0 20px; }
.group-create-card { display:grid; gap:15px; max-width:620px; margin-top:18px; }
.group-member-heading { display:flex; justify-content:space-between; color:var(--ink); font-size:11px; }
.group-member-heading span { color:var(--muted); font-size:10px; }
.group-member-list { max-height:48vh; overflow:auto; border:1px solid var(--line); border-radius:13px; }
.group-member-option { display:flex; align-items:center; gap:10px; min-height:58px; padding:8px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
.group-member-option:last-child { border-bottom:0; }
.group-member-option input { width:16px; height:16px; accent-color:#2863ad; }
.group-member-copy { display:flex; align-items:center; gap:10px; }
.group-member-copy .avatar { width:36px; height:36px; font-size:11px; }
.group-member-copy strong,.group-member-copy small { display:block; }
.group-member-copy strong { color:var(--ink); font-size:10px; }
.group-member-copy small { margin-top:3px; color:var(--muted); font-size:9px; }
.stream-banner { padding:9px 16px; color:#fff; background:linear-gradient(90deg,#ef7e5c,#f4a080); font-size:11px; font-weight:800; text-align:center; }
.channel-stream-view { position:relative; width:min(100% - 36px,760px); max-height:42vh; margin:13px auto 0; overflow:hidden; border-radius:17px; background:#091452; }
.channel-stream-view video { width:100%; max-height:42vh; display:block; object-fit:contain; background:#091452; }
.stream-caption { position:absolute; left:12px; bottom:10px; padding:6px 9px; border-radius:9px; color:white; background:#0b1438b8; font-size:10px; }
.call-layer { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:18px; background:#09142b99; backdrop-filter:blur(8px); }
.call-layer[hidden] { display:none !important; }
.call-card { position:relative; width:min(520px,100%); padding:28px; border:1px solid #ffffffa8; border-radius:24px; text-align:center; background:#fff; box-shadow:0 28px 90px #0b173844; }
.call-card h2 { margin:8px 0 4px; color:#17365f; font-size:21px; }
.call-card>p { margin:0 0 18px; color:var(--muted); font-size:12px; }
.call-close { position:absolute; top:14px; right:14px; }
.call-status-mark { width:50px; height:50px; display:grid; place-items:center; margin:0 auto 10px; border-radius:16px; color:var(--green-dark); background:var(--green-soft); }
.call-status-mark svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.call-audio-art { width:98px; height:98px; display:grid; place-items:center; margin:17px auto; border-radius:50%; color:white; background:linear-gradient(145deg,#285998,#14235f); font-size:30px; font-weight:800; }
.call-video-grid { position:relative; overflow:hidden; min-height:230px; margin:13px 0; border-radius:16px; background:#111b2c; }
.call-video-grid video { width:100%; height:230px; object-fit:cover; }
.call-video-grid .call-local-video { position:absolute; right:10px; bottom:10px; width:104px; height:76px; border:2px solid white; border-radius:10px; }
.call-actions { display:flex; flex-direction:column; justify-content:center; gap:9px; margin-top:16px; }
.call-device-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.call-device-controls .secondary-button { min-height:36px; }
.call-actions button { min-width:112px; }
@media (max-width:650px) {
  .channel-start-grid { grid-template-columns:1fr; }
  .channel-feed .channel-message { width:100%; padding:14px; }
  .chat-top .secure-tag { display:none; }
  .chat-top .secondary-button.small,.chat-top .danger-button.small,.chat-top .primary-button.small { min-height:30px; padding:0 8px; font-size:9px; }
  .call-card { padding:23px 17px; }
}

@media (max-width:650px) {
  .app-shell[data-view="calls"] .side-panel { display:none; }
  .app-shell[data-view="calls"] .main-panel { grid-column:2; }
}
.call-page-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:16px; margin-top:22px; }
.call-page-grid>.settings-card { min-width:0; padding:20px; }
.call-section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.call-section-heading h3 { margin:0; color:var(--ink); font-size:15px; }
.call-section-heading p { margin:4px 0 0; color:var(--muted); font-size:10px; }
.call-history-list,.call-contact-list { display:flex; flex-direction:column; gap:8px; }
.call-history-row,.call-contact-row { display:flex; align-items:center; gap:12px; min-width:0; padding:11px 0; border-bottom:1px solid var(--line); }
.call-history-row:last-child,.call-contact-row:last-child { border-bottom:0; }
.call-history-avatar { flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#416fa5,#1d427a); font-size:13px; font-weight:800; }
.call-history-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.call-history-copy strong { overflow:hidden; color:var(--ink); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.call-history-copy span { color:var(--muted); font-size:10px; line-height:1.5; }
.call-history-actions { display:flex; flex:0 0 auto; gap:6px; }
.call-history-actions .icon-button svg { width:16px; height:16px; }
.call-history-note { color:var(--muted); font-size:10px; }
.call-history-mini { display:flex; align-items:center; gap:10px; width:100%; padding:9px 8px; border:0; border-radius:12px; background:transparent; text-align:left; cursor:pointer; }
.call-history-mini:hover { background:var(--canvas); }
.call-history-mini .call-history-avatar { flex-basis:36px; width:36px; height:36px; font-size:11px; }
.call-history-mini strong,.call-history-mini small { display:block; }
.call-history-mini strong { color:var(--ink); font-size:11px; }
.call-history-mini small { margin-top:4px; color:var(--muted); font-size:9px; }
.call-card-video { width:min(720px,100%); padding:25px; }
.call-person-heading { display:flex; align-items:center; justify-content:center; gap:12px; margin:0 auto 17px; padding-right:24px; text-align:left; }
.call-person-heading .call-status-mark { flex:0 0 48px; margin:0; }
.call-person-heading h2 { margin:0 0 3px; color:var(--muted); font-size:11px; font-weight:700; }
.call-person-heading strong { display:block; color:#17365f; font-size:17px; }
.call-status-line { margin:4px 0 0 !important; color:var(--muted); font-size:11px !important; }
.call-media-stage { position:relative; display:grid; place-items:center; min-height:310px; margin:10px 0 14px; overflow:hidden; border-radius:23px; color:#fff; background:radial-gradient(ellipse at 50% 42%,#315381,#101a2f 68%); }
.call-media-stage>video:not(.call-local-video) { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; background:#101a2f; }
.call-media-stage video[hidden] { display:none; }
.call-peer-placeholder { position:relative; z-index:0; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.call-peer-placeholder[hidden] { display:none; }
.call-peer-placeholder strong { font-size:15px; }
.call-peer-placeholder small { max-width:260px; color:#d5dfeb; font-size:10px; line-height:1.5; }
.call-audio-art-large { width:112px; height:112px; margin:12px auto 20px; font-size:32px; }
.call-local-video { position:absolute; z-index:2; right:12px; bottom:12px; width:min(26%,150px); aspect-ratio:4/3; border:2px solid #ffffffd9; border-radius:14px; object-fit:cover; background:#1a273a; box-shadow:0 8px 24px #0005; }
.call-network-badge { position:absolute; z-index:3; left:12px; bottom:12px; padding:7px 10px; border:1px solid #ffffff20; border-radius:10px; color:#fff; background:#0d172bc4; font-size:9px; font-weight:700; }
.call-diagnostics { margin-top:12px; color:var(--muted); text-align:left; }
.call-diagnostics summary { width:max-content; margin:auto; cursor:pointer; font-size:10px; }
.call-diagnostics p { margin:8px auto 0; max-width:520px; font-size:10px; line-height:1.6; text-align:center; }
@media (max-width:900px) { .call-page-grid { grid-template-columns:1fr; } }
@media (max-width:650px) {
  .calls-page { padding:20px 14px; }
  .call-page-grid { gap:12px; margin-top:15px; }
  .call-page-grid>.settings-card { padding:15px; }
  .call-history-actions .secondary-button { min-width:0; min-height:34px; padding:0 9px; font-size:9px; }
  .call-card-video { width:100%; height:100%; max-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding:22px 15px calc(18px + env(safe-area-inset-bottom)); border:0; border-radius:0; }
  .call-layer { padding:0; }
  .call-media-stage { min-height:0; flex:1; max-height:58dvh; }
  .call-actions { margin-top:12px; }
  .call-device-controls { gap:6px; }
  .call-device-controls .secondary-button { flex:1 1 42%; min-width:0; padding:0 8px; font-size:10px; }
}

/* Fidd chat 1.3: complete visual palettes and faster chat navigation. */
:root[data-accent="pearl"] {
  color-scheme:light;
  --ink:#25283a; --muted:#777c8d; --line:#eee7df; --panel:#fffdfa; --canvas:#f7f3ec;
  --bubble-in:#fffdfa; --bubble-out:#f8eae3; --brand-rail:#313653;
  --green:#ad624b; --green-dark:#854633; --green-soft:#f8e9e2; --profile-highlight:#755140;
  --shadow:0 20px 55px rgba(59,48,39,.10);
  --auth-bg:radial-gradient(circle at 50% 12%,#fff8ee 0,#f7f3ec 43%,#efe7df 100%);
}
:root[data-accent="aurora"] {
  color-scheme:dark;
  --ink:#edf0ff; --muted:#9ca7c7; --line:#26314c; --panel:#121b30; --canvas:#0b1220;
  --bubble-in:#1a2540; --bubble-out:#242c56; --brand-rail:#10172a;
  --green:#7165dc; --green-dark:#c2baff; --green-soft:#292b50; --profile-highlight:#302d63;
  --shadow:0 24px 70px rgba(0,0,0,.38);
  --auth-bg:radial-gradient(circle at 50% 10%,#202346 0,#10182c 46%,#080d18 100%);
}
:root[data-accent="lagoon"] {
  color-scheme:light;
  --ink:#17313a; --muted:#6d8588; --line:#dcebe8; --panel:#fbfffe; --canvas:#eff8f6;
  --bubble-in:#fbfffe; --bubble-out:#dcf2ed; --brand-rail:#16434c;
  --green:#147a74; --green-dark:#116a66; --green-soft:#def1ed; --profile-highlight:#116a66;
  --shadow:0 20px 55px rgba(27,75,73,.11);
  --auth-bg:radial-gradient(circle at 50% 12%,#e5f8f3 0,#eff8f6 43%,#e2efee 100%);
}
body { color:var(--ink); background:var(--canvas); }
.app-shell { border-color:var(--line); background:var(--panel); }
.rail { background:var(--brand-rail); }
.rail-button { color:color-mix(in srgb, var(--panel) 55%, #fff); }
.rail-button.active::before { background:var(--green); }
.presence-dot { border-color:var(--brand-rail); }
.side-panel,.chat-top,.settings-card,.contact-card,.compose-card,.auth-card { border-color:var(--line); background:var(--panel); }
.main-panel,.search-box { background:var(--canvas); }
.chat-row.selected { background:var(--green-soft); }
.chat-name,.person-info h2,.page-title,.settings-card h3,.auth-brand strong,.auth-intro h1 { color:var(--ink); }
.chat-time,.chat-preview,.person-info p,.page-subtitle,.side-head p { color:var(--muted); }
.bubble { border-color:var(--line); color:var(--ink); }
.mine .bubble { border-color:var(--green-soft); color:var(--ink); }
.day-divider span,.secure-tag { border-color:var(--line); color:var(--muted); background:var(--panel); }
.icon-button { border-color:var(--line); color:var(--muted); background:var(--panel); }
.filter-chip.active,.settings-side-item.active { color:var(--green-dark); background:var(--green-soft); }
.profile-card { background:linear-gradient(135deg,var(--profile-highlight),var(--brand-rail)); }
.callout { border-color:var(--green-soft); background:var(--green-soft); }
.auth-root { color:var(--ink); background:var(--auth-bg); }
.auth-card { box-shadow:var(--shadow); }
.auth-brand strong,.auth-intro h1 { color:var(--ink); }
.auth-switch { background:var(--canvas); }
.auth-switch button.active { color:var(--green-dark); background:var(--panel); }
.auth-form label,.server-config label,.setting-field { color:var(--muted); }
.auth-form input,.server-config input,.setting-field input { border-color:var(--line); color:var(--ink); background:var(--panel); }
.auth-success { border-color:var(--green-soft); color:var(--green-dark); background:var(--green-soft); }
.toast { border-color:var(--line); color:var(--ink); background:var(--panel); }
.chat-filter-row { gap:4px; padding:0 11px 10px; overflow-x:auto; scrollbar-width:none; }
.chat-filter-row::-webkit-scrollbar { display:none; }
.chat-filter-row .filter-chip { flex:0 0 auto; padding:7px 8px; }
.emoji-picker-tabs { display:flex; gap:5px; margin:0 0 7px; padding:3px; border-radius:11px; background:var(--canvas); }
.emoji-picker-tab { flex:1; min-height:31px; border:0; border-radius:8px; color:var(--muted); background:transparent; font-size:9px; font-weight:800; cursor:pointer; }
.emoji-picker-tab.active { color:var(--green-dark); background:var(--panel); box-shadow:0 1px 5px #18352614; }
.p2p-consent { display:flex; align-items:flex-start; gap:10px; color:var(--ink); font-size:13px; font-weight:700; line-height:1.45; cursor:pointer; }
.p2p-consent input { flex:0 0 auto; width:18px; height:18px; margin:1px 0 0; accent-color:var(--green); }
.attachment-transfer-status { display:block; min-height:13px; margin:3px 0 0 35px; color:var(--muted); font-size:10px; }
.memory-open-button { color:var(--green); font-weight:900; }
.memory-side-note { margin:16px 12px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--canvas); color:var(--muted); font-size:12px; line-height:1.5; }
.memory-page,.inbox-page { width:min(1100px,100%); margin:0 auto; }
.memory-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
.memory-column { display:grid; gap:14px; min-width:0; }
.memory-page .settings-card h2,.inbox-page h2 { margin:0 0 12px; font-size:17px; }
.memory-page .settings-card form { display:grid; gap:10px; }
.memory-page .setting-field textarea { min-height:60px; resize:vertical; }
.memory-form-actions,.memory-item-actions,.memory-item-head,.inbox-filter-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.memory-record-list,.inbox-list { display:grid; gap:10px; }
.memory-item,.inbox-item { min-width:0; padding:15px; border:1px solid var(--line); border-radius:15px; background:var(--panel); box-shadow:0 5px 16px rgba(30,50,80,.04); }
.memory-item-head { justify-content:space-between; margin-bottom:8px; }
.memory-kind { display:inline-flex; width:max-content; padding:4px 8px; border-radius:999px; background:var(--green-soft); color:var(--green-dark); font-size:10px; font-weight:800; }
.memory-item h3 { margin:4px 0 8px; font-size:16px; }
.memory-item p,.inbox-item p { margin:6px 0 10px; color:var(--ink); font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
.memory-item small,.reminder-row small,.inbox-item small { display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.memory-item-actions { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.memory-source { display:inline-block; margin-top:10px; padding:0; border:0; background:none; color:var(--green); font-size:11px; font-weight:800; cursor:pointer; }
.memory-status-select,.message-inbox-select { max-width:150px; min-height:28px; padding:4px 8px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--panel); font:inherit; font-size:11px; }
.memory-status-label { color:var(--muted); font-size:11px; font-weight:700; }
.reminder-list { display:grid; gap:8px; margin-top:12px; }
.reminder-row { display:flex; align-items:center; gap:8px; padding:10px; border:1px solid var(--line); border-radius:11px; }
.reminder-row span { flex:1; min-width:0; }
.memory-history-entry { padding:10px 0; border-top:1px solid var(--line); }
.memory-history-entry p { white-space:pre-wrap; }
.inbox-filter-row { margin:12px 0; }
.inbox-item { display:flex; align-items:center; gap:10px; }
.inbox-item > div { flex:1; min-width:0; }
.inbox-item > div > small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inbox-item p { margin-bottom:0; }
.inbox-reminders-title { margin-top:24px !important; }
.availability-card form { display:grid; gap:10px; }
.message-inbox-select { align-self:center; cursor:pointer; }
@media (max-width:760px) {
  .memory-layout { grid-template-columns:1fr; }
  .inbox-item { align-items:flex-start; flex-wrap:wrap; }
  .inbox-item > div { flex:1 1 100%; }
  .inbox-item .mini-action { flex:1; }
  .memory-item-actions { gap:4px; }
}
.emoji-preview .emoji-sticker { width:42px; height:42px; object-fit:contain; }
.emoji-sticker { display:inline-block; object-fit:contain; transform-origin:50% 80%; }
.message-text .emoji-sticker { width:1.9em; height:1.9em; margin:0 .04em; vertical-align:-.48em; }
.emoji-sticker-message { display:inline-grid; width:104px; height:104px; place-items:center; vertical-align:middle; }
.emoji-sticker-message .emoji-sticker { width:100%; height:100%; }
.motion-float { animation:sticker-float 1.9s ease-in-out infinite; }
.motion-bounce { animation:sticker-bounce 1.25s ease-in-out infinite; }
.motion-wiggle { animation:sticker-wiggle 1.65s ease-in-out infinite; }
.motion-spin { animation:sticker-spin 2.6s ease-in-out infinite; }
.motion-sway { animation:sticker-sway 2s ease-in-out infinite; }
.motion-tick { animation:sticker-tick 1.1s ease-in-out infinite; }
.motion-pulse { animation:sticker-pulse 1.15s ease-in-out infinite; }
.motion-dance { animation:sticker-dance 1.35s ease-in-out infinite; }
.motion-wave { animation:sticker-wave 1.3s ease-in-out infinite; }
.motion-anime-sword { animation:anime-sword 1.55s ease-in-out infinite; }
.motion-anime-wind { animation:anime-wind 1.9s ease-in-out infinite; }
.motion-anime-chakra { animation:anime-chakra 1.35s ease-in-out infinite; }
.motion-anime-lightning { animation:anime-lightning 1.1s steps(2,end) infinite; }
.motion-anime-notebook { animation:anime-notebook 1.8s ease-in-out infinite; }
.motion-anime-detective { animation:anime-detective 1.65s ease-in-out infinite; }
.motion-anime-infinity { animation:anime-infinity 1.5s ease-in-out infinite; }
.motion-anime-curse { animation:anime-curse 1.05s ease-in-out infinite; }
@keyframes sticker-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes sticker-bounce { 0%,100% { transform:translateY(0) scale(1); } 48% { transform:translateY(-5px) scale(1.025); } }
@keyframes sticker-wiggle { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-3deg); } 75% { transform:rotate(3deg); } }
@keyframes sticker-spin { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-7deg); } 75% { transform:rotate(7deg); } }
@keyframes sticker-sway { 0%,100% { transform:rotate(0) translateY(0); } 50% { transform:rotate(2deg) translateY(-2px); } }
@keyframes sticker-tick { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-4deg); } 75% { transform:rotate(4deg); } }
@keyframes sticker-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.055); } }
@keyframes sticker-dance { 0%,100% { transform:translateY(0) rotate(0); } 25% { transform:translateY(-3px) rotate(-4deg); } 75% { transform:translateY(-3px) rotate(4deg); } }
@keyframes sticker-wave { 0%,100% { transform:rotate(0); } 35% { transform:rotate(-5deg); } 70% { transform:rotate(5deg); } }
@keyframes anime-sword { 0%,100% { transform:translateY(0) rotate(0); filter:drop-shadow(0 0 3px #8a7aee66); } 40% { transform:translateY(-4px) rotate(-4deg); filter:drop-shadow(0 0 9px #8a7aeecc); } 60% { transform:translateY(1px) rotate(2deg); filter:drop-shadow(0 0 5px #d5d0ff99); } }
@keyframes anime-wind { 0%,100% { transform:translate(0,0) rotate(0); filter:drop-shadow(0 0 3px #8dd6a777); } 50% { transform:translate(3px,-4px) rotate(2deg); filter:drop-shadow(0 0 9px #8dd6a7cc); } }
@keyframes anime-chakra { 0%,100% { transform:translateY(0) scale(1); filter:drop-shadow(0 0 3px #f58a3877); } 35% { transform:translateY(-4px) scale(1.035); filter:drop-shadow(0 0 10px #ff9c44dd); } 70% { transform:translateY(1px) scale(.99); } }
@keyframes anime-lightning { 0%,100% { transform:translate(0,0) rotate(0); filter:drop-shadow(0 0 3px #a591ff66); } 25% { transform:translate(-2px,1px) rotate(-1deg); filter:drop-shadow(0 0 11px #9b7affdd); } 50% { transform:translate(2px,-1px) rotate(1deg); filter:drop-shadow(0 0 4px #e2d8ff99); } 75% { transform:translate(-1px,0) rotate(0); filter:drop-shadow(0 0 9px #9b7affcc); } }
@keyframes anime-notebook { 0%,100% { transform:rotate(0) translateY(0); filter:drop-shadow(0 0 2px #a63a3a55); } 50% { transform:rotate(1.5deg) translateY(-2px); filter:drop-shadow(0 0 8px #bd454599); } }
@keyframes anime-detective { 0%,100% { transform:translateY(0) rotate(0); } 45% { transform:translateY(-2px) rotate(-1deg); } 65% { transform:translateY(0) rotate(1deg); } }
@keyframes anime-infinity { 0%,100% { transform:scale(1) rotate(0); filter:drop-shadow(0 0 4px #59baff88); } 50% { transform:scale(1.045) rotate(-1deg); filter:drop-shadow(0 0 13px #5bbdffee); } }
@keyframes anime-curse { 0%,100% { transform:translate(0,0) scale(1); filter:drop-shadow(0 0 4px #ef263b88); } 35% { transform:translate(4px,-2px) scale(1.04); filter:drop-shadow(0 0 13px #ff263ddd); } 65% { transform:translate(-1px,1px) scale(.99); filter:drop-shadow(0 0 7px #ff263dbb); } }
.chat-row-wrap { display:flex; align-items:center; gap:1px; }
.chat-row-wrap .chat-row { flex:1; min-width:0; }
.chat-favorite-toggle { flex:0 0 31px; width:31px; height:34px; border:0; border-radius:10px; color:#a8a9b2; background:transparent; font-size:16px; cursor:pointer; }
.chat-favorite-toggle:hover,.chat-favorite-toggle.active { color:var(--green); background:var(--green-soft); }
.chat-row-wrap .chat-row .unread { flex:0 0 auto; }
.rail-button.has-unread::after { position:absolute; top:4px; right:4px; min-width:15px; height:15px; display:grid; place-items:center; padding:0 4px; border:2px solid var(--brand-rail); border-radius:9px; color:#fff; background:var(--green); content:attr(data-unread); font-size:8px; font-weight:900; }
.auth-colors { flex-wrap:wrap; }
@media (max-width:650px) {
  .chat-filter-row { padding-right:9px; padding-left:9px; }
  .chat-favorite-toggle { flex-basis:29px; width:29px; }
  .emoji-sticker-message { width:88px; height:88px; }
}
@media (prefers-reduced-motion:reduce) {
  .emoji-sticker { animation:none !important; }
}

/* 1.8 menu: labeled web rail and thumb-friendly Android navigation. */
.app-shell { grid-template-columns:194px 326px minmax(0,1fr); }
.rail { align-items:stretch; padding:20px 13px 16px; }
.brand-header { display:flex; align-items:center; gap:10px; min-height:46px; padding:0 3px; }
.brand-wordmark { min-width:0; display:flex; flex-direction:column; gap:2px; color:#fff; }
.brand-wordmark strong { font-size:14px; font-weight:800; letter-spacing:-.03em; }
.brand-wordmark small { color:color-mix(in srgb, #fff 68%, var(--brand-rail)); font-size:9px; white-space:nowrap; }
.rail-primary-action { width:100%; min-height:43px; display:flex; align-items:center; gap:10px; margin:19px 0 11px; padding:0 13px; border:0; border-radius:14px; color:#fff; background:var(--green); font-size:11px; font-weight:800; text-align:left; cursor:pointer; box-shadow:0 5px 14px color-mix(in srgb, var(--green) 20%, transparent); transition:transform .16s ease,filter .16s ease; }
.rail-primary-action:hover { filter:brightness(1.06); transform:translateY(-1px); }
.rail-primary-action span:first-child { width:20px; height:20px; display:grid; place-items:center; border:1px solid #ffffff77; border-radius:7px; font-size:17px; line-height:1; }
.rail-nav { gap:5px; margin-top:8px; }
.rail-button { width:100%; height:44px; flex-direction:row; justify-content:flex-start; gap:12px; margin:0; padding:0 12px; border-radius:13px; color:color-mix(in srgb, #fff 68%, var(--brand-rail)); }
.rail-button:hover { color:#fff; background:#ffffff12; }
.rail-button.active { color:#fff; background:#ffffff18; }
.rail-button.active::before { left:0; top:10px; bottom:10px; width:3px; border-radius:0 4px 4px 0; background:var(--green); }
.rail-button svg { flex:0 0 20px; width:20px; height:20px; }
.rail-label { font-size:11px; font-weight:750; }
.rail-button.has-unread::after { top:10px; right:9px; border-color:var(--brand-rail); }
.settings-nav { margin-top:8px; margin-bottom:9px; }
.my-avatar { align-self:flex-start; margin-left:7px; }
.mobile-tabbar,.mobile-compose-fab,.mobile-create-menu { display:none; }
.people-page-search { display:none; }
.chat-connection-pill { display:none; }

@media (max-width:900px) and (min-width:651px) {
  .app-shell { grid-template-columns:174px minmax(245px,.82fr) minmax(0,1.18fr); }
  .rail { padding-right:10px; padding-left:10px; }
  .brand-wordmark small { display:none; }
  .rail-primary-action { padding:0 10px; }
}

@media (max-width:650px) {
  body { min-width:320px; min-height:100dvh; background:var(--panel); }
  .app-shell { position:relative; width:100vw; height:100dvh; min-height:0; margin:0; display:grid; grid-template-columns:minmax(0,1fr); overflow:hidden; border:0; border-radius:0; box-shadow:none; }
  .rail { display:none; }
  .side-panel,.main-panel { min-width:0; grid-column:1 !important; }
  .side-panel { border-right:0; }
  .app-shell[data-view="chats"] .main-panel { display:none; }
  .app-shell[data-view="chats"] .side-panel { display:flex; grid-column:1; padding-bottom:calc(71px + env(safe-area-inset-bottom)); }
  .app-shell[data-view="chats"].mobile-chat-open .main-panel { display:flex; grid-column:1; padding-bottom:0; }
  .app-shell[data-view="chats"].mobile-chat-open .side-panel { display:none; }
  .app-shell[data-view="contacts"] .side-panel,.app-shell[data-view="channels"] .side-panel,.app-shell[data-view="inbox"] .side-panel,.app-shell[data-view="calls"] .side-panel,.app-shell[data-view="settings"] .side-panel,.app-shell[data-view="memory"] .side-panel { display:none; }
  .app-shell[data-view="contacts"] .main-panel,.app-shell[data-view="channels"] .main-panel,.app-shell[data-view="inbox"] .main-panel,.app-shell[data-view="calls"] .main-panel,.app-shell[data-view="settings"] .main-panel,.app-shell[data-view="memory"] .main-panel { display:flex; grid-column:1; padding-bottom:0; }
  .app-shell[data-view="channels"]:not(.mobile-chat-open) .main-panel,.app-shell[data-view="inbox"] .main-panel,.app-shell[data-view="calls"] .main-panel,.app-shell[data-view="settings"] .main-panel,.app-shell[data-view="contacts"] .main-panel,.app-shell[data-view="memory"] .main-panel { padding-bottom:calc(70px + env(safe-area-inset-bottom)); }
  .app-shell.mobile-chat-open .mobile-tabbar,.app-shell.mobile-chat-open .mobile-compose-fab { display:none; }
  .mobile-tabbar { position:absolute; z-index:12; right:0; bottom:0; left:0; height:calc(68px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:stretch; gap:2px; padding:7px 7px calc(7px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--panel); box-shadow:0 -8px 24px rgba(24,38,65,.06); }
  .mobile-tab { position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:2px 1px; border:0; border-radius:13px; color:var(--muted); background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .mobile-tab svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-tab span { overflow:hidden; max-width:100%; font-size:9px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-tab.active { color:var(--green-dark); background:var(--green-soft); }
  .mobile-tab.active svg { stroke-width:2.1; }
  .mobile-tab.has-unread::after { position:absolute; top:1px; right:calc(50% - 19px); min-width:16px; height:16px; display:grid; place-items:center; padding:0 4px; border:2px solid var(--panel); border-radius:10px; color:#fff; background:var(--green); content:attr(data-unread); font-size:8px; font-weight:900; }
  .mobile-compose-fab { position:absolute; z-index:13; right:18px; bottom:calc(82px + env(safe-area-inset-bottom)); min-width:106px; height:46px; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 14px; border:0; border-radius:16px; color:#fff; background:var(--green); box-shadow:0 8px 22px color-mix(in srgb, var(--green) 34%, transparent); font-size:21px; font-weight:500; line-height:1; cursor:pointer; transition:transform .16s ease,filter .16s ease; -webkit-tap-highlight-color:transparent; }
  .mobile-compose-fab:active { transform:scale(.96); }
  .mobile-compose-fab .fab-label { font-size:11px; font-weight:800; }
  .mobile-create-menu:not([hidden]) { position:absolute; z-index:14; right:16px; bottom:calc(148px + env(safe-area-inset-bottom)); width:min(310px,calc(100vw - 32px)); display:grid; gap:3px; padding:8px; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:0 16px 42px rgba(20,35,63,.18); }
  .mobile-create-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 3px; padding:5px 6px 8px 10px; border-bottom:1px solid var(--line); }
  .mobile-create-heading > span { min-width:0; display:grid; gap:3px; }
  .mobile-create-heading strong { color:var(--ink); font-size:12px; }
  .mobile-create-heading small { color:var(--muted); font-size:9px; }
  .mobile-create-menu .mobile-create-heading button { flex:0 0 30px; width:30px; min-height:30px; height:30px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:9px; font-size:18px; line-height:1; }
  .mobile-create-menu button { min-height:56px; display:flex; align-items:center; gap:11px; padding:7px 9px; border:0; border-radius:12px; color:var(--ink); background:transparent; text-align:left; cursor:pointer; }
  .mobile-create-menu button:hover,.mobile-create-menu button:focus-visible { outline:none; background:var(--canvas); }
  .create-menu-icon { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:var(--green-dark); background:var(--green-soft); font-size:17px; font-weight:800; }
  .mobile-create-menu button span:last-child { min-width:0; display:grid; gap:3px; }
  .mobile-create-menu strong { font-size:11px; }
  .mobile-create-menu small { color:var(--muted); font-size:9px; line-height:1.35; }
  .chat-connection-pill { flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; max-width:96px; margin-left:5px; padding:6px 7px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--panel); font-size:9px; font-weight:800; white-space:nowrap; }
  .chat-connection-pill i { flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:#35a875; }
  .chat-connection-pill.connecting { color:var(--green-dark); }
  .chat-connection-pill.connecting i { background:#d7a13c; animation:connection-pulse 1s ease-in-out infinite; }
  .chat-connection-pill.offline { color:#b34d4d; background:color-mix(in srgb, #d45151 8%, var(--panel)); }
  .chat-connection-pill.offline i { background:#d45151; }
  .chat-connection-pill.online span { display:none; }
  .mobile-tab-badge[hidden] { display:none; }
  .side-head { padding:20px 17px 14px; }
  .side-head h1 { font-size:23px; }
  .side-head p { font-size:11px; }
  .content-page .people-page-search { display:flex; margin:0 0 14px; }
  .search-box { margin-right:14px; margin-left:14px; min-height:44px; }
  .filter-row { padding-right:14px; padding-left:14px; }
  .side-scroll { padding-right:10px; padding-left:10px; }
  .chat-row { min-height:70px; }
  .chat-row.selected { background:var(--green-soft); }
  .content-page { padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
  .inbox-page,.memory-page { padding-bottom:calc(95px + env(safe-area-inset-bottom)); }
  .mobile-back { display:grid; }
}
@keyframes connection-pulse { 50% { opacity:.35; } }

/* Keep the emoji drawer inside narrow Android and mobile WebView screens. */
@media (max-width:650px) {
  .emoji-picker {
    left:8px;
    right:8px;
    bottom:calc(90px + env(safe-area-inset-bottom));
    width:auto;
    max-width:none;
    max-height:min(68dvh,calc(100dvh - 120px),520px);
    box-sizing:border-box;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

/* Conversation helpers: FIDD tasks, tone review, image annotations. */
.compose-feature-tools { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.compose-feature-tools button { min-height:29px; display:inline-flex; align-items:center; gap:5px; padding:0 9px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--canvas); font-size:9px; font-weight:750; cursor:pointer; }
.compose-feature-tools button:hover { border-color:#8968ff70; color:#684fd0; background:#8968ff10; }
.feature-overlay { position:fixed; z-index:130; inset:0; display:grid; place-items:center; overflow:auto; padding:20px; background:#101321a8; backdrop-filter:blur(8px); }
.feature-overlay[hidden] { display:none!important; }
.feature-dialog,.annotation-dialog { width:min(560px,100%); max-height:min(820px,94dvh); overflow:auto; padding:22px; border:1px solid var(--line); border-radius:22px; color:var(--ink); background:var(--panel); box-shadow:0 28px 90px #11182b45; }
.feature-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:17px; }
.feature-dialog-head h2 { margin:5px 0 0; font-size:21px; letter-spacing:-.04em; }
.feature-dialog-head .page-eyebrow { color:#7459e7; }
.feature-dialog-head>button { width:34px; height:34px; flex:0 0 34px; border:1px solid var(--line); border-radius:11px; color:var(--muted); background:var(--canvas); font-size:20px; cursor:pointer; }
.feature-dialog .setting-field textarea { min-height:110px; resize:vertical; }
.feature-dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:15px; }
.feature-note { margin:12px 0 0; color:var(--muted); font-size:10px; line-height:1.55; }
.fidd-task-card { width:min(100%,760px); margin:12px auto; padding:15px; border:1px solid color-mix(in srgb,#8968ff 24%,var(--line)); border-radius:17px; background:linear-gradient(145deg,color-mix(in srgb,#8968ff 6%,var(--panel)),var(--panel)); box-shadow:0 7px 24px #203b2c0b; }
.fidd-task-heading { display:flex; align-items:center; gap:9px; }
.fidd-task-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:#fff; background:linear-gradient(145deg,#8764ee,#5140a6); font-weight:900; }
.fidd-task-heading>span:last-child { display:grid; gap:3px; }
.fidd-task-heading strong { font-size:11px; }
.fidd-task-heading small { color:var(--muted); font-size:9px; }
.fidd-task-request { margin:12px 0; font-size:12px; font-weight:750; line-height:1.5; overflow-wrap:anywhere; }
.fidd-task-plan,.fidd-task-permissions { padding:11px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.fidd-task-plan strong,.fidd-task-permissions strong { font-size:10px; }
.fidd-task-plan p,.fidd-task-permissions p { margin:5px 0 0; color:var(--muted); font-size:10px; line-height:1.55; }
.fidd-task-safety { margin:9px 0 0; color:var(--muted); font-size:9px; line-height:1.45; }
.fidd-task-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.fidd-task-open-button { color:#684fd0; background:#8968ff12; }
.tone-original { padding:11px 13px; border:1px solid var(--line); border-radius:13px; background:var(--canvas); }
.tone-original small { color:var(--muted); font-size:9px; }
.tone-original p { margin:6px 0 0; font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.tone-hints { display:grid; gap:7px; padding-left:19px; color:var(--ink); font-size:10px; line-height:1.5; }
.tone-options { display:grid; gap:9px; margin-top:14px; }
.tone-options article { display:grid; gap:8px; padding:11px; border:1px solid var(--line); border-radius:13px; background:var(--panel); }
.tone-options p { margin:0; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.tone-options .secondary-button { justify-self:start; }
.annotation-overlay { z-index:140; }
.annotation-dialog { width:min(820px,100%); }
.annotation-tools { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.annotation-tools button { min-height:34px; padding:0 10px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--canvas); font-size:10px; font-weight:750; cursor:pointer; }
.annotation-tools button.active { border-color:#8968ff75; color:#684fd0; background:#8968ff16; }
.annotation-canvas-wrap { width:100%; max-height:min(60dvh,600px); display:grid; place-items:center; overflow:auto; border:1px solid var(--line); border-radius:14px; background:#111; }
#annotation-canvas { display:block; width:auto; max-width:100%; max-height:min(60dvh,600px); object-fit:contain; touch-action:none; cursor:crosshair; }
.dark .feature-dialog,.dark .annotation-dialog,.dark .fidd-task-card,.dark .tone-options article { border-color:var(--line); background:var(--panel); }
.dark .fidd-task-plan,.dark .fidd-task-permissions,.dark .tone-original { background:var(--canvas); }
@media (max-width:650px) {
  .compose-feature-tools { gap:5px; }
  .compose-feature-tools button { min-height:30px; flex:1 1 auto; justify-content:center; padding:0 7px; font-size:8px; }
  .compose-feature-tools button span { white-space:nowrap; }
  .feature-overlay { align-items:end; padding:0; }
  .feature-dialog,.annotation-dialog { width:100%; max-height:calc(100dvh - env(safe-area-inset-top)); padding:18px 15px calc(18px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; }
  .annotation-canvas-wrap { max-height:52dvh; }
  #annotation-canvas { max-height:52dvh; }
  .feature-dialog-head h2 { font-size:18px; }
  .fidd-task-card { padding:12px; }
}

/* Fidd chat Pro 2.0: calmer conversation view, compact tools and message actions. */
.chat-top { height:74px; padding:0 clamp(14px,3vw,34px); background:color-mix(in srgb,var(--panel) 94%,var(--canvas)); box-shadow:0 4px 18px #11182708; }
.chat-top .avatar { width:46px; height:46px; border-radius:50%; }
.person-info { margin-left:10px; }
.person-info h2 { font-size:15px; }
.person-info p { margin-top:4px; }
.message-scroll { padding:24px clamp(14px,5vw,70px) 22px; background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--green-soft) 23%,transparent),transparent 56%),var(--canvas); }
.day-divider { position:sticky; top:0; z-index:1; margin-bottom:18px; pointer-events:none; }
.day-divider span { border:0; border-radius:999px; color:var(--muted); background:color-mix(in srgb,var(--panel) 88%,transparent); box-shadow:0 3px 14px #11182712; backdrop-filter:blur(12px); }
.message-row { gap:8px; margin-bottom:8px; }
.message-stack { position:relative; max-width:min(78%,620px); }
.message-sender { margin-left:12px; margin-bottom:4px; }
.bubble { padding:9px 13px 7px; border:0; border-radius:18px 18px 18px 6px; color:var(--ink); background:var(--bubble-in); box-shadow:0 2px 7px #131b2b0c; line-height:1.55; transition:background .18s,transform .18s,box-shadow .18s; }
.mine .bubble { border:0; border-radius:18px 18px 6px 18px; color:var(--ink); background:var(--bubble-out); }
.message-row:active .bubble { transform:scale(.995); }
.quote-box { border-left-width:3px; border-radius:0 9px 9px 0; }
.bubble-meta { margin-top:5px; font-size:9px; }
.message-menu-trigger { position:absolute; z-index:1; top:2px; right:-34px; width:29px; height:29px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:var(--panel); font-size:12px; letter-spacing:1px; box-shadow:0 3px 12px #141b2b12; opacity:0; cursor:pointer; transition:opacity .15s,transform .15s; }
.message-row.mine .message-menu-trigger { right:auto; left:-34px; }
.message-row:hover .message-menu-trigger,.message-menu-trigger:focus-visible { opacity:1; }
.reaction-list { padding-left:4px; }
.reaction-pill { margin-top:4px; border:1px solid var(--line); border-radius:999px; }
.chat-overflow-toggle { margin-left:4px; color:var(--ink); font-size:20px; }
.chat-overflow-menu { position:absolute; z-index:30; top:64px; right:18px; width:min(310px,calc(100vw - 24px)); display:grid; gap:3px; padding:10px; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:var(--panel); box-shadow:0 18px 50px #0b122044; }
.chat-overflow-menu[hidden] { display:none!important; }
.chat-overflow-heading { padding:7px 9px 8px; color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.chat-overflow-menu button { min-height:42px; display:flex; align-items:center; gap:10px; padding:0 10px; border:0; border-radius:11px; color:var(--ink); background:transparent; font-size:11px; font-weight:650; text-align:left; cursor:pointer; }
.chat-overflow-menu button:hover { background:var(--canvas); }
.chat-overflow-menu button span { width:24px; color:var(--green-dark); font-size:16px; text-align:center; }
.compose-wrap { padding-bottom:12px; }
.compose-card { border:1px solid color-mix(in srgb,var(--green) 18%,var(--line)); border-radius:22px; box-shadow:0 8px 28px #131b2b0d; }
.compose-input-row { align-items:center; gap:6px; padding:8px 9px 8px 16px; }
.compose-input-row textarea { min-height:29px; font-size:13px; }
.compose-tool { border-radius:50%; }
.send-button { width:40px; height:40px; border-radius:50%; }
.compose-feature-tools[hidden] { display:none!important; }
.compose-extras-toggle { color:var(--green-dark); font-size:20px; }
.message-context-overlay { position:fixed; z-index:170; inset:0; }
.message-context-scrim { position:absolute; inset:0; background:#10182775; backdrop-filter:blur(3px); }
.message-context-card { position:fixed; left:12px; top:12px; width:min(296px,calc(100vw - 24px)); max-height:min(76dvh,640px); overflow:auto; padding:9px; border:1px solid color-mix(in srgb,var(--line) 80%,#fff); border-radius:19px; color:var(--ink); background:var(--panel); box-shadow:0 22px 70px #070b16a3; animation:context-in .14s ease-out; }
@keyframes context-in { from { opacity:0; transform:translateY(7px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
.message-reaction-quickbar { display:flex; justify-content:space-between; gap:3px; margin-bottom:7px; padding:5px; border-radius:14px; background:var(--canvas); }
.message-reaction-quickbar button { width:37px; height:37px; flex:0 0 37px; border:0; border-radius:11px; background:transparent; font-size:21px; cursor:pointer; }
.message-reaction-quickbar button:hover { transform:scale(1.12); background:var(--panel); }
.message-context-actions { display:grid; gap:2px; }
.message-context-actions>button { min-height:41px; display:flex; align-items:center; gap:12px; padding:0 10px; border:0; border-radius:11px; color:var(--ink); background:transparent; font-size:11px; text-align:left; cursor:pointer; }
.message-context-actions>button:hover { background:var(--canvas); }
.message-context-actions>button>span { width:22px; color:var(--muted); font-size:17px; text-align:center; }
.message-context-actions>.danger-menu-item { color:#bd4a49; }
.message-context-actions>.danger-menu-item>span { color:inherit; }
.message-menu-label { padding:9px 10px 5px; color:var(--muted); font-size:9px; font-weight:800; }
.message-inbox-actions { display:flex; flex-wrap:wrap; gap:5px; padding:0 6px 7px; }
.message-inbox-actions button { min-height:30px; padding:0 9px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--canvas); font-size:9px; cursor:pointer; }
.password-input-wrap { position:relative; display:block; width:100%; }
.password-input-wrap input { padding-right:48px!important; }
.password-visibility-toggle { position:absolute; top:50%; right:7px; width:34px; height:34px; display:grid; place-items:center; transform:translateY(-50%); border:0; border-radius:10px; color:var(--muted); background:transparent; cursor:pointer; }
.password-visibility-toggle:hover,.password-visibility-toggle.visible { color:var(--green-dark); background:var(--green-soft); }
.password-visibility-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.auth-link-button { justify-self:center; padding:4px 8px; border:0; color:var(--green-dark); background:transparent; font-size:10px; font-weight:750; cursor:pointer; }
.auth-link-button:hover { text-decoration:underline; }
.password-recovery-overlay { z-index:180; }
.security-card { display:grid; align-content:start; gap:8px; }
.security-card form { display:grid; gap:9px; }
.recovery-key-result { display:grid; gap:9px; margin-top:11px; padding:12px; border:1px solid #e5d7a7; border-radius:13px; background:#fff9e7; }
.recovery-key-result[hidden] { display:none!important; }
.recovery-key-result strong { color:#745d18; font-size:10px; }
.recovery-key-result p { margin:0; color:#786f55; font-size:9px; line-height:1.5; }
.recovery-key-result code { display:block; padding:10px; border-radius:9px; color:#312b1a; background:#fff; font-size:11px; line-height:1.5; overflow-wrap:anywhere; user-select:all; }
.dark .recovery-key-result { border-color:#594c2a; background:#332d1b; }
.dark .recovery-key-result strong,.dark .recovery-key-result p,.dark .recovery-key-result code { color:var(--ink); }
@media (max-width:650px) {
  .chat-top { height:64px; padding:0 9px; gap:3px; }
  .chat-top .avatar { width:39px; height:39px; }
  .person-info { margin-left:6px; flex:1; }
  .person-info h2 { font-size:13px; }
  .person-info p { font-size:9px; }
  .chat-top [data-action="search-toggle"],.chat-top [data-action="call-video"] { display:none; }
  .chat-top .icon-button { width:35px; height:35px; border-radius:50%; }
  .message-scroll { padding:15px 10px 17px; }
  .message-stack { max-width:min(84%,620px); }
  .bubble { padding:8px 11px 6px; border-radius:16px 16px 16px 5px; font-size:13px; }
  .mine .bubble { border-radius:16px 16px 5px 16px; }
  .message-menu-trigger { display:none; }
  .compose-wrap { padding:0 8px calc(7px + env(safe-area-inset-bottom)); }
  .compose-card { border-radius:24px; }
  .compose-input-row { gap:3px; padding:6px 7px 6px 14px; }
  .compose-tools { gap:1px; }
  .compose-tool { width:34px; height:36px; }
  .send-button { width:39px; height:39px; }
  .compose-feature-tools { padding:0 8px 8px; }
  .chat-overflow-menu { top:57px; right:8px; }
  .message-context-scrim { background:#10182767; }
  .message-context-card { top:auto!important; right:0; bottom:0; left:50%!important; width:min(560px,100vw); max-height:min(76dvh,660px); padding:12px 15px calc(16px + env(safe-area-inset-bottom)); border-right:0; border-bottom:0; border-left:0; border-radius:22px 22px 0 0; transform:translateX(-50%); }
  .message-reaction-quickbar { justify-content:space-around; margin-bottom:8px; }
  .message-reaction-quickbar button { width:42px; height:42px; flex-basis:42px; font-size:23px; }
  .message-context-actions>button { min-height:46px; font-size:13px; }
  .security-card { padding:15px; }
}
@media (max-width:650px) {
  .mobile-tabbar { grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; padding-right:4px; padding-left:4px; background:color-mix(in srgb,var(--panel) 94%,transparent); backdrop-filter:blur(16px); }
  .mobile-tab { gap:3px; border-radius:12px; }
  .mobile-tab span { max-width:100%; overflow:hidden; font-size:8px; white-space:nowrap; text-overflow:clip; }
  .mobile-tab svg { width:19px; height:19px; }
  .mobile-tab.active { color:var(--green-dark); background:var(--green-soft); }
}

.hidden-chat-settings { margin-top:10px; padding:20px; border-color:color-mix(in srgb,var(--green) 22%,var(--line)); }
.hidden-chat-settings-heading,.hidden-chats-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.hidden-chat-settings-heading h3 { margin:0; }
.hidden-chat-settings-heading .page-subtitle { margin:5px 0 0; }
.hidden-chat-settings>.page-subtitle { max-width:760px; line-height:1.6; }
.hidden-chat-status { flex:0 0 auto; padding:6px 10px; border-radius:999px; color:var(--muted); background:var(--canvas); font-size:10px; font-weight:750; }
.hidden-chat-status.enabled { color:var(--green-dark); background:var(--green-soft); }
.hidden-chat-settings .setting-field select { width:100%; min-height:40px; padding:0 12px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:var(--canvas); }
.hidden-chat-pin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.hidden-chat-selection { display:grid; gap:7px; padding:12px; border:1px solid var(--line); border-radius:13px; background:var(--canvas); }
.hidden-chat-selection>strong { font-size:11px; }
.hidden-chat-selection>p { margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.hidden-chat-choice-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-height:250px; overflow:auto; }
.hidden-chat-choice { min-width:0; display:flex; align-items:center; gap:8px; padding:9px; border:1px solid var(--line); border-radius:10px; background:var(--panel); cursor:pointer; }
.hidden-chat-choice input { width:16px; height:16px; accent-color:var(--green); }
.hidden-chat-choice span { min-width:0; display:grid; gap:3px; }
.hidden-chat-choice strong,.hidden-chat-choice small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hidden-chat-choice strong { font-size:10px; }
.hidden-chat-choice small { color:var(--muted); font-size:9px; }
.hidden-chat-settings-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.danger-button { border:1px solid color-mix(in srgb,#c74a55 28%,var(--line)); color:#b6424d; background:color-mix(in srgb,#ffe6e8 55%,var(--panel)); cursor:pointer; }
.hidden-entry-view { position:relative; min-height:100%; display:grid; grid-template-rows:auto 1fr; overflow:auto; color:var(--ink); background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--green-soft) 70%,transparent),transparent 58%),var(--canvas); }
.hidden-entry-header { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:12px; padding:14px clamp(14px,4vw,36px); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--panel) 92%,transparent); backdrop-filter:blur(14px); }
.hidden-entry-header>div { min-width:0; display:grid; gap:3px; }
.hidden-entry-header strong { font-size:14px; }
.hidden-entry-header small { color:var(--muted); font-size:10px; }
.hidden-entry-avatar { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border-radius:14px; color:var(--green-dark); background:var(--green-soft); font-size:20px; }
.hidden-entry-lock { margin-left:auto; color:var(--green-dark); font-size:21px; }
.hidden-entry-content { width:min(470px,calc(100% - 32px)); align-self:center; justify-self:center; padding:32px; border:1px solid var(--line); border-radius:25px; background:color-mix(in srgb,var(--panel) 94%,transparent); box-shadow:0 22px 70px #10182717; }
.hidden-entry-mark { width:46px; height:46px; display:grid; place-items:center; margin-bottom:18px; border-radius:16px; color:var(--green-dark); background:var(--green-soft); font-size:20px; }
.hidden-entry-content h2 { margin:8px 0; font-size:clamp(20px,4vw,28px); letter-spacing:-.035em; }
.hidden-entry-content p,.hidden-pin-card p { color:var(--muted); font-size:12px; line-height:1.65; }
.hidden-entry-content form { display:grid; gap:8px; margin-top:22px; }
.hidden-entry-content form>label { font-size:10px; font-weight:750; }
.hidden-entry-input-row { display:flex; gap:8px; }
.hidden-entry-input-row input,.hidden-pin-card input { min-width:0; flex:1; height:46px; padding:0 14px; border:1px solid var(--line); border-radius:13px; color:var(--ink); background:var(--canvas); outline:none; }
.hidden-entry-input-row input:focus,.hidden-pin-card input:focus { border-color:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green-soft) 78%,transparent); }
.hidden-entry-input-row .send-button { flex:0 0 46px; width:46px; height:46px; border:0; color:#fff; background:var(--green); }
.hidden-entry-footnote { display:block; margin-top:11px; color:var(--muted); font-size:9px; }
.hidden-pin-overlay { position:fixed; z-index:250; inset:0; display:grid; place-items:center; padding:18px; background:#07111bbd; backdrop-filter:blur(8px); }
.hidden-pin-card { width:min(390px,100%); padding:25px; border:1px solid var(--line); border-radius:23px; color:var(--ink); background:var(--panel); box-shadow:0 25px 90px #02040a70; }
.hidden-pin-card h2 { margin:0; font-size:20px; letter-spacing:-.03em; }
.hidden-pin-card form { display:grid; gap:11px; margin-top:17px; }
.hidden-pin-card input { width:100%; font-size:20px; letter-spacing:.45em; text-align:center; }
.hidden-pin-error { min-height:16px; color:#c14f57; font-size:10px; }
.hidden-pin-actions { display:flex; justify-content:flex-end; gap:8px; }
.hidden-chats-page { min-height:100%; }
.hidden-chats-title-row { align-items:center; margin-bottom:22px; }
.hidden-chats-title-row .page-subtitle { max-width:680px; line-height:1.6; }
.hidden-chats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:10px; }
.hidden-chat-card { min-width:0; display:flex; align-items:center; gap:11px; padding:13px; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:var(--panel); text-align:left; cursor:pointer; transition:transform .16s,border-color .16s,box-shadow .16s; }
.hidden-chat-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--green) 42%,var(--line)); box-shadow:0 10px 26px #10182712; }
.hidden-chat-card>span:nth-child(2) { min-width:0; flex:1; display:grid; gap:5px; }
.hidden-chat-card strong,.hidden-chat-card small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hidden-chat-card strong { font-size:11px; }
.hidden-chat-card small { color:var(--muted); font-size:9px; }
.hidden-chat-card>i { color:var(--muted); font-size:22px; font-style:normal; }
.dark .hidden-entry-content,.dark .hidden-pin-card,.dark .hidden-chat-card { border-color:var(--line); background:var(--panel); }
.dark .hidden-chat-choice { border-color:var(--line); background:var(--panel); }
.dark .hidden-entry-header { border-color:var(--line); background:color-mix(in srgb,var(--panel) 92%,transparent); }
.dark .danger-button { color:#ff9a9f; background:#392327; }
@media (max-width:650px) {
  .hidden-entry-content { padding:23px 19px; border-radius:21px; }
  .hidden-chat-pin-grid,.hidden-chat-choice-list { grid-template-columns:1fr; }
  .hidden-chats-title-row { align-items:flex-start; flex-direction:column; }
  .hidden-chats-title-row>button { align-self:flex-end; }
  .hidden-chat-settings { padding:15px; }
  .hidden-chat-settings-heading { align-items:flex-start; }
  .hidden-chat-choice-list { max-height:210px; }
}