:root{color-scheme:dark;--bg:#0f131d;--sidebar:#161c29;--panel:#1e2534;--raised:#293347;--line:#323c50;--text:#f0f3fb;--muted:#a0abc0;--accent:#a69cff;--accent-strong:#776df0;--danger:#ef8394;--safe:#62d5aa;font:14px/1.45 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text)}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:default}
a{color:#b8c2ff;text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)}
.app-shell{display:grid;grid-template-columns:270px minmax(0,1fr);height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.sidebar{display:flex;flex-direction:column;min-width:0;background:var(--sidebar);border-right:1px solid #11151d}
.sidebar-top{padding:20px 12px 8px}
.brand{display:flex;align-items:center;gap:10px;padding:0 10px 24px;font-weight:750;letter-spacing:.01em;font-size:16px}
.brand-mark{display:block;width:46px;height:46px;border-radius:12px;object-fit:cover;box-shadow:0 8px 24px #04071366}
.brand-mark.small{width:32px;height:32px;border-radius:9px;box-shadow:0 5px 16px #05081666}
.nav-button,.conversation-item,.friend-row,.search-row{border:0;background:transparent;color:var(--text);width:100%;text-align:left;display:flex;align-items:center;gap:11px;border-radius:7px;padding:9px 10px;transition:background .14s,color .14s}
.nav-button:hover,.conversation-item:hover,.friend-row:hover,.search-row:hover{background:#ffffff0b;text-decoration:none}
.nav-button.active,.conversation-item.active{background:#8f9eff21;color:#fff}
.nav-icon{margin-left:auto;font-size:20px;color:var(--muted)}
.section-heading{display:flex;align-items:center;justify-content:space-between;padding:22px 10px 7px;color:#8791a5;font-size:10px;letter-spacing:.16em;font-weight:800}
.icon-button{border:0;background:transparent;color:var(--muted);display:grid;place-items:center;width:30px;height:30px;border-radius:6px;font-size:19px;transition:background .14s,color .14s}
.icon-button:hover{background:#ffffff14;color:#fff}
.conversation-list{min-height:0;overflow:auto;padding:0 8px;flex:1}
.conversation-item{position:relative;min-height:56px;padding:8px}
.conversation-copy,.self-label{min-width:0;display:flex;flex-direction:column}
.conversation-copy strong,.self-label strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:650}
.conversation-copy small,.self-label span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:12px}
.avatar{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#3b4663;color:#e3eaff;font-weight:700;position:relative;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.online:after{content:"";position:absolute;right:0;bottom:0;width:9px;height:9px;border:2px solid var(--sidebar);background:var(--safe);border-radius:50%}
.unread-badge{margin-left:auto;min-width:19px;height:19px;padding:1px 5px;border-radius:10px;background:var(--accent-strong);color:#fff;text-align:center;font-size:11px;font-weight:700}
.sidebar-bottom{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#131721;border-top:1px solid var(--line)}
.sidebar-bottom .self-label{flex:1}
.main-pane{min-width:0;min-height:0;display:flex;flex-direction:column;background:radial-gradient(circle at 78% 0%,#1b2030 0,transparent 42%),var(--bg)}
.pane-header{height:62px;flex:none;padding:0 24px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);background:#171b23cc;backdrop-filter:blur(12px)}
.pane-header .heading{font-weight:750;font-size:16px}
.pane-header .subheading{font-size:12px;color:var(--muted)}
.pane-header .spacer{flex:1}
.call-button{color:var(--safe)}




.voice-head{display:flex;align-items:center;gap:11px;min-width:0}.voice-avatar{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#394661;font-weight:700;overflow:hidden;border:2px solid transparent}.voice-avatar img{width:100%;height:100%;object-fit:cover}.voice-avatar.speaking{border-color:var(--safe);box-shadow:0 0 0 2px #56cf9e3d}
.voice-identity{min-width:0}.voice-name{display:block;max-width:100%;padding:0;border:0;background:none;color:var(--text);font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}.voice-name:hover{color:#c7c2ff}.voice-status{color:#b5c0d2;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-actions{display:flex;gap:7px;align-items:center;justify-content:flex-end}.voice-button,.voice-accept,.voice-decline{min-width:38px;min-height:38px;border:1px solid #4a566e;border-radius:9px;background:#303b51;color:var(--text);display:grid;place-items:center;transition:background .14s,border-color .14s}.voice-button:hover{background:#40506a}.voice-button.selected{background:#73545e;border-color:var(--danger)}.voice-button.danger,.voice-decline{background:#803847;border-color:#a95568}.voice-button.danger:hover,.voice-decline:hover{background:#9b4355}.voice-accept{padding:0 15px;background:#267c5b;border-color:#39aa7d;font-weight:700}.voice-accept:hover{background:#32936c}
.voice-meter,.voice-diagnostics{grid-column:1/-1;color:var(--muted);font-size:11px;overflow-wrap:anywhere}.voice-diagnostics{border-top:1px solid var(--line);padding-top:9px;line-height:1.5}.voice-enable{grid-column:1/-1;border:1px solid var(--accent);border-radius:7px;background:#444f7b;color:#fff;padding:8px}
.back-button{display:none}
.chat-scroll{flex:1;overflow:auto;min-height:0;overscroll-behavior:contain;padding:22px max(24px,calc((100% - 900px)/2)) 12px;scrollbar-color:#454e60 transparent}
.load-older{display:block;margin:0 auto 18px;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:6px;padding:6px 12px}
.message-list{display:flex;flex-direction:column;gap:2px}
.message{display:flex;gap:12px;padding:8px 11px;margin:0 -11px;border-radius:6px;transition:background .12s;min-width:0}
.message:hover{background:#ffffff08}
.message.highlight{background:#8f9eff26}
.message.pending{opacity:.72}
.message.failed{background:#ff697b12}
.message .avatar{width:34px;height:34px;border-radius:9px}
.message-content{min-width:0;flex:1}
.message-meta{display:flex;align-items:baseline;gap:8px}
.message-meta strong{font-size:13px}
.message-meta time,.message-meta em{font-size:11px;color:var(--muted);font-style:normal}
.message-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.48;color:#e7eaf2}
.message.deleted .message-body{color:var(--muted);font-style:italic}
.message-actions{opacity:0;display:flex;align-items:flex-start;gap:3px}
.message:hover .message-actions,.message:focus-within .message-actions{opacity:1}
.message-actions button{border:0;background:var(--raised);color:var(--muted);border-radius:5px;padding:3px 7px}
.message-actions button:hover{color:#fff}
.reply-preview{display:block;max-width:100%;text-align:left;background:transparent;border:0;border-left:2px solid var(--accent);font-size:11px;color:var(--muted);padding:2px 7px;margin:3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.reply-preview:hover{color:var(--text)}
.attachment-image{display:block;max-width:min(320px,100%);max-height:300px;object-fit:contain;border-radius:5px;margin:6px 0;background:#121722}
.attachment-row{display:flex;align-items:center;gap:12px;max-width:min(390px,100%);min-width:0;border:1px solid var(--line);border-radius:5px;padding:6px 9px;margin:5px 0;background:var(--panel);overflow-wrap:anywhere}
.attachment-detail{display:flex;flex:1;flex-direction:column;min-width:0}.attachment-detail strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.attachment-detail small{color:var(--muted);font-size:11px}.attachment-download{flex:none;font-size:12px}
.selected-files{display:flex;gap:5px;flex-wrap:wrap;max-height:65px;overflow:auto}.selected-file{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--line);border-radius:4px;padding:2px 6px;color:var(--muted);font-size:11px}
.attachment-link{display:inline-block;border:1px solid var(--line);border-radius:5px;padding:5px 8px;margin:5px 5px 0 0;background:var(--panel)}
.reactions{display:flex;gap:4px;margin-top:5px}
.reaction{border:1px solid #7585e156;background:#8493ff1b;color:var(--text);border-radius:5px;padding:2px 7px}
.chat-footer{position:relative;flex:none;padding:0 max(24px,calc((100% - 900px)/2)) 22px;min-width:0}
.typing-line{height:22px;color:var(--muted);font-size:12px;padding-left:11px}
.composer{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--line);border-radius:9px;background:#242a36;padding:8px;min-width:0}
.composer:focus-within{border-color:#6979a6}
.composer textarea{flex:1;min-width:0;resize:none;max-height:170px;min-height:27px;outline:0;border:0;background:transparent;color:var(--text);line-height:1.5;padding:3px 2px}
.composer textarea::placeholder{color:#8891a3}
.composer button{border:0;background:transparent;color:#a7b0c1;border-radius:6px;min-width:32px;height:32px}
.composer button:hover{background:#ffffff12;color:#fff}
.composer .send-button{background:var(--accent-strong);color:#fff}
.composer .send-button:hover{background:#8392ff}
.composer-hint{font-size:11px;color:#777f91;padding:5px 11px 0}
.new-messages{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:1px solid #7d8aff;background:#4759b7;color:#fff;border-radius:18px;padding:5px 14px;box-shadow:0 8px 22px #0007}
.welcome-state,.empty-state{margin:auto;text-align:center;padding:32px;color:var(--muted);max-width:420px}
.welcome-state h1,.empty-state h2{color:var(--text);font-size:22px;margin:12px 0 5px}
.welcome-glyph{font-size:48px;color:var(--accent)}
.startup-error{margin:auto;max-width:360px;padding:24px;color:var(--muted)}
.startup-error h1{margin:0 0 6px;color:var(--text);font-size:18px}
.startup-error p{margin:0 0 16px}
.load-error{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px;color:var(--muted);font-size:12px}
.load-error strong{font-weight:600}
.load-error .small-button{margin-left:auto}
.content-panel{width:min(780px,100%);margin:0 auto;padding:28px 24px;overflow:auto}
.content-panel h2{margin:0 0 14px;font-size:19px}
.content-panel p{color:var(--muted)}
.panel-section{margin:25px 0}
.panel-section h3{font-size:11px;letter-spacing:.13em;color:var(--muted);text-transform:uppercase}
.friend-row{border-bottom:1px solid var(--line);border-radius:0;padding:10px 4px}
.friend-row .grow{flex:1}
.friend-row button,.small-button{border:1px solid var(--line);background:var(--raised);color:var(--text);padding:6px 10px;border-radius:5px}
.friend-row button:hover,.small-button:hover{background:#3c465d}
.field-row{display:flex;gap:8px}
.field-row input,.settings-input{border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--text);padding:9px 11px;min-width:0}
.field-row input{flex:1}
.primary{border:0;border-radius:6px;background:var(--accent-strong);color:#fff;font-weight:700;padding:11px 15px}
.primary:hover{background:#8594ff}
.form-error{min-height:18px;color:var(--danger);font-size:12px}
.toast-region{position:fixed;right:18px;bottom:18px;z-index:10;display:grid;gap:8px}
.toast{background:#30394b;color:#fff;padding:10px 14px;border:1px solid #53607a;border-radius:7px;box-shadow:0 10px 25px #0007}
.auth-page{display:grid;place-items:center;overflow:auto;min-height:100dvh;padding:24px}
.auth-card{width:min(410px,100%);padding:34px;background:#1c212c;border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px #0006}
.auth-card h1{margin:24px 0 2px;font-size:25px}
.auth-card form{display:grid;gap:13px;margin-top:24px}
.auth-card label{display:grid;gap:5px;color:#bfc6d4;font-weight:600;font-size:12px}
.auth-card input{border:1px solid #40495b;background:#141820;color:#fff;border-radius:6px;padding:10px 12px;font-size:14px}
.auth-card .primary{width:100%}
.auth-footer{text-align:center;color:var(--muted);font-size:12px;margin:22px 0 0}
.text-button{border:0;background:transparent;color:#b8c2ff;padding:10px 0}
.skeleton-row{height:48px;margin:8px 4px;border-radius:6px;background:linear-gradient(90deg,#242b38,#303849,#242b38);background-size:200% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{to{background-position:-200% 0}
}
dialog{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:9px;padding:22px;width:min(430px,calc(100vw - 32px));box-shadow:0 20px 70px #000a}
dialog::backdrop{background:#080b12b8}
dialog h2{margin:0 0 12px;font-size:18px}
dialog .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
@media(max-width:700px){.app-shell{grid-template-columns:1fr}
.sidebar{display:flex}
.main-pane{display:none}
.app-shell.startup-failed .sidebar{display:none}
.app-shell.startup-failed .main-pane{display:flex}
.app-shell.chat-open .sidebar,.app-shell.subpage-open .sidebar{display:none}
.app-shell.chat-open .main-pane,.app-shell.subpage-open .main-pane{display:flex}
.pane-header{height:54px;padding:0 12px}
.back-button{display:grid}
.chat-scroll{padding:12px 15px}
.chat-footer{padding:0 10px 8px}
.message-actions{opacity:1}
.brand{padding-bottom:18px}
.content-panel{padding:20px 15px}
.voice-actions{justify-content:flex-start}.voice-button,.voice-accept,.voice-decline{min-width:42px;min-height:42px}
}

:where(.composer textarea){field-sizing:content}
.modal-field{display:block;width:100%;min-width:0;background:#151a24;color:var(--text);border:1px solid var(--line);border-radius:6px;padding:10px;resize:vertical}
@media(max-width:700px){.icon-button,.composer button,.message-actions button,.nav-button,.friend-row button{min-width:44px;min-height:44px}.composer textarea,.field-row input,.settings-input{font-size:16px}.auth-page{padding:calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.voice-peer-muted{display:flex;align-items:center;gap:3px;color:var(--danger);font-size:11px}.voice-peer-muted svg{width:13px;height:13px}

/* VoiceKord surface refinements */
.sidebar{background:linear-gradient(180deg,#192031,var(--sidebar) 36%)}
.sidebar-top{padding:18px 12px 8px}
.brand{padding:3px 10px 21px;font-size:17px;letter-spacing:-.02em}
.nav-button{min-height:39px;font-weight:650;color:#cbd3e4}
.section-heading{padding-top:24px;color:#9ca8bc}
.conversation-item{min-height:62px;padding:8px 10px;border:1px solid transparent;border-radius:10px}
.conversation-item:hover{background:#ffffff0d}.conversation-item.active{background:#a69cff19;border-color:#a69cff30;box-shadow:inset 3px 0 #a69cff}
.conversation-copy{gap:2px}.conversation-copy strong{font-size:13px}.conversation-copy small{color:#929fb5}
.avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#4a547c,#303c5b)}
.avatar.online:after{right:1px;bottom:1px;width:10px;height:10px;border-width:2px}
.unread-badge{padding:2px 6px;background:#7c72ee;box-shadow:0 2px 10px #766cf044}
.sidebar-bottom{min-height:66px;padding:11px 14px;background:#111725;border-top-color:#354058}
.sidebar-bottom .self-label strong{font-size:13px}.sidebar-bottom .icon-button{width:36px;height:36px;border-radius:9px}
.main-pane{background:radial-gradient(circle at 78% -10%,#242a3b 0,transparent 40%),var(--bg)}
.pane-header{height:66px;padding:0 28px;gap:13px;background:#171d2ad9}
.pane-header .heading{font-size:15px;letter-spacing:-.01em}.pane-header .subheading{font-size:11px}
.call-button{width:38px;height:38px;border:1px solid #466958;border-radius:10px;background:#244333;color:#7ae3b4}.call-button:hover{background:#305943;color:#b4ffd8}.call-button:disabled{border-color:var(--line);background:#262d3b;color:var(--muted)}
.chat-scroll{padding-top:25px}
.chat-footer{padding-bottom:17px}.composer{border-color:#3a465c;border-radius:13px;background:#222b3b;padding:9px;box-shadow:0 9px 28px #0507113d;transition:border-color .15s,box-shadow .15s}
.composer:focus-within{border-color:#8982e7;box-shadow:0 0 0 3px #8982e720}
.composer button{border-radius:8px;min-width:36px;height:36px}.composer button:first-child{color:#bdc8d9;font-size:24px}.composer .send-button{background:#776df0}.composer .send-button:hover{background:#8a81ff}
.composer textarea{padding:6px 3px}.composer-hint{color:#8d98ad}
.welcome-state,.empty-state{color:#a5b0c2}.welcome-state h1{font-size:22px;letter-spacing:-.02em}.welcome-glyph{display:block;width:70px;height:70px;margin:0 auto 10px;border-radius:17px;object-fit:cover;box-shadow:0 15px 40px #06081780}
.load-error{border-radius:9px;background:#252d3d}.startup-error{border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.auth-card{border-color:#3b465c;background:#1b2230;border-radius:16px}.auth-brand{margin:12px 0 0;color:#c6c0ff;font-size:14px;font-weight:750;letter-spacing:.02em}.auth-card h1{margin-top:12px}
.small-button,.primary,.friend-row button{transition:background .14s,border-color .14s}
@media(max-width:900px){.app-shell{grid-template-columns:238px minmax(0,1fr)}.pane-header{padding-inline:18px}}
@media(max-width:700px){.app-shell{grid-template-columns:1fr}.pane-header{height:58px;padding-inline:12px}.chat-scroll{padding:15px 14px}.chat-footer{padding:0 10px 10px}.auth-card{padding:28px}}
@media(max-width:440px){.voice-actions{gap:6px}.voice-button,.voice-accept,.voice-decline{min-width:40px;min-height:40px}}

/* Compact account pages and local theme presets. */
:root{--sidebar-glow:#192031;--main-glow:#242a3b;--header-bg:#171d2ad9;--footer-bg:#111725;--composer-bg:#222b3b;--dock-bg:#20283af5;--callbar-bg:#222d3e;--hover-bg:#ffffff0d;--active-bg:#a69cff19;--active-line:#a69cff30}
.sidebar{background:linear-gradient(180deg,var(--sidebar-glow),var(--sidebar) 36%)}
.sidebar-bottom{background:var(--footer-bg)}
.main-pane{background:radial-gradient(circle at 78% -10%,var(--main-glow) 0,transparent 40%),var(--bg)}
.pane-header{background:var(--header-bg)}
.composer{background:var(--composer-bg)}


.conversation-item:hover,.nav-button:hover{background:var(--hover-bg)}
.conversation-item.active,.nav-button.active{background:var(--active-bg);border-color:var(--active-line);box-shadow:inset 3px 0 var(--accent)}
.avatar.presence-online:after,.avatar.presence-idle:after,.avatar.presence-dnd:after,.avatar.presence-offline:after,.avatar.presence-invisible:after{content:"";position:absolute;right:1px;bottom:1px;width:10px;height:10px;border:2px solid var(--sidebar);border-radius:50%;background:var(--safe)}
.avatar.presence-idle:after{background:#f1c478}.avatar.presence-dnd:after{background:#ef7d87}.avatar.presence-offline:after,.avatar.presence-invisible:after{background:#798396}
.page-intro{margin-bottom:16px}.page-intro h2,.settings-body h2{margin-bottom:4px}.page-intro p,.settings-body>p{margin:0 0 18px}
.page-tabs{display:flex;gap:4px;overflow:auto;border-bottom:1px solid var(--line);margin-bottom:20px}.page-tab{flex:none;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);padding:10px 13px;font-weight:650}.page-tab:hover{color:var(--text)}.page-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.friends-page{width:min(1120px,100%)}.friends-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:28px}.friends-primary{min-width:0}.friend-controls{margin-bottom:13px}.friend-controls input{width:100%}.friend-section{margin-bottom:22px}.friend-section h3,.active-now h3,.friend-find h3,.settings-section h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}.friend-list{border-top:1px solid var(--line)}.friend-row{display:flex;flex-wrap:wrap;gap:8px;min-height:58px}.friend-row .grow{min-width:140px}.friend-row button{flex:none}.friend-empty{padding:12px 4px;margin:0}.friend-find{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}.friend-find p{margin:0 0 12px}
.active-now{border-left:1px solid var(--line);padding:3px 0 0 20px;min-width:0}.active-now>p{font-size:12px;margin:0 0 12px}.active-person{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;color:var(--text);padding:7px 5px;border-radius:8px;text-align:left}.active-person:hover{background:var(--hover-bg)}.active-person .avatar{width:30px;height:30px;font-size:12px}.active-person span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.active-person small{font-size:10px;color:var(--muted)}
.settings-page{display:grid;grid-template-columns:150px minmax(0,1fr);gap:26px;width:min(850px,100%)}.settings-nav{display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line);padding-right:14px}.settings-link{border:0;background:transparent;color:var(--muted);padding:10px;text-align:left;border-radius:7px}.settings-link:hover{background:var(--hover-bg);color:var(--text)}.settings-link.active{background:var(--active-bg);color:var(--text);font-weight:700}.settings-body{min-width:0}.settings-section{border-top:1px solid var(--line);padding:18px 0;margin-top:18px}.settings-section p{margin:4px 0 12px;font-size:12px}.settings-select{width:min(320px,100%);border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--text);padding:9px}.settings-section input[type=range]{width:min(280px,100%);accent-color:var(--accent);vertical-align:middle;margin-right:12px}
.voice-diagnostics{line-height:1.55}
.load-older[hidden],.new-messages[hidden]{display:none}
@media(max-width:980px){.friends-layout{grid-template-columns:minmax(0,1fr) 190px;gap:16px}.active-now{padding-left:14px}.active-person{flex-wrap:wrap}.active-person small{width:100%;padding-left:38px}}
@media(max-width:760px){.friends-layout{grid-template-columns:1fr}.active-now{border-left:0;border-top:1px solid var(--line);padding:18px 0}.settings-page{grid-template-columns:1fr;gap:14px}.settings-nav{flex-direction:row;overflow:auto;border-right:0;border-bottom:1px solid var(--line);padding:0 0 8px}.settings-link{white-space:nowrap}.theme-options{grid-template-columns:1fr 1fr}}

/* DM reading and account controls */
.sidebar-bottom{position:relative}.self-profile{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:43px;padding:4px;border:0;border-radius:9px;background:transparent;color:var(--text);text-align:left}.self-profile:hover,.self-profile[aria-expanded=true]{background:var(--hover-bg)}.self-profile .self-label{flex:1}

.server-voice-list{display:grid;gap:2px}.server-voice-channel{display:flex;align-items:center;border-radius:8px;color:var(--muted)}.server-voice-channel:hover{background:var(--hover-bg)}.server-voice-person{display:flex;align-items:center;gap:6px;min-height:28px;margin-left:22px;padding:2px 8px;border-radius:8px;color:var(--muted);font-size:12px}.server-voice-person.speaking{color:var(--safe);box-shadow:inset 2px 0 var(--safe)}.server-voice-avatar{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--active-bg);color:var(--text);font-size:11px}.server-voice-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.server-voice-flag{font-size:10px;color:var(--muted)}
.server-voice-avatar{overflow:hidden;flex:none}.server-voice-avatar img{width:100%;height:100%;object-fit:cover}

.self-popover{position:absolute;z-index:30;left:10px;bottom:calc(100% + 8px);width:min(292px,calc(100vw - 20px));padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:0 18px 44px #0009}.self-popover-head{display:flex;align-items:center;gap:10px;padding:6px 7px 11px;border-bottom:1px solid var(--line)}.self-popover-head>div:last-child{display:grid;min-width:0}.self-popover-head strong,.self-popover-head small,.self-custom-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.self-popover-head small{color:var(--muted);font-size:11px}.self-custom-status{color:var(--accent);font-size:11px;margin-top:3px}.self-status-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:9px 0;border-bottom:1px solid var(--line)}.self-menu-item{width:100%;border:0;background:transparent;color:var(--text);border-radius:6px;padding:8px;text-align:left;font-size:12px}.self-menu-item:hover,.self-menu-item[aria-pressed=true]{background:var(--active-bg)}.self-menu-item[aria-pressed=true]{color:var(--accent)}.self-custom-form{display:flex;gap:5px;flex-wrap:wrap;padding:10px 0}.self-custom-form input{flex:1 0 100%;min-width:0;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--text);padding:7px 9px}.self-custom-form .small-button{font-size:11px}
.friends-layout.no-active{grid-template-columns:minmax(0,1fr)}.friend-custom-status{display:block;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.active-person small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-identity{display:grid;min-width:0}.dm-identity .heading,.dm-custom-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dm-custom-status{color:var(--accent);font-size:10px;max-width:360px}
.dm-message-search{position:relative;display:flex;align-items:center;flex:0 1 180px;min-width:60px;max-width:180px;height:30px;padding:0 7px;border-radius:6px;background:var(--bg-input);color:var(--text-muted)}
.dm-message-search>svg{order:2;flex:none;width:15px;height:15px}
.dm-message-search input{flex:1;min-width:0;width:100%;padding:0;border:0;outline:0;background:transparent;color:var(--text-primary);font-size:12px}
.dm-search-results{position:absolute;z-index:20;top:calc(100% + 7px);right:0;width:min(350px,calc(100vw - 20px));max-height:55dvh;overflow:auto;padding:6px;border:1px solid var(--border);border-radius:8px;background:var(--bg-floating);box-shadow:0 12px 30px var(--shadow-color)}
.dm-search-results[hidden]{display:none}
.dm-search-result{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;width:100%;padding:8px;border:0;border-radius:5px;background:transparent;color:var(--text-primary);text-align:left}
.dm-search-result:hover,.dm-search-result:focus-visible{background:var(--bg-hover)}
.dm-search-result time{font-size:10px;color:var(--text-muted)}
.dm-search-result span{grid-column:1/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text-secondary)}
.dm-search-state{margin:0;padding:10px;color:var(--text-muted);font-size:12px}
.dm-search-more{width:100%;padding:8px;border:0;background:transparent;color:var(--accent)}
@media(max-width:700px){.pane-header:has(.dm-message-search){gap:5px;padding-inline:8px}.pane-header:has(.dm-message-search) .dm-identity .subheading,.pane-header:has(.dm-message-search) .dm-custom-status{display:none}.dm-message-search{flex-basis:90px;min-width:55px;max-width:120px}}
.message{position:relative}.message.grouped{padding-top:2px;padding-bottom:2px}.message.grouped>.avatar{visibility:hidden;height:1px}.message.grouped .message-meta{display:none}.message-actions{position:absolute;right:10px;top:-12px;z-index:2;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:0 6px 16px #0006}.message-actions button{min-width:25px;min-height:25px}.message:focus-within{background:var(--hover-bg)}
.date-separator,.unread-separator{display:flex;align-items:center;gap:12px;margin:15px 0;color:var(--muted);font-size:11px;text-align:center}.date-separator:before,.date-separator:after,.unread-separator:before,.unread-separator:after{content:"";flex:1;height:1px;background:var(--line)}.unread-separator{color:var(--accent);font-weight:700}.unread-separator:before,.unread-separator:after{background:var(--accent-strong)}
.composer-context{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 9px;margin-bottom:6px;border-left:2px solid var(--accent);border-radius:6px;background:var(--panel);font-size:12px;color:var(--muted)}.composer-context[hidden]{display:none}.composer-context span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.composer-context .icon-button{flex:none}.new-messages{bottom:calc(100% + 8px);font-size:12px}
:root[data-density=compact] .message{padding-top:3px;padding-bottom:3px}:root[data-density=compact] .message.grouped{padding-top:0;padding-bottom:0}:root[data-density=compact] .chat-scroll{padding-top:14px}:root[data-density=compact] .date-separator{margin:10px 0}
:root[data-reduce-motion=on] *, :root[data-reduce-motion=on] *::before,:root[data-reduce-motion=on] *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.preference-button{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:8px 12px;margin:0 7px 7px 0;border-radius:7px}.preference-button.active{border-color:var(--accent);background:var(--active-bg)}.device-field{display:grid;gap:5px;max-width:360px;margin:12px 0;color:var(--muted);font-size:12px}.device-field select{width:100%}.mic-test-meter{height:9px;width:min(300px,100%);margin-top:13px;border-radius:9px;background:var(--raised);overflow:hidden}.mic-test-meter span{display:block;width:0;height:100%;background:var(--safe);transition:width .1s}.account-info{display:grid;gap:8px;margin:18px 0}.account-info>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:8px 0}.account-info strong{font-weight:600;overflow-wrap:anywhere;text-align:right}
@media(max-width:700px){.message-actions{position:static;opacity:1;box-shadow:none;margin-left:auto}.self-popover{left:10px}.dm-custom-status{max-width:200px}}
@media(hover:none){.message-actions{opacity:1}}

/* Shared icon controls and quiet timeline events. */
.icon-button,.sidebar-bottom .icon-button{width:36px;height:36px;border-radius:9px;background:transparent;color:var(--muted)}
.icon-button:hover,.sidebar-bottom .icon-button:hover{background:var(--hover-bg);color:var(--text)}
.icon-button:active,.sidebar-bottom .icon-button:active{background:var(--active-bg)}
.icon-button svg,.nav-icon svg,.composer button svg{width:19px;height:19px;display:block}
.nav-icon{display:grid;place-items:center}
.composer button{display:grid;place-items:center}.composer button:first-child{font-size:inherit}
.composer .send-button{background:var(--accent-strong)}.composer .send-button:hover{background:var(--accent)}
.self-menu-item.status-automatic:before,.self-menu-item.status-idle:before,.self-menu-item.status-dnd:before,.self-menu-item.status-invisible:before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--safe)}
.self-menu-item.status-idle:before{background:#f1c478}.self-menu-item.status-dnd:before{background:#ef7d87}.self-menu-item.status-invisible:before{background:#8792a3}
.self-menu-item[aria-pressed=true]{font-weight:700}.self-custom-form+.self-menu-item{border-top:1px solid var(--line);border-radius:0;padding-top:11px}
.friends-page,.settings-page{max-width:100%}.friend-section{margin-bottom:18px}.settings-section{padding:16px 0;margin-top:16px}
.message.call-event{padding:4px 11px;color:var(--muted);font-size:12px}.message.call-event:hover{background:transparent}
.call-event-line{display:flex;align-items:center;gap:4px;min-width:0;width:100%;padding:5px 10px;border-left:2px solid var(--line);background:var(--hover-bg);border-radius:0 7px 7px 0}
.call-event-line svg{flex:none;width:14px;height:14px;margin-right:5px}.call-event-copy{min-width:0}.call-event-line strong{color:var(--text);font-weight:650}.call-event-line time{margin-left:auto;padding-left:14px;white-space:nowrap;color:var(--muted);font-size:11px}
@media(max-width:500px){.call-event-line{flex-wrap:wrap}.call-event-line time{width:100%;padding-left:23px}}

/* Private servers and text channels share the DM timeline. */
.app-shell{grid-template-columns:62px 270px minmax(0,1fr)}
.app-shell.members-open.server-open{grid-template-columns:62px 270px minmax(0,1fr) 218px}
.server-rail{--rail-button-size:43px;--rail-slot-size:47px;grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:0;padding:13px 7px;background:var(--footer-bg);border-right:1px solid var(--line)}
#server-rail-list{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}#server-rail-list::-webkit-scrollbar{display:none}
.rail-item{flex:none;display:grid;place-items:center;width:var(--rail-slot-size);height:var(--rail-button-size);overflow:visible}
.rail-button{position:relative;display:grid;place-items:center;flex:none;width:var(--rail-button-size);height:var(--rail-button-size);min-width:var(--rail-button-size);min-height:var(--rail-button-size);margin:0;padding:0;border:1px solid transparent;border-radius:14px;background:var(--panel);color:var(--text);line-height:1;overflow:visible;transition:background .14s,border-color .14s,border-radius .14s}
.rail-content{display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0;line-height:1;pointer-events:none}.rail-initials{font-size:14px;font-weight:750;white-space:nowrap}
.rail-button:hover{background:var(--raised);border-color:var(--line);border-radius:12px}.rail-button.active{background:var(--active-bg);border-color:var(--accent);border-radius:12px}.rail-button.active::before{content:"";position:absolute;left:-2px;top:50%;width:3px;height:18px;border-radius:3px;background:var(--accent);transform:translateY(-50%);pointer-events:none}
.rail-button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.rail-button.home{background:transparent}.rail-home-icon img{display:block;width:31px;height:31px;object-fit:contain;border-radius:10px}.rail-button.home.active{background:var(--active-bg)}
.server-unread-badge{position:absolute;right:-1px;bottom:0;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border:2px solid var(--footer-bg);border-radius:10px;background:var(--accent-strong);color:#fff;font-size:10px;font-weight:750;line-height:1;pointer-events:none}
.rail-add{color:var(--accent);background:transparent;border:1px dashed var(--line)}.rail-add:hover{border-color:var(--accent)}.rail-add svg{width:20px;height:20px}
.rail-divider{width:28px;height:1px;background:var(--line);margin:3px 0}
.sidebar{grid-column:2;grid-row:1}.main-pane{grid-column:3;grid-row:1}
.server-sidebar{display:none;flex-direction:column;flex:1;min-height:0;overflow:auto;padding:13px 9px}
.server-open .sidebar-top,.server-open .conversation-list{display:none}.server-open .server-sidebar{display:flex}
.server-sidebar-head{display:flex;align-items:center;gap:6px;min-height:46px;padding:3px 8px 12px;border-bottom:1px solid var(--line)}.server-sidebar-head strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.server-channel-heading{display:flex;align-items:center;justify-content:space-between;margin:20px 7px 8px;color:var(--muted);font-size:10px;letter-spacing:.13em;font-weight:750}
.server-channel-list{display:grid;align-content:start;gap:3px;overflow:auto;min-height:0}.server-channel-row{display:flex;align-items:center;gap:2px;min-height:36px;border-radius:8px;color:var(--muted)}.server-channel-row:hover{background:var(--hover-bg)}.server-channel-row.unread{color:var(--text)}.server-channel-row.active{background:var(--active-bg);color:var(--text);box-shadow:inset 3px 0 var(--accent)}
.server-channel-link{display:flex;align-items:center;gap:8px;min-width:0;flex:1;border:0;background:transparent;color:inherit;text-align:left;padding:8px 10px;font-weight:600}.channel-hash{flex:none;color:var(--muted);font-size:17px;font-weight:500;line-height:1}.channel-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.server-channel-row.unread:not(.active) .channel-name{font-weight:750}.channel-unread{display:grid;place-items:center;min-width:19px;height:18px;padding:0 5px;margin-right:5px;border-radius:10px;background:var(--accent-strong);color:#fff;font-size:10px;font-weight:750;line-height:1}.channel-options{width:28px;height:28px;opacity:0}.server-channel-row:hover .channel-options,.server-channel-row:focus-within .channel-options{opacity:1}.channel-options svg{width:16px;height:16px}
.server-sidebar-actions{display:grid;gap:6px;margin-top:auto;padding:16px 7px 5px;border-top:1px solid var(--line)}.server-sidebar-actions button{text-align:left}
.member-panel{display:none;grid-column:4;grid-row:1;min-width:0;overflow:auto;background:var(--sidebar);border-left:1px solid var(--line);padding:20px 10px}.members-open.server-open .member-panel{display:block}
.member-panel h3,.member-panel h4{margin:0 5px 12px;color:var(--muted);font-size:10px;letter-spacing:.13em}.member-panel h4{margin-top:19px}
.member-row{display:flex;align-items:center;gap:8px;min-height:44px;padding:5px;border-radius:8px}.member-row:hover{background:var(--hover-bg)}.member-row .avatar{width:31px;height:31px;font-size:12px;border-radius:50%;--avatar-presence-size:8px}.member-copy{display:grid;min-width:0;flex:1}.member-copy strong,.member-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-copy strong{font-size:12px}.member-copy small{font-size:10px;color:var(--muted)}.member-remove{width:26px;height:26px;opacity:0}.member-row:hover .member-remove,.member-row:focus-within .member-remove{opacity:1}.member-remove svg{width:15px;height:15px}
.modal-choice{display:grid;gap:8px;margin-top:18px}.modal-choice button{text-align:left}
@media(max-width:1100px){.app-shell,.app-shell.members-open.server-open{grid-template-columns:62px 238px minmax(0,1fr)}.app-shell{position:relative}.members-open.server-open .member-panel{position:absolute;z-index:8;display:block;right:0;top:0;bottom:0;width:min(248px,calc(100vw - 75px));box-shadow:-12px 0 30px #0007}}
@media(max-width:700px){.app-shell,.app-shell.members-open.server-open{grid-template-columns:56px minmax(0,1fr)}.server-rail{--rail-button-size:40px;--rail-slot-size:45px;grid-column:1;padding-inline:5px}.sidebar,.main-pane{grid-column:2;grid-row:1}.rail-home-icon img{width:29px;height:29px}.app-shell.startup-failed .server-rail{display:none}.app-shell.startup-failed .main-pane{grid-column:1/-1}.channel-options,.member-remove{opacity:1}}
@media(hover:none){.channel-options,.member-remove{opacity:1}}
.image-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(5,7,12,.94);display:flex;flex-direction:column;color:#fff}.lightbox-toolbar{display:flex;gap:.5rem;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top) + .6rem) .7rem .6rem;flex-wrap:wrap}.lightbox-toolbar button,.lightbox-toolbar a{border:1px solid #657087;border-radius:.5rem;background:#232c3d;color:#fff;padding:.5rem .75rem;min-height:40px;text-decoration:none;cursor:pointer}.lightbox-toolbar span{min-width:3rem;text-align:center}.lightbox-stage{flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;touch-action:none}.lightbox-stage img{max-width:calc(100vw - 2rem);max-height:calc(100vh - 7rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));object-fit:contain;user-select:none;cursor:grab;transform-origin:center}.lightbox-error{padding:1rem;text-align:center}.attachment-image[role=button]{cursor:zoom-in}.group-avatar{background:linear-gradient(135deg,#5865b8,#9182ce)}
.password-help{display:block;margin:.35rem 0 .1rem;font-size:.86rem;line-height:1.4;color:var(--muted,#aab4c8)}.password-help.invalid{color:#ff9d9d}.password-help.valid{color:#8edbb2}
.conversation-time{flex:none;font-size:10px;color:var(--muted);margin-left:auto}.group-picker{max-height:min(70vh,520px);overflow:auto}.group-picker-row{display:flex;align-items:center;gap:10px;padding:7px 3px}.group-picker-row input{width:18px;height:18px}.group-picker-row .avatar{width:30px;height:30px;font-size:12px}
.auth-status{margin:9px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}.auth-status:empty{display:none}.auth-status[data-state=sent]{color:var(--safe)}.auth-status[data-state=failed]{color:var(--danger)}

/* Opt-in edge geometry for small avatars; image clipping belongs to the image,
   so the status ring can cross the avatar perimeter without changing its size. */
:is(.avatar.presence-edge,.friends-page .friend-row>.avatar,.active-person>.avatar){overflow:visible}
:is(.avatar.presence-edge,.friends-page .friend-row>.avatar,.active-person>.avatar)>img{border-radius:inherit}
:is(.avatar.presence-edge,.friends-page .friend-row>.avatar,.active-person>.avatar)[class*=presence-]::after{right:-1px;bottom:-1px;width:var(--avatar-presence-size,10px);height:var(--avatar-presence-size,10px);box-sizing:content-box;border:2px solid var(--avatar-presence-ring,var(--sidebar));z-index:1;pointer-events:none}
:is(.avatar.presence-edge,.friends-page .friend-row>.avatar,.active-person>.avatar).presence-idle::after{background:var(--warning)}
:is(.avatar.presence-edge,.friends-page .friend-row>.avatar,.active-person>.avatar).presence-dnd::after{background:var(--danger)}
:is(.avatar.presence-edge,.friends-page .friend-row>.avatar,.active-person>.avatar):is(.presence-offline,.presence-invisible)::after{background:var(--muted)}