/* Room Structural Layout */
#app {
    width: 100%;
    max-width: 1900px;
    height: 99vh;
    display: flex;
    flex-direction: column;
    padding: 0.1rem;
    gap: 0.25rem;
}

/* Keep the header above wild-mode floating windows */
#app > header {
    position: relative;
    z-index: 10000;
}

main {
    flex: 1;
    display: flex;
    gap: 0.25rem;
    min-height: 0;
    overflow: hidden;
}

/* Header & Room Info */
#header-logo-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
}

#header-logo-text span {
    color: var(--primary);
    font-weight: 800;
}

#call-id-container {
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.room-info-chip {
    background: var(--card-bg);
    padding: 0.4rem 0.8rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lock-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}

.user-info .status-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--text-muted);
}

.map-deploy-btn {
    background: rgba(99, 102, 241, 0.85);
    border: 1px solid rgba(99, 102, 241, 0.5);
    color: white;
    padding: 0 0.5rem;
    height: 20px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.2s;
}

.map-deploy-btn:hover {
    background: rgba(99, 102, 241, 1);
}

.video-wrapper:not(.map-deployable) .map-deploy-btn {
    display: none !important;
}

@media (min-width: 1025px) {
    .mobile-only-btn:not(.map-deploy-btn) {
        display: none !important;
    }
}

.lock-btn.locked {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--danger);
    color: var(--danger);
}

.lock-btn.active {
    background: rgba(59, 130, 246, 0.3);
    border-color: #3b82f6;
    color: #93c5fd;
}

#back-to-lobby-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
}

/* Mood Layers & Selection */
#app-mood-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    transition: background 1.5s ease-in-out;
}

#app-mood-layer.verdant {
    background: radial-gradient(circle at 70% 20%, rgba(250, 204, 21, 0.12) 0%, transparent 50%),
        linear-gradient(to bottom, #064e3b 0%, #065f46 100%);
}

#app-mood-layer.butterflies {
    background: #bae6fd;
}

#app-mood-layer.streaks {
    background: #000;
}

#app-mood-layer.windows {
    /* Base background is the Japanese onsen village, dimmed natively via CSS multiple backgrounds */
    background: linear-gradient(rgba(10, 5, 20, 0.4), rgba(10, 5, 20, 0.4)),
        center top / cover no-repeat url('../assets/onsen_town.png') !important;
    background-attachment: fixed !important;
}

/* Pseudo-element removed. Dimming and glow logic moved strictly to Canvas (windows.js) to prevent flexbox layout glitches. */

/* Pseudo-element removed. Glow logic moved to Canvas (windows.js) for localized window flickering. */

#app-mood-layer.rain,
#app-mood-layer.stormy {
    background: #0f172a;
}

.mood-controls {
    display: flex;
    gap: 0.5rem;
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid var(--glass-border);
}

.mood-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

/* Video Grid & Cards */
.video-container {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    position: relative;
}

.video-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
    grid-auto-flow: row dense;
    /* Helps fill gaps around 2nd-column maxed cards */
    gap: 1rem;
    min-height: 0;
    overflow-y: auto;
}

/* Layout Scaling Systems (1x, 2x, 3x) */
.video-grid.layout-1x {
    grid-template-columns: 1fr;
    gap: 1rem;
}

.video-grid.layout-2x {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.video-grid.layout-3x {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.video-grid.layout-all {
    /* Responsive auto-fitting wrap */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    align-content: start;
    /* Don't stretch row gaps vertically too thin */
}

/* Custom Overlays for denser grids */
.video-grid.layout-2x .overlay,
.video-grid.layout-3x .overlay,
.video-grid.layout-all .overlay {
    padding: 0.4rem;
}

/* Maximized Card logic for new scales */
.layout-2x .video-wrapper.maximized,
.layout-3x .video-wrapper.maximized,
.layout-all .video-wrapper.maximized {
    grid-column: span 2;
    grid-row: span 2;
}

.layout-1x .video-wrapper.maximized {
    grid-column: span 1;
    grid-row: span 1;
}

/* ── Left Layout Mode ────────────────────────────────────────────────────── */

/* Container: narrow fixed left column, flex:none so chat fills the rest */
#video-container.layout-left {
    flex: none !important;
    flex-direction: column !important;
    width: var(--col-width, 220px) !important;
    min-width: 160px;
    max-width: 600px;
    position: relative;
    overflow: visible;
}

/* Card grid: single-column flex list (all cards including game-view) */
#video-container.layout-left .video-grid.layout-left {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    flex: 1;
    gap: 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

/* Cards in left mode: keep 4:3 ratio so they stay proportional */
#video-container.layout-left .video-wrapper {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.2s;
}

/* Col-resizer stays as a sibling in main, acting as the right-edge drag handle */
#video-container.layout-left + #video-col-resizer {
    display: flex;
    align-self: stretch;
    flex-shrink: 0;
}

/* Click-to-maximize: card pops out via fixed to fill the space between
   the column and the chat panel */
