/* ═══════════════════════════════════════════════════════════════
   SPEAKR — lobby page styles (/lobby.html)
   Two-column app layout: left action panel + right slide out panel.
   ═══════════════════════════════════════════════════════════════ */

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.app-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 0;
}

/* ── Left Panel ── */
.panel-left {
    width: 360px;
    min-width: 300px;
    max-width: 400px;
    flex-shrink: 0;
    position: relative;
    overflow-y: auto;
    padding: 34px 28px 20px;   /* a little drop from the top bar */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    border-right: 1px solid rgba(255,255,255,0.05);
    scrollbar-width: thin;
    scrollbar-color: var(--dark-border) transparent;
    isolation: isolate;     /* contains the .panel-brand z-index:-1 watermark */
}

/* Faint SPEAKR bubble watermark — lower-left, behind everything (the bg-canvas
   is z-index:-1, so -1 here sits just above it and below the panel content). */
.panel-brand {
    position: absolute;
    bottom: 18px;
    left: -14px;
    width: 250px;
    height: auto;
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
    user-select: none;
}

/* ── Avatar top controls — Add Friend / History pinned to the panel's top
   corners (a row across the top of the box; the circle sits below). ── */
/* Add Friend + History now flank the speaker (mid-height), each a labelled
   action button like Call/Mute/Games — the call-box "ring" from the brief. */
.avatar-cluster {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}
.speaker-row {
    position: relative;
    z-index: 1;                       /* above the sound-wave behind it */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* In the quiet + centred layouts the call box doesn't need its own scrollbar, so
   let the full-width SPEAKR watermark spill past it instead of turning the panel
   into a sideways scroller — overflow-y:auto silently promotes overflow-x to auto.
   The app-layout (overflow:hidden) still clips the spill at the window edge. */
.app-layout[data-layout="quiet"] .panel-left,
.app-layout[data-layout="social"] .panel-left,
.app-layout[data-layout="chat"] .panel-left,
.app-layout[data-layout="centred"] .panel-left { overflow: visible; }
.circle-side-btn {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 15, 22, 0.92);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.circle-side-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
}
.circle-side-btn:active:not(:disabled) { transform: scale(0.93); }
.circle-side-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.circle-side-btn svg { width: 22px; height: 22px; }
/* ── Add Friend + History flank buttons (square, smaller) ──
   Add Friend = rose, History = vivid blue — matching the call-box theme and the
   pink-left / blue-right speaker glow. */
.action-btn.btn-addfriend, .action-btn.btn-history {
    width: 38px; height: 38px;
    background: transparent;
    border: 2px solid rgba(255,255,255,0.9);   /* beats .action-btn{border:none} */
    color: #fff;
    border-radius: 6px;   /* override .action-btn's 50% to make them square */
}
.action-btn.btn-addfriend svg, .action-btn.btn-history svg { width: 18px; height: 18px; }
/* Hover keeps the button hollow — only the border + a soft glow take the colour. */
.btn-addfriend:hover:not(:disabled) {
    border-color: #f43f5e;
    box-shadow: 0 0 13px rgba(244,63,94,0.5);
}
.btn-history:hover:not(:disabled) {
    border-color: #3b82f6;
    box-shadow: 0 0 13px rgba(59,130,246,0.5);
}
#add-friend-btn:disabled { opacity: 1; cursor: default; }   /* outline stays crisp when inactive */

/* ── Nav Brand Logo — hero font styling ── */
.nav-brand {
    font-family: "Saira Stencil One", Impact, system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--text);
    text-shadow: 0 0 26px rgba(59, 130, 246, 0.35);
    line-height: 1;
    white-space: nowrap;
}
/* Staff buttons in the left stack — mods see Moderation (amber), admins also
   get Admin below it (a brighter gold so the two are distinct). Shown by
   admin.js refreshNav. */

/* ── Action Buttons Row (Call + Mute, kept toward the middle) ── */
/* ── Call control pill (Call · mic mute · speaker deafen) ──
   One neumorphic bar replacing the old Call/Mute action row. The VU meter
   stays in the avatar ring above for now. */
.call-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    max-width: 258px;
    height: 44px;
    /* Never let the pill be squashed when the panel gets tight (e.g. the rate
       prompt appearing on a short screen) — keep its full height. */
    flex-shrink: 0;
    min-height: 44px;
    margin-top: 8px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 22px;
    position: relative;
    z-index: 10;
    /* Solid dark-grey recessed groove (opaque so it reads grey over any
       background preset, not just the dark ones). */
    background: linear-gradient(180deg, #1c1e24, #262931);
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.6),
        inset 0 -1px 1px rgba(255,255,255,0.07),
        0 1px 1px rgba(255,255,255,0.05);
}

/* Raised segment base — top highlight + lower inner shadow + drop shadow. */
.pill-seg {
    border: none;
    cursor: pointer;
    height: 100%;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -2px 5px rgba(0,0,0,0.4),
        0 2px 5px rgba(0,0,0,0.45);
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.2s ease, filter 0.15s ease;
}
.pill-seg:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 5px rgba(0,0,0,0.55),
        0 1px 2px rgba(0,0,0,0.35);
}
.pill-seg:disabled { opacity: 0.45; cursor: not-allowed; }

