/* ─── Premium Glassmorphism Dark Theme Design System ─── */

:root {
    /* Curated Premium Color Scheme */
    --bg-primary: #07090E;
    --bg-secondary: #0E131E;
    --bg-panel: rgba(18, 25, 38, 0.7);
    --bg-panel-hover: rgba(26, 35, 54, 0.85);
    
    --accent: #5E5CE6;
    --accent-hover: #4D4BB3;
    --accent-glow: rgba(94, 92, 230, 0.25);
    
    --success: #30D158;
    --success-glow: rgba(48, 209, 88, 0.15);
    --danger: #FF453A;
    --danger-hover: #E03E35;
    
    --text-primary: #F2F2F7;
    --text-secondary: #AEAEB2;
    --text-muted: #636366;
    
    --border: rgba(255, 255, 255, 0.08);
    --border-bright: rgba(255, 255, 255, 0.15);
    
    --shadow: rgba(0, 0, 0, 0.35);
    
    /* Layout Dimensions */
    --sidebar-width: 260px;
    --right-panel-width: 300px;
    --header-height: 56px;
    --rail-width: 56px;
    --server-header-height: calc(var(--header-height) * 2.5); /* tall server-name banner */
    
    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

body {
    background-color: var(--bg-primary);
    background-image: radial-gradient(circle at 80% 20%, rgba(94, 92, 230, 0.08), transparent 45%);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ─── Custom Premium Scrollbars ─── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-bright);
}

/* ─── Auth / Login UI ─── */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(14, 19, 30, 0.95), var(--bg-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.login-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.glass {
    background: var(--bg-panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px var(--shadow);
}

.login-card {
    width: 400px;
    padding: 36px;
    border-radius: 20px;
    text-align: center;
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.login-header {
    margin-bottom: 28px;
}
.logo-wrapper {
    display: inline-flex;
    margin-bottom: 16px;
    color: var(--accent);
}
.pulse-logo {
    display: block;
    border-radius: 50%;
    animation: logoPulse 2.5s infinite ease-in-out;
}

h2 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}
.login-header p {
    color: var(--text-secondary);
    font-size: 13px;
}

.form-group {
    text-align: left;
    margin-bottom: 18px;
}
label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
input[type="text"], input[type="password"], input[type="number"], textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13.5px;
    transition: all 0.2s ease;
}
input:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 16px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13.5px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 8px;
}
.btn-primary {
    background: var(--accent);
    color: white;
}
.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}
.btn-primary:active {
    transform: translateY(0);
}
.btn-secondary {
    background: var(--border-bright);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}
.btn-danger {
    background: var(--danger);
    color: white;
}
.btn-danger:hover {
    background: var(--danger-hover);
}