#video-container.layout-left .video-wrapper.is-maximized {
    position: fixed;
    left: calc(var(--col-width, 220px) + 12px);
    top: 2px;
    right: calc(var(--chat-width, 350px) + 12px);
    bottom: 2px;
    z-index: 200;
    border-radius: 14px;
    aspect-ratio: unset;
    cursor: default;
}



/* In left mode: push chat-resizer (and chat-panel after it) to the right edge */
#video-container.layout-left ~ #chat-resizer {
    margin-left: auto;
}

/* While a card is maximized, keep both resizer handles above the fixed overlay */
#video-container.layout-left.has-maximized + #video-col-resizer,
#video-container.layout-left.has-maximized ~ #chat-resizer {
    z-index: 201;
    position: relative;
}


/* ── Wild Layout Mode ─────────────────────────────────────────────────────── */

/* Floating window chrome */
.wild-card {
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.08) !important;
    overflow: hidden;
    transition: box-shadow 0.15s;
}

.wild-card:focus-within,
.wild-card:hover {
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255,255,255,0.14) !important;
}

/* Push card overlay below the drag bar so its buttons remain accessible */
.wild-card .overlay {
    top: 26px;
}

/* Push char-controls (Scene/View/Cycle etc.) below the drag bar */
.wild-card .char-controls {
    top: 34px; /* 26px drag bar + 8px original gap */
}

/* Push chat panel content below the drag bar */
.wild-card.chat-panel {
    padding-top: 26px;
    box-sizing: border-box;
}

/* Drag bar — sits above the card's existing overlay */
.wild-drag-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    background: linear-gradient(to bottom, rgba(8, 12, 28, 0.92), rgba(8, 12, 28, 0.7));
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    cursor: grab;
    z-index: 250;
    user-select: none;
}

.wild-drag-bar:active {
    cursor: grabbing;
}

.wild-window-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    pointer-events: none;
}

.wild-grip-icon {
    color: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    pointer-events: none;
}

/* Resize grip — bottom-right corner */
.wild-resize-grip {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    cursor: se-resize;
    z-index: 251;
    /* Diagonal line pattern */
    background-image:
        linear-gradient(135deg,
            transparent 33%, rgba(255,255,255,0.18) 33%, rgba(255,255,255,0.18) 40%,
            transparent 40%, transparent 60%, rgba(255,255,255,0.18) 60%, rgba(255,255,255,0.18) 67%,
            transparent 67%);
    border-radius: 0 0 12px 0;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.wild-resize-grip:hover {
    opacity: 1;
}

/* Utility: hide resizer handles while in wild mode */
.wild-hidden {
    display: none !important;
}


/* ── Video Column Drag Handle ────────────────────────────────────────────── */
.video-col-resizer {
    width: 8px;
    flex-shrink: 0;
    cursor: col-resize;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    transition: background 0.2s;
    touch-action: none;
    align-self: stretch;
}

.video-col-resizer:hover,
.video-col-resizer.resizing {
    background: var(--primary);
}

/* Portrait mobile: disable left mode */
@media (orientation: portrait) {
    #video-container.layout-left {
        flex: 3 !important;
        flex-direction: column !important;
        width: auto !important;
        max-width: none !important;
    }
    #video-container.layout-left .video-grid.layout-left {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        height: auto !important;
    }
    .video-col-resizer {
        display: none !important;
    }
}



.video-wrapper {
    position: relative;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
    /* Enable container queries for tokens/map */
}

.video-wrapper.connecting::after {
    content: "Connecting...";
    position: absolute;
    color: var(--text-muted);
    font-size: 0.8rem;
    animation: pulse 2s infinite;
}



.video-wrapper.is-speaking {
    border-color: var(--theme-speak, var(--success)) !important;
    box-shadow: 0 0 25px var(--theme-speak-glow, rgba(34, 197, 94, 0.6));
}

/* Dynamic theming for audio border based on sheet style */
[data-theme="blue"] {
    --theme-speak: #3b82f6;
    --theme-speak-glow: rgba(59, 130, 246, 0.6);
}

[data-theme="red"] {
    --theme-speak: #ef4444;
    --theme-speak-glow: rgba(239, 68, 68, 0.6);
}

[data-theme="green"] {
    --theme-speak: #10b981;
    --theme-speak-glow: rgba(16, 185, 129, 0.6);
}

[data-theme="purple"] {
    --theme-speak: #8b5cf6;
    --theme-speak-glow: rgba(139, 92, 246, 0.6);
}

[data-theme="gold"] {
    --theme-speak: #f59e0b;
    --theme-speak-glow: rgba(245, 158, 11, 0.6);
}

[data-theme="dark"] {
    --theme-speak: #475569;
    --theme-speak-glow: rgba(71, 85, 105, 0.6);
}

[data-theme="inferno"] {
    --theme-speak: #c51f05;
    --theme-speak-glow: rgba(197, 31, 5, 0.6);
}

[data-theme="depths"] {
    --theme-speak: #00a8e0;
    --theme-speak-glow: rgba(0, 168, 224, 0.6);
}

