/* ============================================================================
   RocketBuzz — UI styles
   Design notes:
   - Large readable type, large hit areas, plenty of breathing room.
   - No hover shadows / scale tricks. Hover only changes tone.
   - Buttons animate from within (gradient sweep + spinner) while loading.
   ============================================================================ */

:root {
    --bg:          #0f1115;
    --bg-soft:     #171a21;
    --bg-elev:     #1f232c;
    --line:        #2a2f3a;
    --text:        #f1f3f7;
    --text-soft:   #a3a9b8;
    --text-mute:   #6a7184;

    --accent:      #ff5a1f;
    --accent-2:    #ff8b3d;
    --accent-soft: rgba(255, 90, 31, 0.15);

    --secondary:   #5b8cff;
    --secondary-2: #7aa4ff;

    --radius:      14px;
    --radius-sm:   10px;
    --shadow-line: 0 0 0 1px var(--line);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }

/* ---- Layout ------------------------------------------------------------- */

.rb-app {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
}

.rb-content {
    padding: 40px 48px;
    max-width: 1600px;
    width: 100%;
}

/* ---- Sidebar ------------------------------------------------------------ */

.rb-sidebar {
    background: var(--bg-soft);
    border-right: 1px solid var(--line);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.rb-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px;
}

.rb-logo-mark {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.5px;
}

.rb-logo-text {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.rb-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rb-nav-item {
    display: block;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    transition: background-color 120ms ease, color 120ms ease;
}
.rb-nav-item:hover     { background: var(--bg-elev); color: var(--text); }
.rb-nav-item.is-active { background: var(--accent-soft); color: var(--accent-2); }

/* ---- Sidebar project switcher --------------------------------------- */

.rb-projects-block {
    margin-top: 8px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
}
.rb-new-prj-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background-color 120ms ease;
}
.rb-new-prj-btn:hover { background: var(--accent-2); }
.rb-new-prj-btn .material-icons { font-size: 20px; }
.rb-projects-head {
    color: var(--text-mute);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 0 8px;
    margin-top: 4px;
}
.rb-projects-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    padding-right: 2px;
}
.rb-projects-loading,
.rb-projects-empty {
    color: var(--text-mute);
    font-size: 13px;
    padding: 8px;
    font-style: italic;
}
.rb-project-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: transparent;
    border: 0;
    color: var(--text-soft);
    text-align: left;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    transition: background-color 120ms ease, color 120ms ease;
    width: 100%;
}
.rb-project-row:hover {
    background: var(--bg-elev);
    color: var(--text);
}
.rb-project-row.is-active {
    background: var(--accent-soft);
    color: var(--accent-2);
}
.rb-project-row-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rb-project-row-meta {
    font-size: 11px;
    color: var(--text-mute);
    letter-spacing: 0.2px;
}
.rb-project-row.is-active .rb-project-row-meta {
    color: var(--accent-2);
    opacity: 0.8;
}

/* ---- Main heading ------------------------------------------------------- */

.rb-main-head { margin-bottom: 28px; }
.rb-main-head h1 {
    font-size: 32px;
    margin: 0 0 6px;
    letter-spacing: -0.4px;
}
.rb-sub { color: var(--text-soft); margin: 0; font-size: 17px; }

/* ---- Cards -------------------------------------------------------------- */

.rb-card {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
}

/* ---- Form controls ------------------------------------------------------ */

.rb-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 4px 0 8px;
}

.rb-textarea, .rb-input, .rb-select {
    width: 100%;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-size: 17px;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 120ms ease, background-color 120ms ease;
    outline: none;
    resize: vertical;
}
.rb-textarea:focus, .rb-input:focus, .rb-select:focus {
    border-color: var(--accent);
    background: var(--bg-elev);
}

.rb-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-soft) 50%),
                      linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
    background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