.auth-toggle {
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.auth-toggle a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.auth-toggle a:hover {
    text-decoration: underline;
}

.error-msg {
    background: rgba(255, 69, 58, 0.15);
    border: 1px solid rgba(255, 69, 58, 0.2);
    color: #FF453A;
    font-size: 12.5px;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: left;
}
/* ─── Security: live console + threat monitor ─── */
.sec-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.admin-hint-inline { font-size: 11.5px; color: var(--text-muted); font-weight: 400; }
.sec-log-auto { font-size: 11.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.admin-log-view {
    margin: 10px 0 0;
    max-height: 300px;
    overflow: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}
.admin-threats { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: 12.5px; }
.threat-row {
    display: grid;
    grid-template-columns: 1.5fr 0.5fr 0.5fr 0.6fr 2fr 1.2fr 0.8fr;
    gap: 8px;
    align-items: center;
    padding: 5px 8px;
    border-radius: 6px;
}
.threat-head {
    color: var(--text-muted);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--border);
}
.threat-row:not(.threat-head):hover { background: rgba(255, 255, 255, .03); }
.threat-flagged { background: rgba(232, 161, 58, .08); }
.threat-banned { opacity: .55; }
.threat-ip { font-family: 'Consolas', monospace; color: var(--text-primary); word-break: break-all; }
.lockout-row { grid-template-columns: 1.6fr 0.8fr 1fr 0.9fr; }
.threat-susp { color: #e8a13a; font-weight: 700; }
.threat-path { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.threat-seen { color: var(--text-muted); font-size: 11px; }
.threat-act { text-align: right; }
/* ─── Ban block screen (persistent; covers everything for a banned IP) ─── */
.ban-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(40, 14, 16, 0.96), var(--bg-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.ban-overlay.hidden { display: none !important; }
.ban-card {
    width: 420px;
    max-width: calc(100vw - 40px);
    padding: 40px 36px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid rgba(255, 69, 58, 0.35);
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ban-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #FF453A;
    background: rgba(255, 69, 58, 0.12);
    border: 1px solid rgba(255, 69, 58, 0.3);
}
.ban-card h2 { margin: 0 0 10px; font-size: 22px; color: var(--text-primary); }
.ban-card #ban-message { font-size: 15px; color: #FF6961; font-weight: 600; margin: 0 0 14px; }
.ban-card .ban-sub { font-size: 12.5px; color: var(--text-muted); margin: 0; }

/* ─── Main Application Container ─── */
.app-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.hidden {
    display: none !important;
}

/* ─── Sidebar ─── */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

/* Tall server-name banner that spans the nav rail + sidebar (extends left over
   the rail, which is padded down to start below it). */
.server-header {
    position: relative;
    height: var(--server-header-height);
    margin-left: calc(-1 * var(--rail-width)); /* reach left over the rail */
    width: calc(100% + var(--rail-width));
    padding: 0 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    z-index: 2;
    flex-shrink: 0;
}
.server-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.server-brand span {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.server-logo {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}
/* Connection-quality indicator pinned to the top-right of the banner. */
.server-header #conn-quality-btn {
    position: absolute;
    top: 12px;
    right: 12px;
}

/* ── Connection quality indicator (header) ── */
.conn-quality {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 18px;
    padding: 3px 5px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease;
    flex-shrink: 0;
}
.conn-quality:hover { background: var(--bg-panel-hover); }
.conn-quality .cq-bar {
    width: 3px;
    border-radius: 1px;
    background: var(--text-muted);
    opacity: 0.3;
    transition: background 0.2s ease, opacity 0.2s ease;
}
.conn-quality .cq-bar:nth-child(1) { height: 6px; }
.conn-quality .cq-bar:nth-child(2) { height: 10px; }
.conn-quality .cq-bar:nth-child(3) { height: 14px; }
.conn-quality .cq-bar.on { opacity: 1; }
.conn-quality.conn-good .cq-bar.on { background: var(--success, #30d158); }
.conn-quality.conn-fair .cq-bar.on { background: #e6b800; }
.conn-quality.conn-poor .cq-bar.on { background: var(--danger, #ff453a); }
.conn-quality.conn-offline .cq-bar { background: var(--danger, #ff453a); opacity: 0.4; }
.conn-quality.conn-offline { animation: conn-blink 1.2s steps(2, start) infinite; }
@keyframes conn-blink { 50% { opacity: 0.45; } }

/* ── Connection details popover ── */
.conn-panel {
    position: fixed;
    z-index: 4000;
    min-width: 224px;
    background: #161e2c; /* opaque (was the semi-transparent --bg-panel) */
    border: 1px solid var(--border-bright, var(--border));
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    transform-origin: top left;
    /* Fluid open AND close: transition opacity + transform both ways (rather than a
       one-shot keyframe + instant display:none). */
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.conn-panel.hidden {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    pointer-events: none;
    visibility: hidden;
    /* Stay visible through the fade-out, then hide — so closing animates instead of snapping. */
    transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.4, 0, 0.6, 1), visibility 0s linear 0.2s;
}
.conn-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary, #fff);
    margin-bottom: 8px;
}
.conn-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.conn-dot.conn-good { background: var(--success, #30d158); }
.conn-dot.conn-fair { background: #e6b800; }
.conn-dot.conn-poor, .conn-dot.conn-offline { background: var(--danger, #ff453a); }
.conn-row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.conn-k { color: var(--text-muted); }
.conn-v { color: var(--text-primary, #fff); font-variant-numeric: tabular-nums; }
.conn-sub {
    margin-top: 9px; padding-top: 7px;
    border-top: 1px solid var(--border);
    font-weight: 700; color: var(--text-muted);
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
}
.conn-note { margin-top: 8px; font-size: 11px; color: var(--text-muted); }
.server-logo.circle {
    border-radius: 50%;
}
.server-logo.square {
    border-radius: 10px;
}

/* ─── Admin: server logo controls ─── */
.logo-admin { display: flex; gap: 16px; align-items: flex-start; }
.logo-admin-preview {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.04);
    background-size: cover;
    background-position: center;
    border: 1px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}
.logo-admin-preview.circle { border-radius: 50%; }
.logo-admin-preview.square { border-radius: 12px; }
.logo-admin-controls { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.logo-admin-row { display: flex; gap: 8px; }
.logo-admin-row .btn { width: auto; }
.logo-admin-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.logo-admin-field select { width: 100%; }
.logo-admin-field input[type="range"] { width: 100%; accent-color: var(--accent); }

/* ─── Sidebar search ─── */
.sidebar-search {
    position: relative;
    margin: 10px 12px 2px;
    flex-shrink: 0;
}
.sidebar-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.sidebar-search input {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    padding: 8px 28px 8px 30px;
    outline: none;
    transition: border-color 0.15s ease;
}
.sidebar-search input::placeholder { color: var(--text-muted); }
.sidebar-search input:focus { border-color: var(--accent); }
.sidebar-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
}
.sidebar-search-clear:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.sidebar-search-clear.hidden { display: none; }

/* Hidden by an active sidebar search query. */
.search-hidden { display: none !important; }

/* Hidden by the rail's Text/Voice channel-type filter. */
.type-hidden { display: none !important; }

.channels-section {
    flex: 1;
    overflow-y: auto;
    padding: 16px 8px;
}

/* ─── Vertical nav rail ─── */
.sidebar-rail {
    width: var(--rail-width);
    flex-shrink: 0;
    background: var(--bg-primary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* Top padding clears the tall server banner that overhangs the rail. */
    padding: calc(var(--server-header-height) + 10px) 0 12px;
}
.rail-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease, color 0.15s ease;
}
.rail-btn:hover { background: var(--bg-panel-hover); color: var(--text-primary); }
.rail-btn.active {
    background: var(--accent);
    color: #fff;
}

/* Hover "pop": scale the ICON (not the button) so the slide-out tooltip below,
   which lives on the button, isn't scaled along with it. */
.rail-btn svg { transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1); }
.rail-btn:hover svg { transform: scale(1.22); }
.rail-btn:active svg { transform: scale(1.05); }

/* Slide-out label tooltip (replaces the native title). Hidden until hover, then
   eases out to the right of the rail. data-tip is set from the old title in JS. */
.rail-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-8px) scale(0.96);
    transform-origin: left center;
    white-space: nowrap;
    background: var(--bg-panel, #1e1f24);
    color: var(--text-primary);
    border: 1px solid var(--border-bright, var(--border));
    padding: 6px 11px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    z-index: 3000;
    transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Small caret on the left edge of the tooltip pointing back at the button. */
.rail-btn[data-tip]::before {
    content: '';
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    width: 8px;
    height: 8px;
    background: var(--bg-panel, #1e1f24);
    border-left: 1px solid var(--border-bright, var(--border));
    border-bottom: 1px solid var(--border-bright, var(--border));
    transform: translateY(-50%) rotate(45deg) translateX(-4px);
    opacity: 0;
    pointer-events: none;
    z-index: 3000;
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.rail-btn[data-tip]:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
}
.rail-btn[data-tip]:hover::before {
    opacity: 1;
    transform: translateY(-50%) rotate(45deg) translateX(0);
}
/* The active-tab left-edge pill uses ::before too — when active, drop the caret so
   they don't fight (the slide-out label still shows). */
.rail-btn.active[data-tip]::before { content: none; }
/* Active indicator pill on the left edge */
.rail-btn.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

/* ─── Reusable slide-out pop-out labels ───
   Same look as the nav-rail tooltips, but for button clusters elsewhere in the
   UI that sit along an edge. Add `.pop-tip` plus a direction (`.tip-up` for
   bottom clusters like the voice bar / composer, `.tip-down` for top clusters
   like the chat header / sidebar headers). data-tip is mirrored from the
   button's old `title` in JS (see tipify), so dynamic titles stay in sync. */
.pop-tip { position: relative; }
/* Hover "pop" on the icon only, so the label (which lives on the button) isn't
   scaled with it. */
.pop-tip svg { transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pop-tip:hover svg { transform: scale(1.18); }
.pop-tip:active svg { transform: scale(1.04); }

.pop-tip[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    white-space: nowrap;
    background: var(--bg-panel, #1e1f24);
    color: var(--text-primary);
    border: 1px solid var(--border-bright, var(--border));
    padding: 6px 11px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    z-index: 3000;
    transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pop-tip[data-tip]::before {
    content: '';
    position: absolute;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--bg-panel, #1e1f24);
    opacity: 0;
    pointer-events: none;
    z-index: 3000;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

/* Pop UP — label rises above the button (bottom-edge clusters). */
.pop-tip.tip-up[data-tip]::after {
    bottom: calc(100% + 12px);
    transform: translateX(-50%) translateY(8px) scale(0.96);
    transform-origin: bottom center;
}
.pop-tip.tip-up[data-tip]::before {
    bottom: calc(100% + 6px);
    border-right: 1px solid var(--border-bright, var(--border));
    border-bottom: 1px solid var(--border-bright, var(--border));
    transform: translateX(-50%) rotate(45deg) translateY(4px);
}
.pop-tip.tip-up[data-tip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
.pop-tip.tip-up[data-tip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) rotate(45deg) translateY(0);
}

/* Pop DOWN — label drops below the button (top-edge clusters). */
.pop-tip.tip-down[data-tip]::after {
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-8px) scale(0.96);
    transform-origin: top center;
}
.pop-tip.tip-down[data-tip]::before {
    top: calc(100% + 6px);
    border-left: 1px solid var(--border-bright, var(--border));
    border-top: 1px solid var(--border-bright, var(--border));
    transform: translateX(-50%) rotate(45deg) translateY(-4px);
}
.pop-tip.tip-down[data-tip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
.pop-tip.tip-down[data-tip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) rotate(45deg) translateY(0);
}

/* `.tip-end` — right-anchored tip-down. For buttons that hug the right edge of a
   narrow, overflow-clipped container (the sidebar section headers): a centered
   label would spill past the sidebar's scroll box and get clipped, so anchor the
   label's right edge to the button and let it extend left, keeping the caret
   centered under the button. */
.pop-tip.tip-down.tip-end[data-tip]::after {
    left: auto;
    right: 0;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top right;
}
.pop-tip.tip-down.tip-end[data-tip]::before {
    left: auto;
    right: 50%;
    transform: translateX(50%) rotate(45deg) translateY(-4px);
}
.pop-tip.tip-down.tip-end[data-tip]:hover::after {
    transform: translateY(0) scale(1);
}
.pop-tip.tip-down.tip-end[data-tip]:hover::before {
    transform: translateX(50%) rotate(45deg) translateY(0);
}

/* Respect reduced-motion: keep the reveal, drop the spring/scale movement. */
@media (prefers-reduced-motion: reduce) {
    .pop-tip:hover svg { transform: none; }
    .pop-tip.tip-up[data-tip]:hover::after,
    .pop-tip.tip-down[data-tip]:hover::after { transform: translateX(-50%); }
    .pop-tip.tip-down.tip-end[data-tip]:hover::after { transform: none; }
}

/* ─── Attention pulse: new DM (DMs rail btn + dm-item) or @mention (Channels
   rail btn + channel-item). Cleared when the user views the conversation.
   A slow "breathing" glow — opacity only (no size change), so it reads as a
   gentle pulse and stays comfortable even with reduced motion. ─── */
@keyframes attn-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(94, 92, 230, 0.15); color: var(--text-secondary); }
    50%      { box-shadow: 0 0 0 4px rgba(94, 92, 230, 0.85); color: var(--accent); }
}
.rail-btn.attn-pulse {
    animation: attn-ring 2.4s ease-in-out infinite;
}
.rail-btn.attn-pulse.active { animation: none; color: #fff; } /* active tab: no pulse */
/* Numeric count badge anchored to a nav-rail icon (e.g. total unread DMs). */
.rail-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent, #5e5ce6);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 6px var(--accent-glow);
    pointer-events: none;
}
/* Notepad button (chat header) pulses when the shared notepad gains new text. */
.chat-action-btn.attn-pulse {
    animation: attn-ring 2.4s ease-in-out infinite;
    color: var(--accent);
}

@keyframes attn-glow {
    0%, 100% { background: rgba(94, 92, 230, 0.06); }
    50%      { background: rgba(94, 92, 230, 0.40); }
}
.channel-item.attn-pulse,
.dm-item.attn-pulse {
    animation: attn-glow 2.4s ease-in-out infinite;
    color: var(--text-primary);
}
/* The active conversation is being viewed — never pulse it. */
.channel-item.attn-pulse.active,
.dm-item.attn-pulse.active { animation: none; }

/* Reduced motion: keep the pulse but slower & gentler (it's opacity-only, so
   there's no movement to disorient — just a soft, slow breathe). */
@media (prefers-reduced-motion: reduce) {
    .rail-btn.attn-pulse,
    .channel-item.attn-pulse,
    .dm-item.attn-pulse { animation-duration: 3.6s; }
}

/* ─── Sidebar scroll body + filterable sections ─── */
.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 14px 8px;
}
.sidebar-section { margin-bottom: 14px; }
.sidebar-section.rail-hidden { display: none; }
/* In the combined "All" view, give Direct Messages breathing room + a divider
   so it isn't cramped against the channels/users above it. Single-section views
   (Channels/Users/DMs only) get no divider since nothing sits above. */
.sidebar-scroll[data-filter="all"] .sidebar-section[data-section="dms"] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ─── Online users list ─── */
.users-count { color: var(--text-muted); font-weight: 600; }
#online-users-list { margin-top: 4px; }
.user-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.user-item:hover { background: var(--bg-panel-hover); }
.user-item-avatar {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}
/* Offline members appear dimmed; hovering restores full opacity. */
.user-item-offline { opacity: 0.5; }
.user-item-offline:hover { opacity: 0.85; }
/* Presence dot in the corner of the avatar. */
.user-presence {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--bg-panel, #1e1f24);
    box-sizing: content-box;
}
.user-presence.is-online { background: var(--success, #30d158); }
.user-presence.is-offline { background: var(--text-muted, #6b6f76); }

/* ─── Presence state colors (shared by the sidebar dot, the account-chip dot,
   and the status-picker swatches). ─── */
.pres-online    { background: #30d158; }                                   /* green  */
.pres-idle      { background: #ffb340; }                                   /* amber  */
.pres-brb       { background: #2dd4bf; }                                   /* teal   */
.pres-busy      { background: #ff453a; }                                   /* red    */
/* Do Not Disturb: red with a white "minus" bar through it (the classic DND glyph).
   Drawn as a background layer so it works on any dot without a pseudo-element. */
.pres-dnd       { background: linear-gradient(#fff, #fff) center / 56% 2px no-repeat, #ff453a; }
.pres-offline   { background: #72767d; }                                   /* gray   */
.pres-invisible { background: transparent; box-shadow: inset 0 0 0 2px #8a8f98; } /* hollow gray */

/* Account-chip presence dot (bottom-right of the self avatar). */
.self-presence-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--bg-secondary, #16171d);
    box-sizing: content-box;
    pointer-events: none;
}
.user-item-name {
    flex: 1;
    font-size: 13.5px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-item-admin {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--success);
    background: rgba(48, 209, 88, 0.16);
    padding: 1px 5px;
    border-radius: 4px;
}

/* "You muted this person" indicator (personal/local mute) */
.muted-indicator {
    display: inline-flex;
    align-items: center;
    color: var(--danger);
    flex-shrink: 0;
    margin-left: auto;
}
.user-item.locally-muted .user-item-name,
.voice-ch-user.locally-muted span {
    color: var(--text-muted);
}
.voice-ch-user.locally-muted .muted-indicator { margin-left: auto; }
.category-group {
    margin-bottom: 20px;
}
.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    margin-bottom: 6px;
}
.category-header span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
}
.btn-icon {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
}
.btn-icon:hover {
    color: var(--text-primary);
}

/* ─── Channel tree (categories holding mixed text + voice channels) ─── */
.channels-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    margin-bottom: 8px;
}
.channels-toolbar > span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
}
.channels-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.channels-toolbar-actions .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
}
.channels-toolbar-actions .btn-icon:hover { background: rgba(255, 255, 255, 0.06); }

.channel-cat { margin-top: 10px; }
.channel-cat-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 4px;
    cursor: pointer;
    user-select: none;
}
.channel-cat-header .cat-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.15s ease;
}
.channel-cat-header:hover .cat-name { color: var(--text-secondary); }
.channel-cat-header .cat-caret {
    color: var(--text-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.channel-cat-header.collapsed .cat-caret { transform: rotate(-90deg); }
.channel-cat-channels {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.channel-cat-channels.hidden { display: none; }
/* When searching, reveal collapsed categories so matches show. */
#channel-tree.searching .channel-cat-channels.hidden { display: flex; }

.channels-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.channel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-secondary);
}
.channel-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}
.channel-item.active {
    background: rgba(94, 92, 230, 0.12);
    color: var(--text-primary);
    font-weight: 500;
}
.channel-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Voice presence list */
.voice-ch-users {
    padding-left: 28px;
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.voice-ch-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
    /* Same hover affordance as channels / the Users list, so it reads as
       interactive (right-click opens the same user menu). The negative margin
       lets the highlight bleed out without shifting the avatar's indent. */
    cursor: pointer;
    padding: 3px 6px;
    margin: 0 -6px;
    border-radius: 6px;
    transition: background 0.12s ease;
}
.voice-ch-user:hover { background: var(--bg-panel-hover); }
.voice-ch-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border);
}
.voice-ch-avatar.speaking {
    box-shadow: 0 0 0 2px var(--success);
    animation: voiceRing 1s infinite alternate;
}
/* Voice-activity highlight: applied to the whole user row while they speak. */
.voice-ch-user.speaking {
    color: var(--success);
}
.voice-ch-user.speaking span {
    color: var(--success);
    font-weight: 600;
}
.voice-ch-user.speaking .voice-ch-avatar {
    box-shadow: 0 0 0 2px var(--success);
    border-color: var(--success);
}

/* Profile Footer */
.profile-footer {
    height: 60px;
    padding: 0 12px;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: 15px;
}
.profile-meta {
    flex: 1;
    min-width: 0;
}
.profile-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13.5px;
}
.profile-name span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-status {
    font-size: 11.5px;
    color: var(--text-secondary);
}
.badge {
    padding: 2px 5px;
    font-size: 8px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-admin {
    background: rgba(255, 69, 58, 0.15);
    color: var(--danger);
    border: 1px solid rgba(255, 69, 58, 0.25);
}
.profile-actions {
    display: flex;
    gap: 4px;
}
.profile-actions button {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.15s ease;
}
.profile-actions button:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

/* ─── Chat View ─── */
.chat-area {
    flex: 1;
    min-width: 0; /* allow shrinking so wide content (e.g. code blocks) scrolls instead of pushing the layout wide */
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}

.chat-header {
    height: var(--header-height);
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    background: rgba(14, 19, 30, 0.2);
    /* Own stacking context above the video grid / message frame below it, so the
       header's pop-out labels (tip-down) and the account dropdown composite on
       top. Without this, the <video> tiles in #video-grid — which create their
       own compositing layer — paint over the labels even at a high z-index.
       Kept well below the modal/overlay layers (1000+). */
    position: relative;
    z-index: 30;
}
.active-channel-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.active-channel-info h3 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
}
.chat-action-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.15s ease;
}
.chat-action-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

/* ─── Header right: channel actions + account menu ───────────────────── */
.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.chat-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-right: 12px;
    border-right: 1px solid var(--border);
}
.user-menu-wrap { position: relative; }
.user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    max-width: 220px;
}
.user-chip:hover, .user-chip.open {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border);
}
.user-chip-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--accent);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
}
.user-chip-name {
    font-size: 13.5px;
    font-weight: 600;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-chip-caret {
    color: var(--text-secondary);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.user-chip.open .user-chip-caret { transform: rotate(180deg); }

.user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-bright);
    border-radius: 12px;
    box-shadow: 0 12px 32px var(--shadow);
    padding: 6px;
    z-index: 1000;
}
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}
.user-menu-item svg { color: var(--text-secondary); flex-shrink: 0; }
.user-menu-item:hover { background: rgba(255, 255, 255, 0.07); }
.user-menu-item.danger { color: var(--danger); }
.user-menu-item.danger svg { color: var(--danger); }
.user-menu-item.danger:hover { background: rgba(255, 69, 58, 0.12); }
.user-menu-sep {
    height: 1px;
    background: var(--border);
    margin: 5px 2px;
}

/* ─── Status (presence) picker in the account menu ─── */
.user-menu-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--text-muted); padding: 4px 8px 2px;
}
.presence-picker { display: flex; flex-direction: column; gap: 1px; }
.presence-option {
    display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 7px 8px; border: none; background: none; cursor: pointer;
    border-radius: 7px; color: var(--text-secondary); font-size: 13px; text-align: left;
}
.presence-option:hover { background: rgba(255, 255, 255, 0.07); color: var(--text-primary); }
.presence-option.active { background: rgba(94, 92, 230, 0.14); color: var(--text-primary); }
.presence-option-dot {
    width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box;
}

/* ─── Avatar editor (settings) ───────────────────────────────────────── */
.avatar-edit {
    display: flex;
    align-items: center;
    gap: 16px;
}
.avatar-edit-preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--accent);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 24px;
    color: #fff;
    border: 2px solid var(--border-bright);
}
.avatar-edit-controls { display: flex; flex-direction: column; gap: 4px; }
.avatar-edit-controls .admin-hint { margin-top: 0; }

/* ─── Avatar cropper ─── */
.crop-card { width: 340px; max-width: 92vw; }
.crop-hint { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); text-align: center; }
.crop-viewport {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.crop-viewport:active { cursor: grabbing; }
.crop-viewport #crop-image {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    pointer-events: none;
    -webkit-user-drag: none;
}
.crop-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Dim everything outside the inscribed circle (the saved area). Using
       `closest-side` makes the clear circle's radius exactly half the viewport
       width, so it touches the edges and matches the circular crop on save. */
    background: rgba(0, 0, 0, 0.55);
    -webkit-mask: radial-gradient(circle closest-side at center, transparent 0 calc(100% - 1px), #000 100%);
    mask: radial-gradient(circle closest-side at center, transparent 0 calc(100% - 1px), #000 100%);
}
/* Crisp ring marking the exact crop boundary. */
.crop-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--border-bright);
}
.crop-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    color: var(--text-muted);
}
.crop-controls svg { flex-shrink: 0; }
.crop-controls #crop-zoom { flex: 1; }
.crop-footer { display: flex; justify-content: flex-end; gap: 10px; }

.messages-container {
    flex: 1;
    min-width: 0; /* contain wide children; code blocks scroll horizontally within their own box */
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Message Card Render */
.msg-card {
    display: flex;
    gap: 12px;
    animation: fadeIn 0.2s ease;
    position: relative; /* anchor for the floating action toolbar + Comfy gutter time */
    padding: 2px 8px;
    border-radius: 6px;
}
/* Subtle row highlight so it's clear which message the cursor is on. */
.msg-card:hover { background: rgba(255, 255, 255, 0.04); }
.msg-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
}
.msg-body {
    flex: 1;
    min-width: 0;
}
.msg-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}
.msg-author {
    font-weight: 600;
    color: var(--text-primary);
}
.msg-time {
    font-size: 11px;
    color: var(--text-muted);
}
.msg-content {
    font-size: 13.5px;
    color: #E5E5EA;
    word-break: break-word;
}
/* "(edited)" marker appended after edited message text. */
.msg-edited-tag { font-size: 10px; color: var(--text-muted); }

/* ─── Message display density (Account Settings → Appearance) ─── */
/* Gutter time is hidden by default; only Comfy grouped rows reveal it on hover. */
.msg-gutter-time { display: none; }

/* Normal: base styles above already cover it (avatar + header on every message). */

/* Comfy: group consecutive same-author messages — hide the repeated avatar &
   header and tighten spacing; a new author/run gets clear separation. */
#messages-container.density-comfy { gap: 0; }
.density-comfy .msg-card { position: relative; margin-top: 14px; }
.density-comfy .msg-card.grouped { margin-top: 1px; }
.density-comfy .msg-card.grouped .msg-avatar {
    visibility: hidden;
    height: 0;
    min-height: 0;
    align-self: flex-start;
}
.density-comfy .msg-card.grouped .msg-meta { display: none; }
.density-comfy .msg-card.grouped .msg-gutter-time {
    display: block;
    position: absolute;
    left: 0;
    width: 38px;
    text-align: center;
    font-size: 10px;
    line-height: 1.55;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.12s ease;
    pointer-events: none;
    user-select: none;
}
.density-comfy .msg-card.grouped:hover .msg-gutter-time { opacity: 1; }

/* Compact: no avatars; time + name inline before each message, minimal spacing. */
#messages-container.density-compact { gap: 0; padding-top: 10px; padding-bottom: 12px; }
.density-compact .msg-card {
    padding: 1px 8px;
    align-items: baseline;
}
.density-compact .msg-avatar { display: none; }
.density-compact .msg-body {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
}
.density-compact .msg-meta { margin: 0; gap: 6px; flex-shrink: 0; }
.density-compact .msg-time { order: -1; } /* time first, IRC-style */
.density-compact .msg-content { flex: 1 1 auto; min-width: 0; }

/* ─── Code blocks & inline code (chat) ─── */
.code-block-wrap {
    position: relative;
    margin: 6px 0;
    max-width: 100%; /* never let a long code line stretch the message/layout */
}
.code-block-lang {
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}
.code-block {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    overflow-x: auto;
    white-space: pre;
    /* Reset the chat bubble's break-word so long lines DON'T wrap — they scroll
       horizontally within this box instead (the parent .msg-content sets
       word-break: break-word, which would otherwise force-wrap code). */
    word-break: normal;
    overflow-wrap: normal;
    margin: 0;
}
.code-block code.hljs,
.code-block .hljs {
    background: transparent !important;
    padding: 0 !important;
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
    /* highlight.js themes set the code element to display:block, which makes it
       fill the <pre> width so long lines overflow the CODE (not the PRE) and the
       pre never scrolls. inline-block + min-width:100% lets it grow to the line
       width so the pre's overflow-x:auto produces a real horizontal scrollbar. */
    display: inline-block;
    min-width: 100%;
}
.inline-code {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    color: var(--accent);
}
/* Floating action toolbar — anchored to the far right of each message row, so
   it's always reachable regardless of density (Comfy hides the header; Compact
   keeps the name+message inline) and never pushes the message text around. */
.msg-actions {
    position: absolute;
    top: -8px;
    right: 10px;
    opacity: 0;
    pointer-events: none;
    display: inline-flex;
    gap: 2px;
    padding: 1px;
    background: var(--bg-tertiary, #2b2d31);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    z-index: 6;
    transition: opacity 0.12s ease;
}
.msg-card:hover .msg-actions,
.msg-actions:focus-within {
    opacity: 1;
    pointer-events: auto;
}
.msg-action-btn {
    background: transparent;
    border: none;
    /* Rest at a muted tone so the glyph blends with the toolbar's dark
       background; hover lifts it to full contrast (red for delete). */
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background 0.12s ease, color 0.12s ease;
}
.msg-action-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}
.msg-action-btn.delete-btn:hover {
    color: #ed4245;
    background: rgba(237, 66, 69, 0.16);
}
/* For single-line Compact rows the row is short; nudge the toolbar to sit on
   the row instead of floating above the (very thin) gap. */
.density-compact .msg-actions { top: 50%; transform: translateY(-50%); }

/* File attachments render */
.file-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    max-width: 380px;
    margin-top: 6px;
}
.file-icon {
    display: flex;
    padding: 8px;
    background: rgba(94, 92, 230, 0.15);
    color: var(--accent);
    border-radius: 6px;
}
.file-meta {
    flex: 1;
    min-width: 0;
}
.file-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-size {
    font-size: 11px;
    color: var(--text-secondary);
}

/* ─── Clickable links in messages ─── */
.msg-link { color: var(--accent); text-decoration: none; word-break: break-word; }
.msg-link:hover { text-decoration: underline; }

/* ─── Markdown block + inline elements ─── */
.msg-content .md-h { font-weight: 700; line-height: 1.25; margin: 3px 0; }
.msg-content .md-h1 { font-size: 1.4em; }
.msg-content .md-h2 { font-size: 1.2em; }
.msg-content .md-h3 { font-size: 1.05em; }
.msg-content .md-quote {
    border-left: 3px solid var(--accent, #6C63FF);
    margin: 3px 0;
    padding: 1px 0 1px 10px;
    color: var(--text-secondary);
}
.msg-content .md-list { margin: 3px 0; padding-left: 22px; }
.msg-content .md-list li { margin: 1px 0; }
.msg-content del { opacity: 0.8; }
.msg-content u { text-decoration: underline; }
/* Spoiler: hidden until clicked. */
.md-spoiler {
    background: var(--text-muted, #6b6f76);
    color: transparent;
    border-radius: 4px;
    padding: 0 3px;
    cursor: pointer;
    transition: color 0.1s ease, background 0.1s ease;
}
.md-spoiler::selection { color: transparent; }
.md-spoiler.revealed {
    background: rgba(127, 127, 127, 0.18);
    color: inherit;
    cursor: text;
}

/* ─── Link unfurl (Open Graph preview card) ─── */
.link-embed {
    display: block;
    margin-top: 8px;
    max-width: 440px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: 10px 12px;
    text-decoration: none;
}
.le-site { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
.le-title { font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 4px; word-break: break-word; }
.link-embed:hover .le-title { text-decoration: underline; }
.le-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; word-break: break-word; }
.le-img { display: block; margin-top: 10px; max-width: 100%; max-height: 240px; border-radius: 6px; object-fit: cover; }

/* ─── Interactive provider embeds (click-to-play) ─── */
.embed-card {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-secondary);
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}
.embed-card:hover { background: rgba(94, 92, 230, 0.18); color: var(--text-primary); }
.embed-frame { margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; display: block; background: #000; }
/* Sizes per media kind, shared by the placeholder and the loaded iframe. */
.embed-card.embed-audio, .embed-frame.embed-audio { width: 100%; max-width: 440px; height: 166px; }
.embed-card.embed-video, .embed-frame.embed-video { width: 100%; max-width: 480px; aspect-ratio: 16 / 9; }
.embed-card.embed-tall, .embed-frame.embed-tall { width: 100%; max-width: 340px; height: 560px; }
.embed-frame.embed-tall { background: #fff; }

/* ─── Inline media attachments (audio / video players) ─── */
.media-attach {
    margin-top: 6px;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
}
.media-attach-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 8px;
    word-break: break-word;
}
.media-audio { width: 100%; height: 38px; display: block; }
.media-image {
    max-width: 100%;
    max-height: 360px;
    display: block;
    border-radius: 8px;
    cursor: zoom-in;
    object-fit: contain;
}
/* Image lightbox — centered over a dimmed backdrop, like the app's modals. */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: zoom-out;
    animation: fadeIn 0.15s ease;
}
.lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
    object-fit: contain;
    cursor: default;
}
.lightbox-close {
    position: absolute;
    top: 18px;
    right: 24px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease;
}
.lightbox-close:hover { background: rgba(0, 0, 0, 0.75); }
.media-video {
    width: 100%;
    max-height: 360px;
    /* With preload="none" the element has no intrinsic size until the user hits
       play, so keep a visible black box (with the native play button) until then. */
    min-height: 180px;
    display: block;
    border-radius: 8px;
    background: #000;
}
.media-attach-sub {
    margin-top: 7px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.media-download { color: var(--accent); text-decoration: none; }
.media-download:hover { text-decoration: underline; }

/* ─── YouTube inline embed (click-to-play) ─── */
.yt-embed {
    position: relative;
    margin-top: 8px;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    border: 1px solid var(--border);
}
.yt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 68px; height: 48px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.6);
    transition: background 0.15s ease;
}
.yt-play::before {
    content: "";
    position: absolute;
    top: 50%; left: 52%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 19px;
    border-color: transparent transparent transparent #fff;
}
.yt-embed:hover .yt-play { background: #ff0000; }
.yt-frame {
    margin-top: 8px;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    border-radius: 10px;
    display: block;
}

.input-panel {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    position: relative; /* anchor for the @mention dropdown */
}

/* ─── "User is typing…" indicator ─── */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 7px 2px;
    min-height: 18px;        /* permanent reserved strip so it never shifts/clips the chat */
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    white-space: nowrap;
}
/* Idle: keep the reserved space, just hide the contents (no layout jump). */
.typing-indicator.typing-empty { visibility: hidden; }
.typing-text { overflow: hidden; text-overflow: ellipsis; }
.typing-text::after { content: '…'; }
/* Small stacked avatars of who's typing. */
.typing-avatars { display: inline-flex; align-items: center; flex-shrink: 0; }
.typing-avatar {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    background-size: cover;
    background-position: center;
    border: 1.5px solid var(--bg-primary, #07090E);
    margin-left: -5px;
}
.typing-avatar:first-child { margin-left: 0; }
/* Animated "keys": three bars pressing in sequence (a little keyboard). */
.typing-anim { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; flex-shrink: 0; }
.typing-anim span {
    width: 4px;
    height: 4px;
    border-radius: 1px;
    background: var(--accent, #5E5CE6);
    animation: typing-key 1.1s infinite ease-in-out;
}
.typing-anim span:nth-child(2) { animation-delay: 0.18s; }
.typing-anim span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-key {
    0%, 70%, 100% { transform: translateY(0); opacity: 0.45; }
    35% { transform: translateY(-5px); opacity: 1; }
}

/* ─── @mention highlight (in rendered messages) ─── */
.mention {
    background: rgba(94, 92, 230, 0.18);
    color: #a5a1ff;
    padding: 0 4px;
    border-radius: 4px;
    font-weight: 600;
}
.mention-self {
    background: rgba(250, 204, 21, 0.2);
    color: #facc15;
}

/* ─── @mention autocomplete dropdown ─── */
.mention-autocomplete {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: calc(100% - 8px);
    max-height: 220px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    z-index: 3000;
    padding: 5px;
}
.mention-autocomplete.hidden { display: none; }

/* :emoji: autocomplete — same shell as the @mention dropdown */
.emoji-autocomplete {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: calc(100% - 8px);
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    z-index: 3000;
    padding: 5px;
}
.emoji-autocomplete.hidden { display: none; }
.emoji-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    font-size: 13.5px;
    color: var(--text-primary);
    border-radius: 7px;
    cursor: pointer;
}
.emoji-ac-item.selected,
.emoji-ac-item:hover { background: var(--accent); color: #fff; }
.emoji-ac-preview {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
}
.emoji-ac-preview img { width: 20px; height: 20px; object-fit: contain; }
.emoji-ac-name { font-family: var(--mono, monospace); opacity: 0.95; }
.mention-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    font-size: 13.5px;
    color: var(--text-primary);
    border-radius: 7px;
    cursor: pointer;
}
.mention-item.selected,
.mention-item:hover {
    background: var(--accent);
    color: #fff;
}
.mention-item-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}
.message-form {
    display: flex;
    align-items: flex-end; /* keep the buttons at the bottom as the box grows */
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 12px;
    gap: 10px;
}
.message-form textarea {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.45;
    padding: 8px 4px;
    margin: 0;
    resize: none;
    overflow-y: auto;
    max-height: 160px;
    min-height: 20px;
}
.message-form textarea:focus {
    outline: none;
}
.message-form button {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.message-form button:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

/* ─── Collaborative Notepad ─── */
/* Fixed slide-out drawer (same as the To-Do panel) so opening it overlays the
   chat instead of shrinking the main column (which used to reflow the header). */
.right-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 52%;          /* +50% wider (was 35% / 340–620px) */
    min-width: 510px;
    max-width: 930px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1500;
}
.right-panel.open { transform: translateX(0); }
.panel-header {
    height: var(--header-height);
    flex-shrink: 0;
    padding: 0 14px 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}