[data-theme="flesh"] {
    --theme-speak: #f0ae88;
    --theme-speak-glow: rgba(240, 174, 136, 0.6);
}

[data-theme="stone"] {
    --theme-speak: #969891;
    --theme-speak-glow: rgba(150, 152, 145, 0.6);
}

[data-theme="acid"] {
    --theme-speak: #474748;
    --theme-speak-glow: rgba(71, 71, 72, 0.6);
}

[data-theme="petal"] {
    --theme-speak: #e6899a;
    --theme-speak-glow: rgba(230, 137, 154, 0.6);
}

[data-theme="sand"] {
    --theme-speak: #e2b67f;
    --theme-speak-glow: rgba(226, 182, 127, 0.6);
}

[data-theme="blood"] {
    --theme-speak: #bc0024;
    --theme-speak-glow: rgba(188, 0, 36, 0.6);
}

[data-theme="mystic"] {
    --theme-speak: #bc89ff;
    --theme-speak-glow: rgba(188, 137, 255, 0.6);
}


.video-wrapper.maximized {
    grid-column: span 2;
    /* Always span 2 columns as a general rule */
    grid-row: span 2;
    order: -1;
    z-index: 10;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#localVideo {
    transform: scaleX(-1);
}

#local-video-wrapper.is-screen-share #localVideo {
    transform: none;
}

/* Overlays & Status */
.overlay {
    position: absolute;
    inset: 0;
    padding: 0.4rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    z-index: 20;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 40%, transparent 60%, rgba(0, 0, 0, 0.7) 100%);
}

.overlay>* {
    pointer-events: auto;
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.user-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.user-info .label {
    background: transparent;
    border: none;
    color: white;
    font-weight: 800;
    font-size: 1.05rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 1);
    width: 100%;
    outline: none;
    font-family: 'Outfit', sans-serif;
}

.media-indicators {
    display: flex;
    gap: 0.5rem;
}

.indicator {
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}


/* Map Area & Zoom */
.map-area {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.map-surface {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    transform: translate(var(--pan-x, 0px), var(--pan-y, 0px));
    transition: transform 0.1s ease-out;
}

.map-area.is-panning .map-surface {
    transition: none !important;
}

.map-area:active,
.map-area.is-panning {
    cursor: grabbing;
}

.zoom-wrapper {
    width: calc(100cqmin * var(--zoom, 1));
    height: calc(100cqmin * var(--zoom, 1));
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.zoom-slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(10px);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    width: 140px;
    opacity: 0.1;
    transition: all 0.3s ease;
}

.zoom-slider-container:hover {
    opacity: 1;
}

/* Hide zoom slider on touch devices — pinch-to-zoom handles it instead */
@media (pointer: coarse) {
    .zoom-slider-container {
        display: none !important;
    }
}

.map-overlay {
    justify-content: flex-end;
    align-items: flex-end;
    padding: 1.5rem;
    background: transparent;
    pointer-events: none;
}

.map-overlay>* {
    pointer-events: auto;
}

/* Tokens & Tactical Grid */
.grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    mix-blend-mode: difference;
    background-size: 5% 5%;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.75) 1.25px, transparent 1.25px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 1.25px, transparent 1.25px);
}

.grid-on .grid-overlay {
    opacity: 1;
}

.character-token {
    position: absolute;
    width: 5%;
    height: 5%;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    cursor: move;
    z-index: 20;
    background: conic-gradient(#ef4444 var(--progress, 0%), var(--ring-color, #6366f1) 0);
    padding: 3px;
    transform: translate(-50%, -50%);
    transition: left 0.3s ease-out, top 0.3s ease-out, transform 0.2s;
    touch-action: none;
}

.character-token.mobile-dragging {
    transition: none !important;
    pointer-events: none !important;
    z-index: 100 !important;
    opacity: 0.8;
}

.character-token.is-speaking {
    /* Huge outer blur shadow with the active theme color */
    box-shadow: 0 0 20px 5px var(--theme-speak-glow, rgba(34, 197, 94, 0.8)), 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    z-index: 55;
    /* Bring to front while speaking */
}

.character-token.size-2 {
    width: 10%;
    height: 10%;
}

.character-token.size-3 {
    width: 15%;
    height: 15%;
}

.character-token.summoning {
    animation: token-load-pulse 2s infinite ease-in-out;
}

.token-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: #000;
    pointer-events: none;
    box-sizing: border-box;
    border: 3px solid var(--inner-color, transparent);
}

/* Clean Art Mode: Hides tactical elements for a cinematic view */
.map-surface.clean-art-mode .character-token,
.map-surface.clean-art-mode .grid-overlay {
    visibility: hidden;
    pointer-events: none;
}

/* Token Interaction Menu */
.token-menu {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    width: 100px;
}

.character-token.menu-active .token-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}


.color-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.color-swatch {
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid var(--swatch-ring, rgba(255, 255, 255, 0.1));
    background-color: var(--swatch-inner, transparent);
    transition: transform 0.1s, box-shadow 0.1s;
    box-sizing: border-box;
}