/* Call — the long green segment (icon + label). */
.pill-call {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 14px;
    position: relative;
    background: linear-gradient(180deg, #1cb457, #128a40);
}
.pill-call:hover:not(:disabled) { filter: brightness(1.07); }
.pill-call .pill-call-ico { display: inline-flex; }
.pill-call .pill-call-ico svg { width: 20px; height: 20px; display: block; }
.pill-label { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
/* Call states (toggled by app.js setCallState). */
.pill-call.btn-call-searching { background: linear-gradient(180deg, #3a72c4, #295aa0); }
.pill-call.btn-call-active    { background: linear-gradient(180deg, #ff5468, #e23a4c); }
/* Searching: a subtle cool-white inner border ring pulsing in and out — keeps a
   sense of "live" without the old orange glow. */
.pill-call.btn-call-searching::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px rgba(214,230,255,0.85);
    animation: pillSearchRing 1.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pillSearchRing { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.9; } }

/* VU slot — recessed middle gap. Reserves xespool's meter width so the Call
   segment keeps its exact size; empty for now (the live meter is in the avatar ring). */
.pill-vu {
    flex: 0 0 auto;
    width: 46px;
    height: 100%;
    border-radius: 14px;
    background: linear-gradient(180deg, #090c12, #11151f);
    box-shadow:
        inset 0 2px 5px rgba(0,0,0,0.75),
        inset 0 -1px 1px rgba(255,255,255,0.04);
}

/* The two small end buttons — icon only, dark raised. */
.pill-icon {
    flex: 0 0 auto;
    width: 42px;
    padding: 0;
    background: linear-gradient(180deg, #2d313c, #20232c);
}
.pill-icon:hover:not(:disabled) { filter: brightness(1.15); }
.pill-icon svg { width: 21px; height: 21px; display: block; }

/* Mic-mute icon swap (#mute-mic-btn gets .muted from updateMuteButton). */
.pill-mic .self-mic-off { display: none; }
.pill-mic.muted .self-mic-on  { display: none; }
.pill-mic.muted .self-mic-off { display: block; color: #ff5a6a; }
.pill-mic.muted { background: linear-gradient(180deg, #3a2026, #2a161b); }

/* Speaker-mute (deafen) icon swap (#deafen-btn gets .deafened from toggleIncomingMute). */
.pill-speaker .deafen-off { display: none; }
.pill-speaker.deafened .deafen-on  { display: none; }
.pill-speaker.deafened .deafen-off { display: block; color: #ff5a6a; }
.pill-speaker.deafened { background: linear-gradient(180deg, #3a2026, #2a161b); }

.action-btn {
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.action-btn svg { width: 28px; height: 28px; flex-shrink: 0; }
.action-btn:active            { transform: scale(0.93); }
.action-btn:disabled          { opacity: 0.35; cursor: not-allowed; }
.action-btn:disabled:active   { transform: none; }

/* Mute / Friend / Room — medium secondary buttons */
.btn-secondary {
    width: 56px;
    height: 56px;
    background: #24262f;          /* solid dark grey */
    border: 1.5px solid rgba(255,255,255,0.15);
    color: var(--text-primary);
}
.btn-secondary:hover:not(:disabled) {
    background: #33363f;
    border-color: rgba(255,255,255,0.28);
}
.btn-secondary.muted {
    background: rgba(255,71,87,0.18);
    border-color: var(--danger);
    color: var(--danger);
}

/* Games — same size as Call/Mute, keeps its amber/gold identity. */
/* Games sits in the cog row (between Background + Layout) — cog-sized, keeps the
   .bg-cog border, amber icon enlarged to fill the button. */
#games-btn { color: #ffd980; }
#games-btn svg { width: 30px; height: 30px; }

/* ── Call Options Wrapper (flanking buttons + presets row) ── */
.call-options-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Outer gap (4px) + the row's own 6px side padding = 10px each side, matching
       the 10px gap between the two cogs — so all four buttons are evenly spaced. */
    gap: 4px;
    width: 100%;
    margin-top: 8px;
    position: relative;
    z-index: 10;
    pointer-events: none;
}
.call-options-wrapper .action-btn {
    pointer-events: auto;
}

/* ── Call Options Row ── */
.call-options-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
    justify-content: center;
    pointer-events: auto;
}

/* Toggle tracks: a defined dark fill (inset outline, no layout shift) so the
   call-option controls don't wash out over bright backgrounds like the cloud preset. */
.call-options-row .pill-track {
    background: var(--deep-blue);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}


/* ── Call Hint ── */
.call-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Status hint row: a small spinning die (left) + the hint pill, one line. */
.call-hint-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}
/* Rainbow match spinner — shown left of the hint only while searching for a
   partner. A spinning rainbow ring (conic gradient masked to a ring). Pure CSS:
   it's a 2D rotate, so it has none of the viewport-wide repaint-flash the old 3D
   die had (which is why that one needed a JS rAF driver). */
.match-spinner {
    display: none;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        #ff3b3b, #ff9f1c, #ffe600, #2ecc71, #25c8ff, #6a5cff, #ff3bd0, #ff3b3b);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
            mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
    filter: saturate(1.15) drop-shadow(0 0 5px rgba(120,140,255,0.35));
    animation: matchSpin 0.85s linear infinite;
}
.call-hint-row.searching .match-spinner { display: block; }
@keyframes matchSpin { to { transform: rotate(360deg); } }

/* Chat text box → translucent black so it reads as a solid field over the
   animated background. Lobby-only override (room.html doesn't load this file);
   the .drag-over and :focus states keep their own higher-specificity styling. */
.chat-text-input {
    background: rgba(0,0,0,0.4);
}

/* Soft dark wash behind the call controls so the animated background is subdued
   where text + buttons need to read. Feathered with a radial fade (NOT a
   hard-edged pill — that read as a boxed-in control); it just dims the motion
   locally so the labels, toggles and hint stay legible. */
.call-options-row,
.call-hint {
    background: rgba(0, 0, 0, 0.75);   /* black box — default (dark) theme */
    border-radius: 14px;
    padding: 7px 16px;
    color: var(--text-secondary);
}
/* Tighter side padding on the cog box so the outer buttons (add-friend / history)
   sit an even 10px from the cogs — see .call-options-wrapper gap. The cogs' own
   spacing is untouched. (Overrides the shared .call-hint padding above.) */
.call-options-row { padding-left: 6px; padding-right: 6px; }
/* The bottom hint hugs its text — tightest box, ~1px off the content (all presets). */
.call-hint { padding: 2px 11px; }
/* Light presets (Sky): translucent sky-blue boxes with dark text + deep-blue labels.
   Toggled by body.bg-light in js/backgrounds.js. */
body.bg-light .call-options-row,
body.bg-light .call-hint {
    /* mostly transparent — a soft sky wash that fades out, so no hard edge */
    background: radial-gradient(ellipse at center, rgba(150,190,228,0.22) 0%, rgba(150,190,228,0) 78%);
    color: #14233a;
}

/* Per-preset tweak — Aurora, Quantum, Plasma, Moiré: drop the boxes, just
   shadow the text so it reads against the live background. */
body[data-bg="aurora"] .call-options-row,
body[data-bg="aurora"] .call-hint,
body[data-bg="quantum"] .call-options-row,
body[data-bg="quantum"] .call-hint,
body[data-bg="plasma"] .call-options-row,
body[data-bg="plasma"] .call-hint,
body[data-bg="moire"] .call-options-row,
body[data-bg="moire"] .call-hint {
    background: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.85);
}
/* Mosaic: no box — white text with a shadow so it reads over the bright facets. */
body[data-bg="mosaic"] .call-options-row,
body[data-bg="mosaic"] .call-hint {
    background: none;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.85);
}
/* Moiré: lift the lobby text to white so it cuts through the live field. */
body[data-bg="moire"] .call-options-row,
body[data-bg="moire"] .call-hint {
    color: #fff;
}

/* Aurora / Quantum / Mosaic / Clouds(sky): all lobby text white — the toggle row,
   the hint, AND the Call/Games labels — so it reads over the live/bright field.
   Clouds is the light-theme preset, so this also overrides bg-light's dark text. */
body[data-bg="aurora"]  .call-options-row, body[data-bg="aurora"]  .call-hint,
body[data-bg="quantum"] .call-options-row, body[data-bg="quantum"] .call-hint,
body[data-bg="mosaic"]  .call-options-row, body[data-bg="mosaic"]  .call-hint,
body[data-bg="sky"]     .call-options-row, body[data-bg="sky"]     .call-hint {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.85);
}
/* Clouds: drop the light-theme box so the white text sits on the sky, not a panel. */
body[data-bg="sky"] .call-options-row,
body[data-bg="sky"] .call-hint { background: none; }

.hint-em {
    color: #fff;
    font-style: normal;
    font-weight: 600;
}

/* The "Connected — you're live" status text. Greens up while in a call. */
.hint-live {
    color: #4ade80;
    font-weight: 300;
    font-family: "Exo 2", sans-serif;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
}
/* Partner avatar + flat flag sit before the "Connected!" text (avatar, then flag). */
.hint-avatar {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    background: #161a26;
    vertical-align: middle;
    margin-right: 6px;
}
.hint-avatar:empty { display: none; }
.hint-avatar .av-img { width: 100%; height: 100%; display: block; }
/* flag-icons span is 1.333em wide — a modest font-size keeps the flag compact. */
.hint-flag {
    display: inline-block;
    font-size: 0.95rem;
    line-height: 1;
    vertical-align: middle;
    margin-right: 6px;
}
.hint-flag:empty { display: none; }

/* ── Trust level badge shown next to the partner's name ── */
.partner-level-badge {
    display: inline-flex;
    gap: 4px;
    margin-left: 6px;
    vertical-align: middle;
}
.trust-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    border: 1px solid transparent;
}
.trust-badge.trust-new {
    background: rgba(139, 92, 246, 0.15);
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.4);
}
.trust-badge.trust-level {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    border-color: rgba(255, 255, 255, 0.08);
}
.trust-badge.trust-guest {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.4);
}

/* ── Guidelines ── */
.guidelines-box      { width: 100%; padding-top: 4px; }
.guidelines-box h4   { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.guidelines-box ul   { list-style: disc; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.guidelines-box li   { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; }

.moderation-notice {
    font-size: 0.78rem;
    color: #f87171;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
    padding: 0 4px;
}

/* ── Chat column (wraps message list, announcement, and input strip) ── */
.chat-area {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #0d0f14;
    border: 1px solid rgba(255,255,255,0.07);
}


.chat-area-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 12px 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
    overscroll-behavior: contain;
}
.chat-area-messages::-webkit-scrollbar { width: 6px; }
.chat-area-messages::-webkit-scrollbar-track { background: transparent; }
.chat-area-messages::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}
.chat-area-messages::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }
@media (hover: none) and (pointer: coarse) {
    .chat-area-messages { scrollbar-width: none; }
    .chat-area-messages::-webkit-scrollbar { display: none; }
}
/* Stack chat messages from the bottom so newest are visible. The
   announcement (when present) sticks to the top instead, so it pushes
   margin-top:auto onto the next sibling. */
.chat-area-messages > :first-child:not(.lobby-announcement) { margin-top: auto; }
.chat-area-messages > .lobby-announcement + * { margin-top: auto; }

/* Admin broadcast card. Lives inside #chat-messages as a flow item so
   it scrolls off naturally as messages pile up; centred, capped width. */
/* Admin broadcast — a terminal/ASCII card matching the call-time bio box
   (monospace, thin frame, no coloured quote bar). Keeps the logo + "admin"
   header; the body sits in its own monospace frame with links still live. */
.lobby-announcement {
    align-self: stretch;
    width: 100%;
    margin: 12px 0 0;
    background: rgba(10, 12, 20, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    padding: 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}
.lobby-announcement.hidden { display: none; }
.lobby-announcement-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lobby-announcement-remove {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    flex-shrink: 0;
}
.lobby-announcement-remove:hover {
    background: rgba(225, 84, 84, 0.18);
    border-color: rgba(225, 84, 84, 0.5);
    color: #fff;
}
.lobby-announcement-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}
.lobby-announcement-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.lobby-announcement-sender {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.lobby-announcement-time {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.lobby-announcement-body {
    font-family: 'Space Mono', ui-monospace, monospace;
    color: var(--text-primary);
    font-size: 0.82rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
}
@media (max-width: 600px) {
    .lobby-announcement {
        width: 100%;
        margin: 8px 0 0;
        padding: 12px 8px;
    }
    .lobby-announcement-logo { width: 30px; height: 30px; }
}

/* New-user skip help — progressive coaching card shown when a user rapidly
   skips calls (tier 1 = short nudge, tier 2 = the full filter explanation). */
.skip-help {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    animation: skip-help-fade 0.16s ease-out;
}
.skip-help.hidden { display: none; }
@keyframes skip-help-fade { from { opacity: 0; } to { opacity: 1; } }
.skip-help-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: rgba(14, 17, 28, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 22px 22px 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.skip-help-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    padding-right: 24px;
}
.skip-help-body {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
.skip-help-body strong { color: var(--text-primary); }
.skip-help-body em { font-style: italic; color: var(--text-primary); }
.skip-help-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.skip-help-ok {
    margin-top: 18px;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 9px;
    background: var(--deep-blue);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s;
}
.skip-help-ok:hover { filter: brightness(1.12); }
.skip-help-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
}
.skip-help-close:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-primary); }

/* ── Responsive ── */
@media (max-width: 800px) {
    html { overflow: hidden; height: 100dvh; }
    /* `height: 100dvh` alone isn't enough — the global `min-height: 100vh`
       from styles.css wins on mobile when the URL bar is showing (vh =
       largest viewport, dvh = current). Body silently grows past the
       visible region and the chat-strip ends up behind the URL bar.
       Set min-height explicitly to keep body inside the visible viewport. */
    body { height: 100dvh; min-height: 100dvh; }

    .app-layout { flex-direction: column; }

    .panel-left {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 16px;
        gap: 12px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        /* Top box takes whatever height its content needs; chat-area
           below uses flex:1 to fill what's left. No scroll on panel-left. */
        flex-shrink: 0;
    }

    /* The flank buttons sit beside the 36px cogs — keep them close to that size
       (not 50px) with a fuller icon so they don't read as oversized + empty. */
    .action-btn.btn-addfriend, .action-btn.btn-history { width: 40px; height: 40px; }
    .action-btn.btn-addfriend svg, .action-btn.btn-history svg { width: 21px; height: 21px; }
    .circle-side-btn { width: 42px; height: 42px; }

    .guidelines-box    { display: none; }
    .moderation-notice { display: none; }

    .chat-area { flex: 1; min-height: 0; }

    /* On mobile the panel-left scrolls and is easy to miss, so float the
       post-call rate strip just above the chat input instead. */
    .rate-inline {
        position: fixed;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        right: 12px;
        width: auto; /* clear the base width:100% so left/right define the box (was overhanging the right edge) */
        z-index: 140;
        background: #1a1c25;
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.55);
    }
}

/* ── Game Picker Modal ── */
.game-picker-drawer .side-drawer-head {
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.18);
}

/* Out-of-call banner — explains solo mode + offers the Solo / Invite toggle. */
.game-mode-banner {
    background: rgba(var(--primary-rgb), 0.06);
    border: 1px solid rgba(var(--primary-rgb), 0.22);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.game-mode-banner.hidden { display: none; }
.game-mode-banner-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0;
    text-align: center;
}
.game-mode-banner-text strong { color: var(--text-primary); }

.game-picker-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Each game is a tile plus (out of a call) its own Solo / Invite buttons. */
.game-picker-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.game-picker-actions {
    display: flex;
    gap: 6px;
}
.game-picker-action {
    flex: 1;
    padding: 6px 8px;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    background: rgba(var(--primary-rgb), 0.06);
    color: var(--text-primary);
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.game-picker-action:hover { background: rgba(var(--primary-rgb), 0.16); border-color: rgba(var(--primary-rgb), 0.5); }
.game-picker-action:active { transform: scale(0.97); }

.game-picker-card {
    display: block;
    position: relative;
    aspect-ratio: 320 / 190;       /* matches the landscape icon image aspect */
    padding: 0;
    background: rgba(var(--primary-rgb), 0.05);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 0;
    color: var(--text-primary);
    cursor: pointer;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.game-picker-card:hover {
    background: rgba(var(--primary-rgb), 0.14);
    border-color: rgba(var(--primary-rgb), 0.5);
}
.game-picker-card:active { transform: scale(0.97); }

/* During an invite the picker locks all cards and the chosen one shows a
 * spinning ring overlay so the user knows we're waiting for the partner. */
.game-picker-list.inviting .game-picker-card:not(.waiting) { opacity: 0.4; }
.game-picker-card.waiting { position: relative; cursor: progress; }
.game-picker-card.waiting::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    border: 3px solid rgba(var(--primary-rgb), 0.18);
    border-top-color: rgba(var(--primary-rgb), 0.95);
    animation: game-invite-spin 0.9s linear infinite;
    pointer-events: none;
}
.game-picker-card.waiting .game-picker-icon { opacity: 0.45; }
@keyframes game-invite-spin {
    to { transform: rotate(360deg); }
}

/* Emoji fallback (used only if iconImg is missing) */
.game-picker-icon {
    font-size: 2rem;
    line-height: 1;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* When the icon is an image, fill the whole card */
.game-picker-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Pacman PNG runs too wide visually — inset it 20px horiz / 1px vert.
   Card background is forced black so the gutters around the image show
   as pacman-arcade black. */
.game-picker-card[data-game-id="pacman"] { background: #000; }
.game-picker-card[data-game-id="pacman"] .game-picker-img {
    width: calc(100% - 40px);
    height: calc(100% - 2px);
    margin: 1px 20px;
}
/* Game name overlaid at the bottom with a dark gradient for readability */
.game-picker-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 8px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0) 100%);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    letter-spacing: 0.02em;
}

/* ── Game Invite Prompt ── */
.game-invite-text {
    font-size: 0.95rem;
    color: var(--text-primary);
    text-align: center;
    margin: 6px 0;
}
.game-invite-footer { gap: 10px; }

/* ── Game Overlay (covers the whole viewport while a game is active) ── */
.game-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: linear-gradient(135deg, #0a0e27 0%, #15161d 100%);
}

/* Floating leave-game X — no header bar, no title */
.game-overlay-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(var(--primary-rgb), 0.4);
    color: var(--primary);
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.game-overlay-close svg { width: 20px; height: 20px; display: block; }
.game-overlay-close:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #04181d;
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.4);
}
.game-overlay-close:active { transform: scale(0.96); }

.game-overlay-body {
    position: absolute;
    inset: 0;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 20px 28px;
    /* Still scrollable, but no visible bar — kills the global peach thumb here. */
    scrollbar-width: none;
}
.game-overlay-body::-webkit-scrollbar { display: none; }

@media (max-width: 800px) {
    .game-overlay-close { top: 8px; right: 8px; width: 34px; height: 34px; }
    .game-overlay-body  { padding: 18px 12px 20px; }
}

/* ── Game Invite Card (compact, game prompt on top, actions below) ── */
.game-invite-banner {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(160deg, #14121d 0%, #0a0b12 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 2px solid rgba(var(--primary-rgb), 0.55);
    border-radius: 0;
    box-shadow: 0 18px 50px -10px rgba(0,0,0,0.8);
    z-index: 1500;
    color: var(--text-primary);
    font-family: "Exo 2", sans-serif;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: slideIn 0.25s ease;
}

.game-invite-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}
.game-invite-title #game-invite-name {
    color: var(--primary);
    font-weight: 700;
    text-transform: capitalize;
}

.game-invite-actions {
    display: flex;
    gap: 8px;
}

.game-invite-btn {
    padding: 4px 18px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    background: transparent;
    color: var(--text-secondary);
    min-width: 64px;
}

.game-invite-yes {
    background: var(--success);
    color: #000;
    border-color: var(--success);
}
.game-invite-yes:hover { background: #1aff95; }

.game-invite-no:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }

@media (max-width: 800px) {
    .game-invite-banner { top: 64px; padding: 8px 12px; gap: 6px; }
    .game-invite-title { font-size: 0.8rem; }
}

/* ── Game invite-link modal (host shares a link, waits for a joiner) ── */
.game-share-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(4, 8, 12, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fadeIn 0.18s ease;
}
.game-share-modal.hidden { display: none; }

.game-share-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: rgba(13, 15, 22, 0.97);
    border: 1px solid rgba(var(--primary-rgb), 0.4);
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 30px rgba(var(--primary-rgb), 0.14);
    padding: 26px 24px 22px;
    color: var(--text-primary);
}

.game-share-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.game-share-close:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); }

