/* ═══════════════════════════════════════════════════════════════════════════
   workspace-avatar-scene.css — Vakio
   Covers: WorkspaceAvatarSelector chip + dialog, SceneEditor panel
   Append to: frontend/assets/css/components.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WORKSPACE AVATAR BAR — chip rendered next to Topics heading
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ws-avatar-bar {
    display: inline-flex;
    align-items: center;
}

.ws-avatar-bar__inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 5px;
    background: var(--surface-raised, #1e2a38);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.1));
    border-radius: 9999px;
    cursor: pointer;
    transition: border-color .18s, background .18s;
    max-width: 220px;
}

    .ws-avatar-bar__inner:hover {
        border-color: var(--color-teal, #14b8a6);
        background: rgba(20,184,166,.06);
    }

/* CRITICAL: fixed 36×36 circle — prevents image expanding to full size */
.ws-avatar-bar__thumb-wrap {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--surface-base, #131f2e);
    cursor: pointer;
    outline: none;
}

.ws-avatar-bar__thumb-wrap--unset {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20,184,166,.1);
    border: 1px dashed var(--color-teal, #14b8a6);
}

/* The <img> constrained inside the 36×36 circle */
.ws-avatar-bar__thumb {
    width: 36px;
    height: 36px;
    max-width: 36px;
    max-height: 36px;
    object-fit: cover;
    object-position: top center;
    display: block;
    border-radius: 50%;
}

.ws-avatar-bar__thumb--placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-teal, #14b8a6);
}

.ws-avatar-bar__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ws-avatar-bar__name {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    line-height: 1.2;
}