.panel-header h3 {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
}
.notepad-container {
    flex: 1;
    padding: 16px;
}
.notepad-container textarea {
    width: 100%;
    height: 100%;
    resize: none;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.6;
}

/* ─── To-Do / Issue list slide-out panel ─── */
.todo-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 52%;          /* +50% wider (was 35% / 340–620px) */
    min-width: 510px;
    max-width: 930px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1500;
}
.todo-panel.open { transform: translateX(0); }
.todo-header {
    height: var(--header-height);
    flex-shrink: 0;
    padding: 0 14px 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}
.todo-title { font-family: var(--font-heading); font-weight: 600; font-size: 16px; }
.todo-add {
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.todo-add input[type="text"] {
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 11px;
    color: var(--text-primary);
    font-size: 13px;
}
.todo-add-row { display: flex; gap: 8px; }
.todo-add-row select {
    flex: 1;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--text-primary);
    font-size: 12.5px;
    cursor: pointer;
}
.todo-add-row .btn { width: auto; padding: 8px 18px; }
.todo-filters {
    flex-shrink: 0;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.todo-filter-group { display: flex; gap: 6px; flex-wrap: wrap; }
.todo-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.todo-chip:hover { background: rgba(255, 255, 255, 0.08); }
.todo-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.todo-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.todo-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 24px 0; }
.todo-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 12px;
}
.todo-item.todo-complete { opacity: 0.72; }
.todo-item.todo-rejected { opacity: 0.72; }
.todo-item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 6px; }
.todo-badge {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 4px;
}
.todo-badge.bug { color: #ff6b6b; background: rgba(255, 107, 107, 0.16); }
.todo-badge.feature { color: #4aa3ff; background: rgba(74, 163, 255, 0.16); }
.todo-status-tag { font-size: 10.5px; font-weight: 700; }
.todo-status-tag.done { color: var(--success, #30d158); }
.todo-status-tag.declined { color: var(--text-muted); }
.todo-item-text { font-size: 13.5px; line-height: 1.45; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }
.todo-item.todo-complete .todo-item-text { text-decoration: line-through; }
.todo-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
.todo-reason {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
    padding: 6px 9px;
    border-left: 2px solid var(--border);
    background: rgba(0, 0, 0, 0.18);
    border-radius: 0 6px 6px 0;
    white-space: pre-wrap;
    word-break: break-word;
}
.todo-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.todo-btn {
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 5px 11px;
    font-size: 12px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    transition: filter 0.12s, background 0.12s;
}
.todo-btn:hover { filter: brightness(1.15); }
.todo-btn-complete { background: var(--success, #30d158); border-color: transparent; color: #06210f; font-weight: 600; }
.todo-btn-decline { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); }
.todo-btn-remove { background: rgba(255, 69, 58, 0.14); border-color: rgba(255, 69, 58, 0.3); color: #ff6b6b; }
.todo-btn-plain { background: rgba(255, 255, 255, 0.06); }

/* Clickable row → opens the detail modal */
.todo-item { cursor: pointer; }
.todo-item:hover { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); }

/* ── To-Do entry detail modal ── */
.todo-detail-card { width: 540px; max-width: calc(100vw - 40px); }
.todo-detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.todo-detail-text { font-size: 15px; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }
.todo-detail-meta { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

/* ── To-Do tags (severity / category labels) ── */
.todo-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.todo-tag-critical { color: #ff6b6b; background: rgba(255, 107, 107, 0.16); border-color: rgba(255, 107, 107, 0.35); }
.todo-tag-major    { color: #ff9f43; background: rgba(255, 159, 67, 0.16); border-color: rgba(255, 159, 67, 0.35); }
.todo-tag-minor    { color: #4aa3ff; background: rgba(74, 163, 255, 0.16); border-color: rgba(74, 163, 255, 0.35); }
.todo-tag-other    { color: var(--text-secondary); background: rgba(255, 255, 255, 0.07); border-color: var(--border); }
.todo-tag-x { background: none; border: none; color: inherit; opacity: 0.7; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.todo-tag-x:hover { opacity: 1; }

/* Tag filter chips: tint the idle (inactive) chip by severity so the palette reads. */
.todo-tag-critical-chip:not(.active) { color: #ff6b6b; border-color: rgba(255, 107, 107, 0.4); }
.todo-tag-major-chip:not(.active)    { color: #ff9f43; border-color: rgba(255, 159, 67, 0.4); }
.todo-tag-minor-chip:not(.active)    { color: #4aa3ff; border-color: rgba(74, 163, 255, 0.4); }

/* Inline description edit (detail modal) */
.todo-detail-text-wrap { display: flex; align-items: flex-start; gap: 10px; }
.todo-detail-text-wrap .todo-detail-text { flex: 1; min-width: 0; }
.todo-edit-btn {
    flex-shrink: 0; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border);
    color: var(--text-secondary); border-radius: 7px; padding: 4px 9px; font-size: 12px; cursor: pointer;
}
.todo-edit-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); }
.todo-edit-wrap { display: flex; flex-direction: column; gap: 8px; }
.todo-edit-textarea {
    width: 100%; min-height: 80px; resize: vertical; box-sizing: border-box;
    background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border); border-radius: 8px;
    padding: 9px 11px; color: var(--text-primary); font-size: 14px; line-height: 1.45; font-family: inherit;
}
.todo-edit-textarea:focus { border-color: var(--accent); outline: none; }
.todo-edit-actions { display: flex; gap: 7px; }

/* Tags section (detail modal) */
.todo-detail-tags { margin-top: 12px; }
.todo-detail-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px; }
.todo-detail-tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.todo-tag-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 9px; }
.todo-tag-add-btn {
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--text-secondary);
    border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.todo-tag-add-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); }
.todo-tag-add-btn.todo-tag-critical { color: #ff6b6b; }
.todo-tag-add-btn.todo-tag-major { color: #ff9f43; }
.todo-tag-add-btn.todo-tag-minor { color: #4aa3ff; }
.todo-tag-input {
    background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border); border-radius: 999px;
    padding: 4px 11px; color: var(--text-primary); font-size: 12px; min-width: 110px;
}
.todo-tag-input:focus { border-color: var(--accent); outline: none; }

/* ── Shared-to-do card (rendered inside a chat message) ── */
.todo-embed {
    display: inline-flex; flex-direction: column; gap: 6px;
    max-width: 420px; margin-top: 2px; padding: 10px 12px;
    background: rgba(94, 92, 230, 0.07); border: 1px solid var(--border-bright, var(--border));
    border-left: 3px solid var(--accent); border-radius: 10px;
    cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.todo-embed:hover { background: rgba(94, 92, 230, 0.14); }
.todo-embed-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.todo-embed-title { font-size: 13.5px; line-height: 1.4; color: var(--text-primary); word-break: break-word; }
.todo-embed-meta { font-size: 11px; color: var(--text-muted); }
.todo-embed-stub { flex-direction: row; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; }
.todo-embed-icon { font-size: 15px; }

/* Drop target highlight while dragging a to-do over the chat. */
.todo-drop-hover { outline: 2px dashed var(--accent); outline-offset: -4px; border-radius: 8px; }

/* Pinned-message rows are clickable (jump to the message). */
.pin-item-clickable { cursor: pointer; transition: background 0.12s; }
.pin-item-clickable:hover { background: rgba(255, 255, 255, 0.05); }

.todo-detail-actions {
    display: flex; flex-wrap: wrap; gap: 7px;
    margin: 14px 0 0; padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.todo-notes { margin-top: 14px; }
.todo-notes-title { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.todo-note { background: rgba(0, 0, 0, 0.18); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
/* Auto changelog entries (e.g. description edits) read as a subtle, dashed history note. */
.todo-note-system { background: rgba(94, 92, 230, 0.07); border-color: rgba(94, 92, 230, 0.28); border-style: dashed; }
.todo-note-system .todo-note-meta { color: var(--accent); }
.todo-note-system .todo-note-text { color: var(--text-secondary); font-size: 12.5px; }
.todo-note-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
.todo-note-del { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.todo-note-del:hover { color: var(--danger, #ff6b6b); }
.todo-note-text { font-size: 13px; line-height: 1.45; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }
.todo-note-empty { font-size: 12px; color: var(--text-muted); padding: 4px 0 8px; }
.todo-note-add { display: flex; gap: 8px; margin-top: 10px; }
.todo-note-input {
    flex: 1; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 10px; color: var(--text-primary); font-size: 13px;
}
.todo-note-add .btn { width: auto; padding: 8px 14px; }

/* ─── Modals ─── */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.modal-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.modal-card {
    width: 550px;
    max-height: 80vh;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-header h2 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
}
.modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
}
.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* ─── Large right-side drawers (Admin Tools + Account Settings) ───
   Slide in from the right like the to-do/notepad panels, but wider, with a left
   sub-category nav and a content area. The root (#admin-modal / #settings-modal)
   positions + slides; its inner card holds the [header / nav | body] grid. */
.side-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(1290px, 97vw);      /* +50% wider than before (was 860px) */
    z-index: 1600;                 /* above the to-do/notepad panels (1500) */
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
    display: block;
}
.side-drawer.open { transform: translateX(0); }
.side-drawer > .modal-card {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    box-shadow: -14px 0 40px rgba(0, 0, 0, 0.5);
    /* header spans the top; nav (col 1) + body (col 2) fill the rest */
    display: grid;
    grid-template-columns: 212px 1fr;
    grid-template-rows: auto 1fr;
    overflow: hidden;
}
.side-drawer .modal-header { grid-column: 1 / -1; }
.side-drawer .admin-tabs,
.side-drawer .settings-nav {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 10px;
    margin: 0;
    border-right: 1px solid var(--border);
    border-bottom: none;
    overflow-y: auto;
    flex-wrap: nowrap;
}
.side-drawer .admin-tab-btn,
.side-drawer .settings-nav-btn {
    text-align: left;
    padding: 9px 12px;
    border: none;
    border-bottom: none;
    border-radius: 8px;
    background: none;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.side-drawer .admin-tab-btn:hover,
.side-drawer .settings-nav-btn:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); }
.side-drawer .admin-tab-btn.active,
.side-drawer .settings-nav-btn.active { background: var(--accent); color: #fff; }
.side-drawer .modal-body {
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
}
/* Settings sections are shown one category at a time (see data-scat). */
.settings-section.cat-hidden { display: none; }

/* Drag-and-drop file upload overlay */
.drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 1700;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(94, 92, 230, 0.14);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 3px dashed var(--accent, #5e5ce6);
    pointer-events: none; /* let drag/drop events pass through to the window listener */
    animation: fadeIn 0.1s ease;
}
.drop-overlay-inner {
    text-align: center;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.55);
    padding: 26px 40px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.drop-overlay-icon { font-size: 40px; margin-bottom: 8px; line-height: 1; }

/* Styled confirm/prompt dialog (replaces native confirm()/prompt()) */
.app-dialog { z-index: 1600; } /* above other modals (1100) + lightbox (1500) */
.app-dialog-card { width: 420px; max-width: calc(100vw - 32px); max-height: none; }
.app-dialog-body { padding: 18px 20px; }
.app-dialog-msg { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; }
.app-dialog-input {
    width: 100%;
    margin-top: 14px;
    background: var(--bg-primary, #1e1f22);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 14px;
}
.app-dialog-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(94, 92, 230, .25); }
.app-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 4px 20px 18px;
}
.app-dialog-actions .btn { width: auto; padding: 8px 18px; }
.settings-section {
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
}
.settings-section:last-child {
    border: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.settings-section h3 {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}
.settings-section h4 {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

/* ─── Toasts & Notifications ─── */
/* ─── Live upload progress (bottom-left stack, opposite the toasts) ─── */
.upload-progress {
    position: fixed;
    bottom: 24px;
    left: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1200;
    width: 280px;
    max-width: 70vw;
    pointer-events: none;
}
.upload-row {
    background: var(--bg-panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: opacity 0.3s ease;
}
.upload-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 12px;
}
.upload-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: 600;
}
.upload-row-stats {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.upload-row-speed {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
.upload-row-pct {
    flex-shrink: 0;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.upload-row-cancel {
    pointer-events: auto; /* container is click-through; the button must catch clicks */
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.upload-row-cancel:hover { color: var(--danger, #ff453a); }
.upload-row-cancelled .upload-bar-fill { background: var(--text-muted); }
.upload-row-cancelled .upload-row-pct { color: var(--text-muted); }
.upload-bar {
    height: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
}
.upload-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    background: var(--accent);
    transition: width 0.15s ease;
}
.upload-row-done .upload-bar-fill { background: var(--success, #30d158); }
.upload-row-done .upload-row-pct { color: var(--success, #30d158); }
.upload-row-error .upload-bar-fill { background: var(--danger, #ff453a); }
.upload-row-error .upload-row-pct { color: var(--danger, #ff453a); }

.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1200;
}
.toast {
    background: var(--bg-panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    padding: 12px 18px;
    border-radius: 8px;
    box-shadow: 0 4px 16px var(--shadow);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    animation: toastSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.toast.sticky {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
}
.toast.sticky:hover {
    border-color: var(--text-secondary);
}
.toast-dismiss-hint {
    margin-left: auto;
    opacity: 0.6;
    font-weight: 700;
    line-height: 1;
}
.toast.sticky:hover .toast-dismiss-hint {
    opacity: 1;
}
.toast.success {
    border-color: rgba(48, 209, 88, 0.4);
    color: var(--success);
}
.toast.error {
    border-color: rgba(255, 69, 58, 0.4);
    color: var(--danger);
}

/* ─── Micro-Animations ─── */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes toastSlide {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes logoPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(94, 92, 230, 0));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 8px var(--accent-glow));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(94, 92, 230, 0));
    }
}
@keyframes voiceRing {
    from {
        box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.5);
    }
    to {
        box-shadow: 0 0 0 4px rgba(48, 209, 88, 0);
    }
}

/* ─── Toggle Switch & Role Manager ────────────────────────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  border-radius: 22px;
  transition: background 0.2s;
}
.toggle-switch .slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: var(--text-secondary);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.toggle-switch input:checked + .slider {
  background: var(--accent);
}
.toggle-switch input:checked + .slider::before {
  transform: translateX(18px);
  background: #fff;
}

/* Role list sidebar in settings */
.role-manager-sidebar {
  width: 180px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  padding-right: 12px;
}
.role-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  transition: background 0.15s;
}
.role-list-item:hover { background: rgba(255,255,255,0.05); }
.role-list-item.active { background: rgba(255,255,255,0.1); }
.role-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.role-list-item .role-default-badge {
  font-size: 9px;
  background: rgba(255,255,255,0.1);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-muted);
  margin-left: auto;
}

/* Selected Role editor panels */
.re-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 16px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.re-section-title:first-child { margin-top: 0; }

.re-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.re-field label {
  font-size: 13px;
  color: var(--text-primary);
  min-width: 80px;
}
/* ── Dark <select> dropdowns ──────────────────────────────────────────────
   The native option-list popup defaults to the OS light palette; combined with
   the theme's light text that makes options unreadable (white-on-light-grey).
   color-scheme:dark tells Chromium/WebView2 to render the popup (and scrollbar)
   dark, and the explicit option colors reinforce it. Applies to every <select>. */
select {
    color-scheme: dark;
    color: var(--text-primary);
}
select option,
select optgroup {
    background-color: var(--bg-tertiary, #2b2d31);
    color: var(--text-primary, #e5e5ea);
}
select option:checked {
    background-color: var(--accent, #5e5ce6);
    color: #fff;
}

.re-field input[type="text"],
.re-field select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}
.re-field input[type="text"]:focus,
.re-field select:focus {
  border-color: var(--accent);
}
.re-field input[type="color"] {
  width: 36px;
  height: 30px;
  padding: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Permission toggles */
.re-perm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 4px;
  margin-bottom: 4px;
  background: rgba(0,0,0,0.15);
}
.re-perm-row label {
  font-size: 13px;
  color: var(--text-primary);
}

/* Channel overrides */
.re-channel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 3px;
  background: rgba(0,0,0,0.1);
}
.re-channel-row .ch-label {
  font-size: 13px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.re-channel-row select {
  padding: 4px 8px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}

/* User assignment */
.re-user-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.re-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s;
}
.re-user-badge:hover { background: rgba(255,80,80,0.2); }
/* Display-only member (a server admin shown on the Admin role) — not removable here. */
.re-user-badge-locked {
  cursor: default;
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
}
.re-user-badge-locked:hover { background: rgba(255,255,255,0.05); }
.re-user-badge-locked::after {
  content: 'admin';
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.6;
  margin-left: 2px;
}
.re-user-badge .remove-x {
  font-size: 10px;
  opacity: 0.6;
}
.re-assign-select {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}
.re-assign-select select {
  flex: 1;
  padding: 6px 10px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}
.re-assign-select select:focus {
  border-color: var(--accent);
}

/* Delete role button */
.re-delete-btn {
  margin-top: 20px;
  padding: 8px 16px;
  background: rgba(255,80,80,0.15);
  border: 1px solid rgba(255,80,80,0.3);
  border-radius: 4px;
  color: #ff5050;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s;
}
.re-delete-btn:hover { background: rgba(255,80,80,0.25); }

/* User top role badge/colors */
.user-role-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(94, 92, 230, 0.15);
  color: var(--accent);
  margin-left: 6px;
  vertical-align: middle;
}

/* ─── Direct Messages & Friends ──────────────────────────────────────── */

#btn-open-friends {
    position: relative;
}

.friends-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-secondary);
}
.friends-badge.inline {
    position: static;
    box-shadow: none;
    display: inline-block;
    margin-left: 4px;
}

/* DM conversation rows in the sidebar */
.dm-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dm-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative; /* anchor the presence dot in the corner */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}
.dm-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dm-unread {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    box-shadow: 0 0 6px var(--accent-glow);
}
/* Unread-message count badge on a channel row. */
.channel-unread {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 6px var(--accent-glow);
}
.dm-empty,
.dm-loading {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Pinned messages modal */
.pins-empty { padding: 16px 4px; font-size: 13px; color: var(--text-muted); text-align: center; }
.pin-item {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.pin-item-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.pin-item-author { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.pin-item-time { font-size: 11px; color: var(--text-muted); }
.pin-item-body { font-size: 13.5px; color: #E5E5EA; word-break: break-word; }
.pin-unpin-btn { width: auto; padding: 3px 10px; font-size: 11px; margin-top: 8px; }

/* No-text-channels placeholder (shown when the viewed channel is deleted and
   none remain to fall back to). */
.empty-channels-state {
    margin: auto;
    text-align: center;
    color: var(--text-muted);
    padding: 40px 20px;
}
.empty-channels-title { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.empty-channels-sub { font-size: 13px; }

/* Friends modal */
.friends-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 20px 0;
    border-bottom: 1px solid var(--border);
}
.friends-tab-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 4px 10px;
    border-bottom: 2px solid transparent;
}
.friends-tab-btn.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}
.friends-tab-pane {
    display: block;
}
.friends-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.friends-empty {
    padding: 16px 4px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}
.friend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
}
.friend-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.friend-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.friend-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.friend-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.friend-status {
    font-size: 11.5px;
}
.friend-status.online {
    color: var(--success);
}
.friend-status.offline {
    color: var(--text-muted);
}
.friend-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.friend-action-btn {
    width: auto;
    padding: 6px 12px;
    font-size: 12px;
}
.friends-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
}
.privacy-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}
.privacy-toggle input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ─── Channel Files modal ────────────────────────────────────────────── */

.files-empty {
    padding: 24px 4px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    margin-bottom: 8px;
}
/* Rows from a chat message jump to it on click (download/delete keep their own). */
.file-row-clickable { cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.file-row-clickable:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--accent); }
.file-row-icon {
    color: var(--accent);
    flex-shrink: 0;
    display: flex;
}
.file-row-meta {
    flex: 1;
    min-width: 0;
}
.file-row-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-row-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.file-row-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.file-row-btn {
    width: auto;
    padding: 6px 12px;
    font-size: 12px;
    text-decoration: none;
}
.files-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
}

/* ─── Voice connection bar ───────────────────────────────────────────── */

.voice-bar {
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: rgba(48, 209, 88, 0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.voice-bar-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.voice-bar-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--success);
    font-size: 12px;
    font-weight: 600;
}
.voice-bar-channel {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.voice-bar-participants {
    font-size: 11px;
    color: var(--text-secondary);
}
.voice-bar-actions {
    display: flex;
    gap: 6px;
}
.voice-ctrl-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px 7px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.voice-ctrl-btn .vc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.voice-ctrl-btn .vc-icon svg {
    width: 19px;
    height: 19px;
    display: block;
}
.voice-ctrl-btn .vc-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
}
.voice-ctrl-btn:hover {
    background: var(--bg-panel-hover);
    color: var(--text-primary);
    border-color: var(--border-bright);
    transform: translateY(-1px);
}
.voice-ctrl-btn:active { transform: translateY(0); }

/* Muted mic / deafened: solid danger to read as "off". */
.voice-ctrl-btn.active {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
    box-shadow: 0 2px 10px rgba(255, 69, 58, 0.25);
}
.voice-ctrl-btn.active:hover {
    background: var(--danger);
    color: #fff;
    filter: brightness(1.08);
}

/* Leave: quiet danger outline that fills on hover. */
.voice-ctrl-btn.danger {
    background: rgba(255, 69, 58, 0.07);
    border-color: rgba(255, 69, 58, 0.35);
    color: var(--danger);
}
.voice-ctrl-btn.danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
    box-shadow: 0 2px 12px rgba(255, 69, 58, 0.3);
}

/* Camera on: accent-tinted to show it's live. */
.voice-ctrl-btn#btn-voice-video.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 2px 10px var(--accent-glow);
}

/* Push-to-talk states on the mic button. */
.voice-ctrl-btn.ptt {
    background: rgba(94, 92, 230, 0.1);
    border-color: rgba(94, 92, 230, 0.4);
    color: var(--accent);
}
.voice-ctrl-btn.ptt:hover {
    background: rgba(94, 92, 230, 0.18);
    color: #fff;
    border-color: var(--accent);
}
.voice-ctrl-btn.ptt.talking {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 3px var(--accent-glow), 0 0 14px var(--accent-glow);
    animation: vcTalkPulse 1.1s ease-in-out infinite;
}
@keyframes vcTalkPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--accent-glow), 0 0 8px var(--accent-glow); }
    50%      { box-shadow: 0 0 0 4px var(--accent-glow), 0 0 18px var(--accent-glow); }
}

/* Video source chooser popover (Camera / Screen), anchored to the Camera button */
.video-source-menu {
    position: fixed;
    z-index: 1300;
    min-width: 180px;
    background: var(--bg-panel, #1e1f24);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-bright);
    border-radius: 10px;
    box-shadow: 0 8px 24px var(--shadow, rgba(0, 0, 0, 0.5));
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: toastSlide 0.15s ease;
}
.video-source-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
}
.video-source-menu button:hover { background: var(--bg-panel-hover, rgba(255,255,255,0.08)); }
.video-source-menu button svg { width: 18px; height: 18px; color: var(--text-secondary); flex-shrink: 0; }
.video-source-menu button:hover svg { color: var(--accent); }

/* ─── Expanded "Share video" panel ─── */
.share-panel { min-width: 270px; gap: 8px; padding: 12px; }
.share-panel-title { font-size: 13px; font-weight: 700; color: var(--text-primary); padding: 0 2px 2px; }
.share-seg { display: flex; gap: 6px; }
.share-seg-btn {
    flex: 1; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-panel); color: var(--text-secondary); font-size: 11px; font-weight: 600;
}
.share-seg-btn svg { width: 18px; height: 18px; }
.share-seg-btn.active { border-color: var(--accent); color: #fff; background: rgba(94,92,230,0.15); }
.share-seg-btn.active svg { color: var(--accent); }
.share-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 12.5px; color: var(--text-secondary); padding: 1px 2px; cursor: default;
}
.share-row .device-select { flex: 0 1 auto; max-width: 160px; padding: 6px 8px; }
.share-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); padding: 2px; cursor: pointer; }
.share-check input { width: 15px; height: 15px; accent-color: var(--accent); }
.share-start {
    width: 100%; justify-content: center; padding: 9px; margin-top: 2px;
    border: none; border-radius: 8px; background: var(--accent); color: #fff;
    font-size: 13px; font-weight: 700; cursor: pointer;
}
.share-start:hover { filter: brightness(1.08); }
.share-hint { font-size: 10.5px; line-height: 1.35; color: var(--text-muted); padding: 0 2px; }
.share-obs-link {
    width: 100%; justify-content: center; padding: 7px; margin-top: 2px;
    border: 1px solid var(--border-bright); border-radius: 8px; background: transparent;
    color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer;
}
.share-obs-link:hover { color: var(--text-primary); border-color: var(--accent); }

/* "Stream from OBS" dialog */
.obs-modal { max-width: 460px; }
.obs-body { padding: 4px 2px; display: flex; flex-direction: column; gap: 12px; }
.obs-note { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.obs-warn { font-size: 11.5px; line-height: 1.45; color: var(--text-muted); margin: 0; }
.obs-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.obs-copy { display: flex; gap: 6px; }
.obs-copy input {
    flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--border-bright); background: var(--bg-panel, #1e1f24);
    color: var(--text-primary); font-size: 12.5px; font-family: monospace;
}
.obs-copy button {
    flex-shrink: 0; padding: 0 14px; border-radius: 8px; border: none;
    background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
}
.obs-copy button:hover { filter: brightness(1.08); }

/* "Signed in elsewhere" terminal overlay */
.session-replaced-overlay {
    position: fixed; inset: 0; z-index: 5000;
    background: rgba(8, 10, 16, 0.92);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.session-replaced-card {
    max-width: 380px; text-align: center;
    background: var(--bg-panel, #1e1f24); border: 1px solid var(--border-bright);
    border-radius: 16px; padding: 32px 28px; box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.session-replaced-icon { font-size: 40px; margin-bottom: 8px; }
.session-replaced-card h2 { margin: 0 0 10px; font-size: 20px; color: var(--text-primary); }
.session-replaced-card p { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.session-replaced-card button {
    padding: 11px 22px; border: none; border-radius: 9px;
    background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.session-replaced-card button:hover { filter: brightness(1.08); }

/* Device selection dropdowns (Settings → Voice) */
.device-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.device-label {
    flex: 0 0 84px;
    font-size: 13px;
    color: var(--text-secondary);
}
.device-select {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-bright);
    background: var(--bg-panel, #1e1f24);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}
.device-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* PTT settings (Account Settings → Voice) */
.ptt-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.ptt-toggle small { color: var(--text-muted); font-size: 12px; }
.ptt-key-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ptt-key-row > span { font-size: 13px; color: var(--text-secondary); }
#btn-ptt-rebind { min-width: 90px; }

/* Per-source embed toggles (Account Settings → Media & Embeds) */
.embed-prefs-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
    margin: 8px 0 2px 26px;
    padding-left: 12px;
    border-left: 2px solid var(--border, rgba(255,255,255,.08));
}
.embed-prefs-list .embed-pref-row { font-size: 13px; gap: 8px; }
.embed-prefs-list.disabled { opacity: .45; pointer-events: none; }

/* Appearance: message-density selector */
.density-row { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.density-row label { color: var(--text-secondary); }
.density-select {
    flex: 1;
    background: var(--bg-primary, #1e1f22);
    color: var(--text-primary);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    cursor: pointer;
}
.density-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(94,92,230,.25); }
.density-hint { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* About → version rows */
.about-versions { display: flex; flex-direction: column; gap: 8px; }
.about-version-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-primary, #1e1f22);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 8px;
    padding: 10px 14px;
}
.about-version-label { color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.about-version-value {
    font-family: 'Consolas', ui-monospace, monospace;
    color: var(--text-primary);
    font-size: 13px;
    user-select: text;
}

/* About → What's New (changelog) */
.about-changelog { margin-top: 22px; }
.about-cl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.about-cl-head h4 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.changelog-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 6px;
    /* fade the scroll region so it reads as "there's more below" */
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 20px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 20px), transparent 100%);
}
.changelog-empty { color: var(--text-muted); font-size: 13px; padding: 6px 2px; }
.cl-entry {
    background: var(--bg-primary, #1e1f22);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 8px;
    padding: 10px 14px 12px;
}
.cl-entry.cl-latest { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.cl-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.cl-ver {
    font-family: 'Consolas', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.cl-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    border-radius: 999px;
    padding: 1px 7px;
}
.cl-date { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.cl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cl-item {
    position: relative;
    padding-left: 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.cl-item::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
}
.cl-item.cl-sub { padding-left: 28px; opacity: .9; }
.cl-item.cl-sub::before { left: 17px; }
.cl-item strong { color: var(--text-primary); font-weight: 600; }
.cl-item code {
    font-family: 'Consolas', ui-monospace, monospace;
    font-size: 11.5px;
    background: rgba(255,255,255,.08);
    border-radius: 4px;
    padding: 1px 4px;
}

/* ─── Admin panel suite ──────────────────────────────────────────────── */

.admin-h3 {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-primary);
}
.admin-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 0;
}
.admin-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.admin-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 6px;
    flex-wrap: wrap;
}
.admin-list-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-list-main code { font-size: 13px; color: var(--accent); }
.admin-sub { font-size: 11px; color: var(--text-muted); }
.admin-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--border-bright);
    color: var(--text-secondary);
    vertical-align: middle;
}
.admin-badge.super { background: rgba(94,92,230,0.25); color: var(--accent); }
.admin-badge.owner { background: rgba(255,196,0,0.2); color: #ffcc4d; }
.admin-badge.banned { background: rgba(255,69,58,0.2); color: var(--danger); }
.admin-badge.online { background: rgba(48,209,88,0.18); color: var(--success); }

/* Audit log rows */
.audit-row { display: flex; gap: 10px; align-items: baseline; padding: 4px 2px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 12.5px; }
.audit-when { color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.audit-actor { font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.audit-action { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }

/* Features admin panel */
.features-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    background: var(--bg-primary, #1e1f22);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 10px;
}
.feature-row.locked { opacity: 0.85; border-color: rgba(255,255,255,0.18); }
.feature-info { min-width: 0; }
.feature-name { font-size: 14px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.feature-lock { font-size: 11px; font-weight: 600; color: var(--text-muted); background: rgba(255,255,255,0.06); padding: 1px 7px; border-radius: 999px; }
.feature-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* Toggle switch */
.feature-switch { position: relative; flex: 0 0 auto; width: 42px; height: 24px; cursor: pointer; }
.feature-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.feature-slider {
    position: absolute; inset: 0;
    background: var(--bg-tertiary, #3a3b40);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 999px;
    transition: background 0.15s ease;
}
.feature-slider::before {
    content: ''; position: absolute;
    width: 18px; height: 18px; left: 2px; top: 2px;
    background: #fff; border-radius: 50%;
    transition: transform 0.15s ease;
}
.feature-switch input:checked + .feature-slider { background: var(--accent, #5e5ce6); border-color: transparent; }
.feature-switch input:checked + .feature-slider::before { transform: translateX(18px); }
.feature-switch input:disabled + .feature-slider { cursor: not-allowed; opacity: 0.55; }
.admin-acct-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-mini-btn {
    width: auto;
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 5px;
    margin-top: 0;
}
.admin-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.admin-form input[type="text"], .admin-form input[type="password"] {
    flex: 1;
    min-width: 120px;
    padding: 7px 10px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
}
.admin-btn { width: auto; padding: 7px 14px; font-size: 13px; border-radius: 6px; margin-top: 0; }
.admin-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.admin-num {
    width: 64px;
    padding: 7px 8px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
}
.admin-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.admin-details { margin-top: 10px; }
.admin-details summary { cursor: pointer; font-size: 12px; color: var(--accent); }
.admin-settings { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.admin-settings label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.admin-settings label.admin-check { flex-direction: row; align-items: center; }
.admin-settings input[type="text"], .admin-settings input[type="number"] {
    padding: 7px 10px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
}
.admin-usage { font-size: 13px; color: var(--text-primary); margin: 6px 0; }

/* ─── Admin Tools modal (centered, roomy, gridded) ───────────────────── */

.panel-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.admin-modal-card {
    width: min(780px, 94vw);
    max-height: 88vh;
}
/* Responsive grid for the compact setting/action cards */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
@media (max-width: 640px) {
    .admin-grid { grid-template-columns: 1fr; }
}
.admin-card {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}
.admin-card-wide { grid-column: 1 / -1; }

/* ── Data Usage monitor ── */
.du-totals { display: flex; gap: 22px; margin: 4px 0 12px; flex-wrap: wrap; }
.du-total { display: flex; flex-direction: column; gap: 2px; }
.du-total-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.du-total-val { font-size: 19px; font-weight: 700; color: var(--text-primary); }
.du-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; color: var(--text-secondary); }
.du-leg { display: inline-flex; align-items: center; gap: 6px; }
.du-leg i, .du-row-name i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.du-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
@media (max-width: 720px) { .du-charts { grid-template-columns: 1fr; } }
.du-chart-title { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; display: flex; justify-content: space-between; }
.du-now { color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: 600; }
.du-canvas {
    width: 100%; height: 120px; display: block;
    background: rgba(0,0,0,.22); border: 1px solid var(--border); border-radius: 8px;
}
.du-breakdown { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }
.du-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; }
.du-row-name { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-primary); }
.du-row-bars { display: flex; flex-direction: column; gap: 4px; }
.du-bar-line { display: grid; grid-template-columns: 90px 1fr; gap: 8px; align-items: center; }
.du-bar-lbl { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.du-bar { height: 8px; background: rgba(255,255,255,.06); border-radius: 5px; overflow: hidden; }
.du-bar-fill { height: 100%; border-radius: 5px; transition: width .3s ease; min-width: 2px; }
/* Data Usage tab: historical meta + since-restart / all-time period columns */
.du-meta { display: flex; gap: 28px; flex-wrap: wrap; margin: 2px 0 14px; }
.du-meta-item { display: flex; flex-direction: column; gap: 2px; }
.du-meta-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.du-meta-val { font-size: 14px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.du-period-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .du-period-grid { grid-template-columns: 1fr; } }
.du-period { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 10px; }
.du-period-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-secondary); }
.du-breakdown-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.du-toggle { display: inline-flex; background: rgba(0,0,0,.22); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.du-toggle-btn { border: none; background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: background .15s, color .15s; }
.du-toggle-btn:hover { color: var(--text-primary); }
.du-toggle-btn.active { background: var(--accent, #5e5ce6); color: #fff; }
.du-rate-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.du-rate-select { background: rgba(0,0,0,.22); border: 1px solid var(--border); color: var(--text-primary); font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 7px; cursor: pointer; }
.du-rate-select:focus { outline: none; border-color: var(--accent, #5e5ce6); }
/* Admin About panel: license status, heartbeat, capacity */
.about-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.about-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; }
.about-badge.ok { background: rgba(62,207,107,.15); border-color: rgba(62,207,107,.45); color: #3ecf6b; }
.about-badge.warn { background: rgba(232,161,58,.15); border-color: rgba(232,161,58,.45); color: #e8a13a; }
.about-badge.muted { background: rgba(255,255,255,.05); color: var(--text-muted); }
.about-rows { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.about-row { display: grid; grid-template-columns: 160px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.about-row:last-child { border-bottom: none; }
.about-key { color: var(--text-muted); }
.about-val { color: var(--text-primary); font-weight: 600; word-break: break-word; }
.about-val.mono { font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace); font-weight: 500; font-size: 12px; }
.about-cap { display: flex; gap: 28px; flex-wrap: wrap; margin: 6px 0 12px; }
.about-cap-item { display: flex; flex-direction: column; gap: 2px; }
.about-cap-num { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.about-cap-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.about-cap-bar { height: 8px; background: rgba(255,255,255,.06); border-radius: 5px; overflow: hidden; margin-bottom: 8px; }
.about-cap-fill { height: 100%; width: 0; border-radius: 5px; background: var(--accent, #5e5ce6); transition: width .3s ease; }
.about-cap-fill.full { background: #e05260; }
.admin-card-full {
    margin-bottom: 14px;
}
.admin-card .admin-h3 {
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
/* Compact settings: stacked labels, full-width inputs */
.admin-settings input[type="text"], .admin-settings input[type="number"] {
    width: 100%;
}
/* Inline forms (ban IP, broadcast, create backup, create user button row) */
.admin-form { align-items: center; }
.invite-generator-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.invite-code-display {
    padding: 10px;
    margin-top: 8px;
    background: rgba(48, 209, 88, 0.1);
    border: 1px dashed var(--success);
    border-radius: 6px;
    text-align: center;
    font-family: monospace;
    font-size: 14px;
    color: var(--success);
    font-weight: 600;
}
.admin-select {
    flex: 1;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    outline: none;
    font-size: 13px;
}
.role-manager-header {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

/* ── Sortable roles list (Admin → Roles) ── */
.roles-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.role-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--border);
    border-radius: 9px;
    cursor: default;
}
/* The row left behind in the list while dragging — a faint dashed placeholder
   that the other rows glide around (the cursor carries the browser's drag image). */
.role-row.dragging {
    opacity: 0.4;
    border-style: dashed;
    border-color: var(--accent);
    background: rgba(108, 99, 255, 0.06);
}
.role-drag { cursor: grab; color: var(--text-muted); font-size: 15px; line-height: 1; user-select: none; }
.role-drag:active { cursor: grabbing; }
.role-swatch {
    width: 16px; height: 16px; border-radius: 50%;
    flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.18);
}
.role-swatch-none {
    background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,0.15) 3px, rgba(255,255,255,0.15) 6px);
}
.role-row-name { font-weight: 600; font-size: 14px; }
.role-row-badges { display: flex; gap: 5px; margin-left: 4px; }
.role-badge {
    font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
    padding: 1px 7px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.08); color: var(--text-muted);
}
.role-edit-btn { margin-left: auto; flex-shrink: 0; }

/* Narrow drawers (single-role editor, pinned messages, channel files). The role
   editor sits above the admin drawer; pins/files open on their own. */
.side-drawer.side-drawer-narrow { width: min(640px, 96vw); z-index: 1650; }
.side-drawer > .modal-card.role-edit-card,
.side-drawer > .modal-card.drawer-simple-card { display: flex; flex-direction: column; }
.role-edit-card .modal-body,
.drawer-simple-card .modal-body { flex: 1; min-height: 0; padding: 18px 22px; }
/* The Files drawer's upload footer pins to the bottom of the column. */
.drawer-simple-card .files-footer { flex-shrink: 0; }

/* Live name-color preview inside the role editor. */
.re-name-preview {
    display: flex; align-items: center; gap: 12px;
    margin: 10px 0 14px; padding: 10px 12px;
    background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border); border-radius: 8px;
}
.re-preview-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.re-preview-name { font-weight: 700; font-size: 16px; }

/* ── 2FA setup QR ── */
.totp-qr-img {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background: #fff;          /* quiet zone so dark-theme bg never bleeds into the code */
    padding: 8px;
    box-sizing: content-box;
    margin: 0 0 12px;
}
.totp-manual { font-size: 12px; color: var(--text-muted); }
.totp-manual summary { cursor: pointer; margin-bottom: 6px; }
.totp-secret {
    display: block;
    word-break: break-all;
    padding: 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-primary);
}
.totp-open-link { display: inline-block; margin-top: 8px; }
.role-editor-detail {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.1);
    min-height: 360px;
    max-height: 72vh;       /* roomier now that Roles has its own wide tab */
    overflow-y: auto;
}
/* Search box at the top of the Accounts (Users) section. */
.admin-search-input {
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--text-primary);
    font-size: 13.5px;
}
.admin-search-input:focus { border-color: var(--accent); outline: none; }
.role-editor-placeholder {
    text-align: center;
    padding-top: 70px;
    color: var(--text-muted);
}
.role-editor-placeholder svg { opacity: 0.5; margin-bottom: 8px; }
.role-editor-placeholder p { font-size: 12px; }
/* Keep the accounts/invites lists from growing unbounded in the modal */
#admin-accounts-list, #admin-invites-list {
    max-height: 260px;
    overflow-y: auto;
}

/* Backups tab: let the list fill the whole drawer height instead of a small box. */
#admin-tab-backups { height: 100%; display: flex; }
#admin-tab-backups .admin-card-full {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
}
#admin-tab-backups #admin-backups-list {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    margin-top: 8px;
}

/* Inline labelled field (invite uses/expiry, shutdown delay) */
.admin-inline-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.admin-inline-label .admin-num { width: 70px; }

/* Saved broadcast messages — quick-reuse chips */
.saved-broadcasts-head { margin: 12px 0 6px; }
.saved-broadcasts { display: flex; flex-direction: column; gap: 6px; }
.saved-broadcast-chip {
    display: flex;
    align-items: stretch;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.saved-broadcast-text {
    flex: 1;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-primary);
    padding: 9px 12px;
    font-size: 13px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.saved-broadcast-text:hover { background: rgba(255,255,255,0.05); }
.saved-broadcast-del {
    background: none;
    border: none;
    border-left: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0 12px;
    font-size: 16px;
    cursor: pointer;
}
.saved-broadcast-del:hover { color: var(--danger, #e05260); background: rgba(224,82,96,0.12); }

/* Voice mic button when the user only has read access (cannot speak) */
.voice-ctrl-btn.locked { opacity: 0.65; cursor: not-allowed; }

/* Admin sub-tabs */
.admin-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 20px 0;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.admin-tab-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 6px 10px;
    border-bottom: 2px solid transparent;
}
.admin-tab-btn:hover { color: var(--text-primary); }
.admin-tab-btn.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}
.admin-tab-pane { display: block; }
.admin-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 10px;
    line-height: 1.4;
}

/* ─── Video grid ─────────────────────────────────────────────────────── */

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.25);
    max-height: 45%;
    overflow-y: auto;
    flex-shrink: 0;
}
.video-tile {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.video-tile:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}
.video-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Mirror ONLY your own camera self-view (webcam convention). Remote peers and
   screen shares must NOT be mirrored, or their text/faces read backwards. */
.video-tile.mirror video { transform: scaleX(-1); }
.video-tile-label {
    position: absolute;
    bottom: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
/* "Click to enlarge" affordance, top-right of a tile (shown on hover). */
.video-expand-hint {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.video-tile:hover .video-expand-hint { opacity: 1; }

/* Spotlight: large centered view of one stream. */
.video-spotlight {
    position: fixed;
    inset: 0;
    z-index: 3500;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    animation: toastSlide 0.15s ease;
}
.video-spotlight-stage {
    position: relative;
    max-width: min(1400px, 92vw);
    max-height: 88vh;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.video-spotlight-stage video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}
.video-spotlight.mirror .video-spotlight-stage video { transform: scaleX(-1); }

/* ─── Live / watch panel ─── */
/* Docked "Live now" rail button: hidden unless streams are watchable; pulses red
   while live, with a one-shot bump when a new stream appears. */
.rail-live-btn.live-active {
    color: var(--danger);
    animation: liveRailPulse 2s ease-in-out infinite;
}
.rail-live-btn.live-active:hover { color: var(--danger); }
@keyframes liveRailPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(255, 69, 58, 0.55); }
}
.rail-live-btn.live-bump { animation: liveRailBump 0.55s ease; }
@keyframes liveRailBump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}
/* Red count badge for the live button (overrides the default accent badge). */
.rail-badge.live { background: var(--danger); box-shadow: 0 0 6px rgba(255, 69, 58, 0.7); }
.live-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.5);
    animation: livePulse 1.6s infinite;
}
@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(255,69,58,0.5); }
    70% { box-shadow: 0 0 0 7px rgba(255,69,58,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,69,58,0); }
}
.live-count {
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px;
}
.live-panel {
    position: fixed;
    z-index: 1251;
    min-width: 240px;
    max-width: 320px;
    background: var(--bg-panel, #1e1f24);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-bright);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    padding: 10px;
    animation: toastSlide 0.15s ease;
}
.live-panel-title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--text-secondary); padding: 2px 4px 8px; }
.live-empty { font-size: 12px; color: var(--text-muted); padding: 6px 4px; }
.live-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px; }
.live-row-info { display: flex; flex-direction: column; min-width: 0; }
.live-row-name { font-size: 13px; color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-row-sub { font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "👁 N watching" badge on the streamer's own tile (clickable → roster panel) */
.tile-watchers {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    z-index: 2;
}
.tile-watchers:hover { background: rgba(0, 0, 0, 0.8); }

/* Broadcast management panel (streamer's roster: in-channel + spectators) */
.broadcast-panel {
    position: fixed;
    z-index: 1300;
    min-width: 220px;
    max-width: 280px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--bg-panel, #1e1f24);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-bright);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    padding: 10px;
    animation: toastSlide 0.15s ease;
}
.bp-title { font-size: 13px; font-weight: 700; color: var(--text-primary); padding: 2px 4px 6px; }
.bp-section {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-secondary); padding: 8px 4px 4px;
}
.bp-count {
    min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 9px;
    background: var(--border-bright); color: var(--text-primary); font-size: 11px;
}
.bp-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 13px; color: var(--text-primary); }
.bp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.bp-empty { font-size: 12px; color: var(--text-muted); padding: 4px 6px; }
.live-watch-btn {
    flex-shrink: 0; padding: 5px 14px; border-radius: 7px; border: none;
    background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
}
.live-watch-btn:hover { filter: brightness(1.08); }

.watch-overlay .video-spotlight-stage video { transform: none; } /* never mirror a watched stream */
.watch-connecting-msg {
    position: absolute; inset: 0; display: none;
    align-items: center; justify-content: center;
    color: var(--text-secondary); font-size: 14px; font-weight: 600;
}
.watch-overlay.watch-connecting .watch-connecting-msg { display: flex; }
.video-spotlight-label {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.video-spotlight-btn {
    position: absolute;
    top: 12px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.12s ease;
}
.video-spotlight-btn:hover { background: rgba(255, 255, 255, 0.2); }
.video-spotlight-fs { right: 58px; }
.video-spotlight-close { right: 12px; }

/* Overlay control cluster (top-right): volume, pop-out, fullscreen, close.
   Lays the buttons out in a row, overriding their stand-alone absolute spots. */
.video-spotlight-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 6;
}
.video-spotlight-controls .video-spotlight-btn {
    position: static;
    top: auto;
    right: auto;
}
/* Per-stream listener volume: a mute button + slider. */
.video-vol { display: flex; align-items: center; gap: 8px; }
.video-vol-btn { font-size: 0; }
.video-vol-slider {
    width: 96px;
    height: 38px;
    accent-color: var(--accent);
    cursor: pointer;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 9px;
    padding: 0 10px;
    margin: 0;
}
.video-vol-slider:hover { background: rgba(0, 0, 0, 0.7); }

/* "Sharing video" badge next to a voice participant in the sidebar. */
.video-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    color: var(--accent);
}
.voice-ch-user.sharing-video.locally-muted .video-indicator { margin-left: auto; }
.voice-ch-user.sharing-video.locally-muted .muted-indicator { margin-left: 4px; }

/* Right-aligned self-state badges (mic muted / deafened) next to a name. */
.voice-ch-state {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.self-muted-indicator,
.deafened-indicator { display: inline-flex; align-items: center; }
.self-muted-indicator { color: var(--text-muted); }
.deafened-indicator { color: var(--danger); }
/* When a video badge is also present it already took the auto margin; keep the
   state cluster tight against it rather than grabbing a second gap. */
.voice-ch-user.sharing-video .voice-ch-state { margin-left: 6px; }

/* ─── Custom right-click context menu ─── */
.context-menu {
    position: fixed;
    z-index: 4000;
    min-width: 170px;
    padding: 5px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.context-menu.hidden { display: none; }
.context-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.context-menu-item:hover { background: var(--bg-panel-hover); }
.context-menu-item.danger { color: var(--danger); }
.context-menu-item.danger:hover { background: rgba(255, 69, 58, 0.12); }

/* ─── Channel settings modal ─── */
.cs-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 600;
}
.cs-checkbox { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--text-primary); }
.cs-checkbox input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--accent); flex-shrink: 0; }
.cs-checkbox small { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }
#form-channel-settings select,
#form-channel-settings input:not([type="checkbox"]) {
    width: 100%;
}
#form-channel-settings select {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13.5px;
    padding: 9px 10px;
    outline: none;
}
.cs-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

