.cg-node-icon { position: relative; }
.cg-node-icon-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    border-radius: 6px;
}

/* ── Grouped tabs (compound session colour coding) ──────────────────────── */
.workspace-tab.is-grouped {
    --tab-group-color: #f28b3c;   /* overridden inline per-tab */
    position: relative;
    padding-left: .9rem;          /* room for the stripe */
}
.workspace-tab.is-grouped::before {
    content: '';
    display: block;
    position: absolute;
    left: 3px;
    top: 4px;
    bottom: 4px;
    width: 2.5px;
    border-radius: 2px;
    background: var(--tab-group-color);
    opacity: .75;
}
.workspace-tab.is-grouped.is-active::before { opacity: 1; }

/* Pulsing dot — shown on unvisited grouped tabs */
.tab-unvisited-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tab-group-color, #f28b3c);
    animation: tab-dot-pulse 1.6s ease-in-out infinite;
    margin-left: .1rem;
}
@keyframes tab-dot-pulse {
    0%, 100% { opacity: 1;  transform: scale(1); }
    50%       { opacity: .4; transform: scale(.65); }
}

.tab-run-icon {
    display: inline-block;
    font-size: .75rem;
    color: var(--accent, #f28b3c);
    animation: tabSpin 1.2s linear infinite;
}
@keyframes tabSpin { to { transform: rotate(360deg); } }

/* Complete tab — green check */
.tab-done-icon {
    font-size: .72rem;
    color: #4caf50;
}

.tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.tab-close {
    flex-shrink: 0;
    /* Large hit target — previous 0 .1rem made it nearly impossible to click precisely */
    padding: 3px 6px;
    margin-left: 2px;
    font-size: .9rem;
    line-height: 1;
    opacity: .55;
    cursor: pointer;
    border-radius: 3px;
    transition: opacity .1s, background .1s;
}
.tab-close:hover { opacity: 1; background: rgba(255,255,255,.15); }

/* "+ Tab" new-tab button — hidden, not needed for end users */
.workspace-tab-add-wrap {
    position: relative;
    flex-shrink: 0;
    display: none;
    align-items: center;
}
.workspace-tab-new-btn {
    flex-shrink: 0;
    padding: .25rem .65rem;
    background: transparent;
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 6px;
    color: var(--muted);
    font-size: .75rem;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
    white-space: nowrap;
}
.workspace-tab-new-btn:hover,
.workspace-tab-new-btn:focus-visible {
    color: var(--ink);
    border-color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.05);
    outline: none;
}

/* ── Workflow picker popover ────────────────────────────────────────────── */
.workspace-tab-picker[hidden] { display: none !important; }
.workspace-tab-picker {
    position: absolute;
    bottom: calc(100% + .4rem);
    right: 0;
    z-index: 500;
    min-width: 230px;
    max-height: 60dvh;
    overflow-y: auto;
    background: var(--bg-surface, #0e0e1a);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: .6rem;
    box-shadow: 0 8px 28px rgba(0,0,0,.55);
    padding: .35rem 0;
}
.workspace-tab-picker::-webkit-scrollbar { width: 4px; }
.workspace-tab-picker::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.tab-picker-heading {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    padding: .35rem .8rem .2rem;
    margin: 0;
}
.tab-picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tab-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    text-align: left;
    padding: .42rem .8rem;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.8);
    font-size: .82rem;
    cursor: pointer;
    transition: background .1s, color .1s;
}
.tab-picker-item:hover,
.tab-picker-item:focus-visible {
    background: rgba(242,139,60,.1);
    color: #fff;
    outline: none;
}
.tab-picker-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tab-picker-tag {
    flex-shrink: 0;
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255,255,255,.3);
    padding: .1rem .35rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .3rem;
}