.ws-avatar-bar__name--muted {
    color: var(--text-muted, #94a3b8);
    font-weight: 400;
}

.ws-avatar-bar__change-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: .7rem;
    color: var(--color-teal, #14b8a6);
    cursor: pointer;
    text-align: left;
    line-height: 1;
    white-space: nowrap;
    transition: opacity .15s;
}

    .ws-avatar-bar__change-btn:hover {
        opacity: .7;
        text-decoration: underline;
    }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WORKSPACE TOPICS HEADING — Avatar chip row
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.workspace-topics-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

    .workspace-topics-bar h2 {
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

/* Compact avatar chip */
.was-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px 6px 6px;
    background: var(--surface-raised, #1e2a38);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.1));
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s;
    max-width: 220px;
    outline: none;
}

    .was-chip:hover,
    .was-chip:focus-visible {
        border-color: var(--color-teal, #14b8a6);
        background: var(--surface-hover, rgba(20,184,166,.06));
        box-shadow: 0 0 0 3px rgba(20,184,166,.15);
    }

.was-chip__thumb-wrap {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-base, #131f2e);
}

.was-chip__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.was-chip__thumb--initials,
.was-chip__thumb--placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    color: var(--color-teal, #14b8a6);
    background: rgba(20,184,166,.12);
}

.was-chip__label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.was-chip__name {
    font-size: var(--text-sm, .875rem);
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.was-chip__sub {
    font-size: var(--text-xs, .75rem);
    color: var(--text-muted, #94a3b8);
}

.was-chip__chevron {
    flex-shrink: 0;
    color: var(--text-muted, #94a3b8);
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   AVATAR SELECTOR DIALOG
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.was-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}

.was-overlay--visible {
    opacity: 1;
    pointer-events: all;
}

.was-dialog {
    background: var(--surface-raised, #1e2a38);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.1));
    border-radius: var(--radius-xl, 16px);
    width: 100%;
    max-width: 960px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.6);
    animation: was-slide-in .28s cubic-bezier(.16,1,.3,1) both;
}

@keyframes was-slide-in {
    from {
        transform: translateY(24px) scale(.97);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Header */
.was-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6) var(--space-4);
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.08));
    flex-shrink: 0;
}

.was-dialog__title {
    font-size: var(--text-xl, 1.25rem);
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    margin: 0 0 4px;
}

.was-dialog__sub {
    font-size: var(--text-xs, .75rem);
    color: var(--text-muted, #94a3b8);
    margin: 0;
}

.was-dialog__close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: color .15s, background .15s;
}

    .was-dialog__close:hover {
        color: var(--text-primary);
        background: var(--surface-hover);
    }

/* Body: two-column */
.was-dialog__body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 0;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

@media (max-width: 768px) {
    .was-dialog__body {
        grid-template-columns: 1fr;
    }
}

/* Left panel */
.was-left-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-4) var(--space-6);
    overflow: hidden;
    border-right: 1px solid var(--border-subtle, rgba(255,255,255,.06));
}

.was-search-row {
    flex-shrink: 0;
}

.was-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.was-search-icon {
    position: absolute;
    left: var(--space-3);
    color: var(--text-muted);
    pointer-events: none;
}

.was-search-input {
    width: 100%;
    padding: 9px var(--space-3) 9px 38px;
    background: var(--surface-base, #131f2e);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.1));
    border-radius: var(--radius-md, 8px);
    color: var(--text-primary, #f1f5f9);
    font-size: var(--text-sm);
    outline: none;
    transition: border-color .15s;
}

    .was-search-input:focus {
        border-color: var(--color-teal, #14b8a6);
    }

    .was-search-input::placeholder {
        color: var(--text-muted);
    }

/* Filters */
.was-filters {
    flex-shrink: 0;
}

.was-filters-inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-start;
}

.was-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.was-filter-label {
    font-size: var(--text-xs, .75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, #94a3b8);
}

.was-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.was-chip-btn {
    padding: 4px 10px;
    background: var(--surface-base, #131f2e);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.1));
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
    text-transform: capitalize;
}

    .was-chip-btn:hover {
        border-color: var(--color-teal);
        color: var(--color-teal);
    }

.was-chip-btn--active {
    background: rgba(20,184,166,.15);
    border-color: var(--color-teal, #14b8a6);
    color: var(--color-teal, #14b8a6);
    font-weight: 600;
}

.was-lang-select {
    padding: 5px var(--space-3);
    background: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-xs);
    cursor: pointer;
    outline: none;
}

    .was-lang-select:focus {
        border-color: var(--color-teal);
    }

/* Grid area */
.was-grid-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.was-grid {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

    .was-grid::-webkit-scrollbar {
        width: 4px;
    }

    .was-grid::-webkit-scrollbar-thumb {
        background: var(--border-subtle);
        border-radius: 2px;
    }

.was-grid-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 180px;
    gap: var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

.was-grid-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
}

.was-grid-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--space-2);
    padding-bottom: var(--space-2);
}

/* Avatar card in grid */
.was-avatar-card {
    background: var(--surface-base, #131f2e);
    border: 2px solid var(--border-subtle, rgba(255,255,255,.08));
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s, transform .14s;
    outline: none;
}

    .was-avatar-card:hover,
    .was-avatar-card:focus-visible {
        border-color: var(--color-teal);
        transform: translateY(-2px);
        box-shadow: 0 0 0 3px rgba(20,184,166,.18);
    }

.was-avatar-card--selected {
    border-color: var(--color-teal) !important;
    box-shadow: 0 0 0 3px rgba(20,184,166,.25) !important;
}

.was-avatar-card__thumb {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: var(--surface-raised);
    overflow: hidden;
}

    .was-avatar-card__thumb img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s ease;
    }

.was-avatar-card:hover .was-avatar-card__thumb img {
    transform: scale(1.04);
}

.was-avatar-card__initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-teal);
}

.was-default-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--color-teal);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 5px;
    border-radius: var(--radius-full);
}

.was-avatar-card__info {
    padding: var(--space-1) var(--space-2) var(--space-2);
    text-align: center;
}

.was-avatar-card__name {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.was-avatar-card__meta {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: capitalize;
}

/* Pagination */
.was-pagination {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.was-page-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    transition: all .15s;
}

    .was-page-btn:hover:not(:disabled) {
        border-color: var(--color-teal);
        color: var(--color-teal);
    }

    .was-page-btn:disabled {
        opacity: .35;
        cursor: not-allowed;
    }

.was-page-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Right panel */
.was-right-panel {
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    gap: var(--space-4);
    overflow-y: auto;
}

.was-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 100%;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.was-video-wrap {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-base);
    border: 1px solid var(--border-subtle);
    aspect-ratio: 9/16;
}

.was-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.was-no-video {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.was-avatar-meta {
    padding: var(--space-1) 0;
}

.was-meta-name {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.was-meta-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 var(--space-1);
}

.was-meta-tag {
    padding: 3px 8px;
    background: rgba(20,184,166,.1);
    border: 1px solid rgba(20,184,166,.25);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--color-teal);
    text-transform: capitalize;
}

.was-meta-langs {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0;
}

.was-meta-hint {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
    margin: var(--space-8) 0 0;
}

/* Footer */
.was-dialog__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,.08));
    flex-shrink: 0;
    flex-wrap: wrap;
}