.color-swatch:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px white;
    border-color: white;
}

.status-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.status-slider {
    width: 100%;
    height: 4px;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    cursor: pointer;
}

.status-slider::-webkit-slider-thumb {
    appearance: none;
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
}

.status-hp-val {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
    color: white;
    font-size: 0.75rem;
    padding: 2px 4px;
    border-radius: 4px;
    text-align: center;
    width: 42px;
    outline: none;
    font-family: inherit;
}

.status-hp-val:read-only {
    opacity: 0.6;
    cursor: default;
}

.status-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: -2px;
    letter-spacing: 0.05em;
}

.status-values {
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-pipe {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 300;
}


/* Chat & Notes */
.chat-panel {
    background: var(--card-bg);
    background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), var(--chat-bg-url);
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: var(--chat-width, 350px);
    height: 100%;
    /* Fill parent main container */
    min-width: 0;
    max-width: 800px;
    position: relative;
    z-index: 10;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.chat-panel.collapsed {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    width: 0 !important;
    margin-right: -0.5rem;
}

/* Chat Resizer Handle */
.chat-resizer {
    width: 4px;
    margin: 0 -2px;
    cursor: col-resize;
    z-index: 22;
    transition: background 0.2s;
    border-radius: 5px;
    position: relative;
    flex: none;
}

.chat-resizer:hover,
.chat-resizer.resizing {
    background: rgba(255, 255, 255, 0.1);
}

.chat-resizer::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1px;
}

/* Restore Chat Button */
.restore-chat-btn {
    position: fixed;
    right: 1.5rem;
    bottom: 2rem;
    background: var(--primary);
    color: white;
    padding: 0.8rem 1.4rem;
    border-radius: 14px;
    border: none;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
    z-index: 30;
    transition: all 0.2s;
    cursor: pointer;
}

.restore-chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.6);
}

.restore-chat-btn svg {
    transition: transform 0.2s;
}

.restore-chat-btn:hover svg {
    transform: translateX(-3px);
}

#chat-messages {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.message {
    max-width: 85%;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    font-size: 0.85rem;
}

.message.self {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
    color: white;
    margin-left: auto;
}

.message.other {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
}

.message-sender {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
}

.message.self .message-sender {
    color: rgba(255, 255, 255, 0.8);
}

.message-text {
    line-height: 1.4;
    word-wrap: break-word;
    word-break: break-word;
    /* Robust break for long URLs or strings */
}

/* Click-to-select + delete */
.message[data-msg-id] {
    cursor: pointer;
    transition: outline 0.15s ease, box-shadow 0.15s ease;
}

.message.msg-selected {
    outline: 2px solid rgba(239, 68, 68, 0.7);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.25);
    position: relative;
}

.msg-delete-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background: #ef4444;
    border: 2px solid #0f172a;
    border-radius: 50%;
    color: white;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
    transition: transform 0.15s, background 0.15s;
    padding: 0;
}

.msg-delete-btn:hover {
    background: #dc2626;
    transform: scale(1.2);
}

.chat-image {
    max-width: 100%;
    max-height: 400px;
    /* Constrain height to keep chat usable */
    object-fit: contain;
    border-radius: 8px;
    margin-top: 0.5rem;
    cursor: pointer;
    display: block;
    background: rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.chat-image:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.chat-image-caption {
    font-size: 0.85rem;
    color: #ffffff;
    opacity: 0.9;
    font-style: italic;
    margin-top: 0.25rem;
    word-break: break-word;
}

.chat-input-area {
    padding: 1rem;
    border-top: 1px solid var(--glass-border);
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    background: rgba(15, 23, 42, 0.2);
}

#chat-input {
    flex: 1;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    color: white;
    font-size: 0.9rem;
    line-height: 1.5;
    outline: none;
    resize: none;
    max-height: 15rem;
    transition: border-color 0.2s, background 0.2s;
    font-family: inherit;
    overflow-y: auto;
}

#chat-input:focus {
    border-color: var(--primary);
    background: rgba(15, 23, 42, 0.6);
}

#chat-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Notes Panel specific tweaks */
#chat-panel.notes-active .chat-input-area {
    display: none !important;
}

#notes-panel {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    padding: 1rem;
    gap: 0.75rem;
    min-height: 0;
    position: relative;
    z-index: 10;
}

#notes-panel.hidden {
    display: none !important;
}

.notes-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    overflow: hidden;
}

#notes-textarea {
    flex: 1;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.25rem;
    color: #ffffff !important;
    outline: none;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 1rem;
    line-height: 1.6;
    min-height: 0;
    cursor: text;
}

.notes-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.25rem 0;
}

.notes-send-btn {
    background: var(--primary);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.notes-send-btn:hover {
    transform: scale(1.1);
    background: var(--primary-hover, #4f46e5);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

.notes-send-btn:active {
    transform: scale(0.95);
}

#notes-status {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#notes-textarea:focus {
    border-color: var(--primary);
    background: rgba(15, 23, 42, 0.6);
}

#notes-textarea[contenteditable]:empty:before {
    content: attr(placeholder);
    color: #94a3b8;
    opacity: 0.6;
    pointer-events: none;
    display: block;
}

/* ── General Notes Feed ──────────────────────────────────────────────────── */

/* When in General mode the textarea shrinks to a compose bar */
#notes-panel .notes-content:has(#general-notes-feed:not(.hidden)) #notes-textarea {
    flex: none;
    min-height: 60px;
    max-height: 120px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
}