.rb-row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    margin-top: 16px;
    flex-wrap: wrap;
}
.rb-col-narrow    { flex: 0 0 180px; }
.rb-col-tight     { flex: 0 0 150px; min-width: 0; }
.rb-col-medium    { flex: 0 0 240px; min-width: 0; }
.rb-col-grow      { flex: 1 1 200px; min-width: 0; }
.rb-col-end       { display: flex; justify-content: flex-end; }
.rb-col-segmented { flex: 0 0 220px; min-width: 0; }

/* ---- Segmented control (Timeline frequency: Off / Normal / Lots) ----- */
/* Mirrors the .rb-stepper styling — same pill, same height, same dark
   palette — so the row reads as one set of controls. */
.rb-segmented {
    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    height: 56px;                    /* match stepper / select column height */
    padding: 4px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    user-select: none;
    overflow: hidden;
    transition: border-color 120ms ease;
}
.rb-segmented:focus-within { border-color: var(--accent); }

.rb-segmented-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 3);
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius: 999px;
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    box-shadow: 0 2px 10px rgba(255, 90, 31, 0.28);
}
.rb-segmented[data-value="off"]    .rb-segmented-indicator { transform: translateX(0%); }
.rb-segmented[data-value="normal"] .rb-segmented-indicator { transform: translateX(100%); }
.rb-segmented[data-value="lots"]   .rb-segmented-indicator { transform: translateX(200%); }

/* Binary variant — two-button toggle (Off / Power-style). Overrides the
   3-column grid + 1/3 indicator width so the slider lands cleanly on
   each half. Add `rb-segmented-binary` to any .rb-segmented with two
   .rb-seg children. The chained selector `.rb-segmented.rb-segmented-binary`
   bumps specificity above the 3-segment compact variant below — without
   that, .rb-segmented-compact .rb-segmented-indicator (which sets a 1/3
   width) wins by source order. */
.rb-segmented.rb-segmented-binary { grid-template-columns: repeat(2, 1fr); }
.rb-segmented.rb-segmented-binary .rb-segmented-indicator { width: calc((100% - 8px) / 2); }
.rb-segmented.rb-segmented-binary[data-value="power"] .rb-segmented-indicator { transform: translateX(100%); }
/* And when the binary control is ALSO compact, use compact's 6px padding
   math (3px insets each side instead of 4px). Two chained classes on the
   parent guarantees we beat both .rb-segmented-compact (1/3) and the
   plain .rb-segmented (3-col grid). */
.rb-segmented-compact.rb-segmented-binary .rb-segmented-indicator { width: calc((100% - 6px) / 2); }

.rb-seg {
    position: relative;
    z-index: 1;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-mute);
    cursor: pointer;
    user-select: none;
    transition: color 160ms ease;
    border-radius: 999px;
}
.rb-seg.is-active            { color: #fff; }
.rb-seg:hover:not(.is-active) { color: var(--accent-2); }
.rb-seg:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Stepper (− 5 +) — one organic pill ------------------------------- */

.rb-stepper {
    display: inline-flex;
    align-items: stretch;
    width: 100%;
    height: 56px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;          /* full pill, rounded ends */
    overflow: hidden;
    transition: border-color 120ms ease;
}
.rb-stepper:focus-within { border-color: var(--accent); }

.rb-step {
    flex: 0 0 56px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background-color 120ms ease, color 120ms ease;
}
.rb-step:hover    { background: var(--bg-elev); color: var(--accent-2); }
.rb-step:active   { background: var(--accent-soft); color: var(--accent); }
.rb-step:disabled { color: var(--text-mute); cursor: not-allowed; background: transparent; }

.rb-step-val {
    flex: 1 1 auto;
    width: 100%;
    text-align: center;
    background: transparent;
    border: 0;
    color: var(--text);
    font-size: 22px;
    font-weight: 700;
    font-family: inherit;
    outline: none;
    padding: 0;
    /* tiny vertical separators so the three parts read as one button */
    border-left:  1px solid var(--line);
    border-right: 1px solid var(--line);
}

/* ---- Buttons ------------------------------------------------------------ */

.rb-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    min-height: 56px;
    min-width: 200px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 120ms ease, color 120ms ease;
}