.was-save-error {
    font-size: var(--text-xs);
    color: var(--color-danger, #ef4444);
    flex: 1;
    margin: 0;
}

/* Misc */
.was-filter-loading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.was-filter-error {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.was-grid-error {
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding: var(--space-4);
    text-align: center;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCENE EDITOR PANEL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.se-editor {
    padding: var(--space-5);
    background: var(--surface-base, #131f2e);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.1));
    border-radius: var(--radius-lg, 12px);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    animation: se-fade-in .2s ease both;
}

@keyframes se-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.se-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.se-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.se-icon {
    color: var(--color-teal, #14b8a6);
}

.se-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
}

.se-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    background: var(--surface-raised);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.se-restore-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
}

    .se-restore-btn:hover {
        border-color: var(--color-teal);
        color: var(--color-teal);
    }

/* Scenes list */
.se-scenes-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.se-scene {
    background: var(--surface-raised, #1e2a38);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.08));
    border-radius: var(--radius-md, 8px);
    padding: var(--space-4);
}

.se-scene-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.se-scene-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-teal, #14b8a6);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.se-scene-info {
    flex: 1;
}

.se-scene-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.se-delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: color .15s, background .15s;
    flex-shrink: 0;
}

    .se-delete-btn:hover {
        color: var(--color-danger, #ef4444);
        background: rgba(239,68,68,.1);
    }

.se-scene-narration {
    font-size: var(--text-sm);
    color: var(--text-secondary, #cbd5e1);
    line-height: 1.6;
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: rgba(255,255,255,.03);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border-subtle);
}

/* Instruction textarea */
.se-instruction-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.se-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
}

.se-optional {
    font-weight: 400;
    opacity: .7;
}

.se-textarea-wrap {
    position: relative;
}

.se-textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    padding-right: 48px;
    background: var(--surface-base, #131f2e);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.1));
    border-radius: var(--radius-md);
    color: var(--text-primary, #f1f5f9);
    font-size: var(--text-sm);
    line-height: 1.5;
    resize: vertical;
    min-height: 60px;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}

    .se-textarea:focus {
        border-color: var(--color-teal, #14b8a6);
    }

    .se-textarea::placeholder {
        color: var(--text-muted);
    }

    .se-textarea[aria-invalid="true"] {
        border-color: var(--color-danger, #ef4444);
    }

.se-char-count {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 10px;
    color: var(--text-muted);
    pointer-events: none;
}

/* Add scene */
.se-add-section {
    flex-shrink: 0;
}

.se-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: none;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
    width: 100%;
    justify-content: center;
}

    .se-add-btn:hover:not(.se-add-btn--disabled) {
        border-color: var(--color-teal);
        color: var(--color-teal);
        background: rgba(20,184,166,.04);
    }

.se-add-btn--disabled {
    opacity: .4;
    cursor: not-allowed;
}

.se-add-maxed {
    font-size: var(--text-xs);
    opacity: .7;
}

.se-add-input-wrap {
    margin-top: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.se-add-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* Footer */
.se-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,.06));
    flex-wrap: wrap;
}

.se-global-error {
    font-size: var(--text-xs);
    color: var(--color-danger, #ef4444);
    flex: 1;
    margin: 0;
}

/* Regenerating state */
.se-regenerating {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12, 3rem) var(--space-6);
    gap: var(--space-3);
    text-align: center;
}

.se-regenerating__label {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.se-regenerating__sub {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCENE EDITOR PANEL  — BEM classes used by SceneEditorPanel.js
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.scene-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    animation: se-fade-in .2s ease both;
}

.scene-editor__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.08));
}

.scene-editor__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.scene-editor__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
    min-width: 0;
}