/* ─── Sidebar Links ─── */
.link-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13.5px;
    transition: background 0.12s ease, color 0.12s ease;
}
.link-item:hover { background: var(--bg-panel-hover); color: var(--text-primary); }
.link-item-icon { color: var(--text-muted); flex-shrink: 0; }
.link-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Collapsible link category in the sidebar Links section (mirrors channel categories). */
.link-cat { margin-top: 6px; }
.link-cat-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px 4px;
    cursor: pointer;
    user-select: none;
}
.link-cat-header .cat-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.15s ease;
}
.link-cat-header:hover .cat-name { color: var(--text-secondary); }
.link-cat-header .cat-caret {
    color: var(--text-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.link-cat-header.collapsed .cat-caret { transform: rotate(-90deg); }
.link-cat-header.search-hidden { display: none; }
.link-cat-links { display: flex; flex-direction: column; gap: 1px; }
.link-cat-links.collapsed { display: none; }
/* When searching, reveal collapsed link categories so matches show. */
#links-list.searching .link-cat-links.collapsed { display: flex; }

/* A layout spacer rendered in the sidebar tree. */
.channel-spacer {
    height: 1px;
    margin: 12px 10px;
    background: var(--border);
}

/* ─── Customize Layout modal ─── */
.layout-modal-card { width: 560px; max-width: 94vw; }
.layout-toolbar { display: flex; gap: 8px; margin: 14px 0 10px; flex-wrap: wrap; }
.layout-tree { display: flex; flex-direction: column; gap: 4px; }
.layout-group {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 6px;
}
.layout-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 7px;
}
.layout-row:hover { background: rgba(255, 255, 255, 0.03); }
.layout-row-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.layout-row-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layout-cat-head { background: rgba(255, 255, 255, 0.03); }
.layout-cat-name { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted); }
.layout-ch-icon { color: var(--text-muted); display: inline-flex; flex-shrink: 0; }
.layout-channel { padding-left: 12px; font-size: 13.5px; color: var(--text-primary); }
.layout-spacer-row { border: 1px dashed var(--border); border-radius: 8px; }
.layout-spacer-label { font-size: 12px; color: var(--text-muted); letter-spacing: 1px; }
.layout-empty { font-size: 12px; color: var(--text-muted); padding: 6px 12px; font-style: italic; }
.layout-row-actions { display: flex; gap: 2px; flex-shrink: 0; }

