:root {
  color-scheme: light;
  --accent:#2481cc; --accent-2:#4b69ed; --bg:#eef3f8; --panel:#fff; --panel-2:#f3f6fa;
  --text:#152536; --muted:#72808e; --line:#dce4ec; --bubble:#fff; --own:#d9f1ff;
  --danger:#df4b55; --shadow:0 14px 40px rgba(33,58,82,.14); --safe-bottom:env(safe-area-inset-bottom,0px); --bubble-alpha:100%;
}
:root[data-theme="dark"] {
  color-scheme:dark; --bg:#0d1824; --panel:#152536; --panel-2:#1d3043; --text:#f3f7fa;
  --muted:#91a0ad; --line:#293d50; --bubble:#203448; --own:#17547a; --shadow:0 16px 42px rgba(0,0,0,.35);
}
* { box-sizing:border-box }
html,body { width:100%; height:100%; margin:0; overflow:hidden }
body { position:fixed; inset:0; font:15px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--text); background:var(--bg) }
button,input,textarea { font:inherit; color:inherit }
button { cursor:pointer }
.hidden { display:none!important }
.login-view { min-height:100%; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 70% 10%,rgba(53,185,236,.17),transparent 35%),linear-gradient(150deg,var(--bg),var(--panel)) }
.login-card { width:min(410px,100%); padding:40px; border:1px solid var(--line); border-radius:28px; background:var(--panel); box-shadow:var(--shadow); text-align:center }
.login-logo { width:82px; height:82px; filter:drop-shadow(0 10px 18px rgba(36,129,204,.22)) }
.login-card h1 { margin:16px 0 4px; font-size:30px }
.login-card p { margin:0 0 30px; color:var(--muted) }
.login-card form { display:grid; gap:16px; text-align:left }
.login-card label { color:var(--muted); font-size:13px }
.login-card input { width:100%; margin-top:7px; padding:13px 14px; border:1px solid var(--line); border-radius:12px; outline:none; background:var(--panel-2) }
.login-card input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(36,129,204,.13) }
.primary { padding:13px; border:0; border-radius:12px; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); font-weight:650 }
.login-card small { display:block; margin-top:24px; color:var(--muted) }
.auth-mode { margin-top:10px; border:0; color:var(--accent); background:transparent }
.form-error { min-height:20px; color:var(--danger); text-align:center }
.app-shell { width:100%; height:100%; height:100dvh; display:grid; grid-template-columns:minmax(310px,390px) 1fr; overflow:hidden; background:var(--bg) }
.sidebar { position:relative; min-width:0; min-height:0; height:100%; display:flex; flex-direction:column; overflow:hidden; background:var(--panel); border-right:1px solid var(--line) }
.sidebar-header,.chat-header { height:64px; flex:0 0 64px; display:flex; align-items:center; padding:0 14px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--panel) 92%,transparent); backdrop-filter:blur(14px); z-index:5 }
.brand { display:flex; align-items:center; gap:10px; font-size:21px }
.brand img { width:35px; height:35px }
.header-actions { display:flex; margin-left:auto }
.icon-button { width:40px; height:40px; border:0; border-radius:50%; background:transparent; font-size:23px; display:grid; place-items:center }
.icon-button:hover { background:var(--panel-2) }
.account-menu { position:absolute; right:12px; top:56px; z-index:30; width:270px; padding:10px; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:var(--shadow) }
.account-menu>div { display:flex; flex-direction:column; padding:8px 10px 12px; border-bottom:1px solid var(--line) }
.account-menu>.account-menu-profile { min-height:78px; display:grid; grid-template-columns:50px minmax(0,1fr); align-items:center; gap:12px; margin-bottom:5px; padding:12px; border:0; border-radius:15px; color:#fff; background:linear-gradient(135deg,#1769c2,#6b5ce7) }.account-menu-profile>span:last-child{min-width:0;display:flex;flex-direction:column}.account-menu-profile strong,.account-menu-profile small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-menu-profile small{color:rgba(255,255,255,.78)}.account-menu-avatar{width:50px;height:50px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.18);font-size:23px;font-weight:800}
.account-menu small { color:var(--muted) }
.account-menu button { width:100%; padding:10px; border:0; border-radius:9px; text-align:left; background:transparent }
.account-menu button:hover { background:var(--panel-2) }
.danger-text { color:var(--danger)!important }
.search-box { margin:11px 12px 7px; height:42px; display:flex; align-items:center; gap:7px; padding:0 12px; border-radius:13px; color:var(--muted); background:var(--panel-2) }
.search-box input { min-width:0; flex:1; border:0; outline:0; background:transparent }
.search-box button { border:0; color:var(--muted); background:transparent; font-size:20px }
.filters { display:flex; gap:5px; overflow:auto; padding:4px 12px 10px; scrollbar-width:none }
.filters button { white-space:nowrap; padding:8px 12px; border:0; border-radius:18px; color:var(--muted); background:transparent }
.filters button.active { color:#fff; background:var(--accent) }
.filters span { margin-left:4px }
.topics-bar { min-height:58px; display:flex; align-items:center; gap:7px; padding:6px 10px; border-bottom:1px solid var(--line) }.topics-bar .icon-button { font-size:32px }.topics-bar>div { min-width:0; display:flex; flex-direction:column }.topics-bar strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.topics-bar small { color:var(--muted) }.archive-bar strong{font-size:18px}.archive-bar .icon-button{color:var(--accent)}
.stories { display:flex; gap:12px; overflow:auto; padding:7px 12px 11px; border-bottom:1px solid var(--line); scrollbar-width:none }
.story-item { width:58px; flex:0 0 58px; border:0; padding:0; background:transparent; color:var(--text); text-align:center }
.story-ring { width:53px; height:53px; padding:3px; margin:auto; border-radius:50%; background:linear-gradient(140deg,#2fc5ed,#5968ed,#bc5adf) }
.story-ring.seen { background:var(--line) }
.story-ring img,.story-ring span { width:100%; height:100%; display:grid; place-items:center; border:2px solid var(--panel); border-radius:50%; object-fit:cover; background:var(--panel-2); font-weight:700 }
.story-item small { display:block; overflow:hidden; margin-top:3px; text-overflow:ellipsis; white-space:nowrap }
.story-archive{margin-left:auto;padding:6px 9px;border:1px solid rgba(255,255,255,.35);border-radius:9px;color:#fff;background:rgba(0,0,0,.28);font-size:12px}
.chat-list { min-height:0; flex:1 1 0; overflow:auto; overscroll-behavior:contain; contain:strict }
.chat-row { width:100%; height:76px; min-height:76px; max-height:76px; display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:11px; align-items:center; overflow:hidden; padding:9px 13px; border:0; border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent); background:transparent; text-align:left; content-visibility:auto; contain-intrinsic-size:auto 76px }
.chat-row:hover,.chat-row.active { background:var(--panel-2) }
.chat-swipe-shell { position:relative; overflow:hidden; min-height:76px; background:var(--panel-2) }
.chat-swipe-shell>.chat-row { position:relative; z-index:1; min-height:inherit; background:var(--panel); touch-action:pan-y }
.chat-swipe-shell>.chat-row:hover,.chat-swipe-shell>.chat-row.active { background:var(--panel-2) }
.chat-swipe-shell>.chat-row:not(.swiping) { transition:transform .18s ease-out }
.chat-swipe-shell>.chat-row.swiping { transition:none }
.chat-swipe-actions { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; color:#fff; font-size:13px; font-weight:700; pointer-events:none }
.chat-swipe-actions span { align-self:stretch; min-width:45%; display:flex; align-items:center }
.chat-swipe-read { justify-content:flex-start; padding-left:20px; background:linear-gradient(90deg,#2ea6df,transparent) }
.chat-swipe-archive { justify-content:flex-end; padding-right:20px; background:linear-gradient(270deg,#7b8794,transparent) }
.search-section-title { position:sticky; top:0; z-index:2; padding:8px 14px; color:var(--accent); background:color-mix(in srgb,var(--panel) 94%,transparent); font-size:12px; font-weight:750; text-transform:uppercase }.search-hit-row { width:100%; min-height:64px; display:flex; align-items:center; gap:10px; padding:7px 13px; border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left }.search-hit-row:hover { background:var(--panel-2) }.search-hit-row .avatar { width:43px; height:43px; flex-basis:43px; font-size:14px }.search-hit-row>span { min-width:0; flex:1; display:flex; flex-direction:column }.search-hit-row strong,.search-hit-row>span>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.search-hit-row>span>span,.search-hit-row>small { color:var(--muted); font-size:12px }
.avatar { position:relative; width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; overflow:visible; border-radius:50%; color:#fff; background:linear-gradient(145deg,#37b9d9,#6571e8); font-weight:700; font-size:18px }
.avatar img { position:absolute; inset:0; display:block; width:100%; height:100%; border-radius:inherit; object-fit:cover }
.channel-badge { position:absolute; right:-1px; bottom:-1px; width:19px; height:19px; display:grid; place-items:center; border:2px solid var(--panel); border-radius:50%; color:#fff; font-size:10px; font-weight:750 }
.channel-telegram { background:#229ed9 }.channel-whatsapp { background:#25b96e }.channel-max { background:#7665e9 }
.chat-main { min-width:0; overflow:hidden }
.chat-top,.chat-preview { display:flex; align-items:center; gap:7px }
.chat-top strong { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px }
.chat-time { color:var(--muted); font-size:12px }
.chat-preview { min-width:0; height:20px; margin-top:5px; overflow:hidden; color:var(--muted); line-height:20px }
.chat-preview>.chat-preview-text { min-width:0; flex:1 1 auto; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sender-prefix { color:var(--accent) }
.draft-prefix { color:var(--danger); font-weight:650 }
.chat-activity { color:var(--accent); font-weight:650 }
.chat-presence { display:inline-block; width:8px; height:8px; margin-left:7px; border-radius:50%; background:#34c759; box-shadow:0 0 0 2px var(--surface); vertical-align:1px }
.chat-muted { flex:none; color:var(--muted); font-size:12px }
.chat-preview>.unread { width:auto; min-width:22px; height:22px; flex:0 0 auto; display:inline-grid; place-items:center; padding:0 6px; margin-left:auto; border-radius:12px; color:#fff; background:var(--accent); text-align:center; font-size:12px; line-height:1 }
.empty-state,.welcome { margin:auto; text-align:center; color:var(--muted) }
.empty-state span { font-size:36px }
.conversation { position:relative; min-width:0; min-height:0; height:100%; overflow:hidden; background:var(--bg) }
.conversation::before { content:""; position:absolute; inset:0; opacity:.28; background-image:radial-gradient(circle at 25px 25px,color-mix(in srgb,var(--accent) 24%,transparent) 1px,transparent 1.5px); background-size:38px 38px; pointer-events:none }
.empty-conversation { display:grid; place-items:center }
.welcome { position:relative; padding:30px; border-radius:24px; background:color-mix(in srgb,var(--panel) 90%,transparent); box-shadow:var(--shadow) }
.welcome img { width:72px }.welcome h2 { margin:10px 0 3px }.welcome p { margin:0 }
.chat-view { position:relative; min-height:0; height:100%; display:flex; flex-direction:column; overflow:hidden }
.chat-view.chat-positioning .message-list { visibility:hidden }
.chat-header { padding-left:18px }
.chat-header .avatar { width:44px; min-width:44px; max-width:44px; height:44px; min-height:44px; max-height:44px; flex-basis:44px; aspect-ratio:1 }
.chat-heading { min-width:0; display:flex; flex:1; flex-direction:column; margin-left:10px }
.chat-heading strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px }
.chat-heading span { color:var(--muted); font-size:13px }
.chat-search-bar { height:50px; display:flex; align-items:center; gap:10px; padding:6px 14px; border-bottom:1px solid var(--line); background:var(--panel); z-index:4 }
.chat-search-bar input { flex:1; padding:8px 11px; border:1px solid var(--line); border-radius:10px; outline:0; background:var(--panel-2) }
.chat-search-bar span { color:var(--muted); font-size:12px }
.activity-bar { padding:5px 22px; color:var(--accent); background:var(--panel); font-size:13px; z-index:2 }
.pinned-bar { min-height:52px; display:flex; align-items:center; gap:5px; padding:5px 9px 5px 15px; border-bottom:1px solid var(--line); background:var(--panel); z-index:4 }.pinned-bar::before { content:""; width:3px; align-self:stretch; border-radius:2px; background:var(--accent) }.pinned-bar>button:first-of-type { min-width:0; flex:1; display:flex; flex-direction:column; padding:0 7px; border:0; background:transparent; text-align:left }.pinned-bar strong,.pinned-bar span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.pinned-bar strong { color:var(--accent); font-size:13px }.pinned-bar>span { color:var(--muted); font-size:12px }.pinned-bar .icon-button { width:34px; height:34px; font-size:18px }
.older-loader { padding:7px; color:var(--muted); background:color-mix(in srgb,var(--panel) 85%,transparent); text-align:center; font-size:12px; z-index:2 }
.message-list { position:relative; min-height:0; flex:1; overflow-y:auto; padding:18px max(22px,calc((100% - 900px)/2)) 12px; scroll-behavior:smooth; overscroll-behavior:contain; background-color:var(--wallpaper-a,#d5e6f0); background-image:linear-gradient(color-mix(in srgb,#000 var(--wallpaper-shade,0%),transparent),color-mix(in srgb,#000 var(--wallpaper-shade,0%),transparent)),radial-gradient(circle at 18% 28%,color-mix(in srgb,var(--wallpaper-b,#e5f0f7) 68%,transparent) 0 3px,transparent 4px),linear-gradient(145deg,var(--wallpaper-a,#d5e6f0),var(--wallpaper-b,#e5f0f7)); background-size:100% 100%,42px 42px,100% 100%; background-attachment:local }
.message-list[data-wallpaper="blue"],[data-wallpaper="blue"] { --wallpaper-a:#c5dbf2;--wallpaper-b:#d9e8f7 }.message-list[data-wallpaper="violet"],[data-wallpaper="violet"] { --wallpaper-a:#d8cbe8;--wallpaper-b:#e8e0f2 }.message-list[data-wallpaper="green"],[data-wallpaper="green"] { --wallpaper-a:#c9e0cd;--wallpaper-b:#dcebdd }.message-list[data-wallpaper="sand"],[data-wallpaper="sand"] { --wallpaper-a:#e4d4c0;--wallpaper-b:#f0e5d6 }.message-list[data-wallpaper="plain"],[data-wallpaper="plain"] { --wallpaper-a:var(--bg);--wallpaper-b:var(--bg);background-image:linear-gradient(color-mix(in srgb,#000 var(--wallpaper-shade,0%),transparent),color-mix(in srgb,#000 var(--wallpaper-shade,0%),transparent)) }
:root[data-theme="dark"] .message-list,:root[data-theme="dark"] [data-wallpaper="telegram"] { --wallpaper-a:#0a1522;--wallpaper-b:#14283a }:root[data-theme="dark"] [data-wallpaper="blue"] { --wallpaper-a:#10243c;--wallpaper-b:#1d3657 }:root[data-theme="dark"] [data-wallpaper="violet"] { --wallpaper-a:#251c3e;--wallpaper-b:#49315e }:root[data-theme="dark"] [data-wallpaper="green"] { --wallpaper-a:#102d2a;--wallpaper-b:#24483d }:root[data-theme="dark"] [data-wallpaper="sand"] { --wallpaper-a:#35281f;--wallpaper-b:#5b4431 }
.day-divider { width:max-content; margin:9px auto; padding:4px 10px; border-radius:14px; color:#fff; background:rgba(67,87,103,.67); font-size:12px; backdrop-filter:blur(8px) }
.unread-divider { display:flex; align-items:center; gap:10px; margin:12px 0 8px; color:var(--accent); font-size:12px; font-weight:700; scroll-margin-block:35vh }
.unread-divider::before,.unread-divider::after { content:""; height:1px; flex:1; background:color-mix(in srgb,var(--accent) 65%,transparent) }
.message-row { position:relative; display:flex; margin:3px 0; scroll-margin:90px }
.message-row.with-sender-avatar { align-items:flex-end }.message-sender-avatar { width:34px; height:34px; flex:none; margin:0 6px 1px 0; padding:0; border:0; border-radius:50%; background:transparent }.message-sender-avatar .avatar { width:34px; height:34px; font-size:12px; box-shadow:0 1px 3px rgba(0,0,0,.2) }.message-sender-avatar:hover .avatar,.message-sender-avatar:focus-visible .avatar { outline:2px solid var(--accent); outline-offset:2px }
.message-row.grouped-with-previous { margin-top:-1px }.message-row.grouped-with-next { margin-bottom:-1px }.message-row.grouped-with-previous .sender { display:none }.message-row.grouped-with-next .message-sender-avatar { visibility:hidden; pointer-events:none }.message-row:not(.own).grouped-with-next .bubble { border-bottom-left-radius:7px }.message-row:not(.own).grouped-with-previous .bubble { border-top-left-radius:7px }.message-row.own.grouped-with-next .bubble { border-bottom-right-radius:7px }.message-row.own.grouped-with-previous .bubble { border-top-right-radius:7px }
.service-message { justify-content:center; margin:8px 0; text-align:center }.service-event { max-width:min(86%,650px); padding:5px 11px; border-radius:14px; color:#fff; background:rgba(67,87,103,.67); backdrop-filter:blur(8px); font-size:12px }.service-event small { display:block; margin-top:2px; color:rgba(255,255,255,.72); font-size:10px }.service-event .mention-inline { padding:0; border:0; color:#fff; background:transparent; font:inherit; font-weight:750; text-decoration:underline; text-decoration-color:rgba(255,255,255,.45); text-underline-offset:2px }
.swipe-reply-indicator { position:absolute; right:12px; top:50%; width:34px; height:34px; z-index:0; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.2); opacity:0; pointer-events:none; transform:translateY(-50%) scale(.72); transition:opacity .08s,transform .08s }.message-row.swiping-reply .swipe-reply-indicator { transform:translateY(-50%) scale(1) }
.message-row.own { justify-content:flex-end }
.message-row.selected { position:relative; border-radius:10px; background:color-mix(in srgb,var(--accent) 16%,transparent) }.message-row.selected::before{content:'✓';position:absolute;z-index:3;left:4px;top:50%;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--accent);transform:translateY(-50%)}
.message-selection-bar{min-height:50px;display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--line);background:var(--panel);z-index:5}.message-selection-bar strong{margin-right:auto;font-size:17px}.message-selection-bar>button:not(.icon-button){min-height:34px;padding:6px 11px;border:0;border-radius:9px;color:var(--accent);background:var(--panel-2)}.message-selection-bar .danger-text{color:#e64b55}
.bubble { position:relative; max-width:min(70%,720px); padding:8px 10px 6px; border-radius:14px 14px 14px 4px; background:color-mix(in srgb,var(--bubble) var(--chat-bubble-alpha,var(--bubble-alpha)),transparent); box-shadow:0 1px 2px rgba(0,0,0,.12); overflow-wrap:anywhere }
.own .bubble { border-radius:14px 14px 4px 14px; background:color-mix(in srgb,var(--own) var(--chat-bubble-alpha,var(--bubble-alpha)),transparent) }
.bubble.standalone-emoji{min-width:74px;padding:4px 10px 3px;background:transparent;box-shadow:none}.bubble.standalone-emoji .animated-single-emoji{display:inline-block;font-size:52px;line-height:58px;transform-origin:50% 62%;animation:single-emoji-pulse 1.44s ease-in-out infinite alternate,single-emoji-rock 1.8s ease-in-out infinite alternate}.bubble.standalone-emoji .message-meta{padding:1px 5px;border-radius:9px;background:color-mix(in srgb,var(--panel) 72%,transparent);backdrop-filter:blur(5px)}@keyframes single-emoji-pulse{from{transform:scale(.94)}to{transform:scale(1.06)}}@keyframes single-emoji-rock{from{rotate:-1.6deg}to{rotate:1.6deg}}@media (prefers-reduced-motion:reduce){.bubble.standalone-emoji .animated-single-emoji{animation:none}}
.video-sticker-message{display:block;width:min(176px,46vw);aspect-ratio:1;padding:0;border:0;background:transparent}.video-sticker-message video,.video-sticker-message img{width:100%;height:100%;display:block;object-fit:contain}.video-sticker-preview{width:min(176px,46vw)!important;aspect-ratio:1;object-fit:contain!important}.animation-media{cursor:zoom-in}
.animated-sticker-message{width:min(176px,46vw);aspect-ratio:1;display:grid;place-items:center}.animated-sticker-message img{width:100%;height:100%;object-fit:contain}.animated-sticker-fallback{font-size:72px;animation:single-emoji-pulse 1.44s ease-in-out infinite alternate}
.bot-command-inline{display:inline;padding:0;border:0;color:var(--accent);background:none;font:inherit;font-weight:650;cursor:pointer}.bot-command-inline:hover{text-decoration:underline}
.bot-command-popup button>span{display:flex;min-width:0;flex-direction:column}.bot-command-popup strong{color:var(--accent)}.bot-command-popup small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message-row.retained-deleted .bubble { background:color-mix(in srgb,var(--bubble) 92%,#5b1620); border:1px solid color-mix(in srgb,#d94a5a 58%,transparent) }.retained-deleted-label { display:block; margin-top:5px; color:#d94a5a; font-size:11px; font-weight:700 }
.bubble.search-hit { outline:3px solid rgba(255,190,35,.7) }
.sender,.forwarded { display:block; padding:0; border:0; color:var(--accent); background:transparent; text-align:left }.sender { margin-bottom:2px; font-weight:650; font-size:13px }.forwarded { margin-bottom:5px; font-size:12px }.sender:hover,.forwarded:hover { text-decoration:underline }
.reply-preview { margin-bottom:6px; padding:5px 8px; border-left:3px solid var(--accent); border-radius:4px; color:var(--muted); background:rgba(127,127,127,.08); font-size:12px }
.reply-preview strong,.reply-preview span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.message-text { white-space:pre-wrap }
.message-text a { color:var(--accent) }
.message-meta { display:flex; align-items:center; justify-content:flex-end; gap:4px; min-width:54px; margin:-1px 0 0 10px; color:var(--muted); font-size:11px; float:right; transform:translateY(4px) }
.ticks { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; min-width:14px; height:13px; margin-right:3px; color:var(--muted); font-weight:750; line-height:1; user-select:none }
.ticks svg { display:block; width:14px; height:12px; overflow:visible }
.ticks-delivered svg,.ticks-read svg { width:20px }
.ticks svg path { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.ticks-read { color:#168ad3; text-shadow:0 0 0 currentColor }
.ticks-sending { color:#d08316; letter-spacing:0 }
.ticks-failed { width:15px; height:15px; justify-content:center; border-radius:50%; color:#fff; background:var(--danger); font-size:10px; letter-spacing:0 }
.message-retry { display:block; clear:both; margin:7px 0 0 auto; padding:4px 8px; border:0; border-radius:8px; color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,transparent); font-size:12px; font-weight:700 }
.original-text-card { display:grid; gap:12px; padding:14px; border-radius:13px; background:var(--panel-2) }.original-text-card p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere }.original-text-card button { justify-self:end }
:root[data-theme="dark"] .ticks-read { color:#55b8ff }
.chat-preview>.ticks { min-width:14px; flex:0 0 auto; margin-right:1px; font-size:13px }
.media { display:block; width:min(430px,100%); height:auto; max-height:520px; margin:-3px -5px 6px; border-radius:11px; object-fit:contain; background:#cfd8df }.bubble>video.media { object-fit:contain; background:#080b0f }.inline-video { width:min(430px,100%); aspect-ratio:var(--media-aspect,16/9); max-height:min(520px,68vh); object-fit:contain; background:#080b0f }
.album-bubble { padding:7px }.album-grid { width:min(480px,70vw); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; overflow:hidden; margin:-2px -2px 5px; border-radius:11px }.album-grid.album-count-3 .album-cell:first-child { grid-row:span 2 }.album-cell { position:relative; min-width:0; aspect-ratio:1; overflow:hidden; background:#cfd8df }.album-cell .media,.album-cell .video-note,.album-cell .media-placeholder { width:100%; height:100%; min-width:0; max-height:none; margin:0; border:0; border-radius:0; object-fit:cover }.album-cell video { pointer-events:auto }
.video-note { width:270px; height:270px; margin:auto; border-radius:50%; object-fit:cover }
.audio { width:min(370px,100%); margin:4px 0 }
.document { display:flex; align-items:center; gap:10px; min-width:230px; padding:7px; color:inherit; text-decoration:none }
.document-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--accent); font-size:20px }
.contact-card { min-width:280px; display:grid; grid-template-columns:48px 1fr; gap:9px; padding:8px; border-radius:10px; background:rgba(127,127,127,.09) }.contact-card .avatar { width:48px;height:48px }.contact-card>div:nth-child(2) { min-width:0 }.contact-card strong,.contact-card span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.contact-card>div:last-child { grid-column:1/-1; display:flex; gap:5px }.contact-card button { flex:1; padding:7px; border:0; border-radius:8px; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); font-weight:650 }
.call-card { min-width:230px; display:flex; align-items:center; gap:11px; padding:7px 3px }.call-card>span:last-child { min-width:0; display:flex; flex-direction:column }.call-card strong,.call-card small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.call-card small { color:var(--muted); font-size:12px }.call-icon { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--accent); font-size:20px }
.media-placeholder { min-width:220px; padding:26px 15px; border:1px dashed var(--line); border-radius:10px; color:var(--muted); text-align:center }
.media-placeholder.media-loading { border-style:solid; background:linear-gradient(100deg,var(--panel-2) 30%,color-mix(in srgb,var(--panel-2) 55%,#fff) 48%,var(--panel-2) 66%); background-size:240% 100%; animation:preview-loading 1.25s linear infinite }
@keyframes preview-loading { to { background-position:-240% 0 } }
.reactions { display:flex; flex-wrap:wrap; gap:4px; clear:both; padding-top:6px }
.reaction { padding:2px 7px; border-radius:12px; background:rgba(36,129,204,.13); font-size:12px }
.jump-bottom { position:absolute; right:22px; bottom:87px; z-index:5; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--accent); background:var(--panel); box-shadow:var(--shadow); font-size:22px }.jump-bottom b { position:absolute; right:-5px; top:-7px; min-width:21px; height:21px; display:grid; place-items:center; padding:0 5px; border:2px solid var(--panel); border-radius:12px; color:#fff; background:var(--accent); font-size:10px; line-height:1 }
.reply-bar { display:flex; align-items:center; gap:10px; padding:7px 18px; border-top:1px solid var(--line); background:var(--panel); z-index:4 }
.reply-bar>div { min-width:0; flex:1; padding-left:9px; border-left:3px solid var(--accent) }
.reply-bar strong,.reply-bar span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.reply-bar strong { color:var(--accent); font-size:12px }.reply-bar span { color:var(--muted); font-size:12px }
.reply-bar button { border:0; color:var(--muted); background:transparent; font-size:22px }
.composer { position:relative; flex:0 0 auto; display:flex; align-items:flex-end; gap:8px; padding:9px 16px calc(9px + var(--safe-bottom)); border-top:1px solid var(--line); background:var(--panel); z-index:6 }
.bot-keyboard-panel { flex:0 0 auto; display:grid; gap:5px; padding:7px 10px calc(7px + var(--safe-bottom)); border-top:1px solid var(--line); background:var(--panel); z-index:6 }.bot-keyboard-row { display:flex; gap:5px }.bot-keyboard-row button { min-width:0; min-height:43px; flex:1; padding:8px 10px; border:0; border-radius:9px; color:var(--text); background:var(--panel-2); font:inherit; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.bot-keyboard-row button:hover,.bot-keyboard-row button:focus-visible { color:var(--accent); outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent) }.bot-keyboard-row button:disabled { opacity:.55 }
.composer textarea { min-height:42px; max-height:140px; flex:1; resize:none; padding:10px 13px; border:0; border-radius:20px; outline:0; background:var(--panel-2) }
.attach-button { width:42px; height:42px; display:grid; place-items:center; flex:none; border:0; border-radius:50%; color:var(--muted); background:transparent; cursor:pointer; font-size:28px }
.attach-button:hover { background:var(--panel-2) }
.composer-tool { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border:0; border-radius:50%; color:var(--muted); background:transparent; font-size:24px }.composer-tool:hover { background:var(--panel-2) }
.voice-button { font-size:17px }.voice-button.recording { width:auto; min-width:62px; padding:0 10px; color:#fff; background:var(--danger); animation:voice-pulse 1.2s ease-in-out infinite }
.voice-recorder-panel { min-height:61px; flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:8px 16px calc(8px + var(--safe-bottom)); border-top:1px solid var(--line); background:var(--panel); z-index:7 }
.voice-recorder-panel>button { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border:0; border-radius:50%; font-size:19px }
.voice-discard { color:var(--danger); background:transparent }.voice-stop { margin-left:auto; color:#fff; background:var(--danger) }.voice-send { margin-left:auto; color:#fff; background:var(--accent) }
.voice-record-dot { width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:var(--danger); animation:voice-pulse 1.2s ease-in-out infinite }.voice-recorder-panel.preview-ready .voice-record-dot { background:var(--accent); animation:none }
.voice-recorder-panel strong { min-width:38px; font-variant-numeric:tabular-nums }.voice-recorder-panel>span:last-of-type { color:var(--muted); font-size:13px; white-space:nowrap }
.voice-recorder-panel audio { min-width:120px; height:40px; flex:1 }.voice-recorder-panel.preview-ready #voiceRecordStatus { display:none }
@media (max-width:600px) { .voice-recorder-panel { gap:7px; padding-left:9px; padding-right:9px }.voice-recorder-panel audio { width:100%; min-width:0 }.voice-recorder-panel.preview-ready #voiceRecordDot,.voice-recorder-panel.preview-ready #voiceRecordTime { display:none } }
@keyframes voice-pulse { 50% { opacity:.68 } }
.send-button { width:42px; height:42px; flex:0 0 42px; border:0; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); font-size:19px }
.send-button:disabled { opacity:.5 }
.emoji-panel { position:absolute; right:18px; bottom:72px; z-index:20; width:min(380px,calc(100% - 24px)); max-height:min(470px,60vh); overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:var(--shadow) }
  .emoji-tabs { display:flex; padding:7px; border-bottom:1px solid var(--line) }.emoji-tabs button { flex:1; padding:8px; border:0; border-radius:9px; color:var(--muted); background:transparent }.emoji-tabs button.active { color:#fff; background:var(--accent) }
  .emoji-search-row{display:flex;align-items:center;gap:7px;margin:7px 9px 3px;padding:0 11px;border:1px solid var(--line);border-radius:11px;color:var(--muted);background:var(--panel-2)}.emoji-search-row input{min-width:0;flex:1;padding:9px 0;border:0;outline:0;color:var(--text);background:transparent;font:inherit}
  .emoji-categories { display:flex; gap:2px; overflow-x:auto; padding:5px 7px; border-bottom:1px solid var(--line); scrollbar-width:none }.emoji-categories::-webkit-scrollbar{display:none}.emoji-categories button{width:40px;height:36px;flex:0 0 40px;border:0;border-radius:10px;color:var(--muted);background:transparent;font-size:21px;filter:grayscale(.72);opacity:.72}.emoji-categories button:hover{background:var(--panel-2);opacity:1}.emoji-categories button.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);filter:none;opacity:1}
  .emoji-tone-picker{position:absolute;z-index:3;top:102px;left:50%;display:flex;gap:2px;padding:6px;border:1px solid var(--line);border-radius:13px;background:var(--panel);box-shadow:var(--shadow);transform:translateX(-50%)}.emoji-tone-picker button{width:43px;height:43px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;font-size:27px}.emoji-tone-picker button:hover{background:var(--panel-2)}.emoji-grid button.has-tones{position:relative}.emoji-grid button.has-tones::after{content:"";position:absolute;right:3px;bottom:3px;border-right:4px solid var(--muted);border-top:4px solid transparent}
  .sticker-panel { overflow:hidden }.sticker-search-row{display:flex;gap:6px;padding:8px 9px 4px}.sticker-search-row input{min-width:0;flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:10px;color:var(--text);background:var(--panel-2)}.sticker-search-row button{padding:8px 11px;border:1px solid var(--line);border-radius:10px;color:var(--accent);background:var(--panel-2);font-weight:650}
  .sticker-sets { display:flex; gap:5px; overflow-x:auto; padding:4px 9px 7px; border-bottom:1px solid var(--line); scrollbar-width:thin }.sticker-sets button { flex:0 0 auto; max-width:150px; padding:6px 10px; overflow:hidden; border:0; border-radius:999px; color:var(--muted); background:var(--panel-2); text-overflow:ellipsis; white-space:nowrap }.sticker-sets button.active { color:#fff; background:var(--accent) }
.emoji-grid,.sticker-grid { max-height:min(400px,52vh); display:grid; grid-template-columns:repeat(8,1fr); gap:3px; overflow:auto; padding:9px }.emoji-grid{min-height:245px;align-content:start}
.emoji-grid button,.sticker-grid button { aspect-ratio:1; display:grid; place-items:center; overflow:hidden; border:0; border-radius:10px; background:transparent; font-size:26px }.emoji-grid button:hover,.sticker-grid button:hover { background:var(--panel-2) }.emoji-grid .emoji-empty{grid-column:1/-1;align-self:center;color:var(--muted);text-align:center}
  .sticker-grid { grid-template-columns:repeat(4,1fr) }.sticker-grid img,.sticker-grid video,.animated-sticker-placeholder,.animated-sticker-placeholder svg { width:100%; height:100%; object-fit:contain }.sticker-grid p { grid-column:1/-1; color:var(--muted); text-align:center }.animated-sticker-placeholder{display:grid;place-items:center;font-size:38px}
.sticker-manager-dialog{width:min(580px,calc(100% - 28px));max-height:min(820px,92dvh);overflow:hidden}.sticker-manager-dialog header>div{min-width:0}.sticker-manager-dialog header h2{margin-bottom:2px}.sticker-manager-dialog header small{color:var(--muted)}.sticker-manager-dialog>input{width:calc(100% - 28px);margin:12px 14px 7px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;color:var(--text);background:var(--panel-2)}.sticker-manager-list{max-height:calc(92dvh - 142px);overflow:auto;padding:5px 10px 16px}.sticker-set-row{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:11px;padding:9px 6px;border-bottom:1px solid var(--line)}.sticker-set-cover{width:54px;height:54px;display:grid;place-items:center;border:0;border-radius:13px;color:var(--text);background:var(--panel-2);font-size:23px;font-weight:700}.sticker-set-copy{min-width:0;display:grid;gap:3px;text-align:left}.sticker-set-copy strong,.sticker-set-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sticker-set-copy small{color:var(--muted)}.sticker-set-action{min-width:82px;padding:8px 10px;border:0;border-radius:10px;color:#fff;background:var(--accent);font-weight:650}.sticker-set-action.remove{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}.sticker-set-previews{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:5px 0}.sticker-set-previews img,.sticker-set-previews video,.sticker-set-preview-placeholder{width:100%;aspect-ratio:1;object-fit:contain;border-radius:9px;background:var(--panel-2)}.sticker-set-preview-placeholder{display:grid;place-items:center;font-size:28px}.sticker-manager-empty{padding:50px 15px;color:var(--muted);text-align:center}
  .sticker-suggestions { position:absolute; right:12px; bottom:70px; left:12px; z-index:18; display:flex; gap:6px; overflow-x:auto; padding:7px; border:1px solid var(--line); border-radius:15px; background:color-mix(in srgb,var(--panel) 94%,transparent); box-shadow:var(--shadow); backdrop-filter:blur(12px) }.sticker-suggestions.hidden{display:none}.sticker-suggestions button{width:66px;height:66px;flex:0 0 66px;overflow:hidden;border:0;border-radius:12px;background:transparent}.sticker-suggestions img,.sticker-suggestions video,.sticker-suggestions span{width:100%;height:100%;display:grid;place-items:center;object-fit:contain;font-size:34px}.sticker-suggestions button:hover{background:var(--panel-2)}
.upload-panel { padding:8px 18px calc(8px + var(--safe-bottom)); border-top:1px solid var(--line); background:var(--panel); z-index:5 }
.upload-panel>div { display:flex; justify-content:space-between; color:var(--muted); font-size:12px }.upload-panel progress { width:100%; accent-color:var(--accent) }
.toast { position:fixed; left:50%; bottom:30px; z-index:100; max-width:min(90%,520px); padding:11px 17px; border-radius:12px; color:#fff; background:rgba(20,35,48,.92); box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translate(-50%,15px); transition:.2s }
.toast.show { opacity:1; transform:translate(-50%,0) }
.toast.has-action { display:flex; align-items:center; gap:18px; pointer-events:auto }
.toast.has-action button { margin-left:auto; padding:5px 2px; border:0; color:#62b8f1; background:transparent; font:inherit; font-weight:700; cursor:pointer }
dialog { color:var(--text); border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow) }
dialog::backdrop { background:rgba(4,12,20,.58); backdrop-filter:blur(3px) }
.sheet-dialog { width:min(430px,calc(100% - 28px)); padding:0; border-radius:19px }
.sheet-dialog header,.media-dialog header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line) }
.sheet-dialog h2 { margin:0; font-size:19px }.connections-list { padding:10px }
.mute-dialog header>div { min-width:0; display:grid; gap:2px }.mute-dialog header small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap }.mute-choices { display:grid; padding:6px 10px 12px }.mute-choices button { min-height:50px; padding:10px 12px; border:0; border-bottom:1px solid var(--line); color:var(--text); background:transparent; font:inherit; text-align:left }.mute-choices button:last-child { border:0 }.mute-choices button:hover,.mute-choices button.active { color:var(--accent); background:var(--panel-2) }
.location-dialog header>div { min-width:0; display:grid; gap:2px }.location-dialog header small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap }.live-location-status { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 10px 0; padding:12px 14px; border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--accent) 10%,var(--panel)) }.live-location-status>div { display:grid; gap:3px }.live-location-status small { color:var(--muted) }.location-choices { display:grid; padding:6px 10px 0 }.location-choices button { min-height:62px; display:grid; gap:3px; padding:10px 12px; border:0; border-bottom:1px solid var(--line); color:var(--text); background:transparent; font:inherit; text-align:left }.location-choices button:hover { background:var(--panel-2) }.location-choices button:disabled { opacity:.38 }.location-choices small,.location-hint { color:var(--muted) }.location-hint { margin:0; padding:10px 20px 16px; font-size:13px }
.connection { display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:12px }.connection:hover { background:var(--panel-2) }
.connection-main { display:flex; align-items:center; gap:11px }.connection .dot { width:11px; height:11px; flex:0 0 11px; border-radius:50%; background:#e5a331 }.connection.connected .dot { background:#2fbd73 }
.connection-main>div { display:flex; flex-direction:column }.connection small { color:var(--muted) }
.connection-auth { display:flex; gap:8px; padding-left:22px }.connection-auth input { min-width:0; flex:1; padding:10px 11px; border:1px solid var(--line); border-radius:10px; outline:0; background:var(--panel) }.connection-auth .primary { padding:10px 12px }
.connection-button { align-self:flex-start; margin-left:22px; padding:7px 12px; border:1px solid var(--accent); border-radius:9px; color:var(--accent); background:transparent }
.connection-danger { color:#db4b5b; border-color:color-mix(in srgb,#db4b5b 65%,var(--line)) }.connection-captcha { display:grid }.connection-captcha small { padding-bottom:2px }.connection-qr { display:grid; justify-items:center; gap:10px; padding:4px 22px 8px }.connection-qr img { width:min(290px,100%); aspect-ratio:1; object-fit:contain; border:8px solid #fff; border-radius:14px; background:#fff }.connection-qr .connection-button { justify-self:stretch; margin:0; text-align:center }
.story-dialog { width:min(450px,100%); height:min(760px,94%); padding:0; overflow:hidden; border:0; border-radius:22px; background:#0b1016 }
.story-close { position:absolute; right:12px; top:42px; z-index:7; width:38px; height:38px; border:0; border-radius:50%; color:#fff; background:rgba(0,0,0,.4); font-size:24px }
#storyContent { height:100%; display:grid; place-items:center; color:#fff }.story-viewer,.story-stage { position:relative; width:100%; height:100% }.story-stage img,.story-stage video { width:100%; height:100%; object-fit:contain }.story-progress { position:absolute; z-index:6; top:10px; left:10px; right:10px; display:flex; gap:4px }.story-progress span { flex:1; height:3px; overflow:hidden; border-radius:3px; background:rgba(255,255,255,.35) }.story-progress span.complete { background:#fff }.story-progress span.active::after { content:""; display:block; width:100%; height:100%; background:#fff; transform-origin:left; animation:story-progress 5s linear forwards }@keyframes story-progress { from { transform:scaleX(0) } to { transform:scaleX(1) } }.story-header { position:absolute; z-index:6; top:24px; left:12px; right:58px; display:flex; align-items:center; gap:9px; padding:7px; border-radius:14px; background:linear-gradient(90deg,rgba(0,0,0,.45),transparent) }.story-header .avatar { width:34px; height:34px }.story-header span { display:grid }.story-header small { color:rgba(255,255,255,.75) }.story-caption { position:absolute; z-index:5; left:18px; right:18px; bottom:22px; max-height:35%; overflow:auto; margin:0; padding:10px 13px; border-radius:14px; color:#fff; background:rgba(0,0,0,.5); white-space:pre-wrap }.story-nav { position:absolute; z-index:4; top:0; bottom:0; width:38%; border:0; background:transparent }.story-nav-previous { left:0 }.story-nav-next { right:0 }
.media-dialog { width:100dvw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; border-radius:0; overflow:hidden; background:#090d12 }
.media-dialog header { position:absolute; inset:0 0 auto; z-index:2; height:58px; color:#fff; border:0; background:linear-gradient(rgba(0,0,0,.62),transparent) }.media-dialog header .icon-button { color:#fff }
.media-actions { display:flex; align-items:center; gap:4px }.media-actions button { width:42px; height:42px; border:0; border-radius:50%; background:transparent; color:#fff; font-size:22px; cursor:pointer }.media-actions button:hover { background:rgba(255,255,255,.15) }
.folder-add { width:calc(100% - 32px); margin:14px 16px 4px }.telegram-folder-form { display:grid; gap:4px; padding:14px 18px 20px }.telegram-folder-form>label:first-of-type { display:grid; gap:6px; margin-bottom:10px }.telegram-folder-form>label:first-of-type input { width:100%; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); font:inherit }.telegram-folder-form>strong { margin-top:10px; color:var(--accent); font-size:.76rem; text-transform:uppercase }.telegram-folder-form>label:not(:first-of-type) { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:42px }.telegram-folder-form input[type="checkbox"] { width:20px; height:20px; accent-color:var(--accent) }.telegram-folder-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px }.telegram-folder-actions .primary { margin-left:auto }
.drop-overlay { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:28px; background:rgba(14,35,55,.62); backdrop-filter:blur(4px); pointer-events:none }.drop-overlay>div { display:grid; gap:8px; width:min(460px,90vw); padding:42px 26px; border:2px dashed rgba(255,255,255,.8); border-radius:24px; background:rgba(36,129,204,.82); color:#fff; text-align:center }.drop-overlay strong { font-size:1.35rem }.drop-overlay span { opacity:.9 }
.devices-dialog>p { margin:0; padding:14px 18px; color:var(--muted); font-size:.9rem }.devices-list { display:grid; gap:1px; background:var(--line) }.device-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:10px; padding:13px 16px; background:var(--surface) }.device-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:color-mix(in srgb,var(--accent) 14%,var(--surface)); color:var(--accent); font-size:24px }.device-row div { display:grid; min-width:0; gap:3px }.device-row small { color:var(--muted) }.device-row button,.device-revoke-all { border:0; background:transparent; color:var(--accent); font:inherit; font-weight:650; cursor:pointer }.device-revoke-all { display:block; width:calc(100% - 32px); margin:18px 16px; padding:12px; border-radius:12px; background:color-mix(in srgb,#e64a55 10%,var(--surface)); color:#d83845 }
.new-chat-share-summary { margin:0 14px 10px; padding:10px 12px; border-radius:12px; background:color-mix(in srgb,var(--accent) 11%,var(--surface)); color:var(--text); font-size:.88rem; overflow-wrap:anywhere }
.new-chat-search-row { display:flex; align-items:center; gap:8px }.new-chat-search-row input { flex:1; min-width:0 }.new-chat-search-row button { flex:none; padding:9px 11px; border:0; border-radius:12px; color:var(--accent); background:var(--panel-2); white-space:nowrap }
.setting-note { margin:3px 12px 10px; color:var(--muted); font-size:.78rem; line-height:1.35 }
.attachment-delivery-actions { display:flex; justify-content:flex-end; gap:8px }.attachment-delivery-actions button { min-width:120px }
.media-dialog #mediaContent { width:100%; height:100%; box-sizing:border-box; display:grid; place-items:center; overflow:hidden; padding:max(58px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); background:#090d12 }
.media-dialog img { display:block; width:auto; height:auto; max-width:calc(100dvw - 16px); max-height:calc(100dvh - 74px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); object-fit:contain }.media-dialog video { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; background:#090d12 }.media-dialog img { cursor:zoom-in; touch-action:none; transform-origin:center center; will-change:transform }.media-dialog #mediaContent.zoomed img { cursor:grab }.media-dialog #mediaContent.zoomed img:active { cursor:grabbing }.media-dialog audio { width:min(560px,90%) }
.media-nav { position:absolute; top:50%; z-index:4; width:52px; height:72px; border:0; border-radius:14px; color:#fff; background:rgba(0,0,0,.38); font-size:48px; line-height:1; transform:translateY(-50%) }.media-previous { left:14px }.media-next { right:14px }.media-nav:hover { background:rgba(0,0,0,.62) }
.context-menu { position:fixed; z-index:80; min-width:190px; padding:6px; border:1px solid var(--line); border-radius:13px; background:var(--panel); box-shadow:var(--shadow) }
.context-menu button { display:block; width:100%; padding:9px 11px; border:0; border-radius:8px; background:transparent; text-align:left }.context-menu button:hover { background:var(--panel-2) }
.message-context-menu{display:grid;gap:8px;padding:0;border:0;background:transparent;box-shadow:none;max-height:calc(100vh - 16px);overflow:auto}.message-context-menu.hidden{display:none}.message-context-menu .quick-reactions{justify-self:center;padding:5px;border:1px solid var(--line);border-radius:28px;background:var(--panel);box-shadow:var(--shadow)}.message-context-menu .quick-reactions button{display:inline-grid;width:42px;height:42px;padding:0;border-radius:50%;text-align:center;place-items:center;font-size:23px}.context-preview{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}.context-preview strong{grid-column:1;color:var(--accent);font-size:12px}.context-preview span{grid-column:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:pre-wrap}.context-preview small{grid-column:2;grid-row:2;align-self:end;color:var(--muted)}.context-actions{padding:6px;border:1px solid var(--line);border-radius:17px;background:var(--panel);box-shadow:var(--shadow)}.context-actions button{min-height:44px;padding:10px 13px;border-radius:11px;font-size:14px}.delete-message-dialog{width:min(420px,calc(100% - 28px));padding-bottom:14px}.delete-message-dialog>p{margin:6px 18px 16px;color:var(--muted)}.delete-message-actions{display:grid;gap:7px;padding:0 14px}.delete-message-actions button{min-height:44px;border-radius:11px}.delete-message-actions .danger-text{text-align:left}
.chat-overflow-menu { z-index:86; min-width:230px }
.auto-delete-dialog { width:min(460px,calc(100% - 28px)) }.auto-delete-dialog>p { margin:12px 18px; color:var(--muted); line-height:1.45 }.auto-delete-choices { display:grid; padding:4px 12px }.auto-delete-choices button { min-height:46px; display:flex; align-items:center; gap:12px; padding:8px 10px; border:0; border-radius:11px; color:var(--text); background:transparent; text-align:left }.auto-delete-choices button:hover,.auto-delete-choices button.selected { background:var(--panel-2) }.auto-delete-choices button>span:first-child { width:22px; color:var(--accent); font-size:20px }.auto-delete-actions { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px 16px }.auto-delete-actions button { min-height:38px; padding:8px 13px; border:0; border-radius:10px; color:var(--accent); background:var(--panel-2) }.auto-delete-actions button.primary { color:#fff; background:var(--accent) }.auto-delete-actions button:disabled { opacity:.45 }
.quick-reactions { display:flex; gap:2px; padding:2px 2px 6px; border-bottom:1px solid var(--line); margin-bottom:3px }.quick-reactions button { width:36px; padding:7px 3px; border-radius:50%; text-align:center; font-size:19px }
.message-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; clear:both; margin-top:7px }.message-buttons button { min-height:36px; padding:7px 9px; border:0; border-radius:9px; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); font-weight:650 }.message-buttons button:disabled { opacity:.55 }
.post-comments { width:calc(100% + 10px); min-height:38px; display:flex; align-items:center; justify-content:center; gap:7px; clear:both; margin:8px -5px -3px; border:0; border-top:1px solid color-mix(in srgb,var(--accent) 25%,transparent); color:var(--accent); background:transparent; font-weight:650 }.mention-inline { display:inline; padding:0; border:0; color:var(--accent); background:transparent; font:inherit }.mention-inline:hover { text-decoration:underline }.mention-popup { position:absolute; z-index:12; left:max(12px,calc((100% - 900px)/2)); right:max(12px,calc((100% - 900px)/2)); bottom:calc(70px + var(--safe-bottom)); max-height:260px; overflow:auto; padding:6px; border:1px solid var(--line); border-radius:15px; background:var(--panel); box-shadow:var(--shadow) }.mention-popup button { width:100%; display:flex; align-items:center; gap:10px; padding:8px; border:0; border-radius:10px; background:transparent; text-align:left }.mention-popup button:hover,.mention-popup button.active { background:var(--panel-2) }.mention-popup .avatar { width:38px; height:38px; flex-basis:38px; font-size:13px }.mention-popup button>span { min-width:0; display:flex; flex-direction:column }.mention-popup small { color:var(--muted) }
.reaction { border:0; color:inherit; cursor:pointer }.transcription { white-space:pre-wrap; color:var(--text) }
.transcription-action { display:block; margin-top:6px; padding:3px 0; border:0; background:transparent; color:var(--accent); font:inherit; font-size:.86rem; font-weight:650; cursor:pointer; text-align:left }
.reply-bar.editing { border-left-color:#f5a623 }.reply-bar.editing strong { color:#f5a623 }.composer :disabled { opacity:.48; cursor:not-allowed }
.edit-history{display:grid;gap:7px;margin:10px 0;padding:11px;border-radius:12px;background:var(--panel-2)}.edit-history>div{padding-top:7px;border-top:1px solid var(--line)}.edit-history small{color:var(--muted)}.edit-history p{margin:4px 0 0;white-space:pre-wrap}
.message-audience{display:grid;gap:10px;margin-top:10px}.audience-group{display:grid;gap:6px;padding:11px;border-radius:12px;background:var(--panel-2)}.audience-group>p{margin:0;color:var(--muted)}.audience-person{display:flex;align-items:center;gap:9px;width:100%;padding:7px 0;border:0;border-top:1px solid var(--line);color:inherit;text-align:left;background:transparent}.audience-person>span:last-child{display:grid}.audience-person small{color:var(--muted)}
.chat-heading,.chat-header .avatar { cursor:pointer }
.chat-info-dialog,.forward-dialog { width:min(620px,calc(100% - 28px)); max-height:min(820px,92dvh); overflow:hidden }.chat-info-content,.forward-list { max-height:calc(92dvh - 65px); overflow:auto }
.info-hero { display:grid; justify-items:center; padding:24px 18px 16px; text-align:center }.info-avatar { width:96px; min-width:96px; max-width:96px; height:96px; min-height:96px; max-height:96px; aspect-ratio:1; font-size:28px }.info-avatar>img { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover }.info-hero h3 { margin:12px 0 2px; font-size:22px }.info-hero p { margin:0; color:var(--muted) }.profile-presence{margin-top:4px;color:var(--accent);font-weight:650}.profile-clickable,.profile-copy{cursor:pointer}.profile-clickable:hover,.profile-clickable:focus{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent)}.profile-copy:hover,.profile-copy:focus{color:var(--accent);outline:none}.profile-about{margin:0 18px 12px;padding:12px 14px;border-radius:12px;background:var(--surface-2);white-space:pre-wrap}.profile-fields{display:grid;margin:0 14px 16px;border-radius:14px;overflow:hidden;background:var(--surface-2)}.profile-fields .message-info-row{margin:0;border-radius:0;background:transparent;border-bottom:1px solid color-mix(in srgb,var(--muted) 18%,transparent)}.profile-fields .message-info-row:last-child{border-bottom:0}.profile-field{cursor:pointer}.profile-field:hover,.profile-field:focus{background:color-mix(in srgb,var(--accent) 10%,var(--surface-2));outline:none}.profile-link span{color:var(--accent)}
.info-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:0 14px 16px }.info-action { min-height:43px; padding:8px; border:0; border-radius:11px; color:#fff; background:var(--accent); font-weight:650 }.info-action.secondary { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent) }.info-action.hidden { display:none }
.delivery-settings { display:flex; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid var(--line) }.delivery-settings>strong { flex:1 }.delivery-settings>div { display:flex; gap:6px }.delivery-settings select { padding:9px; border:1px solid var(--line); border-radius:9px; color:var(--text); background:var(--panel-2) }.delivery-settings .info-action { min-height:38px }
.shared-section,.member-section { padding:14px; border-top:1px solid var(--line) }.shared-section h4,.member-section h4 { margin:0 0 10px; font-size:16px }.shared-tabs { display:flex; gap:5px; overflow:auto; scrollbar-width:none }.shared-tabs button { padding:7px 10px; border:0; border-radius:14px; color:var(--muted); background:transparent; white-space:nowrap }.shared-tabs button.active { color:#fff; background:var(--accent) }
.shared-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; min-height:80px; margin-top:10px }.shared-item { position:relative; min-width:0; aspect-ratio:1; overflow:hidden; display:grid; place-items:center; padding:0; border:0; border-radius:9px; color:var(--text); background:var(--panel-2) }.shared-item img { width:100%; height:100%; object-fit:cover }.shared-item small { position:absolute; inset:auto 5px 4px; overflow:hidden; color:#fff; text-shadow:0 1px 3px #000; white-space:nowrap; text-overflow:ellipsis }.shared-item.selected { outline:3px solid var(--accent); outline-offset:-3px }.shared-check { position:absolute; z-index:2; top:6px; right:6px; width:24px; height:24px; display:none; place-items:center; border-radius:50%; color:#fff; background:var(--accent); box-shadow:0 1px 5px rgba(0,0,0,.3) }.shared-item.selected .shared-check { display:grid }.shared-selection { position:sticky; z-index:4; top:0; display:flex; align-items:center; gap:7px; padding:8px; border-radius:12px; background:var(--panel); box-shadow:0 3px 15px rgba(0,0,0,.12) }.shared-selection strong { margin-right:auto }.shared-selection button { padding:7px 9px; border:0; border-radius:9px; color:var(--accent); background:var(--panel-2) }.shared-icon { font-size:30px }.shared-more { width:100%; margin-top:9px }.info-empty { grid-column:1/-1; color:var(--muted); text-align:center }
.voice-message { width:min(320px,75vw); display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:20px; color:inherit; background:rgba(255,255,255,.12); text-align:left }.voice-inline-play { width:36px; height:36px; display:grid; place-items:center; flex:none; padding:0; border:0; border-radius:50%; color:#fff; background:var(--accent); font-weight:800 }.voice-inline-body { position:relative; min-width:0; display:grid; flex:1; grid-template-columns:1fr auto; align-items:center; gap:1px 7px }.voice-wave { grid-column:1/-1; overflow:hidden; height:22px; display:flex; align-items:center; gap:2px; opacity:.82 }.voice-wave i { width:2px; min-height:4px; flex:1; border-radius:999px; background:var(--muted); transition:background .08s linear }.voice-wave i.played { background:var(--accent) }.voice-inline-seek { position:absolute; inset:0 0 auto; width:100%; height:22px; margin:0; opacity:.001; cursor:pointer }.voice-inline-time { min-height:15px; color:var(--muted); font-size:11px }.voice-inline-speed { justify-self:end; min-width:31px; padding:1px 5px; border:0; border-radius:999px; color:var(--accent); background:rgba(255,255,255,.14); font-size:11px; font-weight:800 }.voice-message.playing .voice-wave { opacity:1 }.voice-message.buffering .voice-inline-play { position:relative; font-size:0 }.voice-message.buffering .voice-inline-play::after { content:''; width:15px; height:15px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:spin .75s linear infinite }.voice-message.playback-failed .voice-inline-play { background:#e45c68 }.voice-message.playback-failed .voice-inline-time { color:#e45c68 }.bubble.round-bubble,.own .bubble.round-bubble { max-width:min(244px,70%); padding:2px 2px 4px; background:transparent; box-shadow:none; overflow:visible }.round-bubble>.transcription-action { width:max-content; margin:5px 3px 0; padding:4px 8px; border-radius:999px; background:color-mix(in srgb,var(--panel) 76%,transparent); backdrop-filter:blur(8px) }.round-bubble>.transcription { margin:5px 2px; padding:7px 9px; border-radius:10px; background:color-mix(in srgb,var(--panel) 88%,transparent) }.round-bubble>.message-meta { margin:2px 6px 0; padding:2px 6px; border-radius:999px; background:color-mix(in srgb,var(--panel) 72%,transparent); backdrop-filter:blur(8px) }.round-message { position:relative; width:min(230px,65vw); aspect-ratio:1; overflow:hidden; display:grid; place-items:center; padding:0; border:0; border-radius:50%; color:#fff; background:#111 }.round-message img,.round-message video { width:100%; height:100%; margin:0; border-radius:50%; object-fit:cover }.round-message.playing img,.round-message.playing video,.round-message.playing>span { visibility:hidden }.round-message>span { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.45); font-size:22px }
.shared-story-card { position:relative; width:min(245px,68vw); height:270px; overflow:hidden; display:grid; place-items:center; padding:0; border:0; border-radius:13px; color:#fff; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 42%,#202631),#18202a); cursor:pointer }
.shared-story-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.shared-story-card>span { position:relative; z-index:1; padding:10px 15px; border-radius:22px; background:rgba(0,0,0,.58); backdrop-filter:blur(6px) }
.shared-story-card[disabled]>span { opacity:.8 }
.persistent-audio { position:fixed; z-index:80; top:max(10px,env(safe-area-inset-top)); left:50%; width:min(560px,calc(100vw - 24px)); min-height:64px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:16px; color:var(--text); background:color-mix(in srgb,var(--panel) 94%,transparent); box-shadow:0 8px 28px rgba(0,0,0,.22); backdrop-filter:blur(18px) }.persistent-audio>button { width:38px; height:38px; flex:none; border:0; border-radius:50%; color:var(--accent); background:var(--panel-2); font-weight:700 }.persistent-audio>div { min-width:0; display:grid; flex:1; grid-template-columns:1fr auto; gap:2px 8px }.persistent-audio strong { grid-column:1/-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.persistent-audio input { width:100%; accent-color:var(--accent) }.persistent-audio small { color:var(--muted); white-space:nowrap }
.round-player { position:fixed; z-index:82; right:22px; bottom:86px; width:190px; height:190px; overflow:hidden; border:0; border-radius:50%; background:#000; box-shadow:0 10px 30px rgba(0,0,0,.35); touch-action:none; transition:width .2s,height .2s }.round-player.expanded { width:min(330px,82vw); height:min(330px,82vw) }.round-player.anchored { box-shadow:none; transition:none }.round-player video { width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; clip-path:circle(50% at 50% 50%) }.round-player button { position:absolute; z-index:3; width:34px; height:34px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; color:#fff; background:rgba(0,0,0,.55) }.round-play { left:50%; top:50%; transform:translate(-50%,-50%) }.round-player.anchored:not(.paused) .round-play { opacity:0 }.round-player.anchored:hover .round-play,.round-player.anchored:focus-within .round-play { opacity:1 }.round-close { right:11px; top:11px }.round-speed { left:11px; top:11px; font-size:11px }.round-player.anchored .round-close,.round-player.anchored .round-source,.round-player.anchored .round-pip { display:none }.round-player.anchored .round-speed { top:auto; bottom:12px }.round-progress { position:absolute; z-index:2; inset:0; width:100%; height:100%; overflow:visible; transform:rotate(-90deg); pointer-events:none; touch-action:none }.round-progress circle { fill:none; stroke-width:4; vector-effect:non-scaling-stroke; pointer-events:stroke }.round-progress-track { stroke:rgba(255,255,255,.3) }.round-progress-value { stroke:#fff; stroke-linecap:round; transition:stroke-dashoffset .08s linear }.round-progress:focus-visible { outline:3px solid var(--accent); outline-offset:-5px; border-radius:50% }.round-seek-native { position:absolute!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important }
.round-recorder-dialog { width:min(430px,calc(100% - 20px)); padding:18px; border:0; border-radius:24px; color:#fff; background:#10141b; box-shadow:0 18px 60px rgba(0,0,0,.45) }.round-recorder-preview { position:relative; width:min(78vw,360px); aspect-ratio:1; overflow:hidden; margin:auto; border:4px solid rgba(255,255,255,.9); border-radius:50%; background:#000 }.round-recorder-preview video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1) }.round-recorder-preview span { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); padding:5px 10px; border-radius:14px; background:rgba(0,0,0,.55); font-weight:700 }.round-recorder-actions { display:flex; gap:8px; margin-top:16px }.round-recorder-actions button { min-height:42px; flex:1; border:0; border-radius:12px; color:var(--text); background:var(--panel-2) }.round-recorder-actions .primary { color:#fff; background:var(--accent) }.composer-tool.recording { color:#fff; background:#e53935; animation:record-pulse 1.1s infinite }
.attachment-dialog { width:min(760px,calc(100% - 18px)); height:min(820px,calc(100dvh - 18px)); padding:0; overflow:hidden; border:0; border-radius:20px; color:var(--text); background:var(--panel) }.attachment-dialog>header { height:58px; display:flex; align-items:center; padding:0 14px; border-bottom:1px solid var(--line) }.attachment-dialog>header h2 { margin:0 auto 0 0; font-size:18px }.attachment-composer { height:calc(100% - 58px); display:grid; grid-template-rows:minmax(0,1fr) auto auto auto auto; gap:10px; padding:12px }.attachment-preview { min-height:0; display:grid; place-items:center; overflow:hidden; border-radius:14px; background:#111 }.attachment-preview img,.attachment-preview video { width:100%; height:100%; object-fit:contain }.attachment-file { padding:24px; color:#fff; font-size:18px }.attachment-strip { display:flex; gap:8px; overflow-x:auto; padding:3px }.attachment-strip button { position:relative; width:62px; height:62px; flex:none; overflow:hidden; padding:0; border:2px solid transparent; border-radius:10px; background:var(--panel-2) }.attachment-strip button.active { border-color:var(--accent) }.attachment-strip button.upload-failed{border-color:var(--danger)}.attachment-strip button.upload-sent,.attachment-strip button.upload-staged{border-color:#2fbd73}.attachment-upload-state{position:absolute;right:3px;bottom:3px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 4px;border-radius:10px;color:#fff;background:rgba(8,20,30,.82);font-size:10px;font-weight:800}.upload-failed .attachment-upload-state{background:var(--danger)}.upload-sent .attachment-upload-state,.upload-staged .attachment-upload-state{background:#2fbd73}.attachment-strip img,.attachment-strip video { width:100%; height:100%; object-fit:cover }.attachment-actions { display:flex; flex-wrap:wrap; gap:8px }.attachment-actions button,.secondary-button { min-height:38px; display:inline-flex; align-items:center; padding:7px 11px; border:0; border-radius:10px; color:var(--accent); background:var(--panel-2) }.secondary-button input { display:none }.attachment-composer textarea { width:100%; resize:none; padding:10px 12px; border:1px solid var(--line); border-radius:11px; color:var(--text); background:var(--panel-2) }.attachment-composer>.primary { min-height:43px; border:0; border-radius:12px; color:#fff; background:var(--accent); font-weight:700 }.photo-editor { height:calc(100% - 58px); display:grid; grid-template-rows:minmax(0,1fr) auto auto; gap:10px; padding:12px; overflow:auto; background:#111 }.photo-editor canvas { width:100%; height:100%; min-height:280px; object-fit:contain; border-radius:10px; background:#080808; touch-action:none }.photo-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:9px; border-radius:12px; color:#fff; background:rgba(255,255,255,.1) }.photo-tools button,.photo-tools select,.photo-tools input[type=text] { min-height:36px; padding:6px 9px; border:0; border-radius:9px }.photo-tools label { display:flex; align-items:center; gap:5px; font-size:12px }.photo-tools input[type=range] { width:90px }.photo-editor-actions { display:flex; gap:8px }.photo-editor-actions button { flex:1; min-height:42px; border:0; border-radius:10px }.photo-editor-actions .primary { color:#fff; background:var(--accent) }
.attachment-picker-dialog { width:min(430px,calc(100% - 18px)) }.attachment-picker-dialog header small { display:block; color:var(--muted); font-size:12px }.attachment-picker-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:14px }.attachment-picker-grid button { min-height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:0; border-radius:15px; color:var(--text); background:var(--panel-2) }.attachment-picker-grid button:hover { background:color-mix(in srgb,var(--accent) 12%,var(--panel-2)) }.attachment-picker-grid span { width:43px; height:43px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--accent); font-size:22px }.attachment-picker-grid strong { font-size:13px }
.saved-tag-bar { display:flex; gap:7px; overflow-x:auto; padding:7px 12px; border-bottom:1px solid var(--line); background:var(--panel) }.saved-tag-bar button { flex:none; min-height:34px; padding:6px 11px; border:1px solid var(--line); border-radius:18px; color:var(--text); background:var(--panel-2) }.saved-tag-bar button.active { border-color:var(--accent); color:#fff; background:var(--accent) }.chat-search-bar .icon-button:disabled { opacity:.35 }
.photo-stage { position:relative; min-height:280px; overflow:hidden; display:grid; place-items:center; border-radius:10px; background:#080808; touch-action:none }.photo-stage canvas { display:block; width:auto; height:auto; min-height:0; max-width:100%; max-height:100%; border-radius:10px; touch-action:none }.photo-text-layer { position:absolute; z-index:3; pointer-events:none }.photo-text-item { position:absolute; max-width:92%; padding:3px 7px; border:1px dashed transparent; border-radius:8px; color:#fff; background:transparent; font-weight:700; line-height:1.1; white-space:pre-wrap; text-shadow:0 1px 3px #000; cursor:move; pointer-events:auto; touch-action:none }.photo-text-item.background { background:rgba(0,0,0,.58) }.photo-text-item.selected { border-color:#fff; box-shadow:0 0 0 2px var(--accent) }.photo-crop-box { position:absolute; z-index:4; min-width:48px; min-height:48px; border:2px solid #fff; box-shadow:0 0 0 9999px rgba(0,0,0,.48); cursor:move; touch-action:none }.photo-crop-box::before,.photo-crop-box::after { content:""; position:absolute; pointer-events:none }.photo-crop-box::before { left:33.333%; right:33.333%; top:0; bottom:0; border-left:1px solid rgba(255,255,255,.55); border-right:1px solid rgba(255,255,255,.55) }.photo-crop-box::after { top:33.333%; bottom:33.333%; left:0; right:0; border-top:1px solid rgba(255,255,255,.55); border-bottom:1px solid rgba(255,255,255,.55) }.photo-crop-box i { position:absolute; z-index:2; width:34px; height:34px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(0,0,0,.3) }.photo-crop-box i[data-crop-handle="tl"] { left:-17px; top:-17px }.photo-crop-box i[data-crop-handle="tr"] { right:-17px; top:-17px }.photo-crop-box i[data-crop-handle="bl"] { left:-17px; bottom:-17px }.photo-crop-box i[data-crop-handle="br"] { right:-17px; bottom:-17px }.photo-tools button.active { color:#fff; background:var(--accent) }
.member-list { display:grid }.member-row { display:flex; align-items:center; gap:11px; padding:8px 3px; border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent) }.member-row .avatar { width:42px; height:42px; flex-basis:42px; font-size:14px }.member-row>div:last-child { min-width:0; display:flex; flex-direction:column }.member-row small { color:var(--muted) }.member-identity{cursor:pointer;min-width:0}.member-identity:hover strong,.member-identity:focus strong{color:var(--accent)}
.group-controls { display:grid; gap:8px; margin-bottom:12px }.group-controls>input,.group-controls textarea,.invite-controls input { width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:10px; outline:0; background:var(--panel-2); resize:vertical }.invite-controls { display:flex; gap:6px }.invite-controls input { min-width:0; flex:1 }.invite-controls .info-action { flex:0 0 auto }.group-settings { display:grid; gap:6px; padding:8px; border-radius:10px; background:var(--panel-2) }.group-settings label { display:flex; align-items:center; gap:5px }.channel-settings { gap:10px; padding:12px }.channel-settings label { gap:10px }.channel-settings label>span { display:flex; flex-direction:column; gap:2px }.channel-settings label small,.channel-settings>small { color:var(--muted) }.member-row>div:nth-child(2) { min-width:0; flex:1; display:flex; flex-direction:column }.member-actions { display:flex!important; flex:0 0 auto!important; flex-direction:row!important; gap:4px }.member-actions .info-action { min-height:32px; padding:5px 7px; font-size:11px }
.forward-controls { padding:10px 12px 3px; border-bottom:1px solid var(--line) }.forward-controls input { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:12px; outline:0; background:var(--panel-2) }.forward-controls .filters { padding:8px 0 4px }
.forward-dialog[open] { display:flex; flex-direction:column }.forward-list { flex:1; min-height:250px; max-height:none; padding:8px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-content:start; gap:4px }.forward-row { position:relative; min-width:0; min-height:102px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:7px 3px; border:0; border-radius:12px; background:transparent; text-align:center; color:var(--text) }.forward-row:hover { background:var(--panel-2) }.forward-row.selected { background:color-mix(in srgb,var(--accent) 12%,transparent) }.forward-row>.avatar { width:56px; height:56px; font-size:18px }.forward-row>span { min-width:0; width:100%; display:flex; flex-direction:column }.forward-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px }.forward-row small { color:var(--muted); font-size:10px }.forward-check { position:absolute; top:42px; right:calc(50% - 30px); width:20px; height:20px; display:grid; place-items:center; border:2px solid var(--panel); border-radius:50%; color:#fff; background:var(--accent); font-size:12px; font-weight:700 }.forward-load-more { grid-column:1/-1; min-height:42px; border:0; border-radius:10px; color:var(--accent); background:transparent; font:inherit }.forward-confirm-bar { display:flex; align-items:flex-end; gap:7px; padding:8px 10px calc(8px + var(--safe-bottom)); border-top:1px solid var(--line); background:var(--panel) }.forward-confirm-bar textarea { flex:1; min-width:0; max-height:100px; resize:none; padding:10px 13px; border:1px solid var(--line); border-radius:18px; color:var(--text); background:var(--panel-2); font:inherit; outline:0 }.forward-confirm-bar>button { position:relative; width:50px; height:50px; flex:0 0 50px; border:0; border-radius:50%; font-size:20px }.forward-confirm-bar>button small { position:absolute; top:-5px; right:-5px; min-width:21px; height:21px; display:grid; place-items:center; padding:0 4px; border:2px solid var(--panel); border-radius:11px; color:#fff; background:var(--accent); font-size:11px }
.schedule-dialog { width:min(560px,calc(100% - 28px)); max-height:min(780px,92dvh); overflow:auto }.schedule-form { display:grid; gap:10px; padding:14px; border-bottom:1px solid var(--line) }.schedule-form p { margin:0; color:var(--muted) }.schedule-form label { display:grid; gap:5px; color:var(--muted); font-size:13px }.schedule-form input { padding:11px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:var(--panel-2) }.schedule-actions { display:flex; gap:7px }.schedule-actions button { flex:1; min-height:42px; border:1px solid var(--accent); border-radius:10px; color:var(--accent); background:transparent }.schedule-actions .primary { color:#fff; background:var(--accent) }.scheduled-section { padding:14px }.scheduled-section h3 { margin:0 0 9px }.scheduled-list { display:grid; gap:7px }.scheduled-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:10px; border-radius:11px; background:var(--panel-2) }.scheduled-summary { min-width:0; display:flex; flex-direction:column }.scheduled-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.scheduled-row small { color:var(--muted) }.scheduled-row-actions { display:flex; gap:3px }.scheduled-row button { padding:5px 7px; border:0; border-radius:7px; color:var(--accent); background:var(--panel); font-size:11px }.scheduled-reschedule { grid-column:1/-1; display:flex; gap:6px; padding-top:4px }.scheduled-reschedule.hidden{display:none}.scheduled-reschedule input{min-width:0;flex:1;padding:7px 8px;border:1px solid var(--line);border-radius:8px;color:var(--text);background:var(--panel)}
.message-info-dialog { width:min(500px,calc(100% - 28px)) }.message-info-content { display:grid; gap:1px; padding:10px }.message-info-row { display:grid; grid-template-columns:130px 1fr; gap:10px; padding:10px; border-radius:8px }.message-info-row:nth-child(odd) { background:var(--panel-2) }.message-info-row span { overflow-wrap:anywhere }.message-info-content>.info-action { margin-top:9px }
.text-selection-card{display:grid;gap:12px;padding:10px}.text-selection-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.4}.text-selection-card textarea{width:100%;min-height:150px;max-height:56vh;resize:vertical;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--panel-2);color:var(--text);font:inherit;line-height:1.45;user-select:text}.text-selection-card textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);border-color:var(--accent)}.text-selection-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.text-selection-actions .info-action{width:auto}
.bookmarks-dialog { width:min(620px,calc(100% - 28px)); max-height:min(820px,92dvh); overflow:hidden }.bookmarks-list { max-height:calc(92dvh - 62px); overflow:auto; padding:6px }.bookmark-row { display:flex; align-items:center; gap:11px; padding:10px; border-radius:12px; outline:0; cursor:pointer }.bookmark-row:hover,.bookmark-row:focus-visible { background:var(--panel-2) }.bookmark-row>.avatar { width:46px; height:46px; flex:0 0 46px; font-size:14px }.bookmark-row>div:nth-child(2) { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px }.bookmark-row strong,.bookmark-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.bookmark-row small { color:var(--accent) }.bookmark-remove { width:38px; height:38px; flex:0 0 38px; border:0; border-radius:50%; color:var(--muted); background:transparent }.bookmark-remove:hover { color:#d94a4a; background:var(--panel) }.bookmarks-empty { min-height:280px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; padding:30px; color:var(--muted); text-align:center }.bookmarks-empty>span { font-size:44px }.bookmarks-empty>strong { color:var(--text); font-size:18px }.bookmarks-empty small { max-width:340px }.download-row progress { display:block; width:100%; height:4px; margin-top:6px; accent-color:var(--accent) }.download-failed span { color:var(--danger) }.download-cancelled span { color:var(--muted) }.download-action { font-size:20px }
#downloadsDialog .bookmarks-list{max-height:calc(92dvh - 132px)}.downloads-actions{display:flex;align-items:center;gap:10px;padding:10px 14px 14px;border-top:1px solid var(--line)}.downloads-actions button{min-height:38px;padding:8px 12px;border:1px solid color-mix(in srgb,var(--danger) 40%,var(--line));border-radius:10px;background:var(--panel-2)}.downloads-actions small{color:var(--muted)}
.new-chat-button { position:absolute; z-index:7; right:20px; bottom:max(20px,var(--safe-bottom)); width:58px; height:58px; border:0; border-radius:50%; color:#fff; background:linear-gradient(145deg,var(--accent),#6262eb); box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 38%,transparent); font-size:28px }.new-chat-dialog { width:min(620px,calc(100% - 28px)); height:min(760px,92dvh); overflow:hidden }.new-chat-controls { padding:10px 12px 4px; border-bottom:1px solid var(--line) }.new-chat-controls>input { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:12px; outline:0; color:var(--text); background:var(--panel-2) }.new-chat-controls .filters { padding:8px 0 4px }.new-chat-list { height:calc(100% - 142px); overflow:auto; padding:5px }.new-chat-heading { padding:10px 12px 5px; color:var(--accent); font-size:13px; font-weight:700 }.new-chat-row { width:100%; display:flex; align-items:center; gap:11px; padding:9px; border:0; border-radius:11px; background:transparent; text-align:left }.new-chat-row:hover { background:var(--panel-2) }.new-chat-row>.avatar { width:48px; height:48px; flex:0 0 48px }.new-chat-row>span { min-width:0; display:flex; flex-direction:column }.new-chat-row strong,.new-chat-row small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.new-chat-row small { color:var(--muted) }.new-chat-empty { min-height:260px; display:grid; place-items:center; padding:30px; color:var(--muted); text-align:center }
.wallpaper-dialog { width:min(650px,calc(100% - 28px)) }.wallpaper-content { display:grid; gap:13px; padding:14px }.wallpaper-presets { display:flex; gap:12px; overflow-x:auto; padding:2px 2px 8px }.wallpaper-presets button { width:86px; flex:0 0 86px; display:grid; gap:5px; padding:0; border:0; color:var(--muted); background:transparent; text-align:center }.wallpaper-presets button>span { width:84px; height:112px; display:block; border:3px solid transparent; border-radius:14px; background-color:var(--wallpaper-a,#d5e6f0); background-image:radial-gradient(circle at 18% 28%,color-mix(in srgb,var(--wallpaper-b,#e5f0f7) 68%,transparent) 0 3px,transparent 4px),linear-gradient(145deg,var(--wallpaper-a,#d5e6f0),var(--wallpaper-b,#e5f0f7)); background-size:30px 30px,100% 100% }.wallpaper-presets button.active>span { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 28%,transparent) }.wallpaper-presets button.active small { color:var(--accent); font-weight:700 }.wallpaper-opacity { display:grid; grid-template-columns:1fr auto; gap:7px }.wallpaper-opacity input { grid-column:1/-1; width:100%; accent-color:var(--accent) }.wallpaper-content>small { color:var(--muted) }.wallpaper-content>.secondary-button { justify-content:center }
.folder-settings-dialog { width:min(500px,calc(100% - 28px)); max-height:min(760px,92dvh); overflow:auto }.folder-settings-dialog>p { margin:0; padding:12px 16px; color:var(--muted) }.folder-settings-list { display:grid; gap:3px; padding:0 10px 10px }.folder-order-row { min-height:54px; display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:10px; padding:6px 8px; border-radius:11px; background:var(--panel-2) }.folder-order-row>span { color:var(--muted); font-size:20px }.folder-order-row>div { display:flex; gap:4px }.folder-order-row button { width:38px; height:38px; border:0; border-radius:9px; color:var(--accent); background:var(--panel) }.folder-order-row button:disabled { opacity:.28 }.folder-reset { width:calc(100% - 20px); min-height:42px; margin:0 10px 12px; border:1px solid var(--line); border-radius:11px; color:var(--accent); background:var(--panel-2) }
  .settings-dialog { width:min(600px,calc(100% - 28px)); max-height:min(850px,92dvh); overflow:hidden }.settings-content { max-height:calc(92dvh - 62px); overflow:auto; padding:6px 14px 18px }.settings-content section { padding:13px 0; border-bottom:1px solid var(--line) }.settings-content section:last-child { border:0 }.settings-content h3 { margin:0 0 8px; color:var(--accent); font-size:14px }.setting-row { min-height:54px; display:flex; align-items:center; gap:15px; padding:8px 4px }.setting-row>div { min-width:0; flex:1; display:flex; flex-direction:column }.setting-row small { color:var(--muted) }.setting-row>span { flex:1 }.setting-row button,.setting-row select,.settings-actions button { min-height:36px; padding:7px 11px; border:1px solid var(--line); border-radius:10px; color:var(--accent); background:var(--panel-2) }.setting-row input[type=range] { width:min(220px,42vw); accent-color:var(--accent) }.setting-row input[type=checkbox] { width:22px; height:22px; accent-color:var(--accent) }.diagnostics-summary { display:grid; gap:5px; padding:11px; border-radius:11px; background:var(--panel-2); font-size:13px }.diagnostics-summary div { display:flex; justify-content:space-between; gap:10px }.diagnostics-summary span { color:var(--muted); text-align:right }.settings-actions { display:flex; gap:8px; margin-top:10px }.settings-actions button { flex:1 }.compact .chat-row { height:62px; min-height:62px; max-height:62px; padding-top:5px; padding-bottom:5px }.compact .message-row { margin:1px 0 }.compact .bubble { padding:6px 9px 5px }.account-form { display:grid; grid-template-columns:1fr 1fr; gap:8px }.account-form input,.account-form button { min-height:40px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2) }.account-form button { grid-column:1/-1; color:var(--accent) }.story-reply { position:absolute; z-index:8; left:12px; right:12px; bottom:12px; display:grid; gap:5px; padding:7px; border-radius:16px; background:rgba(0,0,0,.55); backdrop-filter:blur(12px) }.story-reactions { display:flex; justify-content:space-evenly; gap:2px }.story-reactions button { min-width:36px; min-height:36px; padding:3px; border:0; border-radius:50%; color:#fff; background:transparent; font-size:23px }.story-reactions button:hover { background:rgba(255,255,255,.14) }.story-reply-input { display:flex; gap:7px }.story-reply input { min-width:0; flex:1; padding:10px 12px; border:1px solid rgba(255,255,255,.22); border-radius:12px; color:#fff; outline:0; background:rgba(255,255,255,.12) }.story-reply input::placeholder { color:rgba(255,255,255,.7) }.story-reply-input>button { min-width:44px; border:0; border-radius:12px; color:#fff; background:var(--accent); font-size:20px }.story-viewer:has(.story-reply) .story-caption { bottom:122px }.story-viewer.paused .story-progress span.active::after { animation-play-state:paused }
.persistent-audio { width:min(640px,calc(100vw - 24px)); gap:8px; padding:8px 10px }.persistent-audio>.player-skip { width:30px; height:30px; font-size:24px }.persistent-audio>button:disabled { opacity:.35 }.persistent-audio>.player-source { min-width:0; display:grid; flex:1; grid-template-columns:1fr auto; gap:1px 8px; padding:0; border:0; border-radius:0; color:inherit; text-align:left; background:transparent; cursor:pointer }.player-source strong,.player-source>span:not(.player-progress) { grid-column:1/-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.player-source>span:not(.player-progress) { color:var(--muted); font-size:11px }.player-progress { grid-column:1/-1; display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px }.round-source { right:11px; bottom:38px }.round-pip { left:11px; bottom:38px }.round-player.in-pip { border-color:var(--accent) }
.story-stage .story-media-failed { visibility:hidden }.story-header { z-index:9 }.story-header>span { min-width:0 }.story-header strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.story-header small { display:flex; align-items:center; gap:6px }.story-service { padding:1px 5px; border-radius:999px; color:#fff; background:#2481cc; font-size:9px; letter-spacing:.02em }.story-service-whatsapp { background:#25a866 }.story-service-max { background:#786be8 }.story-menu { position:relative; margin-left:auto }.story-menu-button { width:32px; height:32px; border:0; border-radius:50%; color:#fff; background:rgba(0,0,0,.34); font-size:23px }.story-menu-panel { position:absolute; z-index:12; top:36px; right:0; min-width:190px; display:grid; overflow:hidden; padding:5px; border:1px solid rgba(255,255,255,.14); border-radius:13px; background:rgba(13,20,28,.96); box-shadow:0 14px 34px rgba(0,0,0,.42) }.story-menu-panel button { min-height:40px; padding:8px 11px; border:0; border-radius:9px; color:#fff; background:transparent; font:inherit; text-align:left }.story-menu-panel button:hover { background:rgba(255,255,255,.12) }.story-load-error { position:absolute; z-index:7; inset:0; display:grid; place-content:center; justify-items:center; gap:12px; padding:30px; color:#fff; text-align:center; background:radial-gradient(circle,rgba(37,55,72,.86),rgba(8,13,19,.96)) }.story-load-error button { padding:10px 18px; border:0; border-radius:12px; color:#fff; background:var(--accent); font:inherit; font-weight:700 }
.mobile-only { display:none }
@media (max-width:740px) {
  .app-shell { position:fixed; inset:0; grid-template-columns:1fr }
  .sidebar { width:100%; height:100dvh; border:0 }.conversation { position:fixed; inset:0; width:100%; height:100dvh; z-index:20; transform:translateX(100%); transition:transform .18s ease }
  .app-shell.chat-open .conversation { transform:translateX(0) }.app-shell.chat-open .sidebar { visibility:hidden }
  .mobile-only { display:grid }.chat-header { padding-left:6px }
  .bubble { max-width:88% }.message-list { padding:12px 9px }
  .album-grid { width:min(76vw,430px) }.media-nav { top:auto; bottom:18px; width:48px; height:48px; transform:none }.media-previous { left:18px }.media-next { right:18px }
  .chat-view { height:100dvh }.composer { padding-left:9px; padding-right:9px }.welcome { display:none }
  .emoji-panel { right:8px; bottom:calc(69px + var(--safe-bottom)); width:calc(100% - 16px) }.emoji-grid { grid-template-columns:repeat(7,1fr) }
  .connection-auth { padding-left:0; flex-direction:column }.connection-auth .primary { width:100% }
  .chat-info-dialog,.forward-dialog { width:100%; max-width:none; max-height:92dvh; margin:auto 0 0; border-radius:20px 20px 0 0 }.info-actions { grid-template-columns:1fr 1fr }.shared-grid { grid-template-columns:repeat(3,1fr) }
  .schedule-dialog { width:100%; max-width:none; max-height:92dvh; margin:auto 0 0; border-radius:20px 20px 0 0 }.scheduled-row { align-items:flex-start; flex-direction:column }.member-actions { flex-wrap:wrap }
  .delivery-settings { align-items:flex-start; flex-direction:column }.message-info-dialog,.settings-dialog { width:100%; max-width:none; margin:auto 0 0; border-radius:20px 20px 0 0 }.message-info-row { grid-template-columns:1fr }.setting-row input[type=range] { width:38vw }.account-form { grid-template-columns:1fr }
}
@media (max-width:420px) { .login-card { padding:28px 22px }.filters { padding-left:8px;padding-right:8px }.chat-row { padding-left:9px;padding-right:9px }.video-note{width:220px;height:220px} }
.external-link-url { margin:0 0 16px; padding:12px; border-radius:12px; background:var(--panel-2); color:var(--muted); overflow-wrap:anywhere; user-select:text }
.attachment-composer{grid-template-rows:minmax(0,1fr) auto auto auto auto auto}.attachment-upload-info{display:grid;gap:5px;padding:8px 10px;border-radius:10px;background:var(--panel-2)}.attachment-upload-info>div{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}.attachment-upload-info span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-upload-info progress{width:100%;accent-color:var(--accent)}.attachment-upload-info.failed{background:color-mix(in srgb,var(--danger) 11%,var(--panel-2))}.attachment-upload-info.failed>div{color:var(--danger)}.attachment-upload-info.failed progress{accent-color:var(--danger)}
.message-upload-progress{display:flex;align-items:center;gap:7px;clear:both;min-width:150px;padding-top:7px;color:var(--muted);font-size:11px}.message-upload-progress progress{min-width:0;flex:1;height:5px;accent-color:var(--accent)}
.topic-avatar { background:var(--topic-color,#4f8bd6); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) }
.topic-avatar .topic-glyph { display:grid; place-items:center; width:100%; height:100%; padding-bottom:5px; font-size:31px; font-weight:800; line-height:1; transform:rotate(180deg) }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important } }