/* ===========================================================================
   Social_World overlay — assets/css/social-world.css

   The visual layer for the Social_World client chrome that the runtime modules
   under assets/js/social/ build into the click-through overlay created by
   bootstrap.js (buildOverlay: #social-overlay-root and its per-surface hosts).
   Those modules only ever set *functional* inline styles (host positioning,
   pointer-events, per-bubble opacity); every appearance rule lives here.

   Design goals (harmonised with assets/css/library-3d.css):
     - dark translucent "glass" panels with blur, ~10-14px rounded corners,
       subtle 1px light borders and soft shadows, matching the .lib3d-* HUD;
     - each surface pinned compactly in its corner, legible over the 3D scene,
       never stretching across or overlapping the lobby;
     - fully namespaced under the social host ids / .social-* classes so nothing
       can leak into the hall's own .lib3d-* UI.

   Every selector below is based on the REAL class names the modules render:
     bootstrap.js     #social-overlay-root, #social-chat-host, #social-emote-host,
                      #social-settings-host, #social-target-host,
                      #social-notice-host, #social-bubble-layer,
                      .social-settings-gear / -body / .social-settings-open
     chat-ui.js       .social-chat, -log, -notice, -controls, -channel, -input,
                      -send, -retry, -entry, -name, -channel-tag, -text,
                      -recommendations, -recommendation, .social-chat-bubble
     emotes.js        .social-emotes, .social-emote-button, -glyph, -label, -status
     settings.js      .social-settings, -title, -toggle(-label/-hint), -status,
                      -list, -entries, -empty, -remove, -deletion(-hint/-button/-confirm)
     entry-notice.js  .social-entry-notice(--error), -title, -assigned, -data-intro,
                      -data-items, -data-item, -not-shared, -screening, -retention,
                      -open-report, -actions, -studio, -dismiss, -failed, -retry
     target-card.js   .social-target-card, -avatar, -name, -bot, -actions,
                      -mute/-block/-report/-dismiss, -report-form/-title/
                      -reason(-label)/-note(-label)/-submit/-cancel, -status
     safe-phrases.js  .social-safe-phrases, -intro, -status, -categories,
                      -category(-title), -list, .social-safe-phrase, -retry
     occupancy.js     #lib3d-social-hud (the hall's existing HUD slot; [data-unavailable])

   NOTE: remote-character nameplates (remote-characters.js) are rendered as 3D
   canvas sprites inside the WebGL scene, not DOM, so they are not (and cannot
   be) styled here. The occupancy read-out is the only DOM-based nameplate-like
   surface and is styled via #lib3d-social-hud below.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Shared design tokens — scoped to the overlay root so they never leak.
   ------------------------------------------------------------------------- */
#social-overlay-root {
    --sw-panel-bg: rgba(14, 19, 34, 0.92);
    --sw-panel-bg-solid: rgba(16, 21, 38, 0.96);
    --sw-panel-soft: rgba(20, 28, 48, 0.6);
    --sw-blur: 14px;
    --sw-border: 1px solid rgba(255, 255, 255, 0.12);
    --sw-border-soft: 1px solid rgba(255, 255, 255, 0.08);
    --sw-radius: 14px;
    --sw-radius-sm: 10px;
    --sw-radius-xs: 8px;
    --sw-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    --sw-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.6);
    --sw-text: #eef2fb;
    --sw-text-dim: #aab8d6;
    --sw-text-muted: #8a99bd;
    --sw-accent: #4f8cff;
    --sw-accent-2: #8a5bff;
    --sw-accent-grad: linear-gradient(90deg, #4f8cff, #8a5bff);
    --sw-gold: #ffe6b0;
    --sw-danger: #ff8a8a;
    --sw-hover: rgba(79, 140, 255, 0.2);
    --sw-field-bg: rgba(12, 16, 28, 0.7);

    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Arabic UI: the hall switches the whole page to Cairo via body.lib3d-rtl; the
   social chrome (whose elements carry lang="ar"/dir="rtl" from applyDir) follows. */
#social-overlay-root [lang="ar"],
body.lib3d-rtl #social-overlay-root {
    font-family: 'Cairo', 'Noto Kufi Arabic', 'Tajawal', sans-serif;
}