/* Drag & drop */
.layout-draggable { cursor: grab; }
.layout-draggable:active { cursor: grabbing; }
.layout-draggable.dragging { opacity: 0.4; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--accent); background: rgba(108, 99, 255, 0.06); }
.layout-grip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.55;
    cursor: grab;
}
.layout-draggable:hover .layout-grip { opacity: 1; }
.layout-group-body { display: flex; flex-direction: column; }
.layout-drop-line {
    height: 0;
    margin: 1px 6px;
    border-top: 2px solid var(--accent, #5b8cff);
    border-radius: 2px;
    pointer-events: none;
}
.layout-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
}
.layout-icon-btn:hover { background: var(--bg-panel-hover); color: var(--text-primary); }
.layout-icon-btn.danger:hover { background: rgba(255, 69, 58, 0.14); color: var(--danger); }
.layout-h3 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 22px 0 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.layout-link-form { display: flex; gap: 8px; margin-bottom: 10px; }
.layout-link-form input { flex: 1; min-width: 0; }
.layout-link-form input:first-of-type { flex: 0 0 130px; }
.layout-links { display: flex; flex-direction: column; gap: 4px; }
.layout-link-row { border: 1px solid var(--border); border-radius: 8px; }
.layout-link-name { font-size: 13.5px; color: var(--text-primary); font-weight: 600; flex-shrink: 0; }
.layout-link-url { font-size: 12px; color: var(--text-muted); }
/* Link-category select (in the add form and per-link row) + category management rows. */
.layout-link-cat-select {
    flex: 0 0 auto;
    max-width: 150px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 12.5px;
    padding: 6px 8px;
}
.layout-link-cat-select:focus { outline: none; border-color: var(--accent); }
.layout-link-cats { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.layout-linkcat-row { border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.02); }
.layout-linkcat-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }

/* Inline message editor (right-click → Edit message) */
.msg-edit-input {
    width: 100%;
    margin-top: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--accent);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13.5px;
    font-family: inherit;
    padding: 8px 10px;
    resize: vertical;
    min-height: 38px;
    outline: none;
}

/* ─── Message replies ─── */
/* Compose bar above the input showing who you're replying to. */
.reply-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 7px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    font-size: 12.5px;
}
.reply-bar-icon { color: var(--accent); font-weight: 700; flex-shrink: 0; }
.reply-bar-text {
    flex: 1;
    min-width: 0;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reply-bar-name { color: var(--accent); font-weight: 600; }
.reply-bar-snippet { color: var(--text-secondary, var(--text-muted)); margin-left: 6px; }
.reply-bar-cancel {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.reply-bar-cancel:hover { color: var(--text-primary); }

/* Quoted reference rendered above a replying message. */
.reply-quote {
    display: flex;
    align-items: baseline;
    gap: 6px;
    max-width: 100%;
    margin: 0 0 3px;
    padding: 2px 8px;
    border-left: 2px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    overflow: hidden;
}
.reply-quote:hover { border-left-color: var(--accent); background: rgba(255, 255, 255, 0.03); }
.reply-quote-icon { color: var(--text-muted); flex-shrink: 0; }
.reply-quote-name { color: var(--accent); font-weight: 600; flex-shrink: 0; }
.reply-quote-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; }
/* When the quoted message is the viewer's own, accent the quote. */
.reply-quote-mine { border-left-color: var(--accent); }

/* Flash a message when you jump to it from a reply quote. */
@keyframes msgFlash {
    0%   { background: rgba(94, 92, 230, 0.38); }
    100% { background: transparent; }
}
.msg-flash { animation: msgFlash 1.6s ease-out; border-radius: 8px; }

/* ─── Emoji picker ─── */
.emoji-panel {
    position: absolute;
    right: 20px;
    bottom: calc(100% - 8px);
    width: 340px;
    max-width: calc(100% - 40px);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
    z-index: 60;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.emoji-cats {
    display: flex;
    gap: 2px;
    padding: 6px 6px 0;
    overflow-x: auto;
    scrollbar-width: thin;
}
.emoji-cat-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.7;
}
.emoji-cat-btn:hover { background: rgba(255, 255, 255, 0.06); opacity: 1; }
.emoji-cat-btn.active { background: rgba(94, 92, 230, 0.18); opacity: 1; }
.emoji-search-row { padding: 8px; }
.emoji-search {
    width: 100%;
    background: var(--bg-primary, rgba(0, 0, 0, 0.25));
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    padding: 7px 10px;
    outline: none;
}
.emoji-search:focus { border-color: var(--accent); }
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 4px 8px 10px;
    max-height: 240px;
    overflow-y: auto;
}
.emoji-item {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    padding: 4px 0;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}
.emoji-item:hover { background: rgba(255, 255, 255, 0.08); }
.emoji-img { width: 22px; height: 22px; object-fit: contain; }
.emoji-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    font-size: 12.5px;
    padding: 18px 0;
}
/* Inline emoji sizing. In a message that also has text, emoji render ~2× the
   text size ("100% bigger"); in an emoji-only message they go jumbo (~6×,
   "500% bigger"). Unicode emoji are wrapped in .emoji-char; custom emoji are
   <img class="custom-emoji">. */
