/*
 * screenplay.css - PRISM Production Management Styles
 *
 * Brand colors: Deep Black (#0A0A0A), Pure White, PRISM Blue (#3B9EFF)
 */

/* ============================================
   Reset & Base
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Brand Colors */
    --color-black: #0A0A0A;
    --color-white: #FFFFFF;
    --color-yellow: #FFD700;
    --color-blue: #3B9EFF;
    --color-cyan: #00D9FF;
    --color-red: #FF2E3B;
    --color-green: #39FF14;
    --footer-height: 36px;
    --header-height: 61px;
    --pipeline-height: 0px;  /* Workflow pipeline removed - header nav only */
    --pancake-header-height: 0px;  /* Dynamic: updated by NodeManager when panels pancake */
    --pancake-footer-height: 0px;  /* Dynamic: updated by NodeManager when panels pancake */
    --preview-toolbar-height: 48px;  /* Height of preview toolbar (padding + content) */

    /* UI Colors */
    --color-bg: #1a1a1a;
    --color-card: #242424;
    --color-border: #333;
    --color-text: #e0e0e0;
    --color-text-muted: #888;

    /* Screenplay Colors */
    --screenplay-bg: #FFFFFF;
    --screenplay-text: #000000;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 24px;

    /* Global YES/NO tabs */
    --yesno-height: 100px;
    --yesno-width: 64px;
    --yesno-slide: 50px;
    --yesno-peek: 12px;
    --yesno-top: 33vh;

    /* Screenplay Text Margins (tunable via dev-margin-tuner.js) */
    /* Base content padding */
    --line-content-padding-left: 100px;
    --line-content-padding-right: 100px;
    /* Scene Heading */
    --scene-heading-margin-top: 0px;
    --scene-heading-margin-left: 0px;
    --scene-heading-padding-top: 0px;
    --scene-heading-padding-bottom: 0px;
    /* Action */
    --action-margin-top: 0px;
    --action-margin-bottom: 0px;
    --action-margin-left: 0px;
    --action-margin-right: 0px;
    /* Character */
    --character-margin-top: 0px;
    --character-margin-left: 0px;
    /* Dialogue */
    --dialogue-margin-top: 0px;
    --dialogue-margin-bottom: 0px;
    --dialogue-margin-left: 13%;
    --dialogue-margin-right: 18%;
    /* Parenthetical */
    --parenthetical-margin-top: 0px;
    --parenthetical-margin-bottom: 0px;
    --parenthetical-margin-left: 20%;
    --parenthetical-margin-right: 20%;
    /* Transition */
    --transition-margin-right: 0px;
    --transition-padding-top: 12px;
    --transition-padding-bottom: 12px;
}

/* ============================================
   Global YES/NO Tabs
   ============================================ */

.yesno-root {
    position: fixed;
    inset: 0;
    z-index: 3500;
    pointer-events: none; /* tabs re-enable pointer events */
    opacity: 0;
    visibility: hidden;
    transition: opacity 140ms ease;
}

.yesno-root.is-open {
    opacity: 1;
    visibility: visible;
}

.yesno-tab {
    position: fixed;
    top: var(--yesno-top, 33vh);
    width: var(--yesno-width, 64px);
    height: var(--yesno-height, 100px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    pointer-events: auto;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 180ms ease, box-shadow 180ms ease;
}

.yesno-tab:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.35);
    outline-offset: 2px;
}

/* Left (NO) */
.yesno-tab--no {
    left: calc(-1 * (var(--yesno-width, 64px) - var(--yesno-peek, 12px)));
    border-color: rgba(255, 80, 90, 0.35);
    background: rgba(255, 40, 50, 0.18);
}

/* Right (YES) */
.yesno-tab--yes {
    right: calc(-1 * (var(--yesno-width, 64px) - var(--yesno-peek, 12px)));
    border-color: rgba(60, 255, 120, 0.32);
    background: rgba(50, 220, 90, 0.16);
}

/* Slide-out behavior only when open */
.yesno-root.is-open .yesno-tab--no:hover,
.yesno-root.is-open .yesno-tab--no.is-active {
    transform: translateX(var(--yesno-slide, 50px));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    filter: brightness(1.05);
}

.yesno-root.is-open .yesno-tab--yes:hover,
.yesno-root.is-open .yesno-tab--yes.is-active {
    transform: translateX(calc(-1 * var(--yesno-slide, 50px)));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    filter: brightness(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .yesno-root,
    .yesno-tab {
        transition: none;
    }
}

/* ============================================
   Fonts
   ============================================ */

@font-face {
    font-family: 'Workbench';
    src: url('/static/fonts/workbench/Workbench-Regular-VariableFont_BLED,SCAN.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Babylonica';
    src: url('/static/fonts/babylonica/Babylonica-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik Glitch';
    src: url('/static/fonts/rubik-glitch/RubikGlitch-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Special Elite';
    src: url('/static/fonts/SpecialElite-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/* ============================================
   Edit Mode (Experimental)
   ============================================ */

/* In edit mode we only go "red" for specific affordances (button + glow),
   not the whole brand system. */
#fountain-status.unsaved {
    color: var(--color-red);
}

/* ============================================
   Shine Sweep Animation
   ============================================ */

@keyframes shine-sweep {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

.shine {
    position: relative;
    overflow: hidden;
}

.shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: shine-sweep 5s ease-in-out infinite;
    pointer-events: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--color-bg);
    /* Gentle satin radial gradient: soft highlight + subtle vignette */
    background-image:
        radial-gradient(1200px 800px at 50% 28%,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.025) 38%,
            rgba(255, 255, 255, 0.0) 70%),
        radial-gradient(1400px 900px at 50% 35%,
            rgba(0, 0, 0, 0.0) 55%,
            rgba(0, 0, 0, 0.45) 100%);
    background-attachment: fixed;
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
}

/* Never allow global horizontal scrolling (edge tabs/overlays can extend offscreen) */
html, body {
    overflow-x: hidden;
}

.main-content {
    /* Header is fixed; ensure content starts below it */
    /* Include pancake header strip height when panels are pancaked */
    padding-top: calc(var(--header-height, 72px) + var(--pancake-header-height, 0px));
    /* Footer is fixed; ensure content ends above it */
    /* Include pancake footer strip height when panels are pancaked */
    padding-bottom: calc(var(--footer-height) + var(--pancake-footer-height, 0px));
    position: relative;
    /* Smooth transition when pancake strips appear/disappear */
    transition: padding-top 0.25s ease-out, padding-bottom 0.25s ease-out;
}

/* ============================================
   Header
   ============================================ */

/* Enable cross-document view transitions */
/* @view-transition { navigation: auto; } */

/* Custom timing for header/logo transitions */
::view-transition-old(header),
::view-transition-new(header),
::view-transition-old(fun-logo),
::view-transition-new(fun-logo) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   View Transitions - Main Content Slide
   ============================================ */

/* Main content areas get a shared view-transition-name */
.metadata-container,
.screenplay-container,
.screenplay-canvas {
    view-transition-name: main-content;
}

/* Slide animations */
@keyframes slide-out-left {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-30%); opacity: 0; }
}

@keyframes slide-in-from-right {
    from { transform: translateX(30%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-out-right {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(30%); opacity: 0; }
}

@keyframes slide-in-from-left {
    from { transform: translateX(-30%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Forward: metadata → draft (content slides left, new slides from right) */
[data-transition-direction="forward"]::view-transition-old(main-content) {
    animation: slide-out-left 0.3s ease both;
}
[data-transition-direction="forward"]::view-transition-new(main-content) {
    animation: slide-in-from-right 0.3s ease both;
}

/* Back: draft → metadata (content slides right, new slides from left) */
[data-transition-direction="back"]::view-transition-old(main-content) {
    animation: slide-out-right 0.3s ease both;
}
[data-transition-direction="back"]::view-transition-new(main-content) {
    animation: slide-in-from-left 0.3s ease both;
}

/* Default fallback (forward direction) */
::view-transition-old(main-content) {
    animation: slide-out-left 0.3s ease both;
}
::view-transition-new(main-content) {
    animation: slide-in-from-right 0.3s ease both;
}

.site-header {
    view-transition-name: header;
    /* Dark frosted glass */
    background: transparent;
    -webkit-backdrop-filter: blur(var(--header-blur, 18px)) brightness(var(--header-brightness, 0.55)) contrast(var(--header-contrast, 1.35)) saturate(var(--header-saturate, 1.5));
    backdrop-filter: blur(var(--header-blur, 18px)) brightness(var(--header-brightness, 0.55)) contrast(var(--header-contrast, 1.35)) saturate(var(--header-saturate, 1.5));
    border-bottom: 2px solid var(--color-blue);
    height: var(--header-height, 72px);
    padding: 0 24px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    isolation: isolate; /* keep ::before behind contents */
    /* Header glass itself shouldn't clip the logo layer (the logo has its own mask layer) */
    overflow: var(--header-overflow, visible);
    /* Slight depth even when not glowing */
    box-shadow: 0 var(--header-shadow-y, 8px) var(--header-shadow-blur, 24px) rgba(0, 0, 0, var(--header-shadow-alpha, 0.45));
}

/* Master edit mode: header resize handle (subtle + proximity hint) */
.site-header .header-resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 16px;
    cursor: ns-resize;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, filter 160ms ease;
    z-index: 2;
}

.site-header .header-resize-handle::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: 7px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(255, 215, 0, 0.0),
        rgba(255, 215, 0, 0.55),
        rgba(255, 215, 0, 0.0)
    );
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.25);
}

body.edit-mode .site-header .header-resize-handle.is-near,
body.edit-mode .site-header .header-resize-handle.is-dragging {
    opacity: 1;
    pointer-events: auto;
}

body.edit-mode .site-header .header-resize-handle.is-dragging {
    filter: brightness(1.15);
}

/* Master edit mode: logo move/scale affordances */
.logo-edit-outline {
    position: fixed;
    z-index: 1200; /* above header (1000) */
    border-radius: 14px;
    border: 1px solid rgba(255, 215, 0, 0.0);
    box-shadow: 0 0 0 rgba(255, 215, 0, 0.0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.logo-scale-handle {
    position: fixed;
    z-index: 1201;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    cursor: nwse-resize;
    transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease;
}

.logo-scale-handle::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.55), rgba(255, 215, 0, 0.35));
}

body.edit-mode .logo-edit-outline.is-near {
    opacity: 1;
    border-color: rgba(255, 215, 0, 0.28);
    box-shadow: 0 0 24px rgba(255, 215, 0, 0.12);
}

body.edit-mode .logo-scale-handle.is-near {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1.02);
}

body.edit-mode .logo-edit-outline.is-dragging {
    opacity: 1;
    border-color: rgba(255, 215, 0, 0.45);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.18);
}

body.edit-mode .logo-scale-handle.is-dragging {
    opacity: 1;
    pointer-events: auto;
    filter: brightness(1.1);
}

.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        circle farthest-side at var(--header-bg-grad-x, 50%) var(--header-bg-grad-y, 0%),
        var(--header-bg-grad-1, #0A0A0A) 0%,
        var(--header-bg-grad-2, #0A0A0A) 100%
    );
    opacity: var(--header-bg-alpha, 0.4);
}

.site-header > * {
    position: relative;
    z-index: 1;
}

body.edit-mode.edit-dirty .site-header::before {
    opacity: var(--header-bg-alpha-dirty, 0.65);
}
@keyframes header-glow-pulse {
    0%, 100% {
        filter: blur(12px);
        opacity: 0.35;
        transform: translateZ(0) scaleY(1);
    }
    50% {
        filter: blur(22px);
        opacity: 0.6;
        transform: translateZ(0) scaleY(1.15);
    }
}

@keyframes header-glow-pulse-sharp {
    0%, 100% {
        filter: blur(1px);
        opacity: 0.35;
    }
    50% {
        filter: blur(4px);
        opacity: 0.75;
    }
}

@keyframes header-glow-ambient {
    0%, 100% {
        opacity: 0.15;
        filter: blur(40px);
    }
    50% {
        opacity: 0.35;
        filter: blur(50px);
    }
}

/* In dirty edit mode, boost contrast so bright accent colors "shine" through */
body.edit-mode.edit-dirty .site-header {
    background: transparent;
    /* Dirty mode: stronger blur + brighter "glass" (but still tunable) */
    -webkit-backdrop-filter: blur(var(--header-blur-dirty, 26px)) brightness(var(--header-brightness-dirty, 0.62)) contrast(var(--header-contrast-dirty, 1.6)) saturate(var(--header-saturate-dirty, 1.8));
    backdrop-filter: blur(var(--header-blur-dirty, 26px)) brightness(var(--header-brightness-dirty, 0.62)) contrast(var(--header-contrast-dirty, 1.6)) saturate(var(--header-saturate-dirty, 1.8));
    /* Pulsing box-shadow for header edge glow */
    animation: header-edge-glow 1.4s ease-in-out infinite;
}

@keyframes header-edge-glow {
    0%, 100% {
        box-shadow:
            0 2px 8px rgba(255, 40, 50, 0.3),
            0 4px 20px rgba(255, 40, 50, 0.15);
    }
    50% {
        box-shadow:
            0 2px 12px rgba(255, 40, 50, 0.5),
            0 6px 35px rgba(255, 40, 50, 0.25),
            0 10px 60px rgba(255, 20, 30, 0.15);
    }
}

/* Red glow layers live UNDER the header so they can't bleed into it.
   We also mask the top edge so blur doesn't creep upward. */
body.edit-mode.edit-dirty .main-content::before,
body.edit-mode.edit-dirty .main-content::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--header-height, 72px) - 20px);
    pointer-events: none;
    z-index: 900;
    transform: translateZ(0);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.0) 22%, rgba(0,0,0,1) 55%, rgba(0,0,0,1) 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.0) 22%, rgba(0,0,0,1) 55%, rgba(0,0,0,1) 100%);
}

/* Sharp additive glow - hot white-red core */
body.edit-mode.edit-dirty .main-content::before {
    height: 24px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 220, 220, 0.95) 8%,
        rgba(255, 100, 110, 0.85) 20%,
        rgba(255, 50, 60, 0.5) 45%,
        rgba(255, 30, 40, 0.0) 100%
    );
    mix-blend-mode: plus-lighter;
    animation: header-glow-pulse-sharp 1.1s ease-in-out infinite;
}

/* Soft wide glow - deep red spread */
body.edit-mode.edit-dirty .main-content::after {
    height: 45px;
    background: radial-gradient(
        ellipse 120% 100% at 50% 0%,
        rgba(255, 40, 50, 0.8) 0%,
        rgba(220, 30, 40, 0.5) 30%,
        rgba(180, 20, 30, 0.2) 60%,
        rgba(140, 10, 20, 0.0) 100%
    );
    animation: header-glow-pulse 1.5s ease-in-out infinite;
}

/* Ambient outer glow - very wide subtle halo */
body.edit-mode.edit-dirty .main-content {
    position: relative;
}
body.edit-mode.edit-dirty .main-content::after {
    box-shadow: 0 0 80px 20px rgba(255, 50, 60, 0.15);
}

.header-content {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Header Episode Navigation (preview pages only) */
.header-episode-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;  /* Push to left side */
}

.header-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

.header-back-btn:hover {
    color: var(--color-cyan);
    background: rgba(0, 217, 255, 0.1);
}

.header-episode-dropdown-wrapper {
    position: relative;
}

.header-episode-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.header-episode-title:hover {
    border-color: var(--color-border);
    background: rgba(255, 255, 255, 0.03);
}

.header-episode-chevron {
    opacity: 0.5;
    transition: transform 0.15s, opacity 0.15s;
}

.header-episode-dropdown-wrapper.open .header-episode-chevron {
    transform: rotate(180deg);
    opacity: 0.8;
}

.header-episode-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    z-index: 1100;
}

.header-episode-dropdown-wrapper.open .header-episode-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-episode-list {
    list-style: none;
    margin: 0;
    padding: 8px;
}

.header-episode-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.1s;
}

.header-episode-item a:hover {
    background: rgba(255, 255, 255, 0.05);
}

.header-episode-item.active a {
    background: rgba(0, 217, 255, 0.1);
    color: var(--color-cyan);
}

.header-episode-item .ep-stage-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--stage-color, var(--color-text-muted));
    flex-shrink: 0;
}

.header-episode-item .ep-title {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-nav-link {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    margin-right: 8px;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background-color 0.2s;
}

.header-nav-link:hover {
    color: var(--color-cyan);
    background: rgba(0, 217, 255, 0.08);
}

.fun-logo-layer {
    view-transition-name: fun-logo;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height, 72px);
    z-index: var(--fun-logo-z, 1001);
    overflow: hidden; /* mask glow overflow */
    pointer-events: none; /* don't block header nav */
}

.fun-logo-layer .logo--center {
    pointer-events: auto; /* allow dragging/interaction when on top */
}

.logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo--center {
    /* Center on the screen horizontally, anchored to the bottom of the header */
    position: absolute;
    left: 50%;
    bottom: calc(20px + var(--fun-logo-bottom, 0px));
    transform:
        translateX(-50%)
        translate(var(--fun-logo-x, 0px), var(--fun-logo-y, 17px))
        scale(var(--fun-logo-scale, 1));
    transform-origin: bottom center;
    z-index: 1;
    user-select: none;
    cursor: default;
}

/* Anchor positioning overrides */
.logo--center[data-anchor="top-left"] {
    top: var(--fun-logo-y, 17px);
    left: var(--fun-logo-x, 0px);
    bottom: auto;
    transform: scale(var(--fun-logo-scale, 1));
    transform-origin: top left;
}

.logo--center[data-anchor="top-center"] {
    top: calc(20px + var(--fun-logo-y, 17px));
    left: 50%;
    bottom: auto;
    transform: translateX(-50%) translateX(var(--fun-logo-x, 0px)) scale(var(--fun-logo-scale, 1));
    transform-origin: top center;
}

.logo--center[data-anchor="top-right"] {
    top: calc(20px + var(--fun-logo-y, 17px));
    right: calc(20px - var(--fun-logo-x, 0px));
    left: auto;
    bottom: auto;
    transform: scale(var(--fun-logo-scale, 1));
    transform-origin: top right;
}

.logo--center[data-anchor="center-left"] {
    top: 50%;
    left: calc(20px + var(--fun-logo-x, 0px));
    bottom: auto;
    transform: translateY(-50%) translateY(var(--fun-logo-y, 17px)) scale(var(--fun-logo-scale, 1));
    transform-origin: center left;
}

.logo--center[data-anchor="center"] {
    top: 50%;
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%) translate(var(--fun-logo-x, 0px), var(--fun-logo-y, 17px)) scale(var(--fun-logo-scale, 1));
    transform-origin: center;
}

.logo--center[data-anchor="center-right"] {
    top: 50%;
    right: calc(20px - var(--fun-logo-x, 0px));
    left: auto;
    bottom: auto;
    transform: translateY(-50%) translateY(var(--fun-logo-y, 17px)) scale(var(--fun-logo-scale, 1));
    transform-origin: center right;
}

.logo--center[data-anchor="bottom-left"] {
    bottom: calc(20px + var(--fun-logo-bottom, 0px) + var(--fun-logo-y, 17px));
    left: calc(20px + var(--fun-logo-x, 0px));
    transform: scale(var(--fun-logo-scale, 1));
    transform-origin: bottom left;
}

.logo--center[data-anchor="bottom-center"] {
    /* Default - no changes needed, but explicit for clarity */
    bottom: calc(20px + var(--fun-logo-bottom, 0px));
    left: 50%;
    transform: translateX(-50%) translate(var(--fun-logo-x, 0px), var(--fun-logo-y, 17px)) scale(var(--fun-logo-scale, 1));
    transform-origin: bottom center;
}

.logo--center[data-anchor="bottom-right"] {
    bottom: calc(20px + var(--fun-logo-bottom, 0px) + var(--fun-logo-y, 17px));
    right: calc(20px - var(--fun-logo-x, 0px));
    left: auto;
    transform: scale(var(--fun-logo-scale, 1));
    transform-origin: bottom right;
}