.game-share-title {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
}
.game-share-title #game-share-game {
    color: var(--primary);
    text-transform: capitalize;
}
.game-share-sub {
    margin: 0 0 18px;
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.45;
    text-align: center;
}

.game-share-linkrow {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.game-share-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: 0.82rem;
    border-radius: 8px;
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    background: rgba(0,0,0,0.35);
    color: var(--text-primary);
    font-family: inherit;
}
.game-share-input:focus { outline: none; border-color: var(--primary); }
.game-share-copy {
    flex: 0 0 auto;
    padding: 10px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid var(--primary, var(--primary));
    background: var(--primary, var(--primary));
    color: #04181d;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, opacity 0.15s;
}
.game-share-copy:hover { background: #2ee6ff; }
.game-share-copy:active { transform: scale(0.97); }
.game-share-copy:disabled { opacity: 0.45; cursor: default; }

.game-share-waiting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.game-share-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(var(--primary-rgb), 0.25);
    border-top-color: var(--primary, var(--primary));
    animation: gs-spin 0.8s linear infinite;
}
@keyframes gs-spin { to { transform: rotate(360deg); } }

@media (max-width: 800px) {
    .game-share-card { padding: 24px 18px 20px; }
    .game-share-title { font-size: 1rem; }
}

/* ── Opponent-reconnecting notice (floats over a live invite-link game) ── */
.game-reconnect-notice {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(13, 15, 22, 0.95);
    border: 1px solid rgba(var(--primary-rgb), 0.4);
    border-radius: 999px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: fadeIn 0.18s ease;
}
.game-reconnect-notice.hidden { display: none; }
.game-reconnect-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(var(--primary-rgb), 0.25);
    border-top-color: var(--primary, var(--primary));
    animation: gs-spin 0.8s linear infinite;
}

/* ── Invite-link landing (what a ?play= visitor sees first) ── */
.game-join-card { text-align: center; }
.game-join-emoji {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 10px;
}
.game-join-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}
.game-join-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.game-join-btn svg { width: 18px; height: 18px; }
.game-join-primary {
    border: 1px solid var(--primary, var(--primary));
    background: var(--primary, var(--primary));
    color: #04181d;
}
.game-join-primary:hover { background: #2ee6ff; }
.game-join-secondary {
    border: 1px solid rgba(var(--primary-rgb), 0.4);
    background: rgba(var(--primary-rgb), 0.07);
    color: var(--text-primary);
}
.game-join-secondary:hover { background: rgba(var(--primary-rgb), 0.16); }
.game-join-btn:active { transform: scale(0.98); }
.game-join-fineprint {
    margin: 14px 0 0;
    font-size: 0.72rem;
    color: var(--text-secondary);
    opacity: 0.85;
}

/* ── Voice pill (over an invite game with audio chat) ── */
.game-voice-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(13, 15, 22, 0.95);
    border: 1px solid rgba(var(--primary-rgb), 0.4);
    border-radius: 999px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    animation: fadeIn 0.18s ease;
}
.game-voice-pill.hidden { display: none; }
.game-voice-pill:active { transform: scale(0.97); }
.game-voice-pill .game-voice-mic { width: 15px; height: 15px; display: none; }
.game-voice-pill .game-voice-spinner {
    width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid rgba(var(--primary-rgb), 0.25);
    border-top-color: var(--primary, var(--primary));
    animation: gs-spin 0.8s linear infinite;
    display: none;
}
/* connecting → spinner; live → mic icon; muted → red mic + dim */
.game-voice-pill.connecting .game-voice-spinner { display: inline-block; }
.game-voice-pill.live { border-color: rgba(46, 230, 137, 0.55); }
.game-voice-pill.live .game-voice-mic { display: inline-block; color: #2ee689; }
.game-voice-pill.live.muted { border-color: rgba(255, 71, 87, 0.6); }
.game-voice-pill.live.muted .game-voice-mic { color: #ff4757; }
.game-voice-pill.failed { opacity: 0.7; cursor: default; }

@media (max-width: 800px) {
    .game-voice-pill { top: 10px; left: 10px; padding: 7px 12px; font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Side drawers (Filters, Friends) — slide in from the right
   ═══════════════════════════════════════════════════════════════ */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.drawer-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

.side-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 92vw;
    background: #0a0c14;
    border-left: 1px solid rgba(255,255,255,0.06);
    /* Shadow only when the drawer is actually open. With it on at all
       times, the box-shadow leaks ~56px back across the right edge of
       the viewport even though `translateX(100%)` has moved the drawer
       itself off-screen — that's the blurred right-edge halo. */
    box-shadow: none;
    z-index: 1200;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.28s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.side-drawer.open {
    transform: translateX(0);
    box-shadow: -16px 0 40px rgba(0,0,0,0.6);
}
/* Carousel between menu tabs: the outgoing panel slides off to the LEFT while
   the incoming one slides in from the right, so they never cross over (no flash
   of the background between them). */
.side-drawer.menu-exit {
    transform: translateX(-100%);
}
/* Clipping viewport for the menu carousel. The menu drawers live inside (as
   absolute children) and slide within it, so the exiting panel is clipped at
   the panel's left edge rather than showing mid-screen on desktop. */
.menu-stack {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 92vw;
    overflow: hidden;
    z-index: 1200;
    pointer-events: none;          /* click-through to the lobby when closed */
    box-shadow: none;
    transition: box-shadow 0.28s ease;
}
.menu-stack.open {
    pointer-events: auto;
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.6);
}
.menu-stack .side-drawer {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    z-index: auto;
}
.menu-stack .side-drawer.open { box-shadow: none; }

.side-drawer-head {
    position: relative;
    padding: 18px 18px 14px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(95, 115, 255, 0.18);
}

.side-drawer-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    z-index: 2;
    transition: background 0.15s, color 0.15s;
}
.side-drawer-close:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}

.side-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 18px 24px;
    scrollbar-width: thin;
}

/* Drawer scrollbars: dark-grey + non-intrusive, overriding the global brand-cyan
   thumb (styles.css) so the slide-out panels don't get a bright blue bar. */
.side-drawer-body,
.dm-body {
    scrollbar-color: var(--dark-border) transparent;
}
/* When the dm-dock is hosting #chat-area (Call or Global mode) the body
   must pass its height through so the chat-area's flex column works —
   messages fill the middle, input pins to the bottom. */
.dm-body.dm-call-chat,
.dm-body.dm-global {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}
.dm-body.dm-call-chat #chat-area,
.dm-body.dm-global #chat-area {
    flex: 1;
    min-height: 0;
    border: none;
    background: transparent;
}
.side-drawer-body::-webkit-scrollbar-track,
.dm-body::-webkit-scrollbar-track { background: transparent; }
.side-drawer-body::-webkit-scrollbar-thumb,
.dm-body::-webkit-scrollbar-thumb { background: var(--dark-border); }
.side-drawer-body::-webkit-scrollbar-thumb:hover,
.dm-body::-webkit-scrollbar-thumb:hover { background: #3a3e4d; }

/* ── Side-drawer typography (shared, applies to filters/friends/history/games) ── */
.side-drawer {
    font-family: "Exo 2", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Filters drawer ── */
.filter-section { margin-top: 26px; }
.filter-section:first-of-type { margin-top: 0; }

.filter-h {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Exo 2", "Exo 2", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--text-primary);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.filter-icon { font-size: 1.1rem; }

.filter-sublabel {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
    margin: 0 0 14px;
}

/* Earned gender filter — locked state for users below the trust bar. */
.filter-section.filter-locked .radio-row {
    opacity: 0.45;
    cursor: not-allowed;
}
.filter-locked-note {
    margin: 8px 0 0;
    padding: 8px 10px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #fde68a;
    background: rgba(252, 211, 77, 0.1);
    border: 1px solid rgba(252, 211, 77, 0.25);
    border-radius: 8px;
}

.radio-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 2px 0;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.95rem;
    user-select: none;
    transition: background 0.15s;
}
.radio-row:hover { background: rgba(255, 255, 255, 0.05); }
.radio-row:has(input[type="radio"]:checked) {
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.10), rgba(108, 99, 255, 0.08) 80%);
}
.radio-row input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.30);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.radio-row input[type="radio"]:checked {
    border-color: rgba(255, 255, 255, 0.85);
}
.radio-row input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
}

/* "Only…" strict tick under each filter group — same row language as the
   radios, custom square box with a drawn tick. */
.filter-only {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    margin: 6px 0 2px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.85rem;
    user-select: none;
    transition: background 0.15s, color 0.15s;
}
.filter-only:hover { background: rgba(255, 255, 255, 0.05); }
.filter-only:has(input:checked) { color: var(--text-primary); }
.filter-only input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255,255,255,0.30);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
}
.filter-only input[type="checkbox"]:checked {
    border-color: rgba(255, 255, 255, 0.85);
    background: rgba(var(--primary-rgb), 0.35);
}
.filter-only input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px; left: 4px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.filter-only input[type="checkbox"]:disabled { opacity: 0.45; cursor: not-allowed; }
.filter-section.filter-locked .filter-only { opacity: 0.45; cursor: not-allowed; }