.general-notes-feed {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
    min-height: 0;
    border: 1px solid var(--glass-border);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    background: rgba(15, 23, 42, 0.3);
    padding: 0.75rem;
}

.general-notes-feed.hidden {
    display: none;
}

.notes-feed-loading,
.notes-feed-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 1.5rem;
    opacity: 0.6;
}

/* Individual post card */
.note-entry {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.5;
    position: relative;
    transition: background 0.15s;
}

/* Own posts get a subtle primary tint */
.note-entry.note-entry-own {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.25);
}

.note-entry-header {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.note-entry-author {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.note-entry-time {
    font-size: 0.65rem;
    color: var(--text-muted);
    opacity: 0.7;
    flex: 1;
}

.note-entry-body {
    color: var(--text-main);
    word-break: break-word;
}

/* Delete own post button — hidden until hover */
.note-delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    line-height: 1;
}

.note-entry:hover .note-delete-btn {
    opacity: 0.6;
}

.note-delete-btn:hover {
    color: var(--danger) !important;
    opacity: 1 !important;
}

/* Date-stamp rows inside the general feed */
.notes-date-stamp {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--primary);
    opacity: 0.7;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--glass-border);
    margin: 0.25rem 0;
    letter-spacing: 0.05em;
}

.char-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 0.2rem;
    display: flex;
    gap: 0.3rem;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    transition: all 0.3s ease;
    border: 1px solid var(--glass-border);
}


.video-wrapper:hover .char-controls {
    opacity: 1;
    pointer-events: auto;
}

.char-btn {
    padding: 0 0.5rem;
    height: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
}

.char-btn:hover {
    background: var(--primary);
    transform: scale(1.05);
}

.char-btn.active {
    background: var(--danger) !important;
    color: white !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

.character-portrait {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5;
}

.map-area .character-portrait {
    pointer-events: none;
}

.video-floating-controls {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 0.2rem;
    display: flex;
    gap: 0.3rem;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    transition: all 0.3s ease;
    border: 1px solid var(--glass-border);
}

.video-wrapper:hover .video-floating-controls {
    opacity: 1;
    pointer-events: auto;
}

.control-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.control-btn svg {
    width: 12px;
    height: 12px;
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.control-btn.active {
    background: var(--success);
}

.control-btn.muted {
    background: var(--danger);
}

.control-btn.hangup {
    background: var(--danger);
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    height: 32px;
    width: auto !important;
}

.volume-slider {
    width: 60px;
    height: 4px;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    outline: none;
}

.volume-slider::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
}

.dice-container {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dice-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 0.2rem 0.4rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.header-action-btn.active,
.npc-toggle.active {
    background: var(--danger) !important;
    color: white !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

.dice-btn:hover {
    background: var(--primary);
    color: white;
}

.header-action-btn.active {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
}

#notes-status {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: right;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 0.25rem;
}

.note-tab {
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
}

.note-tab.active {
    background: var(--primary);
    color: white;
}

/* Supplemental Structural Styles */
.video-thumbnail {
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 30%;
    aspect-ratio: 4 / 3;
    height: auto !important;
    border-radius: 8px;
    border: 2px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 100;
    object-fit: cover;
    transition: all 0.3s ease;
}

/* No-cam users: show their selected background in the thumbnail too */
.video-wrapper.camera-error video.video-thumbnail {
    background: inherit;
    background-size: cover;
    background-position: center;
}

.video-thumbnail:hover {
    width: 35%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.save-archive-btn {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--success);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
    cursor: pointer;
    transition: all 0.2s;
}

.save-archive-btn.floating-archive-btn {
    bottom: 2rem;
}

.save-archive-btn:hover {
    background: #16a34a !important;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.5);
}

/* Robust Mobile Responsiveness & Scrolling Reset */
@media (max-width: 768px) {
    #app {
        height: auto !important;
        min-height: 100vh;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        padding: 0.25rem;
        display: block !important;
        /* Break flex layout for mobile stacking */
    }

    main {
        flex-direction: column;
        overflow: visible !important;
        height: auto !important;
        gap: 1rem;
        display: block !important;
    }

    .video-container:not(.hidden) {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        flex: none !important;
    }

    .video-grid {
        display: grid !important;
        grid-template-columns: 1fr;
        /* Default 1-up on mobile */
        gap: 1rem;
        overflow: visible !important;
        height: auto !important;
    }

    /* Mobile Scaling Overrides */
    .video-grid.layout-2x {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .video-grid.layout-3x {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.4rem !important;
    }

    .video-grid.layout-1x {
        grid-template-columns: 1fr !important;
    }

    .video-grid.layout-all {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 0.5rem !important;
    }

    .video-wrapper {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3;
        margin-bottom: 0;
        flex: none !important;
    }

    /* Mobile Maximizing Logic - Spans 2 columns if available */
    .video-wrapper.maximized {
        grid-column: span 2 !important;
        aspect-ratio: auto !important;
        min-height: 250px;
    }

    .chat-panel:not(.hidden) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 600px !important;
        /* Give chat a decent area to breathe */
        margin-top: 1rem;
        position: relative !important;
        display: flex !important;
        flex: none !important;
        overflow: hidden;
        /* Internal chat scroll is still okay */
    }

    .map-area {
        height: 350px !important;
    }

    #header-logo-text {
        font-size: 1.1rem;
    }

    /* Header specific wrapping refinements */
    header {
        justify-content: flex-start !important;
        gap: 0.75rem !important;
        padding-bottom: 0.5rem !important;
    }

    .logo {
        flex: none !important;
        width: 100% !important;
    }

    #call-id-container {
        width: 100% !important;
        padding: 0 !important;
        justify-content: flex-start !important;
        gap: 0.5rem !important;
    }

    .room-info-chip {
        flex-wrap: wrap !important;
    }

    .mood-controls {
        margin-left: 0 !important;
        border-left: none !important;
        padding-left: 0 !important;
    }

    /* Ensure modals don't disappear on scrolling body */
    .modal-overlay {
        position: fixed !important;
    }
}