/* Fun header logo variant (must override .logo-brand styles) */
.logo-brand.logo-brand--fun {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-weight: var(--fun-logo-weight, 100); /* Special Elite Regular */
    font-size: calc(clamp(64px, calc(var(--header-height, 72px) * 1.06), 220px) * var(--fun-logo-font-mult, 1));
    line-height: var(--fun-logo-line-height, 0.9);
    text-transform: none;
    color: var(--fun-logo-fg, #000);
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    display: flex;
    align-items: baseline;
    /* Kerning/spacing increased by 100% */
    gap: var(--fun-logo-gap, 1.15em);       /* renders like " p   r   i   s   m " */
    padding: 0 var(--fun-logo-pad, 1.15em); /* leading/trailing space */
    user-select: none;
}

.logo-brand.logo-brand--fun::before {
    content: none;
}

.fun-letter {
    display: inline-block;
    position: relative;
    color: var(--fun-logo-fg, #000);
    z-index: 0;        /* establish stacking context for pseudo-elements */
    isolation: isolate; /* keep negative z-index layers behind within this letter */
    user-select: none;
    transition: transform 0.2s ease;
}

/* Master edit mode: show that the logo is draggable */
body.edit-mode .logo--center {
    cursor: grab;
}

body.edit-mode .logo--center:active {
    cursor: grabbing;
}

.fun-letter::before {
    /* Glow layer behind both the white clone and the black letter */
    content: attr(data-letter);
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    z-index: -3;
    pointer-events: none;
}

.fun-letter::after {
    /* White duplicate behind the black letter, but above the glow */
    content: attr(data-letter);
    position: absolute;
    left: -1px;
    top: -1px;
    color: var(--fun-logo-clone, #fff);
    opacity: 1;
    z-index: -2;
    pointer-events: none;
}

/* Under-glow per letter: p r i s m = r o y g b */
.fun-letter--red::before {
    text-shadow:
        0 0 calc(18px * var(--fun-logo-glow-size, 1)) rgba(255, 0, 0, calc(0.95 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(42px * var(--fun-logo-glow-size, 1)) rgba(255, 0, 0, calc(0.75 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(90px * var(--fun-logo-glow-size, 1)) rgba(255, 0, 0, calc(0.45 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(160px * var(--fun-logo-glow-size, 1)) rgba(255, 0, 0, calc(0.22 * var(--fun-logo-glow-intensity, 1)));
}

.fun-letter--orange::before {
    text-shadow:
        0 0 calc(18px * var(--fun-logo-glow-size, 1)) rgba(255, 136, 0, calc(0.95 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(42px * var(--fun-logo-glow-size, 1)) rgba(255, 136, 0, calc(0.75 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(90px * var(--fun-logo-glow-size, 1)) rgba(255, 136, 0, calc(0.45 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(160px * var(--fun-logo-glow-size, 1)) rgba(255, 136, 0, calc(0.22 * var(--fun-logo-glow-intensity, 1)));
}

.fun-letter--yellow::before {
    text-shadow:
        0 0 calc(18px * var(--fun-logo-glow-size, 1)) rgba(255, 215, 0, calc(0.95 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(42px * var(--fun-logo-glow-size, 1)) rgba(255, 215, 0, calc(0.75 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(90px * var(--fun-logo-glow-size, 1)) rgba(255, 215, 0, calc(0.45 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(160px * var(--fun-logo-glow-size, 1)) rgba(255, 215, 0, calc(0.22 * var(--fun-logo-glow-intensity, 1)));
}

.fun-letter--green::before {
    text-shadow:
        0 0 calc(18px * var(--fun-logo-glow-size, 1)) rgba(0, 255, 0, calc(0.85 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(42px * var(--fun-logo-glow-size, 1)) rgba(0, 255, 0, calc(0.65 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(90px * var(--fun-logo-glow-size, 1)) rgba(0, 255, 0, calc(0.40 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(160px * var(--fun-logo-glow-size, 1)) rgba(0, 255, 0, calc(0.20 * var(--fun-logo-glow-intensity, 1)));
}

.fun-letter--blue::before {
    /* b + (i,v) to complete ROYGBV within 5 letters */
    text-shadow:
        0 0 calc(18px * var(--fun-logo-glow-size, 1)) rgba(0, 136, 255, calc(0.95 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(42px * var(--fun-logo-glow-size, 1)) rgba(0, 136, 255, calc(0.75 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(90px * var(--fun-logo-glow-size, 1)) rgba(0, 136, 255, calc(0.45 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(160px * var(--fun-logo-glow-size, 1)) rgba(0, 136, 255, calc(0.22 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(26px * var(--fun-logo-glow-size, 1)) rgba(75, 0, 130, calc(0.55 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(70px * var(--fun-logo-glow-size, 1)) rgba(75, 0, 130, calc(0.30 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(26px * var(--fun-logo-glow-size, 1)) rgba(138, 43, 226, calc(0.45 * var(--fun-logo-glow-intensity, 1))),
        0 0 calc(70px * var(--fun-logo-glow-size, 1)) rgba(138, 43, 226, calc(0.25 * var(--fun-logo-glow-intensity, 1)));
}

.header-nav {
    margin-left: auto;
}

.logo-brand {
    font-family: 'Roboto', 'Rubik Glitch', 'Babylonica', 'Workbench', 'Archivo Black', Impact, sans-serif;
    font-size: 24px;
    color: var(--color-blue);
    font-weight: 900;
    /* Only variable fonts support this; safe to keep unset for Babylonica. */
    text-transform: lowercase;
    position: relative;
    /* Establish a local stacking context so the prismatic `::before` (z:-1)
       can't slip behind ancestor layers (notably the fixed footer glass). */
    z-index: 0;
    isolation: isolate;
    /* Blue text with white shine sweep */
    background: linear-gradient(
        90deg,
        var(--color-blue) 0%,
        var(--color-blue) 40%,
        #A8D4FF 50%,
        var(--color-blue) 60%,
        var(--color-blue) 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: text-shine 12s ease-in-out infinite;
}

/* Rainbow prismatic glow behind the text */
.logo-brand::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-transform: inherit;
    background: linear-gradient(
        90deg,
        #FF0000 0%,
        #FF8800 20%,
        #FFFF00 40%,
        #00FF00 60%,
        #0088FF 80%,
        #FF00FF 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: var(--prism-filter, url(#blur-45));
    opacity: 0.5;
    z-index: -1;
    /* Encourage stable compositor behavior on browsers that glitch
       background-clip text inside fixed/backdrop-filter containers. */
    will-change: filter, background-position, mask-position;
    /* Radial mask synced with text-shine */
    -webkit-mask-image: radial-gradient(
        ellipse 25% 120% at center,
        white 0%,
        rgba(255,255,255,0.5) 40%,
        transparent 70%
    );
    mask-image: radial-gradient(
        ellipse 25% 120% at center,
        white 0%,
        rgba(255,255,255,0.5) 40%,
        transparent 70%
    );
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: prism-glow 12s ease-in-out infinite;
}

@keyframes text-shine {
    0%, 4% {
        background-position: 100% 50%;  /* Hold at right */
    }
    12%, 46% {
        background-position: 0% 50%;    /* Sweep left, hold */
    }
    54%, 100% {
        background-position: 100% 50%;  /* Sweep right, hold */
    }
}

@keyframes prism-glow {
    0%, 4% {
        -webkit-mask-position: 100% 50%;
        mask-position: 100% 50%;
        background-position: 100% 50%;  /* Hold at right */
    }
    12%, 46% {
        -webkit-mask-position: 0% 50%;
        mask-position: 0% 50%;
        background-position: 0% 50%;    /* Sweep left, hold */
    }
    54%, 100% {
        -webkit-mask-position: 100% 50%;
        mask-position: 100% 50%;
        background-position: 100% 50%;  /* Sweep right, hold */
    }
}

.logo-divider {
    color: var(--color-text-muted);
}

.logo-text {
    color: var(--color-white);
    font-size: 16px;
}

.header-nav a {
    color: var(--color-text);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.header-nav a:hover {
    background: var(--color-card);
}

/* ============================================
   Index Page - Episode Grid
   ============================================ */

.index-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 40px 48px;
}

.index-container h1 {
    color: var(--color-white);
    font-size: 32px;
    margin-bottom: 32px;
}

.episode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}

.episode-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-decoration: none;
    transition: all 0.2s;
    display: block;
}

.episode-card:hover {
    border-color: var(--color-blue);
    transform: translateY(-2px);
}

.episode-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.episode-card h2 {
    color: var(--color-white);
    font-size: 18px;
    line-height: 1.3;
}

.template-badge {
    background: var(--color-black);
    color: var(--color-blue);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    white-space: nowrap;
}

.episode-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.status-indicator {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}

.status-ok {
    background: rgba(57, 255, 20, 0.15);
    color: var(--color-green);
}

.status-pending {
    background: rgba(255, 215, 0, 0.15);
    color: var(--color-blue);
}

.episode-card-path {
    font-size: 12px;
    color: var(--color-text-muted);
    font-family: 'Source Code Pro', monospace;
}

.empty-state {
    text-align: center;
    padding: 80px 24px;
    color: var(--color-text-muted);
}

.empty-state code {
    background: var(--color-card);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

/* ============================================
   Project Chooser Page
   ============================================ */

/* Projects page - expanded header */
/* body.projects-page { } */

.projects-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 48px 48px;
}

.projects-container h1 {
    font-size: 28px;
    margin-bottom: 32px;
    color: var(--color-white);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}

.project-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-decoration: none;
    transition: all 0.2s;
    display: block;
    position: relative;
}

.project-card:hover {
    border-color: var(--color-blue);
    transform: translateY(-2px);
}

.project-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.project-delete-btn {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: rgba(0, 0, 0, 0.25);
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}

.project-delete-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.project-delete-btn:hover {
    background: rgba(255, 0, 0, 0.12);
    border-color: rgba(255, 0, 0, 0.25);
    color: #ff6b6b;
    transform: translateY(-1px);
}

.project-delete-btn:disabled,
.project-delete-btn.is-busy {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.project-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.project-card h2 {
    color: var(--color-white);
    font-size: 20px;
    line-height: 1.3;
}

.project-type-badge {
    background: var(--color-black);
    color: var(--color-blue);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    white-space: nowrap;
}

.project-card-stats {
    margin-bottom: 16px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.stat-label {
    color: var(--color-text-muted);
    font-size: 13px;
}

.stat-value {
    color: var(--color-white);
    font-size: 13px;
    font-weight: 700;
}

.stage-breakdown {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.stage-chip {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-muted);
}

.stage-chip--draft { background: rgba(53, 152, 219, 0.2); color: var(--color-blue); }
.stage-chip--fact_check { background: rgba(26, 188, 156, 0.2); color: #1abc9c; }
.stage-chip--legal { background: rgba(155, 89, 182, 0.2); color: #9b59b6; }
.stage-chip--production { background: rgba(241, 196, 15, 0.2); color: #f1c40f; }
.stage-chip--qa { background: rgba(230, 126, 34, 0.2); color: #e67e22; }
.stage-chip--published { background: rgba(57, 255, 20, 0.2); color: var(--color-green); }
.stage-chip--archived { background: rgba(127, 140, 141, 0.2); color: #7f8c8d; }

.project-card-footer {
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-updated {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Project card members (avatars) */
.project-card-members {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.project-member-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid #6b7280; /* offline default */
    box-sizing: border-box;
}

.project-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-member-avatar.is-offline {
    border-color: #6b7280;
}

.project-member-avatar.is-online {
    border-color: var(--color-green);
}

.project-member-avatar.is-onproject {
    border-color: var(--color-blue);
}

.project-member-initials {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.02em;
}

.project-member-more {
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

/* New Project Card */
button.new-project-card {
    cursor: pointer;
    font: inherit;
    border-width: 2px;
}

.new-project-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    border-style: dashed;
    border-color: var(--color-border);
    background: transparent;
}

.new-project-card:hover {
    border-color: var(--color-blue);
    background: rgba(53, 152, 219, 0.05);
}

.new-project-plus {
    font-size: 64px;
    font-weight: 100;
    color: var(--color-text-muted);
    line-height: 1;
    transition: color 0.2s;
}

.new-project-card:hover .new-project-plus {
    color: var(--color-blue);
}

/* ============================================
   Poster Cards (Movie Poster Style)
   ============================================ */
.poster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
    padding: 8px;
}

.poster-card {
    display: block;
    text-decoration: none;
    color: inherit;
    aspect-ratio: 2 / 3;
    perspective: 1000px;
    cursor: pointer;
    outline: none;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
}

.poster-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.4s ease-out, box-shadow 0.3s ease-out;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.poster-card:hover .poster-card-inner,
.poster-card:focus .poster-card-inner {
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(53, 152, 219, 0.15);
}

/* Poster image area */
.poster-image {
    position: absolute;
    inset: 0;
    background: var(--color-card);
}

.poster-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient placeholders by project type */
.poster-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.poster-placeholder--general {
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.poster-placeholder--film {
    background: linear-gradient(145deg, #2d132c 0%, #801336 50%, #c72c41 100%);
}

.poster-placeholder--series {
    background: linear-gradient(145deg, #1a1a2e 0%, #0d7377 50%, #14ffec 100%);
}

.poster-placeholder--documentary {
    background: linear-gradient(145deg, #2c3e50 0%, #3498db 50%, #1abc9c 100%);
}

.poster-placeholder--short {
    background: linear-gradient(145deg, #1a1a2e 0%, #6a0572 50%, #ab83a1 100%);
}

.poster-placeholder--new {
    background: var(--color-card);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
}

.poster-icon {
    width: 64px;
    height: 64px;
    fill: rgba(255, 255, 255, 0.15);
}

/* Info overlay at bottom */
.poster-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 48px 16px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.poster-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mini stage indicators */
.poster-stages {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.poster-stage {
    width: 24px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.poster-stage-count {
    position: absolute;
    font-size: 8px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Stage colors */
.poster-stage--development { background: rgba(53, 152, 219, 0.6); }
.poster-stage--prep { background: rgba(155, 89, 182, 0.6); }
.poster-stage--production { background: rgba(241, 196, 15, 0.6); }
.poster-stage--post { background: rgba(230, 126, 34, 0.6); }
.poster-stage--complete { background: rgba(57, 255, 20, 0.6); }
.poster-stage--draft { background: rgba(53, 152, 219, 0.6); }
.poster-stage--fact_check { background: rgba(26, 188, 156, 0.6); }
.poster-stage--legal { background: rgba(155, 89, 182, 0.6); }
.poster-stage--qa { background: rgba(230, 126, 34, 0.6); }
.poster-stage--published { background: rgba(57, 255, 20, 0.6); }
.poster-stage--archived { background: rgba(127, 140, 141, 0.6); }

.poster-empty-badge {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Shine effect overlay */
.poster-shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    border-radius: inherit;
}

/* New project card styling */
.poster-card--new .poster-card-inner {
    background: var(--color-card);
}

.poster-card--new:hover .poster-placeholder--new {
    border-color: var(--color-blue);
    background: rgba(53, 152, 219, 0.05);
}

.poster-card--new .new-project-plus {
    font-size: 56px;
    font-weight: 200;
    color: var(--color-text-muted);
    transition: color 0.2s, transform 0.2s;
}

.poster-card--new:hover .new-project-plus {
    color: var(--color-blue);
    transform: scale(1.1);
}

/* Continue Reading card (screenplay-first UX) */
.poster-card--continue {
    order: -1; /* Always show first */
}

.poster-placeholder--continue {
    background: linear-gradient(145deg, #0d2d3a 0%, #00526b 50%, #00a6a6 100%);
}

.poster-card--continue .poster-icon {
    fill: rgba(0, 217, 255, 0.5);
    width: 48px;
    height: 48px;
}

.poster-continue-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-cyan, #00d9ff);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
    margin-bottom: 6px;
}

.poster-card--continue:hover .poster-placeholder--continue {
    background: linear-gradient(145deg, #0f3a4a 0%, #00617d 50%, #00c4c4 100%);
}

.poster-card--continue:hover .poster-icon {
    fill: rgba(0, 217, 255, 0.8);
}

/* Context menu */
.poster-context-menu {
    position: fixed;
    z-index: 1000;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 4px;
    min-width: 160px;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    color: var(--color-white);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.context-menu-item svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.context-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.context-menu-item--delete:hover {
    background: rgba(255, 0, 0, 0.15);
    color: #ff6b6b;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .poster-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 16px;
    }

    .poster-title {
        font-size: 14px;
    }

    .poster-info {
        padding: 32px 12px 12px;
    }
}

@media (max-width: 480px) {
    .poster-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .poster-title {
        font-size: 13px;
    }

    .poster-card--new .new-project-plus {
        font-size: 40px;
    }
}

/* ============================================
   Preview Page Layout
   ============================================ */

.preview-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height) - var(--pipeline-height) - var(--footer-height));
    width: 100%;
    margin-top: var(--pipeline-height);  /* Space for fixed workflow pipeline */
}

/* Sidebar is a fixed drawer, hidden by default */
.preview-sidebar {
    position: fixed;
    left: 0;
    top: calc(var(--header-height) + var(--pipeline-height)); /* Below header + pipeline */
    width: 280px;
    height: calc(100vh - var(--header-height) - var(--pipeline-height) - var(--footer-height));
    background: var(--color-card);
    border-right: 1px solid var(--color-border);
    padding: 24px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 60;
    overflow-y: auto;
}

.preview-sidebar.open {
    transform: translateX(0);
}

.preview-sidebar h3 {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 12px;
    margin-top: 24px;
}

.preview-sidebar h3:first-child {
    margin-top: 0;
}

/* Sidebar header with sort */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sidebar-header h3 {
    margin: 0;
}

.sidebar-sort {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    cursor: pointer;
}

.sidebar-sort:hover {
    border-color: var(--color-cyan);
}

.sidebar-sort:focus {
    outline: none;
    border-color: var(--color-cyan);
}

/* Episode navigation list */
.episode-nav {
    list-style: none;
}

.episode-nav-item {
    margin-bottom: 2px;
    border-left: 3px solid var(--stage-color, var(--color-border));
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: all 0.15s;
}

.episode-nav-item a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.15s;
}

.episode-nav-item a:hover {
    background: var(--color-bg);
}

.episode-nav-item.active {
    border-left-color: var(--color-blue);
    background: rgba(255, 215, 0, 0.1);
}

.episode-nav-item.active a {
    color: var(--color-blue);
    font-weight: 600;
}

/* Episode title */
.ep-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badges */
.ep-badges {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.ep-badge {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.ep-badge-blocker {
    background: var(--color-red);
    color: white;
}

.ep-badge-verified {
    background: var(--color-green);
    color: white;
    font-size: 9px;
}

.view-toggle {
    display: flex;
    gap: 4px;
}

.view-toggle button {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.view-toggle button:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.view-toggle button:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.view-toggle button.active {
    background: var(--color-blue);
    color: var(--color-black);
    border-color: var(--color-blue);
    position: relative;
    overflow: hidden;
}

.view-toggle button.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );
    animation: shine-sweep 3s ease-in-out infinite;
    pointer-events: none;
}

.action-btn {
    width: 100%;
    padding: 12px;
    background: var(--color-cyan);
    color: var(--color-black);
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.action-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shine-sweep 4s ease-in-out infinite;
    pointer-events: none;
}

.action-btn:hover {
    opacity: 0.9;
}

.action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.validation-result {
    margin-top: 12px;
    text-align: center;
}

.validation-pass {
    color: var(--color-green);
    font-weight: bold;
}

.validation-fail {
    color: var(--color-red);
    font-weight: bold;
}

.validation-warn {
    color: #FFA500;
    font-weight: bold;
}

.validation-unknown,
.validation-error {
    color: var(--color-blue);
    font-size: 13px;
}

/* Validation Details */
.validation-details {
    margin-top: 12px;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 8px 0;
}

.check-list li {
    padding: 8px 12px;
    margin: 4px 0;
    border-radius: var(--radius-sm);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.check-icon {
    font-weight: bold;
    width: 16px;
    text-align: center;
}

.check-pass {
    background: rgba(57, 255, 20, 0.1);
    color: var(--color-green);
}

.check-fail {
    background: rgba(255, 46, 59, 0.1);
    color: var(--color-red);
}

.check-warn {
    background: rgba(255, 165, 0, 0.15);
    color: #FFA500;
}

.check-skip {
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-blue);
}

.output-details {
    margin-top: 12px;
}

.output-details summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text-muted);
    padding: 4px 0;
}

.output-details summary:hover {
    color: var(--color-text);
}

.output-raw {
    font-family: 'Source Code Pro', monospace;
    font-size: 11px;
    background: var(--color-black);
    padding: 12px;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    margin-top: 8px;
}

.output-errors {
    font-family: 'Source Code Pro', monospace;
    font-size: 11px;
    background: rgba(255, 46, 59, 0.1);
    color: var(--color-red);
    padding: 12px;
    border-radius: var(--radius-sm);
    margin-top: 8px;
    white-space: pre-wrap;
}

.preview-main {
    flex: 1 1 0;
    height: 0;
    min-height: 0;
    /* Add padding for fixed toolbar */
    padding: var(--preview-toolbar-height, 48px) 0 0 0;
    background: #2a2a2a;
    display: flex;
    flex-direction: column;
}

/* Preview Toolbar */
.preview-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    /* Fixed positioning - sticks below site header + pancake strip */
    position: fixed;
    top: calc(var(--header-height, 72px) + var(--pancake-header-height, 0px));
    left: 0;
    right: 0;
    z-index: 100;
    /* Smooth transition when pancake strips appear/disappear */
    transition: top 0.25s ease-out;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-toolbar .view-toggle {
    display: flex;
    gap: 0;
}

.preview-toolbar .view-toggle button {
    padding: 6px 14px;
    font-size: 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.preview-toolbar .view-toggle button:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-right: none;
}

.preview-toolbar .view-toggle button:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.preview-toolbar .view-toggle button:hover {
    color: var(--color-text);
}

.preview-toolbar .view-toggle button.active {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-black);
}

/* Fountain tab goes red only when there are unsaved edits */
body.edit-mode.edit-dirty .preview-toolbar .view-toggle #btn-fountain.active {
    background: var(--color-red);
    border-color: var(--color-red);
    color: var(--color-black);
}

/* Fountain save/cancel action buttons */
.fountain-actions {
    display: flex;
    gap: 4px;
    margin-left: 8px;
}

.fountain-action-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fountain-action-btn.save {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #22c55e;
}

.fountain-action-btn.save:hover {
    background: rgba(34, 197, 94, 0.3);
    border-color: #22c55e;
}

.fountain-action-btn.save:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.fountain-action-btn.cancel {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

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

.toolbar-btn {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar-btn:hover {
    border-color: var(--color-cyan);
    color: var(--color-text);
}

.toolbar-btn.active {
    background: rgba(30, 136, 229, 0.15);
    border-color: var(--accent-color, #1E88E5);
    color: var(--accent-color, #1E88E5);
}

/* Panel Arrange Dropdown */
.panel-arrange-dropdown {
    position: relative;
    display: inline-block;
}

.panel-arrange-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    min-width: 180px;
    padding: 4px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.panel-arrange-dropdown.is-open .panel-arrange-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.panel-arrange-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--color-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s ease;
}

.panel-arrange-item:hover {
    background: rgba(0, 217, 255, 0.1);
}

.panel-arrange-icon {
    width: 20px;
    text-align: center;
    opacity: 0.7;
}

.panel-arrange-shortcut {
    margin-left: auto;
    font-size: 11px;
    color: var(--color-text-muted);
    opacity: 0.6;
}

.panel-arrange-divider {
    height: 1px;
    background: var(--color-border);
    margin: 4px 0;
}

.panel-arrange-label {
    padding: 4px 12px 2px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    opacity: 0.7;
}

.toolbar-badge {
    background: var(--color-bg);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    min-width: 18px;
    text-align: center;
}

/* Atomic Timecode (Header - Centered) */
.atomic-timecode {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-decoration: none;
    cursor: pointer;
}

.atomic-timecode:hover .atomic-timecode__display {
    color: var(--color-cyan, #00D9FF);
}

.atomic-timecode__display {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    transition: color 150ms ease;
}

/* Subtle glow when synced to atomic clock */
.atomic-timecode.is-synced .atomic-timecode__display {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
}

/* Responsive - hide on small screens */
@media (max-width: 600px) {
    .atomic-timecode {
        display: none;
    }
}

/* Panels Menu (Header) */
.panels-menu {
    position: relative;
    margin-right: 12px;
}

.panels-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.panels-menu-trigger:hover {
    border-color: var(--color-cyan);
    color: var(--color-cyan);
    background: rgba(0, 217, 255, 0.1);
}

.panels-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    min-width: 200px;
    padding: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1001;
}

.panels-menu-dropdown.hidden {
    display: none;
}

.panels-menu-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
    padding: 0 4px;
}

.panels-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.panels-menu-panel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.panels-menu-panel:hover {
    border-color: var(--panel-color, var(--color-cyan));
    background: rgba(255, 255, 255, 0.05);
}

.panels-menu-panel.is-open {
    border-color: var(--panel-color, var(--color-cyan));
    background: rgba(var(--panel-color), 0.15);
}

.panels-menu-panel.is-open .panels-menu-dot {
    opacity: 1;
    transform: scale(1.2);
}

.panels-menu-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--panel-color, #888);
    opacity: 0.5;
    transition: all 0.15s ease;
}

.panels-menu-divider {
    height: 1px;
    background: var(--color-border);
    margin: 10px 0;
}

.panels-menu-actions {
    display: flex;
    gap: 6px;
}

.panels-menu-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.panels-menu-action:hover {
    border-color: var(--color-cyan);
    color: var(--color-text);
    background: rgba(0, 217, 255, 0.1);
}

.panels-menu-action span:first-child {
    font-size: 14px;
}

/* Node Placeholder Styles (for panels without script context) */
.node-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: var(--color-text-muted);
}

.node-placeholder__icon {
    opacity: 0.4;
    margin-bottom: 12px;
}

.node-placeholder__text {
    font-size: 14px;
    margin: 0 0 4px 0;
}

.node-placeholder__hint {
    font-size: 12px;
    opacity: 0.7;
    margin: 0;
}

.node-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.node-loading__spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.node-loading__text {
    margin-top: 12px;
    font-size: 12px;
    color: var(--color-text-muted);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.node-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    text-align: center;
}

.node-error__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(229, 57, 53, 0.2);
    color: #E53935;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 12px;
}

.node-error__text {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

/* Version dirty indicator */
.version-dirty-indicator {
    color: var(--color-blue);
    font-size: 12px;
    margin-left: 8px;
    animation: pulse-dirty 1.5s ease-in-out infinite;
}

@keyframes pulse-dirty {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Multiline metadata values (used by node panels) */
.metadata-multiline {
    white-space: pre-wrap;
    text-align: left;
    max-height: 60px;
    overflow-y: auto;
}

/* Editable metadata values */
.metadata-editable {
    cursor: text;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background 0.15s;
    min-width: 40px;
}

.metadata-editable:hover {
    background: rgba(59, 130, 246, 0.1);
    cursor: text;
}

.metadata-editable.is-editing {
    background: var(--color-surface);
    outline: 2px solid var(--color-blue);
    outline-offset: 1px;
}

/* Calculated metadata values (read-only, auto-computed) */
.metadata-calculated {
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Metadata edit inputs (used by node panels) */
.metadata-edit-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 12px;
    font-family: inherit;
}

.metadata-edit-input:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.metadata-edit-textarea {
    resize: vertical;
    min-height: 60px;
}

/* Hide title page lines from screenplay (shown in metadata panel) */
.screenplay .line-title {
    display: none;
}

/* Fountain Editor */
.fountain-editor {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    height: auto;
    min-height: calc(100vh - 300px);
}

.fountain-textarea {
    flex: 1 1 0;
    height: auto;
    min-height: calc(100vh - 350px);
    width: 100%;
    padding: 40px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12pt;
    line-height: 1.6;
    background: #1e1e1e;
    color: #d4d4d4;
    border: none;
    resize: none;
    outline: none;
    tab-size: 4;
}

.fountain-textarea:focus {
    background: #1a1a1a;
}

.fountain-editor-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: var(--color-card);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

#fountain-status {
    font-size: 12px;
    color: var(--color-text-muted);
}

#fountain-status.saving {
    color: var(--color-blue);
}

#fountain-status.saved {
    color: var(--color-green);
}

#fountain-status.error {
    color: var(--color-red);
}

.btn-save {
    background: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-black);
}

.btn-save:hover {
    opacity: 0.9;
    border-color: var(--color-green);
    color: var(--color-black);
}

/* Screenplay container wrapper */
.preview-main .screenplay-container {
    margin: 0;
}

/* ============================================
   Screenplay Formatting
   ============================================ */

.screenplay-container {
    position: relative; /* Anchor for lined-script-container overlay */
    font-family: 'Courier New', Courier, monospace;
    font-size: 12pt;
    line-height: 1.5;
    color: var(--screenplay-text);
    background: transparent; /* Background now per-cell */
    width: 100%;
    max-width: none; /* Full width - grid columns control widths */
    padding: 0;
}

/* .screenplay: container for all screenplay content (no direct styles needed) */

/* Title Page Elements */
.title-element {
    text-align: center;
    margin-bottom: 8px;
}

.title-element strong {
    font-weight: bold;
    margin-right: 8px;
}

/* Character Names */
.character {
    text-align: center;
    text-transform: uppercase;
    font-weight: normal;
    margin-top: 24px;
    margin-bottom: 4px;
}

/* Dialogue Block */
.dialogue-block {
    margin: 0;
}

/* Dialogue Lines */
.dialogue {
    margin: 0;
    text-align: left;
}

/* Action Lines */
.action {
    margin: 0;
    text-align: left;
}

/* Technical Notes [[...]] */
.note {
    font-size: 10pt;
    color: #666;
    font-style: italic;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Scene Breaks - no longer rendered, kept for reference */
.scene-break {
    display: none;
}

hr.scene-break {
    height: 0;
}

/* End Marker */
.end-marker {
    text-align: center;
    margin-top: 48px;
    font-weight: bold;
    letter-spacing: 2px;
}

/* Raw Fountain View */
.fountain-raw {
    font-family: 'Source Code Pro', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 24px;
    border-radius: var(--radius-md);
    max-width: 800px;
    width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ============================================
   Footer
   ============================================ */

.site-footer {
    /* Match header styling (dark frosted glass), at half height */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;

    height: var(--footer-height);
    padding: 0 24px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background: rgba(10, 10, 10, 0.40);
    -webkit-backdrop-filter: blur(18px) brightness(0.55) contrast(1.35) saturate(1.5);
    backdrop-filter: blur(18px) brightness(0.55) contrast(1.35) saturate(1.5);

    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.2;
    border-top: 2px solid var(--color-blue);
    /* Depth (upwards) */
    box-shadow:
        0 -10px 26px rgba(0, 0, 0, 0.60),
        0 -2px 0 rgba(59, 158, 255, 0.18);
}

.site-footer p {
    margin: 0;
}

.footer-logo-link {
    display: flex;
    align-items: center;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Master-only footer edit mode toggle */
.master-footer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
    user-select: none;
}

.master-footer-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.master-footer-toggle__pill {
    width: 42px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    display: inline-flex;
    align-items: center;
    padding: 2px;
    cursor: pointer;
    transition: all 160ms ease;
}

.master-footer-toggle__dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    transition: transform 160ms ease, background 160ms ease;
}

.master-footer-toggle__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.master-footer-toggle input:checked + .master-footer-toggle__pill {
    border-color: rgba(255, 215, 0, 0.35);
    background: rgba(255, 215, 0, 0.14);
}

.master-footer-toggle input:checked + .master-footer-toggle__pill .master-footer-toggle__dot {
    transform: translateX(20px);
    background: rgba(255, 255, 255, 0.95);
}

.master-footer-toggle:hover .master-footer-toggle__label {
    color: rgba(255, 255, 255, 0.88);
}

.dev-tuner-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.85;
}

.dev-tuner-icon {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    width: 18px;
    height: 18px;
    border-radius: 6px;
    font-size: 10px;
    line-height: 18px;
    padding: 0;
    cursor: pointer;
    user-select: none;
}

.dev-tuner-icon:hover {
    background: rgba(255, 255, 255, 0.10);
}

.footer-logo-img {
    height: 60px;
    width: auto;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.footer-logo-img:hover {
    opacity: 1;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 900px) {
    .preview-layout {
        flex-direction: column;
    }

    .preview-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        top: 0;
    }

    .episode-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        max-height: 200px;
        overflow-y: auto;
    }

    .episode-nav-item {
        margin: 0;
        border-left: none;
        border-radius: var(--radius-sm);
        background: var(--color-bg);
    }

    .sidebar-header {
        margin-bottom: 8px;
    }
}

@media (max-width: 900px) {
    :root {
        --footer-height: 32px;
    }

    /* Header adjustments for tablet */
    .site-header {
        padding: 12px 16px;
    }

    .logo-brand {
        font-size: 20px;
    }

    .logo-text {
        font-size: 14px;
    }

    .header-nav a {
        padding: 6px 12px;
        font-size: 14px;
    }

    /* Index page adjustments for tablet */
    .index-container {
        padding: 24px 16px;
    }

    .index-container h1 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .episode-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 600px) {
    :root {
        --footer-height: 30px;
    }

    /* Header - phone */
    .site-header {
        padding: 10px 12px;
    }

    .header-content {
        gap: 8px;
    }

    .logo-brand {
        font-size: 16px;
    }

    .logo-divider,
    .logo-text {
        display: none;
    }

    .header-nav {
        display: flex;
        gap: 4px;
    }

    .header-nav a {
        padding: 8px 10px;
        font-size: 12px;
    }

    /* Index page - phone */
    .index-container {
        padding: 16px 12px;
    }

    .index-container h1 {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .episode-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .episode-card {
        padding: 14px;
    }

    .episode-card-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .episode-card h2 {
        font-size: 15px;
    }

    .template-badge {
        font-size: 10px;
        padding: 3px 8px;
    }

    .episode-card-meta {
        gap: 6px;
    }

    .status-indicator {
        font-size: 10px;
        padding: 3px 8px;
    }

    .episode-card-path {
        font-size: 10px;
        word-break: break-all;
    }

    /* Empty state */
    .empty-state {
        padding: 32px 16px;
    }

    .empty-state p {
        font-size: 14px;
    }

    .empty-hint code {
        font-size: 11px;
        word-break: break-all;
    }

    /* Screenplay container */
    .screenplay-container {
        padding: 24px 16px;
        font-size: 11pt;
    }

    /* Dashboard adjustments */
    .dashboard-container {
        padding: 16px 12px;
    }

    .dashboard-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .dashboard-header h1 {
        font-size: 20px;
    }

    .dashboard-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .dashboard-controls input,
    .dashboard-controls select {
        width: 100%;
        min-width: 0;
    }

    .view-toggle-group {
        width: 100%;
        justify-content: center;
    }

    /* Kanban columns */
    .kanban-board {
        flex-direction: column;
        gap: 16px;
    }

    .kanban-column {
        min-width: 0;
        width: 100%;
    }

    .kanban-column-header h3 {
        font-size: 13px;
    }

    .kanban-episode {
        padding: 10px;
    }

    .kanban-episode-title {
        font-size: 13px;
    }

    /* List view table */
    .list-view-table {
        font-size: 12px;
    }

    .list-view-table th,
    .list-view-table td {
        padding: 10px 8px;
    }

    /* Hide less important columns on mobile */
    .list-view-table th:nth-child(3),
    .list-view-table td:nth-child(3),
    .list-view-table th:nth-child(5),
    .list-view-table td:nth-child(5) {
        display: none;
    }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .site-header,
    .site-footer,
    .preview-sidebar {
        display: none;
    }

    .preview-main {
        padding: 0;
        background: white;
    }

    .screenplay-container {
        box-shadow: none;
        max-width: 100%;
        padding: 0;
    }
}

/* Free tier print watermark */
.free-tier-watermark {
    display: none;
}

@media print {
    body.show-free-watermark .free-tier-watermark {
        display: block;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        font-size: 72px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.06);
        white-space: nowrap;
        pointer-events: none;
        z-index: 9999;
        text-transform: uppercase;
        letter-spacing: 10px;
    }

    body.show-free-watermark .free-tier-watermark::after {
        content: 'PRISM FREE';
    }
}

/* Free tier watermark badge (corner) - alternative lighter watermark */
.free-tier-badge-watermark {
    display: none;
}

@media print {
    body.show-free-watermark .free-tier-badge-watermark {
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
        padding: 8px 16px;
        font-size: 10px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        text-transform: uppercase;
        letter-spacing: 1px;
        z-index: 9999;
    }
}

/* ============================================
   Dashboard / Kanban Board
   ============================================ */

.dashboard-container {
    max-width: 100%;
    padding: 24px;
    overflow-x: auto;
}

/* Hierarchy Breadcrumb */
.hierarchy-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 16px;
    background: rgba(59, 158, 255, 0.08);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-blue);
}

.breadcrumb-back {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin-right: 4px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    opacity: 0.6;
    transition: all 0.15s ease;
}

.breadcrumb-back:hover {
    opacity: 1;
    color: var(--color-cyan);
    background: rgba(0, 217, 255, 0.1);
}

.breadcrumb-back svg {
    display: block;
}

.breadcrumb-org {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 13px;
}

.breadcrumb-org svg {
    opacity: 0.7;
}

.breadcrumb-separator {
    color: var(--color-border);
    font-size: 14px;
}

.breadcrumb-production {
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
}

.production-type-badge {
    background: var(--color-blue);
    color: var(--color-white);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
}

.breadcrumb-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    padding: 4px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    opacity: 0.6;
    transition: all 0.15s ease;
}

.breadcrumb-settings:hover {
    opacity: 1;
    color: var(--color-cyan);
    background: rgba(0, 217, 255, 0.1);
}

.breadcrumb-settings svg {
    display: block;
}

.breadcrumb-org-settings {
    margin-left: 0;
    margin-right: 4px;
}

.breadcrumb-production-settings {
    margin-left: 6px;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 0 8px;
    flex-wrap: wrap;
    gap: 16px;
}

.dashboard-header h1 {
    color: var(--color-white);
    font-size: 28px;
}

.dashboard-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label {
    color: var(--color-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-group select {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
}

.filter-group select:focus {
    outline: none;
    border-color: var(--color-cyan);
}

.dashboard-stats .stat {
    color: var(--color-text-muted);
    font-size: 14px;
}

.kanban-board {
    display: flex;
    gap: 16px;
    min-width: max-content;
    padding-bottom: 24px;
}

.kanban-column {
    width: 280px;
    min-width: 280px;
    background: var(--color-card);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 200px);
}

.column-header {
    padding: 16px;
    border-top: 4px solid var(--color-blue);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
}

.column-title {
    font-weight: 600;
    color: var(--color-white);
    font-size: 14px;
}

.column-count {
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 12px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.column-cards {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.column-empty {
    color: var(--color-text-muted);
    font-size: 13px;
    text-align: center;
    padding: 24px 12px;
}

/* New Idea Button (replaces empty state in Idea column) */
.new-idea-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 80px;
    order: 9999; /* Always appear after all cards */
    background: transparent;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.new-idea-btn:hover {
    border-color: var(--color-blue);
    background: rgba(53, 152, 219, 0.05);
}

.new-idea-plus {
    font-size: 36px;
    font-weight: 100;
    color: var(--color-text-muted);
    line-height: 1;
    transition: color 0.2s;
}

.new-idea-btn:hover .new-idea-plus {
    color: var(--color-blue);
}

/* Dropzone active state for fountain file drag-and-drop */
.new-idea-btn.dropzone-active {
    border-color: var(--color-cyan);
    background: rgba(0, 217, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
}

.new-idea-btn.dropzone-active .new-idea-plus {
    color: var(--color-cyan);
}

/* Document Upload Dropzones (concept/treatment fields) */
.document-dropzone {
    position: relative;
    transition: background 0.2s, outline-color 0.2s;
}

.document-dropzone.dropzone-active {
    background: rgba(59, 130, 246, 0.08);
    outline: 2px dashed var(--color-blue, #3B82F6);
    outline-offset: -2px;
    border-radius: var(--radius-sm, 4px);
}

.document-dropzone.dropzone-active::after {
    content: 'Drop .txt or .md file';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-blue, #3B82F6);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
}

/* Upload button next to label */
.document-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 6px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border, #333);
    border-radius: 4px;
    color: var(--color-text-muted, #888);
    cursor: pointer;
    vertical-align: middle;
    transition: all 0.15s;
}

.document-upload-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--color-blue, #3B82F6);
    color: var(--color-blue, #3B82F6);
}

.document-upload-btn:focus {
    outline: none;
    border-color: var(--color-blue, #3B82F6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

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

/* Upload button in wizard prompt row */
.wizard-prompt-row .document-upload-btn {
    margin-left: 0;
    margin-right: 8px;
    flex-shrink: 0;
}

.kanban-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px;
    transition: all 0.2s;
}

.kanban-card:hover {
    border-color: var(--color-blue);
}

/* Drag and Drop States */
.kanban-card.dragging {
    opacity: 0.4;
    border-color: var(--color-blue);
    cursor: grabbing;
}

.kanban-card[draggable="true"] {
    cursor: grab;
}

/* Pending state - shown immediately while fetching allowed transitions */
.kanban-column.drop-pending .column-header {
    border-top-color: var(--color-cyan) !important;
}

.kanban-column.drop-pending .column-cards {
    border: 1px dashed rgba(0, 217, 255, 0.25);
    border-radius: var(--radius-md);
}

/* Valid drop target */
.kanban-column.drop-valid .column-header {
    border-top-color: var(--color-green) !important;
}

.kanban-column.drop-valid .column-cards {
    border: 1px dashed rgba(57, 255, 20, 0.4);
    border-radius: var(--radius-md);
}

/* Invalid drop target */
.kanban-column.drop-invalid {
    opacity: 0.35;
}

.kanban-column.drop-invalid .column-header {
    border-top-color: #666 !important;
}

/* Hovering over valid column */
.kanban-column.drag-over .column-cards {
    background: rgba(59, 158, 255, 0.1);
    border-color: var(--color-blue);
    border-style: solid;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.card-title {
    color: var(--color-white);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.3;
    flex: 1;
}

.card-title:hover {
    color: var(--color-blue);
}

.card-category {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.card-category:hover {
    transform: scale(1.05);
}

/* Category colors */
.category-housing {
    background: rgba(59, 130, 246, 0.2);
    color: #60A5FA;
}

.category-corruption {
    background: rgba(239, 68, 68, 0.2);
    color: #F87171;
}

.category-democracy {
    background: rgba(139, 92, 246, 0.2);
    color: #A78BFA;
}

.category-economy {
    background: rgba(34, 197, 94, 0.2);
    color: #4ADE80;
}

.category-healthcare {
    background: rgba(236, 72, 153, 0.2);
    color: #F472B6;
}

.category-climate {
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
}

.category-immigration {
    background: rgba(251, 146, 60, 0.2);
    color: #FB923C;
}

.category-tech {
    background: rgba(99, 102, 241, 0.2);
    color: #818CF8;
}

.category-uncategorized {
    background: rgba(107, 114, 128, 0.2);
    color: #9CA3AF;
}

.card-meta {
    margin-bottom: 8px;
}

.card-template {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.card-status {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.card-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.badge-ok {
    background: rgba(57, 255, 20, 0.15);
    color: var(--color-green);
}

.badge-pending {
    background: rgba(255, 215, 0, 0.15);
    color: var(--color-blue);
}

.card-blockers {
    margin-bottom: 8px;
}

.blocker-tag {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: rgba(255, 46, 59, 0.15);
    color: var(--color-red);
    margin-right: 4px;
    margin-bottom: 4px;
}

.card-actions {
    display: flex;
    justify-content: flex-end;
}

.card-action-btn {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.card-action-btn:hover {
    border-color: var(--color-cyan);
    color: var(--color-cyan);
}

/* ============================================
   Dashboard / Kanban Mobile Responsive
   ============================================ */

/* Tablet breakpoint */
@media (max-width: 768px) {
    .project-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
    }

    .dashboard-container {
        padding: 16px;
        overflow-x: hidden;
    }

    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .dashboard-header h1 {
        font-size: 22px;
        text-align: center;
    }

    .dashboard-controls {
        flex-direction: column;
        gap: 12px;
    }

    .filter-group {
        width: 100%;
        justify-content: space-between;
    }

    .filter-group.search-group {
        order: -1;
    }

    .filter-group input,
    .filter-group select {
        flex: 1;
        min-width: 0;
    }

    #search-input {
        width: 100%;
    }

    .view-toggle {
        justify-content: center;
    }

    .dashboard-stats {
        text-align: center;
    }

    .kanban-board {
        flex-direction: column;
        min-width: 0;
        gap: 16px;
    }

    .kanban-column {
        width: 100%;
        min-width: 0;
        max-height: none;
    }

    .column-cards {
        max-height: 400px;
    }

    .kanban-card {
        width: 100%;
        box-sizing: border-box;
    }

    /* On mobile, vertical-flow should look identical to kanban view */
    .kanban-board.vertical-flow {
        gap: 16px;
    }

    .kanban-board.vertical-flow .kanban-column {
        flex-direction: column;
        padding: 0;
        border-bottom: none;
        background: var(--color-surface);
        border-radius: var(--radius-md);
    }

    .kanban-board.vertical-flow .column-header {
        width: 100%;
        min-width: 0;
        padding: 12px 16px;
        border-bottom: 1px solid var(--color-border);
        border-left: none;
        border-top-width: 3px;
        border-top-style: solid;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        background: var(--color-surface);
    }

    .kanban-board.vertical-flow .column-title {
        font-size: 14px;
    }

    .kanban-board.vertical-flow .column-count {
        font-size: 12px;
    }

    .kanban-board.vertical-flow .column-cards {
        flex-direction: column;
        padding: 12px;
        gap: 10px;
        max-height: 400px;
        overflow-y: auto;
    }

    .kanban-board.vertical-flow .kanban-card {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .kanban-board.vertical-flow .column-empty {
        padding: 16px;
        text-align: center;
    }

    .kanban-board.vertical-flow .column-cards .new-idea-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 60px;
    }

    /* Collapsed empty stages on tablet/mobile */
    .kanban-column.is-collapsed {
        padding: 8px 16px;
        min-height: 0;
        cursor: pointer;
        background: var(--color-surface);
        border-radius: var(--radius-sm);
    }

    .kanban-column.is-collapsed .column-header {
        opacity: 0.5;
        padding: 6px 10px;
        width: auto;
        min-width: 0;
        flex: 1;
        justify-content: flex-start;
        gap: 12px;
        background: transparent;
        border-left: 3px solid;
        border-radius: 0;
    }

    .kanban-column.is-collapsed .column-cards {
        display: none;
    }

    .kanban-column.is-collapsed .column-title {
        font-size: 13px;
    }

    .kanban-column.is-collapsed .column-count {
        font-size: 11px;
        opacity: 0.7;
    }

    /* List view table adjustments */
    .list-view {
        overflow-x: auto;
    }

    .episode-table {
        min-width: 600px;
    }
}

/* Phone breakpoint */
@media (max-width: 480px) {
    .project-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dashboard-container {
        padding: 12px 8px;
    }

    .dashboard-header h1 {
        font-size: 18px;
    }

    .filter-group label {
        font-size: 11px;
    }

    .filter-group select {
        font-size: 12px;
        padding: 8px 10px;
    }

    #search-input {
        font-size: 14px;
        padding: 10px 12px;
    }

    .kanban-column {
        border-radius: var(--radius-md);
    }

    .column-header {
        padding: 12px;
    }

    .column-title {
        font-size: 13px;
    }

    .column-cards {
        padding: 8px;
        gap: 8px;
        max-height: 350px;
    }

    .kanban-card {
        padding: 12px;
    }

    .card-title {
        font-size: 13px;
    }

    .card-meta,
    .card-status,
    .card-blockers {
        margin-bottom: 6px;
    }

    .card-template {
        font-size: 10px;
    }

    .card-badge,
    .blocker-tag {
        font-size: 9px;
        padding: 2px 6px;
    }

    .card-action-btn {
        font-size: 10px;
        padding: 6px 10px;
    }

    /* Collapsed empty stages on mobile */
    .kanban-column.is-collapsed {
        padding: 6px 12px;
        min-height: 0;
        cursor: pointer;
        border-radius: var(--radius-sm);
        background: var(--color-surface);
    }

    .kanban-column.is-collapsed .column-header {
        opacity: 0.5;
        padding: 4px 8px;
        width: auto;
        min-width: 0;
        flex: 1;
        justify-content: flex-start;
        gap: 12px;
        background: transparent;
        border-radius: 0;
        border-left: 3px solid;
    }

    .kanban-column.is-collapsed .column-cards {
        display: none;
    }

    .kanban-column.is-collapsed .column-title {
        font-size: 12px;
    }

    .kanban-column.is-collapsed .column-count {
        font-size: 11px;
        opacity: 0.7;
    }

    /* Vertical-flow phone adjustments (inherits tablet mobile layout) */
    .kanban-board.vertical-flow .column-header {
        padding: 10px 12px;
    }

    .kanban-board.vertical-flow .column-title {
        font-size: 13px;
    }

    .kanban-board.vertical-flow .column-cards {
        padding: 8px;
        gap: 8px;
        max-height: 350px;
    }

    .new-idea-btn {
        min-height: 60px;
    }

    .new-idea-plus {
        font-size: 28px;
    }

    /* Modal adjustments for mobile */
    .modal-content {
        min-width: auto;
        width: calc(100vw - 24px);
        max-width: 400px;
        margin: 12px;
        padding: 16px;
    }

    .modal-content h2 {
        font-size: 16px;
    }

    .modal-form label {
        font-size: 12px;
    }

    .modal-form select,
    .modal-form textarea,
    .modal-form input {
        font-size: 14px;
    }

    .modal-actions {
        flex-direction: column;
        gap: 8px;
    }

    .modal-actions .btn {
        width: 100%;
    }
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.hidden {
    display: none;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
}

.modal-content {
    position: relative;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    min-width: 360px;
    max-width: 90vw;
}

.modal-content h2 {
    color: var(--color-white);
    font-size: 18px;
    margin-bottom: 8px;
}

.modal-episode-title {
    color: var(--color-blue);
    font-size: 14px;
    margin-bottom: 20px;
}

.modal-form label {
    display: block;
    color: var(--color-text-muted);
    font-size: 12px;
    margin-bottom: 6px;
    margin-top: 16px;
}

.modal-form label:first-child {
    margin-top: 0;
}

.modal-form input[type="text"],
.modal-form select,
.modal-form textarea {
    width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--color-text);
    font-size: 14px;
    font-family: inherit;
}

.modal-form input[type="text"]:focus,
.modal-form select:focus,
.modal-form textarea:focus {
    outline: none;
    border-color: var(--color-cyan);
}

.modal-form input::placeholder,
.modal-form textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

/* Extended Modal Styles */
.modal-content-lg {
    min-width: 520px;
    max-width: 600px;
}

.modal-section {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 16px;
}

.modal-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.modal-section-header {
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

/* ============================================
   Section Drag Reordering (Master Edit Mode)
   ============================================ */

.section-drag-handle {
    display: none;
    position: absolute;
    left: -20px;
    top: 8px;
    width: 16px;
    height: 16px;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s ease;
    color: var(--color-text-muted);
    font-size: 14px;
    text-align: center;
    line-height: 16px;
    user-select: none;
}

body.edit-mode .modal-section[data-section-id] {
    position: relative;
}

body.edit-mode .section-drag-handle {
    display: block;
}

body.edit-mode .modal-section[data-section-id]:hover .section-drag-handle {
    opacity: 0.5;
}

body.edit-mode .modal-section[data-section-id] .section-drag-handle:hover {
    opacity: 1;
    color: var(--color-yellow);
}

.section-drag-handle:active {
    cursor: grabbing;
}

.modal-section.is-section-dragging {
    opacity: 0.95;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--color-yellow);
    background: var(--color-card);
    pointer-events: none;
    border-radius: var(--radius-sm);
}

.modal-section.section-placeholder {
    background: rgba(255, 215, 0, 0.1);
    border: 2px dashed var(--color-yellow);
    border-radius: var(--radius-sm);
    opacity: 0.5;
}

/* Highlight modal during section editing when dirty */
body.edit-mode.edit-dirty #new-idea-modal .modal-content {
    box-shadow: 0 0 0 2px rgba(255, 100, 110, 0.5),
                0 8px 32px rgba(0, 0, 0, 0.3);
}

.modal-row {
    display: flex;
    gap: 16px;
}

.modal-field {
    flex: 1;
    min-width: 0;
}

.modal-field-grow {
    flex: 2;
}

.modal-field label {
    margin-top: 0;
}

/* Tag Input Styles */
.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    min-height: 42px;
    align-items: center;
    cursor: text;
}

.tag-input-container:focus-within {
    border-color: var(--color-cyan);
}

.tag-input-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-input-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-cyan);
    color: var(--color-black);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
}

.tag-input-tag-remove {
    cursor: pointer;
    opacity: 0.7;
    font-size: 14px;
    line-height: 1;
}

.tag-input-tag-remove:hover {
    opacity: 1;
}

.tag-input {
    flex: 1;
    min-width: 100px;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 14px;
    color: var(--color-text);
}

.tag-input:focus {
    outline: none;
}

/* Date input styling */
.modal-form input[type="date"] {
    width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--color-text);
    font-size: 14px;
    font-family: inherit;
}

.modal-form input[type="date"]:focus {
    outline: none;
    border-color: var(--color-cyan);
}

.modal-form input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

/* Extended Modal - Mobile Responsive */
@media (max-width: 768px) {
    .modal-content-lg {
        min-width: auto;
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 48px);
        overflow-y: auto;
    }

    .modal-row {
        flex-direction: column;
        gap: 0;
    }

    .modal-field,
    .modal-field-grow {
        flex: none;
        width: 100%;
    }

    .modal-section {
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    .modal-section-header {
        font-size: 10px;
        margin-bottom: 8px;
    }

    .tag-input-container {
        min-height: 38px;
        padding: 6px 8px;
    }
}

.btn {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-cancel {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.btn-cancel:hover {
    background: var(--color-bg);
}

.btn-primary {
    background: var(--color-cyan);
    color: var(--color-black);
}

.btn-primary:hover {
    opacity: 0.9;
}

/* Stage badge for episode cards */
.stage-badge {
    display: inline-block;
    font-size: 10px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-weight: 500;
}

/* ============================================
   Workflow Controls (Preview Sidebar)
   ============================================ */

.workflow-status {
    margin-bottom: 16px;
}

.current-stage {
    margin-bottom: 12px;
}

.stage-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stage-btn {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.btn-advance {
    background: var(--color-green);
    color: var(--color-black);
    border-color: var(--color-green);
}

.btn-advance:hover {
    opacity: 0.9;
}

.btn-regress {
    background: transparent;
    color: var(--color-blue);
    border-color: var(--color-blue);
}

.btn-regress:hover {
    background: rgba(255, 215, 0, 0.1);
}

.btn-blocker {
    background: transparent;
    color: var(--color-red);
    border-color: var(--color-red);
    margin-top: 8px;
}

.btn-blocker:hover {
    background: rgba(255, 46, 59, 0.1);
}

.no-transitions {
    color: var(--color-text-muted);
    font-size: 12px;
    font-style: italic;
}

.blockers-list {
    margin-top: 8px;
}

.blocker-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blocker-resolve {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
}

.blocker-resolve:hover {
    background: var(--color-red);
    color: var(--color-white);
}

/* ============================================
   Archive Styles
   ============================================ */

.card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Show action buttons on card hover */
.kanban-card:hover .card-actions {
    opacity: 1;
    visibility: visible;
}

.btn-archive {
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.btn-archive:hover {
    border-color: #F59E0B;
    color: #FBBF24;
    background: rgba(245, 158, 11, 0.15);
}

.btn-unarchive {
    border-color: var(--color-green);
    color: var(--color-green);
}

.btn-unarchive:hover {
    background: rgba(57, 255, 20, 0.15);
}

/* Dashboard delete buttons: gray by default, red on hover */
.card-actions .btn-delete,
.episode-row .btn-delete {
    border-color: var(--color-border);
    color: var(--color-text-muted);
    background: transparent;
}

.card-actions .btn-delete:hover,
.episode-row .btn-delete:hover {
    border-color: var(--color-red);
    color: #F87171;
    background: rgba(239, 68, 68, 0.15);
}

.modal-warning {
    color: var(--color-text-muted);
    font-size: 13px;
    margin: 8px 0 16px 0;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid var(--color-red);
    border-radius: 4px;
}

.btn-danger {
    background: var(--color-red);
    color: var(--color-white);
}

.btn-danger:hover {
    opacity: 0.9;
}

/* Archived column styling */
.kanban-column[data-stage="archived"] {
    opacity: 0.7;
}

.kanban-column[data-stage="archived"]:hover {
    opacity: 1;
}

.kanban-column[data-stage="archived"] .kanban-card {
    border-style: dashed;
}

/* ============================================
   Hidden Episodes Page (Admin)
   ============================================ */

.hidden-episodes-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    background: rgba(0, 217, 255, 0.05);
    border: 1px solid rgba(0, 217, 255, 0.2);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 14px;
}

.hidden-episodes-info p {
    margin: 0;
}

.hidden-episodes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hidden-episode-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 0.2s;
}

.hidden-episode-card:hover {
    border-color: var(--color-cyan);
}

.hidden-episode-info {
    flex: 1;
}

.hidden-episode-title {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
}

.hidden-episode-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.hidden-episode-slug {
    font-family: var(--font-mono);
    color: var(--color-cyan);
}

.hidden-episode-date {
    color: var(--color-text-muted);
}

.hidden-episode-reason {
    color: var(--color-yellow);
}

.hidden-episode-actions {
    margin-left: 20px;
}

.hidden-episodes-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
}

.hidden-episodes-empty p {
    margin-bottom: 20px;
}

.admin-badge {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--color-red);
    border-radius: var(--radius-sm);
    color: var(--color-red);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-sm);
    color: var(--color-red);
    font-size: 12px;
    text-decoration: none;
    transition: all 0.2s;
}

.admin-link:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--color-red);
}

.admin-link svg {
    opacity: 0.8;
}

/* Discrete footer link for hidden episodes */
.dashboard-footer {
    text-align: right;
    padding: 16px 8px 8px;
}

.hidden-link {
    color: var(--color-text-muted);
    font-size: 12px;
    text-decoration: none;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.hidden-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.loading {
    text-align: center;
    padding: 40px;
    color: var(--color-text-muted);
}

.error {
    padding: 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--color-red);
    border-radius: var(--radius-md);
    color: var(--color-red);
}

/* ============================================
   Screenplay Canvas - Full-Width Container
   ============================================ */

.screenplay-canvas {
    position: relative;
    width: 100%;
    flex: 1 1 0;
    height: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--color-bg);
}

/* Hide the separate line number columns (line numbers now embedded in rows) */
.line-numbers-column {
    display: none;
}

/* Hide the separate gutter columns (gutter slots now embedded in rows) */
.notes-gutter {
    display: none;
}

/* Hide mobile gutter toggles */
.gutter-toggle,
.gutter-backdrop {
    display: none;
}

/* Gutter note cards */
.gutter-note-card {
    position: absolute;
    left: 4px;
    right: 4px;
    background: var(--color-card);
    border-radius: 4px;
    padding: 8px;
    font-size: 11px;
    border-left: 3px solid var(--color-cyan);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 1;
}

.gutter-note-card:hover {
    transform: translateX(2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.gutter-note-card.type-source {
    border-left-color: var(--color-cyan);
}

.gutter-note-card.type-note {
    border-left-color: #FFA500;
}

.gutter-note-card.type-timing {
    border-left-color: var(--color-blue);
}

.gutter-note-card.type-data {
    border-left-color: var(--color-green);
}

.gutter-note-card.type-media {
    border-left-color: #FF44AA;
}

.gutter-note-card .note-type-badge {
    display: inline-block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 4px;
    border-radius: 2px;
    margin-bottom: 4px;
}

.gutter-note-card .note-type-badge.type-source {
    background: rgba(0, 217, 255, 0.2);
    color: var(--color-cyan);
}

.gutter-note-card .note-type-badge.type-note {
    background: rgba(255, 165, 0, 0.2);
    color: #FFA500;
}

.gutter-note-card .note-type-badge.type-timing {
    background: rgba(255, 215, 0, 0.2);
    color: var(--color-blue);
}

.gutter-note-card .note-type-badge.type-data {
    background: rgba(57, 255, 20, 0.2);
    color: var(--color-green);
}

.gutter-note-card .note-type-badge.type-media {
    background: rgba(255, 68, 170, 0.2);
    color: #FF44AA;
}

.gutter-note-card .note-preview {
    color: var(--color-text);
    line-height: 1.3;
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gutter-note-card .note-line-ref {
    color: var(--color-text-muted);
    font-size: 9px;
    margin-top: 4px;
}

/* Connection lines from gutter cards to screenplay */
.gutter-connector {
    position: absolute;
    height: 1px;
    background: var(--color-border);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    z-index: 0;
}

.gutter-note-card:hover + .gutter-connector,
.gutter-note-card.active + .gutter-connector {
    opacity: 0.5;
}

/* ============================================
   Line Numbers & Interactive Lines (Per-Row Grid)
   ============================================ */

.screenplay {
    position: relative;
    width: 100%;
}

/* White paper strip running down the center (or colored for revision drafts) */
.screenplay::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 96px); /* Full width minus line number columns */
    max-width: 850px;
    min-width: 600px;
    background: var(--screenplay-bg);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
    z-index: 0;
    transition: background 0.5s ease-in-out;
}

/* ============================================
   Timeline Ruler (Left Gutter)
   ============================================ */
.timeline-ruler {
    position: absolute;
    left: 48px;  /* After line number column */
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
    z-index: 2;
}

.timeline-mark {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.timeline-mark::before {
    content: '';
    width: 8px;
    height: 1px;
    background: var(--color-text-muted);
    opacity: 0.5;
}

.timeline-mark .time-label {
    font-family: 'Source Code Pro', monospace;
    font-size: 9px;
    color: var(--color-text-muted);
    opacity: 0.6;
}

.timeline-mark.major::before {
    width: 12px;
    background: var(--color-blue);
    opacity: 0.8;
}

.timeline-mark.major .time-label {
    color: var(--color-blue);
    opacity: 0.9;
    font-weight: 600;
}

/* Timeline header - shows total duration and timing profile */
.timeline-header {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 4px;
    background: linear-gradient(180deg, var(--color-bg) 0%, transparent 100%);
    z-index: 3;
}

.timeline-total {
    font-family: 'Source Code Pro', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-cyan);
    letter-spacing: 0.5px;
}

.timeline-profile {
    font-family: 'Source Code Pro', monospace;
    font-size: 8px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0.7;
    letter-spacing: 0.5px;
}

/* Re-enable pointer events for header (parent has pointer-events: none) */
.timeline-header {
    pointer-events: auto;
}

.timeline-header .timeline-profile:hover {
    opacity: 1;
    color: var(--color-cyan);
}

/* ============================================
   Drift System - Production Intelligence
   ============================================ */
.drift-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

.drift-scene-marker {
    position: absolute;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: help;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 5;
}

.drift-scene-marker:hover {
    transform: scale(1.2);
}

/* Risk level colors */
.drift-scene-marker.drift-low {
    background: var(--color-green);
    box-shadow: 0 0 4px var(--color-green);
}

.drift-scene-marker.drift-medium {
    background: var(--color-yellow);
    box-shadow: 0 0 6px var(--color-yellow);
}

.drift-scene-marker.drift-high {
    background: var(--color-red);
    box-shadow: 0 0 8px var(--color-red);
    animation: drift-pulse 1.5s ease-in-out infinite;
}

@keyframes drift-pulse {
    0%, 100% { box-shadow: 0 0 8px var(--color-red); }
    50% { box-shadow: 0 0 16px var(--color-red), 0 0 24px rgba(255, 46, 59, 0.4); }
}

.drift-risk-badge {
    font-family: 'Source Code Pro', monospace;
    font-size: 9px;
    font-weight: 700;
    color: var(--color-black);
}

.drift-sync-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 6px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    pointer-events: auto;
    cursor: help;
}

.drift-sync-score .sync-label {
    font-family: 'Source Code Pro', monospace;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
}

.drift-sync-score .sync-value {
    font-family: 'Source Code Pro', monospace;
    font-size: 12px;
    font-weight: 700;
}

.drift-sync-score .sync-excellent { color: var(--color-green); }
.drift-sync-score .sync-good { color: var(--color-cyan); }
.drift-sync-score .sync-moderate { color: var(--color-yellow); }
.drift-sync-score .sync-poor { color: var(--color-red); }

/* Each script-line is a 6-column grid: [linenum | gutter | content | lined-script | gutter | linenum] */
/* Gutters are 1fr each so they stay EQUAL width, paper is fixed in center */
/* Lined-script column has dynamic width based on number of stacked shots */
/* Content width: 850px gives proper US Letter feel (6" content @ ~140 DPI effective) */
.script-line {
    display: grid;
    grid-template-columns: 48px 1fr minmax(600px, 850px) var(--lined-script-width, 0px) 1fr 48px;
    align-items: stretch;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    border-radius: 0;
    transition: background 0.15s ease;

    /* Scroll margin accounts for fixed header + pancaked node panels */
    scroll-margin-top: calc(var(--header-height, 72px) + var(--pancake-header-height, 0px) + var(--preview-toolbar-height, 48px) + 20px);
    scroll-margin-bottom: calc(var(--footer-height, 36px) + var(--pancake-footer-height, 0px) + 20px);
}

/* Alternating row colors (subtle checkerboard) */
.script-line:nth-child(odd) {
    background: rgba(255, 255, 255, 0.015);
}

.script-line:nth-child(even) {
    background: transparent;
}

.script-line:hover {
    background: rgba(255, 215, 0, 0.08) !important;
}

.script-line.selected {
    background: rgba(0, 217, 255, 0.12) !important;
}

.script-line.has-note {
    background: rgba(255, 165, 0, 0.08) !important;
}

/* Line numbers (left and right edges) - explicit grid positioning */
.line-num {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Source Code Pro', monospace;
    font-size: 10px;
    color: var(--color-text-muted);
    opacity: 0.4;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-border);
    padding: 2px 4px;
}

/* Explicit grid column positions for 6-column layout */
.line-num.left {
    grid-column: 1;
}

.line-content {
    grid-column: 3;
}

.line-num.right {
    grid-column: 6;
}

.line-num.left {
    border-right: none;
    border-radius: 0;
}

.line-num.right {
    border-left: none;
    border-radius: 0;
}

/* Gutter slots (for note indicators) */
.gutter-slot {
    position: relative;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border);
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gutter-slot.left {
    grid-column: 2;
    border-left: none;
    border-right: none;
    justify-content: flex-end;
    padding-right: 4px;
}

.gutter-slot.right {
    grid-column: 5;
    border-left: none;
    border-right: none;
    justify-content: flex-start;
    padding-left: 4px;
}

.line-num:hover {
    opacity: 1 !important;
    color: var(--color-cyan) !important;
    background: rgba(0, 217, 255, 0.1);
}

/* Selected line number styling */
.script-line.selected .line-num {
    opacity: 1;
    color: var(--color-cyan);
    font-weight: 600;
    background: rgba(0, 217, 255, 0.2);
}

/* Line with note indicator */
.script-line.has-note .line-num {
    color: #FFA500;
    opacity: 0.8;
}

.line-content {
    position: relative;
    padding: 2px var(--line-content-padding-right) 2px var(--line-content-padding-left);
    min-width: 0;
    /* Paper background provided by .screenplay::before - no bg here to avoid "teeth" */
    color: var(--screenplay-text);
}

/* Screenplay container - no margin needed, line numbers in edge columns */
.screenplay-container .screenplay {
    margin-left: 0;
}

/* Line type styling */
.line-title .line-content {
    color: #1a1a1a;
    font-size: 12pt;
    margin: 0;
}

/* Section markers - labels in gutter, not in paper */
.section-marker {
    min-height: 24px;
}

/* .section-marker .line-content: intentionally no styles (no content on paper for section markers) */

.section-marker .gutter-slot.left {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 16px;
}

.section-label {
    font-family: 'Source Code Pro', 'Courier New', monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    opacity: 0.9;
}

/* Legacy line-note styling (kept for backwards compatibility) */
.line-note .line-content {
    color: #888;
    font-style: italic;
    text-align: center;
    font-size: 11pt;
    margin: 0;
}

/* Industry Standard Screenplay Margins
   Character: Centered on page
   Dialogue: Centered block, 60% width, left-aligned text
   Parenthetical: Centered block, 45% width, centered text
   Action: Full width, left-aligned */

.line-character .line-content {
    text-align: center;
    margin-top: var(--character-margin-top);
    margin-left: var(--character-margin-left);
    padding-top: 0;
}

.line-character .character-name {
    text-transform: uppercase;
    font-weight: normal;
    display: inline-block;
}

.line-dialogue .line-content {
    text-align: left;
    margin-top: var(--dialogue-margin-top);
    margin-bottom: var(--dialogue-margin-bottom);
    margin-left: var(--dialogue-margin-left);
    margin-right: var(--dialogue-margin-right);
}

.line-parenthetical .line-content {
    text-align: center;
    margin-top: var(--parenthetical-margin-top);
    margin-bottom: var(--parenthetical-margin-bottom);
    margin-left: var(--parenthetical-margin-left);
    margin-right: var(--parenthetical-margin-right);
}

.line-action .line-content {
    margin-top: var(--action-margin-top);
    margin-bottom: var(--action-margin-bottom);
    margin-left: var(--action-margin-left);
    margin-right: var(--action-margin-right);
    text-align: left;
}

.line-end .line-content {
    text-align: center;
    margin-top: 0;
    padding-top: var(--end-padding-top);
    font-weight: 600;
}

.line-break .line-content {
    padding: var(--break-padding) 0;
}

.scene-break-line {
    border: none;
    border-top: 1px solid #ddd;
    margin: 0;
}

/* Note indicator tooltip */
.line-note-indicator {
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: #FFA500;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
    cursor: pointer;
}

/* Selection toolbar */
.line-selection-toolbar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

.line-selection-toolbar.hidden {
    display: none;
}

.selection-info {
    color: var(--color-text-muted);
    font-size: 13px;
}

.selection-info strong {
    color: var(--color-cyan);
}

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

.selection-btn {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.selection-btn:hover {
    border-color: var(--color-cyan);
    color: var(--color-cyan);
}

.selection-btn.btn-flag {
    border-color: #FFA500;
    color: #FFA500;
}

.selection-btn.btn-flag:hover {
    background: rgba(255, 165, 0, 0.15);
}

.selection-btn.btn-clear {
    color: var(--color-text-muted);
}

/* Line notes panel */
.line-notes-panel {
    position: fixed;
    top: 80px;
    right: 24px;
    width: 320px;
    max-height: calc(100vh - 120px);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    z-index: 90;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.line-notes-panel.hidden {
    display: none;
}

.notes-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.2);
}

.notes-panel-header h3 {
    margin: 0;
    font-size: 14px;
    color: var(--color-white);
}

.notes-panel-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
}

.notes-panel-close:hover {
    color: var(--color-white);
}

.notes-panel-content {
    padding: 16px;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.line-note-item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 12px;
}

.line-note-item:last-child {
    margin-bottom: 0;
}

.note-line-ref {
    font-family: 'Source Code Pro', monospace;
    font-size: 11px;
    color: var(--color-cyan);
    margin-bottom: 6px;
}

.note-line-ref:hover {
    cursor: pointer;
    text-decoration: underline;
}

.note-text-preview {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
    font-style: italic;
}

.note-content {
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.4;
}

.note-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.note-action-btn {
    background: none;
    border: none;
    font-size: 11px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 2px 6px;
}

.note-action-btn:hover {
    color: var(--color-cyan);
}

.note-action-btn.delete:hover {
    color: var(--color-red);
}

.no-notes {
    color: var(--color-text-muted);
    font-size: 13px;
    text-align: center;
    padding: 24px;
}

/* Note input modal */
.note-input-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.note-input-modal.hidden {
    display: none;
}

.note-input-content {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 480px;
    max-width: 90vw;
}

.note-input-content h3 {
    margin: 0 0 16px 0;
    color: var(--color-white);
}

.note-input-lines {
    font-family: 'Source Code Pro', monospace;
    font-size: 12px;
    color: var(--color-cyan);
    margin-bottom: 16px;
}

.note-input-textarea {
    width: 100%;
    height: 100px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px;
    color: var(--color-text);
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}

.note-input-textarea:focus {
    outline: none;
    border-color: var(--color-cyan);
}

.note-input-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

/* ============================================
   Dashboard Enhanced Controls
   ============================================ */

/* Search input */
.search-group {
    flex: 0 0 auto;
}

#search-input {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    width: 200px;
    transition: all 0.2s;
}

#search-input:focus {
    outline: none;
    border-color: var(--color-cyan);
    width: 260px;
}

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

/* Stage filter dropdown */
.stage-filter-toggle {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.stage-filter-toggle:hover {
    border-color: var(--color-cyan);
}

.dropdown-arrow {
    font-size: 10px;
    color: var(--color-text-muted);
}

.stage-filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 8px 0;
    min-width: 180px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.stage-filter-dropdown.hidden {
    display: none;
}

.filter-group {
    position: relative;
}

.stage-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text);
    transition: background 0.15s;
}

.stage-checkbox:hover {
    background: rgba(255, 255, 255, 0.05);
}

.stage-checkbox input[type="checkbox"] {
    accent-color: var(--color-cyan);
    width: 14px;
    height: 14px;
}

.stage-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.stage-filter-actions {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
}

.stage-filter-actions button {
    flex: 1;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

.stage-filter-actions button:hover {
    border-color: var(--color-cyan);
    color: var(--color-cyan);
}

/* View toggle buttons */
.dashboard-controls .view-toggle {
    display: flex;
    gap: 0;
}

.view-btn {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    padding: 6px 12px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.view-btn:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-right: none;
}

.view-btn:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.view-btn:hover {
    color: var(--color-text);
}

.view-btn.active {
    background: var(--color-blue);
    color: var(--color-black);
    border-color: var(--color-blue);
}

/* ============================================
   List View
   ============================================ */

.list-view {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.list-view.hidden {
    display: none;
}

.episode-table {
    width: 100%;
    border-collapse: collapse;
}

.episode-table th {
    text-align: left;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
}

.episode-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.episode-table th.sortable:hover {
    color: var(--color-cyan);
}

.episode-row {
    border-bottom: 1px solid var(--color-border);
    transition: background 0.15s;
}

.episode-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Hide action buttons in list view until row hover */
.episode-row .card-action-btn {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.episode-row:hover .card-action-btn {
    opacity: 1;
    visibility: visible;
}

.episode-row:last-child {
    border-bottom: none;
}

.episode-row td {
    padding: 12px 16px;
    vertical-align: middle;
}

.row-title a {
    color: var(--color-white);
    text-decoration: none;
    font-weight: 500;
}

.row-title a:hover {
    color: var(--color-blue);
}

.row-status {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.row-date {
    color: var(--color-text-muted);
    font-size: 12px;
    font-family: 'Source Code Pro', monospace;
}

.row-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.badge-warning {
    background: rgba(255, 165, 0, 0.15);
    color: #FFA500;
}

/* Hide kanban board when in list view */
.kanban-board.hidden {
    display: none;
}

/* ============================================
   Vertical Pipeline Flow View
   ============================================ */

.kanban-board.vertical-flow {
    flex-direction: column;
    min-width: 0;
    gap: 12px;
}

.kanban-board.vertical-flow .kanban-column {
    width: 100%;
    min-width: 0;
    max-height: none;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border);
}

.kanban-board.vertical-flow .kanban-column:last-child {
    border-bottom: none;
}

.kanban-board.vertical-flow .column-header {
    flex-shrink: 0;
    width: 140px;
    min-width: 140px;
    padding: 8px 12px;
    border-bottom: none;
    border-top: none;
    border-left-width: 4px;
    border-left-style: solid;
    /* border-left-color inherited from inline style */
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.kanban-board.vertical-flow .column-title {
    font-size: 14px;
    color: var(--color-text);
}

.kanban-board.vertical-flow .column-count {
    font-size: 12px;
    color: var(--color-text-muted);
}

.kanban-board.vertical-flow .column-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    max-height: none;
    overflow: visible;
    padding: 0;
}

.kanban-board.vertical-flow .kanban-card {
    width: 240px;
    min-width: 200px;
    max-width: 280px;
    flex-shrink: 0;
    background: var(--color-card);
    border: 1px solid var(--color-border);
}

.kanban-board.vertical-flow .kanban-card .card-title {
    color: var(--color-text);
}

.kanban-board.vertical-flow .kanban-card .card-meta {
    color: var(--color-text-muted);
}

/* Empty column styling in vertical view */
.kanban-board.vertical-flow .column-empty {
    color: var(--color-text-muted);
    font-size: 13px;
    font-style: italic;
    padding: 8px 0;
}

/* New idea button in vertical view - inline to the right of cards */
.kanban-board.vertical-flow .column-cards .new-idea-btn {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: auto;
    min-height: 100px;
    flex-shrink: 0;
    align-self: flex-start;
    border-radius: var(--radius-md);
}

.kanban-board.vertical-flow .column-cards .new-idea-btn .new-idea-plus {
    font-size: 24px;
}

/* ============================================
   Collapsed Empty Stages
   ============================================ */

/* Vertical flow - collapsed empty columns */
.kanban-board.vertical-flow .kanban-column.is-collapsed {
    padding: 8px 16px;
    min-height: 0;
    cursor: pointer;
    transition: opacity 0.15s ease, padding 0.2s ease;
}

.kanban-board.vertical-flow .kanban-column.is-collapsed:hover {
    background: rgba(255, 255, 255, 0.02);
}

.kanban-board.vertical-flow .kanban-column.is-collapsed .column-header {
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.kanban-board.vertical-flow .kanban-column.is-collapsed:hover .column-header {
    opacity: 0.8;
}

.kanban-board.vertical-flow .kanban-column.is-collapsed .column-cards {
    display: none;
}

.kanban-board.vertical-flow .kanban-column.is-collapsed .column-count {
    font-size: 11px;
}

/* Horizontal kanban - collapsed empty columns */
.kanban-board:not(.vertical-flow) .kanban-column.is-collapsed {
    width: 60px;
    min-width: 60px;
    cursor: pointer;
    transition: width 0.2s ease, min-width 0.2s ease, opacity 0.15s ease;
}

.kanban-board:not(.vertical-flow) .kanban-column.is-collapsed:hover {
    opacity: 0.9;
}

.kanban-board:not(.vertical-flow) .kanban-column.is-collapsed .column-header {
    opacity: 0.6;
    padding: 12px 8px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    height: auto;
    flex-direction: column;
    gap: 8px;
}

.kanban-board:not(.vertical-flow) .kanban-column.is-collapsed:hover .column-header {
    opacity: 0.9;
}

.kanban-board:not(.vertical-flow) .kanban-column.is-collapsed .column-cards {
    display: none;
}

.kanban-board:not(.vertical-flow) .kanban-column.is-collapsed .column-title {
    font-size: 12px;
}

.kanban-board:not(.vertical-flow) .kanban-column.is-collapsed .column-count {
    font-size: 10px;
}

/* ============================================
   Horizontal Workflow Pipeline
   ============================================ */

.workflow-pipeline {
    position: fixed;
    top: var(--header-height);  /* Below fixed .site-header */
    left: 0;
    right: 0;
    z-index: 900;  /* Below site-header (1000) but above content */
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    padding: 25px 24px 14px 24px;
    height: var(--pipeline-height);
    display: flex;
    align-items: center;
}

.pipeline-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}

.pipeline-title {
    color: var(--color-white);
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-stages {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: auto;  /* Push stages to the right */
    flex-shrink: 0;
}

.pipeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    cursor: default;
}

.stage-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 3px solid var(--color-border);
    transition: all 0.3s ease;
    position: relative;
}

.pipeline-stage.completed .stage-dot {
    background: var(--stage-color);
    border-color: var(--stage-color);
}

.pipeline-stage.completed .stage-dot::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.pipeline-stage.current .stage-dot {
    border-color: var(--stage-color);
    background: var(--stage-color);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 0 12px var(--stage-color);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 0 12px var(--stage-color);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15), 0 0 20px var(--stage-color);
    }
}

.pipeline-stage.future .stage-dot {
    opacity: 0.4;
}

.stage-name {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.pipeline-stage.current .stage-name {
    color: var(--stage-color);
    font-weight: 600;
}

.pipeline-stage.completed .stage-name {
    color: var(--color-text);
}

.pipeline-stage.future .stage-name {
    opacity: 0.5;
}

/* Viewed stage - cyan selection ring (distinct from pulsing current status) */
.pipeline-stage.viewed .stage-dot {
    box-shadow: 0 0 0 3px var(--color-cyan), 0 0 0 6px rgba(0, 217, 255, 0.25);
}

.pipeline-stage.viewed .stage-name {
    color: var(--color-cyan);
    font-weight: 600;
}

/* When viewing current status, combine both indicators */
.pipeline-stage.current.viewed .stage-dot {
    box-shadow: 0 0 0 3px var(--color-cyan), 0 0 0 6px rgba(0, 217, 255, 0.25), 0 0 12px var(--stage-color);
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Make all stages clickable for navigation */
.pipeline-stage {
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.pipeline-stage:hover {
    transform: scale(1.08);
}

.pipeline-stage:hover .stage-dot {
    box-shadow: 0 0 0 2px var(--stage-color), 0 0 8px var(--stage-color);
}

.pipeline-stage.viewed:hover .stage-dot {
    box-shadow: 0 0 0 3px var(--color-cyan), 0 0 0 6px rgba(0, 217, 255, 0.35), 0 0 8px var(--stage-color);
}

/* Stage indicator in metadata panel */
.stage-indicator {
    position: relative;
}

.stage-indicator .viewing-stage {
    color: var(--color-cyan);
}

.stage-indicator .metadata-sublabel {
    display: block;
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Stage instructions banner */
#stage-instructions {
    background: rgba(0, 217, 255, 0.1);
    border-left: 3px solid var(--color-cyan);
    padding: 12px 16px;
    margin: 0 0 16px 0;
    font-size: 13px;
    color: var(--color-text);
    display: none;
}

/* ============================================
   Pipeline Back Button & Episode Dropdown
   ============================================ */

.pipeline-back-btn {
    appearance: none;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-shrink: 0;
}

.pipeline-back-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 217, 255, 0.3);
    color: rgba(0, 217, 255, 0.9);
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.15);
}

.pipeline-back-btn:active {
    transform: scale(0.95);
}

.pipeline-back-btn svg {
    display: block;
}

/* Episode title wrapper (contains title button + dropdown) */
.pipeline-title-wrapper {
    position: relative;
    flex-shrink: 0;
}

/* Override .pipeline-title to be a button */
.pipeline-title {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--color-white);
    font-weight: 600;
    font-size: 16px;
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    max-width: 300px;
}

.pipeline-title:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.pipeline-title-wrapper.open .pipeline-title {
    background: rgba(0, 217, 255, 0.1);
    border-color: rgba(0, 217, 255, 0.3);
}

.pipeline-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-title-chevron {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.2s ease;
}

.pipeline-title-wrapper.open .pipeline-title-chevron {
    transform: rotate(180deg);
    color: var(--color-cyan);
}

/* Episode dropdown panel */
.episode-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 280px;
    max-width: 360px;
    max-height: 400px;
    background: rgba(26, 26, 46, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pipeline-title-wrapper.open .episode-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.episode-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.episode-dropdown-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.episode-dropdown-sort {
    appearance: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    padding: 4px 20px 4px 8px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

.episode-dropdown-sort:hover {
    border-color: rgba(0, 217, 255, 0.3);
}

.episode-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    flex: 1;
}

.episode-dropdown-item {
    margin: 2px 0;
}

.episode-dropdown-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.15s ease;
}

.episode-dropdown-item a:hover {
    background: rgba(255, 255, 255, 0.05);
}

.episode-dropdown-item.active a {
    background: rgba(0, 217, 255, 0.1);
    color: var(--color-cyan);
}

.episode-dropdown-item .ep-stage-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--stage-color);
    flex-shrink: 0;
}

.episode-dropdown-item .ep-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.episode-dropdown-item .ep-badge {
    flex-shrink: 0;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}

.episode-dropdown-item .ep-badge-blocker {
    background: rgba(255, 46, 59, 0.2);
    color: var(--color-red);
}

.pipeline-connector {
    width: 40px;
    height: 3px;
    background: var(--color-border);
    margin-top: -18px;
    flex-shrink: 0;
}

.pipeline-connector.completed {
    background: var(--color-green);
}

.pipeline-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pipeline-btn {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.pipeline-btn.advance {
    background: var(--color-green);
    color: var(--color-black);
}

.pipeline-btn.advance:hover {
    opacity: 0.9;
}

.pipeline-btn.regress {
    background: transparent;
    border: 1px solid var(--color-blue);
    color: var(--color-blue);
}

.pipeline-btn.regress:hover {
    background: rgba(255, 215, 0, 0.1);
}

.pipeline-btn.metadata-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    text-decoration: none;
}

.pipeline-btn.metadata-btn:hover {
    border-color: var(--color-cyan);
    color: var(--color-cyan);
    background: rgba(0, 217, 255, 0.05);
}

.pipeline-btn.metadata-btn svg {
    flex-shrink: 0;
}

.pipeline-blocker {
    background: rgba(255, 46, 59, 0.15);
    color: var(--color-red);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
}

/* Responsive pipeline - medium screens */
@media (max-width: 1200px) {
    .pipeline-container {
        gap: 12px;
    }

    .pipeline-title {
        max-width: 200px;
    }

    .pipeline-stages {
        overflow-x: auto;
    }
}

/* Responsive pipeline - small screens: stack layout */
@media (max-width: 900px) {
    .pipeline-container {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Keep back button and title together on first row */
    .pipeline-back-btn {
        order: 1;
    }

    .pipeline-title-wrapper {
        order: 2;
        flex: 1;
        min-width: 0;
    }

    .pipeline-title {
        max-width: none;
    }

    .pipeline-stages {
        order: 3;
        overflow-x: auto;
        padding: 8px 0;
        margin-left: 0;
        width: 100%;
    }

    .pipeline-actions {
        order: 4;
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .pipeline-container {
        gap: 10px;
        padding: 12px 16px;
    }

    .workflow-pipeline {
        padding: 12px 16px;
    }

    .pipeline-back-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .pipeline-title {
        font-size: 14px;
        padding: 4px 8px;
    }

    .pipeline-connector {
        width: 20px;
    }

    .stage-name {
        font-size: 9px;
    }

    .stage-dot {
        width: 20px;
        height: 20px;
    }

    /* Expand touch target for mobile - 44px minimum */
    .pipeline-stage {
        position: relative;
        min-width: 44px;
        min-height: 44px;
        padding: 8px 4px;
    }

    /* Invisible expanded tap target */
    .pipeline-stage::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }

    /* Episode dropdown adjustments for mobile */
    .episode-dropdown {
        min-width: 260px;
        max-width: calc(100vw - 32px);
        max-height: 50vh;
    }

    .episode-dropdown-item a {
        padding: 12px 10px;
    }

    .episode-dropdown-item .ep-title {
        font-size: 13px;
    }
}

/* ============================================
   Annotation System Styles
   ============================================ */

/* --- Annotated Text Spans --- */

/* .text-segment: plain text segments (no direct styles needed) */

.annotated-span {
    position: relative;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.15s ease;
    padding: 1px 0;
}

/* Type-specific highlight colors */
.annotated-span.type-source {
    background: rgba(0, 217, 255, 0.15);
    border-bottom: 2px solid var(--color-cyan);
}

.annotated-span.type-timing {
    background: rgba(255, 215, 0, 0.15);
    border-bottom: 2px solid var(--color-blue);
}

.annotated-span.type-note {
    background: rgba(255, 165, 0, 0.15);
    border-bottom: 2px solid #FFA500;
}

.annotated-span.type-data {
    background: rgba(57, 255, 20, 0.15);
    border-bottom: 2px solid var(--color-green);
}

.annotated-span.type-media {
    background: rgba(255, 68, 170, 0.15);
    border-bottom: 2px solid #FF44AA;
}

/* Multiple overlapping annotations */
.annotated-span.multi-annotation {
    background: linear-gradient(
        135deg,
        rgba(0, 217, 255, 0.12) 25%,
        rgba(255, 215, 0, 0.12) 75%
    );
    border-bottom: 2px dashed var(--color-cyan);
}

/* Stale annotations (text changed) */
.annotated-span.stale {
    opacity: 0.6;
    border-bottom-style: dotted;
}

/* Hover and selection states */
.annotated-span:hover,
.annotated-span.hovered {
    filter: brightness(1.3);
}

.annotated-span.active {
    box-shadow: 0 0 0 2px var(--color-cyan);
}

.annotated-span.flash {
    animation: annotation-flash 0.5s ease-out;
}

@keyframes annotation-flash {
    0%, 50% { background: rgba(255, 215, 0, 0.4); }
    100% { background: inherit; }
}

/* --- Annotation Create Toolbar --- */

.annotation-create-toolbar {
    position: fixed;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    gap: 6px;
    align-items: center;
}

.annotation-create-toolbar.hidden {
    display: none;
}

.annotation-type-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    transition: all 0.15s;
}

.annotation-type-btn:hover {
    transform: scale(1.1);
}

.annotation-type-btn.type-source:hover {
    border-color: var(--color-cyan);
    color: var(--color-cyan);
    background: rgba(0, 217, 255, 0.1);
}

.annotation-type-btn.type-timing:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
    background: rgba(255, 215, 0, 0.1);
}

.annotation-type-btn.type-note:hover {
    border-color: #FFA500;
    color: #FFA500;
    background: rgba(255, 165, 0, 0.1);
}

.annotation-type-btn.type-data:hover {
    border-color: var(--color-green);
    color: var(--color-green);
    background: rgba(57, 255, 20, 0.1);
}

.annotation-type-btn.type-media:hover {
    border-color: #FF44AA;
    color: #FF44AA;
    background: rgba(255, 68, 170, 0.1);
}

/* Snap toggle in toolbar */
.snap-toggle {
    display: flex;
    gap: 2px;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--color-border);
}

.snap-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.snap-btn:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.1);
}

.snap-btn.active {
    color: var(--color-blue);
    background: rgba(255, 215, 0, 0.15);
}

/* --- Annotation Expansion Panel --- */

.annotation-expansion {
    display: none;
    margin: 8px 0 16px 48px;
    padding: 0;
    animation: slideDown 0.2s ease-out;
    position: relative;
    z-index: 1000;
}

.annotation-expansion.expanded {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.script-line.has-expanded-annotation {
    margin-bottom: 0;
}

/* Annotation Cards */
.annotation-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color 0.15s;
}

.annotation-card:last-child {
    margin-bottom: 0;
}

.annotation-card:hover,
.annotation-card.hovered {
    border-color: var(--color-text-muted);
}

.annotation-card[data-type="source"] {
    border-left: 3px solid var(--color-cyan);
}

.annotation-card[data-type="timing"] {
    border-left: 3px solid var(--color-blue);
}

.annotation-card[data-type="note"] {
    border-left: 3px solid #FFA500;
}

.annotation-card[data-type="data"] {
    border-left: 3px solid var(--color-green);
}

.annotation-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--color-border);
}

.annotation-type-badge {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.5px;
}

.annotation-type-badge.type-source {
    background: rgba(0, 217, 255, 0.2);
    color: var(--color-cyan);
}

.annotation-type-badge.type-timing {
    background: rgba(255, 215, 0, 0.2);
    color: var(--color-blue);
}

.annotation-type-badge.type-note {
    background: rgba(255, 165, 0, 0.2);
    color: #FFA500;
}

.annotation-type-badge.type-data {
    background: rgba(57, 255, 20, 0.2);
    color: var(--color-green);
}

.annotation-type-badge.type-media {
    background: rgba(255, 68, 170, 0.2);
    color: #FF44AA;
}

.annotation-title {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.annotation-collapse-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 18px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.annotation-collapse-btn:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.1);
}

.annotation-warning {
    padding: 8px 12px;
    background: rgba(255, 165, 0, 0.15);
    color: #FFA500;
    font-size: 11px;
    border-bottom: 1px solid var(--color-border);
}

.annotation-body {
    padding: 12px;
}

.annotation-field {
    margin-bottom: 12px;
}

.annotation-field:last-child {
    margin-bottom: 0;
}

.annotation-field label {
    display: block;
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.annotation-field a {
    color: var(--color-cyan);
    text-decoration: none;
    word-break: break-all;
}

.annotation-field a:hover {
    text-decoration: underline;
}

.annotation-field blockquote {
    margin: 0;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-left: 2px solid var(--color-cyan);
    font-style: italic;
    font-size: 13px;
    color: var(--color-text);
}

.annotation-field p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.annotation-field-inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.annotation-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-top: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.1);
}

.annotation-meta {
    font-size: 11px;
    color: var(--color-text-muted);
}

.annotation-actions {
    display: flex;
    gap: 6px;
}

/* Badges */
.tier-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.tier-badge.tier-A {
    background: rgba(57, 255, 20, 0.2);
    color: var(--color-green);
}

.tier-badge.tier-B {
    background: rgba(0, 217, 255, 0.2);
    color: var(--color-cyan);
}

.tier-badge.tier-C {
    background: rgba(255, 215, 0, 0.2);
    color: var(--color-blue);
}

.tier-badge.tier-D {
    background: rgba(255, 165, 0, 0.2);
    color: #FFA500;
}

.verification-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}

.verification-badge.verified {
    background: rgba(57, 255, 20, 0.2);
    color: var(--color-green);
}

.verification-badge.unverified {
    background: rgba(255, 46, 59, 0.2);
    color: var(--color-red);
}

.priority-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}

.priority-badge.priority-low {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-muted);
}

.priority-badge.priority-medium {
    background: rgba(255, 215, 0, 0.2);
    color: var(--color-blue);
}

.priority-badge.priority-high {
    background: rgba(255, 46, 59, 0.2);
    color: var(--color-red);
}

.note-category {
    font-size: 10px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-muted);
    border-radius: 4px;
}

.data-value {
    font-size: 16px;
    font-weight: 600;
    font-family: 'Source Code Pro', monospace;
    color: var(--color-text);
}

.archive-path {
    font-family: 'Source Code Pro', monospace;
    font-size: 11px;
    color: var(--color-text-muted);
}

.timing-range {
    font-family: 'Source Code Pro', monospace;
    font-size: 14px;
    color: var(--color-blue);
}

.timing-beat {
    font-weight: 500;
}

/* --- SVG Connection Lines --- */

.annotation-connection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
}

.connection-line {
    stroke-dasharray: 4 2;
    opacity: 0.4;
    transition: opacity 0.2s ease, stroke-width 0.2s ease;
}

.connection-line.visible {
    opacity: 0.6;
}

.connection-line.active {
    opacity: 1;
    stroke-dasharray: none;
    stroke-width: 3;
}

.connection-line.type-source { stroke: var(--color-cyan); }
.connection-line.type-timing { stroke: var(--color-blue); }
.connection-line.type-note { stroke: #FFA500; }
.connection-line.type-data { stroke: var(--color-green); }
.connection-line.type-media { stroke: #FF44AA; }

.connection-endpoint {
    opacity: 0.6;
}

.connection-endpoint.type-source { fill: var(--color-cyan); }
.connection-endpoint.type-timing { fill: var(--color-blue); }
.connection-endpoint.type-note { fill: #FFA500; }
.connection-endpoint.type-data { fill: var(--color-green); }
.connection-endpoint.type-media { fill: #FF44AA; }

.connection-line.flash {
    animation: connection-flash 0.5s ease-out;
}

@keyframes connection-flash {
    0%, 50% { stroke-width: 4; opacity: 1; }
    100% { stroke-width: 2; opacity: 0.6; }
}

/* --- Annotation Editor Modal --- */

.annotation-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.annotation-editor-modal.hidden {
    display: none;
}

.annotation-editor-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.annotation-editor-content {
    position: relative;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.annotation-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.2);
}

.editor-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.editor-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 24px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.editor-close-btn:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.1);
}

.annotation-editor-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.editor-selection-info {
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.selection-preview {
    margin-bottom: 8px;
}

.selection-preview label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-right: 8px;
}

.selected-text {
    font-style: italic;
    color: var(--color-blue);
}

.selection-location {
    font-size: 12px;
    color: var(--color-text-muted);
    font-family: 'Source Code Pro', monospace;
}

/* Type selector */
.editor-type-selector {
    margin-bottom: 20px;
}

.editor-type-selector > label {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.type-options {
    display: flex;
    gap: 8px;
}

.type-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}

.type-option:hover {
    border-color: var(--color-text-muted);
}

.type-option.selected {
    border-color: var(--color-cyan);
    background: rgba(0, 217, 255, 0.1);
}

.type-option input {
    display: none;
}

.type-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
}

.type-icon.type-source {
    background: rgba(0, 217, 255, 0.2);
    color: var(--color-cyan);
}

.type-icon.type-timing {
    background: rgba(255, 215, 0, 0.2);
    color: var(--color-blue);
}

.type-icon.type-note {
    background: rgba(255, 165, 0, 0.2);
    color: #FFA500;
}

.type-icon.type-data {
    background: rgba(57, 255, 20, 0.2);
    color: var(--color-green);
}

.type-icon.type-media {
    background: rgba(255, 68, 170, 0.2);
    color: #FF44AA;
}

.type-label {
    font-size: 12px;
    color: var(--color-text);
}

/* Form fields */
.editor-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field-group {
    display: flex;
    flex-direction: column;
}

.field-group label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.field-group input,
.field-group textarea,
.field-group select {
    padding: 10px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s;
}

.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus {
    outline: none;
    border-color: var(--color-cyan);
}

.field-group textarea {
    resize: vertical;
    min-height: 60px;
}

.field-group small {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.field-row {
    display: flex;
    gap: 12px;
}

.field-row .field-group {
    flex: 1;
}

.field-checkbox {
    flex-direction: row;
    align-items: center;
}

.field-checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text);
    text-transform: none;
}

.field-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    padding: 0;
    cursor: pointer;
}

/* --- Timing Annotation Enhanced UI --- */

.timing-suggestion {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-bottom: 16px;
}

.suggestion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.suggestion-icon {
    font-size: 16px;
}

.suggestion-label {
    font-weight: 600;
    color: var(--color-blue);
}

.suggestion-confidence {
    margin-left: auto;
    font-size: 11px;
    color: var(--color-text-muted);
    background: var(--color-bg);
    padding: 2px 8px;
    border-radius: 10px;
}

.suggestion-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.source-tag {
    font-size: 10px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    padding: 2px 6px;
    border-radius: 4px;
}

.btn-apply-suggestion {
    width: 100%;
    background: var(--color-blue);
    color: var(--color-black);
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
}

.btn-apply-suggestion:hover {
    background: #FFE44D;
}

/* Mini Timeline */
.timing-mini-timeline {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-bottom: 16px;
}

.timeline-track {
    position: relative;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.timeline-sections {
    position: absolute;
    inset: 0;
}

.timeline-section {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(0, 217, 255, 0.15);
    border-left: 1px solid rgba(0, 217, 255, 0.3);
    display: flex;
    align-items: flex-start;
    padding: 4px;
}

.timeline-section .section-label {
    font-size: 9px;
    color: var(--color-cyan);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-annotations {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.timeline-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--color-blue);
    border-radius: 50%;
    border: 2px solid var(--color-bg);
}

.timeline-marker.current {
    width: 12px;
    height: 12px;
    background: var(--color-green);
    box-shadow: 0 0 8px var(--color-green);
}

.timeline-cursor {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-red);
    transform: translateX(-50%);
    transition: left 0.15s ease;
}

.timeline-cursor::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--color-red);
}

.timeline-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10px;
    color: var(--color-text-muted);
    font-family: 'Source Code Pro', monospace;
}

/* Beat Presets */
.beat-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.beat-preset-btn {
    padding: 6px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

.beat-preset-btn:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.beat-info {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    color: var(--color-text-muted);
}

/* Section Select */
.timing-section-select {
    width: 100%;
}

.timing-time-input {
    font-family: 'Source Code Pro', monospace;
}

.annotation-editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.1);
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-cancel {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-cancel:hover {
    border-color: var(--color-text-muted);
}

.btn-primary {
    background: var(--color-cyan);
    color: var(--color-black);
}

.btn-primary:hover {
    filter: brightness(1.1);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.annotation-raw {
    font-family: 'Source Code Pro', monospace;
    font-size: 11px;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 4px;
    overflow-x: auto;
}

/* ============================================
   Mobile Responsive Styles
   ============================================ */

/* Hide mobile-only elements on desktop */
/* Sidebar toggle button (always visible) */
.sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-toggle:hover {
    border-color: var(--color-cyan);
    color: var(--color-cyan);
}

.sidebar-toggle.active {
    background: var(--color-cyan);
    color: var(--color-black);
    border-color: var(--color-cyan);
}

.sidebar-toggle-icon {
    font-size: 16px;
}

.sidebar-toggle-label {
    font-size: 12px;
    font-weight: 500;
}

/* Legacy mobile-menu-toggle (hidden) */
.mobile-menu-toggle {
    display: none;
}

.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sidebar-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

/* --- Tablet Breakpoint (768px) --- */
@media (max-width: 768px) {
    /* Hide sidebar label on mobile, just show icon */
    .sidebar-toggle-label {
        display: none;
    }

    .sidebar-toggle {
        padding: 8px;
        color: var(--color-text);
        font-size: 20px;
        cursor: pointer;
    }

    /* Preview layout adjustments */
    .preview-layout {
        flex-direction: column;
    }

    .preview-main {
        width: 100%;
        padding-left: 0;
    }

    /* Toolbar stacks on mobile */
    .preview-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }

    .toolbar-left,
    .toolbar-right {
        flex-wrap: wrap;
    }

    /* Pipeline stages scroll horizontally */
    .pipeline-container {
        padding: 12px;
    }

    .pipeline-title {
        font-size: 13px;
        max-width: 100%;
        margin-bottom: 10px;
    }

    .pipeline-stages {
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .pipeline-actions {
        flex-wrap: wrap;
        gap: 6px;
    }

    .pipeline-btn {
        font-size: 11px;
        padding: 6px 10px;
    }

    /* Larger touch targets for line numbers on mobile */
    .line-num {
        min-width: 36px;
        padding: 4px;
        font-size: 9px;
    }

    /* Mobile: narrower line numbers, equal gutters, flexible paper */
    .script-line {
        grid-template-columns: 36px 1fr minmax(280px, 1fr) 1fr 36px;
    }

    /* Annotation cards */
    .annotation-expansion {
        margin-left: 24px;
    }

    .annotation-card {
        margin-bottom: 12px;
    }

    /* Editor modal fullscreen on mobile */
    .annotation-editor-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .annotation-editor-body {
        padding: 16px;
    }

    .type-options {
        flex-wrap: wrap;
    }

    .type-option {
        flex: 1 1 45%;
    }

    .field-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* --- Phone Breakpoint (480px) --- */
@media (max-width: 480px) {
    /* Even smaller sidebar */
    .preview-sidebar {
        width: 100%;
    }

    /* Toolbar items stack more */
    .preview-toolbar {
        padding: 8px 10px;
    }

    .toolbar-btn {
        padding: 8px 10px;
        font-size: 11px;
    }

    .preview-toolbar .view-toggle button {
        padding: 8px 10px;
        font-size: 11px;
    }

    /* Pipeline vertical on small screens */
    .pipeline-stages {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .pipeline-stage {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        padding: 8px 12px;
        background: var(--color-bg);
        border-radius: var(--radius-sm);
    }

    .stage-dot {
        width: 16px;
        height: 16px;
    }

    .stage-name {
        font-size: 11px;
    }

    .pipeline-connector {
        display: none;
    }

    .pipeline-actions {
        flex-direction: column;
        width: 100%;
    }

    .pipeline-btn {
        width: 100%;
        justify-content: center;
    }

    /* Screenplay tighter padding */
    .screenplay-container {
        padding: 20px 12px;
        font-size: 10pt;
    }

    .line-num {
        left: -36px;
        width: 28px;
        font-size: 9px;
    }

    .screenplay-container .screenplay {
        margin-left: 0; /* Line numbers now in edge columns */
    }

    /* Annotation UI adjustments */
    .annotation-create-toolbar {
        flex-wrap: wrap;
        max-width: 180px;
    }

    .annotation-type-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .snap-toggle {
        width: 100%;
        margin-left: 0;
        margin-top: 6px;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--color-border);
        padding-top: 6px;
        justify-content: center;
    }

    .annotation-expansion {
        margin-left: 12px;
    }

    .annotation-header {
        padding: 8px 10px;
    }

    .annotation-body {
        padding: 10px;
    }

    .annotation-footer {
        padding: 8px 10px;
        flex-direction: column;
        gap: 8px;
    }

    .annotation-meta {
        text-align: center;
    }

    .annotation-actions {
        width: 100%;
        justify-content: center;
    }

    /* Notes panel adjustments */
    .line-notes-panel {
        width: 280px;
    }

    .line-selection-toolbar {
        flex-direction: column;
        padding: 10px;
        gap: 8px;
    }

    .selection-actions {
        flex-wrap: wrap;
        justify-content: center;
    }

    .selection-btn {
        flex: 1 1 45%;
    }
}

/* --- Touch-friendly enhancements --- */
@media (pointer: coarse) {
    /* Larger tap targets */
    .toolbar-btn,
    .pipeline-btn,
    .annotation-type-btn,
    .btn {
        min-height: 44px;
    }

    .episode-nav-item a {
        min-height: 48px;
        padding: 12px 16px;
    }

    .snap-btn {
        min-width: 36px;
        min-height: 36px;
    }

    /* Disable hover effects on touch */
    .annotated-span:hover {
        filter: none;
    }

    .annotation-card:hover {
        border-color: var(--color-border);
    }

    /* Add active states instead */
    .annotated-span:active {
        filter: brightness(1.3);
    }

    .toolbar-btn:active,
    .pipeline-btn:active {
        transform: scale(0.95);
    }
}

/* --- Landscape phone --- */
@media (max-width: 768px) and (orientation: landscape) {
    .workflow-pipeline {
        padding: 8px 12px;
    }

    .pipeline-stages {
        flex-direction: row;
    }

    .pipeline-stage {
        flex-direction: column;
    }

    .pipeline-connector {
        display: block;
        width: 16px;
    }

    .annotation-editor-content {
        max-height: 100%;
        border-radius: 0;
    }
}

/* ============================================
   Screenplay Canvas - Mobile Responsive
   ============================================ */

/* Tablet: Collapse gutters to narrower width */
@media (max-width: 1200px) {
    .screenplay-canvas {
        grid-template-columns: 40px minmax(120px, 180px) minmax(350px, 1fr) minmax(120px, 180px) 40px;
    }

    .gutter-note-card {
        padding: 6px;
        font-size: 10px;
    }

    .gutter-note-card .note-preview {
        max-height: 32px;
    }
}

/* Mobile: Single column with collapsible gutter panels */
@media (max-width: 768px) {
    .screenplay-canvas {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /* Hide edge line numbers on mobile - use single left column */
    .line-numbers-column.right {
        display: none;
    }

    .line-numbers-column.left {
        position: fixed;
        left: 0;
        top: calc(var(--header-height) + var(--pipeline-height)); /* Below header + pipeline */
        bottom: 0;
        width: 36px;
        z-index: 10;
        padding: 16px 0;
        border-radius: 0;
        overflow-y: auto;
    }

    /* Gutters become collapsible edge panels */
    .notes-gutter {
        position: fixed;
        top: calc(var(--header-height) + var(--pipeline-height));
        bottom: 0;
        width: 280px;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        padding: 16px 8px;
        background: var(--color-card);
        border: none;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
        overflow-y: auto;
    }

    .gutter-left {
        left: 0;
    }

    .gutter-right {
        right: 0;
        left: auto;
        transform: translateX(100%);
    }

    .notes-gutter.open {
        transform: translateX(0);
    }

    /* Gutter toggle buttons - visible on mobile */
    .gutter-toggle {
        display: flex;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 48px;
        background: var(--color-card);
        border: 1px solid var(--color-border);
        color: var(--color-text-muted);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 45;
        transition: all 0.2s ease;
    }

    /* Gutter backdrop - visible on mobile */
    .gutter-backdrop {
        display: block;
    }

    .gutter-toggle:hover {
        color: var(--color-cyan);
        border-color: var(--color-cyan);
    }

    .gutter-toggle.left {
        left: 36px;
        border-radius: 0 8px 8px 0;
    }

    .gutter-toggle.right {
        right: 0;
        border-radius: 8px 0 0 8px;
    }

    .gutter-toggle.active {
        background: var(--color-cyan);
        color: var(--color-black);
    }

    /* Gutter labels always visible on mobile */
    .notes-gutter .gutter-label {
        position: sticky;
        top: 0;
        opacity: 1;
        background: var(--color-card);
        padding: 8px 0;
        margin-bottom: 8px;
        z-index: 1;
        transform: none;
        left: 0;
        text-align: center;
        border-bottom: 1px solid var(--color-border);
    }

    /* Screenplay takes full width */
    .screenplay-container {
        margin-left: 36px;
        padding: 24px 16px;
        border-radius: 0;
    }

    /* Gutter note cards flow vertically on mobile */
    .gutter-note-card {
        position: relative !important;
        top: auto !important;
        margin-bottom: 8px;
    }

    /* Backdrop for open gutters */
    .gutter-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 40;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .gutter-backdrop.visible {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Small mobile: Even more compact */
@media (max-width: 480px) {
    .line-numbers-column.left {
        width: 28px;
    }

    .line-number-item {
        font-size: 8px;
        padding: 2px 4px;
    }

    .screenplay-container {
        margin-left: 28px;
        padding: 16px 12px;
    }

    .notes-gutter {
        width: 260px;
    }

    .gutter-toggle {
        width: 28px;
        height: 40px;
    }

    .gutter-toggle.left {
        left: 28px;
    }
}


/* ============================================
   Media Annotation Fields & Lined Script
   ============================================ */

/* File input wrapper */
.file-input-wrapper {
    display: flex;
    gap: 8px;
}

.file-input-wrapper input[type="text"] {
    flex: 1;
    background: var(--color-bg-dark);
}

.btn-browse {
    padding: 10px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.btn-browse:hover {
    border-color: var(--color-cyan);
    color: var(--color-cyan);
}

/* Color selector for lined script */
.color-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.color-option {
    position: relative;
    cursor: pointer;
}

.color-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.color-option .color-swatch {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color);
    border: 2px solid transparent;
    transition: all 0.15s;
}

.color-option:hover .color-swatch {
    transform: scale(1.1);
}

.color-option.selected .color-swatch {
    border-color: var(--color-text);
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color);
}

/* Media preview */
.media-preview {
    margin-top: 12px;
    padding: 12px;
    background: var(--color-bg-dark);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.media-preview.hidden {
    display: none;
}

.preview-thumbnail {
    margin-bottom: 8px;
    max-height: 120px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-thumbnail img,
.preview-thumbnail video {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
    border-radius: 4px;
}

.preview-thumbnail .audio-icon {
    font-size: 48px;
    color: var(--color-text-muted);
}

.preview-info {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
}

/* ============================================
   Lined Script Rendering (Multi-line Spans)
   ============================================ */

/* Media annotations use lined-script style markers */
.annotated-span.type-media {
    position: relative;
}

/* Line mark in left gutter for media ranges */
.lined-script-mark {
    position: absolute;
    left: 0;
    width: 4px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 5;
}

/* Color variants for lined script */
.lined-script-mark.color-red { background: #FF4444; }
.lined-script-mark.color-orange { background: #FF8C00; }
.lined-script-mark.color-yellow { background: #FFD700; }
.lined-script-mark.color-green { background: #44BB44; }
.lined-script-mark.color-blue { background: #4488FF; }
.lined-script-mark.color-purple { background: #AA44FF; }
.lined-script-mark.color-pink { background: #FF44AA; }
.lined-script-mark.color-cyan { background: #00CED1; }

/* Lined script gutter (for multi-line media annotations) */
.lined-script-gutter {
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    z-index: 25;
}

/* Vertical line for multi-line spans */
.lined-script-line {
    position: absolute;
    left: 0;
    width: 6px;
    border-radius: 3px;
    opacity: 0.8;
    transition: opacity 0.15s, width 0.15s;
    pointer-events: auto;
    cursor: pointer;
}

.lined-script-line:hover {
    opacity: 1;
    width: 8px;
}

/* Start/end caps for lined script */
.lined-script-cap {
    position: absolute;
    width: 12px;
    height: 4px;
    border-radius: 2px;
    left: 8px;
}

.lined-script-cap.start {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.lined-script-cap.end {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Media annotation underline/overline styles */
.script-line.has-media-start .line-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--media-color, #FF44AA);
}

.script-line.has-media-end .line-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--media-color, #FF44AA);
}

/* Single-line media annotation - colored left border */
.script-line.has-media .line-content {
    border-left: 4px solid var(--media-color, #FF44AA) !important;
    box-shadow: inset 4px 0 0 var(--media-color, #FF44AA);
}

/* Word-level underline for media on single line */
.annotated-span.type-media.single-line {
    text-decoration: underline;
    text-decoration-color: var(--media-color, #FF44AA);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Gutter media indicator */
.gutter-media-indicator {
    position: absolute;
    left: 0;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.gutter-media-indicator .media-type-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--media-color, #FF44AA);
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
}

/* Media annotation card in expansion panel */
.annotation-body.type-media {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.media-annotation-preview {
    padding: 12px;
    background: var(--color-bg-dark);
    border-radius: var(--radius-sm);
    display: flex;
    gap: 12px;
    align-items: center;
}

.media-annotation-preview .media-thumb {
    width: 60px;
    height: 45px;
    background: var(--color-surface);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.media-annotation-preview .media-thumb img,
.media-annotation-preview .media-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-annotation-preview .media-info {
    flex: 1;
    min-width: 0;
}

.media-annotation-preview .media-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 2px;
}

.media-annotation-preview .media-path {
    font-size: 11px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-annotation-preview .media-timecode {
    font-size: 11px;
    color: var(--color-cyan);
    font-family: 'Source Code Pro', monospace;
}

/* Lined script color indicator in gutter */
.media-line-color {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Media annotation expansion panel content */
.media-annotation-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.media-preview-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.media-thumb {
    width: 80px;
    height: 60px;
    background: var(--color-bg-dark);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.media-thumb-img,
.media-thumb-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-thumb-icon {
    font-size: 28px;
    opacity: 0.6;
}

.media-details {
    flex: 1;
    min-width: 0;
}

.media-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.media-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.media-label-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}

.media-path {
    font-size: 11px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}

.media-timecode {
    font-size: 12px;
    color: var(--color-cyan);
    font-family: 'Source Code Pro', monospace;
}

.media-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 3px 8px;
    background: rgba(255, 68, 170, 0.15);
    color: #FF44AA;
    border-radius: 10px;
}

.media-range-badge {
    font-size: 11px;
    padding: 3px 8px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    border-radius: 10px;
}

/* Media thumb link for non-browser-supported formats */
.media-thumb-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: transform 0.15s;
}

.media-thumb-link:hover {
    transform: scale(1.1);
}

.media-thumb-link .media-thumb-icon {
    font-size: 32px;
}

/* ============================================
   Lined Script Column - Shot Line System
   ============================================ */

/* ROYGBV Color spectrum for shots (index-based) */
:root {
    --shot-color-0: #FF0000;  /* Red */
    --shot-color-1: #FF8C00;  /* Orange */
    --shot-color-2: #FFD700;  /* Yellow */
    --shot-color-3: #00DD00;  /* Green */
    --shot-color-4: #0088FF;  /* Blue */
    --shot-color-5: #8B00FF;  /* Violet */
}

/* Container for shot lines - positioned in grid column 4 */
.lined-script-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 50;
}

/* Grid cell for lined-script column */
.lined-script-column {
    position: relative;
    min-width: 0;
}

/* Vertical shot line - base state (3px wide) */
.shot-line {
    position: absolute;
    width: 3px;
    min-height: 60px; /* Ensure minimum visibility */
    border-radius: 2px;
    cursor: pointer;
    pointer-events: auto;
    transition: width 0.2s ease, opacity 0.15s ease, filter 0.15s ease;
    z-index: 1;
}

/* Shot positioning: left is calculated dynamically in ShotRenderer.js
   based on the right edge of the content column + stack offset */

/* Shot colors based on index */
.shot-line.color-0 { background: var(--shot-color-0); }
.shot-line.color-1 { background: var(--shot-color-1); }
.shot-line.color-2 { background: var(--shot-color-2); }
.shot-line.color-3 { background: var(--shot-color-3); }
.shot-line.color-4 { background: var(--shot-color-4); }
.shot-line.color-5 { background: var(--shot-color-5); }

/* Cycle colors for more than 6 shots */
.shot-line.color-6 { background: var(--shot-color-0); opacity: 0.7; }
.shot-line.color-7 { background: var(--shot-color-1); opacity: 0.7; }
.shot-line.color-8 { background: var(--shot-color-2); opacity: 0.7; }
.shot-line.color-9 { background: var(--shot-color-3); opacity: 0.7; }
.shot-line.color-10 { background: var(--shot-color-4); opacity: 0.7; }
.shot-line.color-11 { background: var(--shot-color-5); opacity: 0.7; }

/* Hover state - highlight this shot */
.shot-line:hover {
    filter: brightness(1.2);
    z-index: 10;
}

.shot-line.hovered {
    filter: brightness(1.2);
    z-index: 10;
}

/* Desaturation state when hovering any shot */
.screenplay-container.shot-hovered .shot-line:not(.hovered) {
    filter: saturate(0.3) brightness(0.7);
}

/* Desaturate script lines when shot is hovered (except linked lines) */
.screenplay-container.shot-hovered .script-line:not(.shot-linked) .line-content {
    opacity: 0.5;
}

/* Keep linked script lines visible */
.screenplay-container.shot-hovered .script-line.shot-linked .line-content {
    opacity: 1;
    background: rgba(255, 255, 255, 0.03);
}

/* Expanded shot line - base state for video filmstrip */
.shot-line.expanded {
    width: 50px;
    min-height: 120px; /* Ensure filmstrip has space */
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: visible; /* Allow content to overflow */
}

/* Expanded shot line with image preview - size to content */
.shot-line.expanded:has(.shot-filmstrip-image) {
    width: auto;
    min-width: 200px;
    max-width: 350px;
    height: auto;
    min-height: auto;
}

/* Expanded shot line with audio preview */
.shot-line.expanded:has(.shot-filmstrip-audio) {
    width: auto;
    min-width: 220px;
    max-width: 300px;
    height: auto;
    min-height: auto;
}

/* Filmstrip container inside expanded shot */
.shot-filmstrip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-dark);
}

/* Individual filmstrip thumbnail */
.filmstrip-thumb {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.filmstrip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Filmstrip header with label */
.filmstrip-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 4px 6px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
    font-size: 10px;
    font-weight: 500;
    color: white;
    z-index: 2;
}

/* Filmstrip actions (edit/delete) */
.filmstrip-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    display: flex;
    gap: 4px;
    justify-content: center;
    z-index: 2;
}

.filmstrip-actions button {
    font-size: 10px;
    padding: 2px 6px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.15s;
}

.filmstrip-actions button:hover {
    opacity: 1;
}

.filmstrip-actions .btn-edit {
    background: var(--color-surface);
    color: var(--color-text);
}

.filmstrip-actions .btn-delete {
    background: rgba(255, 68, 68, 0.8);
    color: white;
}

/* ============================================
   Drop Overlay for Video Upload
   ============================================ */

.drop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
}

.drop-overlay.hidden {
    display: none;
}

.drop-overlay.active {
    pointer-events: auto;
}

.drop-message {
    padding: 32px 48px;
    background: var(--color-surface);
    border: 3px dashed var(--color-cyan);
    border-radius: 12px;
    color: var(--color-text);
    font-size: 24px;
    font-weight: 500;
    text-align: center;
}

.drop-message::before {
    content: '🎬';
    display: block;
    font-size: 48px;
    margin-bottom: 16px;
}

/* Drop target indicator on screenplay */
.screenplay-container.drag-over {
    outline: 3px dashed var(--color-cyan);
    outline-offset: -3px;
}

.screenplay-container.drag-over .script-line:hover {
    background: rgba(0, 206, 209, 0.1);
}

/* Drop target highlight for specific line */
.script-line.drop-target {
    background: rgba(0, 206, 209, 0.15) !important;
    outline: 2px solid var(--color-cyan);
    outline-offset: -2px;
}

/* ============================================
   Shot Line Context Menu
   ============================================ */

.shot-context-menu {
    position: fixed;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    min-width: 120px;
    padding: 4px 0;
}

.shot-context-menu .menu-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    text-align: left;
    border: none;
    background: none;
    color: var(--color-text);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s;
}

.shot-context-menu .menu-item:hover {
    background: var(--color-bg-lighter);
}

.shot-context-menu .menu-item.danger {
    color: #FF4444;
}

.shot-context-menu .menu-item.danger:hover {
    background: rgba(255, 68, 68, 0.1);
}

.shot-context-menu .menu-divider {
    height: 1px;
    background: var(--color-border);
    margin: 4px 0;
}

/* ============================================
   Shot Line Tooltip
   ============================================ */

.shot-tooltip {
    position: fixed;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 12px;
    color: var(--color-text);
    pointer-events: none;
    z-index: 9999;
    max-width: 200px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.shot-tooltip .tooltip-label {
    font-weight: 500;
    margin-bottom: 4px;
}

.shot-tooltip .tooltip-duration {
    color: var(--color-cyan);
    font-family: 'Source Code Pro', monospace;
}

.shot-tooltip .tooltip-lines {
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* ============================================
   Gutter Import Dialog
   ============================================ */

.gutter-import-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gutter-import-modal.hidden {
    display: none;
}

.gutter-import-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.gutter-import-content {
    position: relative;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.gutter-import-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.gutter-import-header .import-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
}

.gutter-import-header .import-line-badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    font-family: 'Source Code Pro', monospace;
}

.gutter-import-header .import-line-badge.side-left {
    background: rgba(0, 217, 255, 0.15);
    color: var(--color-cyan);
}

.gutter-import-header .import-line-badge.side-right {
    background: rgba(255, 68, 170, 0.15);
    color: #FF44AA;
}

.gutter-import-header .import-close-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.15s;
}

.gutter-import-header .import-close-btn:hover {
    color: var(--color-text);
}

/* Tabs */
.gutter-import-tabs {
    display: flex;
    gap: 2px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.import-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.import-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text);
}

.import-tab.active {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-black);
}

.import-tab .tab-icon {
    font-size: 16px;
}

.import-tab .tab-label {
    font-size: 13px;
    font-weight: 500;
}

/* Body */
.gutter-import-body {
    padding: 20px;
}

.import-panel.hidden {
    display: none;
}

/* Form fields (reuse existing styles where possible) */
.gutter-import-body .field-group {
    margin-bottom: 16px;
}

.gutter-import-body .field-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.gutter-import-body .field-group input[type="text"],
.gutter-import-body .field-group input[type="url"],
.gutter-import-body .field-group input[type="number"],
.gutter-import-body .field-group select,
.gutter-import-body .field-group textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 14px;
    transition: border-color 0.15s;
}

.gutter-import-body .field-group input:focus,
.gutter-import-body .field-group select:focus,
.gutter-import-body .field-group textarea:focus {
    outline: none;
    border-color: var(--color-cyan);
}

.gutter-import-body .field-group textarea {
    resize: vertical;
    min-height: 80px;
}

.gutter-import-body .field-row {
    display: flex;
    gap: 12px;
}

.gutter-import-body .field-row .field-group {
    flex: 1;
}

.gutter-import-body .field-checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.gutter-import-body .field-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-cyan);
}

/* File drop zone */
.file-drop-zone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}

.file-drop-zone:hover {
    border-color: var(--color-cyan);
    background: rgba(0, 217, 255, 0.05);
}

.file-drop-zone.dragover {
    border-color: var(--color-blue);
    background: rgba(255, 215, 0, 0.1);
}

.file-drop-zone.hidden {
    display: none;
}

.drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.drop-zone-content .drop-icon {
    font-size: 32px;
}

.drop-zone-content .drop-text {
    font-size: 14px;
    color: var(--color-text);
}

.drop-zone-content .drop-hint {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* File preview */
.file-preview {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.file-preview.hidden {
    display: none;
}

.file-preview .preview-thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.file-preview .preview-thumb img,
.file-preview .preview-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-preview .preview-thumb .audio-icon,
.file-preview .preview-thumb .file-icon {
    font-size: 28px;
}

.file-preview .preview-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.file-preview .preview-name {
    font-size: 14px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-preview .preview-size {
    font-size: 12px;
    color: var(--color-text-muted);
}

.file-preview .preview-clear {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    transition: color 0.15s;
}

.file-preview .preview-clear:hover {
    color: var(--color-red);
}

/* Color selector */
.color-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.color-option {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s;
}

.color-option:hover {
    transform: scale(1.15);
}

.color-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.color-option .color-swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color);
    border: 2px solid transparent;
    transition: border-color 0.15s;
}

.color-option.selected .color-swatch {
    border-color: var(--color-text);
}

/* Footer */
.gutter-import-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.gutter-import-footer .btn {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.gutter-import-footer .btn-cancel {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.gutter-import-footer .btn-cancel:hover {
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

.gutter-import-footer .btn-import {
    background: var(--color-blue);
    border: 1px solid var(--color-blue);
    color: var(--color-black);
}

.gutter-import-footer .btn-import:hover {
    background: #ffc800;
}

.gutter-import-footer .btn-import:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Embed type specific fields */
.embed-note-fields.hidden,
.embed-data-fields.hidden {
    display: none;
}

/* ============================================
   Shot Filmstrip - Image & Audio Previews
   ============================================ */

/* Override absolute positioning for image/audio - use static positioning
   so content can size the parent container */
.shot-filmstrip-image,
.shot-filmstrip-audio {
    position: static;
    width: auto;
    min-width: 180px;
    padding: 8px;
    border-radius: 6px;
    background: var(--color-bg-dark);
}

.shot-filmstrip-image .filmstrip-header,
.shot-filmstrip-audio .filmstrip-header {
    position: static;
    background: none;
    padding: 0 0 8px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shot-filmstrip-image .filmstrip-image-preview,
.shot-filmstrip-audio .filmstrip-audio-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    margin: 0 0 8px 0;
}

.filmstrip-image-preview img {
    max-width: 250px;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.filmstrip-audio-preview {
    flex-direction: column;
    gap: 8px;
}

.filmstrip-audio-preview .audio-icon {
    font-size: 24px;
}

.filmstrip-audio-preview audio {
    width: 100%;
    max-width: 200px;
    height: 32px;
}

/* Position filmstrip actions at bottom for image/audio variants */
.shot-filmstrip-image .filmstrip-actions,
.shot-filmstrip-audio .filmstrip-actions {
    position: static;
    background: none;
    padding: 0;
    justify-content: flex-start;
}

/* ============================================
   Version History Panel
   ============================================ */

/* Version History - Toolbar Button */
.version-history-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.version-history-btn.active {
    background: var(--color-cyan);
    color: var(--color-black);
}

.version-btn-icon {
    font-size: 14px;
}

.version-btn-label {
    font-size: 13px;
}

/* Version Dropdown Panel */
.version-dropdown {
    position: fixed;
    width: 300px;
    max-height: 450px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: dropdown-appear 0.15s ease;
}

.version-dropdown.hidden {
    display: none;
}

@keyframes dropdown-appear {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown Actions Section */
.version-dropdown-actions {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.version-dropdown-divider {
    height: 1px;
    background: var(--color-border);
}

/* History Header with Filter */
.version-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.version-filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    cursor: pointer;
}

.version-filter-label input {
    accent-color: var(--color-cyan);
}

/* ============================================
   Colored Paper Toggle
   ============================================ */
.version-paper-toggle-section {
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-border);
}

.version-paper-toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.version-paper-toggle-label:hover {
    color: var(--color-text);
}

.version-paper-toggle-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-cyan);
}

.paper-toggle-icon {
    font-size: 14px;
}

.paper-divider {
    margin: 4px 0;
}

.version-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.version-history-empty {
    padding: 24px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

.version-history-item {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.15s ease;
}

.version-history-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.version-history-item.current {
    border-left: 3px solid var(--color-cyan);
    background: rgba(0, 217, 255, 0.05);
}

.version-history-item.checkpoint {
    border-left: 3px solid var(--color-blue);
}

.version-history-item.auto-save {
    opacity: 0.7;
}

.version-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.version-id {
    font-family: 'Source Code Pro', monospace;
    font-size: 11px;
    color: var(--color-cyan);
    background: rgba(0, 217, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.version-time {
    font-size: 11px;
    color: var(--color-text-muted);
}

.version-message {
    font-size: 13px;
    color: var(--color-text);
    margin-bottom: 6px;
    line-height: 1.4;
}

.version-checkpoint-name {
    display: inline-block;
    background: var(--color-blue);
    color: var(--color-black);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 8px;
}

.version-item-actions {
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.version-history-item:hover .version-item-actions {
    opacity: 1;
}

.version-item-btn {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.version-item-btn:hover {
    background: var(--color-cyan);
    color: var(--color-black);
    border-color: var(--color-cyan);
}

.version-history-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

.version-action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 11px;
    font-weight: 500;
    padding: 10px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.version-action-btn .action-icon {
    font-size: 16px;
}

.version-action-btn:hover {
    background: var(--color-cyan);
    color: var(--color-black);
    border-color: var(--color-cyan);
}

.version-action-checkpoint {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.version-action-checkpoint:hover {
    background: var(--color-blue);
    color: var(--color-black);
}

/* Checkpoint tag in version list */
.version-checkpoint-tag {
    display: inline-block;
    background: var(--color-blue);
    color: var(--color-black);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
}

.version-load-more {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--color-cyan);
    font-size: 12px;
    padding: 12px;
    cursor: pointer;
    text-align: center;
}

.version-load-more:hover {
    text-decoration: underline;
}

/* ============================================
   Version Toast Notifications
   ============================================ */

.version-toast-container {
    position: fixed;
    bottom: 80px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2000;
    pointer-events: none;
}

.version-toast {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--color-text);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: toast-in 0.3s ease;
}

.version-toast.error {
    border-color: var(--color-red);
    background: rgba(255, 46, 59, 0.1);
}

.version-toast.fade-out {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   Distribution Drafts & Revision Colors
   Industry-standard screenplay revision colors
   ============================================ */

/* Small color chip for version history items */
.revision-color-chip-small {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

/* Large color chip for modal preview */
.revision-color-chip {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* Distribution draft items in version history */
.version-history-item.distribution-draft {
    border-left: 3px solid var(--revision-color, #FFFFFF);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 0%,
        transparent 50%
    );
}

.version-history-item.distribution-draft:hover {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 50%
    );
}

/* Revision preview in Save As modal */
.revision-preview {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.revision-info {
    display: flex;
    flex-direction: column;
}

.revision-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-white);
}

.revision-number {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Pages changed summary */
.pages-changed-summary {
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-top: 16px;
    font-size: 13px;
}

.pages-label {
    color: var(--color-text-muted);
}

.pages-list {
    color: var(--color-cyan);
    font-weight: 500;
}

/* Save As Modal */
.save-as-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.save-as-modal.hidden {
    display: none;
}

.save-as-content {
    width: 100%;
    max-width: 480px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.save-as-content .modal-title {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-white);
}

/* Tab switcher */
.save-as-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    background: var(--color-bg);
    padding: 4px;
    border-radius: var(--radius-md);
}

.save-as-tab {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.save-as-tab:hover {
    color: var(--color-text);
}

.save-as-tab.active {
    background: var(--color-card);
    color: var(--color-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Tab content */
.save-as-tab-content {
    animation: fadeIn 0.2s ease;
}

.save-as-tab-content.hidden {
    display: none;
}

.tab-description {
    color: var(--color-text-muted);
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Form styles (reusing existing modal-form) */
.save-as-content .modal-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.save-as-content .modal-form label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: -8px;
}

.save-as-content .modal-form input,
.save-as-content .modal-form textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 14px;
}

.save-as-content .modal-form input:focus,
.save-as-content .modal-form textarea:focus {
    outline: none;
    border-color: var(--color-blue);
}

.save-as-content .modal-form input::placeholder,
.save-as-content .modal-form textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
}

/* Modal actions */
.save-as-content .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

/* ============================================
   Recipient Picker (Typeahead Multi-Select)
   ============================================ */

.recipient-picker {
    position: relative;
    width: 100%;
}

/* Selected recipient chips */
.recipient-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.recipient-chips:empty {
    display: none;
}

.recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--color-text);
}

.recipient-chip-user {
    border-color: var(--color-blue);
    background: rgba(59, 130, 246, 0.1);
}

.recipient-chip-team {
    border-color: var(--color-purple);
    background: rgba(147, 51, 234, 0.1);
}

.recipient-chip-department {
    border-color: var(--color-cyan);
    background: rgba(6, 182, 212, 0.1);
}

.recipient-chip-organization {
    border-color: var(--color-gold);
    background: rgba(234, 179, 8, 0.1);
}

.chip-icon {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
}

.chip-icon svg {
    width: 14px;
    height: 14px;
}

.chip-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    margin-left: 2px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--color-text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.chip-remove:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

/* Input wrapper */
.recipient-input-wrapper {
    position: relative;
}

.recipient-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 14px;
}

.recipient-input:focus {
    outline: none;
    border-color: var(--color-blue);
}

.recipient-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
}

/* Dropdown */
.recipient-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
}

.recipient-dropdown.hidden {
    display: none;
}

.recipient-no-results {
    padding: 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* Result groups */
.recipient-group {
    padding: 8px 0;
}

.recipient-group:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

.recipient-group-label {
    padding: 4px 12px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
}

/* Individual results */
.recipient-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.recipient-result:hover,
.recipient-result.highlighted {
    background: var(--color-bg);
}

.recipient-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
}

.recipient-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.recipient-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recipient-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Diff viewer revision color headers */
.diff-pane-header.has-revision-color {
    font-weight: 600;
    border-left-width: 4px;
    border-left-style: solid;
    padding-left: 12px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================
   Diff Viewer Modal
   ============================================ */

.diff-viewer-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.diff-viewer-modal.hidden {
    display: none;
}

.diff-viewer-content {
    width: 100%;
    max-width: 1200px;
    max-height: calc(100vh - 80px);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.diff-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.diff-viewer-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.diff-viewer-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.diff-view-mode {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.diff-viewer-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.diff-viewer-close:hover {
    color: var(--color-text);
}

.diff-file-nav {
    display: flex;
    gap: 4px;
    padding: 8px 16px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
}

.diff-file-tab {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.diff-file-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text);
}

.diff-file-tab.active {
    background: var(--color-cyan);
    color: var(--color-black);
}

.diff-container {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.diff-empty {
    padding: 48px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* Side-by-side diff view */
.diff-side-by-side {
    display: flex;
    height: 100%;
}

.diff-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-border);
}

.diff-pane:last-child {
    border-right: none;
}

.diff-pane-header {
    padding: 8px 12px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.diff-pane-content {
    flex: 1;
    overflow: auto;
    font-family: 'Source Code Pro', monospace;
    font-size: 12px;
    line-height: 1.5;
}

/* Unified diff view */
.diff-unified {
    font-family: 'Source Code Pro', monospace;
    font-size: 12px;
    line-height: 1.5;
    padding: 16px 0;
}

/* Diff line styles */
.diff-line {
    padding: 2px 16px;
    white-space: pre-wrap;
    word-break: break-all;
}

.diff-line.diff-added {
    background: rgba(57, 255, 20, 0.15);
    color: var(--color-green);
}

.diff-line.diff-removed {
    background: rgba(255, 46, 59, 0.15);
    color: var(--color-red);
}

.diff-line.diff-context {
    color: var(--color-text-muted);
}

.diff-line.diff-placeholder {
    background: rgba(255, 255, 255, 0.02);
    min-height: 20px;
}

.diff-viewer-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

.diff-restore-btn {
    background: var(--color-blue);
    border: none;
    color: var(--color-black);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.diff-restore-btn:hover {
    background: #FFF;
}

/* ============================================
   Conflict Resolver Modal
   ============================================ */

.conflict-resolver-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(4px);
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.conflict-resolver-modal.hidden {
    display: none;
}

.conflict-resolver-content {
    width: 100%;
    max-width: 1000px;
    max-height: calc(100vh - 80px);
    background: var(--color-card);
    border: 2px solid var(--color-blue);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.conflict-resolver-header {
    padding: 20px 24px;
    background: rgba(255, 215, 0, 0.1);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
}

.conflict-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
}

.conflict-resolver-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-blue);
    margin: 0 0 8px 0;
}

.conflict-resolver-subtitle {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0;
}

.conflict-resolver-main {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.conflict-list-pane {
    width: 280px;
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
}

.conflict-list-header {
    padding: 12px 16px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.conflict-list {
    flex: 1;
    overflow-y: auto;
}

.conflict-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.15s ease;
}

.conflict-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.conflict-item.selected {
    background: rgba(0, 217, 255, 0.1);
    border-left: 3px solid var(--color-cyan);
}

.conflict-status {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.conflict-status.resolved {
    background: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-black);
}

.conflict-location {
    flex: 1;
}

.conflict-file {
    display: block;
    font-size: 12px;
    color: var(--color-text);
    font-weight: 500;
}

.conflict-line {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
}

.conflict-preview-text {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.conflict-label {
    font-weight: 600;
}

.conflict-label.mine {
    color: var(--color-cyan);
}

.conflict-preview-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
}

.conflict-preview-header h4 {
    font-size: 16px;
    color: var(--color-text);
    margin: 0 0 16px 0;
}

.conflict-comparison {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.conflict-side {
    flex: 1;
    border-radius: 8px;
    overflow: hidden;
}

.conflict-side.mine {
    border: 1px solid var(--color-cyan);
}

.conflict-side.theirs {
    border: 1px solid var(--color-blue);
}

.conflict-side-header {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
}

.conflict-side.mine .conflict-side-header {
    background: rgba(0, 217, 255, 0.1);
    color: var(--color-cyan);
}

.conflict-side.theirs .conflict-side-header {
    background: rgba(255, 215, 0, 0.1);
    color: var(--color-blue);
}

.conflict-side-content {
    padding: 12px;
    background: var(--color-bg);
    font-family: 'Source Code Pro', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
    min-height: 80px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.conflict-options {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.conflict-option-btn {
    flex: 1;
    padding: 12px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.conflict-option-btn:hover {
    border-color: var(--color-cyan);
    background: rgba(0, 217, 255, 0.1);
}

.conflict-option-btn.selected {
    background: var(--color-cyan);
    border-color: var(--color-cyan);
    color: var(--color-black);
}

.conflict-option-btn.small {
    flex: none;
    padding: 8px 16px;
}

.conflict-custom-area {
    margin-top: 16px;
}

.conflict-custom-textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-family: 'Source Code Pro', monospace;
    font-size: 12px;
    resize: vertical;
    margin-bottom: 12px;
}

.conflict-custom-textarea:focus {
    outline: none;
    border-color: var(--color-cyan);
}

.conflict-resolver-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

.conflict-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.conflict-btn-cancel {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.conflict-btn-cancel:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}

.conflict-btn-secondary {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.conflict-btn-secondary:hover {
    background: var(--color-bg);
    border-color: var(--color-cyan);
}

.conflict-btn-primary {
    background: var(--color-green);
    border: none;
    color: var(--color-black);
    margin-left: auto;
}

.conflict-btn-primary:hover {
    background: #4AFF25;
}

.conflict-btn-primary:disabled {
    background: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* ============================================
   User Identity Modal
   ============================================ */

.user-identity-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.user-identity-modal.hidden {
    display: none;
}

.user-identity-content {
    width: 100%;
    max-width: 400px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
}

.user-identity-header {
    margin-bottom: 24px;
}

.user-identity-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.user-identity-header h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 8px 0;
}

.user-identity-header p {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0;
}

.user-identity-form {
    text-align: left;
}

.user-identity-input-group {
    display: flex;
    gap: 8px;
}

.user-identity-input {
    flex: 1;
    padding: 12px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 16px;
}

.user-identity-input:focus {
    outline: none;
    border-color: var(--color-cyan);
}

.user-identity-input::placeholder {
    color: var(--color-text-muted);
}

.user-identity-submit {
    padding: 12px 24px;
    background: var(--color-cyan);
    border: none;
    border-radius: 8px;
    color: var(--color-black);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.user-identity-submit:hover {
    background: #FFF;
}

.user-identity-submit:disabled {
    background: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.user-identity-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.user-identity-error {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(255, 46, 59, 0.1);
    border: 1px solid var(--color-red);
    border-radius: 6px;
    color: var(--color-red);
    font-size: 13px;
}

.user-identity-error.hidden {
    display: none;
}
/* ═════════════════════════════════════════════════════════════════════════════
   COVER PAGE - Industry Standard TV Screenplay Format

   US Letter: 8.5" x 11" (aspect ratio 1:1.294)
   Standard margins: 1.5" left, 1" right, 1" top, 0.5-1" bottom
   Font: Courier 12pt
   ═════════════════════════════════════════════════════════════════════════════ */

.cover-page {
    width: 100%;
    display: flex;
    justify-content: center;
    background: var(--color-bg);
    padding: 24px;
    page-break-after: always;
}

/* Paper simulation - 8.5x11 aspect ratio */
.cover-page-paper {
    position: relative;
    width: 714px;   /* 8.5" at 84dpi - balanced for modern screens */
    max-width: calc(100% - 48px);
    aspect-ratio: 8.5 / 11;
    background: var(--screenplay-bg, #FFFFFF);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    flex-shrink: 0;
}

.cover-page-content {
    position: absolute;
    inset: 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12pt;
    line-height: 1;
    color: var(--screenplay-text, #000000);
    /* Margins: 1" top, 1.5" left, 1" right, 1" bottom (at 84dpi) */
    padding: 84px 84px 84px 126px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Upper section - title block starts ~1/3 down the page */
.cover-upper {
    text-align: center;
    padding-top: 25%; /* Push title block down ~1/3 of content area */
}

/* Series Title - Centered, Uppercase */
.cover-series-title {
    font-size: 12pt;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 36px;
}

/* Episode Title - in quotes */
.cover-episode-title {
    font-size: 12pt;
    font-weight: normal;
    margin-bottom: 48px;
}

/* Written By Credit */
.cover-credit {
    margin-top: 36px;
}

.cover-credit-label {
    font-size: 12pt;
    margin-bottom: 12px;
}

.cover-credit-name {
    font-size: 12pt;
}

/* Lower section - footer with contact left, draft right */
.cover-lower {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* Contact info - bottom left */
.cover-contact-block {
    text-align: left;
    font-size: 12pt;
    line-height: 1.5;
}

/* .cover-contact-line { } */

/* Draft info - bottom right */
.cover-draft-block {
    text-align: right;
    font-size: 12pt;
    line-height: 1.5;
}

/* .cover-draft-label { } */

/* .cover-draft-date { } */

/* Cover page hidden state (for toggle) */
.cover-page.hidden {
    display: none;
}

/* Cover page responsive - maintain aspect ratio but scale down */
@media (max-width: 700px) {
    .cover-page {
        padding: 12px;
        align-items: flex-start;
    }

    .cover-page-paper {
        max-width: 100%;
    }

    .cover-page-content {
        /* Scale margins proportionally */
        padding: 10% 10% 10% 14%;
        font-size: 11pt;
    }

    .cover-series-title {
        font-size: 11pt;
        margin-bottom: 24px;
    }

    .cover-episode-title {
        margin-bottom: 32px;
    }
}

/* Print styles for cover page - exact 8.5x11 with proper margins */
@media print {
    .cover-page {
        width: 8.5in;
        height: 11in;
        padding: 0;
        margin: 0;
        page-break-after: always;
        background: white;
        display: block;
    }

    .cover-page-paper {
        width: 8.5in;
        height: 11in;
        max-width: none;
        box-shadow: none;
        border-radius: 0;
    }

    .cover-page-content {
        /* Exact print margins */
        padding: 1in 1in 1in 1.5in;
        color: black;
        font-size: 12pt;
    }
}


/* ═════════════════════════════════════════════════════════════════════════════
   AUTO-FORMATTING - Scene Headings & Transitions
   ═════════════════════════════════════════════════════════════════════════════ */

/* Scene Headings (INT./EXT.) - Full width, bold, uppercase */
/* Note: spacing applied via padding on .line-content, not margin on row, to keep line numbers contiguous */
.line-scene-heading .line-content {
    text-align: left;
    margin-left: var(--scene-heading-margin-left);
    padding-top: calc(var(--scene-heading-margin-top) + var(--scene-heading-padding-top));
    padding-bottom: var(--scene-heading-padding-bottom);
}

.scene-heading {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--screenplay-text, #000000);
    display: flex;
    align-items: baseline;
    width: 100%;
}

/* Scene numbers - industry standard: flanking the scene heading */
.scene-number {
    font-weight: bold;
    font-size: inherit;
    color: var(--screenplay-text, #000000);
    flex-shrink: 0;
}

.scene-number-left {
    margin-right: 2em;
}

.scene-number-right {
    margin-left: auto;
    padding-left: 2em;
}

/* Transitions (CUT TO:, FADE OUT:, etc.) - Right-aligned */
.line-transition .line-content {
    text-align: right;
    margin-right: var(--transition-margin-right);
    padding-right: 24px;
    padding-top: var(--transition-padding-top);
    padding-bottom: var(--transition-padding-bottom);
}

.transition {
    text-transform: uppercase;
    color: var(--screenplay-text, #000000);
}

/* Secondary sluglines (numbered shots within a scene) */
.line-secondary-slugline .line-content {
    text-align: left;
    margin-left: var(--scene-heading-margin-left);
    padding-top: 0.5em;
    padding-bottom: 0.25em;
}

.secondary-slugline {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--screenplay-text, #000000);
    display: flex;
    align-items: baseline;
    width: 100%;
}

.shot-number {
    font-weight: bold;
    font-size: inherit;
    color: var(--screenplay-text, #000000);
    flex-shrink: 0;
}

.shot-number-left {
    margin-right: 2em;
}

.shot-number-right {
    margin-left: auto;
    padding-left: 2em;
}

/* Centered text (Fountain ! prefix) */
.line-centered .line-content {
    text-align: center;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.centered-text {
    font-weight: bold;
    text-transform: uppercase;
    color: var(--screenplay-text, #000000);
}

/* =============================================================================
   MEMBER MANAGEMENT STYLES
   ============================================================================= */

/* Member Grid */
.members-grid {
    display: grid;
    gap: 12px;
}

/* Member Card */
.member-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.member-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Member Info */
.member-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.member-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    color: white;
    flex-shrink: 0;
}

.member-details {
    min-width: 0;
}

.member-name {
    font-weight: 500;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-email {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-department {
    font-size: 0.75rem;
    color: rgba(156, 39, 176, 0.8);
    margin-top: 2px;
}

/* Member Role Controls */
.member-role {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.member-role .role-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 6px 28px 6px 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: all 0.15s;
}

.member-role .role-select:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.member-role .role-select:focus {
    outline: none;
    border-color: rgba(0, 217, 255, 0.5);
    box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.15);
}

/* Restriction Toggle */
.restriction-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    user-select: none;
}

.restriction-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #FFC107;
}

.restriction-toggle input:checked + span {
    color: rgba(255, 193, 7, 0.9);
}

/* Remove Button */
.member-card .btn-remove,
.member-card .btn-icon {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.member-card .btn-remove:hover,
.member-card .btn-icon:hover {
    background: rgba(239, 68, 68, 0.15);
    color: rgba(239, 68, 68, 0.9);
}

/* =============================================================================
   SETTINGS PAGE STYLES
   ============================================================================= */

.settings-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 24px;
}

.settings-header {
    margin-bottom: 32px;
}

.settings-header h1 {
    font-size: 1.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 8px 0;
}

.settings-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin: 0;
}

/* Settings Tabs */
.settings-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 28px;
}

.settings-tabs .tab {
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.settings-tabs .tab:hover {
    color: rgba(255, 255, 255, 0.75);
}

.settings-tabs .tab.active {
    color: rgba(0, 217, 255, 0.95);
    border-bottom-color: rgba(0, 217, 255, 0.95);
}

/* Tab Content */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Section Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header h2 {
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.member-count {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.95rem;
}

/* =============================================================================
   ADD MEMBER MODAL STYLES
   ============================================================================= */

/* Search Results */
.search-results {
    max-height: 200px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-top: 8px;
}

.search-results:empty {
    display: none;
}

.search-result-item {
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.search-result-name {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    display: block;
}

.search-result-email {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
}

.search-no-results {
    padding: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

/* =============================================================================
   ROLE BADGE COLORS
   ============================================================================= */

.role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}

.role-badge-owner {
    background: rgba(156, 39, 176, 0.2);
    color: #CE93D8;
}

.role-badge-admin {
    background: rgba(244, 67, 54, 0.2);
    color: #EF9A9A;
}

.role-badge-editor {
    background: rgba(33, 150, 243, 0.2);
    color: #90CAF9;
}

.role-badge-viewer {
    background: rgba(158, 158, 158, 0.2);
    color: #BDBDBD;
}

.role-badge-member {
    background: rgba(76, 175, 80, 0.2);
    color: #A5D6A7;
}

/* Settings Gear Icon Button */
.card-action-btn.btn-settings {
    color: rgba(255, 255, 255, 0.4);
}

.card-action-btn.btn-settings:hover {
    color: rgba(0, 217, 255, 0.9);
    background: rgba(0, 217, 255, 0.1);
}

/* ============================================
   Screenplay Caboose - Stats & Navigation
   ============================================ */

.screenplay-caboose {
    margin-top: 48px;
    padding: 32px 24px;
    background: var(--color-card, #242424);
    border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
    border-radius: 12px 12px 0 0;
}

/* Stats Grid */
.caboose-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.caboose-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 8px;
    background: rgba(59, 158, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(59, 158, 255, 0.1);
    transition: all 0.2s ease;
}

.caboose-stat:hover {
    background: rgba(59, 158, 255, 0.1);
    border-color: rgba(59, 158, 255, 0.2);
}

.caboose-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-white, #ffffff);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}

.caboose-stat-label {
    font-size: 10px;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.5));
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* Breakdown stats span more width */
.caboose-stat-breakdown {
    grid-column: span 2;
}

.caboose-stat-breakdown .caboose-stat-value {
    font-size: 16px;
}

/* Navigation */
.caboose-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.caboose-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--color-bg, #1a1a1a);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
    border-radius: 999px;
    color: var(--color-text, rgba(255, 255, 255, 0.9));
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s ease;
    min-width: 140px;
}

.caboose-nav-btn:hover:not(.disabled) {
    background: rgba(0, 217, 255, 0.1);
    border-color: var(--color-cyan, #00d9ff);
    color: var(--color-cyan, #00d9ff);
}

.caboose-nav-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.caboose-nav-prev {
    justify-content: flex-start;
}

.caboose-nav-next {
    justify-content: flex-end;
}

.caboose-nav-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.caboose-nav-prev .caboose-nav-label {
    text-align: left;
}

.caboose-nav-next .caboose-nav-label {
    text-align: right;
}

.caboose-nav-divider {
    flex: 0 0 1px;
    height: 24px;
    background: var(--color-border, rgba(255, 255, 255, 0.1));
}

/* Responsive */
@media (max-width: 768px) {
    .screenplay-caboose {
        padding: 24px 16px;
    }

    .caboose-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .caboose-stat-breakdown {
        grid-column: span 2;
    }

    .caboose-nav {
        flex-direction: column;
        gap: 12px;
    }

    .caboose-nav-btn {
        width: 100%;
        justify-content: center;
        min-width: 0;
    }

    .caboose-nav-divider {
        display: none;
    }
}

/* Print: hide caboose */
@media print {
    .screenplay-caboose {
        display: none;
    }
}

/* =============================================================================
   AI SETTINGS & ENHANCEMENT STYLES
   ============================================================================= */

/* AI Modal Overlay */
.ai-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.ai-modal {
    background: var(--color-surface, #1a1a2e);
    border: 1px solid var(--color-border, #333);
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ai-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border, #333);
}

.ai-modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text, #fff);
}

.ai-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--color-text-muted, #888);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
}

.ai-modal-close:hover {
    color: var(--color-text, #fff);
}

.ai-modal-body {
    padding: 24px;
}

.ai-modal-intro {
    margin: 0 0 24px 0;
    color: var(--color-text-muted, #888);
    font-size: 14px;
    line-height: 1.5;
}

/* Provider Cards */
.ai-provider-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border, #333);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.ai-provider-card.configured {
    border-color: var(--color-green, #4ade80);
    background: rgba(74, 222, 128, 0.05);
}

.ai-provider-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
}

.ai-provider-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-blue, #3b82f6);
    color: white;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
}

.ai-provider-name {
    font-weight: 500;
    color: var(--color-text, #fff);
    flex: 1;
}

.ai-provider-badge {
    background: var(--color-blue, #3b82f6);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.ai-provider-status {
    color: var(--color-green, #4ade80);
    font-size: 12px;
    font-weight: 500;
}

.ai-provider-body {
    padding: 16px;
}

.ai-provider-input {
    display: flex;
    gap: 12px;
}

.ai-key-input {
    flex: 1;
    background: var(--color-bg, #0a0a14);
    border: 1px solid var(--color-border, #333);
    border-radius: 6px;
    padding: 10px 14px;
    color: var(--color-text, #fff);
    font-family: monospace;
    font-size: 14px;
}

.ai-key-input:focus {
    outline: none;
    border-color: var(--color-blue, #3b82f6);
}

.ai-provider-configured {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ai-key-masked {
    font-family: monospace;
    color: var(--color-text-muted, #888);
    font-size: 13px;
}

.ai-provider-actions {
    display: flex;
    gap: 8px;
}

.ai-get-key-link {
    display: inline-block;
    margin-top: 12px;
    color: var(--color-blue, #3b82f6);
    font-size: 13px;
    text-decoration: none;
}

.ai-get-key-link:hover {
    text-decoration: underline;
}

/* Model input */
.ai-provider-model {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-subtle, #222);
}

.ai-provider-model label {
    font-size: 13px;
    color: var(--color-text-muted, #888);
    white-space: nowrap;
}

.ai-model-input {
    flex: 1;
    background: var(--color-bg, #0a0a14);
    border: 1px solid var(--color-border, #333);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--color-text, #fff);
    font-size: 13px;
    font-family: monospace;
}

.ai-model-input:focus {
    outline: none;
    border-color: var(--color-blue, #3b82f6);
}

.ai-model-input::placeholder {
    color: var(--color-text-muted, #666);
}

/* AI Buttons */
.ai-btn {
    background: var(--color-surface, #1a1a2e);
    border: 1px solid var(--color-border, #333);
    border-radius: 6px;
    padding: 10px 20px;
    color: var(--color-text, #fff);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.ai-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-text-muted, #888);
}

.ai-btn-small {
    padding: 6px 12px;
    font-size: 12px;
}

.ai-btn-primary {
    background: var(--color-blue, #3b82f6);
    border-color: var(--color-blue, #3b82f6);
    color: white;
}

.ai-btn-primary:hover {
    background: #2563eb;
    border-color: #2563eb;
}

.ai-btn-danger {
    color: var(--color-red, #ef4444);
    border-color: var(--color-red, #ef4444);
}

.ai-btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Provider Messages */
.ai-provider-message {
    padding: 12px 16px;
    font-size: 13px;
    border-top: 1px solid var(--color-border, #333);
}

.ai-message-info {
    color: var(--color-blue, #3b82f6);
    background: rgba(59, 130, 246, 0.1);
}

.ai-message-success {
    color: var(--color-green, #4ade80);
    background: rgba(74, 222, 128, 0.1);
}

.ai-message-error {
    color: var(--color-red, #ef4444);
    background: rgba(239, 68, 68, 0.1);
}

/* Help Section */
.ai-modal-help {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border, #333);
}

.ai-modal-help strong {
    display: block;
    margin-bottom: 12px;
    color: var(--color-text, #fff);
    font-size: 14px;
}

.ai-modal-help ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-modal-help li {
    margin-bottom: 8px;
}

.ai-modal-help a {
    color: var(--color-blue, #3b82f6);
    text-decoration: none;
    font-size: 13px;
}

.ai-modal-help a:hover {
    text-decoration: underline;
}

/* AI Enhance Button (for metadata page) */
.ai-enhance-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-enhance-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.ai-enhance-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ai-enhance-btn.loading {
    pointer-events: none;
}

.ai-enhance-btn .ai-icon {
    font-size: 14px;
}

.ai-enhance-btn.not-configured {
    background: var(--color-surface, #1a1a2e);
    border: 1px dashed var(--color-border, #333);
    color: var(--color-text-muted, #888);
}

.ai-enhance-btn.not-configured:hover {
    border-color: var(--color-text-muted, #888);
    color: var(--color-text, #fff);
    box-shadow: none;
    transform: none;
}

/* AI Preview Modal */
.ai-preview-modal {
    max-width: 700px;
}

.ai-preview-content {
    background: var(--color-bg, #0a0a14);
    border: 1px solid var(--color-border, #333);
    border-radius: 8px;
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text, #fff);
}

.ai-preview-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-text-muted, #888);
}

.ai-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* AI Extracted Characters Preview */
.ai-preview-characters {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.ai-preview-characters h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #a5b4fc;
}

.ai-characters-list {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: disc;
}

.ai-characters-list li {
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text, #fff);
}

.ai-characters-list li strong {
    color: #c7d2fe;
}

/* AI Toast Notification */
.ai-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10001;
}

.ai-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* AI Attribution Badge */
.ai-attribution {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    color: #a5b4fc;
}

.ai-attribution .ai-icon {
    font-size: 12px;
}

/* =============================================================================
   POSTER GENERATOR MODAL
   ============================================================================= */

.poster-modal {
    max-width: 640px;
}

.poster-metadata-preview {
    background: var(--color-bg, #0a0a14);
    border: 1px solid var(--color-border, #333);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

.metadata-preview-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.metadata-preview-title .label {
    font-size: 13px;
    color: var(--color-text-muted, #888);
}

.metadata-preview-title strong {
    font-size: 16px;
    color: var(--color-text, #fff);
}

.metadata-preview-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-item {
    font-size: 13px;
    color: var(--color-text-muted, #888);
    line-height: 1.4;
}

.detail-item.muted {
    font-style: italic;
    opacity: 0.7;
}

.poster-section {
    margin-bottom: 20px;
}

.poster-section-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text, #fff);
    margin-bottom: 10px;
}

.poster-section-label .optional {
    font-weight: 400;
    color: var(--color-text-muted, #888);
}

/* Style Selection Grid */
.poster-style-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.poster-style-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border, #333);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.poster-style-option:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--color-text-muted, #888);
}

.poster-style-option.active {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--color-purple, #8b5cf6);
}

.poster-style-option .style-icon {
    font-size: 24px;
}

.poster-style-option .style-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text, #fff);
}

.poster-style-option .style-desc {
    font-size: 11px;
    color: var(--color-text-muted, #888);
    line-height: 1.3;
}

/* Custom Guidance Textarea */
.poster-textarea {
    width: 100%;
    background: var(--color-bg, #0a0a14);
    border: 1px solid var(--color-border, #333);
    border-radius: 6px;
    padding: 12px;
    color: var(--color-text, #fff);
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 60px;
}

.poster-textarea:focus {
    outline: none;
    border-color: var(--color-purple, #8b5cf6);
}

.poster-textarea::placeholder {
    color: var(--color-text-muted, #888);
}

/* Model Selection */
.poster-select {
    width: 100%;
    background: var(--color-bg, #0a0a14);
    border: 1px solid var(--color-border, #333);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--color-text, #fff);
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.poster-select:focus {
    outline: none;
    border-color: var(--color-purple, #8b5cf6);
}

.poster-select option {
    background: var(--color-bg, #0a0a14);
    color: var(--color-text, #fff);
    padding: 8px;
}

.poster-section-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-muted, #888);
}

/* Preview Area */
.poster-preview-area {
    margin: 20px 0;
    text-align: center;
}

.poster-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.preview-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text, #fff);
}

.preview-meta {
    display: flex;
    gap: 12px;
}

.preview-meta .meta-item {
    font-size: 12px;
    color: var(--color-text-muted, #888);
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: 4px;
}

.poster-preview-image {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.poster-preview-image img {
    max-width: 100%;
    max-height: 400px;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.poster-revised-prompt {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 6px;
    padding: 12px;
    text-align: left;
}

.poster-revised-prompt .prompt-label {
    font-size: 12px;
    font-weight: 500;
    color: #a5b4fc;
    display: block;
    margin-bottom: 6px;
}

.poster-revised-prompt p {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted, #888);
    line-height: 1.5;
}

/* Loading State */
.poster-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    text-align: center;
}

.poster-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(139, 92, 246, 0.2);
    border-top-color: var(--color-purple, #8b5cf6);
    border-radius: 50%;
    animation: poster-spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes poster-spin {
    to { transform: rotate(360deg); }
}

.poster-loading p {
    margin: 0;
    color: var(--color-text, #fff);
    font-size: 14px;
}

.poster-loading .loading-hint {
    color: var(--color-text-muted, #888);
    font-size: 13px;
    margin-top: 8px;
}

/* Error State */
.poster-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    padding: 16px;
    text-align: center;
}

.poster-error p {
    margin: 0;
    color: #f87171;
    font-size: 14px;
}

/* Actions Footer */
.poster-history-toggle {
    background: none;
    border: none;
    color: var(--color-text-muted, #888);
    font-size: 13px;
    cursor: pointer;
    padding: 8px 12px;
    transition: color 0.15s;
}

.poster-history-toggle:hover {
    color: var(--color-text, #fff);
}

.poster-action-buttons {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.credits-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    margin-left: 8px;
}

/* History View */
.poster-history-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.poster-back-btn {
    background: none;
    border: none;
    color: var(--color-text-muted, #888);
    font-size: 14px;
    cursor: pointer;
    padding: 8px 12px;
    transition: color 0.15s;
}

.poster-back-btn:hover {
    color: var(--color-text, #fff);
}

.poster-history-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--color-text, #fff);
}

.poster-history-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.history-empty,
.loading-text {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-muted, #888);
    font-size: 14px;
    padding: 40px 20px;
}

.history-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}

.history-item:hover {
    transform: scale(1.03);
}

.history-item img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
}

.history-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.history-style {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text, #fff);
    text-transform: capitalize;
}

.history-date {
    font-size: 10px;
    color: var(--color-text-muted, #888);
}

.current-badge {
    display: inline-block;
    background: var(--color-green, #4ade80);
    color: #000;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    margin-top: 4px;
}

.history-item.is-current {
    outline: 2px solid var(--color-green, #4ade80);
    outline-offset: 2px;
}

.history-item-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.history-item:hover .history-item-actions {
    opacity: 1;
}

.history-action-btn {
    background: rgba(0, 0, 0, 0.8);
    border: none;
    color: var(--color-text, #fff);
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.history-action-btn:hover {
    background: rgba(0, 0, 0, 0.95);
}

.history-action-delete:hover {
    background: rgba(239, 68, 68, 0.8);
}

/* Poster Generate Button (for toolbar) */
.poster-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.poster-generate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.poster-generate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.poster-generate-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Responsive */
@media (max-width: 640px) {
    .poster-style-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .poster-history-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* =============================================================================
   CHARACTER GLOW EFFECT
   Neon lightsaber glow casting onto gutters from behind the screenplay "paper"
   - Bright white core at the paper edge
   - Vibrant saturated color
   - Fast gradient falloff into gutter darkness
   ============================================================================= */

/* Pass the glow color down to the content cell */
body.character-glow-enabled .has-character-glow {
    --glow-color-inherited: var(--char-glow-color);
}

/* Enable position: relative on the content cell (the "paper") */
body.character-glow-enabled .has-character-glow .line-content {
    position: relative;
}

/* Shared properties for both gutter glows - on the content cell */
body.character-glow-enabled .has-character-glow .line-content::before,
body.character-glow-enabled .has-character-glow .line-content::after {
    content: '';
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 150px;
    pointer-events: none;
    z-index: 0;
}

/* LEFT GUTTER GLOW - light bleeds from paper's left edge */
body.character-glow-enabled .has-character-glow .line-content::before {
    right: 100%;
    /* Lightsaber gradient: white hot core → vibrant color → fast falloff */
    background: linear-gradient(
        to left,
        white 0%,
        color-mix(in srgb, var(--glow-color-inherited) 90%, white) 2%,
        var(--glow-color-inherited) 8%,
        color-mix(in srgb, var(--glow-color-inherited) 60%, transparent) 25%,
        color-mix(in srgb, var(--glow-color-inherited) 20%, transparent) 50%,
        transparent 100%
    );
}

/* RIGHT GUTTER GLOW - light bleeds from paper's right edge */
body.character-glow-enabled .has-character-glow .line-content::after {
    left: 100%;
    /* Lightsaber gradient: white hot core → vibrant color → fast falloff */
    background: linear-gradient(
        to right,
        white 0%,
        color-mix(in srgb, var(--glow-color-inherited) 90%, white) 2%,
        var(--glow-color-inherited) 8%,
        color-mix(in srgb, var(--glow-color-inherited) 60%, transparent) 25%,
        color-mix(in srgb, var(--glow-color-inherited) 20%, transparent) 50%,
        transparent 100%
    );
}

/* Fallback for browsers that don't support color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    body.character-glow-enabled .has-character-glow .line-content::before {
        background: linear-gradient(
            to left,
            white 0%,
            var(--glow-color-inherited) 5%,
            transparent 60%
        );
        opacity: 0.8;
    }
    body.character-glow-enabled .has-character-glow .line-content::after {
        background: linear-gradient(
            to right,
            white 0%,
            var(--glow-color-inherited) 5%,
            transparent 60%
        );
        opacity: 0.8;
    }
}

/* Glow toggle button in toolbar */
#glow-toggle {
    transition: background-color 0.2s ease, color 0.2s ease;
}

#glow-toggle.active {
    background: var(--accent-color, #1E88E5);
    color: white;
}

#glow-toggle.active:hover {
    background: var(--accent-color-hover, #1976D2);
}

/* Print: disable glow to save ink */
@media print {
    body.character-glow-enabled .has-character-glow .line-content::before,
    body.character-glow-enabled .has-character-glow .line-content::after {
        display: none;
    }
}

/* =============================================================================
   CHARACTER RENAME TOAST NOTIFICATION
   ============================================================================= */

.character-rename-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, #43A047, #2E7D32);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(67, 160, 71, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10001;
    white-space: nowrap;
}

.character-rename-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =============================================================================
   ANNOTATION OVERLAY SYSTEM
   "Transparent Acetate Sheets" - Layer-based screenplay annotations
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Annotation Indicators - Colored dots inline with script lines
   ----------------------------------------------------------------------------- */

.annotation-indicator {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    transition: transform 0.15s ease;
    z-index: 10;
}

.annotation-indicator:hover {
    transform: scale(1.1);
}

/* Left gutter slot indicators align right */
.gutter-slot.left .annotation-indicator {
    justify-content: flex-end;
}

/* Right gutter slot indicators align left */
.gutter-slot.right .annotation-indicator {
    justify-content: flex-start;
}

/* Annotation dots */
.annotation-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.annotation-indicator:hover .annotation-dot {
    transform: scale(1.2);
}

/* Priority indicators */
.annotation-dot.priority-high {
    box-shadow: 0 0 0 2px rgba(255, 167, 38, 0.5);
}

.annotation-dot.priority-critical {
    box-shadow: 0 0 0 2px rgba(239, 83, 80, 0.5);
    animation: pulse-critical 1.5s ease-in-out infinite;
}

@keyframes pulse-critical {
    0%, 100% { box-shadow: 0 0 0 2px rgba(239, 83, 80, 0.5); }
    50% { box-shadow: 0 0 0 4px rgba(239, 83, 80, 0.3); }
}

/* Resolved state */
.annotation-dot.resolved {
    opacity: 0.4;
    position: relative;
}

.annotation-dot.resolved::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -2px;
    right: -2px;
    height: 1px;
    background: currentColor;
    transform: rotate(-45deg);
}

/* Count badge for overflow */
.annotation-count-badge {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-secondary, #9CA3AF);
    line-height: 1;
    margin-top: 1px;
}

/* -----------------------------------------------------------------------------
   Annotation Tooltips - Hover preview
   ----------------------------------------------------------------------------- */

.annotation-tooltip {
    position: fixed;
    background: var(--bg-elevated, #1F2937);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
    border-radius: 8px;
    padding: 8px 12px;
    max-width: 300px;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    pointer-events: none;
    animation: tooltip-fade-in 0.15s ease;
}

@keyframes tooltip-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.annotation-tooltip-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #9CA3AF);
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.annotation-tooltip-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.annotation-tooltip-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.annotation-tooltip-icon {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-size: 12px;
}

.annotation-tooltip-text {
    font-size: 12px;
    color: var(--text-primary, #E5E7EB);
    line-height: 1.4;
    word-break: break-word;
}

.annotation-tooltip-more {
    font-size: 11px;
    color: var(--text-tertiary, #6B7280);
    font-style: italic;
    margin-top: 4px;
}

/* -----------------------------------------------------------------------------
   Line Highlight - When annotation is focused
   ----------------------------------------------------------------------------- */

.script-line.annotation-highlight {
    background-color: rgba(30, 136, 229, 0.15);
    transition: background-color 0.3s ease;
}

.script-line.annotation-highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-color, #1E88E5);
}

/* -----------------------------------------------------------------------------
   Annotation Layer Panel - Slide-down panel from behind metadata
   ----------------------------------------------------------------------------- */

/* Container wrapper that sits below metadata panel */
.annotation-layer-panel-wrapper {
    position: relative;
    z-index: 5;
    background: var(--bg-surface, #111827);
    margin-top: -1px; /* Overlap with metadata panel border */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.annotation-layer-panel-wrapper.open {
    max-height: 100px; /* Single row needs less height */
    overflow: visible;
}

/* Single-row panel - everything inline */
.annotation-layer-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    background: var(--bg-surface, #111827);
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.annotation-layer-panel.open {
    /* Panel content visible when wrapper is open */
}

/* Title at start of row */
.annotation-layer-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #E5E7EB);
    margin-right: 8px;
    padding-right: 12px;
    border-right: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
}

/* Section labels inline */
.annotation-layer-section-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary, #6B7280);
    margin-left: 8px;
    flex-shrink: 0;
}

/* Divider between sections */
.annotation-layer-divider {
    width: 1px;
    height: 20px;
    background: var(--border-color, rgba(255, 255, 255, 0.15));
    margin: 0 4px;
}

/* Close button at end */
.annotation-layer-panel-close {
    background: none;
    border: none;
    color: var(--text-secondary, #9CA3AF);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    margin-left: auto;
    font-size: 16px;
}

.annotation-layer-panel-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #E5E7EB);
}

.annotation-layer-panel-close:focus-visible {
    outline: 2px solid var(--accent-color, #1E88E5);
    outline-offset: 2px;
    background: rgba(255, 255, 255, 0.1);
}

/* Personal Only toggle inline */
.annotation-personal-only-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

.annotation-personal-only-label {
    font-size: 11px;
    color: var(--text-tertiary, #6B7280);
}

/* Layer toggle items - text-only with color glow */
.annotation-layer-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: none;
    border: none;
}

/* Inactive state - dimmed gray */
.annotation-layer-item.inactive .annotation-layer-item-label {
    color: var(--text-tertiary, #6B7280);
    text-shadow: none;
}

/* Active state - colored text with glow */
.annotation-layer-item.active .annotation-layer-item-label {
    text-shadow:
        0 0 8px currentColor,
        0 0 12px currentColor;
    animation: subtle-shimmer 3s ease-in-out infinite;
}

/* Shimmer animation */
@keyframes subtle-shimmer {
    0%, 100% {
        opacity: 1;
        filter: brightness(1);
    }
    50% {
        opacity: 0.85;
        filter: brightness(1.15);
    }
}

.annotation-layer-item:hover .annotation-layer-item-label {
    filter: brightness(1.2);
}

.annotation-layer-item:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

.annotation-layer-item-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary, #E5E7EB);
    transition: all 0.2s ease;
}

/* Color dots are now hidden - color applied to text */
.annotation-layer-item-dot {
    display: none;
}

.annotation-layer-item-count {
    font-size: 9px;
    opacity: 0.6;
    margin-left: 1px;
}

.annotation-layer-item.active .annotation-layer-item-count {
    opacity: 0.8;
}

/* Hide the old toggle switches */
.annotation-layer-toggle {
    display: none;
}

/* Personal-only mode toggle - now in header bar */
.annotation-personal-only-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(30, 136, 229, 0.08);
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.annotation-personal-only-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--accent-color, #1E88E5);
}

/* Summary section spans full width */
#annotation-layer-summary {
    grid-column: 1 / -1;
    border-right: none;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
    padding-top: 8px;
}

/* Responsive: Adjust for smaller screens */
@media (max-width: 768px) {
    .annotation-layer-panel {
        grid-template-columns: 1fr 1fr;
    }

    .annotation-layer-panel-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .annotation-layer-section {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .annotation-layer-panel {
        grid-template-columns: 1fr;
    }

    .annotation-layer-section {
        border-right: none;
        border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
        padding: 8px 12px;
    }

    .annotation-layer-section:last-child {
        border-bottom: none;
    }

    .annotation-layer-item {
        padding: 4px 6px;
    }

    .annotation-layer-item-label {
        font-size: 10px;
    }
}

/* -----------------------------------------------------------------------------
   Annotation Detail Panel - Slide-out for viewing/editing
   ----------------------------------------------------------------------------- */

.annotation-detail-panel {
    position: fixed;
    top: 60px;
    right: 0;
    width: 400px;
    max-width: 90vw;
    height: calc(100vh - 60px);
    background: var(--bg-surface, #111827);
    border-left: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    overflow-y: auto;
    z-index: 150;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.annotation-detail-panel.open {
    transform: translateX(0);
}

.annotation-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    position: sticky;
    top: 0;
    background: var(--bg-surface, #111827);
    z-index: 1;
}

.annotation-detail-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #E5E7EB);
}

.annotation-detail-close {
    background: none;
    border: none;
    color: var(--text-secondary, #9CA3AF);
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.annotation-detail-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.annotation-detail-content {
    padding: 16px;
}

.annotation-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.annotation-detail-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary, #9CA3AF);
}

.annotation-detail-badge.type-note { background: rgba(144, 164, 174, 0.2); }
.annotation-detail-badge.type-timing { background: rgba(66, 165, 245, 0.2); }
.annotation-detail-badge.type-source { background: rgba(102, 187, 106, 0.2); }
.annotation-detail-badge.type-data { background: rgba(171, 71, 188, 0.2); }
.annotation-detail-badge.type-media { background: rgba(255, 112, 67, 0.2); }
.annotation-detail-badge.type-question { background: rgba(255, 202, 40, 0.2); }
.annotation-detail-badge.type-action_item { background: rgba(38, 166, 154, 0.2); }

.annotation-detail-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary, #E5E7EB);
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-bottom: 16px;
    white-space: pre-wrap;
}

.annotation-detail-actions {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.annotation-detail-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.annotation-detail-btn-primary {
    background: var(--accent-color, #1E88E5);
    color: white;
}

.annotation-detail-btn-primary:hover {
    background: var(--accent-color-hover, #1976D2);
}

.annotation-detail-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary, #9CA3AF);
}

.annotation-detail-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #E5E7EB);
}

.annotation-detail-btn-danger {
    background: rgba(239, 83, 80, 0.1);
    color: #EF5350;
}

.annotation-detail-btn-danger:hover {
    background: rgba(239, 83, 80, 0.2);
}

/* -----------------------------------------------------------------------------
   Annotation Create Dialog
   ----------------------------------------------------------------------------- */

.annotation-create-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    max-width: 90vw;
    max-height: 90vh;
    background: var(--bg-surface, #111827);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
    border-radius: 12px;
    overflow: hidden;
    z-index: 1000;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.annotation-create-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
}

.annotation-create-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.annotation-create-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #E5E7EB);
}

.annotation-create-close {
    background: none;
    border: none;
    color: var(--text-secondary, #9CA3AF);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 20px;
    line-height: 1;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.annotation-create-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.annotation-create-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

.annotation-create-field {
    margin-bottom: 16px;
}

.annotation-create-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #9CA3AF);
    margin-bottom: 6px;
}

.annotation-create-input,
.annotation-create-textarea,
.annotation-create-select {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-primary, #E5E7EB);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.annotation-create-input:focus,
.annotation-create-textarea:focus,
.annotation-create-select:focus {
    outline: none;
    border-color: var(--accent-color, #1E88E5);
    box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.2);
}

.annotation-create-textarea {
    min-height: 100px;
    resize: vertical;
}

.annotation-create-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
}

.annotation-create-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.annotation-create-type-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.annotation-create-type-btn.selected {
    background: rgba(30, 136, 229, 0.15);
    border-color: var(--accent-color, #1E88E5);
}

.annotation-create-type-icon {
    font-size: 20px;
}

.annotation-create-type-label {
    font-size: 11px;
    color: var(--text-secondary, #9CA3AF);
}

.annotation-create-type-btn.selected .annotation-create-type-label {
    color: var(--text-primary, #E5E7EB);
}

.annotation-create-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    background: rgba(0, 0, 0, 0.2);
}

/* -----------------------------------------------------------------------------
   Department Colors (matching department_templates.py)
   ----------------------------------------------------------------------------- */

.dept-color-direction { background-color: #E53935; }
.dept-color-camera { background-color: #1E88E5; }
.dept-color-art { background-color: #43A047; }
.dept-color-sound { background-color: #8E24AA; }
.dept-color-editorial { background-color: #FB8C00; }
.dept-color-ad { background-color: #00ACC1; }
.dept-color-script { background-color: #5E35B1; }
.dept-color-producing { background-color: #FFB300; }

/* -----------------------------------------------------------------------------
   Print Styles - Hide annotation UI
   ----------------------------------------------------------------------------- */

@media print {
    .annotation-gutter,
    .annotation-layer-panel-wrapper,
    .annotation-layer-panel,
    .annotation-detail-panel,
    .annotation-create-dialog,
    .annotation-create-backdrop,
    .annotation-tooltip {
        display: none !important;
    }
}

/* ============================================
   Mobile Metadata Drawer
   ============================================ */

/* Hide the drawer toggle button on desktop */
.metadata-drawer-toggle {
    display: none;
}

/* Show only on mobile (768px and below) */
@media (max-width: 768px) {
    .metadata-drawer-toggle {
        display: flex;
    }
}

/* Drawer container - hidden by default */
.metadata-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    pointer-events: none;
    visibility: hidden;
}

.metadata-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}

/* Backdrop */
.metadata-drawer-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

.metadata-drawer.is-open .metadata-drawer-backdrop {
    background: rgba(0, 0, 0, 0.5);
}

/* Drawer content panel */
.metadata-drawer-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 85%;
    max-width: 400px;
    background: var(--bg-secondary, #1a1f2e);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.metadata-drawer.is-open .metadata-drawer-content {
    transform: translateX(0);
}

/* Drawer header */
.metadata-drawer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    background: var(--bg-primary, #0f1219);
}

.metadata-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #9CA3AF);
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

.metadata-drawer-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #E5E7EB);
}

.metadata-drawer-title {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #E5E7EB);
    margin: 0;
}

.metadata-drawer-edit {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-cyan, #00D9FF);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.metadata-drawer-edit:hover {
    background: rgba(0, 217, 255, 0.1);
}

/* Drawer body */
.metadata-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}

/* Drawer sections */
.metadata-drawer-section {
    margin-bottom: 24px;
}

.metadata-drawer-section h3 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary, #6B7280);
    margin: 0 0 12px 0;
}

/* Field rows */
.metadata-drawer-field {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
}

.metadata-drawer-label {
    font-size: 14px;
    color: var(--text-secondary, #9CA3AF);
}

.metadata-drawer-value {
    font-size: 14px;
    color: var(--text-primary, #E5E7EB);
    font-weight: 500;
}

/* Text blocks (logline, etc.) */
.metadata-drawer-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary, #E5E7EB);
    margin: 0;
}

/* Character list */
.metadata-drawer-characters {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metadata-drawer-character {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.03));
    border-radius: 8px;
}

.metadata-drawer-character .character-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #E5E7EB);
}

.metadata-drawer-character .character-role {
    font-size: 12px;
    color: var(--text-tertiary, #6B7280);
}

/* Action buttons */
.metadata-drawer-actions {
    padding-top: 16px;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.metadata-drawer-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s ease, transform 0.1s ease;
}

.metadata-drawer-btn:active {
    transform: scale(0.98);
}

.metadata-drawer-btn-primary {
    background: linear-gradient(135deg, var(--color-purple, #8B5CF6), var(--color-cyan, #00D9FF));
    color: white;
}

.metadata-drawer-btn-primary:hover {
    filter: brightness(1.1);
}