/* ── Compound drag overlay ─────────────────────────────────────────── */
.workspace-compound-overlay[hidden] { display: none !important; }
.workspace-compound-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(242,139,60,.14);
    border: 2px dashed var(--accent, #f28b3c);
    border-radius: inherit;
    pointer-events: none;
    animation: overlayPulse 1.2s ease-in-out infinite alternate;
}
.workspace-compound-overlay-inner {
    text-align: center;
    color: var(--accent, #f28b3c);
}
.workspace-compound-icon {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: .5rem;
}
.workspace-compound-overlay-inner p {
    font-size: .9rem;
    font-weight: 600;
}
@keyframes overlayPulse {
    from { background: rgba(242,139,60,.10); }
    to   { background: rgba(242,139,60,.20); }
}

/* Workspace-shell needs relative positioning for the overlay */
.workspace-shell.panel { position: relative; }

/* ── "Chain into workflow" sticky bar on the result page ────────────── */
.dr-compound-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: .55rem 1rem .6rem;
    background: color-mix(in srgb, var(--panel, #1a1d24) 96%, transparent);
    border-top: 1px solid var(--panel-border, rgba(255,255,255,.10));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.dr-compound-bar-header {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .4rem;
    flex-wrap: wrap;
}
.dr-compound-bar-icon { font-size: .95rem; }
.dr-compound-bar-label { font-size: .82rem; font-weight: 700; color: var(--accent, #f28b3c); }
.dr-compound-bar-hint { font-size: .72rem; color: var(--muted, #98a2b3); }
.dr-compound-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.dr-compound-btn {
    padding: .3rem .65rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    color: var(--ink, #edf1f7);
    font-size: .78rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.dr-compound-btn:hover { background: rgba(242,139,60,.18); border-color: var(--accent, #f28b3c); color: var(--accent, #f28b3c); }

/* ── Resume-context review panel ───────────────────────────────────────── */
.rctx-panel {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #f28b3c) 8%, transparent), color-mix(in srgb, var(--accent, #f28b3c) 4%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent, #f28b3c) 30%, transparent);
    border-radius: 12px;
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.rctx-panel-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem .5rem;
}
.rctx-col-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.5);
    margin: .75rem 0 .35rem;
}

/* Big render preview in resume panel */
.rctx-render-preview {
    width: 100%;
    background: #0b0d11;
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 140px;
    overflow: hidden;
}
.rctx-render-media {
    display: block;
    width: 100%;
    max-height: 140px;
    object-fit: contain;
}

/* Chain CTA inside resume panel */
.rctx-chain-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    margin-top: .75rem;
    font-size: .95rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(242,139,60,.18), rgba(242,139,60,.08));
    border: 2px solid rgba(242,139,60,.5);
    border-radius: 10px;
    color: var(--accent, #f28b3c);
    cursor: pointer;
    justify-content: center;
    transition: background .2s, border-color .2s;
}
.rctx-chain-btn:hover:not(:disabled) {
    background: rgba(242,139,60,.24);
    border-color: var(--accent, #f28b3c);
}
.rctx-chain-btn:disabled { opacity: .7; cursor: default; }
.rctx-chain-hint {
    font-size: .82rem;
    font-weight: 600;
    color: var(--accent, #f28b3c);
    text-align: center;
    margin: .4rem 0 0;
    animation: cg-pulse 1.6s ease-in-out infinite;
}

.rctx-summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.rctx-summary::-webkit-details-marker { display: none; }
.rctx-eyebrow {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent, #f28b3c);
    opacity: .9;
    white-space: nowrap;
}
.rctx-title {
    font-weight: 600;
    font-size: .9rem;
}
.rctx-hint {
    font-size: .78rem;
    color: var(--text-muted, #888);
    margin-left: auto;
}
.rctx-body {
    padding: .5rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.rctx-media-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.rctx-thumb-btn {
    position: relative;
    padding: 0;
    border: 2px solid var(--border, rgba(255,255,255,.12));
    border-radius: 8px;
    background: var(--surface2, #1a1a1a);
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    transition: border-color .15s, transform .1s;
}
.rctx-thumb-btn:hover { border-color: var(--accent, #f28b3c); transform: scale(1.04); }
.rctx-thumb-btn.is-loaded { border-color: #4caf50; }
.rctx-thumb-btn.is-error  { border-color: #e53935; }
.rctx-thumb-btn.is-loading .rctx-thumb-label { opacity: 1; background: rgba(0,0,0,.55); }
.rctx-thumb-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    font-size: .6rem;
    font-weight: 700;
    text-align: center;
    padding: .18rem 0;
    background: rgba(0,0,0,.0);
    color: #fff;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .15s, background .15s;
}
.rctx-thumb-btn:hover .rctx-thumb-label { opacity: 1; background: rgba(0,0,0,.55); }
.rctx-thumb-btn.is-loaded .rctx-thumb-label,
.rctx-thumb-btn.is-error  .rctx-thumb-label { opacity: 1; }
.rctx-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}
.rctx-thumb-out {
    width: 96px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid color-mix(in srgb, var(--accent, #f28b3c) 50%, transparent);
    background: var(--surface2, #1a1a1a);
    flex-shrink: 0;
}
.rctx-arrow {
    font-size: 1.4rem;
    color: var(--text-muted, #888);
    flex-shrink: 0;
}
.rctx-action-hint {
    font-size: .78rem;
    color: var(--text-muted, #999);
    margin: 0;
}
.rctx-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.rctx-prompt-chip {
    font-size: .75rem;
    background: var(--surface2, rgba(255,255,255,.06));
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 6px;
    padding: .2rem .55rem;
    color: var(--text-muted, #aaa);
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rctx-prompt-chip strong { color: var(--text, #eee); }

/* ── Chain toast ────────────────────────────────────────────────────────── */
.chain-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    background: rgba(20,20,30,.93);
    color: #fff;
    border: 1px solid rgba(242,139,60,.4);
    border-radius: .6rem;
    padding: .65rem 1.2rem;
    font-size: .85rem;
    max-width: 28rem;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 9999;
}
.chain-toast.chain-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.render-done-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
    border-color: rgba(74, 222, 128, .4);
}
.render-done-view-btn {
    background: rgba(74, 222, 128, .15);
    border: 1px solid rgba(74, 222, 128, .45);
    color: #86efac;
    border-radius: .35rem;
    padding: 3px 10px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.render-done-view-btn:hover {
    background: rgba(74, 222, 128, .28);
}

/* ── Chain graph node renderer ──────────────────────────────────────────── */
.cg-graph {
    position: relative;
    width: 100%;
    padding: 1rem 0 .5rem;
    overflow-x: auto;
}
.cg-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
    padding: .5rem 1rem;
    min-width: max-content;
}
.cg-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .6rem .75rem;
    border-radius: .6rem;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    min-width: 80px;
    max-width: 110px;
    position: relative;
}
.cg-node-input  { border-color: rgba(255,255,255,.18); }
.cg-node-result { border-color: rgba(242,139,60,.4); background: rgba(242,139,60,.06); }
.cg-node-step   { border-color: rgba(120,180,255,.3); background: rgba(120,180,255,.05); }
.cg-node-target { border-color: rgba(100,220,140,.35); background: rgba(100,220,140,.05); }
.cg-node-output { border-color: rgba(255,255,255,.08); opacity: .5; }
.cg-node-pending { border-style: dashed; opacity: .45; }

.cg-node-badge {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    position: absolute;
    top: -.55rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-surface, #141420);
    padding: 0 .35rem;
    white-space: nowrap;
}
.cg-node-result  .cg-node-badge { color: var(--accent, #f28b3c); }
.cg-node-target  .cg-node-badge { color: #6ddc8c; }
.cg-node-step    .cg-node-badge { color: #78b4ff; }

.cg-node-icon {
    width: 52px;
    height: 52px;
    border-radius: .4rem;
    overflow: hidden;
    background: rgba(255,255,255,.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cg-node-icon img,
.cg-node-icon video { width: 100%; height: 100%; object-fit: contain; display: block; background: #0a0a12; }
.cg-node-icon-empty { font-size: 1.6rem; color: rgba(255,255,255,.2); }

/* Audio inputs (avatar voice clip, voice changer source, etc.) cannot render
   as <img>; show a centered music-note glyph instead so the recipe strip and
   live-thumb cards stay visually consistent with image/video nodes. */
.cg-audio-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a12;
    color: rgba(255, 200, 90, .85);
}
.cg-audio-thumb svg { width: 56%; height: 56%; }
.dr-live-thumb .cg-audio-thumb { aspect-ratio: 1 / 1; border-radius: 6px; }
.reference-audio { width: 100%; height: 40px; }

.cg-node-label {
    font-size: .72rem;
    font-weight: 500;
    color: rgba(255,255,255,.75);
    text-align: center;
    line-height: 1.2;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cg-node-note {
    font-size: .62rem;
    color: rgba(255,255,255,.35);
    text-align: center;
    line-height: 1.2;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* SVG edge lines */
.cg-edges {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    overflow: visible;
}
.cg-edge {
    stroke: rgba(255,255,255,.18);
    stroke-width: 1.5;
    stroke-dasharray: none;
}
.cg-edge-fan {
    stroke: rgba(120,180,255,.35);
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Session Flow Strip  (session_trail.js)
   Uses existing .cg-node / .cg-edge visual language from chain_graph.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container header */
.st-flow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.st-flow-eyebrow {
    font-size: .6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--accent, #f28b3c);
}
.st-flow-save-btn {
    font-size: .62rem;
    color: rgba(255,255,255,.38);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
    transition: color .15s;
}
.st-flow-save-btn:hover { color: var(--accent, #f28b3c); }
.st-flow-save-btn:disabled { color: rgba(255,255,255,.2); cursor: default; }

/* Horizontally scrollable graph wrapper */
.st-flow-graph { overflow-x: auto; }
.st-flow-graph .cg-graph { padding: .25rem 0 .5rem; }
.st-flow-graph .cg-row   { gap: 1.6rem; padding: .5rem .25rem; }

/* Compact node size inside the flow strip */
.st-flow-graph .cg-node       { min-width: 70px; max-width: 88px; }
.st-flow-graph .cg-node-icon  { width: 54px; height: 54px; }
.st-flow-graph .cg-node-label { font-size: .68rem; max-width: 80px; }

/* Past completed steps — clickable */
.st-trail-node {
    cursor: pointer;
    transition: transform .15s, border-color .15s;
}
.st-trail-node:hover {
    transform: translateY(-2px);
    border-color: rgba(242,139,60,.55) !important;
}

/* "Recipe in progress" eyebrow variant */
.st-flow-eyebrow--recipe {
    color: #6ddc8c;
    letter-spacing: .08em;
}

/* Arrow connector between trail nodes and pick-next button */
.st-pick-arrow {
    font-size: 1rem;
    color: rgba(255,255,255,.3);
    padding: 0 6px;
    line-height: 1;
    align-self: center;
    flex-shrink: 0;
}

/* "Pick your next effect" button — fully custom, not from ChainGraph */
.st-pick-next-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    min-width: 90px;
    background: rgba(242,139,60,.08);
    border: 1.5px dashed rgba(242,139,60,.45);
    border-radius: 10px;
    cursor: pointer;
    color: inherit;
    text-align: center;
    transition: background .18s, border-color .18s, transform .15s;
    animation: st-pick-pulse 1.8s ease-out 0.5s 1;
    flex-shrink: 0;
    vertical-align: top;
}
.st-pick-next-btn:hover {
    background: rgba(242,139,60,.16);
    border-color: rgba(242,139,60,.75);
    transform: translateY(-2px);
}
@keyframes st-pick-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(242,139,60,.5); }
    60%  { box-shadow: 0 0 0 8px rgba(242,139,60,0); }
    100% { box-shadow: 0 0 0 0 rgba(242,139,60,0); }
}
.st-pick-icon {
    font-size: 1.4rem;
    font-weight: 200;
    color: rgba(242,139,60,.7);
    line-height: 1;
}
.st-pick-next-btn:hover .st-pick-icon { color: var(--accent, #f28b3c); }
.st-pick-label {
    font-size: .65rem;
    color: rgba(242,139,60,.85);
    line-height: 1.25;
    white-space: normal;
    max-width: 80px;
}

/* Graph row — make trail nodes + arrow + pick button sit on one line */
.st-flow-graph {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
}

/* ── Branch-from-node popup ─────────────────────────────────────────────── */
.st-branch-view-row { margin-bottom: 4px; }
.st-branch-view-link {
    font-size: .65rem;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    transition: color .15s;
}
.st-branch-view-link:hover { color: var(--accent, #f28b3c); }

/* ── Trail context shown during rendering — full chain of prior steps ─────── */
/* Every prior step renders as its own clickable node. Clicking jumps back to  */
/* that result so the user can branch from any point in their chain.           */
.dr-trail-context {
    padding: .25rem 0 .5rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    margin-bottom: 8px;
}
.dr-chain-history-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: .4rem .25rem;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain; /* prevent mouse-wheel scroll capture blocking page scroll */
}
.dr-chain-history-row::-webkit-scrollbar { display: none; }

/* Individual prior-step node */
.dr-chain-hist-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 62px;
    max-width: 72px;
    padding: 5px 4px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: background .13s, border-color .13s;
}
.dr-chain-hist-node:hover {
    background: rgba(242,139,60,.1);
    border-color: rgba(242,139,60,.45);
}

/* Currently-rendering chip — same shape as prior steps, orange border + scanline */
.dr-chain-hist-node--active {
    border-color: var(--accent, #f28b3c);
    cursor: default;
    animation: dr-trail-node-pulse 1.4s ease-in-out infinite;
}
.dr-chain-hist-node--active .dr-chain-hist-label {
    color: var(--accent, #f28b3c);
}
@keyframes dr-trail-node-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242,139,60,0); }
    50%       { box-shadow: 0 0 0 3px rgba(242,139,60,.5); }
}

/* Scanline sweep overlay — clips inside the chip via parent overflow:hidden */
.dr-chain-hist-scanline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 5px;
}
.dr-chain-hist-scanline-line {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: rgba(242,139,60,.7);
    animation: dr-chain-scan 1.6s linear infinite;
}
@keyframes dr-chain-scan {
    0%   { top: -2px; }
    100% { top: 100%; }
}
.dr-chain-hist-thumb {
    width: 52px;
    height: 40px;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}
.dr-chain-hist-label {
    font-size: .56rem;
    color: rgba(255,255,255,.6);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 64px;
    line-height: 1.25;
}
.dr-chain-hist-arrow {
    color: rgba(255,255,255,.25);
    font-size: .75rem;
    flex-shrink: 0;
    padding: 0 3px;
    align-self: center;
}
/* .dr-trail-continuing removed — replaced by .dr-chain-hist-node--active chip */

/* ── Standalone "Pick your next effect" row — inline below the pipeline ── */
.dr-pick-next-row {
    position: relative;  /* popup anchors to this via position:absolute */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 6px 4px;
    margin-top: 4px;
}
.dr-pick-next-arrow {
    font-size: .9rem;
    color: rgba(255,255,255,.3);
    margin-right: 6px;
    flex-shrink: 0;
}
/* Node-card style — matches the pipeline node visual language */
.dr-pick-next-standalone-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 14px 10px;
    width: 96px;
    min-height: 84px;
    border-radius: 10px;
    border: 1.5px dashed rgba(242,139,60,.5);
    background: rgba(242,139,60,.06);
    color: var(--accent, #f28b3c);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.dr-pick-next-standalone-btn:hover {
    background: rgba(242,139,60,.13);
    border-color: rgba(242,139,60,.8);
}
.dr-pick-next-svg-icon {
    opacity: .85;
    flex-shrink: 0;
}
.dr-pick-next-label {
    font-size: .62rem;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    text-align: center;
    line-height: 1.3;
    letter-spacing: .02em;
}

/* ── "+ Pick your next effect" node (appended to pipeline when done) ───── */
/* Extends .cg-node base card — sits flush in the pipeline row.             */
.cg-node--pick {
    border-style: dashed;
    border-color: rgba(242,139,60,.45);
    background: rgba(242,139,60,.06);
    cursor: pointer;
    justify-content: center;
    min-width: 96px;
    transition: background .15s, border-color .15s;
}
.cg-node--pick:hover {
    background: rgba(242,139,60,.13);
    border-color: rgba(242,139,60,.75);
}
.cgc-pick-icon {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--accent, #f28b3c);
    line-height: 1;
}
.cgc-pick-label {
    font-size: .62rem;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    text-align: center;
    line-height: 1.3;
    max-width: 84px;
}

/* ── Next-step picker popup ─────────────────────────────────────────────── */
/* position:fixed escapes overflow:hidden clipping. Left is CSS-centered so */
/* we never rely on unreliable JS rect.left — only top is set by JS.        */
.dr-pick-popup {
    position: fixed;
    left: calc(50% - 170px);  /* always centered: 50vw minus half of 340px width */
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 280px;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,.55);
}
.dr-pick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 76px;
    padding: 6px 4px;
    border-radius: 7px;
    cursor: pointer;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    transition: background .13s, border-color .13s;
}
.dr-pick-card:hover {
    background: rgba(242,139,60,.12);
    border-color: rgba(242,139,60,.4);
}
.dr-pick-card-img {
    width: 56px;
    height: 40px;
    object-fit: cover;
    border-radius: 5px;
}
.dr-pick-card-label {
    font-size: .58rem;
    color: rgba(255,255,255,.75);
    text-align: center;
    line-height: 1.3;
    font-weight: 500;
}

/* ── Suggested flows (pre-made recipes) ────────────────────────────────── */
.dr-suggested-flows { padding-top: 4px; }
.dr-suggested-flows-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.35);
    margin: 0 0 8px;
}
.dr-recipe-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.03);
    text-decoration: none;
    color: inherit;
    margin-bottom: 6px;
    transition: background .15s, border-color .15s;
    cursor: pointer;
}
.dr-recipe-row:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(242,139,60,.3);
}
.dr-recipe-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    padding-top: 1px;
}
.dr-recipe-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dr-recipe-title {
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255,255,255,.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dr-recipe-steps {
    font-size: .66rem;
    color: rgba(255,255,255,.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Comfy-style next-tools popup ──────────────────────────────────────── */
.st-next-popup {
    position: absolute;
    z-index: 9990;
    background: #16162a;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 11px;
    padding: 10px;
    min-width: 270px;
    max-width: 360px;
    box-shadow: 0 16px 48px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.3);
}
.st-popup-heading {
    font-size: .58rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.35);
    margin: 0 0 8px;
}
.st-popup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}
.st-popup-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 4px 6px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 7px;
    cursor: pointer;
    color: var(--ink, #eee);
    text-align: center;
    transition: background .15s, border-color .15s, transform .12s;
}
.st-popup-card:hover {
    background: rgba(242,139,60,.1);
    border-color: rgba(242,139,60,.45);
    transform: translateY(-2px);
}
/* Reuse existing cg-node-icon sizing inside popup */
.st-popup-card .cg-node-icon  { width: 46px; height: 46px; border-radius: 5px; }
.st-popup-card .cg-node-label { font-size: .64rem; max-width: 70px; }
.st-popup-card .cg-node-note  { font-size: .55rem; max-width: 70px; }

/* ── Popup: shared header + All button + search ─────────────────────── */
/* Applies to both .dr-pick-popup and .st-next-popup */

/* dr-pick-popup: position:fixed, centered horizontally via CSS (no JS left-calc) */
.dr-pick-popup {
    position: fixed !important;
    bottom: auto !important;
    left: calc(50% - 170px) !important;  /* center: 50vw minus half of 340px width */
    transform: none !important;
    width: 340px !important;
    max-width: calc(100vw - 16px);
    padding: 12px !important;
    display: block !important;
    flex-wrap: unset !important;
    gap: unset !important;
    z-index: 9990 !important;
}
.dr-pick-header,
.st-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}
.dr-pick-heading,
.st-popup-heading {
    font-size: .58rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.38);
    margin: 0;
}
/* All / Suggested toggle */
.dr-pick-all-btn,
.st-popup-all-btn {
    font-size: .68rem;
    font-weight: 600;
    padding: 2px 10px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    background: transparent;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.dr-pick-all-btn:hover,
.st-popup-all-btn:hover,
.dr-pick-all-btn--active,
.st-popup-all-btn--active {
    background: rgba(160,130,74,.25);
    color: #e8c97a;
    border-color: rgba(160,130,74,.5);
}
/* Live search input */
.dr-pick-search,
.st-popup-search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px;
    color: rgba(255,255,255,.85);
    font-size: .78rem;
    padding: 6px 10px;
    margin-bottom: 10px;
    outline: none;
    transition: border-color .15s;
}
.dr-pick-search:focus,
.st-popup-search:focus {
    border-color: rgba(160,130,74,.6);
    background: rgba(255,255,255,.08);
}
.dr-pick-search::placeholder,
.st-popup-search::placeholder { color: rgba(255,255,255,.3); }
/* Card grid — shared layout */
.dr-pick-grid,
.st-popup-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.12) transparent;
}
/* Keep dr-pick-card square thumb */
.dr-pick-grid .dr-pick-card {
    width: auto;
}
.dr-pick-grid .dr-pick-card-img {
    width: 100%;
    height: 34px;
}
/* Empty state */
.dr-pick-empty,
.st-popup-empty {
    grid-column: 1 / -1;
    color: rgba(255,255,255,.35);
    font-size: .72rem;
    text-align: center;
    padding: 18px 0;
    margin: 0;
}
/* hint line under card label */
.dr-pick-card-hint {
    font-size: .52rem;
    color: rgba(255,255,255,.38);
    text-align: center;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Chain graph section wrapper on result page ──────────────────────── */
/* ── Unified workflow queue (replaces live-thumb strip + self-graph) ──────── */
.dr-queue-section {
    border-top: 1px solid rgba(255,255,255,.07);
    margin-top: .5rem;
    /* inherits .cgc-graph overflow-x:auto for many-node scrolling */
}
.dr-queue-eyebrow {
    padding: .75rem 1.5rem .25rem;
    display: block;
}
/* The .dr-queue uses .cgc-inner for layout; just tweak the centering */
.dr-queue {
    justify-content: flex-start;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
/* Arrow connectors between queue nodes */
.dr-queue-arrow {
    font-size: 1.1rem;
    color: rgba(255,255,255,.28);
    flex-shrink: 0;
    align-self: center;
    margin: 0 -.25rem;  /* tighten gap around arrow */
}
/* Inside queue: nodes use the same size as compound graph */
.dr-queue-section .cg-node {
    position: relative; /* anchor for .cg-step-queue-more badge */
    width: min(140px, 100%);
    max-width: 160px;
    padding: .75rem .65rem .65rem;
}
.dr-queue-section .cg-node-icon {
    width: 100px;
    height: 100px;
}
.dr-queue-section .cg-node-label {
    font-size: .74rem;
    max-width: 140px;
}
@media (max-width: 599px) {
    .dr-queue-section .cg-node { width: min(110px, 100%); padding: .55rem .5rem .5rem; }
    .dr-queue-section .cg-node-icon { width: 74px; height: 74px; }
    .dr-queue { padding-left: .75rem; padding-right: .75rem; gap: .65rem; }
}

.dr-chain-graph-section {
    padding: 1rem 1.5rem .5rem;
    border-top: 1px solid rgba(255,255,255,.07);
    margin-top: .5rem;
    position: relative;
}
.dr-chain-graph-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}
.dr-chain-graph-title {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    margin-bottom: .25rem;
}

/* + Add Next Effect button */
.dr-add-effect-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 2rem;
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.7);
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.dr-add-effect-btn:hover {
    border-color: var(--accent, #f28b3c);
    color: var(--accent, #f28b3c);
    background: rgba(242,139,60,.08);
}

/* Effect picker dropdown */
.dr-effect-picker {
    position: absolute;
    top: 2.6rem;
    right: 1.5rem;
    z-index: 120;
    background: var(--bg-surface, #141420);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: .75rem;
    padding: .5rem;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.dr-effect-picker ul { list-style: none; padding: 0; margin: 0; }
.dr-effect-picker .tab-picker-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .6rem;
    border: none;
    border-radius: .45rem;
    background: transparent;
    color: rgba(255,255,255,.8);
    font-size: .8rem;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}
.dr-effect-picker .tab-picker-item:hover {
    background: rgba(255,255,255,.07);
}
.dr-effect-picker .tab-picker-tag {
    font-size: .62rem;
    color: rgba(255,255,255,.35);
    flex-shrink: 0;
}

/* Chain plan preview section */
.dr-chain-preview-section {
    margin: .5rem 1.5rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(242,139,60,.25);
    border-radius: .75rem;
    background: rgba(242,139,60,.04);
}
.dr-chain-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}
.dr-chain-cancel-btn {
    padding: .2rem .55rem;
    font-size: .72rem;
}

/* Preview graph — dimmed/pending treatment */
.cg-graph-preview .cg-node { opacity: .6; }
.cg-graph-preview .cg-node-target { opacity: 1; border-style: dashed; }

/* ── Compound session live graph ────────────────────────────────────── */
.cgc-graph {
    padding: .5rem 0 1rem;
    position: relative;
    width: 100%;
    overflow-x: auto;   /* scroll rather than collapse if tab is narrow */
    overscroll-behavior-x: contain; /* prevent horizontal scroll container from capturing vertical wheel events */
}
.cgc-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem .75rem;
    flex-wrap: wrap;
}
.cgc-status {
    flex: 1;
    font-size: .82rem;
    color: rgba(255,255,255,.55);
    margin: 0;
}
.cgc-render-all-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: transparent;
    color: #f28b3c;
    border: 1.5px solid #f28b3c;
    border-radius: 999px;
    padding: .4rem 1rem;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.cgc-render-all-btn:hover:not(:disabled) { background: #f28b3c; color: #fff; }
.cgc-render-all-btn:disabled { opacity: .45; cursor: default; }

.cgc-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: .5rem 2rem 1.5rem;
    position: relative;
    min-width: max-content; /* never collapse — parent scrolls */
    box-sizing: border-box;
}
.cgc-col {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;
    min-width: 140px;  /* always wide enough for a node */
    flex-shrink: 0;
}

/* Nodes inside the compound graph — fill their column */
.cgc-graph .cg-node {
    width: min(160px, 100%);
    max-width: 200px;
    padding: .9rem .75rem .75rem;
}
.cgc-graph .cg-node-icon {
    width: 110px;
    height: 110px;
}
.cgc-graph .cg-node-label { max-width: 160px; font-size: .78rem; }

/* Launch button inside a node */
.cgc-node-launchable { cursor: default; }
.cgc-launch-btn {
    display: block;
    width: 100%;
    margin-top: .45rem;
    background: var(--accent, #f28b3c);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: .32rem .5rem;
    font-size: .68rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .02em;
    transition: opacity .15s;
}
.cgc-launch-btn:hover { opacity: .82; }

/* Done banner */
.cgc-done-banner {
    text-align: center;
    padding: .75rem 1rem;
    background: rgba(109,220,140,.1);
    border-top: 1px solid rgba(109,220,140,.25);
    color: #6ddc8c;
    font-weight: 600;
    font-size: .88rem;
}

/* ── Mobile: compound graph & queue ─────────────────────────────────── */
@media (max-width: 599px) {
    /* Remove the 680px cap so the graph uses the full phone width */
    .compound-wrap {
        max-width: none;
        padding: 1rem .25rem 3rem;
    }
    /* Smaller nodes so more columns fit in the scrollable viewport */
    .cgc-graph .cg-node {
        width: min(110px, 100%);
        max-width: 130px;
        padding: .65rem .55rem .55rem;
    }
    .cgc-graph .cg-node-icon {
        width: 76px;
        height: 76px;
    }
    .cgc-graph .cg-node-label {
        font-size: .68rem;
        max-width: 110px;
    }
    .cgc-col { min-width: 110px; gap: .9rem; }
    .cgc-inner { gap: 1rem; padding: .5rem 1rem 1.25rem; }
    /* Launch button a bit taller for thumb tap comfort */
    .cgc-launch-btn { padding: .42rem .5rem; font-size: .72rem; }
    /* Scroll hint badge below the graph */
    .cgc-graph::after {
        content: '← swipe →';
        display: block;
        text-align: center;
        font-size: .65rem;
        color: rgba(255,255,255,.28);
        padding-bottom: .25rem;
        letter-spacing: .06em;
    }
    /* Header: stack status + Render All vertically */
    .cgc-header { flex-direction: column; align-items: flex-start; gap: .55rem; }
}

/* ── Source highlight — pulsing orange outline ───────────────────────── */
.cg-node-new-source {
    border: 2px solid var(--accent, #f28b3c) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #f28b3c) 25%, transparent);
    animation: cg-pulse 1.6s ease-in-out infinite;
    z-index: 2;
}
@keyframes cg-pulse {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #f28b3c) 25%, transparent); }
    50%       { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent, #f28b3c) 10%, transparent); }
}

/* ── Drag-drop overlay on the result image ────────────────────────── */
/* Result hero gets relative positioning for the drop overlay.
   When there's a compound bar (sticky at bottom), cap the hero height
   so both image and chain bar are visible without scrolling.         */
.dr-result-hero { position: relative; }
/* height now controlled globally on .dr-result-hero */
.dr-compound-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(242,139,60,.22);
    border: 3px dashed var(--accent, #f28b3c);
    border-radius: 12px;
    animation: overlayPulse 1s ease-in-out infinite alternate;
    pointer-events: none;
}
/* CSS display:flex overrides HTML [hidden] — enforce hidden explicitly */
.dr-compound-drop-overlay[hidden] { display: none !important; }
.dr-compound-drop-inner { text-align: center; padding: 1rem; }
.dr-compound-drop-icon { font-size: 2.8rem; color: var(--accent, #f28b3c); margin-bottom: .4rem; }
.dr-compound-drop-label { font-size: 1rem; font-weight: 700; color: var(--ink, #edf1f7); margin: 0 0 .25rem; }
.dr-compound-drop-hint { font-size: .82rem; color: var(--accent, #f28b3c); margin: 0; opacity: .9; }


/* ════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERHAUL — master block
   All new phone breakpoints live here. Breakpoints: 720px, 600px, 480px.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Two-column Welcome Hero ─────────────────────────────────────── */
.lp-welcome {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 28px 56px;
    padding: 36px 56px 40px;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    align-items: start;
    text-align: left;
}
.lp-welcome-left {
    display: flex;
    flex-direction: column;
    gap: 18px;
    grid-column: 1;
    grid-row: 1;
}
.lp-welcome-right {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.lp-welcome-full {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
}

/* Guide card — vertical layout in right column */
.lp-welcome-right .lp-guide-card {
    flex-direction: column;
    width: 100%;
    min-width: 300px;
    max-width: 420px;
    padding: 20px 18px;
    gap: 6px;
}
.lp-welcome-right .lp-guide-arrow {
    transform: rotate(90deg);
    margin: 4px auto;
    font-size: 1.1rem;
    opacity: 0.5;
}
.lp-welcome-right .lp-guide-step {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding: 14px 14px;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
}
/* Bigger, more readable text in the right column */
.lp-welcome-right .lp-guide-step strong {
    font-size: 1rem;
    font-weight: 700;
}
.lp-welcome-right .lp-guide-step span {
    font-size: .82rem;
    line-height: 1.45;
}
/* Bigger step number badge */
.lp-welcome-right .lp-guide-num {
    width: 34px;
    height: 34px;
    font-size: .9rem;
    flex-shrink: 0;
}
/* Thumbnail strip — show 6 thumbs, clip the rest */
.lp-welcome-right .lp-mock-strip {
    flex-direction: row;
    width: auto;
    max-width: 320px;
    overflow: hidden;
    gap: 4px;
    flex-shrink: 0;
}
.lp-welcome-right .lp-mock-strip .lp-mock-thumb:nth-child(n+7) { display: none; }
.lp-welcome-right .lp-guide-step .lp-guide-rule-box { flex-shrink: 0; }
.lp-welcome-right .lp-guide-num { flex-shrink: 0; }

/* Re-align text elements to left in two-column mode */
.lp-welcome .lp-welcome-headline { align-items: flex-start; text-align: left; gap: 10px; }
.lp-welcome .lp-eyebrow { text-align: left; }
.lp-welcome .lp-h1 { justify-content: flex-start; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.lp-welcome .lp-subhead { text-align: left; }
.lp-welcome .lp-pitch-row { justify-content: flex-start; }
.lp-welcome .lp-welcome-foot { justify-content: flex-start; }
.lp-welcome .lp-beta-notice { text-align: left; }

/* ── 2. Hamburger nav (hidden on desktop) ───────────────────────────── */
.nav-hamburger {
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
    cursor: pointer;
    padding: 6px 8px;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
}
.nav-hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink, #edf1f7);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* nav-drawer — flex row on desktop (default), dropdown on mobile */
.nav-drawer {
    display: contents; /* transparent wrapper on desktop */
}
.nav-drawer-links {
    display: contents; /* transparent wrapper on desktop */
}
.nav-drawer-login { /* "Log in" link inside drawer on mobile */ }

/* season picker fix — 4-col no breakpoint */
@media (max-width: 640px) {
    .season-picker-grid { grid-template-columns: repeat(2, 1fr); }
    .mf-review-layout { grid-template-columns: 1fr; height: auto; overflow: visible; }
}

/* filmstrip minmax fix */
.ui-template-filmstrip-row {
    grid-auto-columns: minmax(min(214px, 100%), 235px);
}

/* ── Phone breakpoint: 720px ────────────────────────────────────────── */
@media (max-width: 720px) {

    /* ── Nav ── */
    .nav-hamburger { display: flex; }

    .shell-brandbar {
        position: relative;
        flex-wrap: nowrap;
        align-items: center;
    }
    /* Hide top-bar tagline on very small screens */
    .topbar-brand-tagline { display: none; }

    .demo-effect-nav {
        position: static;
        margin-left: 0;
        flex: 0 0 auto;
    }
    /* The drawer becomes a real dropdown */
    .nav-drawer {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        right: 8px;
        background: var(--panel, #1a1d24);
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 12px;
        padding: 10px;
        flex-direction: column;
        gap: 4px;
        min-width: 210px;
        z-index: 500;
        box-shadow: 0 8px 32px rgba(0,0,0,.5);
    }
    .nav-drawer.is-open { display: flex; }

    .nav-drawer-links {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .nav-drawer-links a,
    .nav-drawer .nav-admin-link,
    .nav-drawer .nav-studio-link {
        display: block;
        padding: 9px 14px;
        border-radius: 8px;
        color: var(--ink, #edf1f7);
        text-decoration: none;
        font-size: .9rem;
        font-weight: 500;
        white-space: nowrap;
    }
    .nav-drawer-links a:hover,
    .nav-drawer .nav-studio-link:hover { background: rgba(255,255,255,.06); }
    .nav-drawer .nav-studio-link { color: #48c766; }
    .nav-drawer .nav-admin-link { color: var(--accent, #f28b3c); }
    .nav-drawer-login {
        display: block;
        padding: 9px 14px;
        border-radius: 8px;
        color: var(--ink, #edf1f7);
        text-decoration: none;
        font-size: .9rem;
        margin-top: 4px;
        border-top: 1px solid rgba(255,255,255,.07);
        padding-top: 12px;
    }
    .nav-user-cluster {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        border-top: 1px solid rgba(255,255,255,.07);
        padding-top: 10px;
        margin-top: 4px;
    }
    .nav-credits-pill { font-size: .75rem; }
    .nav-username { padding: 6px 14px; border-radius: 8px; display: block; }
    .nav-logout-btn { margin-left: 14px; }

    /* ── Home two-column → single column ── */
    .lp-welcome {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 20px;
        padding: 20px 16px 28px;
        text-align: center;
        max-width: 100%;
    }
    .lp-welcome-left  { grid-column: 1; grid-row: auto; }
    .lp-welcome-right { grid-column: 1; grid-row: auto; }
    .lp-welcome-full  { grid-column: 1; grid-row: auto; }
    .lp-welcome .lp-welcome-headline { align-items: center; text-align: center; }
    .lp-welcome .lp-h1 { justify-content: center; font-size: clamp(1.5rem, 6vw, 2.2rem); }
    .lp-welcome .lp-eyebrow,
    .lp-welcome .lp-subhead { text-align: center; }
    .lp-welcome .lp-pitch-row { justify-content: center; }
    .lp-welcome .lp-welcome-foot { justify-content: center; }
    .lp-welcome .lp-beta-notice { text-align: left; }

    /* Guide card: stack vertically on mobile */
    .lp-guide-card {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .lp-guide-arrow { transform: rotate(90deg); }

    /* ── Studio carousel ── */
    .shell-carousel-btn--prev { left: 0; }
    .shell-carousel-btn--next { right: 0; }
    .shell-demo-strip {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .shell-demo-strip::-webkit-scrollbar { display: none; }
    .demo-card.compact { scroll-snap-align: start; }

    /* ── Workspace grid ── */
    /* On mobile, hide the rail when a workflow is active — iframe gets full height */
    .workspace-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
    /* Hide rail entirely on mobile — too cramped alongside iframe */
    .workspace-rail { display: none !important; }

    /* Iframe fills available height */
    .page-shell.shell-mode .demo-frame {
        min-height: calc(100vh - 140px);
        max-height: none;
    }

    /* ── Shell header ── */
    .shell-header { padding-bottom: 0; }
    /* Keep the filmstrip visible on mobile — only hide the marketing copy text */
    .shell-copy { display: none; }
    /* Make carousel full-width and touch-scrollable on mobile */
    .shell-mainrow { flex-direction: column; padding: 0; }
    .shell-demo-carousel { width: 100%; margin: 0; }

    /* Hide tab bar on home screen — it shows above welcome content on mobile */
    .workspace-grid.is-home .workspace-tab-bar,
    .workspace-grid.is-home [data-tab-bar] { display: none !important; }

    /* ── Dashboard ── */
    .dash-page { padding: 0 12px 40px; }
    .dash-header {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px 0 12px;
    }
    .dash-header-credits { margin-left: 0; width: 100%; }
    .dash-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .dash-tabs::-webkit-scrollbar { display: none; }
    .dash-tab { white-space: nowrap; padding: 10px 14px; font-size: 0.78rem; }
    .dash-render-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dash-render-actions { gap: 4px; }
    .dash-render-actions .dash-action-btn { font-size: 0.68rem; padding: 4px 8px; }
    .dash-stats-row { flex-wrap: wrap; gap: 10px; }
    .dash-stat { min-width: 80px; }
    .dash-profile-grid { grid-template-columns: 1fr; }
    .dash-plan-compare { grid-template-columns: 1fr; }
    .dash-filter-bar { gap: 5px; }
    .dash-filter-btn { font-size: 0.7rem; padding: 4px 10px; }
    .dash-upgrade-strip { flex-direction: column; text-align: center; }
    .dash-low-credit-warn { flex-wrap: wrap; font-size: 0.8rem; }
    .dash-tx-list { font-size: 0.82rem; }

    /* ── Admin topbar ── */
    .admin-topbar { flex-wrap: wrap; height: auto; min-height: 52px; padding: 8px 12px; gap: 6px; }
    .admin-topbar-right {
        width: 100%;
        justify-content: flex-start;
        border-top: 1px solid rgba(255,255,255,.06);
        padding-top: 6px;
        margin-top: 2px;
        margin-left: 0;
    }
    .admin-topbar-home { font-size: 0.78rem; padding: 0.3rem 0.6rem; }
    .admin-topbar-link { font-size: 0.78rem; padding: 0.3rem 0.55rem; }
    .admin-topbar-nav { flex-wrap: wrap; gap: 4px; }

    /* ── Auth ── */
    .auth-card { padding: 20px 16px; gap: 14px; }
    .auth-title { font-size: 1.3rem; }
    .auth-submit { width: 100%; }
    .auth-google-btn { width: 100%; justify-content: center; }
}

/* ── Tighter phone breakpoint: 480px ───────────────────────────────── */
@media (max-width: 480px) {

    /* Dashboard render grid → single col */
    .dash-render-grid { grid-template-columns: 1fr; }
    .dash-stats-row { flex-direction: column; gap: 8px; }
    .dash-stats-row .dash-stat { min-width: 0; width: 100%; }

    /* Dashboard header */
    .dash-identity { gap: 8px; }
    .dash-name { font-size: .85rem; }
    .dash-email { font-size: .7rem; }

    /* Studio btn full-width */
    .lp-studio-btn { width: 100%; text-align: center; }

    /* Admin table tighter */
    .admin-table th,
    .admin-table td { font-size: .75rem; padding: 6px 8px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   MOBILE STUDIO — purpose-built phone UI
   Completely replaces the desktop shell on screens ≤ 720px.
   ════════════════════════════════════════════════════════════════════════════ */

/* Hidden on desktop — only visible on mobile */