/* A reusable glass-panel look shared by the corner surfaces. */
.social-chat,
.social-safe-phrases,
.social-settings-body,
.social-target-card,
.social-entry-notice {
    background: var(--sw-panel-bg);
    -webkit-backdrop-filter: blur(var(--sw-blur));
    backdrop-filter: blur(var(--sw-blur));
    border: var(--sw-border);
    box-shadow: var(--sw-shadow);
    color: var(--sw-text);
}

/* Shared control (button/select/input/textarea) baseline for the chrome. */
.social-chat select,
.social-chat input,
.social-chat button,
.social-emote-button,
.social-emote-status,
.social-settings-body button,
.social-settings-body input,
.social-target-card button,
.social-target-card select,
.social-target-card textarea,
.social-entry-notice button,
.social-safe-phrases button,
.social-safe-phrase {
    font-family: inherit;
}

/* ---------------------------------------------------------------------------
   Chat panel — #social-chat-host (bottom-left), .social-chat
   ------------------------------------------------------------------------- */
#social-chat-host {
    /* The host width is set inline (max-width:min(420px,90vw)); make it a column
       so the chat panel and the safe-phrase picker stack cleanly within it. */
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(420px, 90vw);
}

.social-chat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: var(--sw-radius);
}

/* Header bar: chat title + minimize/expand toggle. */
.social-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.social-chat-title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--sw-text-dim);
    text-transform: uppercase;
}
.social-chat-collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    border: var(--sw-border-soft);
    background: var(--sw-panel-soft);
    color: var(--sw-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.social-chat-collapse:hover { background: var(--sw-hover); transform: translateY(-1px); }
.social-chat-collapse-glyph { pointer-events: none; }

/* Collapsed: hide the panel body, leaving only the header bar on screen. */
.social-chat.social-chat-collapsed { gap: 0; }
.social-chat.social-chat-collapsed .social-chat-log,
.social-chat.social-chat-collapsed .social-chat-notice,
.social-chat.social-chat-collapsed .social-chat-controls,
.social-chat.social-chat-collapsed .social-chat-retry {
    display: none !important;
}

.social-chat-log {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(34vh, 300px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-end: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(79, 140, 255, 0.55) transparent;
}

.social-chat-entry {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 4px 8px;
    font-size: 0.85rem;
    line-height: 1.35;
}

.social-chat-name {
    font-weight: 700;
    color: #cfe0ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.social-chat-channel-tag {
    justify-self: start;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(79, 140, 255, 0.18);
    border: var(--sw-border-soft);
    color: var(--sw-text-dim);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.social-chat-channel-tag[data-channel="room"] {
    background: rgba(138, 91, 255, 0.2);
}

.social-chat-text {
    grid-column: 1 / -1;
    color: var(--sw-text);
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Genre_Bot catalog recommendations (Requirement 10.6). */
.social-chat-recommendations {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.social-chat-recommendation {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 230, 176, 0.35);
    background: rgba(201, 136, 63, 0.16);
    color: var(--sw-gold);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.social-chat-recommendation:hover { background: rgba(201, 136, 63, 0.3); transform: translateY(-1px); }

/* Private rejection / status line, shown to this Visitor only (6.14). */
.social-chat-notice {
    margin: 0;
    padding: 6px 10px;
    border-radius: var(--sw-radius-xs);
    background: rgba(255, 138, 138, 0.12);
    border: 1px solid rgba(255, 138, 138, 0.3);
    color: var(--sw-danger);
    font-size: 0.8rem;
}
.social-chat-notice[hidden] { display: none; }

/* Input row: channel selector + input + send on one line (Requirement 6.1/6.2).
   .social-chat-controls already gets display:flex from library-3d.css; refine it. */
.social-chat-controls {
    gap: 6px;
}

.social-chat-channel,
.social-chat-input {
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--sw-field-bg);
    color: var(--sw-text);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.social-chat-channel {
    flex: 0 0 auto;
    padding: 0 10px;
    max-width: 42%;
    cursor: pointer;
}
.social-chat-channel option { color: #0b0f1a; }
.social-chat-input {
    flex: 1 1 44px;
    min-width: 0;
    padding: 0 14px;
}
.social-chat-input::placeholder { color: var(--sw-text-muted); }
.social-chat-channel:focus,
.social-chat-input:focus {
    border-color: rgba(79, 140, 255, 0.7);
    background: rgba(16, 22, 38, 0.85);
}

.social-chat-send,
.social-chat-retry {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    border: none;
    background: var(--sw-accent-grad);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.25s ease;
}
.social-chat-send:hover,
.social-chat-retry:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(79, 140, 255, 0.4);
}
.social-chat-retry {
    align-self: flex-start;
    background: rgba(255, 230, 176, 0.16);
    border: 1px solid rgba(255, 230, 176, 0.35);
    color: var(--sw-gold);
}
.social-chat-retry[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Chat bubbles — #social-bubble-layer (inset, overflow hidden)
   The layer is click-through and full-screen (inline styles). chat-ui.js sets
   each bubble's opacity inline every frame (Req 12.4/12.5) and, when a
   world->screen projection is wired, its left/top; with no projection wired in
   the current bootstrap the bubbles fall back to normal flow, so we lay them
   out as a readable stack near the lower-centre of the scene.
   ------------------------------------------------------------------------- */
#social-bubble-layer {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 0 22vh;
}

.social-chat-bubble {
    max-width: min(320px, 70vw);
    padding: 8px 14px;
    border-radius: 16px;
    background: rgba(16, 21, 38, 0.9);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: var(--sw-border-soft);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    color: var(--sw-text);
    font-size: 0.85rem;
    line-height: 1.3;
    text-align: center;
    word-break: break-word;
    overflow-wrap: anywhere;
    /* When a projection is wired, chat-ui.js sets position via inline left/top. */
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* ---------------------------------------------------------------------------
   Emote bar — #social-emote-host (bottom-right), .social-emotes
   ------------------------------------------------------------------------- */
/* The host is a compact corner wrapper: a small toggle button that reveals the
   collapsible emote tray above it, so the tray never covers the scene/portals
   (bootstrap.js collapseEmotePanel builds this structure). column-reverse keeps
   the toggle pinned to the bottom-right corner with the tray popping up above. */
#social-emote-host {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 8px;
    max-width: min(360px, 80vw);
}

/* The circular emote toggle — matches the settings gear's compact glass look. */
.social-emote-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: var(--sw-border);
    background: rgba(12, 16, 28, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--sw-text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.social-emote-toggle:hover { background: rgba(40, 50, 80, 0.8); }
#social-emote-host.social-emotes-open .social-emote-toggle {
    background: rgba(79, 140, 255, 0.55);
    border-color: transparent;
}

/* The collapsible tray body is hidden until the toggle opens it. The id+class
   selector keeps it hidden regardless of the .social-emotes display:flex that
   library-3d.css sets on the same element. */
#social-emote-host .social-emotes-body { display: none; }
#social-emote-host.social-emotes-open .social-emotes-body { display: flex; }

/* .social-emotes gets display:flex + wrap + gap from library-3d.css; dress it
   up as a compact glass tray of buttons. It now lives on the collapsible body. */
.social-emotes {
    justify-content: flex-end;
    padding: 8px;
    border-radius: var(--sw-radius);
    background: var(--sw-panel-bg);
    -webkit-backdrop-filter: blur(var(--sw-blur));
    backdrop-filter: blur(var(--sw-blur));
    border: var(--sw-border);
    box-shadow: var(--sw-shadow);
}

.social-emote-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 52px;
    min-height: 52px;
    padding: 4px;
    border-radius: var(--sw-radius-sm);
    border: var(--sw-border-soft);
    background: var(--sw-panel-soft);
    color: var(--sw-text-dim);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.social-emote-button:hover {
    background: rgba(79, 140, 255, 0.28);
    border-color: rgba(79, 140, 255, 0.5);
    transform: translateY(-1px);
}
.social-emote-button:active { transform: translateY(0); }
.social-emote-glyph { font-size: 1.3rem; line-height: 1; }
.social-emote-label {
    font-size: 0.62rem;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cooldown status line (Requirement 12.10). */
.social-emote-status {
    flex-basis: 100%;
    margin: 2px 0 0;
    text-align: end;
    font-size: 0.72rem;
    color: var(--sw-gold);
    min-height: 0;
}
.social-emote-status:empty { display: none; }

/* ---------------------------------------------------------------------------
   Settings / privacy panel — #social-settings-host (top-right)
   bootstrap.js collapses the rendered panel behind a compact gear (.social-
   settings-gear) that toggles .social-settings-open on the host; the built
   panel content lives in .social-settings-body.
   ------------------------------------------------------------------------- */

/* Flash guard. On admission bootstrap.js flips the host from display:none to
   display:'' a tick BEFORE the async collapse tucks the freshly-built panel
   behind the gear, so the fully-expanded panel would flash in the top-right for
   one frame. The host carries .social-settings from _buildDOM but has no
   .social-settings-gear child until collapseSettingsPanel() runs — hide it in
   that window. :has() is progressive enhancement; browsers without it simply
   keep the pre-existing (rare) flash, so there is no functional regression. */
.social-settings:not(:has(> .social-settings-gear)) {
    visibility: hidden;
}

#social-settings-host {
    /* host is position:absolute (top:56px;right:16px) inline; align the gear. */
    display: flex;
    justify-content: flex-end;
}

.social-settings-gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: var(--sw-border);
    background: rgba(12, 16, 28, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--sw-text);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.social-settings-gear:hover { background: rgba(40, 50, 80, 0.8); }
#social-settings-host.social-settings-open .social-settings-gear {
    background: rgba(79, 140, 255, 0.55);
    border-color: transparent;
    transform: rotate(30deg);
}

/* The collapsible panel body: a proper card that drops below the gear. */
.social-settings-body {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    display: none;
    width: min(320px, 88vw);
    max-height: min(70vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    border-radius: var(--sw-radius);
    scrollbar-width: thin;
    scrollbar-color: rgba(79, 140, 255, 0.55) transparent;
}
#social-settings-host.social-settings-open .social-settings-body { display: block; }

.social-settings-title {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sw-text);
}

/* Toggles (Invisible_Mode, chat opt-out) — a clean two-line label + hint. */
.social-settings-toggle {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px 0;
    border-bottom: var(--sw-border-soft);
    cursor: pointer;
}
.social-settings-toggle input[type="checkbox"] {
    grid-row: 1 / span 2;
    width: 20px;
    height: 20px;
    accent-color: var(--sw-accent);
    cursor: pointer;
}
.social-settings-toggle-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sw-text);
}
.social-settings-toggle-hint {
    grid-column: 2;
    font-size: 0.76rem;
    color: var(--sw-text-muted);
    line-height: 1.3;
}
.social-settings-toggle input:disabled { opacity: 0.5; cursor: default; }

.social-settings-status {
    margin: 8px 0 0;
    min-height: 1em;
    font-size: 0.78rem;
    color: var(--sw-text-dim);
}
.social-settings-status:empty { display: none; }

/* Camera view chooser (third-person default / first-person) — a segmented pair
   of radios styled to match the toggles above. */
.social-settings-camera {
    margin-top: 14px;
    padding-top: 12px;
    border-top: var(--sw-border);
}
.social-settings-camera h3 {
    margin: 0 0 4px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sw-text-muted);
}
.social-settings-camera-hint {
    margin: 0 0 8px;
    font-size: 0.76rem;
    color: var(--sw-text-dim);
    line-height: 1.3;
}
.social-settings-camera-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.social-settings-camera-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(79, 140, 255, 0.28);
    border-radius: 10px;
    font-size: 0.84rem;
    color: var(--sw-text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.social-settings-camera-option:hover { background: rgba(40, 50, 80, 0.6); }
.social-settings-camera-option input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: rgba(79, 140, 255, 0.9);
    cursor: pointer;
}
.social-settings-camera-option:has(input:checked) {
    background: rgba(79, 140, 255, 0.22);
    border-color: rgba(79, 140, 255, 0.6);
}

/* Muted characters / blocked accounts lists. */
.social-settings-list { margin-top: 14px; }
.social-settings-list h3 {
    margin: 0 0 6px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sw-text-muted);
}
.social-settings-entries {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.social-settings-entries li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--sw-radius-xs);
    background: var(--sw-panel-soft);
    border: var(--sw-border-soft);
    font-size: 0.82rem;
}
.social-settings-remove {
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 138, 138, 0.4);
    background: rgba(255, 138, 138, 0.12);
    color: var(--sw-danger);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.social-settings-remove:hover { background: rgba(255, 138, 138, 0.24); }