.rb-btn-primary   { background: var(--accent); }
.rb-btn-primary:hover:not(:disabled)   { background: var(--accent-2); }

.rb-btn-secondary { background: var(--secondary); }
.rb-btn-secondary:hover:not(:disabled) { background: var(--secondary-2); }

.rb-btn-ghost {
    background: transparent;
    color: var(--text-soft);
    border: 1px solid var(--line);
    min-height: 44px;
    min-width: 0;
    padding: 10px 18px;
    font-size: 15px;
}
.rb-btn-ghost:hover:not(:disabled) {
    background: var(--bg-elev);
    color: var(--text);
}
.rb-btn-tiny {
    min-height: 34px;
    min-width: 0;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Compact icon button — used by character image upload, etc. */
.rb-btn-icon {
    min-width: 0;
    min-height: 40px;
    padding: 8px 14px;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}
.rb-btn-icon .material-icons {
    font-size: 20px;
    line-height: 1;
}

/* ---- Card head row (label + action) ---------------------------------- */

.rb-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.rb-card-head .rb-label { margin: 0; }

.rb-btn:disabled { opacity: 0.85; cursor: progress; }

/* The spinner always occupies its slot in the flex row (visibility:hidden,
   not display:none) so flipping into loading state doesn't change the
   button's width — otherwise the button visibly stretches when generating. */
.rb-btn-spinner {
    visibility: hidden;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rb-spin 0.7s linear infinite;
}
.rb-btn.is-loading .rb-btn-spinner { visibility: visible; }

/* In-button gradient sweep while generating */
.rb-btn.is-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.18) 50%,
        transparent 100%
    );
    animation: rb-sweep 1.4s linear infinite;
}

@keyframes rb-spin  { to { transform: rotate(360deg); } }
@keyframes rb-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ---- Project head ------------------------------------------------------- */

.rb-project-head { margin-top: 28px; }
.rb-proj-title    { font-size: 26px; font-weight: 700; letter-spacing: -0.3px; }
.rb-proj-product  { color: var(--text-soft); margin-top: 8px; font-size: 15px; }
.rb-proj-product b { color: var(--accent-2); }
.rb-proj-actions  { margin-top: 16px; display: flex; gap: 12px; }

/* ---- Step 2 panel — Generate scenes / Timeline / Delete -------------- */

.rb-step2-panel {
    margin-top: 20px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.rb-step2-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 280px;
    min-width: 0;
}
.rb-step2-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-wrap: wrap;
}
.rb-step2-hint { color: var(--text-mute); font-size: 14px; }

.rb-step2-tl {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rb-step2-tl-label {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}
/* Compact variant of the segmented control — sits inline in a panel,
   shorter than the form-row one, with a narrower fixed width. */
.rb-segmented-compact {
    height: 40px;
    width: 240px;
    padding: 3px;
}
.rb-segmented-compact .rb-segmented-indicator {
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / 3);
}
.rb-segmented-compact .rb-seg {
    font-size: 13px;
}

/* Trash button in the step-2 panel — quiet by default, danger-red on hover. */
.rb-step2-trash {
    color: var(--text-mute);
    background: transparent;
    border: 1px solid transparent;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.rb-step2-trash:hover:not(:disabled) {
    color: #ff5151;
    background: rgba(255, 81, 81, 0.10);
    border-color: rgba(255, 81, 81, 0.35);
}
.rb-step2-trash[hidden] { display: none; }

/* ---- In-flight scene placeholder ------------------------------------- */

.rb-scene-loading .rb-scene-meta {
    color: var(--accent-2);
    font-style: italic;
    font-size: 14px;
}
.rb-loading-bar {
    margin-top: 14px;
    height: 4px;
    background: var(--bg);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.rb-loading-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent) 50%,
        transparent 100%);
    animation: rb-sweep 1.4s linear infinite;
}