.scene-editor__header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.scene-editor__hint {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.scene-editor__scenes {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.scene-editor__add-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.scene-editor__add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
}

    .scene-editor__add-btn:hover:not([disabled]) {
        border-color: var(--color-teal);
        color: var(--color-teal);
        background: rgba(20,184,166,.04);
    }

    .scene-editor__add-btn[disabled] {
        opacity: .4;
        cursor: not-allowed;
    }

.scene-editor__cap-msg {
    font-size: var(--text-xs);
    opacity: .7;
}

.scene-editor__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,.06));
    flex-wrap: wrap;
}

.scene-editor__change-count {
    flex: 1;
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-body);
}

.scene-editor__error {
    flex: 1;
    font-size: var(--text-xs);
}

/* ── Scene blocks ──────────────────────────────────────────────────────────── */

.scene-block {
    background: var(--surface-raised, #1e2a38);
    border: 1px solid var(--border-subtle, rgba(255,255,255,.08));
    border-radius: var(--radius-md, 8px);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color .15s, opacity .15s;
}

.scene-block--deleted {
    opacity: .45;
    border-style: dashed;
}

.scene-block__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.scene-block__num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-teal, #14b8a6);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.scene-block__label {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scene-block__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

.scene-block__delete-btn,
.scene-block__restore-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all .15s;
}

.scene-block__delete-btn {
    color: var(--color-danger, #ef4444);
    opacity: 0.65;
    border: 1px solid rgba(239,68,68,0.20);
}

    .scene-block__delete-btn:hover {
        color: var(--color-danger, #ef4444);
        background: rgba(239,68,68,.1);
        border-color: rgba(239,68,68,0.40);
        opacity: 1;
    }

.scene-block__restore-btn {
    color: var(--color-teal);
}

    .scene-block__restore-btn:hover {
        background: rgba(20,184,166,.1);
    }

.scene-block__narration {
    font-size: var(--text-sm);
    color: var(--text-secondary, #cbd5e1);
    line-height: 1.6;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: rgba(255,255,255,.03);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border-subtle);
}

.scene-block__instruction-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scene-block__inst-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
}

.scene-block__inst-optional {
    font-weight: 400;
    opacity: .7;
}

.scene-block__inst-input {
    width: 100%;
    resize: vertical;
    min-height: 60px;
    box-sizing: border-box;
}

.scene-block__char-count {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    font-family: var(--font-body);
}

.scene-block__char-count--warn {
    color: var(--color-warning, #f59e0b);
}

/* ── Add-scene blocks ──────────────────────────────────────────────────────── */

.scene-add-block {
    padding: var(--space-4);
    background: var(--surface-raised, #1e2a38);
    border: 1px solid var(--color-teal, #14b8a6);
    border-radius: var(--radius-md, 8px);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.scene-add-block__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-teal);
}

.scene-add-block__input {
    width: 100%;
    resize: vertical;
    min-height: 60px;
    box-sizing: border-box;
}

/* ── Edit-tab slot ─────────────────────────────────────────────────────────── */

.tc-edit-scene-slot {
    /* Fills the active tab pane; SceneEditorPanel renders inside */
}

/* Pencil edit icon on topic capsule */
.tc-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
    margin-left: var(--space-2);
}

    .tc-edit-btn:hover {
        border-color: var(--color-teal);
        color: var(--color-teal);
    }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   AVATAR PICKER DIALOG  (avp-*)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.avp-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(10, 8, 24, 0.82);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4, 16px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}

.avp-overlay--visible {
    opacity: 1;
    pointer-events: all;
}

.avp-dialog {
    background: var(--surface-card);
    border: 1px solid var(--surface-border-mid);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 920px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.7), 0 0 0 1px var(--surface-border);
    animation: avp-in .28s cubic-bezier(.16,1,.3,1) both;
}

@keyframes avp-in {
    from {
        transform: translateY(20px) scale(.97);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Header */
.avp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--surface-border);
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--surface-card) 0%, var(--surface-card-hover) 100%);
}

.avp-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.avp-subtitle {
    font-size: .75rem;
    color: var(--text-muted);
    margin: 0;
}

