:root { color-scheme:dark; --bg:#050505; --panel:#0c0c0c; --line:#242424; --text:#f2f2f2; --muted:#777; --surface:#141414; --surface-2:#1b1b1b; --accent:#7c8cff; --accent-text:#fff; --theme-gradient:none; }
html[data-palette="ocean"] { --bg:#02090d; --panel:#071218; --line:#17303c; --text:#e8f8ff; --muted:#6e91a1; --surface:#0b1b23; --surface-2:#102731; }
html[data-palette="violet"] { --bg:#08050d; --panel:#110b19; --line:#30213e; --text:#f7efff; --muted:#9682a8; --surface:#1a1025; --surface-2:#241632; }
html[data-palette="emerald"] { --bg:#030a07; --panel:#08140f; --line:#1a3528; --text:#eafff4; --muted:#769889; --surface:#0d1e17; --surface-2:#132a20; }
html[data-palette="rose"] { --bg:#0b0508; --panel:#170b11; --line:#3c202d; --text:#fff0f6; --muted:#a27d8d; --surface:#211019; --surface-2:#2d1622; }
html[data-palette="amber"] { --bg:#0b0803; --panel:#171107; --line:#3b2d17; --text:#fff7e8; --muted:#a49374; --surface:#21180b; --surface-2:#2d2110; }
html[data-palette="midnight"] { --bg:#02040c; --panel:#070b19; --line:#1c2946; --text:#edf3ff; --muted:#7483a2; --surface:#0c1328; --surface-2:#111c37; }
html[data-gradient="aurora"] { --theme-gradient:radial-gradient(circle at 12% 15%,rgba(61,255,176,.24),transparent 38%),radial-gradient(circle at 88% 82%,rgba(115,74,255,.28),transparent 42%); }
html[data-gradient="sunset"] { --theme-gradient:radial-gradient(circle at 5% 90%,rgba(255,92,61,.28),transparent 42%),radial-gradient(circle at 90% 8%,rgba(255,71,151,.23),transparent 40%); }
html[data-gradient="ocean"] { --theme-gradient:radial-gradient(circle at 10% 10%,rgba(0,181,255,.25),transparent 42%),radial-gradient(circle at 90% 90%,rgba(0,84,180,.32),transparent 46%); }
html[data-gradient="neon"] { --theme-gradient:radial-gradient(circle at 0 20%,rgba(0,255,224,.19),transparent 38%),radial-gradient(circle at 100% 70%,rgba(255,0,184,.23),transparent 42%); }
html[data-gradient="smoke"] { --theme-gradient:radial-gradient(circle at 15% 20%,rgba(255,255,255,.11),transparent 38%),radial-gradient(circle at 85% 75%,rgba(120,130,150,.12),transparent 45%); }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; overflow:hidden; background:var(--theme-gradient),var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.corner-link { position:fixed; z-index:55; top:4px; left:5px; padding:2px 4px; border-radius:4px; background:rgba(5,5,5,.65); color:#555; font-size:8px; line-height:1; text-decoration:none; opacity:.65; }
.corner-link:hover { color:#ddd; opacity:1; }
button, textarea { font:inherit; }
.app-shell { width:min(1080px,100%); height:100dvh; margin:0 auto; display:grid; grid-template-columns:minmax(0,800px) 280px; }
.app-shell.voice-open { width:min(1360px,100%); grid-template-columns:280px minmax(0,800px) 280px; }
.chat { position:relative; min-width:0; height:100dvh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; border-left:1px solid var(--line); background:var(--panel); }
.topbar { min-width:0; min-height:72px; padding:15px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); }
.topbar > div { min-width:0; }
.topbar h1 { margin:0; font-size:17px; font-weight:650; }
.topbar p { margin:5px 0 0; color:var(--muted); font-size:11px; display:flex; align-items:center; gap:6px; }
#statusDot { width:6px; height:6px; border-radius:50%; background:#666; }
#statusDot.online { background:#3ecf8e; box-shadow:0 0 10px rgba(62,207,142,.35); }
#statusDot.error { background:#e15c5c; }
.topbar button { flex:0 0 auto; padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:#111; color:#aaa; font-size:11px; cursor:pointer; }
.topbar button:hover { color:#fff; border-color:#3b3b3b; }
.topbar .desktop-app-download { flex:0 0 auto; padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:#111; color:#aaa; font-size:11px; line-height:normal; text-decoration:none; }
.topbar .desktop-app-download:hover { color:#fff; border-color:#3b3b3b; }
.topbar #gameModeButton.active { border-color:#4c8f72; background:#123326; color:#7ce7b5; }
.topbar #voiceButton { display:flex; align-items:center; gap:5px; }
.topbar #voiceButton[hidden] { display:none; }
.topbar #voiceButton span { min-width:14px; height:14px; padding:0 4px; display:grid; place-items:center; border-radius:7px; background:#292929; color:#888; font-size:8px; }
.topbar #voiceButton.active { border-color:color-mix(in srgb,var(--accent) 60%,#333); background:color-mix(in srgb,var(--accent) 18%,#111); color:var(--text); }
.topbar #voiceButton.active span { background:var(--accent); color:var(--accent-text); }
.topbar .profile-avatar { width:34px; height:34px; padding:0; overflow:visible; display:grid; place-items:center; border-radius:50%; }
.profile-avatar.loading { opacity:.55; }
#currentAvatar { width:100%; height:100%; display:block; }
#usersToggle { display:none; }
.account { display:flex; align-items:center; gap:7px; }
.account>span { max-width:130px; overflow:hidden; text-overflow:ellipsis; color:#aaa; font-size:11px; }
.messages { overflow-y:auto; padding:28px 20px; scrollbar-width:thin; scrollbar-color:#333 transparent; }
.voice-panel { position:relative; min-width:0; height:100dvh; overflow:hidden; display:grid; grid-template-rows:auto minmax(72px,1fr) auto; border-left:1px solid var(--line); background:color-mix(in srgb,var(--panel) 97%,#111); animation:voicePanelIn .2s cubic-bezier(.2,.85,.25,1); transform-origin:left center; }
.voice-panel[hidden] { display:none; }
.voice-panel>header { min-height:72px; padding:14px 14px 12px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); }
.voice-panel>header>div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.voice-panel>header strong { color:var(--text); font-size:12px; }
.voice-panel>header small { color:var(--muted); font-size:9px; }
.voice-panel>header small.connected { color:#57d99a; }
.voice-panel>header small.error { color:#ff7272; }
.voice-panel>header button { width:32px; height:32px; padding:0; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:#777; font-size:21px; cursor:pointer; }
.voice-panel>header button:hover { background:var(--surface); color:var(--text); }
.voice-participants { min-height:0; overflow-y:auto; padding:12px 9px; scrollbar-width:thin; scrollbar-color:#333 transparent; }
.voice-participants>p { margin:22px 10px; color:var(--muted); font-size:10px; text-align:center; }
.voice-participants>.voice-alone-note { margin:14px 5px 4px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:#8c8c8c; line-height:1.45; }
.voice-user { min-width:0; padding:9px 8px; display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; border-radius:10px; transition:background .15s ease; }
.voice-user.speaking { background:color-mix(in srgb,var(--accent) 12%,transparent); }
.voice-user .voice-avatar { width:36px; height:36px; font-size:11px; transition:filter .15s ease,box-shadow .15s ease; }
.voice-user.speaking .voice-avatar { box-shadow:0 0 0 2px #43d98f,0 0 13px rgba(67,217,143,.48); }
.voice-user-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.voice-user strong { overflow:hidden; color:#bbb; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.voice-user small { color:#666; font-size:9px; }
.voice-user.speaking .voice-user-state { color:#54d99a; font-weight:700; }
.voice-user-indicators { min-width:48px; display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.voice-user.sharing { background:color-mix(in srgb,var(--accent) 10%,transparent); }
.voice-user.sharing .voice-user-state { color:var(--accent); }
.voice-watch-screen { height:27px; padding:0 8px; border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line)); border-radius:7px; background:color-mix(in srgb,var(--accent) 16%,var(--surface)); color:var(--text); font-size:8px; font-weight:750; cursor:pointer; }
.voice-watch-screen:disabled { opacity:.45; cursor:wait; }
.voice-speaking-indicator { width:24px; height:22px; display:flex; align-items:center; justify-content:center; gap:2px; border:1px solid rgba(67,217,143,.18); border-radius:7px; background:rgba(67,217,143,.06); opacity:.22; transform:scale(.82); transition:opacity .14s ease,transform .14s ease,border-color .14s ease; }
.voice-speaking-indicator b { width:2px; height:5px; border-radius:2px; background:#54d99a; box-shadow:0 0 5px rgba(67,217,143,.55); animation:voiceLevelBar .58s ease-in-out infinite alternate; animation-play-state:paused; }
.voice-speaking-indicator b:nth-child(2) { height:11px; animation-delay:-.29s; }
.voice-speaking-indicator b:nth-child(3) { height:7px; animation-delay:-.43s; }
.voice-user.speaking .voice-speaking-indicator { border-color:rgba(67,217,143,.55); opacity:1; transform:scale(1); }
.voice-user.speaking .voice-speaking-indicator b { animation-play-state:running; }
.voice-mic-state { width:20px; height:20px; display:grid; place-items:center; border-radius:6px; color:#777; font:700 10px/1 system-ui,sans-serif; }
.voice-user.muted .voice-mic-state::before { content:'×'; color:#e66; }
.voice-user:not(.muted) .voice-mic-state::before { content:'●'; color:#54d99a; font-size:7px; }
.voice-actions { padding:12px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; border-top:1px solid var(--line); background:color-mix(in srgb,var(--surface) 48%,var(--panel)); }
.voice-mic-check { grid-column:1/-1; min-width:0; margin-bottom:3px; display:grid; grid-template-columns:auto minmax(70px,1fr); align-items:center; gap:8px; color:#888; font-size:9px; }
.voice-mic-check[hidden] { display:none; }
.voice-mic-check>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.voice-mic-meter { height:6px; overflow:hidden; border-radius:999px; background:#252525; }
.voice-mic-meter>i { width:100%; height:100%; display:block; border-radius:inherit; background:#727272; transform:scaleX(0); transform-origin:left center; transition:transform .08s linear,background .14s ease; }
.voice-mic-check.signal { color:#63dca0; }
.voice-mic-check.signal .voice-mic-meter>i { background:#48d894; box-shadow:0 0 8px rgba(72,216,148,.48); }
.voice-mic-check.error { color:#ff747c; }
.voice-mic-check.error .voice-mic-meter>i { background:#d95761; }
.voice-actions button { min-width:0; height:42px; padding:0 7px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:#aaa; font-size:9px; font-weight:650; cursor:pointer; }
.voice-actions button:hover { border-color:#555; color:#fff; }
.voice-actions button.active { border-color:#c94f5b; background:#35171b; color:#ff858e; }
.voice-actions button.attention { border-color:#d8a13d; background:#382812; color:#ffd27a; animation:voiceSoundAttention 1.15s ease-in-out infinite alternate; }
.voice-actions .voice-join { grid-column:1/-1; border-color:color-mix(in srgb,var(--accent) 65%,#333); background:var(--accent); color:var(--accent-text); font-size:10px; }
.voice-actions .voice-leave { color:#ff747c; }
.screen-share-backdrop { position:fixed; z-index:190; inset:0; pointer-events:none; }
.screen-share-backdrop[hidden] { display:none; }
.screen-share-card { position:absolute; right:18px; bottom:82px; width:min(720px,calc(100vw - 36px)); height:min(460px,calc(100dvh - 118px)); overflow:hidden; pointer-events:auto; display:grid; grid-template-rows:auto minmax(0,1fr); border:1px solid #343434; border-radius:14px; background:#050505; box-shadow:0 22px 75px rgba(0,0,0,.82); animation:modalIn .2s cubic-bezier(.2,.85,.25,1); }
.screen-share-card>header { min-height:62px; padding:10px 12px 10px 17px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #292929; background:#111; }
.screen-share-card>header>div:first-child { min-width:0; display:flex; flex-direction:column; gap:3px; }
.screen-share-card>header strong { overflow:hidden; color:#eee; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.screen-share-card>header small { color:#777; font-size:9px; }
.screen-share-card>header>div:last-child { display:flex; gap:7px; }
.screen-share-card>header button { height:36px; padding:0 11px; border:1px solid #333; border-radius:9px; background:#191919; color:#aaa; font-size:9px; cursor:pointer; }
#screenShareClose { width:36px; padding:0; font-size:21px; }
.screen-share-stage { position:relative; min-height:0; display:grid; place-items:center; overflow:hidden; background:#000; }
.screen-share-stage video { width:100%; height:100%; display:block; object-fit:contain; background:#000; }
.screen-share-stage p { position:absolute; margin:0; color:#777; font-size:11px; }
.screen-share-stage p[hidden] { display:none; }
.screen-share-card:fullscreen { position:static; width:100%; height:100%; border:0; border-radius:0; }
@media (max-width:600px) { .screen-share-card{right:8px;bottom:76px;width:calc(100vw - 16px);height:min(54dvh,420px)}.screen-share-card>header{min-height:52px;padding-left:12px}.screen-share-card>header button:first-child{display:none}.voice-watch-screen{padding-inline:6px}.voice-user-indicators{min-width:42px} }
@keyframes voicePanelIn { from { opacity:0; transform:translateX(-14px); } to { opacity:1; transform:none; } }
@keyframes voiceLevelBar { from { transform:scaleY(.45); } to { transform:scaleY(1.35); } }
@keyframes voiceSoundAttention { from { box-shadow:0 0 0 rgba(216,161,61,0); } to { box-shadow:0 0 14px rgba(216,161,61,.3); } }
@media (prefers-reduced-motion:reduce) { .voice-speaking-indicator b,.voice-actions button.attention { animation:none; } }
.empty { height:100%; display:grid; place-content:center; text-align:center; color:var(--muted); }
.empty > span { color:#292929; font-size:22px; }
.empty h2 { margin:12px 0 5px; color:#aaa; font-size:14px; font-weight:600; }
.empty p { margin:0; max-width:320px; font-size:11px; line-height:1.5; }
.message { position:relative; width:100%; margin-bottom:15px; display:flex; flex-direction:column; align-items:flex-start; border-radius:10px; animation:appear .18s ease; transition:background-color .18s ease,box-shadow .18s ease; }
.message.own { align-items:flex-end; }
.drop-overlay { position:absolute; z-index:80; inset:10px; display:grid; place-items:center; border:2px dashed #777; border-radius:15px; background:rgba(7,7,7,.92); color:#eee; font-size:15px; font-weight:700; pointer-events:none; }
.drop-overlay[hidden] { display:none; }
.bubble { max-width:78%; padding:10px 13px; border:1px solid var(--line); border-radius:4px 14px 14px 14px; background:#141414; color:#ddd; font-size:13px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.bubble a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.message.own .bubble { border-radius:14px 4px 14px 14px; background:#f0f0f0; color:#111; border-color:#f0f0f0; }
.message.grouped { margin-bottom:3px; }
.message.grouped.group-end { margin-bottom:15px; }
.message.grouped .author,.message.grouped .meta { display:none; }
.message.grouped .meta.edited { display:block; }
.message.group-start { margin-bottom:3px; }
.message.grouped .bubble { border-radius:5px 14px 14px 5px; }
.message.grouped.own .bubble { border-radius:14px 5px 5px 14px; }
.meta { padding-top:5px; color:#555; font-size:9px; }
.meta:empty { display:none; }
.meta.receipt-meta { display:flex; align-items:center; gap:5px; }
.message.grouped .meta.receipt-meta { display:flex; }
.read-receipt { min-width:0; padding:0; border:0; background:none; color:#555; font:700 10px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:-2px; cursor:default; }
.read-receipt.read { color:var(--accent); cursor:pointer; }
.read-receipt.read:hover { filter:brightness(1.25); }
.message-reactions { max-width:78%; padding-top:5px; display:flex; flex-wrap:wrap; gap:5px; }
.message.own .message-reactions { justify-content:flex-end; }
.message-reaction { min-width:38px; height:27px; padding:2px 8px; display:flex; align-items:center; justify-content:center; gap:5px; border:1px solid var(--line); border-radius:8px; background:#171717; color:#aaa; cursor:pointer; }
.message-reaction span { font-size:16px; line-height:1; }
.message-reaction b { font-size:10px; font-weight:600; }
.message-reaction:hover { border-color:#555; background:#222; }
.message-reaction.mine { border-color:color-mix(in srgb,var(--accent) 70%,#333); background:color-mix(in srgb,var(--accent) 16%,#151515); color:var(--text); }
.reply-preview { max-width:78%; margin-bottom:4px; padding:5px 9px; border-left:2px solid #666; border-radius:3px 7px 7px 3px; background:#111; color:#777; cursor:pointer; }
.reply-preview strong,.reply-preview span { display:block; max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reply-preview strong { color:#aaa; font-size:9px; }
.reply-preview span { margin-top:2px; font-size:9px; }
.reply-preview:hover { background:#171717; }
.message.reply-target { background:color-mix(in srgb,var(--accent) 9%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent); }
.message.own .meta { text-align:right; }
.author { margin-bottom:4px; display:flex; align-items:center; gap:6px; color:#777; font-size:9px; font-weight:600; }
.message.own .author { flex-direction:row-reverse; text-align:right; }
.author-time { color:#4f4f4f; font:400 8px/1 Inter,ui-sans-serif,system-ui,sans-serif; }
.avatar-image,.message-avatar,.user-avatar,.reader-avatar,.voice-avatar { position:relative; overflow:visible; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:#aaa; }
.avatar-image { width:100%; height:100%; }
.message-avatar { width:22px; height:22px; font-size:9px; }
.user-avatar { width:30px; height:30px; font-size:10px; }
.avatar-visual { position:absolute; inset:0; overflow:hidden; display:grid; place-items:center; border-radius:inherit; background:#252525; }
.avatar-visual>b,.avatar-visual>img { grid-area:1/1; }
.avatar-visual>b { font:600 1em/1 Inter,ui-sans-serif,system-ui,sans-serif; }
.avatar-visual>img { z-index:1; width:100%; height:100%; object-fit:cover; }
.avatar-visual>img.avatar-cropped { position:absolute; max-width:none; object-fit:fill; transform:translate(-50%,-50%); }
.avatar-frame-silver::after,.avatar-frame-gold::after,.avatar-frame-neon::after,.avatar-frame-ember::after,.avatar-frame-frost::after,.avatar-frame-royal::after,.avatar-frame-rainbow::after { content:''; position:absolute; z-index:2; inset:-3px; border:2px solid; border-radius:50%; pointer-events:none; }
.avatar-frame-silver::after { border-color:#d9e0e7; box-shadow:0 0 0 1px #69737d,0 0 7px rgba(220,232,242,.42); }
.avatar-frame-gold::after { border-color:#ffd76a; box-shadow:0 0 0 1px #875d0d,0 0 9px rgba(255,190,45,.62); }
.avatar-frame-neon::after { border-color:#53f6ff; box-shadow:0 0 5px #53f6ff,0 0 12px rgba(127,74,255,.72),inset 0 0 5px #b65cff; }
.avatar-frame-ember::after { border-color:#ff7849; box-shadow:0 -2px 7px #ffcc4b,0 3px 11px #d52d18; }
.avatar-frame-frost::after { border-color:#bdefff; box-shadow:0 0 0 1px #4d9dce,0 0 10px rgba(111,211,255,.72); }
.avatar-frame-royal::after { border-color:#d7a7ff; box-shadow:0 0 0 2px #6d3d91,0 0 10px rgba(205,119,255,.65); }
.avatar-frame-rainbow::after { border-color:#ff5c7a; box-shadow:2px 0 7px #ff5c7a,0 2px 7px #ffe66d,-2px 0 7px #5cf2ff,0 -2px 7px #b56cff; animation:avatarRainbow 2.4s linear infinite; }
@keyframes avatarRainbow { 50% { filter:hue-rotate(180deg); transform:rotate(180deg); } 100% { filter:hue-rotate(360deg); transform:rotate(360deg); } }
.attachment { box-sizing:border-box; width:fit-content; max-width:min(78%,480px,calc(100vw - 64px)); padding-top:5px; align-self:flex-start; }
.message.own>.attachment { align-self:flex-end; margin-left:auto; }
.message:not(.own)>.attachment { align-self:flex-start; margin-right:auto; }
.attachment>a { display:block; max-width:100%; }
.youtube-preview { width:min(480px,calc(100vw - 64px)); max-width:78%; margin-top:5px; overflow:hidden; aspect-ratio:16/9; border:1px solid var(--line); border-radius:10px; background:#000; }
.youtube-preview iframe { display:block; width:100%; height:100%; border:0; }
.site-preview { width:min(480px,calc(100vw - 64px)); max-width:78%; margin-top:5px; overflow:hidden; display:block; border:1px solid var(--line); border-radius:10px; background:#111; color:#ddd; text-decoration:none; }
.site-preview:hover { border-color:#444; }
.site-preview>img { display:block; width:100%; max-height:240px; object-fit:cover; background:#080808; }
.site-preview>span { display:flex; flex-direction:column; gap:4px; padding:11px 13px 12px; }
.site-preview small { overflow:hidden; color:#777; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.site-preview strong { overflow:hidden; font-size:12px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.site-preview p { margin:0; display:-webkit-box; overflow:hidden; color:#999; font-size:10px; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.attachment video { display:block; box-sizing:border-box; width:auto; height:auto; max-width:100%; max-height:340px; border:1px solid var(--line); border-radius:10px; background:transparent; object-fit:contain; }
.attachment img { display:block; box-sizing:border-box; width:auto; max-width:100%; max-height:420px; border:1px solid var(--line); border-radius:10px; object-fit:contain; background:#080808; }
.attachment img.chat-image { cursor:zoom-in; }
.image-viewer { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; overflow:hidden; background:rgba(0,0,0,.92); backdrop-filter:blur(7px); }
.image-viewer-stage { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; touch-action:none; }
.image-viewer-stage>img { max-width:calc(100vw - 42px); max-height:calc(100vh - 92px); object-fit:contain; border:0; border-radius:3px; background:transparent; box-shadow:0 22px 80px rgba(0,0,0,.65); cursor:zoom-in; user-select:none; transition:transform .12s ease; }
.image-viewer-stage>img.zoomed { cursor:grab; transition:none; }
.image-viewer-stage>img.dragging { cursor:grabbing; }
.image-viewer-toolbar { position:absolute; z-index:2; top:12px; right:12px; padding:5px; display:flex; align-items:center; gap:4px; border:1px solid #3a3a3a; border-radius:11px; background:rgba(18,18,18,.9); box-shadow:0 8px 30px rgba(0,0,0,.55); }
.image-viewer-toolbar button,.image-viewer-toolbar a { min-width:32px; height:32px; padding:0 9px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:#aaa; font:11px/1 Inter,ui-sans-serif,system-ui,sans-serif; text-decoration:none; cursor:pointer; }
.image-viewer-toolbar button:hover,.image-viewer-toolbar a:hover { background:#292929; color:#fff; }
.image-viewer-toolbar button:last-child { font-size:20px; }
@media (max-width:520px) { .image-viewer-toolbar{top:8px;right:8px;left:8px;justify-content:center}.image-viewer-toolbar button,.image-viewer-toolbar a{padding-inline:7px}.image-viewer-stage>img{max-width:calc(100vw - 20px);max-height:calc(100vh - 80px)} }
.attachment.external-gif { position:relative; width:min(480px,78%,calc(100vw - 64px)); max-width:min(78%,480px,calc(100vw - 64px)); overflow:hidden; border-radius:10px; background:#080808; }
.attachment.external-gif>a { display:block; width:100%; height:100%; }
.attachment.external-gif img { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; }
.audio-box { width:min(420px,calc(100vw - 72px)); max-width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; background:#111; }
.audio-head { margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.audio-head strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#ccc; font-size:10px; }
.audio-head a { flex:0 0 auto; color:#777; font-size:9px; text-decoration:none; }
.audio-head a:hover { color:#fff; }
.audio-box audio { display:block; width:100%; height:40px; }
.file-download { display:flex; align-items:center; gap:10px; min-width:210px; max-width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:#121212; color:#ddd; text-decoration:none; }
.file-download:hover { border-color:#444; }
.file-download b { display:grid; place-items:center; width:32px; height:32px; border-radius:7px; background:#242424; font-size:10px; }
.file-download span { display:flex; min-width:0; flex-direction:column; gap:2px; }
.file-download strong { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.file-download small { color:#666; font-size:9px; }
.direct-backdrop,.invite-backdrop { position:fixed; z-index:240; inset:0; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.78); backdrop-filter:blur(6px); }
.direct-backdrop[hidden],.invite-backdrop[hidden] { display:none; }
.direct-card { width:min(900px,100%); height:min(680px,calc(100dvh - 32px)); overflow:hidden; display:grid; grid-template-columns:270px minmax(0,1fr); border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:0 25px 90px rgba(0,0,0,.75); }
.direct-card>aside { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr); border-right:1px solid var(--line); }
.direct-card header { min-height:62px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); }
.direct-card h2,.invite-card h2 { margin:0; font-size:15px; }
#directTitle[title] { cursor:pointer; }
#directTitle[title]:hover { color:var(--accent); }
.direct-profile-trigger { cursor:pointer; transition:transform .15s ease; }
.direct-profile-trigger:hover { transform:scale(1.08); }
.direct-card header small { color:var(--muted); font-size:9px; }
.direct-card header button,.invite-card header button { width:34px; height:34px; border:0; border-radius:9px; background:transparent; color:#888; font-size:22px; cursor:pointer; }
#directCloseMobile { display:none; }
#directUsers { min-height:0; overflow-y:auto; padding:8px; }
.direct-user { width:100%; padding:8px; display:flex; align-items:center; gap:9px; border:0; border-radius:9px; background:transparent; color:#bbb; text-align:left; cursor:pointer; }
.direct-user:hover,.direct-user.active { background:var(--surface); color:var(--text); }
.direct-user .reader-avatar { width:34px; height:34px; flex-basis:34px; }
.direct-user>span { min-width:0; display:flex; flex-direction:column; gap:2px; }
.direct-user strong,.direct-user small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.direct-user strong { font-size:11px; }.direct-user small { color:var(--muted); font-size:8px; }
.direct-card>main { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.direct-messages { min-height:0; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:8px; }
.direct-messages>p { margin:auto; color:var(--muted); font-size:11px; }
.direct-message { max-width:78%; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.direct-message.own { align-self:flex-end; align-items:flex-end; }
.direct-message>span { padding:9px 12px; border:1px solid var(--line); border-radius:5px 13px 13px 13px; background:var(--surface); color:var(--text); font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
.direct-message.own>span { border-radius:13px 5px 13px 13px; background:var(--accent); color:var(--accent-text); }
.direct-message small { color:var(--muted); font-size:8px; }
#directForm { padding:11px; display:flex; gap:8px; border-top:1px solid var(--line); }
#directForm input { min-width:0; flex:1; height:42px; padding:0 12px; border:1px solid var(--line); border-radius:10px; outline:0; background:var(--surface); color:var(--text); }
#directForm button { width:44px; border:0; border-radius:10px; background:var(--accent); color:var(--accent-text); font-size:18px; }
#directForm button:disabled { opacity:.4; }
.invite-card { width:min(500px,100%); padding-bottom:16px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:0 25px 90px rgba(0,0,0,.75); }
.invite-card>header { padding:15px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.invite-card header p { margin:4px 0 0; color:var(--muted); font-size:9px; }
#inviteRedeemForm { padding:16px; display:flex; gap:8px; }
#inviteRedeemForm input { min-width:0; flex:1; height:40px; padding:0 11px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text); text-transform:uppercase; }
#inviteRedeemForm button,#inviteCreate { min-height:40px; padding:0 13px; border:0; border-radius:9px; background:var(--accent); color:var(--accent-text); font-weight:700; cursor:pointer; }
#inviteAdmin { padding:0 16px; }
#inviteList { margin-top:10px; display:grid; gap:6px; }
.invite-code { padding:9px 10px; display:flex; justify-content:space-between; gap:8px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font:10px ui-monospace,monospace; }
.invite-code button { border:0; background:none; color:var(--accent); cursor:pointer; }
.invite-error { margin:0 16px; color:#ff747c; font-size:10px; }
.general-locked { height:100%; display:grid; place-content:center; gap:8px; padding:20px; text-align:center; }
.general-locked h2 { margin:0; font-size:16px; }.general-locked p { margin:0; color:var(--muted); font-size:11px; }
@media(max-width:680px){.direct-backdrop{padding:0}.direct-card{width:100%;height:100dvh;border:0;border-radius:0;grid-template-columns:120px minmax(0,1fr)}.direct-card header{padding-inline:9px}.direct-card>aside h2{font-size:11px}.direct-user{padding:7px 5px}.direct-user .reader-avatar{width:30px;height:30px;flex-basis:30px}.direct-user strong{font-size:9px}.direct-user small{display:none}.direct-messages{padding:12px}.direct-message{max-width:90%}#directCloseMobile{display:none}.invite-backdrop{padding:8px}}
.file-card { min-width:260px; max-width:100%; display:flex; align-items:stretch; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:#121212; }
.file-card:hover { border-color:#444; }
.file-preview-button { min-width:0; flex:1; padding:10px 11px; display:flex; align-items:center; gap:10px; border:0; background:transparent; color:#ddd; text-align:left; cursor:pointer; }
.file-preview-button>b { flex:0 0 38px; min-width:38px; height:34px; padding:0 4px; display:grid; place-items:center; border-radius:7px; background:#242424; color:#bbb; font-size:9px; }
.file-preview-button>span { min-width:0; display:flex; flex-direction:column; gap:2px; }
.file-preview-button strong { max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.file-preview-button small { color:#666; font-size:9px; }
.file-card-download { flex:0 0 46px; display:grid; place-items:center; border-left:1px solid var(--line); color:#aaa; font-size:20px; text-decoration:none; }
.file-card-download:hover { background:#1c1c1c; color:#fff; }
.document-viewer { position:fixed; z-index:1100; inset:0; display:grid; place-items:center; padding:18px; background:rgba(0,0,0,.86); backdrop-filter:blur(7px); animation:backdropIn .18s ease-out; }
.document-viewer-card { width:min(980px,100%); height:min(760px,calc(100dvh - 36px)); overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr); border:1px solid #383838; border-radius:15px; background:var(--surface); box-shadow:0 24px 85px rgba(0,0,0,.78); animation:modalIn .22s cubic-bezier(.2,.85,.25,1); }
.document-viewer-card>header { min-width:0; padding:11px 12px 11px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); }
.document-viewer-card>header>div:first-child { min-width:0; display:flex; flex-direction:column; gap:3px; }
.document-viewer-card>header strong { max-width:min(620px,60vw); overflow:hidden; color:var(--text); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.document-viewer-card>header small { color:var(--muted); font-size:9px; }
.document-viewer-card>header>div:last-child { display:flex; align-items:center; gap:7px; }
.document-viewer-card>header a,.document-viewer-card>header button { height:36px; padding:0 12px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--text); font-size:10px; text-decoration:none; cursor:pointer; }
.document-viewer-card>header button { width:36px; padding:0; font-size:22px; line-height:1; }
.document-viewer-body { min-height:0; overflow:auto; background:#171717; }
.document-viewer-body iframe { width:100%; height:100%; display:block; border:0; background:#eee; }
.document-viewer-body pre { min-height:100%; box-sizing:border-box; margin:0; padding:24px; overflow-wrap:anywhere; white-space:pre-wrap; color:#d8d8d8; font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; }
.document-viewer-state { height:100%; margin:0; display:grid; place-items:center; padding:20px; color:#888; font-size:11px; text-align:center; }
.document-viewer-state.error { color:#ff7b83; }
@media (max-width:600px) { .document-viewer{padding:0}.document-viewer-card{width:100%;height:100dvh;border:0;border-radius:0}.document-viewer-card>header{padding-left:12px}.document-viewer-card>header strong{max-width:45vw}.document-viewer-card>header a{padding-inline:9px}.document-viewer-body pre{padding:16px;font-size:11px}.file-card{min-width:min(240px,calc(100vw - 64px))} }
.users-panel { position:relative; min-width:0; height:100dvh; display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; border-inline:1px solid var(--line); background:#090909; }
.users-panel>header { min-height:72px; padding:16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.users-panel h2 { margin:0; font-size:13px; font-weight:650; }
.users-panel header p { margin:5px 0 0; color:#666; font-size:9px; }
.users-panel header p span { color:#3ecf8e; }
.users-panel header button { display:none; border:0; background:none; color:#777; font-size:22px; cursor:pointer; }
.users-list { padding:10px; overflow-y:auto; }
.users-empty { margin:12px 6px; color:#555; font-size:10px; }
.user-row { min-width:0; padding:7px 8px; display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; column-gap:9px; border-radius:8px; }
.user-row:hover { background:#111; }
.user-avatar>i { position:absolute; z-index:8; right:-6px; bottom:-5px; box-sizing:border-box; width:14px; height:14px; border:3px solid #090909; border-radius:50%; background:#666; box-shadow:0 0 0 1px rgba(255,255,255,.08); }
.user-row.online .user-avatar>i { background:#3ecf8e; }
.user-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.user-row strong { overflow:hidden; color:#aaa; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.user-row.online strong { color:#eee; }
.user-row small { overflow:hidden; color:#555; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.bottom { padding:12px 16px 14px; border-top:1px solid var(--line); }
.bottom form { min-width:0; display:flex; align-items:flex-end; gap:9px; }
.attach { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:#111; color:#888; cursor:pointer; }
.attach:hover { color:#fff; border-color:#444; }
.attach input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.attach span { position:relative; width:18px; height:18px; display:block; font-size:0; }
.attach span::before,.attach span::after { content:''; position:absolute; top:50%; left:50%; width:16px; height:2px; border-radius:2px; background:currentColor; transform:translate(-50%,-50%); }
.attach span::after { transform:translate(-50%,-50%) rotate(90deg); }
.gif-button { flex:0 0 44px; width:44px; height:44px; padding:0!important; border:1px solid var(--line)!important; border-radius:12px!important; background:#111!important; color:#aaa!important; font-size:10px!important; font-weight:800!important; }
.gif-button:hover { border-color:#444!important; color:#fff!important; }
.emoji-button { flex:0 0 44px!important; width:44px!important; height:44px!important; padding:0!important; display:grid!important; place-items:center; border:1px solid var(--line)!important; border-radius:12px!important; background:#111!important; color:#aaa!important; font-size:21px!important; font-weight:400!important; line-height:1!important; }
.emoji-button:hover { border-color:#444!important; color:#fff!important; }
.emoji-button svg { width:21px; height:21px; display:block; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.emoji-button svg .emoji-eye { fill:currentColor; stroke:none; }
.poll-button { flex:0 0 48px!important; width:48px!important; height:44px!important; padding:0!important; border:1px solid var(--line)!important; border-radius:12px!important; background:#111!important; color:#aaa!important; font-size:9px!important; font-weight:750!important; }
.poll-button:hover { border-color:#444!important; color:#fff!important; }
.message-poll { width:min(430px,78%); margin-top:2px; padding:14px; border:1px solid var(--line); border-radius:4px 14px 14px 14px; background:var(--surface); color:var(--text); }
.message.own .message-poll { border-radius:14px 4px 14px 14px; }
.message-poll h3 { margin:0 0 5px; font-size:14px; line-height:1.35; }
.message-poll>p { margin:0 0 12px; color:var(--muted); font-size:9px; }
.poll-options { display:flex; flex-direction:column; gap:7px; }
.poll-option { position:relative; min-height:42px; overflow:hidden; width:100%; padding:0; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius:9px; background:var(--panel); color:#bbb; text-align:left; cursor:pointer; }
.poll-option:hover { border-color:color-mix(in srgb,var(--accent) 65%,#555); }
.poll-option.selected { border-color:var(--accent); color:var(--text); }
.poll-option:disabled { cursor:wait; opacity:.72; }
.poll-option-fill { position:absolute; z-index:0; inset:0 auto 0 0; width:var(--poll-percent,0%); background:color-mix(in srgb,var(--accent) 18%,transparent); transition:width .28s ease; }
.poll-option-content { position:relative; z-index:1; min-height:40px; padding:8px 10px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; }
.poll-option-content span { overflow-wrap:anywhere; font-size:11px; line-height:1.25; }
.poll-option-content b { color:var(--muted); font-size:9px; }
.poll-option.selected .poll-option-content span::before { content:'✓'; margin-right:6px; color:var(--accent); font-weight:800; }
.poll-total { margin-top:10px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px; color:var(--muted); font-size:9px; }
.poll-total button { padding:3px 0; border:0; background:none; color:var(--accent); font:inherit; font-weight:700; cursor:pointer; }
.poll-total button:hover { text-decoration:underline; }
.poll-total button:disabled { color:var(--muted); cursor:default; opacity:.55; text-decoration:none; }
.poll-backdrop { position:fixed; z-index:160; inset:0; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.76); backdrop-filter:blur(6px); }
.poll-backdrop[hidden] { display:none; }
.poll-creator-card { width:min(480px,100%); max-height:calc(100dvh - 32px); overflow:hidden; border:1px solid #333; border-radius:16px; background:var(--surface); box-shadow:0 25px 80px rgba(0,0,0,.72); }
.poll-creator-card>header { padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); }
.poll-creator-card h2 { margin:0; font-size:17px; }
.poll-creator-card header p { margin:4px 0 0; color:var(--muted); font-size:10px; }
.poll-creator-card header button { width:34px; height:34px; border:0; border-radius:9px; background:transparent; color:#888; font-size:22px; cursor:pointer; }
#pollCreatorClose,.poll-option-field button { position:relative; font-size:0; line-height:0; }
#pollCreatorClose::before,#pollCreatorClose::after,.poll-option-field button::before,.poll-option-field button::after { content:''; position:absolute; top:50%; left:50%; width:14px; height:2px; border-radius:2px; background:currentColor; transform:translate(-50%,-50%) rotate(45deg); }
#pollCreatorClose::after,.poll-option-field button::after { transform:translate(-50%,-50%) rotate(-45deg); }
#pollCreatorForm { max-height:calc(100dvh - 120px); overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:13px; }
#pollCreatorForm>label { display:flex; flex-direction:column; gap:7px; color:#aaa; font-size:10px; font-weight:650; }
#pollCreatorForm input { width:100%; height:43px; padding:0 12px; border:1px solid var(--line); border-radius:9px; outline:0; background:var(--panel); color:var(--text); font-size:13px; }
#pollCreatorForm input:focus { border-color:var(--accent); }
.poll-option-editor { display:flex; flex-direction:column; gap:8px; }
.poll-option-field { display:grid; grid-template-columns:minmax(0,1fr) 38px; gap:7px; }
.poll-option-field button { border:1px solid var(--line); border-radius:9px; background:var(--panel); color:#888; font-size:0; cursor:pointer; }
.poll-option-field button::before,.poll-option-field button::after { width:12px; height:1.5px; }
.poll-option-field button:hover { border-color:#6d3439; color:#ff737b; }
.poll-add-option { height:38px; border:1px dashed #444; border-radius:9px; background:transparent; color:#999; font-size:10px; cursor:pointer; }
.poll-add-option:hover { border-color:var(--accent); color:var(--text); }
.poll-error { position:sticky; z-index:3; bottom:54px; padding:9px 11px; border:1px solid #74333a; border-radius:9px; background:#321419; color:#ff8c94; font-size:10px; font-weight:650; line-height:1.4; box-shadow:0 8px 24px rgba(0,0,0,.42); }
.poll-error[hidden] { display:none; }
#pollCreatorForm [aria-invalid="true"] { border-color:#e05b65; box-shadow:0 0 0 2px rgba(224,91,101,.16); }
.poll-creator-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:3px; }
.poll-creator-actions button { min-width:110px; height:42px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:#aaa; cursor:pointer; }
.poll-creator-actions button[type="submit"] { border-color:var(--accent); background:var(--accent); color:var(--accent-text); font-weight:750; }
.gif-picker { position:absolute; z-index:50; left:16px; bottom:76px; width:min(430px,calc(100% - 32px)); height:min(480px,65vh); overflow:hidden; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; border:1px solid #333; border-radius:14px; background:#111; box-shadow:0 20px 65px rgba(0,0,0,.7); }
.gif-picker[hidden] { display:none; }
.bottom { position:relative; }
.typing-indicator { height:14px; margin:0 0 3px; padding-left:3px; overflow:hidden; color:var(--muted); font-size:9px; line-height:14px; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.typing-indicator[hidden] { display:block; visibility:hidden; }
.typing-indicator:not([hidden])::after { content:'…'; display:inline-block; width:12px; animation:typingDots 1s steps(3,end) infinite; }
@keyframes typingDots { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } }
.gif-picker header { padding:10px; display:flex; gap:8px; border-bottom:1px solid #292929; }
.gif-picker input { min-width:0; flex:1; height:38px; padding:0 11px; border:1px solid #333; border-radius:9px; outline:0; background:#1a1a1a; color:#eee; font-size:12px; }
.gif-picker input:focus { border-color:#666; }
.gif-picker header button { width:38px; border:0; background:none; color:#777; font-size:21px; cursor:pointer; }
.gif-picker nav { padding:0 10px 8px; display:flex; gap:6px; border-bottom:1px solid #292929; }
.gif-picker nav button { padding:6px 9px; border:0; border-radius:7px; background:transparent; color:#777; font-size:10px; cursor:pointer; }
.gif-picker nav button.active { background:#292929; color:#eee; }
.gif-results { min-height:0; padding:8px; overflow-y:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:110px; gap:5px; }
.gif-result { position:relative; min-width:0; overflow:hidden; border-radius:7px; background:#222; }
.gif-result>.gif-send { width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; }
.gif-result>.gif-send:hover { outline:2px solid #ddd; outline-offset:-2px; }
.gif-favorite { position:absolute; z-index:2; top:5px; right:5px; width:27px; height:27px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.68); color:#ddd; font-size:15px; cursor:pointer; }
.gif-favorite.active { color:#ffd45c; }
.chat-gif-favorite { opacity:0; transition:opacity .15s ease,transform .15s ease; }
.external-gif:hover>.chat-gif-favorite,.chat-gif-favorite:focus-visible,.chat-gif-favorite.active { opacity:1; }
.chat-gif-favorite:active { transform:scale(.9); }
@media (hover:none) { .chat-gif-favorite { opacity:1; } }
.gif-results img { display:block; width:100%; height:100%; object-fit:cover; }
.gif-results p { grid-column:1/-1; margin:auto; color:#777; font-size:11px; text-align:center; }
.gif-picker>footer { padding:6px 11px 8px; color:#777; font-size:9px; font-weight:800; letter-spacing:.08em; text-align:right; }
.emoji-picker { position:absolute; z-index:51; left:16px; bottom:76px; width:min(390px,calc(100% - 32px)); height:min(430px,62vh); overflow:hidden; display:grid; grid-template-rows:auto auto minmax(0,1fr); border:1px solid #333; border-radius:14px; background:#111; box-shadow:0 20px 65px rgba(0,0,0,.72); }
.emoji-picker[hidden] { display:none; }
.emoji-picker header { padding:10px; display:flex; gap:8px; border-bottom:1px solid #292929; }
.emoji-picker input { min-width:0; flex:1; height:38px; padding:0 11px; border:1px solid #333; border-radius:9px; outline:0; background:#1a1a1a; color:#eee; font-size:12px; }
.emoji-picker input:focus { border-color:#666; }
.emoji-picker header button { width:38px; border:0; background:none; color:#777; font-size:21px; cursor:pointer; }
.emoji-picker nav { padding:7px 9px; overflow-x:auto; display:flex; gap:4px; border-bottom:1px solid #292929; scrollbar-width:none; }
.emoji-picker nav::-webkit-scrollbar { display:none; }
.emoji-picker nav button { flex:0 0 36px; width:36px; height:34px; border:0; border-radius:7px; background:transparent; font-size:18px; cursor:pointer; }
.emoji-picker nav button:hover,.emoji-picker nav button.active { background:#292929; }
.emoji-results { min-height:0; overflow-y:auto; padding:9px; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); align-content:start; gap:3px; }
.emoji-results button { width:100%; aspect-ratio:1; padding:0; border:0; border-radius:7px; background:transparent; font-size:24px; line-height:1; cursor:pointer; }
.emoji-results button:hover { background:#292929; transform:scale(1.08); }
.emoji-results p { grid-column:1/-1; align-self:center; margin:35px 0; color:#777; font-size:11px; text-align:center; }

/* Короткие анимации интерфейса: только transform и opacity, чтобы не нагружать телефоны. */
.gif-picker:not([hidden]),.emoji-picker:not([hidden]) { animation:pickerIn .2s cubic-bezier(.2,.8,.2,1); transform-origin:bottom left; }
.message-menu:not([hidden]) { animation:menuIn .14s cubic-bezier(.2,.85,.25,1); transform-origin:top left; }
.confirm-backdrop:not([hidden]),.profile-backdrop:not([hidden]),.profile-settings-backdrop:not([hidden]),.profile-gif-backdrop:not([hidden]),.theme-settings-backdrop:not([hidden]),.avatar-editor-backdrop:not([hidden]),.readers-backdrop:not([hidden]),.poll-backdrop:not([hidden]),.image-viewer { animation:backdropIn .18s ease-out; }
.confirm-backdrop:not([hidden]) .confirm-card,.profile-backdrop:not([hidden]) .profile-card,.profile-settings-backdrop:not([hidden]) .profile-settings-card,.profile-gif-backdrop:not([hidden]) .profile-gif-card,.theme-settings-backdrop:not([hidden]) .theme-settings-card,.avatar-editor-backdrop:not([hidden]) .avatar-editor-card { animation:modalIn .22s cubic-bezier(.2,.85,.25,1); }
.image-viewer .image-viewer-stage>img { animation:imageIn .22s cubic-bezier(.2,.8,.2,1); }
.gif-result,.profile-gif-results>button,.emoji-results>button { animation:itemIn .16s ease-out both; }
.gif-result:nth-child(3n+2),.profile-gif-results>button:nth-child(3n+2),.emoji-results>button:nth-child(4n+2) { animation-delay:18ms; }
.gif-result:nth-child(3n),.profile-gif-results>button:nth-child(3n),.emoji-results>button:nth-child(4n+3) { animation-delay:32ms; }
.topbar button,.topbar a,.bottom form button,.profile-banner-actions button,.profile-banner-actions label,.message-menu button,.emoji-results button,.gif-result button { transition:color .15s ease,border-color .15s ease,background-color .15s ease,transform .15s ease,opacity .15s ease; }
.bottom form button:active,.profile-banner-actions button:active,.emoji-results button:active,.gif-result button:active { transform:scale(.94); }
.readers-backdrop { position:fixed; inset:0; z-index:145; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.76); backdrop-filter:blur(5px); }
.readers-backdrop[hidden] { display:none; }
.readers-card { width:min(360px,100%); max-height:min(520px,calc(100dvh - 32px)); overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr); border:1px solid #333; border-radius:15px; background:#111; box-shadow:0 24px 70px rgba(0,0,0,.7); animation:modalIn .22s cubic-bezier(.2,.85,.25,1); }
.readers-card>header { padding:15px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #292929; }
.readers-card h2 { margin:0; font-size:16px; }
.readers-card>header button { width:32px; height:32px; border:0; background:none; color:#888; font-size:22px; cursor:pointer; }
#readersList { min-height:70px; overflow-y:auto; padding:8px; }
#readersList>div { padding:8px; display:flex; align-items:center; gap:10px; border-radius:9px; }
#readersList>div:hover { background:#191919; }
.reader-avatar { flex:0 0 36px; width:36px; height:36px; border-radius:50%; }
#readersList>div>span { min-width:0; display:flex; flex-direction:column; gap:2px; }
#readersList strong { overflow:hidden; color:#ddd; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
#readersList small { color:#666; font-size:9px; }
.poll-voter-group { padding:8px; border-bottom:1px solid #292929; }
.poll-voter-group:last-child { border-bottom:0; }
.poll-voter-group h3 { margin:2px 4px 7px; color:#ddd; font-size:11px; line-height:1.35; overflow-wrap:anywhere; }
.poll-voter-group>p { margin:8px 4px 10px; color:#666; font-size:10px; }
.poll-voter-row { padding:7px 4px; display:flex; align-items:center; gap:10px; border-radius:9px; }
.poll-voter-row:hover { background:#191919; }
.poll-voter-row>span { min-width:0; display:flex; flex-direction:column; gap:2px; }
.poll-voter-row strong { overflow:hidden; color:#ddd; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.poll-voter-row small { color:#666; font-size:9px; }
.bottom textarea { flex:1 1 auto; min-width:0; min-height:44px; max-height:140px; resize:none; padding:12px 14px; border:1px solid var(--line); border-radius:12px; outline:none; background:#111; color:#eee; font-size:13px; line-height:18px; }
.bottom textarea:focus { border-color:#444; }
.bottom textarea::placeholder { color:#555; }
.bottom form button { flex:0 0 44px; width:44px; height:44px; border:0; border-radius:12px; background:#eee; color:#080808; font-size:21px; font-weight:700; cursor:pointer; }
.bottom form button:disabled { background:#1c1c1c; color:#555; cursor:default; }
.bottom small { display:block; margin-top:8px; color:#464646; text-align:center; font-size:9px; }
.file-chip { min-width:0; margin:0 0 9px 53px; padding:8px 10px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:9px; background:#111; font-size:10px; }
.edit-chip { min-width:0; margin:0 0 9px 53px; padding:8px 10px; display:flex; align-items:center; gap:8px; border-left:2px solid #aaa; border-radius:4px 9px 9px 4px; background:#151515; color:#aaa; font-size:10px; }
.edit-chip[hidden] { display:none; }
.edit-chip>div { min-width:0; flex:1; display:grid; gap:6px; }
.edit-chip>button { flex:0 0 auto; margin-left:auto; border:0; background:none; color:#777; font-size:17px; cursor:pointer; }
.edit-chip>button:hover { color:#fff; }
.reply-chip { min-width:0; margin:0 0 9px 53px; padding:8px 10px; display:flex; align-items:center; gap:8px; border-left:2px solid #7289da; border-radius:4px 9px 9px 4px; background:#151515; }
.reply-chip[hidden] { display:none; }
.reply-chip>div { min-width:0; flex:1; display:grid; gap:2px; }
.reply-chip span,.reply-chip small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reply-chip span { color:#aaa; font-size:10px; }
.reply-chip small { color:#666; font-size:9px; }
.reply-chip button { border:0; background:none; color:#777; font-size:17px; cursor:pointer; }
.reply-chip button:hover { color:#fff; }
.edit-attachments { display:flex; flex-wrap:wrap; gap:5px; }
.edit-attachments:empty { display:none; }
.edit-attachment { max-width:100%; padding:4px 6px 4px 8px; display:flex; align-items:center; gap:6px; border:1px solid #303030; border-radius:6px; background:#1d1d1d; color:#888; }
.edit-attachment span { max-width:250px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.edit-attachment button { padding:0; border:0; background:none; color:#777; font-size:14px; line-height:1; cursor:pointer; }
.edit-attachment button:hover { color:#ff6b6b; }
.file-chip[hidden], .upload-progress[hidden] { display:none; }
.file-chip span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-chip small { flex:0 0 auto; margin:0; color:#666; }
.file-chip button { flex:0 0 auto; margin-left:auto; border:0; background:none; color:#777; font-size:17px; cursor:pointer; }
.upload-progress { margin:0 0 9px 53px; height:30px; display:flex; align-items:center; gap:9px; color:#888; font-size:10px; }
.upload-progress i { width:13px; height:13px; border:2px solid #333; border-top-color:#eee; border-radius:50%; animation:spin .7s linear infinite; }
.upload-error { margin:0 0 9px 53px; padding:10px 12px; display:flex; align-items:center; gap:10px; border:1px solid #652a2a; border-radius:9px; background:#241010; color:#ef7777; }
.upload-error[hidden] { display:none; }
.upload-error>b { flex:0 0 24px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#d74646; color:#fff; font-size:15px; }
.upload-error span { min-width:0; display:flex; flex-direction:column; gap:2px; }
.upload-error strong { font-size:10px; }
.upload-error small { margin:0; color:#b86b6b; text-align:left; font-size:9px; line-height:1.4; }
.toast { position:fixed; z-index:300; left:50%; bottom:max(18px,calc(88px + env(safe-area-inset-bottom))); width:max-content; max-width:calc(100vw - 24px); transform:translate(-50%,8px); padding:9px 13px; border:1px solid #333; border-radius:8px; background:#191919; color:#ddd; font-size:11px; line-height:1.4; text-align:center; overflow-wrap:anywhere; opacity:0; pointer-events:none; transition:.18s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.message-menu { position:fixed; z-index:120; width:158px; padding:5px; border:1px solid #333; border-radius:10px; background:#171717; box-shadow:0 14px 40px rgba(0,0,0,.55); }
.message-menu[hidden] { display:none; }
.message-menu button { width:100%; padding:9px 10px; border:0; border-radius:7px; background:transparent; color:#ddd; text-align:left; font-size:11px; cursor:pointer; }
.message-menu button:hover { background:#282828; }
.message-menu button.danger { color:#ff6262; }
.message-menu button.danger:hover { background:#3a1717; color:#ff8585; }
.message-menu button[hidden] { display:none; }
.confirm-backdrop { position:fixed; inset:0; z-index:140; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.76); backdrop-filter:blur(3px); }
.confirm-backdrop[hidden] { display:none; }
.confirm-card { width:min(360px,100%); padding:22px; border:1px solid #333; border-radius:14px; background:#111; box-shadow:0 24px 70px rgba(0,0,0,.65); }
.confirm-card h2 { margin:0; font-size:17px; }
.confirm-card p { margin:8px 0 22px; color:#777; font-size:11px; line-height:1.5; }
.confirm-actions { display:flex; justify-content:flex-end; gap:8px; }
.confirm-actions button { min-width:86px; height:38px; padding:0 13px; border:1px solid #333; border-radius:9px; background:#191919; color:#aaa; font-size:11px; cursor:pointer; }
.confirm-actions button:hover { border-color:#555; color:#fff; }
.confirm-actions button.danger { border-color:#9c3434; background:#a83b3b; color:#fff; font-weight:700; }
.confirm-actions button.danger:hover { border-color:#d55252; background:#c44747; }
.confirm-actions button:disabled { opacity:.5; cursor:default; }
.auth-backdrop { position:fixed; inset:0; z-index:100; height:100dvh; overflow-y:auto; display:grid; place-items:center; padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); background:#050505; overscroll-behavior:contain; }
.auth-backdrop[hidden] { display:none; }
.auth-card { width:min(360px,100%); padding:26px; border:1px solid var(--line); border-radius:16px; background:#0d0d0d; box-shadow:0 24px 70px rgba(0,0,0,.45); }
.auth-card h2 { margin:0; font-size:20px; }
.auth-card>p { margin:7px 0 22px; color:#777; font-size:11px; line-height:1.5; }
.auth-card form { display:grid; gap:13px; }
.auth-card form[hidden],.auth-switch[hidden] { display:none; }
.auth-card label { display:grid; gap:6px; color:#888; font-size:10px; }
.auth-card input { width:100%; height:42px; padding:0 12px; border:1px solid var(--line); border-radius:9px; outline:0; background:#131313; color:#eee; font-size:13px; }
.auth-card input:focus { border-color:#555; }
.auth-password-field { position:relative; display:block; }
.auth-password-field input { padding-right:48px; }
.auth-password-toggle { position:absolute; top:50%; right:7px; width:34px; height:30px; padding:0; display:grid; place-items:center; transform:translateY(-50%); border:0; border-radius:7px; background:transparent; color:#888; font-size:16px; cursor:pointer; }
.auth-password-toggle:hover,.auth-password-toggle[aria-pressed="true"] { background:#242424; color:#eee; }
.auth-submit { height:42px; margin-top:3px; border:0; border-radius:9px; background:#eee; color:#090909; font-size:12px; font-weight:700; cursor:pointer; touch-action:manipulation; }
.auth-submit:disabled { opacity:.55; cursor:wait; }
.auth-switch { width:100%; margin-top:14px; border:0; background:none; color:#888; font-size:10px; cursor:pointer; }
.auth-switch:hover { color:#fff; }
.auth-error { padding:9px 10px; display:flex; align-items:center; gap:8px; border:1px solid #652a2a; border-radius:8px; background:#241010; color:#d97979; font-size:9px; }
.auth-error[hidden] { display:none; }
.auth-error b { width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:#d74646; color:#fff; }
.profile-backdrop,.profile-settings-backdrop { position:fixed; inset:0; z-index:125; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.76); backdrop-filter:blur(5px); }
.profile-backdrop { z-index:260; }
.profile-backdrop[hidden],.profile-settings-backdrop[hidden] { display:none; }
.profile-card { position:relative; width:min(390px,100%); overflow:hidden; border:1px solid #303030; border-radius:18px; background:#111; box-shadow:0 28px 90px rgba(0,0,0,.72); }
.profile-close { position:absolute; z-index:3; top:10px; right:10px; width:32px; height:32px; padding:0; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); border-radius:50%; background:rgba(0,0,0,.58); color:#ddd; cursor:pointer; }
.profile-close svg { width:16px; height:16px; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.profile-banner { height:130px; background:linear-gradient(135deg,#333 0%,#171717 55%,#222 100%); background-position:center; background-size:cover; }
.profile-card-body { position:relative; padding:56px 22px 22px; }
.profile-avatar-large { position:absolute; top:-51px; left:20px; width:94px; height:94px; border:6px solid #111; border-radius:50%; background:#252525; font-size:28px; }
.profile-presence { position:absolute; z-index:8; top:15px; left:98px; box-sizing:border-box; width:21px; height:21px; border:5px solid #111; border-radius:50%; background:#666; box-shadow:0 0 0 1px rgba(255,255,255,.1); }
.profile-presence.online { background:#3ecf8e; }
.profile-avatar-large .avatar-image.has-avatar-frame::after { inset:-5px; border-width:3px; }
.profile-card h2 { margin:0; color:#f3f3f3; font-size:22px; line-height:1.2; overflow-wrap:anywhere; }
.profile-handle { margin:4px 0 0; color:#777; font-size:11px; }
.profile-status { margin:6px 0 0; color:#777; font-size:10px; }
.profile-divider { height:1px; margin:18px 0; background:#292929; }
.profile-about { margin-top:14px; }
.profile-about h3 { margin:0 0 6px; color:#aaa; font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.profile-about p { margin:0; color:#ccc; font-size:12px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.profile-about p:empty::before { content:'Описание пока не заполнено'; color:#555; }
.profile-edit { width:100%; height:40px; margin-top:20px; border:1px solid #444; border-radius:9px; background:#202020; color:#eee; font-size:11px; font-weight:650; cursor:pointer; }
.profile-edit:hover { border-color:#666; background:#292929; }
.profile-trigger { cursor:pointer; }
.profile-trigger:hover { color:#fff; }
.profile-settings-backdrop { z-index:270; overflow-y:auto; align-items:safe center; }
.profile-settings-card { width:min(820px,100%); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid #303030; border-radius:18px; background:#101010; box-shadow:0 28px 90px rgba(0,0,0,.75); }
.profile-settings-card>header { padding:20px 22px; display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid #292929; }
.profile-settings-card>header h2 { margin:0; font-size:18px; }
.profile-settings-card>header p { margin:6px 0 0; color:#777; font-size:10px; }
.profile-settings-card>header button { width:32px; height:32px; border:0; background:none; color:#777; font-size:22px; cursor:pointer; }
.profile-settings-layout { padding:22px; display:grid; grid-template-columns:minmax(250px,320px) minmax(280px,1fr); gap:24px; align-items:start; }
.profile-live-card { overflow:hidden; border:1px solid #343434; border-radius:14px; background:#171717; }
.profile-live-banner { height:105px; background:linear-gradient(135deg,#333,#171717); background-position:center; background-size:cover; }
.profile-live-body { position:relative; min-height:170px; padding:49px 17px 17px; }
.profile-live-avatar { position:absolute; top:-42px; left:15px; width:78px; height:78px; border:5px solid #171717; border-radius:50%; background:#252525; font-size:23px; }
.profile-live-avatar .avatar-image.has-avatar-frame::after { inset:-5px; border-width:3px; }
.profile-live-body h3 { margin:0 0 9px; font-size:17px; overflow-wrap:anywhere; }
.profile-live-body>small { display:block; margin:-5px 0 10px; color:#666; font-size:9px; }
.profile-live-body p { margin:0; color:#aaa; font-size:11px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.profile-live-body p:empty::before { content:'Ваше описание'; color:#555; }
#profileSettingsForm { display:grid; gap:18px; }
.profile-field { display:grid; gap:8px; color:#aaa; font-size:10px; font-weight:650; }
.profile-field textarea { width:100%; min-height:110px; resize:vertical; padding:11px 12px; border:1px solid #333; border-radius:9px; outline:0; background:#181818; color:#eee; font-family:inherit; font-size:12px; line-height:1.5; }
.profile-field>input { width:100%; height:40px; padding:0 11px; border:1px solid #333; border-radius:9px; outline:0; background:#181818; color:#eee; font-family:inherit; font-size:12px; }
.profile-field textarea:focus,.profile-field>input:focus { border-color:#666; }
.profile-field>small { color:#666; font-size:9px; font-weight:400; text-align:right; }
.name-style-controls { display:grid; grid-template-columns:110px minmax(0,1fr); gap:10px; }
.name-color-control,.name-font-control { display:grid; gap:6px; color:#777; font-size:9px; }
.name-color-control input { width:100%; height:40px; padding:4px; border:1px solid #333; border-radius:9px; background:#181818; cursor:pointer; }
.name-font-control select { width:100%; height:40px; padding:0 34px 0 11px; border:1px solid #333; border-radius:9px; outline:0; background:#181818; color:#eee; font:inherit; cursor:pointer; }
.name-font-control select:focus,.name-color-control input:focus { border-color:#666; }
.name-font-control option[value="modern"] { font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.name-font-control option[value="rounded"] { font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",sans-serif; }
.name-font-control option[value="serif"] { font-family:Georgia,"Times New Roman",serif; }
.name-font-control option[value="mono"] { font-family:ui-monospace,"Cascadia Code",Consolas,monospace; }
.name-font-control option[value="humanist"] { font-family:"Trebuchet MS",Verdana,sans-serif; }
.name-font-control option[value="comic"] { font-family:"Comic Sans MS","Segoe Print",cursive; }
.name-font-control option[value="editorial"] { font-family:"Palatino Linotype",Palatino,Georgia,serif; }
.name-font-control option[value="condensed"] { font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif; }
.name-font-control option[value="display"] { font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; }
.name-font-control option[value="handwritten"] { font-family:"Segoe Print","Bradley Hand",cursive; }
.name-font-control option[value="classic"] { font-family:Garamond,Georgia,serif; }
.name-font-control option[value="technical"] { font-family:"Lucida Console",Monaco,monospace; }
.name-color-presets { display:flex; flex-wrap:wrap; gap:8px; }
.name-color-presets button { width:25px; height:25px; padding:0; border:2px solid #3a3a3a; border-radius:50%; background:var(--swatch); cursor:pointer; transition:transform .12s,border-color .12s; }
.name-color-presets button:hover { transform:scale(1.1); }
.name-color-presets button.active { border-color:#fff; box-shadow:0 0 0 2px #111,0 0 0 3px var(--swatch); }
.avatar-frame-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.avatar-frame-picker button { min-width:0; padding:9px 4px 8px; display:grid; justify-items:center; gap:7px; border:1px solid #303030; border-radius:10px; background:#181818; color:#888; cursor:pointer; }
.avatar-frame-picker button:hover { border-color:#555; color:#ddd; }
.avatar-frame-picker button.active { border-color:#777; background:#242424; color:#fff; box-shadow:inset 0 0 0 1px #777; }
.avatar-frame-picker b { max-width:100%; overflow:hidden; font-size:8px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.frame-sample { position:relative; width:31px; height:31px; display:grid; place-items:center; border-radius:50%; background:#292929; color:#ccc; font-size:10px; }
@media (prefers-reduced-motion:reduce) { .avatar-frame-rainbow::after { animation:none; } }
.game-mode-window { min-width:260px; margin:0; overflow:hidden; background:#080808; color:#eee; }
.game-mode-shell { height:100dvh; min-height:240px; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:#080808; }
.game-mode-header { min-width:0; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid #282828; background:#0d0d0d; }
.game-mode-heading { min-width:0; display:grid; gap:3px; }
.game-mode-heading strong { overflow:hidden; color:#eee; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.game-mode-heading small { color:#666; font-size:9px; }
.game-mode-close { width:28px; height:28px; padding:0; border:1px solid #333; border-radius:8px; background:#171717; color:#888; font-size:17px; cursor:pointer; }
.game-mode-messages { overflow-y:auto; padding:14px 12px; scrollbar-width:thin; scrollbar-color:#383838 transparent; }
.game-mode-messages .message { margin-bottom:12px; }
.game-mode-messages .message.grouped { margin-bottom:3px; }
.game-mode-messages .message.grouped.group-end { margin-bottom:12px; }
.game-mode-messages .bubble,.game-mode-messages .attachment,.game-mode-messages .youtube-preview,.game-mode-messages .site-preview,.game-mode-messages .reply-preview { max-width:94%; }
.game-mode-compose { padding:9px; display:grid; grid-template-columns:38px minmax(0,1fr) 38px; gap:7px; border-top:1px solid #282828; background:#0d0d0d; }
.game-mode-file { width:38px; height:38px; display:grid; place-items:center; border:1px solid #333; border-radius:10px; background:#171717; color:#aaa; font-size:21px; cursor:pointer; }
.game-mode-files { grid-column:1/-1; min-width:0; padding:7px 9px; display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid #343434; border-radius:9px; background:#151515; color:#aaa; font-size:9px; }
.game-mode-files[hidden] { display:none; }
.game-mode-files span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.game-mode-files button { flex:0 0 auto; padding:2px 5px; border:0; background:none; color:#888; font-size:15px; cursor:pointer; }
.game-mode-input { min-width:0; max-height:110px; resize:none; padding:10px 11px; border:1px solid #303030; border-radius:10px; outline:0; background:#171717; color:#eee; font:12px/1.4 Inter,ui-sans-serif,system-ui,sans-serif; }
.game-mode-input:focus { border-color:#666; }
.game-mode-send { border:0; border-radius:10px; background:#eee; color:#111; font-size:17px; cursor:pointer; }
.game-mode-send:disabled { opacity:.35; cursor:default; }
.profile-banner-actions { display:flex; flex-wrap:wrap; gap:8px; }
.profile-banner-actions label,.profile-banner-actions button,#profileAvatarChange { min-height:36px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #383838; border-radius:8px; background:#1a1a1a; color:#ccc; font-size:10px; font-weight:500; cursor:pointer; }
.profile-banner-actions label:hover,.profile-banner-actions button:hover,#profileAvatarChange:hover { border-color:#606060; color:#fff; }
#profileBannerRemove { color:#e47878; }
.profile-gif-backdrop { position:fixed; inset:0; z-index:280; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.78); backdrop-filter:blur(6px); }
.profile-gif-backdrop[hidden] { display:none; }
.profile-gif-backdrop.busy::before { content:""; position:fixed; z-index:3; inset:0; background:rgba(0,0,0,.42); cursor:wait; }
.profile-gif-backdrop.busy::after { content:"Загрузка GIF…"; position:fixed; z-index:4; left:50%; top:50%; min-width:150px; padding:13px 17px; border:1px solid #444; border-radius:11px; background:#171717; color:#eee; font-size:12px; font-weight:650; text-align:center; box-shadow:0 16px 50px rgba(0,0,0,.65); transform:translate(-50%,-50%); animation:modalIn .16s ease-out; }
.profile-gif-card { width:min(680px,100%); height:min(680px,calc(100dvh - 32px)); overflow:hidden; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; border:1px solid #343434; border-radius:18px; background:#111; box-shadow:0 28px 90px rgba(0,0,0,.8); }
.profile-gif-card>header { padding:17px 18px 12px; display:flex; align-items:flex-start; justify-content:space-between; border-bottom:1px solid #292929; }
.profile-gif-card>header h2 { margin:0; font-size:17px; }
.profile-gif-card>header p { margin:5px 0 0; color:#777; font-size:10px; }
.profile-gif-card>header button { width:34px; height:34px; border:0; background:none; color:#888; font-size:23px; cursor:pointer; }
.profile-gif-card>input { margin:12px 14px; min-height:42px; padding:0 13px; border:1px solid #383838; border-radius:10px; outline:0; background:#1a1a1a; color:#eee; font:inherit; }
.profile-gif-card>input:focus { border-color:#747474; }
.profile-gif-results { min-height:0; overflow-y:auto; padding:0 14px 14px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:150px; gap:8px; }
.profile-gif-results>button { padding:0; overflow:hidden; border:0; border-radius:9px; background:#202020; cursor:pointer; }
.profile-gif-results img { width:100%; height:100%; display:block; object-fit:cover; }
.profile-gif-results p { grid-column:1/-1; align-self:center; margin:0; color:#777; text-align:center; }
.profile-gif-results .profile-gif-more { min-height:40px; grid-column:1/-1; color:#bbb; border:1px solid #333; background:#191919; }
.profile-gif-card>footer { padding:7px 15px 10px; color:#777; font-size:9px; font-weight:800; letter-spacing:.08em; text-align:right; }
.profile-settings-actions { margin-top:4px; display:flex; justify-content:flex-end; gap:9px; }
.account-badge { display:inline-flex; align-items:center; min-height:16px; padding:2px 6px; border:1px solid color-mix(in srgb,var(--accent) 65%,#fff 15%); border-radius:5px; background:color-mix(in srgb,var(--accent) 22%,transparent); color:color-mix(in srgb,var(--accent) 58%,#fff 42%); font:700 7px/1 Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing:.055em; text-transform:uppercase; white-space:nowrap; }
.profile-badge { width:max-content; margin-top:8px; font-size:8px; }
.profile-badge[hidden] { display:none; }

.theme-settings-backdrop { position:fixed; z-index:130; inset:0; display:grid; place-items:center; padding:16px; overflow-y:auto; background:rgba(0,0,0,.76); backdrop-filter:blur(6px); }
.theme-settings-backdrop[hidden] { display:none; }
.theme-settings-card { width:min(680px,100%); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--panel) 94%,transparent); box-shadow:0 28px 90px rgba(0,0,0,.72); }
.theme-settings-card>header { padding:20px 22px; display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); }
.theme-settings-card>header h2 { margin:0; font-size:19px; }
.theme-settings-card>header p { margin:6px 0 0; color:var(--muted); font-size:10px; }
.theme-settings-card>header button { width:32px; height:32px; border:0; background:none; color:var(--muted); font-size:22px; cursor:pointer; }
.theme-preview { height:112px; margin:20px 22px 0; padding:18px; overflow:hidden; display:flex; align-items:flex-end; justify-content:space-between; border:1px solid var(--line); border-radius:14px; background:var(--theme-gradient),var(--panel); box-shadow:inset 0 0 50px color-mix(in srgb,var(--accent) 8%,transparent); }
.theme-preview>div { display:flex; align-items:center; gap:8px; }
.theme-preview i { width:28px; height:28px; border-radius:50%; background:var(--accent); box-shadow:0 0 18px color-mix(in srgb,var(--accent) 60%,transparent); }
.theme-preview span { width:92px; height:24px; border:1px solid var(--line); border-radius:5px 11px 11px; background:var(--surface); }
.theme-preview b { width:58px; height:24px; border-radius:11px 5px 11px 11px; background:var(--accent); }
.theme-preview p { margin:0; color:var(--muted); font-size:9px; }
#themeSettingsForm { padding:20px 22px 22px; display:grid; gap:20px; }
#themeSettingsForm fieldset { min-width:0; margin:0; padding:0; border:0; }
#themeSettingsForm legend { margin-bottom:10px; color:var(--text); font-size:11px; font-weight:700; }
.theme-choice-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.theme-choice-grid button { min-width:0; padding:8px; display:grid; gap:7px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--muted); font-size:9px; cursor:pointer; }
.theme-choice-grid button:hover { border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); color:var(--text); }
.theme-choice-grid button.active { border-color:var(--accent); color:var(--text); box-shadow:inset 0 0 0 1px var(--accent); }
.theme-choice-grid i { width:100%; height:34px; border-radius:6px; background:#151515; }
.theme-palettes [data-palette="graphite"] i { background:linear-gradient(135deg,#090909,#292929); }
.theme-palettes [data-palette="ocean"] i { background:linear-gradient(135deg,#041016,#116481); }
.theme-palettes [data-palette="violet"] i { background:linear-gradient(135deg,#100819,#7247a0); }
.theme-palettes [data-palette="emerald"] i { background:linear-gradient(135deg,#06130d,#27835c); }
.theme-palettes [data-palette="rose"] i { background:linear-gradient(135deg,#160810,#a94370); }
.theme-palettes [data-palette="amber"] i { background:linear-gradient(135deg,#171006,#ad7623); }
.theme-palettes [data-palette="midnight"] i { background:linear-gradient(135deg,#040714,#244b91); }
.theme-gradients [data-gradient="none"] i { background:#151515; }
.theme-gradients [data-gradient="aurora"] i { background:linear-gradient(135deg,#20b987,#6b43cf); }
.theme-gradients [data-gradient="sunset"] i { background:linear-gradient(135deg,#e65a36,#d33783); }
.theme-gradients [data-gradient="ocean"] i { background:linear-gradient(135deg,#00a7db,#154aab); }
.theme-gradients [data-gradient="neon"] i { background:linear-gradient(135deg,#00d5c4,#db1597); }
.theme-gradients [data-gradient="smoke"] i { background:linear-gradient(135deg,#4a4d55,#17191e); }
.theme-accent { padding:12px; display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); font-size:10px; font-weight:650; }
.theme-accent input { width:48px; height:34px; padding:3px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); cursor:pointer; }
.theme-accent span { margin-left:auto; color:var(--muted); font:10px ui-monospace,Consolas,monospace; }
.theme-settings-actions { display:flex; justify-content:flex-end; gap:9px; }
.theme-settings-actions button { min-height:38px; padding:0 16px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text); font-size:10px; cursor:pointer; }
.theme-settings-actions button[type="submit"] { border-color:var(--accent); background:var(--accent); color:var(--accent-text); font-weight:700; }

html:not([data-palette="graphite"]) .chat,html:not([data-palette="graphite"]) .users-panel { background:color-mix(in srgb,var(--panel) 94%,transparent); }
html:not([data-palette="graphite"]) .bubble,html:not([data-palette="graphite"]) .audio-box,html:not([data-palette="graphite"]) .file-download,html:not([data-palette="graphite"]) .site-preview { background:var(--surface); border-color:var(--line); color:var(--text); }
.message.own .bubble { background:var(--accent); border-color:var(--accent); color:var(--accent-text); }
#statusDot.online { background:var(--accent); box-shadow:0 0 10px color-mix(in srgb,var(--accent) 50%,transparent); }
.profile-presence.online { background:#3ecf8e; box-shadow:0 0 10px rgba(62,207,142,.5); }

@media (max-width:620px) { .theme-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-preview{margin-inline:14px}.theme-settings-card>header,#themeSettingsForm{padding-inline:14px} }
.profile-settings-actions button { min-width:96px; height:39px; border:1px solid #383838; border-radius:9px; background:#191919; color:#aaa; font-size:11px; cursor:pointer; }
.profile-settings-actions button:last-child { border-color:#eee; background:#eee; color:#080808; font-weight:700; }
.profile-settings-actions button:disabled { opacity:.5; cursor:wait; }
.avatar-editor-open { overflow:hidden; }
.avatar-editor-backdrop { position:fixed; inset:0; z-index:290; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.82); backdrop-filter:blur(5px); }
.avatar-editor-backdrop[hidden] { display:none; }
.avatar-editor-card { width:min(390px,100%); padding:24px; border:1px solid #303030; border-radius:16px; background:#111; box-shadow:0 24px 80px rgba(0,0,0,.7); }
.avatar-editor-card h2 { margin:0; font-size:18px; }
.avatar-editor-card>p { margin:6px 0 18px; color:#777; font-size:11px; line-height:1.45; }
.avatar-crop-stage { position:relative; width:min(280px,calc(100vw - 80px)); margin:0 auto; overflow:hidden; aspect-ratio:1; border-radius:50%; background:#222; cursor:grab; touch-action:none; user-select:none; }
.avatar-crop-stage.dragging { cursor:grabbing; }
.avatar-crop-stage canvas { display:block; width:100%; height:100%; }
.avatar-crop-stage canvas[hidden],.avatar-crop-stage>img[hidden] { display:none; }
.avatar-crop-stage>img { position:absolute; z-index:1; max-width:none; object-fit:fill; transform:translate(-50%,-50%); pointer-events:none; }
.avatar-crop-stage>i { position:absolute; z-index:2; inset:0; pointer-events:none; border:2px solid rgba(255,255,255,.8); border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.45); }
.avatar-zoom { margin:18px 0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; color:#888; font-size:10px; }
.avatar-zoom input { width:100%; accent-color:#eee; }
.avatar-editor-actions { display:flex; justify-content:flex-end; gap:9px; }
.avatar-editor-actions button { min-width:92px; height:38px; padding:0 13px; border:1px solid #333; border-radius:9px; background:#181818; color:#aaa; cursor:pointer; }
.avatar-editor-actions button:last-child { border-color:#eee; background:#eee; color:#090909; font-weight:700; }
.avatar-editor-actions button:hover { border-color:#555; color:#fff; }
.avatar-editor-actions button:last-child:hover { border-color:#fff; background:#fff; color:#090909; }
.avatar-editor-actions button:disabled { opacity:.5; cursor:default; }
@keyframes appear { from { opacity:0; transform:translateY(8px) scale(.992); } }
@keyframes pickerIn { from { opacity:0; transform:translateY(10px) scale(.975); } }
@keyframes menuIn { from { opacity:0; transform:translateY(-3px) scale(.96); } }
@keyframes backdropIn { from { opacity:0; } }
@keyframes modalIn { from { opacity:0; transform:translateY(10px) scale(.985); } }
@keyframes imageIn { from { opacity:0; transform:scale(.96); } }
@keyframes itemIn { from { opacity:0; transform:translateY(4px) scale(.98); } }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
@media (max-width:860px) { .app-shell,.app-shell.voice-open{display:block;width:100%}.chat{border:0}.users-panel{position:fixed; z-index:60; top:0; right:0; width:min(300px,88vw); transform:translateX(100%); transition:transform .18s ease; box-shadow:-20px 0 50px rgba(0,0,0,.5)}.users-panel.open{transform:translateX(0)}.voice-panel{position:fixed;z-index:61;top:0;left:0;width:min(300px,88vw);transform:translateX(-100%);transition:transform .18s ease;box-shadow:20px 0 50px rgba(0,0,0,.5);animation:none}.voice-panel.open{transform:translateX(0)}.users-panel>header,.voice-panel>header{min-height:64px}.users-panel header button,#usersToggle{display:block}.topbar{min-height:64px;padding-inline:14px}.messages{padding:20px 12px}.bottom{padding-inline:10px}.bottom>small{display:none}.edit-chip,.reply-chip,.file-chip,.upload-progress,.upload-error{margin-left:0}.bubble,.attachment,.youtube-preview,.site-preview,.reply-preview{max-width:88%} }
@media (max-width:600px) { .auth-card{padding:22px 18px}.auth-card input{font-size:16px}.auth-backdrop{place-items:safe center} }
@media (max-width:680px) { #gameModeButton,.desktop-app-download{display:none}.profile-settings-backdrop{padding:0;align-items:stretch}.profile-settings-card{max-height:none;border:0;border-radius:0}.profile-settings-layout{grid-template-columns:1fr;padding:16px}.profile-live-card{max-width:360px;width:100%;margin:0 auto}.profile-card{width:min(390px,100%)}.profile-gif-backdrop{padding:0}.profile-gif-card{height:100dvh;border:0;border-radius:0}.profile-gif-results{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:145px}.emoji-results{grid-template-columns:repeat(7,minmax(0,1fr))}.emoji-picker{left:8px;width:calc(100% - 16px);bottom:72px} }
@media (max-width:420px) { .bottom form{gap:6px}.bottom form .attach,.bottom form .gif-button,.bottom form .emoji-button,.bottom form .poll-button,.bottom form #sendButton{flex-basis:40px;width:40px;height:42px}.bottom{padding-inline:7px}.emoji-results{grid-template-columns:repeat(6,minmax(0,1fr))}.message-poll{width:92%;max-width:none}.poll-creator-card{border-radius:13px}.poll-creator-actions button{min-width:0;flex:1} }