/* ---- Characters --------------------------------------------------------- */

.rb-characters {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.rb-character { margin: 0; }
.rb-char-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin-bottom: 12px;
    /* Allow children to shrink so the icon buttons never wrap onto a new
       row when the name is long. */
    min-width: 0;
}
.rb-char-token {
    flex: 0 0 auto;
    background: var(--accent-soft);
    color: var(--accent-2);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
}
.rb-char-name {
    font-size: 18px;
    font-weight: 700;
    /* Truncate long names so they never push the icon buttons off the row. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rb-char-role {
    color: var(--text-mute);
    font-size: 13px;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Compact icon buttons in the char head — smaller than the default
   .rb-btn-icon (40px min-height) so they fit alongside the name + role. */
.rb-char-head .rb-btn-icon {
    min-height: 32px;
    padding: 4px 8px;
    flex: 0 0 auto;
}
.rb-char-head .rb-btn-icon .material-icons { font-size: 18px; }
/* Push the regen + trash buttons to the far right of the head row.
   margin-left:auto on the regen (first of the pair) keeps them grouped. */
.rb-char-regen  { margin-left: auto; }
.rb-char-delete { margin-left: 0; }

/* Seed input + dice button on one line. */
.rb-seed-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rb-seed-row .rb-input { flex: 1 1 auto; min-width: 0; }
.rb-seed-row .rb-btn { flex: 0 0 auto; }

/* Insert-scene divider — sits between two scene cards. A soft purple pill
   so it reads as a clear "click here" affordance without competing visually
   with the orange primary buttons. Hover deepens the purple. */
.rb-insert-scene {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6px 0;
    padding: 0 12px;
    height: 26px;
    border: 1px solid rgba(167, 139, 250, 0.30);
    background: rgba(167, 139, 250, 0.10);
    color: #c4b5fd;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 999px;
    transition: background-color 140ms ease, color 140ms ease,
                border-color 140ms ease, height 140ms ease;
    width: 100%;
    gap: 8px;
}
.rb-insert-scene::before,
.rb-insert-scene::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}
.rb-insert-scene:hover {
    background: rgba(167, 139, 250, 0.22);
    border-color: rgba(167, 139, 250, 0.55);
    color: #ede9fe;
    height: 34px;
}
.rb-insert-scene .material-icons { font-size: 16px; }
.rb-insert-scene[disabled] { cursor: progress; opacity: 0.65; }

/* ---- Character image upload ----------------------------------------- */

.rb-char-upload {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}
.rb-char-image {
    width: 110px;
    aspect-ratio: 9 / 16;       /* reels portrait */
    border-radius: var(--radius-sm);
    background: var(--bg);
    border: 1px dashed var(--line);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
}
.rb-char-image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rb-char-image-empty {
    color: var(--text-mute);
    font-size: 12px;
    text-align: center;
    padding: 0 8px;
}
.rb-char-upload-btn {
    cursor: pointer;
}
.rb-char-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}
.rb-char-upload-error {
    margin-top: 8px;
    color: #ff6b6b;
    font-size: 13px;
}

/* ---- Scenes list -------------------------------------------------------- */

.rb-scenes-list { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }

.rb-scene-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.rb-scene-num {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent-2);
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.rb-scene-title { font-size: 19px; font-weight: 700; }
.rb-scene-meta  { color: var(--text-mute); font-size: 14px; }