.avp-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    line-height: 1;
    transition: color .15s, background .15s;
    flex-shrink: 0;
}

    .avp-close:hover {
        color: var(--text-primary);
        background: var(--surface-elevated);
    }

/* Body — two columns */
.avp-body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 0;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

@media (max-width: 768px) {
    .avp-body {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
}

/* Left panel */
.avp-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 16px 12px 24px;
    overflow: hidden;
    border-right: 1px solid var(--surface-border);
}

/* Search */
.avp-search-row {
    flex-shrink: 0;
}

.avp-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.avp-search-icon {
    position: absolute;
    left: 10px;
    color: var(--text-muted);
    pointer-events: none;
}

.avp-search-input {
    width: 100%;
    padding: 9px 12px 9px 36px;
    background: var(--surface-bg);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: .875rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}

    .avp-search-input:focus {
        border-color: var(--color-teal);
        box-shadow: 0 0 0 3px var(--color-teal-glow);
    }

    .avp-search-input::placeholder {
        color: var(--text-muted);
    }

/* Filters */
.avp-filters {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.avp-filters-loading {
    font-size: .75rem;
    color: var(--text-muted);
}

.avp-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.avp-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.avp-filter-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.avp-filter-select {
    padding: 5px 10px;
    background: var(--surface-bg);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: .75rem;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
}

    .avp-filter-select:focus {
        border-color: var(--color-teal);
    }

/* Grid area */
.avp-grid-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    gap: 8px;
}

.avp-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    overflow-y: auto;
    align-content: start;
    padding-right: 4px;
}

    .avp-grid::-webkit-scrollbar {
        width: 4px;
    }

    .avp-grid::-webkit-scrollbar-thumb {
        background: var(--surface-border-mid);
        border-radius: 2px;
    }

.avp-grid-empty,
.avp-grid-loading,
.avp-grid-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: .875rem;
    text-align: center;
    gap: 8px;
}

.avp-grid-error {
    color: var(--color-danger);
}

/* Avatar card */
.avp-card {
    background: var(--surface-bg);
    border: 2px solid var(--surface-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .18s, transform .14s, box-shadow .18s;
    outline: none;
}

    .avp-card:hover,
    .avp-card:focus-visible {
        border-color: var(--color-teal);
        transform: translateY(-2px);
        box-shadow: 0 0 0 3px var(--color-teal-glow);
    }

.avp-card--selected {
    border-color: var(--color-teal) !important;
    box-shadow: 0 0 0 3px var(--color-teal-glow), 0 4px 16px rgba(0,180,162,.2) !important;
}

.avp-card__thumb-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: var(--surface-card-hover);
    overflow: hidden;
}

.avp-card__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.avp-card:hover .avp-card__thumb {
    transform: scale(1.04);
}

.avp-card__thumb--placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-teal);
    background: linear-gradient(135deg, var(--surface-card) 0%, rgba(0,180,162,.08) 100%);
}

.avp-card__badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--color-teal);
    color: var(--color-navy);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: var(--radius-pill);
}

.avp-card__info {
    padding: 6px 6px 8px;
    text-align: center;
}

.avp-card__name {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avp-card__meta {
    display: block;
    font-size: .65rem;
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: capitalize;
}

/* Pagination */
.avp-pagination {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 4px;
}

.avp-page-btn {
    width: 28px;
    height: 28px;
    background: var(--surface-bg);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    font-size: .875rem;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .avp-page-btn:hover:not(:disabled) {
        border-color: var(--color-teal);
        color: var(--color-teal);
        background: var(--color-teal-glow);
    }

    .avp-page-btn:disabled {
        opacity: .35;
        cursor: not-allowed;
    }

.avp-page-info {
    font-size: .75rem;
    color: var(--text-muted);
}

/* Right panel — preview */
.avp-right {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    overflow-y: auto;
    border-left: 1px solid var(--surface-border);
    background: linear-gradient(180deg, var(--surface-card-hover) 0%, var(--surface-card) 100%);
}

.avp-preview-video-wrap {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-bg);
    border: 1px solid var(--surface-border);
    aspect-ratio: 9/16;
}

.avp-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avp-no-preview {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: .75rem;
    text-align: center;
}

.avp-preview-meta {
    padding: 4px 0;
}

.avp-preview-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.avp-preview-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 4px;
}