/* Mobile landscape: restore side-by-side layout with a touch-friendly resizer */
@media (max-width: 768px) and (orientation: landscape) {
    #app {
        height: 100vh !important;
        display: flex !important;
        flex-direction: column;
        overflow: hidden !important;
    }

    main {
        display: flex !important;
        flex-direction: row !important;
        overflow: hidden !important;
        height: 0 !important;
        flex: 1 !important;
        gap: 0 !important;
    }

    .video-container:not(.hidden) {
        flex: 1 !important;
        height: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .video-grid {
        flex: 1 !important;
        overflow-y: auto !important;
        height: 0 !important;
    }

    /* Chat panel: width-controlled, as on desktop */
    .chat-panel:not(.hidden) {
        width: var(--chat-width, 280px) !important;
        max-width: 60vw !important;
        min-width: 0 !important;
        height: 100% !important;
        margin-top: 0 !important;
        flex: none !important;
    }

    /* Show and fatten the resizer for thumb-friendly dragging */
    .chat-resizer:not(.hidden) {
        display: block !important;
        width: 18px !important;
        flex: none !important;
        cursor: col-resize !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border-left: 1px solid var(--glass-border) !important;
        border-right: 1px solid var(--glass-border) !important;
    }

    .chat-resizer::after {
        height: 40px !important;
    }

    .map-area {
        height: 100% !important;
    }
}

@keyframes control-spin {
    from {
        transform: rotate(0deg) scale(1.1);
    }

    to {
        transform: rotate(360deg) scale(1.1);
    }
}

.control-btn#blurBtn.active {
    background: var(--primary);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
}

.control-btn#blurBtn.loading {
    animation: control-spin 1.5s linear infinite;
    opacity: 0.7;
    pointer-events: none;
}

/* Shout Overlay & Button Styles */
.dice-btn.shout-toggle.active {
    background: var(--danger);
    border-color: #ef4444;
    color: white;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.shout-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.shout-overlay:not(.hidden) {
    opacity: 1;
}

.shout-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    transform: scale(0.8) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.shout-overlay:not(.hidden) .shout-content {
    transform: scale(1) translateY(0);
}

/* Shout sender removed per user request */

.shout-text {
    font-family: 'Bangers', sans-serif;
    font-size: 8rem;
    font-weight: normal;
    letter-spacing: 0.05em;
    color: var(--theme-speak, white);
    text-align: center;
    max-width: 90vw;
    line-height: 1.1;
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.9), 0 0 30px var(--theme-speak-glow, rgba(255, 255, 255, 0.4));
    word-wrap: break-word;
}

/* Upward Fade Out Animation */
.shout-overlay.shout-fade-out {
    opacity: 0 !important;
    transition: opacity 2s ease;
}

.shout-overlay.shout-fade-out .shout-content {
    transform: translateY(-100px) scale(1.05) !important;
    transition: transform 2s ease, opacity 2s ease;
}

/* Fullscreen editing mode for Character Prompt */
.local-video.is-editing {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90vw !important;
    height: 90vh !important;
    max-width: 1200px !important;
    z-index: 8000 !important;
    border-radius: 16px !important;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.8), 0 0 40px rgba(99, 102, 241, 0.3) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Hide controls while editing */
.local-video.is-editing>.video-floating-controls,
.local-video.is-editing>.char-controls,
.local-video.is-editing>.overlay {
    display: none !important;
}

/* ── DM Role Styles ────────────────────────────────────────────────────────── */

/* Claim DM button in Settings */
.dm-claim-btn {
    width: 100%;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.dm-claim-btn.dm-active {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
    color: #fbbf24;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);
}

/* DM card wrapper — gold border when DM mode is on */
#local-video-wrapper[data-dm-mode="true"] {
    border-color: #f59e0b !important;
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.4);
}