.rb-scene-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
}
.rb-scene-actions .rb-btn-icon {
    min-height: 36px;
    padding: 6px 10px;
}
.rb-scene-actions .material-icons { font-size: 18px; }
.rb-scene-actions .rb-scene-delete:hover { color: #ff6b6b; border-color: #ff6b6b; }

/* ---- Scene character thumbnails ----------------------------------------- */

.rb-scene-chars {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.rb-scene-char {
    width: 56px;
    aspect-ratio: 9 / 16;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--line);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.rb-scene-char img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rb-scene-char-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--text-mute);
    font-weight: 700;
    font-size: 22px;
}
.rb-scene-char-name {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    padding: 14px 4px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* X button on the top-right of a character thumbnail — only visible on
   hover. Clicking removes that character from the scene. */
.rb-scene-char-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    transition: background-color 120ms ease;
}
.rb-scene-char:hover .rb-scene-char-remove { display: inline-flex; }
.rb-scene-char-remove:hover { background: #ff4d4d; }
.rb-scene-char-remove .material-icons { font-size: 14px; line-height: 1; }

/* ---- Scene environment image ------------------------------------------- */

.rb-scene-env {
    display: flex;
    gap: 14px;
    align-items: stretch;
    margin-bottom: 16px;
}
.rb-scene-env-image {
    width: 90px;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-sm);
    background: var(--bg);
    border: 1px dashed var(--line);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
    align-self: flex-start;
}
.rb-scene-env-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rb-scene-env-empty {
    color: var(--text-mute);
    font-size: 11px;
    text-align: center;
    padding: 0 6px;
}
.rb-scene-env-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.rb-scene-env-body .rb-label { margin-top: 0; }
.rb-scene-env-prompt {
    font-size: 14px;
    line-height: 1.45;
    font-family: ui-monospace, SFMono-Regular, "Menlo", monospace;
    margin: 0;
}
.rb-scene-env-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
    flex-shrink: 0;
}
/* Compact select for in-card pickers (env image model). The default
   .rb-select is sized for top-level form fields (17px font, 14px padding);
   this variant is small enough to live next to the action buttons. */
.rb-select-compact {
    padding: 6px 28px 6px 10px;
    font-size: 12px;
    background-position: calc(100% - 14px) 13px, calc(100% - 10px) 13px;
    background-size: 5px 5px, 5px 5px;
}
.rb-scene-env-error {
    color: #ff6b6b;
    font-size: 12px;
    margin-top: 6px;
}

/* ---- Scene summary ----------------------------------------------------- */

.rb-scene-summary {
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.45;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--bg);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
}

/* ---- Parsed dialog list ------------------------------------------------ */

.rb-scene-dialog {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.rb-dialog-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 15px;
    line-height: 1.45;
}
.rb-dialog-speaker {
    color: var(--accent-2);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.rb-dialog-delivery {
    color: var(--text-mute);
    font-size: 12px;
    font-style: italic;
    flex-shrink: 0;
}
.rb-dialog-line {
    color: var(--text);
    flex: 1 1 100%;
}
.rb-dialog-line::before { content: '“'; color: var(--text-mute); }
.rb-dialog-line::after  { content: '”'; color: var(--text-mute); }

.rb-scene-vprompt   { margin-bottom: 4px; font-family: ui-monospace, SFMono-Regular, "Menlo", monospace; font-size: 15px; line-height: 1.55; }

/* ---- Scene 2-column body layout ----------------------------------------- */

.rb-scene-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 32px;
    margin-top: 8px;
}
@media (max-width: 980px) {
    .rb-scene-body { grid-template-columns: 1fr; }
}
.rb-scene-left  { min-width: 0; }
.rb-scene-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---- Big 9:16 preview area --------------------------------------------- */

.rb-scene-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--bg) 0%, var(--bg-elev) 100%);
    border: 1px solid var(--line);
    overflow: hidden;
    align-self: stretch;
}

.rb-scene-preview-empty,
.rb-scene-preview-loading,
.rb-scene-preview-error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 16px;
}

/* HTML's [hidden] attribute uses display:none, but our display:flex / block
   rules above and below override it. These selectors restore the expected
   behaviour without resorting to !important. */