.avp-preview-tag {
    padding: 3px 8px;
    background: var(--color-teal-glow);
    border: 1px solid rgba(0,180,162,.3);
    border-radius: var(--radius-pill);
    font-size: .7rem;
    color: var(--color-teal);
    text-transform: capitalize;
}

.avp-preview-langs {
    font-size: .7rem;
    color: var(--text-muted);
    margin: 0;
}

.avp-preview-hint {
    font-size: .8rem;
    color: var(--text-muted);
    text-align: center;
    margin: 24px 0 0;
}

/* Footer */
.avp-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--surface-border);
    flex-shrink: 0;
    flex-wrap: wrap;
    background: var(--surface-card);
}

.avp-save-error {
    font-size: .75rem;
    color: var(--color-danger);
    flex: 1;
    margin: 0;
}

/* Utility */
.hidden {
    display: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIGHT THEME OVERRIDES — workspace-avatar-scene
   All dark surface/border/text fallbacks replaced with white-card palette.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Avatar bar chip ──────────────────────────────────────────────────────── */

[data-theme="light"] .ws-avatar-bar__inner {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.14);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

[data-theme="light"] .ws-avatar-bar__inner:hover {
    border-color: #0D9488;
    background: rgba(13,148,136,0.04);
}

[data-theme="light"] .ws-avatar-bar__thumb-wrap {
    background: #F3F4F6;
}

[data-theme="light"] .ws-avatar-bar__name {
    color: #111827;
}

[data-theme="light"] .ws-avatar-bar__name--muted {
    color: #6B7280;
}

[data-theme="light"] .ws-avatar-bar__caret {
    color: #6B7280;
}

/* ── Compact chip (was-chip) ─────────────────────────────────────────────── */

[data-theme="light"] .was-chip {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.14);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

[data-theme="light"] .was-chip:hover,
[data-theme="light"] .was-chip:focus-visible {
    border-color: #0D9488;
    background: rgba(13,148,136,0.04);
    box-shadow: 0 0 0 3px rgba(13,148,136,0.14);
}

[data-theme="light"] .was-chip__thumb-wrap {
    background: #F3F4F6;
}

[data-theme="light"] .was-chip__name {
    color: #111827;
}

[data-theme="light"] .was-chip__sub {
    color: #6B7280;
}

[data-theme="light"] .was-chip__chevron {
    color: #6B7280;
}

/* ── Avatar selector dialog ──────────────────────────────────────────────── */

[data-theme="light"] .was-dialog {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.10);
    box-shadow: 0 24px 64px rgba(0,0,0,0.18);
}