/* Minimum-trust fader — range + live value readout. */
.trust-fader {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 14px 2px;
}
.trust-fader input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: rgb(var(--primary-rgb));
    cursor: pointer;
}
.trust-fader-val {
    min-width: 64px;
    text-align: right;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gender-symbol {
    font-weight: 700;
    margin-left: 2px;
}
.gender-symbol.female    { color: #ff7ad9; }
.gender-symbol.male      { color: #4ea8ff; }
.gender-symbol.nonbinary { color: #b794f4; }

.chips-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: border-color 0.18s;
}
.chips-input:focus-within {
    border-color: rgba(255, 255, 255, 0.3);
}

.chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.chips-wrap:empty { margin-bottom: 0; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text-primary);
    padding: 5px 8px 5px 10px;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.15;
}
.chip-flag { font-size: 1rem; line-height: 1; flex-shrink: 0; }
/* Interests — a stable colour per tag (hue set inline by _hueFor). */
.chip-interest {
    background: hsla(var(--chip-hue), 60%, 48%, 0.18);
    border-color: hsla(var(--chip-hue), 70%, 62%, 0.5);
    color: hsl(var(--chip-hue), 85%, 80%);
}
.chip-interest .chip-x { color: hsl(var(--chip-hue), 80%, 82%); }
/* Avoided countries — same flag, a red wash so it reads as "skip". */
[data-chip-field="excluded-countries"] .chip {
    background: rgba(225, 70, 70, 0.12);
    border-color: rgba(225, 95, 95, 0.4);
}
.chip-x {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 4px;
    line-height: 1;
}
.chip-x:hover { color: #fff; }

.chips-text {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    padding: 2px 0;
}
.chips-text::placeholder {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.95rem;
    font-style: italic;
}

/* Filters auto-apply — this is just a quiet confirmation, not a button. */
.filter-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 18px;
    margin: 22px auto 6px;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.filter-status.show { opacity: 1; transform: none; }
.filter-status svg { width: 15px; height: 15px; }
.filter-status.saved { color: #6fe0a6; }
.filter-status.error { color: #ff8f8f; }

.filter-help {
    margin-top: 22px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.55;
}
.filter-help p:last-child { margin-bottom: 0; }
.filter-help p { margin-bottom: 10px; }
.filter-help u { color: var(--text-primary); text-decoration: none; font-weight: 600; }

/* ── Friends drawer ── */
/* Friends panel — sharp style, matching the Video room panel. */
.fr-topbar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
/* Filters / Call history / Games: the title bar lives inside .side-drawer-body so
   it scrolls away with the content (like #profile-drawer's heading). Drop its own
   horizontal padding so it lines up with the body's content. */
.side-drawer-body > .fr-topbar { padding: 4px 0 14px; }
.side-drawer-body > .fr-topbar .fr-title-left { padding-left: 0; }
.fr-iconbtn {
    width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--text-secondary);
    cursor: pointer; transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.fr-iconbtn svg { width: 20px; height: 20px; }
.fr-iconbtn:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.fr-close {
    margin-left: auto; flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--text-secondary);
    cursor: pointer; transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.fr-close svg { width: 18px; height: 18px; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fr-close:hover { background: rgba(225,60,60,0.16); border-color: rgba(225,60,60,0.45); color: #fff; }
.fr-close:hover svg { transform: rotate(90deg); }   /* twist the X */
.fr-title {
    flex: 1; min-width: 0;
    font-size: 1.05rem; font-weight: 700; color: var(--text-primary);
    margin: 0; padding: 0 6px;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Left-aligned panel title (Filters / Video room / Friends); close stays on the right. */
.fr-title.fr-title-left { justify-content: flex-start; padding-left: 4px; }
/* Friends bar: the title fills the left, so Add/Sent/close group on the right. */
#friends-head .fr-close { margin-left: 0; }

.friends-title {
    font-family: "Exo 2", "Exo 2", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.friends-add-panel {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(95, 115, 255, 0.12);
    background: rgba(10, 12, 30, 0.45);
}
.friends-add-row {
    display: flex;
    gap: 8px;
}
.friends-add-input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color 0.15s;
}
.friends-add-input:focus {
    outline: none;
    border-color: var(--primary);
}
.friends-add-btn {
    padding: 9px 16px;
    border: none;
    border-radius: 10px;
    background: var(--primary);
    color: #04222b;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: filter 0.15s;
}
.friends-add-btn:disabled { opacity: 0.5; cursor: default; }
.friends-add-btn:hover:not(:disabled) { filter: brightness(1.07); }
.friends-add-msg {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.friends-add-msg.error   { color: #e15050; }
.friends-add-msg.success { color: #5ac88a; }

.friends-empty {
    text-align: center;
    padding: 40px 24px 0;
    color: var(--text-secondary);
}
.friends-empty h3 {
    font-family: "Exo 2", "Exo 2", sans-serif;
    font-size: 1.05rem;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}
.friends-empty p {
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 240px;
    margin: 0 auto;
}

/* The whole friends drawer uses one unified background — no inset cards */
.friends-drawer .side-drawer-body {
    padding: 0;
    background: #0a0c14;
}

.friends-section { padding: 0; }
.friends-section-h {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    padding: 14px 16px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.friends-pill {
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 700;
}

.friends-rows { display: flex; flex-direction: column; }

/* Flat rows — full bleed, divider, hover highlight */
.friend-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: transparent;
    transition: background 0.12s;
}
.friend-row:hover { background: rgba(255,255,255,0.03); }
.friend-row.pending { background: rgba(255,165,0,0.06); }

.friend-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    background: #161a26;
}
.friend-avatar .av-img { width: 100%; height: 100%; display: block; }

.friend-main { flex: 1; min-width: 0; }
.friend-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.friend-name {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.friend-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.friend-unread {
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}

/* Unread badge that sits on the envelope (Message) button */
.friend-btn { position: relative; }
.friend-msg.has-unread {
    background: rgba(225,84,84,0.12);
    border-color: #e15454;
    color: #ff8a8a;
}
.msg-unread-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e15454;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-secondary, #1a1f2e);
    pointer-events: none;
}
.friend-row.has-unread { background: rgba(225,84,84,0.05); }

.friend-actions {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}
.friend-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    padding: 0;
}
.friend-btn:hover    { background: rgba(255,255,255,0.1); }
.friend-msg:hover    { background: var(--primary); border-color: var(--primary); color: #fff; }
.friend-call:hover   { background: #2bb673; border-color: #2bb673; color: #fff; }
.friend-accept       { color: #2bb673; }
.friend-accept:hover { background: #2bb673; color: #fff; border-color: #2bb673; }
.friend-decline,
.friend-remove       { color: #e15454; }
.friend-decline:hover,
.friend-remove:hover { background: #e15454; color: #fff; border-color: #e15454; }

/* Inline rename input */
.friend-rename-input {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--primary);
    border-radius: 4px;
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    padding: 2px 6px;
    width: 160px;
    outline: none;
}

/* ── Sent Requests cards ────────────────────────────────────────── */
.sent-cards { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }

.sent-card {
    background: rgba(var(--primary-rgb), 0.16);
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text-primary);
    font-family: "Exo 2", sans-serif;
    transition: background 0.12s;
}
.sent-card:hover { background: rgba(var(--primary-rgb), 0.22); }

.sent-card-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sent-card-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: #161a26;
    border: 1px solid rgba(var(--primary-rgb), 0.25);
}
.sent-card-avatar .av-img { width: 100%; height: 100%; display: block; }

.sent-card-main { flex: 1; min-width: 0; }
.sent-card-username {
    font-weight: 700;
    font-size: 0.97rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}
.sent-card-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.78rem;
}
.sent-card-status {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(var(--primary-rgb), 0.3);
}
.sent-card-date {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.sent-revoke {
    flex: 0 0 auto;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 7px;
    color: var(--text-secondary);
    font-family: "Exo 2", sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.sent-revoke:hover {
    background: rgba(225,84,84,0.15);
    border-color: #e15454;
    color: #ff8a8a;
}

/* ── Thread view (DM) ───────────────────────────────────────────── */
.thread-back {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.6rem;
    line-height: 1;
    padding: 0 8px 0 0;
    cursor: pointer;
    vertical-align: middle;
}
.thread-back:hover { color: var(--primary); }
/* Conversation title doubles as a back button (mirrors the dock). */
.thread-back-name { cursor: pointer; }
.thread-back-name:hover { color: #fff; }

.thread-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.thread-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.thread-clear {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.thread-clear:hover {
    background: #e15454;
    border-color: #e15454;
    color: #fff;
}
.thread-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.thread-empty {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: 40px 16px;
}

/* Flat, like the global chat — no bubbles. Own messages get a faint deep-blue
   band fading to the left; partner messages are plain text. */
.msg {
    max-width: 100%;
    align-self: stretch;
    padding: 3px 4px;
    border-radius: 0;
    background: none;
    color: var(--text-primary);
    word-wrap: break-word;
    line-height: 1.4;
    font-size: 0.9rem;
}
.msg-mine {
    text-align: right;
    padding-right: 6px;
    background: linear-gradient(to left, rgba(28, 72, 112, 0.3), transparent);
}
.msg-theirs {
    text-align: left;
}
.msg-body { white-space: pre-wrap; }
.msg-time {
    font-size: 0.66rem;
    opacity: 0.5;
    margin-top: 2px;
    text-align: right;
}
.msg-theirs .msg-time { text-align: left; }
.msg.failed { outline: 1px solid #e15454; }

.thread-compose {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.2);
}
.thread-compose input {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    color: var(--text-primary);
    padding: 8px 14px;
    font: inherit;
    outline: none;
}
.thread-compose input:focus { border-color: var(--primary); }
.thread-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    transition: opacity 0.15s;
}
.thread-send:hover { opacity: 0.9; }

/* Make the friends-drawer body fill the height so the thread compose sits at the bottom */
.friends-drawer .side-drawer-body { display: flex; flex-direction: column; min-height: 0; }
.friends-drawer .side-drawer-body > .thread-view { flex: 1; min-height: 0; }

/* Red dot when there are incoming requests */
.nav-item.has-request { position: relative; }
.nav-item.has-request::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: #e15454;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--bg-primary, #0d0f14);
}

/* Numeric unread badge on a nav button (FRIENDS pill, etc). Anchors
   to the top-right; the parent .nav-item is already a flex column so
   we force the badge out of flow with absolute positioning. */
.nav-item { position: relative; }
.nav-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    background: #e15454;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 0 0 2px var(--bg-primary, #0d0f14);
    pointer-events: none;
}
.nav-badge.hidden { display: none; }

/* Add Friend button — visual feedback once a request has been sent */
.action-btn.btn-sent {
    background: rgba(43,182,115,0.18) !important;
    border-color: #2bb673 !important;
    color: #2bb673 !important;
    cursor: default;
}

/* Mobile: drawer fills the screen */
@media (max-width: 600px) {
    .side-drawer { width: 100%; max-width: 100%; }
    .menu-stack { width: 100%; max-width: 100%; }
}

/* ── Gender picker modal ──
   Palette + title font come from .modal-themed; only the bits below
   are gender-specific. */
.gender-modal-intro {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 18px;
}
.gender-modal-intro strong { color: #f87171; }
/* Guest-expiry heads-up — a quieter, boxed note under the intro. */
.gender-modal-note {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
    margin: -6px 0 18px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.gender-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.gender-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.gender-option:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.25); }
.gender-option input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}
.gender-option input[type="radio"]:checked { border-color: rgba(255, 255, 255, 0.85); }
.gender-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
}
.gender-option-label { font-size: 0.95rem; color: var(--text-primary); }

.gender-confirm-row {
    margin: 14px 0 4px;
    padding: 10px 12px;
    background: rgba(255, 71, 87, 0.08);
    border: 1px solid rgba(255, 71, 87, 0.3);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gender-confirm-row-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.4;
}
.gender-confirm-row input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}
.gender-confirm-row a {
    color: var(--accent);
    text-decoration: underline;
}

/* (#gender-submit-btn is now styled by the shared boxed-button chain
    further down — keeps gender modal, profile save and room-join all
    in lockstep.) */

.gender-guidelines {
    margin: 14px 0 4px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.gender-guidelines summary {
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0.02em;
    list-style: none;
}
.gender-guidelines summary::-webkit-details-marker { display: none; }
.gender-guidelines summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 8px;
    color: var(--text-secondary);
    transition: transform 0.15s;
}
.gender-guidelines[open] summary::before { transform: rotate(90deg); }
.gender-guidelines ul {
    margin: 8px 0 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gender-guidelines li { line-height: 1.4; }
.gender-guidelines strong { color: #f87171; }
.gender-guidelines-link {
    margin: 10px 0 0;
    font-size: 0.82rem;
}
.gender-guidelines-link a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gender-guidelines-link a:hover { opacity: 0.85; }

/* ── Profile summary in settings modal ── */
.profile-summary {
    margin-bottom: 16px;
    padding: 14px;
    background: rgba(var(--primary-rgb), 0.05);
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Inline editors (Username + Email rows share the same chassis) */
.profile-row-username .profile-username-view,
.profile-row-username .profile-username-editor,
.profile-row-email .profile-email-view,
.profile-row-email .profile-email-editor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.profile-row-username .profile-username-view.hidden,
.profile-row-username .profile-username-editor.hidden,
.profile-row-email .profile-email-view.hidden,
.profile-row-email .profile-email-editor.hidden {
    display: none;
}
/* Label + edit pencil cluster on the LEFT of the row (the value sits right). */
.profile-field-head { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.profile-inline-edit {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.9rem;
    line-height: 1;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.profile-inline-edit:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.profile-username-editor input,
.profile-email-editor input,
.profile-password-editor input {
    width: 200px;
    max-width: 100%;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
}
.profile-username-editor input:focus,
.profile-email-editor input:focus,
.profile-password-editor input:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), 0.7);
}
/* Two stacked inputs (current + new) with the save/cancel row beneath. */
.profile-password-editor { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.profile-password-actions { display: flex; gap: 6px; }
.profile-inline-save,
.profile-inline-cancel {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.85rem;
    line-height: 1.2;
    transition: color .15s, border-color .15s, background .15s;
}
.profile-inline-save:hover  { border-color: #10b981; color: #d1fae5; background: rgba(16, 185, 129, 0.15); }
.profile-inline-cancel:hover { border-color: rgba(255,255,255,0.6); color: #fff; }
.profile-inline-save:disabled,
.profile-inline-cancel:disabled { opacity: 0.5; cursor: progress; }
.profile-field-error {
    color: #f87171;
    font-size: 0.78rem;
    padding: 2px 0 0;
}
.profile-field-error.hidden { display: none; }

/* Password show/hide eye — overlaid inside the input on the right.
   The form-group keeps its existing padding; we just absolute-position
   the toggle button and pad the input on the right so text doesn't run
   under the icon. */
.form-group.password-group {
    position: relative;
}
.form-group.password-group input {
    padding-right: 42px;
}
.password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.05rem;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: color .15s, background .15s;
}
.password-toggle:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.password-toggle.active { color: var(--primary); }

/* Email-change verify block — appears after ✓ is hit on the editor, holds
   the 6-digit code input + Resend link. Sits below the email row, full
   width of the modal-body container. */
.profile-email-verify {
    margin: 6px 0 0;
    padding: 10px 12px;
    background: rgba(var(--primary-rgb), 0.05);
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.profile-email-verify.hidden { display: none; }
.profile-email-verify-hint {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.profile-email-verify-hint strong { color: #fff; word-break: break-all; }
.profile-email-verify-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.profile-email-verify-row input {
    width: 140px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    color: #fff;
    font-size: 1.05rem;
    font-family: 'SF Mono', Menlo, monospace;
    letter-spacing: 4px;
    text-align: center;
}
.profile-email-verify-row input:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), 0.7);
}
.profile-email-verify-actions {
    display: flex;
    gap: 12px;
}

/* Signup verify view (login modal, register tab) — the 6-digit code
   input that replaces the form after Create Account is pressed.
   Buttons use the site-wide .btn-text style from styles.css; we only
   need a flex row + spacing here. */
.auth-verify-intro {
    margin: 0 0 14px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.45;
}
.auth-verify-intro strong { color: #fff; word-break: break-all; }
.auth-code-input {
    text-align: center;
    letter-spacing: 8px;
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 1.2rem;
}
.auth-verify-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
}

/* Success-flash state — the primary verify button turns green for ~800ms
   between "code was right" and "next thing happens" (modal closing /
   logged-in state lighting up), so the action gets a beat of feedback. */
.btn-primary.btn-success-flash,
.btn-primary.btn-success-flash:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.45);
    transform: none;
}
.profile-inline-save.btn-success-flash,
.profile-inline-save.btn-success-flash:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    color: #d1fae5;
}
.profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    min-width: 0;
}
.profile-row > * { min-width: 0; }
.profile-label {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.profile-trust-num {
    color: var(--text-secondary);
    font-weight: 400;
    margin-left: 4px;
}
.profile-value {
    color: var(--text-primary);
    font-weight: 600;
    min-width: 0;
    text-align: right;
    /* Ellipsize only when the value genuinely outgrows the row.
       The old 60% cap was sized for a much narrower modal. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Country typeahead dropdown ── */
.country-suggest {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #15172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
}
.chips-input { position: relative; }

.country-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-size: 0.92rem;
}
.country-suggest-item:hover,
.country-suggest-item.active {
    background: rgba(255, 255, 255, 0.08);
}
.country-suggest-flag {
    font-size: 1.15rem;
    line-height: 1;
    width: 1.5em;
    text-align: center;
    flex-shrink: 0;
}

/* Save button: hidden when there's nothing to save, glowing when dirty */
/* ── Bio textarea (gender modal + profile) ── */
.gender-bio-group { margin: 14px 0 4px; }
.gender-bio-group label,
.profile-bio-block label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.gender-bio-group .label-hint,
.profile-bio-block .label-hint {
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-secondary);
    opacity: 0.7;
    display: block;
    margin-top: 2px;
}

#gender-bio,
#profile-bio {
    width: 100%;
    background: linear-gradient(145deg, #0d0d0d, #1a1b22);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.92rem;
    padding: 10px 12px;
    resize: vertical;
    font-family: inherit;
    transition: var(--transition);
}
#gender-bio:focus,
#profile-bio:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 12px var(--primary-glow);
}

.profile-bio-block {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed rgba(var(--primary-rgb), 0.18);
}

.btn-bio-save {
    margin-top: 8px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 12px var(--primary-glow);
    transition: transform 0.12s;
}
.btn-bio-save:hover { transform: scale(1.03); }
.btn-bio-save:disabled { opacity: 0.7; cursor: default; transform: none; }

/* ── Profile: Allow Incoming Calls toggle ────────────────────────── */
.profile-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255,255,255,0.08);
    margin-top: 10px;
}
.profile-toggle-row .profile-label { font-weight: 600; }
/* Friends-only explainer above the call/DM switches. Carries the separator so
   the first switch right below it drops its own. */
.profile-toggle-hint {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px dashed rgba(255,255,255,0.08);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.profile-toggle-hint + .profile-toggle-row { border-top: none; margin-top: 6px; }

/* .modal-themed lives in styles.css so both lobby.html and
   room.html (which only loads styles.css) get the same look. */

/* ── Profile modal layout
   Let the page scroll the overlay (no internal scrollbar on the
   card) and lay the lower form-groups out in 2 columns that
   collapse to 1 when the modal is narrow. */
#settings-modal {
    align-items: flex-start;
    overflow-y: auto;
    padding: 40px 16px;
    /* Drop the heavy scrim (.modal sets 0.9 opacity + blur 15px) right down —
       this is where you switch the ambient background, so you need to SEE it
       changing behind the card. Other modals keep the strong overlay. */
    background: rgba(10, 14, 39, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
#settings-modal .modal-content {
    /* Layout overrides — palette comes from .modal-themed. */
    max-width: 1100px;
    max-height: none;
    overflow: visible;
    margin: 0 auto;
}
/* Pill toggles inside the profile modal switch to purple to match
   the new card palette (the global toggle elsewhere stays cyan). */
#settings-modal .pill-toggle input:checked + .pill-track {
    background: var(--accent);
}
/* Two side-by-side cards: profile summary on the left, settings
   block on the right. Each takes half the modal width and both
   stretch to the same height regardless of content. */
#settings-modal .modal-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}
#settings-modal .modal-body > .profile-summary,
#settings-modal .modal-body > .settings-block {
    margin: 0;
    height: 100%;
    border-radius: 0;
    /* Never let an inner box grow wider than its grid cell — long
       usernames etc. should ellipsise, not push the card outwards. */
    min-width: 0;
    overflow: hidden;
}
/* The four device pickers stack vertically inside the right-hand
   card (it's now too narrow for a 2-column grid). */
.settings-block {
    background: rgba(var(--primary-rgb), 0.05);
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.settings-block .form-group { margin-bottom: 0; }
/* Save button stretches across the bottom of the settings-block.
   The bottom-alignment is now provided by .donate-block's
   margin-top: auto (which sits between the pickers and the save),
   so save itself doesn't need margin-top: auto. */
.settings-block #save-settings-btn {
    align-self: stretch;
    width: 100%;
}
/* Collapse to a single stacked column on narrower viewports. */
@media (max-width: 720px) {
    #settings-modal .modal-body { grid-template-columns: 1fr; }
}

/* ── Profile: Sign-in / Sign-out row ──────────────────────────────── */
.profile-auth-row {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px dashed rgba(255,255,255,0.08);
}
.profile-auth-hint {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 16px;
    line-height: 1.4;
}
#profile-signin-btn,
#profile-signout-btn { width: 100%; }

/* ── Danger zone — self-service account deletion at the very bottom ── */
.profile-danger-zone {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed rgba(255, 80, 80, 0.25);
}
.profile-delete-btn {
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    color: #ff6b6b;
    border: 1px solid rgba(255, 80, 80, 0.4);
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.profile-delete-btn:hover {
    background: rgba(255, 80, 80, 0.12);
    border-color: rgba(255, 80, 80, 0.7);
    color: #ff8a8a;
}
.profile-delete-btn:disabled { opacity: 0.6; cursor: default; }
.profile-delete-confirm {
    margin-top: 12px;
    padding: 14px;
    background: rgba(255, 80, 80, 0.06);
    border: 1px solid rgba(255, 80, 80, 0.25);
    border-radius: 10px;
}
.profile-delete-hint {
    margin: 0 0 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.profile-delete-hint strong { color: var(--text-primary); }
.profile-delete-row { display: flex; align-items: center; gap: 8px; }
.profile-delete-row input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: 'Space Mono', ui-monospace, monospace;
    letter-spacing: 4px;
    text-align: center;
}
.profile-delete-actions { margin-top: 10px; }

/* Shared button chassis (sign-in/out/save/upgrade/confirm/join-room)
   lives in styles.css so both lobby and room get the same look. */

/* Donate block — sits flush at the bottom of the settings-block,
   directly above the Save button. The auto top-margin pulls the
   whole bottom pair (donate hint + button + save) down so they
   line up with the bottom edge of the profile card next to it. */
.donate-block {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.donate-block-hint {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
    margin: 0;
}
#profile-donate-btn { width: 100%; }

/* ── Profile drawer — account panel relocated out of the old settings modal,
   restyled to match the sharp panel look (neutral fields, solid-cyan CTAs). ── */
#profile-drawer .side-drawer-body { display: flex; flex-direction: column; gap: 18px; }
/* Heading scrolls with the content (no fixed top bar). */
.profile-heading { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
/* Country row: flat flag sits flush to the left of the name, slightly smaller. */
.profile-country-val { display: inline-flex; align-items: center; gap: 6px; }
.profile-country-val .fi { font-size: 0.82em; flex-shrink: 0; border-radius: 2px; }
/* Flat list on the drawer's own dark bg — no nested cyan cards. */
#profile-drawer .profile-summary { display: flex; flex-direction: column; gap: 4px; background: none; border: none; padding: 0; }
#profile-drawer .profile-row { padding: 4px 0; }
#profile-drawer .form-group input,
#profile-drawer .form-group select,
#profile-drawer #profile-bio,
#profile-drawer .profile-username-editor input,
#profile-drawer .profile-email-editor input,
#profile-drawer .profile-email-verify input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: none;
}
#profile-drawer .form-group input:focus,
#profile-drawer .form-group select:focus,
#profile-drawer #profile-bio:focus {
    border-color: var(--primary);
    box-shadow: none;
    background: rgba(255, 255, 255, 0.05);
}
#profile-drawer .settings-block {
    background: none;
    border: none;
    padding: 0;
}
#profile-drawer #save-settings-btn,
#profile-drawer #profile-signin-btn {
    background: var(--primary);
    border: none;
    color: #04222b;
    border-radius: 10px;
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 700;
    padding: 12px;
}
#profile-drawer #save-settings-btn:hover,
#profile-drawer #profile-signin-btn:hover {
    background: var(--primary);
    color: #04222b;
    filter: brightness(1.07);
}
#profile-drawer #profile-signout-btn,
#profile-drawer #profile-donate-btn {
    border-radius: 10px;
    text-transform: none;
    letter-spacing: 0.02em;
}
/* Email-verify box → neutral; editors focus cyan not purple. */
#profile-drawer .profile-email-verify {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
#profile-drawer .profile-username-editor input:focus,
#profile-drawer .profile-email-editor input:focus {
    border-color: var(--primary);
}
/* Bio save → solid cyan, no gradient/glow. */
#profile-drawer .btn-bio-save {
    background: var(--primary);
    color: #04222b;
    box-shadow: none;
}
/* Dividers → solid hairline, not dashed. */
#profile-drawer .profile-auth-row,
#profile-drawer .donate-block {
    border-top-style: solid;
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ── Call History Drawer ──────────────────────────────────────────── */
.history-count {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    /* The emoji star renders higher than the surrounding text baseline, so
       nudge the whole count down 1px to line up with the "Call history" title. */
    position: relative;
    top: 1px;
}
/* Emojis sit flush against the next glyph — give them breathing room. */
.history-count .hc-emoji { margin-right: 5px; }
/* Call History stretches edge-to-edge — the rows have their own 16px gutter,
   no inner box. The scrolling body drops its horizontal padding; the title bar
   (which scrolls with the rows) is re-indented to 16px to line up with them.
   The empty-state keeps its standard padding via .friends-empty. */