.rb-scene-preview-empty[hidden],
.rb-scene-preview-loading[hidden],
.rb-scene-preview-error[hidden],
.rb-scene-preview-video[hidden] {
    display: none;
}
.rb-scene-preview-empty {
    color: var(--text-mute);
    font-size: 14px;
    font-weight: 500;
}
.rb-scene-preview-empty .material-icons {
    font-size: 48px;
    opacity: 0.4;
}
.rb-scene-preview-error {
    color: #ff6b6b;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

/* Loading state — animated shimmer + spinner + status pill */
.rb-scene-preview-loading {
    background: var(--bg);
}
.rb-shimmer {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg,
            rgba(255, 90, 31, 0.08) 0%,
            rgba(91, 140, 255, 0.08) 100%),
        linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.07) 50%,
            transparent 100%);
    background-size: 100% 100%, 200% 100%;
    background-repeat: no-repeat;
    animation: rb-preview-shimmer 1.8s linear infinite;
    pointer-events: none;
}
@keyframes rb-preview-shimmer {
    0%   { background-position: 0 0, -100% 0; }
    100% { background-position: 0 0,  100% 0; }
}
.rb-preview-spinner {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    border: 4px solid rgba(255, 255, 255, 0.08);
    border-top-color: var(--accent);
    border-right-color: var(--accent-2);
    border-radius: 50%;
    animation: rb-spin 0.9s linear infinite;
}
.rb-preview-status {
    position: relative;
    z-index: 1;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.55);
    padding: 6px 14px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.rb-preview-timer {
    position: relative;
    z-index: 1;
    color: var(--text-mute);
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    margin-top: -4px;
}
.rb-preview-time-badge {
    position: absolute;
    z-index: 2;
    bottom: 8px;
    right: 8px;
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 10px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.rb-preview-time-badge[hidden] { display: none; }

/* Small × in the top-right corner of the preview — only shown when there's
   actually a video (or attempt) to delete. */
.rb-preview-delete {
    position: absolute;
    z-index: 3;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: var(--text);
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color 120ms ease, color 120ms ease;
}
.rb-preview-delete:hover { background: #ff4d4d; color: #fff; }
.rb-preview-delete .material-icons { font-size: 18px; }
.rb-preview-delete[hidden] { display: none; }

/* Cancel-generation variant — solid red so it reads as "stop the running
   process", not "delete a finished thing". */
.rb-preview-delete.is-cancel {
    background: #e23b3b;
    color: #fff;
}
.rb-preview-delete.is-cancel:hover { background: #ff4d4d; }

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

/* ---- Right column controls -------------------------------------------- */

.rb-scene-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rb-scene-controls .rb-row {
    margin-top: 4px;
    gap: 12px;
}
.rb-scene-controls .rb-col-narrow { flex: 0 0 140px; }

/* Compact stepper variant — used for the per-scene duration control where
   the column is narrower than the form's main "Scenes" stepper. */
.rb-scene-duration-stepper {
    height: 44px;
}
.rb-scene-duration-stepper .rb-step {
    flex: 0 0 38px;
    font-size: 22px;
}
.rb-scene-duration-stepper .rb-step-val {
    font-size: 18px;
}

.rb-gen-video-full {
    width: 100%;
    margin-top: 12px;
    min-height: 52px;
}

/* Second row of per-scene video controls: quality, audio toggle */
.rb-scene-video-options {
    align-items: center;
    flex-wrap: wrap;
}

/* ---- Custom checkbox (Material icons-driven) ------------------------ */

.rb-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    color: var(--text-soft);
    font-size: 15px;
    font-weight: 600;
    padding: 8px 12px;
    margin-top: 22px;     /* align with controls that have a label above */
}
.rb-checkbox input { display: none; }
.rb-checkbox-box {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1.5px solid var(--line);
    background: var(--bg);
    transition: background-color 120ms ease, border-color 120ms ease;
}
.rb-checkbox-box .material-icons {
    font-size: 18px;
    color: transparent;
    transition: color 120ms ease;
}
.rb-checkbox input:checked + .rb-checkbox-box {
    background: var(--accent);
    border-color: var(--accent);
}
.rb-checkbox input:checked + .rb-checkbox-box .material-icons {
    color: #fff;
}
.rb-checkbox:hover .rb-checkbox-box { border-color: var(--accent-2); }

.rb-scene-video-result {
    margin-top: 16px;
}
.rb-scene-video-result video {
    width: 100%;
    max-width: 480px;
    border-radius: var(--radius-sm);
    background: #000;
    display: block;
}
.rb-scene-video-result .rb-status {
    color: var(--text-mute);
    font-size: 15px;
}
.rb-scene-video-result .rb-error {
    color: #ff6b6b;
    font-size: 15px;
}

/* ---- Modal (Generate ideas popup) ------------------------------------- */

.rb-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}
.rb-modal[hidden] { display: none; }
body.rb-modal-open { overflow: hidden; }

.rb-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}
.rb-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 64px);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.rb-modal-panel-narrow { max-width: 480px; }