.emoji-char {
    font-size: 2em;
    line-height: 1;
    vertical-align: -0.25em;
}
.custom-emoji {
    width: 2em;
    height: 2em;
    object-fit: contain;
    vertical-align: -0.6em;
    margin: 0 1px;
}
.msg-content.emoji-only {
    line-height: 1.15;
}
.msg-content.emoji-only .emoji-char {
    font-size: 3.375em;
    vertical-align: middle;
}
.msg-content.emoji-only .custom-emoji {
    width: 3.375em;
    height: 3.375em;
    vertical-align: middle;
}

/* ─── Custom emoji admin manager ─── */
.admin-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; }
.admin-hint code {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11.5px;
}
.emoji-admin-add {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.emoji-admin-name {
    width: 140px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    padding: 6px 8px;
    outline: none;
}
.emoji-admin-name:focus { border-color: var(--accent); }
.emoji-admin-filename { font-size: 12px; color: var(--text-muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emoji-admin-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
}
.emoji-admin-empty { color: var(--text-muted); font-size: 12.5px; padding: 8px 0; }
.emoji-admin-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.emoji-admin-img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.emoji-admin-itemname { flex: 1; font-size: 13px; color: var(--text-secondary, var(--text-primary)); }
.emoji-admin-del { flex-shrink: 0; }


/* ─── Deleted message: tombstone tools + original viewer ─── */
.deleted-tombstone { font-style: italic; color: var(--text-muted); }
.deleted-tools { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; }
.deleted-tool-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.deleted-tool-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.deleted-viewer-modal {
    width: 480px;
    max-width: 92vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, var(--bg-tertiary));
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.deleted-viewer-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.deleted-viewer-sub { font-size: 12px; color: var(--text-muted); }
.deleted-viewer-body {
    padding: 16px 20px;
    overflow-y: auto;
    word-break: break-word;
}
.deleted-viewer-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
}

/* Click-to-view placeholder: shown in the video grid for a co-channel member who
   is streaming but whose video/audio we haven't opted to receive yet. */
.video-tile.stream-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--bg-panel, #1e1f24);
    border: 1px dashed var(--border-bright, var(--border));
    color: var(--text-secondary);
    font: inherit;
    text-align: left;
}
.video-tile.stream-placeholder:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}
.stream-placeholder .stream-ph-icon {
    font-size: 22px;
    color: var(--accent);
    line-height: 1;
}
.stream-placeholder .stream-ph-text { font-size: 13px; font-weight: 600; }
.stream-placeholder .stream-ph-text small { font-weight: 500; color: var(--text-muted); }
.video-tile.stream-placeholder.connecting .stream-ph-icon { animation: livePulse 1.2s infinite; }

/* "Stop viewing" button on a live remote tile (drops the subscription). */
.video-tile-stop {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, background 0.12s ease;
}
.video-tile:hover .video-tile-stop { opacity: 1; }
.video-tile-stop:hover { background: var(--danger); }

/* Messages directed at you — an @mention of you, or a reply to your message — get a
   subtle accent tint + a left accent bar so they're easy to find while scrolling. */
.msg-card.mentions-me {
    background: rgba(94, 92, 230, 0.10); /* fallback */
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    box-shadow: inset 3px 0 0 0 var(--accent);
}
.msg-card.mentions-me:hover {
    background: rgba(94, 92, 230, 0.15);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
}