.history-drawer .side-drawer-body { padding-left: 0; padding-right: 0; }
.history-drawer .side-drawer-body > .fr-topbar { padding-left: 16px; padding-right: 16px; }
.history-list { display: flex; flex-direction: column; }
/* Flat, edge-to-edge cells — no rounded card. A thin separator between
   rows is the only divider. Hover just dims the row background up a touch. */
.history-row {
    padding: 11px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s;
}
.history-row:hover { background: rgba(255,255,255,0.035); }
.history-row-main { display: flex; align-items: center; gap: 12px; }
.history-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.history-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #161a26; }
.history-avatar .av-img { width: 100%; height: 100%; display: block; }
.history-name { color: var(--text-primary); letter-spacing: 0.005em; }
/* Country (far left) and date (far right) share the same horizontal
   bounds as the top row — meta sits directly under .history-row-main
   with identical left/right reach so country lines up with the dot and
   date lines up with the last action button. */
.history-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    /* Clear the 32px action buttons above — without this the date crowds the
       call button while the country (under the shorter name) sits lower. */
    margin-top: 10px;
    padding-right: 2px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.history-country, .history-when { font-size: inherit; color: inherit; font-family: inherit; }
.history-actions { display: flex; gap: 6px; }
.history-btn {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.history-btn:hover { background: rgba(255,255,255,0.1); }
/* Call button is the online indicator now — lit green when the partner is
   reachable, brightens to a solid pill on hover. Disabled (offline) drops
   back to the standard dim look via .history-btn.disabled. */
.history-call:not(.disabled) {
    color: #2bb673;
    border-color: rgba(43,182,115,0.45);
    background: rgba(43,182,115,0.12);
}
.history-call:not(.disabled):hover { background: #2bb673; border-color: #2bb673; color: #fff; }
.history-add:hover { background: rgba(251,191,36,0.18); border-color: rgba(251,191,36,0.5); color: #fbbf24; }
.history-btn.disabled, .history-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.history-report:hover { background: rgba(255, 71, 87, 0.18); border-color: rgba(255, 71, 87, 0.5); color: #ff8a93; }
.history-block:hover  { background: rgba(255, 71, 87, 0.18); border-color: rgba(255, 71, 87, 0.5); color: #ff8a93; }

/* Inline report form expanded under a history row when 🚩 is clicked.
   The parent .history-row is now flex-direction:column so the form just
   slots in as another column child at full width. */
.history-report-form {
    margin-top: 4px;
    padding: 12px;
    background: rgba(255, 71, 87, 0.06);
    border: 1px solid rgba(255, 71, 87, 0.25);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.history-report-form.hidden { display: none; }
.history-report-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}
.history-report-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.history-report-details {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.25);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    resize: vertical;
}
.history-report-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.history-report-btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.history-report-btn:hover { background: rgba(255,255,255,0.1); }
.history-report-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.history-report-send {
    background: rgba(255, 71, 87, 0.18);
    border-color: rgba(255, 71, 87, 0.5);
    color: #ff8a93;
}
.history-report-send:hover {
    background: rgba(255, 71, 87, 0.3);
    border-color: rgba(255, 71, 87, 0.7);
}
.history-report-msg {
    font-size: 0.82rem;
    min-height: 1.1em;
    color: var(--text-secondary);
}
.history-report-msg.success { color: #4ade80; }
.history-report-msg.error   { color: #ff8a93; }

/* ── Call Overlay (outbound + inbound) ────────────────────────────── */
.call-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.call-overlay.hidden { display: none; }
.call-card {
    background: var(--bg-secondary, #1a1f2e);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 32px 40px;
    min-width: 320px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.call-card-title {
    font-size: 1rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.call-card-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 24px;
    word-break: break-word;
}
.call-card-actions { display: flex; gap: 12px; justify-content: center; }
.call-btn {
    padding: 12px 24px;
    border-radius: 999px;
    border: 0;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s, filter 0.15s;
}
.call-btn:hover { transform: scale(1.03); }
.call-btn-accept { background: #22c55e; color: #fff; }
.call-btn-decline { background: #ef4444; color: #fff; }
.call-btn-silence { background: #475569; color: #fff; }
.call-card-spinner {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.1);
    border-top-color: var(--primary, #8b5cf6);
    margin: 0 auto 16px;
    animation: callspin 0.9s linear infinite;
}
@keyframes callspin { to { transform: rotate(360deg); } }
.call-card-pulse {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--primary, #8b5cf6);
    margin: 0 auto 16px;
    position: relative;
    animation: callpulse 1.4s ease-out infinite;
}
.call-card-pulse::after {
    content: '📞';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    animation: callshake 0.6s ease-in-out infinite;
}
@keyframes callpulse {
    0%   { box-shadow: 0 0 0 0 rgba(139,92,246,0.6); }
    100% { box-shadow: 0 0 0 28px rgba(139,92,246,0); }
}
@keyframes callshake {
    0%,100% { transform: rotate(-8deg); }
    50%     { transform: rotate(8deg); }
}


/* ── Post-call rate (inline, lives in panel-left under the call hint) ── */
.rate-inline {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: rate-inline-in 220ms ease-out;
}
.rate-inline.hidden { display: none; }
@keyframes rate-inline-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rate-inline-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.rate-inline-prompt {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rate-inline-prompt strong { color: var(--text-primary); }

.rate-inline-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #15161d;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.rate-inline-btn:hover {
    background: #1d1f29;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
#rate-inline-up:hover    { background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.6); }
#rate-inline-down:hover  { background: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.6); }
#rate-inline-block:hover { background: rgba(239, 68, 68, 0.28); border-color: rgba(239, 68, 68, 0.75); }

.rate-inline-close {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--text-dim);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
}
.rate-inline-close:hover { color: var(--text-primary); }

.rate-inline-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rate-inline-form.hidden { display: none; }

.rate-inline-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.rate-chip {
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.rate-chip:hover { background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.4); }
.rate-chip.selected {
    background: rgba(139, 92, 246, 0.22);
    border-color: var(--primary);
    color: var(--text-primary);
}

#rate-inline-details {
    width: 100%;
    padding: 6px 8px;
    background: #15161d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-family: inherit;
    resize: vertical;
}
#rate-inline-details:focus { outline: none; border-color: var(--primary); }

.rate-inline-form-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
}
.rate-inline-send {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.rate-inline-send:hover { filter: brightness(1.1); }
.rate-inline-skip {
    padding: 5px 8px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: underline;
}
.rate-inline-skip:hover { color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════
   Ambient generative background (js/backgrounds.js)
   Fixed full-viewport canvas behind all content. Created from JS, so
   nothing here needs a matching element in lobby.html.
   ═══════════════════════════════════════════════════════════════ */
#bg-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;            /* above the body backdrop, below every panel */
    pointer-events: none;
    display: block;
}
/* Moiré: a deep indigo backdrop tied to the palette's purple-blue end, plus
   a generous blur on the canvas — the additive blobs smear into each other
   on the way out, so it reads as a slow lava lamp instead of discrete balls
   floating in black. */
body[data-bg="moire"] #bg-canvas {
    background: #120a20;
    filter: blur(10px);
}
/* Plasma overlay — entanglement web + bond filaments paint here so they pass
   OVER the speaker (z 0) and voice-bars (z 1), instead of behind. Sits below
   the call-box buttons (call-pill z 10, avatar-top-controls z 6) so the
   threads stop at the button centres without painting over the icons. */
#plasma-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    display: none;
}
body[data-bg="plasma"] #plasma-overlay { display: block; }


/* ── Background cog (in the toggles row) + preset popover menu.
   Replaces the old fader; visibility is admin-gated in js/backgrounds.js. ── */
.bg-cog {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9px;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bg-cog svg { width: 19px; height: 19px; }
.bg-cog:hover,
.bg-cog.active {
    background: var(--deep-blue);
    border-color: var(--deep-blue);
    color: #fff;
}
.bg-cog.active svg { animation: bg-cog-spin 3.5s linear infinite; }
/* Plasma: drop the cog boxes too, so the settings + layout gears float over the
   art like the Text/Auto toggles; a soft shadow keeps the icons legible. */
body[data-bg="plasma"] .bg-cog,
body[data-bg="plasma"] .bg-cog:hover,
body[data-bg="plasma"] .bg-cog.active {
    background: none;
    border-color: transparent;
}
body[data-bg="plasma"] .bg-cog svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85)); }
@keyframes bg-cog-spin { to { transform: rotate(360deg); } }

.bg-menu {
    position: fixed;
    z-index: 1200;
    min-width: 170px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    background: linear-gradient(180deg, rgba(20, 22, 30, 0.98), rgba(12, 14, 20, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
}
.bg-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.bg-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 7px;
    color: var(--text-primary);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.bg-menu-item:hover { background: rgba(255, 255, 255, 0.06); }
.bg-menu-item.active { background: rgba(var(--primary-rgb), 0.14); color: var(--primary); }

/* ═══════════════════════════════════════════════════════════════════
   Gamified profile panel — the right column (#panel-right).
   Levels + XP bar, streak, stat tiles, quest badges, theming dock.
   Rendered by js/profilepanel.js. Hidden ≤980px (mobile uses the modal).
   ═══════════════════════════════════════════════════════════════════ */
.panel-right {
    width: 304px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 16px;
    overflow-y: auto;
    background: #0b0d12;
    border-left: 1px solid rgba(255,255,255,0.06);
    scrollbar-width: thin;
}
.profile-card { display: flex; flex-direction: column; gap: 16px; }

/* ── Channel panel — the Chat layout swaps the profile card for a
   Discord-style list of global-chat channels (rows rendered by chat.js). ── */
.channel-panel { display: none; flex-direction: column; min-height: 0; gap: 4px; }
.app-layout[data-layout="chat"] .panel-right .channel-panel { display: flex; }
.app-layout[data-layout="chat"] .panel-right .profile-card  { display: none; }

.channel-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 6px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.channel-panel-title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}
.channel-add-btn {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
}
.channel-add-btn:hover { background: rgba(var(--primary-rgb), 0.35); }

.channel-add-form { display: flex; flex-direction: column; gap: 6px; padding: 6px; }
.channel-add-form.hidden { display: none; }
.channel-add-form input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 7px 10px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
}
.channel-add-form input:focus { border-color: rgba(255,255,255,0.25); }
.channel-add-actions { display: flex; gap: 6px; }
.channel-add-create, .channel-add-cancel {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 7px 0;
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
}
.channel-add-create { background: rgb(var(--primary-rgb)); color: #fff; }
.channel-add-create:hover { filter: brightness(1.08); }
.channel-add-cancel { background: rgba(255,255,255,0.08); color: var(--text-secondary); }
.channel-add-cancel:hover { background: rgba(255,255,255,0.14); }

.channel-list { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; min-height: 0; }
.channel-row {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
}
.channel-row:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.channel-row.active { background: rgba(var(--primary-rgb), 0.16); color: var(--text-primary); }
.channel-hash { opacity: 0.55; font-weight: 600; }
.channel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-unread {
    background: rgb(var(--primary-rgb));
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 9px;
    padding: 1px 6px;
    flex-shrink: 0;
}
.channel-del {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 18px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.13s, background 0.13s;
}
.channel-row:hover .channel-del { opacity: 0.8; }
.channel-del:hover { background: rgba(244, 67, 54, 0.25); color: #fff; opacity: 1; }

/* ── Call-stats — a flush section at the top of the right panel during a call,
   separated by a hairline divider (no box; matches the chat dividers). panel-right
   is hidden in quiet + ≤980px, so it's scoped to the non-quiet desktop layouts
   automatically; the floating top-right timer/label are suppressed there (below)
   so this section owns the readout. ──────────────────────────────────────────── */
.call-stats { display: none; }
body.in-call .call-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Pull up so the first row's text lines up with the neighbour panel's header
       text (chat tab bar ≈ 12px from the top; panel padding-top is 18px). */
    margin-top: -7px;
    padding: 0 0 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.call-stats-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.call-stats-label { font-size: 0.68rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-primary); }
.call-stats-val { font-size: 0.72rem; color: rgba(255, 255, 255, 0.72); }
/* The single #call-timer is relocated into the Time slot here; drop its fixed
   positioning so it sits in-flow. It keeps its own Space Mono font (activity.css). */
.call-stats .call-timer { position: static; }
.call-stats-conn { display: inline-flex; align-items: center; gap: 7px; }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); flex-shrink: 0; }
.conn-dot.conn-good { background: #4ade80; box-shadow: 0 0 7px rgba(74, 222, 128, 0.6); }
.conn-dot.conn-fair { background: #fbbf24; box-shadow: 0 0 7px rgba(251, 191, 36, 0.55); }
.conn-dot.conn-poor { background: #ff5a6a; box-shadow: 0 0 7px rgba(255, 90, 106, 0.55); }
.mic-muted { display: none; text-transform: uppercase; }
body.partner-muted .mic-live  { display: none; }
body.partner-muted .mic-muted { display: inline; }
/* Centred's right panel has zero padding (DMs fill it edge-to-edge), so pad the
   section there (and no negative pull — there's no panel padding to counter). */
.app-layout[data-layout="centred"] .call-stats { margin-top: 0; padding: 12px 13px 12px; }

/* On non-quiet desktop the call-stats section owns the mute status, so the
   floating muted label (inside .app-layout) is hidden there; the card's Mic row
   shows it instead. (The timer isn't hidden — it's relocated into the card by
   js/profilepanel.js, so there's no duplicate to suppress.) Quiet + mobile keep
   the floating label. */
@media (min-width: 981px) {
    .app-layout[data-layout="social"]  .muted-label,
    .app-layout[data-layout="centred"] .muted-label,
    .app-layout[data-layout="chat"]    .muted-label { display: none; }
}

.pp-head { display: flex; align-items: center; gap: 10px; }
.pp-usericon { width: 22px; height: 22px; flex-shrink: 0; color: var(--text-secondary); }
.pp-head-meta { flex: 1; min-width: 0; }   /* fill .pp-head so the name only ellipsises on real overflow */
/* Flag (or fallback glyph) + name share the first line, vertically centred. */
.pp-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pp-name { min-width: 0; font-weight: 700; font-size: 1.02rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Member/Guest + staff badge on one flush line under the name. */
.pp-sub { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-secondary); }
.pp-badge {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.pp-badge-admin { background: linear-gradient(135deg, #ffd24d, #ff8c42); color: #1a1206; }
.pp-badge-mod   { background: linear-gradient(135deg, #7c4ddb, #5a3aa8); color: #fff; }
/* Country flag on the Member line — slightly larger than the text so it reads
   as a small graphic rather than inline punctuation. */
/* Country flag as the lead icon (stands in for the avatar). */
.pp-flag { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }

/* Server-rendered avatar image — fills whatever round/square box holds it. */
.av-img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Admin System-avatar tab row. */
.sysav-row { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.sysav-preview { display: inline-flex; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #161a26; border: 2px solid var(--primary); flex-shrink: 0; }

/* Avatar (robot monster) in the profile head — click to open the chooser. */
.pp-avatar {
    position: relative; flex-shrink: 0;
    width: 52px; height: 52px; padding: 0;
    border-radius: 50%; overflow: hidden;
    border: 2px solid rgba(var(--primary-rgb), 0.5);
    background: #161a26; cursor: pointer;
    transition: border-color 0.15s, transform 0.12s;
}
.pp-avatar:hover { border-color: var(--primary); transform: scale(1.04); }
.pp-avatar svg { width: 100%; height: 100%; display: block; }
.pp-avatar-pencil {
    position: absolute; right: -1px; bottom: -1px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--primary); color: #04181d;
    font-size: 0.62rem; line-height: 18px; text-align: center;
    border: 2px solid #0b0e16;
}
.profile-card--menu .pp-avatar { width: 56px; height: 56px; }

/* Avatar chooser modal */
.pp-av-modal {
    position: fixed; inset: 0; z-index: 4200;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px);
}
.pp-av-modal.hidden { display: none; }
.pp-av-card {
    width: 100%; max-width: 360px;
    background: #11141d; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px; padding: 16px; box-shadow: 0 24px 70px rgba(0,0,0,0.6);
    font-family: "Exo 2", sans-serif;
}
.pp-av-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.95rem; font-weight: 500; color: #fff; margin-bottom: 12px; }
.pp-av-close { background: rgba(255,255,255,0.06); border: none; color: var(--text-secondary); width: 26px; height: 26px; border-radius: 6px; cursor: pointer; }
.pp-av-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.pp-av-preview { position: relative; width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; overflow: hidden; background: #161a26; border: 2px solid var(--primary); }
.pp-av-preview svg { width: 100%; height: 100%; display: block; }
.pp-av-preview .avfx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.pp-av-slider { margin-bottom: 14px; }
.pp-av-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    touch-action: pan-y pinch-zoom;
}
.pp-av-tile { aspect-ratio: 1; padding: 0; border-radius: 12px; overflow: hidden; background: #161a26; border: 2px solid transparent; cursor: pointer; transition: border-color 0.12s, transform 0.12s; }
.pp-av-tile:hover { transform: scale(1.05); }
.pp-av-tile.sel { border-color: var(--primary); }
.pp-av-tile svg, .pp-av-tile .av-img { width: 100%; height: 100%; display: block; }
.pp-av-slide-controls { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.pp-av-slide-btn {
    width: 36px; height: 28px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05); color: var(--text-secondary); font-size: 1.35rem;
    line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.pp-av-slide-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.pp-av-actions { display: flex; gap: 8px; }
.pp-av-btn { flex: 1; padding: 9px; border-radius: 9px; font-size: 0.85rem; font-weight: 500; font-family: "Exo 2", sans-serif; cursor: pointer; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: var(--text-primary); transition: background 0.15s, filter 0.15s; }
.pp-av-btn:hover { background: rgba(255,255,255,0.1); }
.pp-av-set { border-color: rgba(var(--primary-rgb), 0.5); color: var(--primary); }
.pp-av-set:hover { background: rgba(var(--primary-rgb), 0.12); }
.pp-av-save { background: var(--primary); color: #04181d; border-color: var(--primary); }
.pp-av-save:hover { filter: brightness(1.1); background: var(--primary); }
.pp-av-style-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 12px; }
.pp-av-style {
    flex: 1; padding: 8px 12px; padding-right: 34px;
    border-radius: 8px; background: #161a26; color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.14); font-size: 0.82rem; font-family: "Exo 2", sans-serif; cursor: pointer;
    /* custom chevron so the triangle isn't jammed against the edge */
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
/* Previously-chosen avatars — a horizontal scroll strip you can re-pick from. */
.pp-av-recent-label { font-size: 0.72rem; color: var(--text-secondary); margin: 0 0 6px; }
.pp-av-recent { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; margin-bottom: 12px; scrollbar-width: thin; }
.pp-av-rtile { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border-radius: 10px; overflow: hidden; background: #161a26; border: 2px solid transparent; cursor: pointer; transition: border-color 0.12s, transform 0.12s; }
.pp-av-rtile:hover { transform: scale(1.06); }
.pp-av-rtile.sel { border-color: var(--primary); }

/* Nav profile button shows the user's avatar when they have one. */
#nav-profile .nav-avatar.has-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; }
#nav-profile .nav-avatar.has-avatar svg { width: 100%; height: 100%; display: block; }

.pp-section-h { font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 9px; }

/* Level + XP bar to the next tier */
.pp-level-name { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); margin-bottom: 9px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,0.08); overflow: hidden; }
.pp-bar > span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--primary), #7c5cff); transition: width 0.5s ease; }
.pp-bar--top > span { background: linear-gradient(90deg, #ffcf5c, #ff8a3d); }
.pp-bar-label { margin-top: 6px; font-size: 0.74rem; color: var(--text-secondary); }
.pp-bar-label b { color: var(--text-primary); font-weight: 700; }
.pp-new { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; color: #04222b; background: var(--primary); padding: 1px 5px; border-radius: 4px; }

/* Streak */
/* Compact one-liner — the streak is a self-deprecating "losing streak" gag now,
   so it stays small and dry rather than a celebratory tile. */
.pp-streak { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.04); border-radius: 9px; padding: 7px 11px; }
.pp-streak-flame { font-size: 1rem; filter: grayscale(0.3); }
.pp-streak-line { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); }
.pp-streak-line b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Stat tiles */
.pp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp-tile { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 11px 13px; }
.pp-tile-num { font-size: 1.35rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; }
.pp-tile-label { font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); margin-top: 5px; }
.pp-tiles--loading .pp-tile-num { color: var(--text-secondary); }

/* Profile-tab card only: the stat tiles tuck up beside the name, much smaller
   than the desktop right-panel grid. */
/* Header column stretches to the tile column's height; the name sits on the
   top tile row's line and Member/badge on the bottom row's line. */
.profile-card--menu .pp-menu-top { display: flex; align-items: stretch; gap: 12px; }
.profile-card--menu .pp-menu-top .pp-head { flex: 1 1 auto; min-width: 0; align-items: stretch; }
/* Two lines distributed so the name row centres on the top tile row and the
   Member/badge row centres on the bottom tile row. */
.profile-card--menu .pp-menu-top .pp-head-meta { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.profile-card--menu .pp-tiles {
    flex: 0 0 auto;
    grid-template-columns: repeat(2, 58px);
    gap: 5px;
}
.profile-card--menu .pp-tile { padding: 5px 8px; border-radius: 8px; text-align: center; }
.profile-card--menu .pp-tile-num { font-size: 1rem; }
.profile-card--menu .pp-tile-label { font-size: 0.5rem; margin-top: 1px; letter-spacing: 0.02em; }

/* Quests */
.pp-quest { display: flex; gap: 11px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.pp-quest:first-of-type { border-top: none; padding-top: 2px; }
.pp-quest-emoji { font-size: 1.3rem; width: 26px; text-align: center; flex-shrink: 0; }
.pp-quest.locked { opacity: 0.5; }
.pp-quest.locked .pp-quest-emoji { filter: grayscale(1); }
.pp-quest-body { min-width: 0; flex: 1; }
.pp-quest-label { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 5px; }
.pp-quest-tick { color: #44d07b; font-weight: 800; }
.pp-quest-bar { height: 5px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 6px; }
.pp-quest-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #7c5cff); }
.pp-quest-sub { font-size: 0.68rem; color: var(--text-secondary); margin-top: 4px; }

/* Signed-out teaser */
.pp-signedout { text-align: center; padding: 32px 12px; color: var(--text-secondary); }
.pp-signedout-emoji { font-size: 2rem; margin-bottom: 10px; }
.pp-signedout p { font-size: 0.85rem; margin-bottom: 15px; line-height: 1.4; }
.pp-signin { background: var(--primary); color: #04222b; border: none; border-radius: 8px; padding: 8px 16px; font-weight: 700; cursor: pointer; }
.pp-signin:hover { filter: brightness(1.08); }

/* Blocked-users row (account panel) + its sub-page overlay in the profile drawer */
.profile-blocked-btn {
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    padding: 6px 0;
    font: inherit;
    text-align: left;
}
.profile-blocked-btn:hover .profile-label { color: var(--text-primary); }
.profile-blocked-chevron { color: var(--text-secondary); font-size: 1.2rem; line-height: 1; }
.pp-subpage {
    position: absolute;
    /* Start below the fixed .drawer-tabs bar (z-index 1201, 62px tall — same
       offset as .menu-drawer's padding-top), or the bar covers the back button. */
    inset: 62px 0 0 0;
    z-index: 6;                 /* over the drawer body, under modals */
    display: none;
    flex-direction: column;
    background: #0a0c14;        /* matches .side-drawer */
}
.pp-subpage.open { display: flex; }
.pp-subpage-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.pp-subpage-back {
    background: none;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    color: var(--text-secondary);
    padding: 4px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}
.pp-subpage-back:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.3); }
.pp-subpage-title { font-size: 1rem; margin: 0; }
.pp-subpage-body { flex: 1; overflow-y: auto; padding: 10px 16px 20px; }
.pp-blocked-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.pp-blocked-av { width: 34px; height: 34px; border-radius: 50%; flex: none; background: rgba(255,255,255,0.05); }
.pp-blocked-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.pp-blocked-unblock {
    background: none;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 4px 12px;
    font-size: 0.82rem;
    cursor: pointer;
    flex: none;
}
.pp-blocked-unblock:hover { border-color: var(--primary); color: var(--primary); }
.pp-blocked-unblock:disabled { opacity: 0.5; cursor: default; }
.pp-blocked-empty { color: var(--text-secondary); font-size: 0.88rem; padding: 18px 2px; }

@media (max-width: 980px) {
    .panel-right { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Centre column — global chat (top) + DMs dock (below).
   The dock is rendered by js/dmdock.js. Shown on desktop in the
   "Chat + DMs" layout; hidden in "Chat only" and ≤800px (DMs → drawer).
   ═══════════════════════════════════════════════════════════════════ */
.center-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.center-col .chat-area { flex: 1 1 auto; min-height: 0; }

.dm-dock {
    flex: 0 0 38%;
    min-height: 160px;
    max-height: 360px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #0b0d14;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.dm-head { display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: rgba(255,255,255,0.035); border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; user-select: none; -webkit-user-select: none; }
.dm-title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-title-back { cursor: pointer; }
.dm-title-back:hover { color: #fff; }
.dm-back { background: none; border: none; color: var(--text-secondary); font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; position: relative; top: -1px; }
.dm-back:hover { color: var(--text-primary); }
.dm-badge { background: var(--primary); color: #04222b; font-size: 0.62rem; font-weight: 800; border-radius: 9px; padding: 1px 6px; min-width: 16px; text-align: center; flex-shrink: 0; }
.dm-body { flex: 1; overflow-y: auto; scrollbar-width: thin; }
.dm-empty { color: var(--text-secondary); font-size: 0.8rem; text-align: center; padding: 26px 16px; line-height: 1.4; }

.dm-list { display: flex; flex-direction: column; }
.dm-thread { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; text-align: left; width: 100%; font: inherit; }
.dm-thread:hover { background: rgba(255,255,255,0.04); }
.dm-av { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #161a26; flex-shrink: 0; }
.dm-av svg { width: 100%; height: 100%; display: block; }
.dm-thread-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.dm-thread-name { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-thread-last { font-size: 0.74rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-thread.unread .dm-thread-last { color: var(--text-primary); }
.dm-thread-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 0.66rem; color: var(--text-secondary); flex-shrink: 0; }

.dm-msgs { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; }
.dm-msg { display: flex; }
/* Own DMs: flat text on the right with a faint deep-blue band; partner DMs are
   flat text. Matches the global + user chat treatment. */
.dm-msg.me { justify-content: flex-end; background: linear-gradient(to left, rgba(28, 72, 112, 0.3), transparent); padding: 1px 5px 4px 0; }
/* Roomier line-height + bottom padding so tall emoji glyphs sit inside the
   bubble (and the own-message gradient) rather than poking out the bottom. */
.dm-bubble { max-width: 82%; padding: 3px 5px 4px; font-size: 0.82rem; line-height: 1.45; word-break: break-word; }
.dm-msg.them .dm-bubble { background: none; color: var(--text-primary); }
.dm-msg.me .dm-bubble { background: none; color: var(--text-primary); text-align: right; }

/* Stack the bubble above its reaction chips, aligned per sender. */
.dm-msg { flex-direction: column; }
.dm-msg.me   { align-items: flex-end; }
.dm-msg.them { align-items: flex-start; }

/* Per-thread delete (trash at the end of each row in the list). The row is a
   <button>, so this is a role=button span; it reveals on row hover. */
.dm-thread { position: relative; }
.dm-thread-del {
  flex: 0 0 auto; display: inline-flex; align-items: center; margin-left: 4px;
  padding: 3px 4px; border-radius: 6px; opacity: 0; font-size: 0.95rem; line-height: 1;
  cursor: pointer; transition: opacity 0.12s, transform 0.12s, background 0.12s;
}
.dm-thread:hover .dm-thread-del { opacity: 0.7; }
.dm-thread-del:hover { opacity: 1; transform: scale(1.12); background: rgba(255, 255, 255, 0.06); }
@media (hover: none) { .dm-thread-del { opacity: 0.6; } }   /* touch has no hover */

/* Unread/request badge on the Friends tab in the menu (mirrors the hamburger). */
.drawer-tab-badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box;
  background: #e15454; color: #fff; font-size: 0.6rem; font-weight: 700;
  line-height: 15px; text-align: center; border-radius: 8px;
  box-shadow: 0 0 0 2px #0d0f14; pointer-events: none;
}
.drawer-tab-badge.hidden { display: none; }

/* Reaction chips under a bubble. */
.dm-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.dm-react-chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px;
  border-radius: 11px; border: 1px solid var(--dark-border);
  background: rgba(255, 255, 255, 0.05); color: var(--text-primary);
  font-size: 0.82rem; line-height: 1.5; cursor: pointer;
}
.dm-react-chip.mine { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.18); }
.dm-react-n { font-size: 0.7rem; color: var(--text-secondary); }
/* The right-click / long-press reaction picker reuses global chat's
   .reaction-picker styling (chat.css) so the bin + ＋ grid look identical. */

/* Compose emoji picker (the smiley button) — floats above the input. */
#dm-compose { position: relative; }
.dm-emoji-pop {
  position: absolute; bottom: calc(100% + 6px); right: 6px;
  width: 244px; max-height: 196px; overflow-y: auto;
  display: flex; flex-wrap: wrap; gap: 1px; padding: 8px;
  border-radius: 10px; background: #1c2030; border: 1px solid var(--dark-border);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); z-index: 6000;
}
.dm-emoji-pop.hidden { display: none; }
.dm-emoji-pop .emoji-item {
  border: none; background: none; cursor: pointer; font-size: 1.2rem;
  line-height: 1; padding: 3px; border-radius: 6px;
}
.dm-emoji-pop .emoji-item:hover { background: rgba(255, 255, 255, 0.08); }

/* ── Shared DM conversation component (DMThread) ──────────────────────────
   Fills its host (the dock's #dm-thread-host or the friends-drawer body) as a
   flex column: scrolling messages above, compose pinned below. */
.dmt-host { flex: 1 1 auto; min-height: 0; display: flex; }
.dmt { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; }
.dmt-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dmt-compose { flex: 0 0 auto; position: relative; }
.friends-drawer .side-drawer-body > .dmt { flex: 1; min-height: 0; }

/* The whole friend row is click-to-DM. */
.friend-row:not(.pending) { cursor: pointer; }

/* System "SPEAKR" welcome thread (client-only, shown to newcomers). */
.dm-thread-system .dm-thread-name { color: var(--primary); }
.dm-intro-bubble { max-width: 100%; white-space: pre-wrap; }
.dm-intro-note {
    margin-top: 10px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: center;
    opacity: 0.8;
}

/* DM thread compose reuses the global chat strip (.chat-strip / .chat-text-input
   / .chat-icon-btn / .chat-emoji-btn / .chat-send-btn in chat.css) so the two
   inputs stay identical — no DM-specific compose rules here. */

/* Unified-box header (DM | User | Global). Shown wherever the dock IS the chat:
   quiet, social, and chat. In 'centred' the dock is just the DM list, so the
   tabs stay hidden there. */
.dm-tabs { display: none; align-items: center; gap: 2px; }
.dm-controls { display: none; align-items: center; gap: 2px; margin-left: auto; flex-shrink: 0; }
.app-layout[data-layout="quiet"]  .dm-tabs,
.app-layout[data-layout="social"] .dm-tabs,
.app-layout[data-layout="chat"]   .dm-tabs,
.app-layout[data-layout="quiet"]  .dm-controls,
.app-layout[data-layout="social"] .dm-controls,
.app-layout[data-layout="chat"]   .dm-controls { display: flex; }
/* The collapse chevron folds the box into its header — only meaningful in
   Quiet (the other layouts let the box fill its column). */
.dm-ctl[data-act="collapse"] { display: none; }
.app-layout[data-layout="quiet"] .dm-ctl[data-act="collapse"] { display: flex; }
.dm-ctl { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 2px 7px; display: flex; align-items: center; border-radius: 6px; line-height: 0; }
.dm-ctl svg { width: 18px; height: 18px; }
.dm-ctl:hover { color: var(--text-primary); background: rgba(255,255,255,0.08); }
.dm-ctl[data-act="collapse"] svg { transition: transform 0.15s ease; }
.app-layout[data-layout="quiet"] .dm-dock:not(.collapsed) .dm-ctl[data-act="collapse"] svg { transform: rotate(180deg); }
/* Tab buttons: Messages + Call as text, Global as the globe icon. */
.dm-tab {
    background: none; border: none; cursor: pointer; border-radius: 6px; padding: 3px 8px;
    font-size: 0.73rem; font-family: "Exo 2", sans-serif; font-weight: 500;
    color: var(--text-secondary); line-height: 1;
    transition: background 0.12s, color 0.12s;
}
.dm-tab:hover { background: rgba(255,255,255,0.07); color: var(--text-primary); }
.dm-tab.active { background: var(--deep-blue); color: #fff; }
/* Dedicated DM box (centred layout): a plain "Messages" title instead of the
   tab switcher. Shown in every layout via JS (controls() returns it when the
   dock isn't the unified box). */
.dm-head-title { font-size: 0.73rem; font-weight: 500; font-family: "Exo 2", sans-serif; color: var(--text-secondary); letter-spacing: normal; line-height: 1; padding: 3px 0; }   /* match the left chat header (.chat-tab): same font, size + vertical footprint so the two header bars line up */
/* Active channel always reads as a blue pill — the text tabs (Messages/User)
   AND the globe (Global) alike, so whichever channel is open is consistent. */
.dm-ctl.dm-tab-globe.on { background: var(--deep-blue); color: #fff; }
/* Collapsed (Quiet only) → just the header bar. The #dm-dock id is needed to
   outweigh the quiet sizing rule (which also uses the id + min-height). */
/* Open/close slides — the whole box unfolds from / folds back into its header bar
   (max-height on the dock so the inner chat keeps a real height to fill). */
.app-layout[data-layout="quiet"] .panel-left #dm-dock.collapsed { max-height: 40px; }
/* Global chat hosted inside the box. */
.dm-global { flex: 1; display: flex; min-height: 0; padding: 0; }
.dm-global #chat-area { flex: 1; min-height: 0; border: none; }

/* Mobile hides the dock by default (DMs live in the Friends drawer there) —
   but social/chat now use the dock as the unified chat, so keep it there. */
@media (max-width: 800px) { .dm-dock { display: none; } }
@media (max-width: 800px) {
    .app-layout[data-layout="social"] .dm-dock,
    .app-layout[data-layout="chat"]   .dm-dock { display: flex; }
}

/* Social & Chat: the dock IS the chat — fill the centre column and hide the
   now-redundant standalone chat-area (it lives inside the dock when hosted;
   when the dock shows the DM list, the chat-area is parked in the centre
   column and must stay hidden so the dock reads as the single chat box). */
.app-layout[data-layout="social"] .center-col #dm-dock,
.app-layout[data-layout="chat"]   .center-col #dm-dock {
    flex: 1 1 auto; max-height: none; min-height: 0;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 0;   /* square top + bottom — no rounded corners here */
}
.app-layout[data-layout="social"] .center-col > #chat-area,
.app-layout[data-layout="chat"]   .center-col > #chat-area { display: none; }

/* ── "Call + DMs" layout (desktop) ───────────────────────────────────
   global chat left · call box centre · DMs right · no profile card. Equal-width
   flanks + a centred row keep the call box dead centre; the layout selector stays
   in the right column (above the DMs) so you can switch back. Mobile keeps the
   call box on top (this is desktop-only). */
@media (min-width: 801px) {
    .app-layout[data-layout="centred"] .center-col { order: -1; flex: 1 1 0; }
    .app-layout[data-layout="centred"] .panel-left { flex: 0 0 420px; }
    .app-layout[data-layout="centred"] .panel-right { flex: 1 1 0; width: auto; min-width: 0; padding: 0; gap: 0; }   /* equal flank + let the DM dock fill the panel edge-to-edge (no box-in-box) */
    .app-layout[data-layout="centred"] .profile-card { display: none; }
    .app-layout[data-layout="centred"] .panel-right #dm-dock {
        flex: 1 1 auto; max-height: none; min-height: 0;
        border: none;       /* fills the whole panel — no inner box outline */
        border-radius: 0;
    }
    /* The left chat header's globe icon inflates its bar to ~42px; the
       Messages header is shorter. Pin it to the same height so the two line up. */
    .app-layout[data-layout="centred"] .panel-right .dm-head { min-height: 42px; }
}

/* ── "Quiet" layout — just the call box + DMs (no global chat, no profile) ──
   One centred column: call box on top, DMs below, layout selector at the foot so
   you can switch back. The chat + profile columns are dropped at all widths; the
   centring + column width are desktop-only. */
.app-layout[data-layout="quiet"] .center-col,
.app-layout[data-layout="quiet"] .panel-right { display: none; }
.app-layout[data-layout="quiet"] .panel-left #dm-dock {
    flex: 1 1 auto; width: 100%; min-height: 0; max-height: 50vh; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07); border-radius: 10px;
    transition: max-height 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 801px) {
    .app-layout[data-layout="quiet"] { justify-content: center; }
    .app-layout[data-layout="quiet"] .panel-left { flex: 0 0 420px; border-right: none; }
}
/* Quiet is the default, so it has to read the same on mobile: show the DMs (which
   are otherwise hidden ≤800px) and let the call box + DMs fill the screen. */
@media (max-width: 800px) {
    .app-layout[data-layout="quiet"] .panel-left { flex: 1; min-height: 0; }
    .app-layout[data-layout="quiet"] .panel-left #dm-dock { display: flex; }
}

/* ── Shared FIXED tab header for the menu panels (Filters / Friends / Video room).
   It sits above the drawers and stays put; only the panel below it slides. ──── */
.drawer-tabs {
    position: fixed; top: 0; right: 0; width: 440px; max-width: 92vw; z-index: 1201;
    display: flex; gap: 4px; padding: 10px 10px;
    background: #0a0c14;
    border-left: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.drawer-tabs.show { transform: translateX(0); }
/* Menu panels leave room for the fixed bar overhead. */
.menu-drawer { padding-top: 62px; }
.drawer-tab {
    flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
    height: 40px; border-radius: 9px; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid transparent; color: var(--text-secondary);
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.drawer-tab svg { width: 28px; height: 28px; }
.drawer-tab:hover { background: rgba(255,255,255,0.09); color: var(--text-primary); }
.drawer-tab.active { background: var(--deep-blue); color: #fff; border-color: rgba(255,255,255,0.16); }
/* Exit sits at the end as the single close affordance now the per-panel X
   has been retired. A small left-margin separates it from the tab cluster. */
.drawer-tab-exit { margin-left: 4px; flex: 0 0 40px; color: var(--text-secondary); }
.drawer-tab-exit:hover { background: rgba(255,90,90,0.18); color: #ff9b9b; border-color: rgba(255,90,90,0.28); }

/* Staff tabs — hidden until refreshStaffTabs() confirms the role. */
.drawer-tab.staff-tab-hidden { display: none; }

/* Mod tab — red shield palette */
.drawer-tab[data-tab="mod"] { color: #fca5a5; }
.drawer-tab[data-tab="mod"]:hover { background: rgba(156,86,86,0.28); color: #fca5a5; border-color: rgba(196,124,124,0.35); }
.drawer-tab[data-tab="mod"].active { background: #9c5656; border-color: #c47c7c; color: #fca5a5; }

/* Admin tab — gold star palette */
.drawer-tab[data-tab="admin"] { color: #e0b347; }
.drawer-tab[data-tab="admin"]:hover { background: rgba(183,121,31,0.28); color: #f0c44f; border-color: rgba(224,179,71,0.35); }
.drawer-tab[data-tab="admin"].active { background: #b7791f; border-color: #e0b347; color: #fff; }


/* Mobile: match the bar to the full-width drawer. This MUST sit after the base
   .drawer-tabs rule above, or its 440px width wins on source order. */
@media (max-width: 600px) {
    .drawer-tabs { width: 100%; max-width: 100%; }
}

/* Create-room panel (host setup; Join → loading → room.html). */
.cr-panel { padding: 0 0 26px; }
.cr-blurb { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.55; margin: 0 0 16px; }
/* Premium note — same treatment as the gender-filter "earned" note. */
.cr-note {
    margin: 0 0 20px; padding: 10px 12px;
    font-size: 0.82rem; line-height: 1.45;
    color: #fde68a; background: rgba(252, 211, 77, 0.1);
    border: 1px solid rgba(252, 211, 77, 0.25); border-radius: 9px;
}
.cr-field { margin-bottom: 16px; }
.cr-field label { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 6px; }
.cr-field input, .cr-field select {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 9px;
    padding: 10px 12px; color: var(--text-primary); font-size: 0.9rem; outline: none;
}
.cr-field input:focus, .cr-field select:focus { border-color: var(--primary); }
.cr-check { display: flex; align-items: center; gap: 9px; font-size: 0.86rem; color: var(--text-secondary); margin: 4px 0 22px; cursor: pointer; }
.cr-check input { width: 16px; height: 16px; flex-shrink: 0; }
.cr-join { width: 100%; background: var(--primary); color: #04222b; border: none; border-radius: 10px; padding: 13px; font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.cr-join:hover { filter: brightness(1.07); }

/* ── Room loading cover — create video room → room.html ─────────────── */
.room-loading {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: radial-gradient(ellipse at center, #0e1430 0%, #06070d 70%);
    color: var(--text-primary); opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
.room-loading.show { opacity: 1; pointer-events: auto; }
.room-loading p { font-size: 0.95rem; color: var(--text-secondary); letter-spacing: 0.02em; }
.room-loading-spinner {
    width: 46px; height: 46px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.14); border-top-color: var(--primary);
    animation: room-spin 0.8s linear infinite;
}
@keyframes room-spin { to { transform: rotate(360deg); } }