/* DM Deploy button — amber styling */
.dm-deploy-btn {
    background: rgba(245, 158, 11, 0.85);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #0f172a;
    padding: 0 0.5rem;
    height: 20px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.2s;
}

.dm-deploy-btn:hover {
    background: rgba(245, 158, 11, 1);
}

/* DM Gallery button — subtle gold */
.dm-gallery-btn {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

.dm-gallery-btn:hover {
    background: rgba(245, 158, 11, 0.3);
}

/* DM Gallery Overlay */
.dm-gallery-content {
    max-width: 700px;
    width: 95%;
}

.dm-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.dm-gallery-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 0.04em;
}

.dm-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    min-height: 180px;
    max-height: 400px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 0.75rem;
    border: 1px solid var(--glass-border);
}

.dm-gallery-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
    padding: 3rem 1rem;
}

/* Settings section divider */
.settings-section {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border);
}

.settings-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.settings-section h3 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

/* ── DM Gallery Overlay Layout ──────────────────────────────────────────────── */

.dm-gallery-content {
    max-width: 900px;
    width: 97vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dm-gallery-body {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Panel headers */
.dm-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    gap: 0.5rem;
}

.dm-panel-title {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.dm-panel-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.dm-store-actions {
    display: flex;
    gap: 0.4rem;
}

.dm-action-btn {
    font-size: 0.78rem;
    padding: 0.25rem 0.6rem;
    border-radius: 8px;
}

/* ── Store Panel ────────────────────────────────────────────────────────────── */
.dm-gallery-store-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.dm-image-store-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.6rem;
    overflow-y: auto;
    padding: 0.5rem 0.25rem;
    align-content: start;
}

.dm-store-empty {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 2rem 1rem;
}

/* Image card */
.dm-image-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.dm-image-card:hover {
    border-color: rgba(245,158,11,0.4);
}

.dm-img-thumb-wrap {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.dm-img-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dm-img-actions {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.dm-img-thumb-wrap:hover .dm-img-actions {
    opacity: 1;
}

.dm-img-btn {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(15,23,42,0.85);
    color: white;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.dm-img-btn:hover { background: rgba(30,41,59,0.95); }

.dm-add-btn.in-folder {
    border-color: #f59e0b;
    color: #f59e0b;
}

/* Type toggle inside hover overlay */
.dm-type-toggle-overlay {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(15,23,42,0.85);
}

.dm-type-toggle-overlay .dm-type-btn {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.4rem;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.dm-type-toggle-overlay .dm-type-btn.active {
    background: rgba(245,158,11,0.3);
    color: #fbbf24;
}

.dm-del-btn:hover {
    background: rgba(239,68,68,0.3);
    border-color: #ef4444;
}

.dm-img-meta {
    padding: 0.35rem 0.4rem 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dm-img-title {
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    width: 100%;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
}

.dm-img-title:focus {
    border-bottom-color: rgba(245,158,11,0.5);
}

/* Image/Token type toggle */
.dm-type-toggle {
    display: flex;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

.dm-type-btn {
    flex: 1;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.dm-type-btn.active {
    background: rgba(245,158,11,0.2);
    color: #fbbf24;
}

/* ── Dropzone ───────────────────────────────────────────────────────────────── */
.dm-dropzone {
    border: 2px dashed var(--glass-border);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-bottom: 0.5rem;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}

.dm-dropzone.drag-over {
    border-color: #f59e0b;
    background: rgba(245,158,11,0.07);
    color: #fbbf24;
}

/* ── In-Grid Drop Card ──────────────────────────────────────────────────────── */
.dm-drop-card {
    border-style: dashed !important;
    border-color: rgba(245,158,11,0.25) !important;
    background: transparent !important;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    min-height: 120px;
}

.dm-drop-card:hover,
.dm-drop-card.drag-over {
    border-color: #f59e0b !important;
    background: rgba(245,158,11,0.07) !important;
}

.dm-drop-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 100%;
    min-height: 120px;
    padding: 1rem;
    pointer-events: none;
}

.dm-drop-icon {
    font-size: 1.5rem;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.dm-drop-card:hover .dm-drop-icon,
.dm-drop-card.drag-over .dm-drop-icon {
    opacity: 0.85;
    color: #fbbf24;
}

.dm-drop-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.2s;
}

.dm-drop-card:hover .dm-drop-label,
.dm-drop-card.drag-over .dm-drop-label {
    color: #fbbf24;
}

/* ── Generate Sub-Panel ─────────────────────────────────────────────────────── */
.dm-generate-panel {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.dm-gen-type-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

.dm-gen-type-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.dm-gen-type-opt {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    cursor: pointer;
}

.dm-gen-type-opt input[type="radio"] {
    accent-color: #f59e0b;
}

.dm-gen-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dm-gen-title-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: white;
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    font-family: inherit;
    outline: none;
    width: 100%;
}

.dm-gen-title-input:focus {
    border-color: rgba(245,158,11,0.5);
}

.dm-gen-btns {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* ── Gallery Folder Panel ───────────────────────────────────────────────────── */
.dm-gallery-folder-panel {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--glass-border);
    padding-left: 1rem;
    min-height: 0;
    overflow: hidden;
}

.dm-gallery-folder-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.25rem 0;
}

.dm-folder-empty {
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
    padding: 2rem 0.5rem;
}

.dm-folder-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    transition: border-color 0.2s;
}

.dm-folder-row.dm-folder-current {
    border-color: #f59e0b;
    background: rgba(245,158,11,0.08);
}

.dm-folder-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.dm-folder-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.dm-folder-title {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}

.dm-folder-type {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dm-folder-type.image { color: #60a5fa; }
.dm-folder-type.token { color: #f59e0b; }
.dm-folder-type.character { color: #a78bfa; }
.dm-folder-type.battlemap { color: #34d399; }

.dm-folder-row-actions {
    display: flex;
    gap: 0.2rem;
    flex-shrink: 0;
}

.dm-folder-nav-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    border-radius: 5px;
    color: var(--text-muted);
    font-size: 0.75rem;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.dm-folder-nav-btn:hover:not(:disabled) {
    background: rgba(245,158,11,0.15);
    color: #fbbf24;
}

.dm-folder-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.dm-folder-remove:hover:not(:disabled) {
    background: rgba(239,68,68,0.2);
    color: #ef4444;
}

/* ── DM Card Navigation Overlay ─────────────────────────────────────────────── */
/* Outer overlay spans the full card — no background by default */
.dm-nav-overlay {
    position: absolute;
    inset: 0;
    bottom: 0;   /* keep bottom strip for info */
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 25;
    pointer-events: none;   /* let clicks through to portrait by default */
}

/* Left / right arrow buttons on the sides */
.dm-nav-btn {
    pointer-events: auto;
    background: rgba(15,23,42,0.7);
    border: 1px solid rgba(245,158,11,0.5);
    border-radius: 8px;
    color: #fbbf24;
    font-size: 1.6rem;
    line-height: 1;
    width: 32px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    backdrop-filter: blur(6px);
    flex-shrink: 0;
    margin: 0 0.2rem;
    opacity: 0.85;
}

.dm-nav-btn:hover {
    background: rgba(245,158,11,0.3);
    transform: scale(1.1);
    opacity: 1;
}

/* Center info strip — title + counter pinned to bottom of card */
.dm-nav-info {
    position: absolute;
    bottom: 0;
    left: 36px;
    right: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.3rem 0.5rem 0.4rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.72));
    pointer-events: none;
}

.dm-nav-title {
    font-size: 0.74rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.dm-nav-counter {
    font-size: 0.62rem;
    color: rgba(251,191,36,0.95);
    font-weight: 700;
    letter-spacing: 0.07em;
}

/* ── DM card gold speaking glow (overrides default green) ───────────────────── */
#local-video-wrapper[data-dm-mode="true"].is-speaking {
    border-color: #f59e0b !important;
    box-shadow: 0 0 28px rgba(245, 158, 11, 0.75), 0 0 8px rgba(245, 158, 11, 0.4) !important;
}

/* ── DM Eject (Kick) Button ─────────────────────────────────────────────────── */
/* Hidden on all remote cards by default; shown only when user is DM */
.dm-kick-btn {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.85);
    border: 1px solid rgba(255, 100, 100, 0.5);
    color: white;
    cursor: pointer;
    z-index: 30;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: background 0.15s, transform 0.15s;
    backdrop-filter: blur(4px);
}

.dm-kick-btn:hover {
    background: rgba(239, 68, 68, 1);
    transform: scale(1.15);
}

/* Only visible while the local user is DM, and only on remote cards (not the local wrapper) */
body.is-dm .video-wrapper:not(#local-video-wrapper) .dm-kick-btn {
    display: flex;
}

/* ── Scene Drop Prompt (DM token-vs-map choice) ───────────────────────────── */

.scene-drop-prompt {
    position: fixed;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1rem 1.25rem 1.1rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.04);
    min-width: 170px;
    animation: sdp-in 0.15s ease;
}

@keyframes sdp-in {
    from { opacity: 0; transform: scale(0.92) translateY(-6px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);     }
}

.sdp-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.65rem;
}

.sdp-btns {
    display: flex;
    gap: 0.5rem;
}

.sdp-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: white;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.55rem 0.5rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    font-family: inherit;
}

.sdp-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.sdp-map-btn:hover {
    background: #16a34a;
    border-color: #16a34a;
}

/* ── Token Label ──────────────────────────────────────────────────────────── */

.token-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.68rem;
    font-weight: 700;
    font-family: inherit;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.7);
    letter-spacing: 0.03em;
    pointer-events: none;
    user-select: none;
    text-transform: uppercase;
    text-align: center;
}

.character-token.size-2 .token-label,
.character-token.size-3 .token-label {
    max-width: 180px;
    font-size: 0.75rem;
}