/* Delete-confirmation modal body bits */
.rb-modal-warn {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 8px;
    color: var(--text);
}
.rb-modal-warn strong { color: var(--accent-2); }
.rb-modal-note {
    font-size: 14px;
    color: var(--text-mute);
    margin: 0;
}
.rb-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    flex-wrap: wrap;
}

/* Danger button — used in confirm-to-delete dialogs only. */
.rb-btn-danger {
    background: #c53030;
    color: #fff;
}
.rb-btn-danger:hover:not(:disabled)  { background: #e53e3e; }
.rb-btn-danger:active:not(:disabled) { background: #b32626; }

/* Dialog-only mode toggle inside the regen modal — sits between the
   instructions textarea and the action buttons. */
.rb-regen-mode {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0 0;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.rb-regen-mode:hover { border-color: var(--accent); }
.rb-regen-mode input[type="checkbox"] {
    margin: 2px 0 0;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}
.rb-regen-mode-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text);
}
.rb-regen-mode-text strong { font-weight: 600; }
.rb-regen-mode-text em {
    font-style: normal;
    color: var(--text-mute);
    font-size: 13px;
}

.rb-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-elev);
}
.rb-modal-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.2px;
}
.rb-modal-close {
    background: transparent;
    border: 0;
    color: var(--text-soft);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    transition: background-color 120ms ease, color 120ms ease;
}
.rb-modal-close:hover { background: var(--bg); color: var(--text); }
.rb-modal-close .material-icons { font-size: 22px; }

.rb-modal-body {
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---- Generate ideas: actions row, tabs, cards ------------------------- */

.rb-ideas-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.rb-ideas-actions .rb-btn { min-width: 0; }
.rb-ideas-hint {
    color: var(--text-mute);
    font-size: 13px;
    flex: 1 1 200px;
}

.rb-ideas-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}
.rb-ideas-tab {
    background: var(--bg);
    color: var(--text-soft);
    border: 1px solid var(--line);
    padding: 6px 14px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease,
                border-color 120ms ease;
}
.rb-ideas-tab:hover { background: var(--bg-elev); color: var(--text); }
.rb-ideas-tab.is-active {
    background: var(--accent-soft);
    color: var(--accent-2);
    border-color: var(--accent);
}

.rb-ideas-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rb-ideas-empty {
    color: var(--text-mute);
    font-style: italic;
    font-size: 14px;
    padding: 12px 0;
    text-align: center;
}
.rb-ideas-meta {
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.4;
    padding: 8px 12px;
    background: var(--bg);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
}
.rb-ideas-meta-label {
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    margin-right: 4px;
}
.rb-ideas-meta-tags {
    color: var(--text-mute);
    font-size: 12px;
    margin-left: 6px;
}

.rb-idea-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 120ms ease;
}
.rb-idea-card:hover { border-color: var(--accent); }
.rb-idea-headline {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.1px;
}
.rb-idea-body {
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.5;
}
.rb-idea-use {
    align-self: flex-start;
    margin-top: 4px;
}
.rb-idea-use .material-icons { font-size: 16px; }