[data-theme="light"] .was-dialog__header {
    border-bottom-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .was-dialog__title {
    color: #111827;
}

[data-theme="light"] .was-dialog__sub {
    color: #6B7280;
}

[data-theme="light"] .was-left-panel {
    border-right-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .was-search-input {
    background: #F9FAFB;
    border-color: rgba(0,0,0,0.14);
    color: #111827;
}

[data-theme="light"] .was-search-input:focus {
    border-color: #0D9488;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.14);
}

[data-theme="light"] .was-chip-btn {
    background: #F3F4F6;
    border-color: rgba(0,0,0,0.12);
    color: #374151;
}

[data-theme="light"] .was-chip-btn:hover {
    border-color: #0D9488;
    color: #0D9488;
}

[data-theme="light"] .was-chip-btn--active {
    background: rgba(13,148,136,0.10);
    border-color: #0D9488;
    color: #0D9488;
}

[data-theme="light"] .was-lang-select {
    background: #F9FAFB;
    border-color: rgba(0,0,0,0.14);
    color: #111827;
}

[data-theme="light"] .was-avatar-card {
    background: #F9FAFB;
    border-color: rgba(0,0,0,0.10);
}

[data-theme="light"] .was-avatar-card:hover,
[data-theme="light"] .was-avatar-card:focus-visible {
    border-color: #0D9488;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.14);
}

[data-theme="light"] .was-avatar-card--selected {
    border-color: #0D9488 !important;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.20) !important;
}

[data-theme="light"] .was-avatar-card__name {
    color: #111827;
}

[data-theme="light"] .was-avatar-card__meta {
    color: #6B7280;
}

[data-theme="light"] .was-page-btn {
    background: #F3F4F6;
    border-color: rgba(0,0,0,0.12);
    color: #6B7280;
}

[data-theme="light"] .was-page-btn:hover:not(:disabled) {
    border-color: #0D9488;
    color: #0D9488;
}

[data-theme="light"] .was-dialog__footer {
    border-top-color: rgba(0,0,0,0.08);
    background: #FFFFFF;
}

/* ── Scene editor panel ──────────────────────────────────────────────────── */

[data-theme="light"] .se-editor {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.10);
}

[data-theme="light"] .se-scene {
    background: #F9FAFB;
    border-color: rgba(0,0,0,0.10);
}

[data-theme="light"] .se-scene-narration {
    background: rgba(0,0,0,0.03);
    border-left-color: rgba(0,0,0,0.14);
}

[data-theme="light"] .se-textarea {
    background: #F9FAFB;
    border-color: rgba(0,0,0,0.14);
    color: #111827;
}

[data-theme="light"] .se-textarea:focus {
    border-color: #0D9488;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.14);
}

[data-theme="light"] .se-add-input-wrap {
    background: #F3F4F6;
    border-color: rgba(0,0,0,0.10);
}

[data-theme="light"] .se-footer {
    border-top-color: rgba(0,0,0,0.08);
}

/* ── Scene editor BEM classes (SceneEditorPanel.js) ─────────────────────── */

[data-theme="light"] .scene-editor__header {
    border-bottom-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .scene-block {
    background: #F9FAFB;
    border-color: rgba(0,0,0,0.10);
}

[data-theme="light"] .scene-block__narration {
    background: rgba(0,0,0,0.03);
    border-left-color: rgba(0,0,0,0.14);
    color: #374151;
}

[data-theme="light"] .scene-add-block {
    background: #F3F4F6;
    border-color: #0D9488;
}

[data-theme="light"] .scene-editor__footer {
    border-top-color: rgba(0,0,0,0.08);
}

/* ── avp-* (AvatarPickerDialog — newer variant) ─────────────────────────── */

[data-theme="light"] .avp-dialog {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.10);
    box-shadow: 0 24px 64px rgba(0,0,0,0.16);
}

[data-theme="light"] .avp-header {
    border-bottom-color: rgba(0,0,0,0.08);
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
}

[data-theme="light"] .avp-title {
    color: #111827;
}

[data-theme="light"] .avp-subtitle {
    color: #6B7280;
}

[data-theme="light"] .avp-left {
    border-right-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .avp-search-input {
    background: #F9FAFB;
    border-color: rgba(0,0,0,0.14);
    color: #111827;
}

[data-theme="light"] .avp-search-input:focus {
    border-color: #0D9488;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.14);
}

[data-theme="light"] .avp-filter-select {
    background: #F9FAFB;
    border-color: rgba(0,0,0,0.14);
    color: #111827;
}

[data-theme="light"] .avp-card {
    background: #F9FAFB;
    border-color: rgba(0,0,0,0.10);
}

[data-theme="light"] .avp-card:hover,
[data-theme="light"] .avp-card:focus-visible {
    border-color: #0D9488;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.14);
}

[data-theme="light"] .avp-card--selected {
    border-color: #0D9488 !important;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.20) !important;
}

[data-theme="light"] .avp-card__name {
    color: #111827;
}

[data-theme="light"] .avp-card__meta {
    color: #6B7280;
}

[data-theme="light"] .avp-page-btn {
    background: #F3F4F6;
    border-color: rgba(0,0,0,0.12);
    color: #6B7280;
}

[data-theme="light"] .avp-page-btn:hover:not(:disabled) {
    border-color: #0D9488;
    color: #0D9488;
}

[data-theme="light"] .avp-right {
    border-left-color: rgba(0,0,0,0.08);
    background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
}

[data-theme="light"] .avp-preview-video-wrap {
    background: #F3F4F6;
    border-color: rgba(0,0,0,0.10);
}

[data-theme="light"] .avp-preview-name {
    color: #111827;
}

[data-theme="light"] .avp-footer {
    border-top-color: rgba(0,0,0,0.08);
    background: #FFFFFF;
}