.social-settings-empty {
    margin: 0;
    font-size: 0.78rem;
    color: var(--sw-text-muted);
    font-style: italic;
}

/* Delete my Social_World data. */
.social-settings-deletion {
    margin-top: 16px;
    padding-top: 14px;
    border-top: var(--sw-border);
}
.social-settings-deletion h3 {
    margin: 0 0 4px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sw-text);
}
.social-settings-deletion-hint {
    margin: 0 0 10px;
    font-size: 0.76rem;
    color: var(--sw-text-muted);
    line-height: 1.3;
}
.social-settings-deletion-button {
    width: 100%;
    padding: 9px 14px;
    border-radius: var(--sw-radius-xs);
    border: 1px solid rgba(255, 138, 138, 0.45);
    background: rgba(255, 138, 138, 0.14);
    color: var(--sw-danger);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.social-settings-deletion-button:hover:not(:disabled) { background: rgba(255, 138, 138, 0.26); }
.social-settings-deletion-button:disabled { opacity: 0.5; cursor: default; }
.social-settings-deletion-confirm {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: var(--sw-gold);
}
.social-settings-deletion-confirm:empty { display: none; }

/* ---------------------------------------------------------------------------
   Target card — #social-target-host (inset, click-through). The card itself
   re-enables pointer events and centres over the scene as a small modal.
   ------------------------------------------------------------------------- */
.social-target-card {
    position: fixed;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: min(340px, 92vw);
    max-height: 86vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
    border-radius: var(--sw-radius);
    box-shadow: var(--sw-shadow-lg);
    pointer-events: auto;
    text-align: center;
}
/* RTL: translate keeps the card centred whichever direction the page runs. */
body.lib3d-rtl .social-target-card { transform: translate(50%, -50%); }

.social-target-card-avatar {
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: rgba(34, 42, 64, 0.8);
    border: var(--sw-border);
    overflow: hidden;
}
.social-target-card-name {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
    word-break: break-word;
}
.social-target-card-bot {
    display: inline-block;
    margin: 0 0 10px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(138, 91, 255, 0.2);
    border: 1px solid rgba(138, 91, 255, 0.4);
    color: #d9c9ff;
    font-size: 0.72rem;
    font-weight: 600;
}

.social-target-card-actions {
    /* display:flex + wrap + gap come from library-3d.css; centre the row. */
    justify-content: center;
    margin-top: 12px;
}
.social-target-card-actions button,
.social-target-card-report-submit,
.social-target-card-report-cancel {
    padding: 8px 16px;
    border-radius: 999px;
    border: var(--sw-border);
    background: var(--sw-panel-soft);
    color: var(--sw-text);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.social-target-card-actions button:hover { transform: translateY(-1px); background: var(--sw-hover); }
.social-target-card-block { border-color: rgba(255, 138, 138, 0.4); color: var(--sw-danger); }
.social-target-card-report { border-color: rgba(255, 230, 176, 0.4); color: var(--sw-gold); }
.social-target-card-dismiss { background: transparent; }

/* Report form (reason list + optional note). */
.social-target-card-report-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: var(--sw-border);
    text-align: start;
}
.social-target-card-report-form[hidden] { display: none; }
.social-target-card-report-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
}
.social-target-card-report-reason-label,
.social-target-card-report-note-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sw-text-dim);
}
.social-target-card-report-reason,
.social-target-card-report-note {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--sw-radius-xs);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--sw-field-bg);
    color: var(--sw-text);
    font-size: 0.82rem;
    outline: none;
}
.social-target-card-report-reason option { color: #0b0f1a; }
.social-target-card-report-note { min-height: 72px; resize: vertical; }
.social-target-card-report-reason:focus,
.social-target-card-report-note:focus { border-color: rgba(79, 140, 255, 0.7); }
.social-target-card-report-submit {
    background: var(--sw-accent-grad);
    border-color: transparent;
    color: #fff;
}
.social-target-card-status {
    margin: 10px 0 0;
    min-height: 1em;
    font-size: 0.78rem;
    color: var(--sw-gold);
}
.social-target-card-status:empty { display: none; }

/* ---------------------------------------------------------------------------
   Entry notice + offline / reconnecting notices — #social-notice-host (inset,
   click-through). The notice re-enables pointer events and centres as a card.
   ------------------------------------------------------------------------- */
#social-notice-host { z-index: 2; }

.social-entry-notice {
    position: fixed;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 26px;
    border-radius: 18px;
    box-shadow: var(--sw-shadow-lg);
    pointer-events: auto;
    font-size: 0.9rem;
    line-height: 1.45;
}
body.lib3d-rtl .social-entry-notice { transform: translate(50%, -50%); }

.social-entry-notice-title {
    margin: 0 0 12px;
    font-size: 1.3rem;
    font-weight: 800;
    background: linear-gradient(90deg, #ffffff, #cfe0ff 55%, #e7c984);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.social-entry-notice p { margin: 0 0 10px; color: var(--sw-text-dim); }
.social-entry-notice-assigned { color: var(--sw-text) !important; font-weight: 600; }

.social-entry-notice-data-items {
    margin: 0 0 12px;
    padding-inline-start: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.social-entry-notice-data-item { color: var(--sw-text); font-size: 0.85rem; }

.social-entry-notice-screening,
.social-entry-notice-retention,
.social-entry-notice-open-report {
    font-size: 0.8rem;
    color: var(--sw-text-muted);
}

.social-entry-notice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.social-entry-notice-studio,
.social-entry-notice-dismiss,
.social-entry-notice-retry {
    flex: 1 1 auto;
    padding: 11px 20px;
    border-radius: 999px;
    border: var(--sw-border);
    background: var(--sw-panel-soft);
    color: var(--sw-text);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
.social-entry-notice-studio {
    background: var(--sw-accent-grad);
    border-color: transparent;
    color: #fff;
}
.social-entry-notice-studio:hover,
.social-entry-notice-retry:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(79, 140, 255, 0.4); }
.social-entry-notice-dismiss:hover { background: rgba(40, 50, 80, 0.8); }

/* Failure / offline / reconnecting variant. */
.social-entry-notice--error {
    border-color: rgba(255, 138, 138, 0.4);
}
.social-entry-notice-failed { color: var(--sw-danger) !important; font-weight: 600; }
.social-entry-notice-retry {
    background: rgba(255, 230, 176, 0.16);
    border-color: rgba(255, 230, 176, 0.4);
    color: var(--sw-gold);
    margin-top: 12px;
}

/* ---------------------------------------------------------------------------
   Safe_Phrase_Mode picker — mounted into #social-chat-host alongside .social-chat
   ------------------------------------------------------------------------- */
.social-safe-phrases {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: var(--sw-radius);
}
.social-safe-phrases-intro {
    margin: 0;
    font-size: 0.82rem;
    color: var(--sw-text-dim);
}
.social-safe-phrases-status {
    margin: 0;
    font-size: 0.78rem;
    color: var(--sw-gold);
}
.social-safe-phrases-status[hidden] { display: none; }

.social-safe-phrases-categories {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(34vh, 300px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(79, 140, 255, 0.55) transparent;
}
.social-safe-phrases-category-title {
    margin: 0 0 6px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sw-text-muted);
}
.social-safe-phrases-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.social-safe-phrase {
    padding: 7px 14px;
    border-radius: 999px;
    border: var(--sw-border-soft);
    background: var(--sw-panel-soft);
    color: var(--sw-text);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.social-safe-phrase:hover { background: var(--sw-hover); transform: translateY(-1px); }
.social-safe-phrases-retry {
    align-self: flex-start;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 230, 176, 0.4);
    background: rgba(255, 230, 176, 0.16);
    color: var(--sw-gold);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.social-safe-phrases-retry[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Occupancy read-out — the hall's existing HUD slot #lib3d-social-hud.
   occupancy.js writes textContent + data-unavailable; it is empty and attribute-
   free until the social layer boots, so a bare #lib3d-social-hud stays hidden
   in single-player and never leaks over the lobby.
   ------------------------------------------------------------------------- */
#lib3d-social-hud { display: none; }
#lib3d-social-hud[data-unavailable] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    top: 60px;
    inset-inline-start: 16px;
    z-index: 29;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(12, 16, 28, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: var(--sw-border);
    color: var(--sw-text);
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}
#lib3d-social-hud[data-unavailable]::before {
    content: "\1F465"; /* 👥 people glyph, decorative */
    font-size: 0.9rem;
    opacity: 0.85;
}
#lib3d-social-hud[data-unavailable="true"] { color: var(--sw-text-muted); }
body.lib3d-rtl #lib3d-social-hud[data-unavailable] { font-family: 'Cairo', 'Noto Kufi Arabic', 'Tajawal', sans-serif; }

/* ---------------------------------------------------------------------------
   Themed scrollbars (WebKit) for the social scroll regions.
   ------------------------------------------------------------------------- */
.social-chat-log::-webkit-scrollbar,
.social-settings-body::-webkit-scrollbar,
.social-safe-phrases-categories::-webkit-scrollbar,
.social-target-card::-webkit-scrollbar,
.social-entry-notice::-webkit-scrollbar { width: 8px; }
.social-chat-log::-webkit-scrollbar-track,
.social-settings-body::-webkit-scrollbar-track,
.social-safe-phrases-categories::-webkit-scrollbar-track,
.social-target-card::-webkit-scrollbar-track,
.social-entry-notice::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
.social-chat-log::-webkit-scrollbar-thumb,
.social-settings-body::-webkit-scrollbar-thumb,
.social-safe-phrases-categories::-webkit-scrollbar-thumb,
.social-target-card::-webkit-scrollbar-thumb,
.social-entry-notice::-webkit-scrollbar-thumb {
    background: rgba(79, 140, 255, 0.45);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.social-chat-log::-webkit-scrollbar-thumb:hover,
.social-settings-body::-webkit-scrollbar-thumb:hover,
.social-safe-phrases-categories::-webkit-scrollbar-thumb:hover,
.social-target-card::-webkit-scrollbar-thumb:hover,
.social-entry-notice::-webkit-scrollbar-thumb:hover { background: rgba(79, 140, 255, 0.75); background-clip: padding-box; }

/* ---------------------------------------------------------------------------
   RTL — mirror the corner surfaces and internal alignment for Arabic.
   The hall sets body.lib3d-rtl (and html/body dir=rtl) for Arabic; the social
   host positions are inline (left/right), so mirror them with !important. The
   individual surfaces also carry dir="rtl" from applyDir, so text flows RTL
   naturally; these rules only handle the box-level corner swap and alignment.
   ------------------------------------------------------------------------- */
body.lib3d-rtl #social-chat-host {
    left: auto !important;
    inset-inline-end: 16px !important;
    right: 16px !important;
}
body.lib3d-rtl #social-emote-host {
    right: auto !important;
    left: 16px !important;
    align-items: flex-start;
}
body.lib3d-rtl #social-emotes,
body.lib3d-rtl .social-emotes { justify-content: flex-start; }
body.lib3d-rtl #social-settings-host {
    right: auto !important;
    left: 16px !important;
    justify-content: flex-start;
}
body.lib3d-rtl .social-settings-body {
    inset-inline-end: auto;
    inset-inline-start: 0;
}
body.lib3d-rtl .social-emote-status { text-align: start; }

/* ---------------------------------------------------------------------------
   Reduced motion — disable non-essential transitions/animations. Chat bubbles
   are already suppressed in JS under this preference (Req 6.13); this covers
   the decorative hover/expand transitions of the chrome.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #social-overlay-root *,
    #lib3d-social-hud {
        transition: none !important;
        animation: none !important;
    }
    #social-settings-host.social-settings-open .social-settings-gear { transform: none; }
    .social-chat-send:hover,
    .social-chat-retry:hover,
    .social-emote-button:hover,
    .social-safe-phrase:hover,
    .social-chat-recommendation:hover,
    .social-target-card-actions button:hover,
    .social-entry-notice-studio:hover,
    .social-entry-notice-retry:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Touch — interactive controls carry a >= 44x44 CSS-px hit target on coarse
   pointers, without overlapping. library-3d.css already sets the 44x44 floor
   and gap for .social-chat-controls / .social-emotes / .social-target-card-
   actions (Requirement 14.3); these rules extend the same floor to the rest of
   the social controls this stylesheet introduces, and keep panels from
   spilling off small screens.
   ------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    .social-settings-gear,
    .social-settings-remove,
    .social-settings-deletion-button,
    .social-chat-recommendation,
    .social-safe-phrase,
    .social-safe-phrases-retry,
    .social-entry-notice-studio,
    .social-entry-notice-dismiss,
    .social-entry-notice-retry {
        box-sizing: border-box;
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }
    .social-emote-button { width: 56px; min-height: 56px; }
    /* Space list rows so their remove buttons keep clear, non-overlapping room. */
    .social-settings-entries { gap: 8px; }
    .social-safe-phrases-list { gap: 10px; }

    /* =====================================================================
       Mobile chat = a collapsible bottom-sheet with a compact launcher.

       The chat box and the touch movement pad both want the bottom of the
       screen. Rather than cram them side by side (either ends up too small),
       we adopt the pattern successful mobile worlds use: the chat DEFAULTS to
       COLLAPSED on touch (bootstrap.js calls setCollapsed(true)), showing only
       a small launcher pill docked bottom-CENTRE — clear of the bottom-left
       movement pad and the bottom-right floor-plan toggle. Tapping it expands
       the chat into a bottom sheet for typing; the header (–) collapses it back
       to the pill, returning the screen to walking. The two touch surfaces are
       therefore never active at once, so they never fight for the same pixels
       (Requirement 14.3 non-overlap).

       The host's inline left:16px / bottom:16px (bootstrap.js) are overridden
       with !important; the admission gating still owns `display`, so the offline
       single-player hall is unaffected (host stays display:none until admitted).
       --------------------------------------------------------------------- */
    #social-chat-host {
        left: auto !important;
        inset-inline-start: calc(14px + env(safe-area-inset-left, 0px)) !important;
        inset-inline-end: auto !important;
        transform: none;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        width: auto;
        max-width: min(90vw, 420px) !important;
    }

    /* In a WING the movement pad owns the bottom-left corner (~152px tall). Lift
       the collapsed launcher so it sits directly ON TOP of the arrow pad, on the
       same side — the visitor's thumb finds "Chat" right above the arrows. In the
       LOBBY there is no pad, so the launcher keeps the low bottom-left corner. */
    body:not(.lib3d-lobby) #social-chat-host.social-chat-collapsed {
        bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Collapsed → the launcher pill: hug its content, fully rounded, centred. */
    #social-chat-host.social-chat-collapsed .social-chat {
        padding: 5px 6px 5px 18px;
        border-radius: 999px;
        background: var(--sw-panel-bg-solid);
        box-shadow: var(--sw-shadow-lg);
    }
    #social-chat-host.social-chat-collapsed .social-chat-header { gap: 12px; }
    #social-chat-host.social-chat-collapsed .social-chat-title { font-size: 0.9rem; text-transform: none; }
    /* A comfortable round toggle so opening the chat is an easy 44px target. */
    #social-chat-host.social-chat-collapsed .social-chat-collapse {
        width: 44px; height: 44px; border-radius: 50%; font-size: 1.3rem;
    }
    /* Keep the help line out of the compact pill. */
    #social-chat-host.social-chat-collapsed .social-chat-help,
    #social-chat-host.social-chat-collapsed .social-chat-talkchip { display: none !important; }

    /* Expanded → a bottom sheet: full width, docked to the very bottom, rounded
       top corners, taller log. It sits above the scene (and the pad) while open. */
    #social-chat-host:not(.social-chat-collapsed) {
        left: 0 !important;
        inset-inline-start: 0 !important;
        inset-inline-end: 0 !important;
        transform: none;
        width: 100%;
        max-width: 100% !important;
        bottom: 0 !important;
    }
    #social-chat-host:not(.social-chat-collapsed) .social-chat {
        border-radius: 18px 18px 0 0;
        padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    }
    #social-chat-host:not(.social-chat-collapsed) .social-chat-log { max-height: 42vh; }

    /* Genre-expert floating speech bubble (expert.js, projected above the
       librarian's head). On a phone it is cramped, drifts off-screen as the head
       moves, and duplicates the expert dialog's log — every greeting/reply is
       also written there via appendLine(). Hide the bubble on touch; the dialog
       carries the text. The bubble's display is set inline, so !important. */
    .expert-bubble { display: none !important; }
}

@media (max-width: 600px) {
    /* #social-chat-host width/position is owned by the coarse-pointer mobile
       chat block above (launcher pill / bottom sheet). */
    .social-chat-log,
    .social-safe-phrases-categories { max-height: 30vh; }
    .social-settings-body { width: min(94vw, 320px); }
    /* Keep the occupancy pill clear of the mobile top HUD (search at top:60px). */
    #lib3d-social-hud[data-unavailable] { top: 106px; }
}