/* ============================================================
   Image lightbox — character portraits + scene environment
   thumbnails open here on click. Single instance reused for
   both. The cursor + hover treatment advertises the click
   affordance directly on the existing thumbnail classes.
   ============================================================ */
.rb-char-image-preview,
.rb-scene-env-preview {
    cursor: zoom-in;
    transition: filter 0.15s ease;
}
.rb-char-image-preview:hover,
.rb-scene-env-preview:hover { filter: brightness(1.07); }

.rb-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    cursor: zoom-out;
}
.rb-lightbox[hidden] { display: none; }
.rb-lightbox-panel {
    position: relative;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    padding: 12px;
    max-width: calc(100vw - 64px);
    max-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rb-lightbox-img {
    display: block;
    max-width: 100%;
    /* Subtract the panel's vertical padding (2 × 12px) so the image
       never overflows the frame on tall portraits. */
    max-height: calc(100vh - 64px - 24px);
    object-fit: contain;
    border-radius: 6px;
    cursor: zoom-out;
}
.rb-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--bg-elev);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.rb-lightbox-close:hover { background: var(--accent); color: #fff; }
.rb-lightbox-close .material-icons { font-size: 22px; }

/* ============================================================================
   Scenario panel — the master plan / wireframe shown between Step 1 (cast)
   and Step 2 (scene rendering). Lets the user Accept the plan or Regenerate
   it before any scene renderer runs.
   ============================================================================ */

.rb-scenario {
    background: var(--bg-soft);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin: 16px 0;
    box-shadow: var(--shadow-line);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Smoothly slide the body away when the panel is collapsed. We animate
   max-height + opacity instead of `display:none` so the toggle reads as
   a slide-out rather than a snap. */
.rb-scenario-scenes,
.rb-scenario-locs {
    overflow: hidden;
    max-height: 4000px; /* generous upper bound — fits any realistic plan */
    opacity: 1;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
}
.rb-scenario.is-collapsed .rb-scenario-scenes,
.rb-scenario.is-collapsed .rb-scenario-locs {
    max-height: 0;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}
.rb-scenario.is-collapsed {
    padding: 14px 24px;
    gap: 0;
}

.rb-scenario-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.rb-scenario-head-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.rb-scenario-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
}
.rb-scenario-sub {
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.4;
}
.rb-scenario-head-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.rb-scenario-locs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.rb-scenario-loc {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-soft);
    cursor: help;
}

.rb-scenario-scenes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rb-scenario-scene {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rb-scenario-scene-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
}
.rb-scenario-scene-num {
    color: var(--accent-2);
    font-weight: 600;
    white-space: nowrap;
}
.rb-scenario-scene-beat {
    color: var(--text-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rb-scenario-scene-title {
    color: var(--text);
    font-weight: 600;
    flex: 1;
    min-width: 0;
}
.rb-scenario-scene-loc {
    color: var(--secondary-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}
.rb-scenario-scene-dur {
    color: var(--text-mute);
    font-size: 12px;
}

.rb-scenario-scene-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    line-height: 1.45;
}
.rb-scenario-scene-summary {
    color: var(--text);
}
.rb-scenario-scene-row {
    display: flex;
    gap: 6px;
    color: var(--text-soft);
    font-size: 13px;
}
.rb-scenario-scene-label {
    color: var(--text-mute);
    flex-shrink: 0;
    min-width: 100px;
}
.rb-scenario-scene-flow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-mute);
    font-size: 12px;
    font-style: italic;
    margin-top: 2px;
}
.rb-scenario-scene-emo,
.rb-scenario-scene-exit {
    flex: 1;
    min-width: 0;
}
.rb-scenario-scene-arrow {
    font-size: 14px !important;
    color: var(--text-mute);
}

.rb-scenario-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-soft);
}
.rb-scenario-empty p {
    margin: 0 0 14px 0;
}

.rb-scenario-loading {
    padding: 16px 0;
    text-align: center;
    color: var(--text-soft);
}
.rb-scenario-loading p {
    margin: 8px 0 0 0;
    font-size: 14px;
}