/* ═══════════════════════════════════════════════════
   VIRAL HOOK GENERATOR — ELEVENLABS FLOW STYLE
   ═══════════════════════════════════════════════════ */

:root {
    --bg: #f5f5f5;
    --bg-node: #ffffff;
    --border: #e5e7eb;
    --border-light: #f0f0f0;
    --border-focus: #2563eb;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.05);

    --text: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-dim: #d1d5db;

    --blue: #2563eb;
    --blue-light: #93c5fd;
    --blue-bg: #eff6ff;
    --orange: #f97316;
    --orange-hover: #ea580c;
    --green: #059669;
    --green-bg: #ecfdf5;
    --red-bg: #fef2f2;
    --red: #dc2626;

    --radius: 12px;
    --radius-sm: 8px;
    --port-size: 12px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════
   FLOATING PILLS (Top-left & Top-right)
   ═══════════════════════════════════════════════════ */

#top-left-pill, #top-right-pill {
    position: fixed;
    top: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    z-index: 100;
    transition: right 0.25s ease, top 0.25s ease;
}

#top-left-pill { left: 16px; }
#top-right-pill { right: 16px; }

.pill-section {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 4px;
}

.pill-brand { color: var(--text); }

.pill-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.pill-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 2px;
}

.pill-flow-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    outline: none;
    padding: 2px 4px;
    border-radius: 4px;
    min-width: 60px;
}

.pill-flow-name:hover { background: var(--bg); }
.pill-flow-name:focus { background: var(--blue-bg); color: var(--text); }

/* In-app modal for confirm/prompt — replaces window.confirm/window.prompt
   so dialogs feel native to the app instead of "jump-canvas.vercel.app says".
   Backdrop + centered card + cancel/confirm buttons. .jc-modal-danger
   colors the confirm button red for destructive actions. */
.jc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001;
    animation: jcModalFadeIn 0.12s ease-out;
}
@keyframes jcModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.jc-modal {
    background: white;
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(15, 23, 42, 0.22);
    min-width: 360px;
    max-width: 480px;
    padding: 22px 24px 18px;
    animation: jcModalRise 0.14s ease-out;
}
@keyframes jcModalRise { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.jc-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}
.jc-modal-body { margin-bottom: 18px; }
.jc-modal-message {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0;
}
.jc-modal-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.jc-modal-input {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--text);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.1s, box-shadow 0.1s;
}
.jc-modal-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.jc-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.jc-modal-cancel,
.jc-modal-confirm {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.1s, border-color 0.1s;
}
.jc-modal-cancel {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border);
}
.jc-modal-cancel:hover { background: var(--bg); color: var(--text); }
.jc-modal-confirm {
    background: var(--text);
    color: white;
    border-color: var(--text);
}
.jc-modal-confirm:hover { background: #1f2937; }
.jc-modal-confirm.jc-modal-danger {
    background: #dc2626;
    border-color: #dc2626;
}
.jc-modal-confirm.jc-modal-danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* Branded shell wrapping the Clerk sign-in modal. The icon + name + tagline
   give context before the modal renders, and the gradient backdrop matches
   the rest of the canvas palette so the entry feels intentional rather
   than dropped in from the Clerk default theme. */
.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    color: var(--text);
}
.auth-brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.28);
    margin-bottom: 6px;
}
.auth-brand-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.auth-brand-tag {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Canvas picker dropdown — opens from the caret next to the canvas name. */
.pill-canvases-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    margin-left: 2px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pill-canvases-btn:hover { background: var(--bg); color: var(--text); }
#canvas-picker {
    position: fixed;
    top: 64px;
    left: 16px;
    width: 280px;
    max-height: 60vh;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#canvas-picker.hidden { display: none; }
.cp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
}
.cp-title { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.cp-new-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--blue-bg); color: var(--blue);
    border: none; padding: 5px 10px; border-radius: 6px;
    font-size: 12px; font-weight: 600; cursor: pointer;
}
.cp-new-btn:hover { background: #dbeafe; }
.cp-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
}
.cp-empty { padding: 20px 14px; font-size: 12px; color: var(--text-muted); text-align: center; }
/* Stage list search + sort (keeps the list usable as stages pile up). */
.cp-tools { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border-light); }
.cp-search { flex: 1; min-width: 0; padding: 6px 9px; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.cp-search:focus { outline: none; border-color: var(--blue); }
.cp-sort { padding: 6px; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text-secondary); cursor: pointer; }
.cp-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cp-item-meta { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.cp-item-active .cp-item-meta { color: var(--blue); opacity: 0.75; }
/* Client tag chip + collapsible client groups in the stage picker. */
.cp-client-chip {
    border: 1px solid var(--border); background: var(--bg); color: var(--text-muted);
    font-size: 10.5px; line-height: 1; padding: 2px 7px; border-radius: 999px; cursor: pointer;
    font-family: var(--font); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0;
}
.cp-client-chip:hover { border-color: var(--blue); color: var(--blue); }
.cp-client-chip.set { background: var(--blue-bg); border-color: transparent; color: var(--blue); font-weight: 600; }
.cp-meta-time { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-group { margin-bottom: 2px; }
.cp-group-header {
    display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
    border: none; background: transparent; cursor: pointer;
    padding: 6px 10px; font-size: 11px; font-weight: 600; letter-spacing: .02em;
    color: var(--text-secondary); text-transform: uppercase; font-family: var(--font);
}
.cp-group-header:hover { color: var(--text); }
.cp-group-caret { transition: transform .15s ease; flex-shrink: 0; opacity: .6; }
.cp-group.collapsed .cp-group-caret { transform: rotate(0deg); }
.cp-group:not(.collapsed) .cp-group-caret { transform: rotate(90deg); }
.cp-group-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-group-unassigned { color: var(--text-muted); font-style: italic; text-transform: none; letter-spacing: 0; }
.cp-group-count { font-size: 10px; color: var(--text-muted); background: var(--bg); border-radius: 999px; padding: 1px 7px; font-weight: 600; }
.cp-group.collapsed .cp-group-items { display: none; }
.cp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
}
.cp-item:hover { background: var(--bg); }
.cp-item-active { background: var(--blue-bg); color: var(--blue); font-weight: 600; }
.cp-item-active:hover { background: #dbeafe; }
.cp-item-name {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-item-actions {
    display: none;
    gap: 2px;
    margin-left: 8px;
}
.cp-item:hover .cp-item-actions { display: flex; }
.cp-rename, .cp-delete {
    border: none; background: transparent; color: var(--text-muted);
    padding: 4px; border-radius: 4px; cursor: pointer;
}
.cp-rename:hover { background: white; color: var(--text); }
.cp-delete:hover { background: white; color: #dc2626; }

#zoom-display {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 38px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 0 2px;
}

.pill-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

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

.pill-share {
    width: auto;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
}

.pill-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    margin-left: 2px;
    transition: border-color 0.12s;
}

.pill-avatar:hover { border-color: var(--text-muted); }

/* ═══════════════════════════════════════════════════
   CANVAS
   ═══════════════════════════════════════════════════ */

#canvas-viewport {
    position: fixed;
    inset: 0;
    /* Only animate the layout props that change when the Files panel
       slides in (body.files-open shifts top/left/right/bottom + radius).
       MUST NOT include `all` or `background-position` — updateTransform()
       writes background-position every pan tick, and `transition: all`
       would animate that over 250ms, causing the grid to keep drifting
       for half a second after the user stops scrolling. */
    transition: top 0.25s ease, left 0.25s ease, right 0.25s ease, bottom 0.25s ease, border-radius 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
    background-color: var(--bg);
    background-image: radial-gradient(circle, #d4d4d8 0.7px, transparent 0.7px);
    background-size: 20px 20px;
    cursor: default;
}

body.grid-off #canvas-viewport {
    background-image: none;
}

/* Drag-over highlight when OS files are being dragged onto the canvas */
#canvas-viewport.file-drag-over::after {
    content: '';
    position: absolute;
    inset: 12px;
    border: 2px dashed var(--blue);
    border-radius: 14px;
    background: rgba(37, 99, 235, 0.05);
    pointer-events: none;
    z-index: 200;
}

#canvas-world {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
    /* No `transition: transform` here. The WebGL layer writes its view
       matrix instantly in updateTransform(), but a CSS transform transition
       would lag the DOM + SVG nodes behind by ~100ms on every zoom /
       fitToView / panToNode — connections visibly shear off their ports
       and the WebGL bitmap snaps ahead of the node chrome. Both layers
       must run on the same clock. */
}

/* WebGL bitmap layer. Sits inside the viewport (NOT inside #canvas-world) so
   its drawing buffer tracks the screen viewport — pan/zoom is applied as a
   uniform in the vertex shader rather than as a CSS transform. Off by
   default (display:none) — the renderer flips display when enabled. */
#webgl-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Above the node container (#nodes-container is z-index:1) so painted
       bitmaps show OVER the node's opaque image slot, but below all floating
       chrome (groups-rail/pills/toolbar/minimap = 95+, panels/menus = 150+) so
       quads never bleed over the UI. Was z-index:0 — behind the nodes — which
       hid every WebGL image even though the renderer drew them correctly. */
    z-index: 6;
    display: none;
}
body.webgl-on #webgl-layer {
    display: block;
}
/* When WebGL is the active painter, hide the DOM image elements that it
   replaces. Header/footer/ports/prompts stay visible — the canvas only
   takes over the bitmap area. */
/* Hide only the full image under WebGL; keep the coarse .igen-result-thumb visible
   so it bridges the texture decode/upload gap when the painter flips DOM->WebGL
   (and on stage switch, which clears all GPU textures) — the quad draws over it
   once ready, so no blank flash. The thumb is DOM-contained, so no see-through. */
body.webgl-on .igen-result-img {
    visibility: hidden;
}

#canvas-world.panning {
    transition: none;
}

/* Kill all transitions on child elements during active pan/zoom — every
   .canvas-node has a box-shadow transition that re-paints when state
   changes; with 150 nodes simultaneously animating during scroll, the
   browser re-rasterizes shadows on every frame and visibly flickers.
   Restored as soon as the user stops scrolling (.panning class removed
   ~100ms after last wheel/pointer event). */
#canvas-world.panning .canvas-node,
#canvas-world.panning .canvas-node * {
    transition: none !important;
    animation: none !important;
}

#nodes-container {
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════ */

#empty-state {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 5;
    pointer-events: auto;
}

#empty-add-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: white;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    box-shadow: var(--shadow-sm);
}

#empty-add-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text);
    box-shadow: var(--shadow-md);
}

#empty-state span {
    font-size: 13px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════
   CONTEXT MENU
   ═══════════════════════════════════════════════════ */

#context-menu, #port-menu {
    position: fixed;
    min-width: 180px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06);
    z-index: 200;
    padding: 4px;
    animation: menuIn 0.12s ease-out;
}

@keyframes menuIn {
    from { opacity: 0; transform: scale(0.95) translateY(-4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.ctx-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 8px 12px 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Node action menu (•••) */
.node-action-menu {
    position: fixed;
    min-width: 180px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06);
    z-index: 250;
    padding: 4px;
    animation: menuIn 0.12s ease-out;
}

.ctx-item-danger { color: var(--red, #dc2626); }
.ctx-item-danger:hover { background: rgba(220, 38, 38, 0.08); }
.ctx-item:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Editable node title (image-gen / image-upload) */
.igen-title-name,
.imgup-title-name {
    cursor: text;
    padding: 1px 4px;
    border-radius: 4px;
    transition: background 0.12s;
    outline: none;
}

.igen-title-name:hover,
.imgup-title-name:hover {
    background: var(--bg);
}

.igen-title-name[contenteditable="true"],
.imgup-title-name[contenteditable="true"] {
    background: var(--blue-bg, #eff6ff);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.imgup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-light);
}

.imgup-more-btn {
    width: 26px;
    height: 26px;
    padding: 0;
}

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

.ctx-item:hover {
    background: var(--bg);
}

.ctx-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.ctx-icon svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════
   NODE BASE
   ═══════════════════════════════════════════════════ */

.canvas-node {
    position: absolute;
    background: var(--bg-node);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    transition: box-shadow 0.15s, border-color 0.15s;
    user-select: none;
    /* Layout/style isolation: changes inside one node (typing, hover, result
       image swap) don't trigger reflow/style-recalc across the whole canvas.
       Critical for fit-to-view responsiveness at 100+ nodes — every node
       is technically "visible" so viewport culling alone can't help.
       NOT using `paint` containment: it would clip the hover box-shadow
       and any dropdown (model picker, aspect/dur pills) that extends
       outside the node bounds. NOT using `content-visibility: auto`: size-
       snap risk on offscreen→onscreen transitions. */
    contain: layout style;
}

.canvas-node:hover {
    box-shadow: var(--shadow-lg);
}

.canvas-node.selected {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35), 0 0 0 5px rgba(37, 99, 235, 0.12), var(--shadow-lg);
}

.canvas-node.dragging {
    opacity: 0.9;
    cursor: grabbing;
    box-shadow: var(--shadow-lg);
}

/* ── Node Header ── */

.node-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    border-radius: var(--radius) var(--radius) 0 0;
}

.canvas-node.cursor-mode { cursor: grab; }
.canvas-node.cursor-mode:active { cursor: grabbing; }
.canvas-node.cursor-mode .node-body { cursor: grab; }
.canvas-node.cursor-mode .node-body input,
.canvas-node.cursor-mode .node-body textarea,
.canvas-node.cursor-mode .node-body select,
.canvas-node.cursor-mode .node-body button { cursor: pointer; }

/* Hand mode: everything is grab cursor, no select styles */
body.hand-mode #canvas-viewport { cursor: grab; }
body.hand-mode #canvas-viewport:active { cursor: grabbing; }
body.hand-mode .canvas-node,
body.hand-mode .canvas-node * { cursor: grab !important; }
body.hand-mode .canvas-node:active,
body.hand-mode .canvas-node *:active { cursor: grabbing !important; }
body.hand-mode .canvas-node input,
body.hand-mode .canvas-node textarea,
body.hand-mode .canvas-node select { pointer-events: auto; }
/* cursor stays grab from the wildcard rule above — no text cursor override */

/* Textarea: hide native resizer, use wrapper with custom handle */
.node-textarea {
    resize: none;
    overflow: hidden !important;
}

.cursor-mode .node-textarea { cursor: text; }

.textarea-wrap {
    position: relative;
    display: block;
}

/* When a textarea is wrapped with our custom resize handle, suppress the
   native browser resize corner so they don't fight visually. */
.textarea-wrap > textarea {
    resize: none !important;
}

.textarea-wrap .resize-handle {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 18px;
    height: 18px;
    cursor: ns-resize !important;
    z-index: 5;
    border-radius: 0 0 7px 0;
    opacity: 0.5;
    background: white;
}

.textarea-wrap .resize-handle::before,
.textarea-wrap .resize-handle::after {
    content: '';
    position: absolute;
    background: var(--text-dim);
    border-radius: 1px;
    transform: rotate(-45deg);
    pointer-events: none;
}

.textarea-wrap .resize-handle::before {
    width: 8px; height: 1.5px;
    bottom: 4px; right: 2px;
}

.textarea-wrap .resize-handle::after {
    width: 5px; height: 1.5px;
    bottom: 7px; right: 2px;
}

.node-header-left {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;      /* allow .node-title / title-name to shrink + ellipsize */
    flex: 1;
    overflow: hidden;
}

/* Long filenames (e.g. uploaded images named 565146643_168593… _n.jpg) would
   otherwise stretch the node header off-canvas. Clip to the available width. */
.node-title,
.imgup-title-name,
.igen-title-name,
.llm-title-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* While actively renaming, let the contenteditable expand so the user can see
   what they're typing without a cramped ellipsis. */
.imgup-title-name[contenteditable="true"],
.igen-title-name[contenteditable="true"],
.llm-title-name[contenteditable="true"] {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-all;
}

.node-type-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border-radius: 6px;
    color: var(--text-secondary);
}

.node-type-icon svg {
    flex-shrink: 0;
}

.node-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.node-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}

/* ── Node Body ── */

.node-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Node Footer ── */

.node-footer {
    padding: 8px 14px;
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* ── Ports ── */

.port {
    position: absolute;
    width: var(--port-size);
    height: var(--port-size);
    border-radius: 50%;
    background: var(--blue);
    border: 2px solid white;
    box-shadow: 0 0 0 1px var(--blue);
    z-index: 10;
    cursor: crosshair;
    transition: transform 0.12s, box-shadow 0.12s;
    pointer-events: all;
    opacity: 0;
}

.canvas-node:hover .port {
    opacity: 1;
}

.port:hover {
    transform: scale(1.5);
    box-shadow: 0 0 0 1px var(--blue), 0 0 8px rgba(37, 99, 235, 0.3);
}

.port.port-snap-target {
    transform: scale(2) !important;
    opacity: 1 !important;
    background: var(--blue) !important;
    border-color: white !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3), 0 0 16px rgba(37, 99, 235, 0.4) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.port-input { left: calc(var(--port-size) / -2 - 1px); }
.port-output { right: calc(var(--port-size) / -2 - 1px); }

/* ═══════════════════════════════════════════════════
   NODE: Brand Input
   ═══════════════════════════════════════════════════ */

.brand-input-node { width: 380px; }

.mode-toggle {
    display: flex;
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 2px;
    gap: 2px;
}

.mode-btn {
    flex: 1;
    padding: 5px 10px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s;
}

.mode-btn:hover { color: var(--text-secondary); }

.mode-btn.active {
    background: white;
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.url-input-row {
    display: flex;
    gap: 6px;
}

.url-input-row .node-input { flex: 1; }

.brand-kit-section {
    padding: 8px 10px;
    background: var(--bg);
    border-radius: var(--radius-sm);
}

/* Standalone Brand Kit node — read-only display + brand-out port. */
.brand-kit-node {
    width: 360px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
}
.brand-kit-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.brand-kit-body .brand-kit-section { padding: 0; background: transparent; }
.bk-importer { display: flex; flex-direction: column; gap: 8px; }
.bk-importer.hidden { display: none; }
.bk-import-progress { display: flex; align-items: center; gap: 8px; }
.bk-import-progress.hidden { display: none; }
.bk-import-progress .mini-progress-bar { flex: 1; }
.bk-import-text { font-size: 11px; color: var(--text-muted); }
.bk-node-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #047857;
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    border-radius: 4px;
    padding: 2px 6px;
}


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

.brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
    background: white;
    border: 1px solid var(--border-light);
    display: none;
}

.brand-colors-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.brand-color-dot {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.1s;
}

.brand-color-dot:hover { transform: scale(1.2); }

/* ═══════════════════════════════════════════════════
   BRAND KIT PANEL (shared by Brand Input + Image Gen)
   ═══════════════════════════════════════════════════ */

.brand-kit-panel {
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin: 8px 0;
    container-type: inline-size;
}

.brand-kit-panel .bk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
}

/* Brand-import health check: a full-width line under the header row. Stays visible
   when the kit is collapsed (only .bk-content collapses). */
.brand-kit-panel .bk-import-summary {
    flex: 0 0 100%;
    margin-top: 8px;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 5px;
    cursor: default;
}
.brand-kit-panel .bk-import-summary.ok   { color: var(--text-secondary); }
.brand-kit-panel .bk-import-summary.warn { color: #b4881f; background: rgba(180, 136, 31, 0.10); }

.brand-kit-panel .bk-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.brand-kit-panel .bk-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
}

.brand-kit-panel .bk-toggle {
    border: 1px solid var(--border);
    background: white;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font);
}

.brand-kit-panel .bk-toggle:hover { background: var(--bg); color: var(--text); }

.brand-kit-panel .bk-save {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
}
.brand-kit-panel .bk-save:hover { background: #bfdbfe; }
/* Save-to-Library — distinct indigo from the blue Save-to-Files. */
.brand-kit-panel .bk-save-lib {
    display: inline-flex; align-items: center; gap: 5px;
    background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe;
    border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: 600;
    cursor: pointer; font-family: var(--font);
}
.brand-kit-panel .bk-save-lib:hover { background: #ddd6fe; }

/* Multi-brand library — Brand Input "Load from library" control + saved list. */
.brand-lib { margin: 0 0 6px; }
.brand-lib-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 10px; border: 1px dashed var(--border); border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 11px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all 0.12s; }
.brand-lib-btn:hover { border-color: #9ca3af; color: #111827; }
.brand-lib-list { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; max-height: 180px; overflow-y: auto; }
.brand-lib-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-node); cursor: pointer; font-size: 12px; text-align: left; font-family: var(--font); color: inherit; }
.brand-lib-item:hover { background: var(--bg); }
.brand-lib-item img { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.brand-lib-dot { width: 22px; height: 22px; border-radius: 4px; background: #e5e7eb; flex-shrink: 0; }
.brand-lib-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Saved-hook rows: two-line label — "Angle · Stage · Hook #" over the hook text. */
.hook-lib-item { align-items: center; }
.hook-lib-name { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; }
.hook-lib-name .hk-primary { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hook-lib-name .hk-sub { font-size: 10.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.brand-lib-empty { padding: 8px; font-size: 11px; color: var(--text-muted); text-align: center; }
/* Save-hook-to-library icon button (hook card header, next to the favorite). */
.hook-save-lib { display: inline-flex; align-items: center; padding: 2px; background: none; border: none; cursor: pointer; color: #9ca3af; line-height: 0; transition: color 0.1s; }
.hook-save-lib:hover { color: #6d28d9; }

/* Starter templates in the canvas picker. */
.cp-templates { padding: 8px 10px; border-bottom: 1px solid var(--border-light); }
.cp-tmpl-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 6px; }
.cp-tmpl-row { display: flex; flex-wrap: wrap; gap: 4px; }
.cp-tmpl { padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-node); color: var(--text); font-size: 11px; font-weight: 500; font-family: var(--font); cursor: pointer; transition: all 0.1s; }
.cp-tmpl:hover { background: var(--bg); border-color: #c7d2fe; color: #4338ca; }

.brand-kit-panel .bk-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.brand-kit-panel .bk-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
}

.brand-kit-panel .bk-clear:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.3);
    color: var(--red, #dc2626);
}

.brand-kit-panel .bk-content { padding: 14px 16px; }
.brand-kit-panel .bk-content.bk-collapsed { display: none; }

.brand-kit-panel .bk-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}

/* Side-by-side only if the container is comfortably wide */
@container (min-width: 620px) {
    .brand-kit-panel .bk-grid {
        grid-template-columns: minmax(160px, 1fr) 2.2fr;
        gap: 18px;
    }
}

.brand-kit-panel .bk-card { min-width: 0; }

.brand-kit-panel .bk-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-kit-panel .bk-logo-wrap {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 10px;
    background: white;
    border: 1px solid var(--border-light);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-kit-panel .bk-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.brand-kit-panel .bk-logo-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.brand-kit-panel .bk-identity-text { min-width: 0; }

.brand-kit-panel .bk-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-kit-panel .bk-tagline {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.brand-kit-panel .bk-attrs { display: flex; flex-direction: column; gap: 10px; }

.brand-kit-panel .bk-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: start;
    gap: 10px;
    min-width: 0;
}

.brand-kit-panel .bk-row > *:last-child { min-width: 0; }

.brand-kit-panel .bk-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: 3px;
}

.brand-kit-panel .bk-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.brand-kit-panel .bk-swatch {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.12s;
}

.brand-kit-panel .bk-swatch:hover { transform: scale(1.15); }

.brand-kit-panel .bk-fonts, .brand-kit-panel .bk-tone {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.brand-kit-panel .bk-chip {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 3px 9px;
    white-space: nowrap;
}

.brand-kit-panel .bk-chip.bk-chip-blue {
    background: var(--blue-bg, #eff6ff);
    color: var(--blue);
    border-color: rgba(37, 99, 235, 0.2);
    border-radius: 999px;
}

.brand-kit-panel .bk-aesthetic-row { grid-template-columns: 70px 1fr; }

.brand-kit-panel .bk-aesthetic {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Refs strip — shown only on image-gen nodes. Click thumbs to toggle inclusion. */
.brand-kit-panel .bk-refs {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.brand-kit-panel .bk-refs-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

.brand-kit-panel .bk-refs-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.brand-kit-panel .bk-refs-hint {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
}

.brand-kit-panel .bk-refs-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Cell wraps a thumbnail with its kebab menu button. */
.brand-kit-panel .bk-ref-cell {
    position: relative;
    width: 56px;
    height: 56px;
}

.brand-kit-panel .bk-ref-cell .bk-ref-thumb { width: 100%; height: 100%; }

.brand-kit-panel .bk-ref-menu-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s;
    z-index: 2;
}

.brand-kit-panel .bk-ref-cell:hover .bk-ref-menu-btn { opacity: 1; }
.brand-kit-panel .bk-ref-menu-btn:hover { background: rgba(0, 0, 0, 0.85); }

/* Upload tile — dashed placeholder at end of the strip */
.brand-kit-panel .bk-ref-upload {
    width: 56px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font);
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.brand-kit-panel .bk-ref-upload:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--blue-bg, #eff6ff);
    border-style: solid;
}

/* Floating kebab menu (appended to body) — matches .fp-dropdown / .fp-drop-item styling */
#bk-ref-menu.bk-ref-menu {
    position: fixed;
    z-index: 10001;
    min-width: 200px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 4px;
    display: flex;
    flex-direction: column;
    animation: menuIn 0.12s ease-out;
}

#bk-ref-menu.bk-ref-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
    border-radius: 7px;
    transition: background 0.1s;
    text-align: left;
}

#bk-ref-menu.bk-ref-menu button:hover { background: var(--bg); }

#bk-ref-menu.bk-ref-menu button.danger { color: var(--red, #dc2626); }
#bk-ref-menu.bk-ref-menu button.danger:hover { background: rgba(220, 38, 38, 0.08); }

.brand-kit-panel .bk-ref-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: white;
    padding: 0;
    overflow: visible;        /* let the hover preview extend outside */
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.12s, border-color 0.12s, transform 0.12s;
}

.brand-kit-panel .bk-ref-thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 6px;       /* clip the thumbnail image itself */
}

.brand-kit-panel .bk-ref-thumb:hover { transform: translateY(-1px); }

/* Body-level hover preview — immune to any ancestor overflow clipping */
.bk-hover-preview {
    position: fixed;
    width: 200px;
    height: 200px;
    max-width: 60vw;
    max-height: 60vh;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22);
    padding: 6px;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    transform: scale(0.96);
    transform-origin: center bottom;
    transition: opacity 0.12s, transform 0.12s;
    overflow: hidden;
}

.bk-hover-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: repeating-conic-gradient(#f4f4f5 0deg 90deg, #ffffff 90deg 180deg) 0 0/12px 12px;
    border-radius: 6px;
}

.bk-hover-preview.visible {
    opacity: 1;
    transform: scale(1);
}

.brand-kit-panel .bk-ref-thumb.on {
    opacity: 1;
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.brand-kit-panel .bk-ref-tag {
    position: absolute;
    top: 2px;
    left: 2px;
    padding: 1px 5px;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 4px;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════
   IMAGE GEN — Brand URL import UI
   ═══════════════════════════════════════════════════ */

.igen-brand {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 10px;
}

.igen-brand-inherited {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #d1fae5;
    color: #047857;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.igen-brand-inherited .bk-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
}
.igen-brand-inherited.hidden { display: none; }

.igen-brand-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 5px 10px;
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.12s;
}

.igen-brand-add-btn:hover {
    background: var(--blue-bg, #eff6ff);
    border-color: var(--blue);
    color: var(--blue);
    border-style: solid;
}

.igen-brand-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.igen-brand-input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-family: var(--font);
    outline: none;
}

.igen-brand-input:focus { border-color: var(--blue); }

.igen-brand-import-btn {
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 7px;
    white-space: nowrap;
}

.igen-brand-cancel-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: white;
    border-radius: 7px;
    color: var(--text-muted);
    cursor: pointer;
}

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

.igen-brand-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.igen-brand-progress .mini-progress-bar { flex: 1; }

.igen-brand-progress-text {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════
   NODE: Generator
   ═══════════════════════════════════════════════════ */

.generator-node { width: 280px; }

.gen-info {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.gen-progress { display: flex; flex-direction: column; gap: 5px; }

.gen-count {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

.gen-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gen-total {
    font-size: 11px;
    color: var(--green);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════
   NODE: Hook Card
   ═══════════════════════════════════════════════════ */

.hook-card-node { width: 300px; }
/* Two stacked input ports: hook-in (top) and the new brand-in below it. JS
   (_repositionPorts) also sets these inline; the CSS avoids a first-frame flash. */
.hook-card-node .port[data-port="hook-in"] { top: 40px; }
.hook-card-node .port[data-port="brand-in"] { top: 100px; }
/* Hook re-brand control — visible "current brand + Change" row on the hook card. */
.hook-brand-row { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; font-size: 12px; }
.hook-brand-label { color: var(--text-secondary); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; }
.hook-brand-name { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.hook-brand-name.hook-brand-none { color: var(--text-muted); font-style: italic; font-weight: 400; }
.hook-brand-lib { position: relative; margin-left: auto; }
.hook-brand-change { font-size: 11px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text-secondary); cursor: pointer; }
.hook-brand-change:hover { background: var(--bg-node); color: var(--text); }
.hook-brand-list { right: 0; left: auto; }
/* Dim the hook body while its copy is being regenerated for a new brand. */
.hook-regen-loading .hook-body-content { opacity: 0.55; pointer-events: none; }

.hook-card-header {
    padding: 8px 12px;
}

.hook-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
    font-variant-numeric: tabular-nums;
}

.hook-category-badge {
    font-size: 10px;
    padding: 2px 7px;
    background: var(--blue-bg);
    color: var(--blue);
    border-radius: 4px;
    font-weight: 500;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.favorite-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.12s;
}

.favorite-btn:hover { color: var(--red); }
.favorite-btn.active { color: var(--red); }
.favorite-btn.active svg { fill: var(--red); }

.hook-body-content {
    padding: 10px 12px;
    gap: 6px;
}

.hook-line {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text);
}

.hook-label {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 5px;
    vertical-align: middle;
}

.hook-line .hook-label { background: #fef2f2; color: #dc2626; }
.body-line .hook-label { background: var(--green-bg); color: var(--green); }
.cta-line .hook-label { background: var(--blue-bg); color: var(--blue); }

.hook-why {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.4;
    padding: 5px 8px;
    background: var(--bg);
    border-radius: 6px;
    border-left: 2px solid var(--blue-light);
}

.hook-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
}

/* Inline Build / Variants config for a hook card. */
.hook-creative-config {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px solid var(--border-light);
}
.hook-mode-pills {
    display: flex;
    gap: 4px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 2px;
}
.hook-mode-pill {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
}
.hook-mode-pill:hover { color: var(--text); }
.hook-mode-pill.active {
    background: white;
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.hook-build-options {
    display: flex;
    align-items: center;
    gap: 6px;
}
.hook-build-options.hidden { display: none; }
/* Hook card's model button reuses .igen-model-selector-btn styling but should
   stretch to fill the available row width like the image-gen footer button. */
.hook-build-options .hook-model-btn { flex: 1; min-width: 0; }
.hook-build-options .hook-model-btn .igen-model-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hook-variants-note {
    font-size: 10px;
    color: var(--text-muted);
    padding: 4px 0;
    text-align: center;
    font-style: italic;
}
.hook-variants-note.hidden { display: none; }

/* ═══════════════════════════════════════════════════
   NODE: Creative
   ═══════════════════════════════════════════════════ */

.creative-node { width: 340px; }

.format-selector {
    display: flex;
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 2px;
    gap: 2px;
}

.format-btn {
    flex: 1;
    padding: 5px 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s;
}

.format-btn:hover { color: var(--text-secondary); }

.format-btn.active {
    background: white;
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.creative-status {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

.creative-image-container {
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--border-light);
}

.creative-image {
    width: 100%;
    display: block;
}

.creative-actions {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.creative-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ═══════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════ */

.node-input, .node-textarea, .node-select {
    width: 100%;
    padding: 7px 10px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 12px;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.node-textarea {
    resize: vertical;
    min-height: 48px;
}

.node-input:focus, .node-textarea:focus, .node-select:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
    background: white;
}

.node-input::placeholder, .node-textarea::placeholder { color: var(--text-dim); }

.node-select {
    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 1l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

.node-select option { background: white; }

/* ── Custom category dropdown (Brand Input)
   Replaces the native <select>, which couldn't be styled. Toggle button
   matches .node-input height/border so it sits flush with adjacent inputs;
   dropdown panel mirrors .igen-aspect-dropdown styling for consistency. */
.cat-wrap { position: relative; }

.cat-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
    text-align: left;
}
.cat-toggle:hover { border-color: var(--border-focus); }
.cat-toggle[aria-expanded="true"] {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
.cat-toggle-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-toggle-caret { color: #9ca3af; flex-shrink: 0; }

.cat-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 4px;
    z-index: 30;
    animation: menuIn 0.12s ease-out;
}

.cat-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s;
    text-align: left;
}
.cat-option:hover { background: var(--bg); }
.cat-option.active { font-weight: 600; }
.cat-option-check {
    flex-shrink: 0;
    opacity: 0;
    color: var(--blue);
}
.cat-option.active .cat-option-check { opacity: 1; }

.field-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.field-row label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* ── Buttons ── */

.btn-primary {
    padding: 7px 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--blue);
    color: white;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background 0.12s;
    white-space: nowrap;
}

.btn-primary:hover { background: #1d4ed8; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-run {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--orange);
    color: white;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background 0.12s, transform 0.1s;
}

.btn-run:hover { background: var(--orange-hover); }
.btn-run:active { transform: scale(0.98); }
.btn-run:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-small {
    padding: 5px 10px;
    border: none;
    border-radius: 6px;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: background 0.12s;
    border: 1px solid var(--border);
}

.btn-small:hover { background: var(--border-light); color: var(--text); }

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: white;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.12s;
}

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

.btn-creative {
    flex: 1;
    padding: 5px 10px;
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 6px;
    background: rgba(249, 115, 22, 0.06);
    color: var(--orange);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.12s;
}

.btn-creative:hover { background: rgba(249, 115, 22, 0.12); }

/* Build Video — branded to match Build Creative, with a distinct violet accent
   so the image/video pair reads intentionally (image = orange, video = violet). */
.btn-build-video {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 6px;
    background: rgba(124, 58, 237, 0.06);
    color: #7c3aed;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.12s;
}
.btn-build-video:hover { background: rgba(124, 58, 237, 0.12); }
.btn-build-video svg { flex-shrink: 0; }

/* Variant rating — compact 5-star rank on image results (Multishot / Volley).
   Sits left of the result action icons; gold when set or hovered. */
.igen-rating { display: inline-flex; align-items: center; gap: 1px; margin-right: auto; }
.igen-star { padding: 1px; background: none; border: none; cursor: pointer; color: #d1d5db; line-height: 0; transition: color 0.1s; }
.igen-star:hover, .igen-star.on { color: #f59e0b; }

/* ── Progress ── */

.mini-progress-bar {
    position: relative;
    height: 4px;
    background: var(--border-light);
    border-radius: 2px;
    overflow: hidden;
}

.mini-progress-bar.is-loading {
    height: 6px;
    border-radius: 3px;
}

.mini-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--blue), var(--blue-light));
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

/* Transition only when NOT actively loading — so the rAF loop's per-frame
   width updates paint immediately instead of chasing a 0.3s CSS transition
   that never resolves. When .is-loading ends, finish() snaps width to 100%
   and a brief transition smooths the final jump. */
.mini-progress-fill:not(.is-loading) {
    transition: width 0.25s ease;
}

/* While loading: animated shimmer band sweeps across the filled portion
   so the bar *looks* like it's working even between % updates. */
.mini-progress-fill.is-loading::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 40%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: progressShimmer 1.2s linear infinite;
}

@keyframes progressShimmer {
    from { transform: translateX(0); }
    to   { transform: translateX(350%); }
}

.import-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

.progress-text {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
}

/* ═══════════════════════════════════════════════════
   CONNECTIONS
   ═══════════════════════════════════════════════════ */

.connection-path {
    transition: stroke-opacity 0.15s;
}

.connection-path:hover {
    stroke-opacity: 1;
}

.conn-delete-fo {
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    overflow: visible;
}

.conn-delete-fo.visible {
    opacity: 1;
    pointer-events: all;
}

.conn-delete-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.12s, background 0.12s;
}

.conn-delete-btn:hover {
    background: var(--red);
    transform: scale(1.15);
}

.pending-connection {
    animation: dashFlow 0.5s linear infinite;
}

@keyframes dashFlow { to { stroke-dashoffset: -12; } }

/* ═══════════════════════════════════════════════════
   BOTTOM BAR
   ═══════════════════════════════════════════════════ */

#bottom-bar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px 8px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    z-index: 100;
}

.bar-btn.active {
    background: var(--text);
    color: white;
}

/* ═══════════════════════════════════════════════════
   GROUPS — popup + node badges
   ═══════════════════════════════════════════════════ */

/* Groups rail on the left edge */
#groups-rail {
    position: fixed;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    z-index: 95;
}

.groups-rail-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font);
    transition: transform 0.12s, box-shadow 0.12s, color 0.12s;
}

.groups-rail-btn:hover { box-shadow: var(--shadow-lg); color: var(--text); }
.groups-rail-btn svg { display: block; }

.groups-rail-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--blue);
    color: white;
    border: 2px solid white;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    line-height: 12px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}

.groups-rail-count[hidden] { display: none; }

#groups-panel {
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    width: 280px;
    max-height: 70vh;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    animation: menuIn 0.15s ease-out;
    overflow: hidden;
}

/* Full-width fixed positioner — centers the bar via flex with no transform */
#sel-action-bar-positioner {
    position: fixed;
    bottom: 72px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 130;
}

/* Bar pill itself — no positioning, no transform; flex parent centers it */
#sel-action-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--text);
    color: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    pointer-events: auto;
}

.sel-count {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    white-space: nowrap;
}

.sel-divider {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.2);
    margin: 0 2px;
}

.sel-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: white;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: background 0.12s;
}

.sel-btn:hover { background: rgba(255,255,255,0.12); }

.sel-btn.sel-btn-icon {
    padding: 6px;
    width: 28px;
    height: 28px;
    justify-content: center;
}

.sel-add-wrap { position: relative; }

.sel-add-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    max-height: 260px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    padding: 4px;
    animation: menuIn 0.12s ease-out;
}

.sel-add-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    text-align: left;
}

.sel-add-item:hover { background: var(--bg); }

/* Inline group name editor */
#group-name-editor {
    position: fixed;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    z-index: 160;
    animation: menuIn 0.15s ease-out;
}

#group-name-input {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--font);
    color: var(--text);
    outline: none;
    min-width: 200px;
}

#group-name-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

#group-name-save, #group-name-cancel {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background 0.12s;
}

#group-name-save { background: var(--blue); color: white; }
#group-name-save:hover { background: #1d4ed8; }

#group-name-cancel { background: var(--bg); color: var(--text-secondary); }
#group-name-cancel:hover { background: var(--border); color: var(--text); }

.groups-close-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
}

.groups-close-btn:hover { background: var(--bg); color: var(--text); }

/* Groups panel — editing a name inline */
.groups-row-name[contenteditable="true"],
.groups-row-name.editing {
    background: var(--blue-bg, #eff6ff);
    outline: none;
    padding: 1px 4px;
    border-radius: 4px;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
}

/* Group labels on canvas — Figma collab-style name pill, sits centered on the outline.
   The scale(var(--zoom-inv, 1)) counter-scales the pill so it stays at a readable
   on-screen size no matter how far the user zooms out. JS updates --zoom-inv on zoom. */
.group-canvas-label {
    position: absolute;
    padding: 8px 18px;
    background: var(--group-color, var(--blue));
    color: white;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 999px;
    pointer-events: auto;
    cursor: text;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    line-height: 1.1;
    white-space: nowrap;
    transform: translate(-50%, -50%) scale(var(--zoom-inv, 1));
    transform-origin: center;
    outline: none;
    transition: transform 0.08s linear;
}

.group-canvas-label.editing {
    box-shadow: 0 0 0 3px rgba(255,255,255,0.5), 0 2px 6px rgba(0,0,0,0.18);
}

.group-canvas-outline {
    position: absolute;
    border: 2px dashed var(--group-color, var(--blue));
    border-radius: 16px;
    pointer-events: none;
    opacity: 0.5;
    z-index: 0;
}

body.group-outlines-off .group-canvas-outline,
body.group-outlines-off .group-canvas-label {
    display: none;
}

/* Legacy popup — kept but unused */
#groups-popup { display: none; }

.groups-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.groups-new-btn {
    font-size: 11px;
    font-weight: 500;
    padding: 5px 10px;
    background: var(--blue);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font);
    transition: background 0.12s;
}

.groups-new-btn:hover { background: #1d4ed8; }

#groups-list { overflow-y: auto; padding: 6px; }

.groups-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.groups-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s;
}

.groups-row:hover { background: var(--bg); }

.groups-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.groups-row-info { flex: 1; min-width: 0; }

.groups-row-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.groups-row-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.groups-row-actions {
    display: flex;
    gap: 2px;
    opacity: 0.55;
    transition: opacity 0.12s;
}

.groups-row:hover .groups-row-actions { opacity: 1; }

.groups-row-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    transition: background 0.12s, color 0.12s;
}

.groups-row-btn:hover { background: var(--bg); color: var(--text); }
.groups-delete:hover { background: var(--red-bg, #fef2f2); color: var(--red, #dc2626); }

/* Node belongs to a group: full colored border in the group's accent color */
.canvas-node.in-group {
    border-color: var(--group-color, var(--blue));
    border-width: 2px;
}

.node-group-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    margin-left: 10px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: white;
    border-radius: 4px;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════
   FILES PANEL — selection, marquee, folder drop
   ═══════════════════════════════════════════════════ */

#fp-marquee {
    position: fixed;
    border: 1.5px solid var(--blue);
    background: rgba(37, 99, 235, 0.08);
    pointer-events: none;
    z-index: 180;
    border-radius: 2px;
}

/* Lasso cursor while drag-selecting in files panel */
body.fp-lasso-active,
body.fp-lasso-active * { cursor: crosshair !important; }
#files-panel .fp-body { cursor: cell; }
#files-panel .fp-body .file-item,
#files-panel .fp-body .gallery-item { cursor: pointer; }

/* Floating selection bar inside the panel body — anchors below the bottommost selected item */
#fp-selection-bar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 10px;
    border: 1px solid var(--border);
    background: white;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    z-index: 30;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}

#fp-selection-bar.hidden { display: none; }

#fp-selection-bar .fp-sel-count {
    color: var(--blue);
    white-space: nowrap;
    padding-right: 6px;
    border-right: 1px solid var(--border);
    margin-right: 2px;
}

.fp-sel-actions { display: inline-flex; gap: 6px; align-items: center; position: relative; white-space: nowrap; }

.fp-move-wrap { position: relative; }

.fp-move-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    max-height: 240px;
    overflow: auto;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 4px;
    z-index: 200;
}

.fp-move-menu.flip-up {
    top: auto;
    bottom: calc(100% + 6px);
}

.fp-move-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
}

.fp-move-item:hover { background: var(--bg); }
.fp-move-item svg { color: var(--text-muted); flex-shrink: 0; }

.fp-move-item.fp-move-new { color: var(--blue); }
.fp-move-item.fp-move-new svg { color: var(--blue); }
.fp-move-item.fp-move-new:hover { background: var(--blue-bg, #eff6ff); }

.fp-move-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 2px;
}

.fp-sel-btn {
    padding: 5px 9px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
    flex-shrink: 0;
}

.fp-sel-btn:hover { background: var(--bg); color: var(--text); }

.fp-sel-danger { color: var(--red, #dc2626); }
.fp-sel-danger:hover { background: rgba(220, 38, 38, 0.08); color: var(--red, #dc2626); }

/* Icon-only buttons in the selection bar (Download, Clear, Delete) */
.fp-sel-btn.fp-sel-icon {
    padding: 6px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fp-sel-btn.fp-sel-icon svg { display: block; }

/* Folder drop target */
.folder-item.folder-drag-over {
    background: var(--blue-bg, #eff6ff);
    box-shadow: inset 0 0 0 2px var(--blue);
    border-radius: 10px;
}

/* ═══════════════════════════════════════════════════
   CREDITS PILL + BREAKDOWN POPUP
   ═══════════════════════════════════════════════════ */

#credits-pill {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    z-index: 95;
    cursor: pointer;
    user-select: none;
    transition: transform 0.12s, box-shadow 0.12s;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

#credits-pill:hover { transform: translateX(-50%) translateY(-1px); box-shadow: var(--shadow-lg); }

#credits-amount {
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

#credits-count {
    font-size: 11px;
    padding: 2px 6px;
    background: var(--bg);
    color: var(--text-muted);
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}

#credits-popup {
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    z-index: 110;
    overflow: hidden;
    animation: menuIn 0.15s ease-out;
}

.credits-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.credits-reset {
    border: none;
    background: transparent;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 5px;
    font-family: var(--font);
    transition: background 0.12s;
}

.credits-reset:hover { background: var(--bg); color: var(--text); }

#credits-list {
    max-height: 360px;
    overflow-y: auto;
    padding: 6px;
}

.credits-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
}

.credits-row:hover { background: var(--bg); }

.credits-row-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.credits-logo {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--bg);
}

.credits-logo img, .credits-logo svg { width: 20px; height: 20px; }

.credits-info { display: flex; flex-direction: column; }

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

.credits-meta {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.credits-row-cost {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.credits-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.credits-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
    background: var(--bg);
    font-size: 14px;
}

.credits-footer span:last-child {
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.credits-per-image {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.credits-per-image:hover { color: var(--blue); }

.credits-edit-input {
    width: 64px;
    padding: 1px 5px;
    border: 1px solid var(--blue);
    border-radius: 4px;
    font-size: 11px;
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
    outline: none;
}

/* ═══════════════════════════════════════════════════
   COMMAND PALETTE (Cmd+K)
   ═══════════════════════════════════════════════════ */

#cmd-palette {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    animation: fadeIn 0.15s ease;
}

.cmdp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cmdp-modal {
    position: relative;
    width: min(620px, 90vw);
    background: white;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.1);
    overflow: hidden;
    animation: modalIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.cmdp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-muted);
}

#cmdp-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    font-family: var(--font);
    color: var(--text);
    background: transparent;
}

#cmdp-input::placeholder { color: var(--text-muted); }

.cmdp-esc {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cmdp-list {
    max-height: 50vh;
    overflow-y: auto;
    padding: 6px;
}

.cmdp-group {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 8px 12px 4px;
}

.cmdp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s;
}

.cmdp-item.active { background: var(--blue-bg, #eff6ff); }

.cmdp-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.cmdp-shortcut {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.cmdp-item.active .cmdp-shortcut { background: white; }

.cmdp-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
}

.cmdp-item .cmdp-name { flex: 1; min-width: 0; }

.cmdp-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

body.snap-grid-on #canvas-viewport {
    background-image: radial-gradient(circle, rgba(37, 99, 235, 0.1) 1px, transparent 1px);
}

.bar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

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

/* Coming-soon controls (TTS / SFX): visibly inert so users don't click dead UI. */
.bar-btn-disabled,
.bar-btn-disabled:hover { opacity: 0.32; cursor: not-allowed; background: transparent; color: var(--text-secondary); }
.ctx-item-disabled { opacity: 0.4; cursor: not-allowed; }
.ctx-item-disabled:hover { background: transparent; }
.ctx-soon { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }

/* Global Library modal — one place to browse + load saved brands and hooks */
#library-panel { position: fixed; inset: 0; z-index: 400; }
#library-panel.hidden { display: none; }
#library-panel .lib-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.28); }
#library-panel .lib-modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 460px; max-width: calc(100vw - 32px); max-height: 70vh; display: flex; flex-direction: column; background: var(--bg-node, #fff); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.18); overflow: hidden; }
#library-panel .lib-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-light); }
#library-panel .lib-title-wrap { display: flex; flex-direction: column; gap: 1px; }
#library-panel .lib-title { font-size: 14px; font-weight: 600; }
#library-panel .lib-scope { font-size: 11px; color: var(--text-secondary); }
/* Scope labels clarify the Files (this stage) vs Library (everywhere) distinction. */
.fp-title-wrap { display: flex; flex-direction: column; gap: 1px; }
.fp-scope { font-size: 11px; color: var(--text-secondary); font-weight: 400; }
#library-panel .lib-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-secondary); }
#library-panel .lib-tabs { display: flex; gap: 6px; padding: 10px 16px 0; }
#library-panel .lib-tab { font-size: 12px; padding: 6px 12px; border: none; background: transparent; color: var(--text-secondary); border-radius: 8px; cursor: pointer; }
#library-panel .lib-tab.active { background: var(--bg); color: var(--text); font-weight: 600; }
#library-panel .lib-search-row { padding: 8px 16px 0; }
#library-panel .lib-search { width: 100%; padding: 7px 10px; font-size: 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); }
#library-panel .lib-search:focus { outline: none; border-color: var(--blue); }
#library-panel .lib-body { padding: 10px 12px 14px; overflow-y: auto; }
#library-panel .lib-list { display: flex; flex-direction: column; gap: 4px; }
#library-panel .lib-list.hidden { display: none; }
#library-panel .lib-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border: 1px solid transparent; background: transparent; border-radius: 9px; cursor: pointer; font-size: 13px; color: var(--text); }
#library-panel .lib-item:hover { background: var(--bg); border-color: var(--border-light); }
#library-panel .lib-thumb { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--bg); }
#library-panel .lib-dot { width: 28px; height: 28px; border-radius: 6px; background: var(--bg); flex-shrink: 0; }
#library-panel .lib-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#library-panel .lib-sub { color: var(--text-secondary); font-size: 11px; margin-left: 8px; flex-shrink: 0; }
#library-panel .lib-del { display: none; flex-shrink: 0; margin-left: 8px; padding: 4px; background: none; border: none; border-radius: 6px; color: var(--text-secondary); cursor: pointer; }
#library-panel .lib-item:hover .lib-del { display: inline-flex; }
#library-panel .lib-del:hover { background: rgba(220, 38, 38, 0.10); color: #dc2626; }
#library-panel .lib-empty { padding: 24px 12px; text-align: center; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }

/* Variant compare gallery */
#compare-panel { position: fixed; inset: 0; z-index: 400; }
#compare-panel.hidden { display: none; }
#compare-panel .cmp-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.32); }
#compare-panel .cmp-modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 880px; max-width: calc(100vw - 40px); max-height: 84vh; display: flex; flex-direction: column; background: var(--bg-node, #fff); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.2); overflow: hidden; }
#compare-panel .cmp-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-light); }
#compare-panel .cmp-title { font-size: 14px; font-weight: 600; }
#compare-panel .cmp-tools { display: flex; align-items: center; gap: 14px; }
#compare-panel .cmp-rated-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
#compare-panel .cmp-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-secondary); }
#compare-panel .cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 16px; overflow-y: auto; }
#compare-panel .cmp-card { border: 1px solid var(--border-light); border-radius: 10px; overflow: hidden; background: var(--bg); cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
#compare-panel .cmp-card:hover { border-color: var(--blue); }
#compare-panel .cmp-card.cmp-winner { border-color: #f59e0b; box-shadow: 0 0 0 1px #f59e0b; }
#compare-panel .cmp-thumb { aspect-ratio: 1 / 1; background: #f4f4f5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#compare-panel .cmp-thumb { position: relative; }
#compare-panel .cmp-thumb img { width: 100%; height: 100%; object-fit: contain; }
#compare-panel .cmp-vid-badge { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; }
#compare-panel .cmp-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; }
#compare-panel .cmp-label { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#compare-panel .cmp-stars { display: inline-flex; gap: 1px; flex-shrink: 0; }
#compare-panel .cmp-star { background: none; border: none; padding: 1px; cursor: pointer; color: var(--border); line-height: 0; }
#compare-panel .cmp-star.on { color: #f59e0b; }
#compare-panel .cmp-empty { grid-column: 1 / -1; padding: 40px 16px; text-align: center; color: var(--text-secondary); font-size: 13px; }

.bar-sep {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 4px;
}

/* ═══════════════════════════════════════════════════
   MINIMAP
   ═══════════════════════════════════════════════════ */

#minimap {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 180px;
    height: 120px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    opacity: 0.85;
    transition: opacity 0.15s;
    cursor: pointer;
}

#minimap:hover { opacity: 1; }

#minimap-canvas { display: block; width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════ */

#toast {
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    color: white;
    background: var(--text);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    pointer-events: none;
}

#toast.toast-visible { top: 60px; }
#toast.toast-error { background: var(--red); }

/* ═══════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ═══════════════════════════════════════════════════
   TOOL TOGGLE (Cursor / Hand)
   ═══════════════════════════════════════════════════ */

.tool-toggle {
    display: flex;
    background: var(--bg);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}

.tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.12s;
}

.tool-btn:hover { color: var(--text-secondary); }

.tool-btn.active {
    background: white;
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* ═══════════════════════════════════════════════════
   SELECTION RECTANGLE (Marquee)
   ═══════════════════════════════════════════════════ */

#selection-rect {
    position: fixed;
    border: 1.5px solid var(--blue);
    background: rgba(37, 99, 235, 0.06);
    pointer-events: none;
    z-index: 50;
    display: none;
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════
   MULTI-SELECT
   ═══════════════════════════════════════════════════ */

.canvas-node.multi-selected {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35), 0 0 0 5px rgba(37, 99, 235, 0.12), var(--shadow-md);
}

/* ═══════════════════════════════════════════════════
   FILES PANEL
   ═══════════════════════════════════════════════════ */

#files-panel {
    position: fixed;
    top: 8px;
    right: 8px;
    bottom: 8px;
    width: 280px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    z-index: 150;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform: translateX(0);
    opacity: 1;
}

#files-panel.panel-closing {
    transform: translateX(20px);
    opacity: 0;
}

/* When files panel is open — inset the canvas */
body {
    transition: background 0.3s ease;
}

body.files-open {
    background: #e5e5ea;
}

body.files-open #canvas-viewport {
    top: 8px;
    left: 8px;
    right: 298px;
    bottom: 8px;
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

body.files-open #top-right-pill {
    right: 306px;
}


.fp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--border-light);
}

.fp-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.fp-header-actions { display: flex; gap: 2px; }

.fp-icon-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}

.fp-icon-btn:hover { background: var(--bg); color: var(--text); }

.fp-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    position: relative;
}

.fp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    flex: 1;
    min-width: 0;
}

.fp-bc-item {
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s;
}

.fp-bc-item:hover { color: var(--text); }
.fp-bc-item:last-child { color: var(--text); }

.fp-bc-chevron {
    color: var(--text-dim);
    flex-shrink: 0;
}

/* Inline folder rename */
.folder-name-input {
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text);
    border: none;
    background: var(--blue-bg);
    outline: none;
    padding: 2px 4px;
    border-radius: 4px;
    width: 100%;
}

.fp-nav-actions { display: flex; gap: 2px; }

/* Dropdowns */
.fp-dropdown {
    position: absolute;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 95;
    padding: 4px;
    min-width: 160px;
    animation: menuIn 0.12s ease-out;
}

.fp-nav { position: relative; }
#fp-add-dropdown { top: 100%; right: 30px; margin-top: 4px; }
#fp-menu-dropdown { top: 100%; right: 0; margin-top: 4px; }

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

.fp-drop-item:hover { background: var(--bg); }
.fp-drop-item svg { color: var(--text-muted); flex-shrink: 0; }
.fp-drop-danger { color: var(--red); }
.fp-drop-danger svg { color: var(--red); }
.fp-drop-danger:hover { background: var(--red-bg); }

.fp-tags {
    padding: 8px 16px;
}

.fp-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: white;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s;
}

.fp-tag:hover { background: var(--bg); }

.fp-tag-wrap { position: relative; display: inline-block; }

.fp-tag-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 140px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 10;
    padding: 4px;
    animation: menuIn 0.12s ease-out;
}

.fp-tag-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
    border-radius: 7px;
    transition: background 0.1s;
    text-align: left;
}

.fp-tag-option:hover { background: var(--bg); }
.fp-tag-option svg { display: none; color: var(--text); }
.fp-tag-option.active svg { display: block; }

.fp-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

.fp-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0;
    padding: 10px 14px;
    border-top: 1px solid var(--border-light);
}

.fp-view-toggle {
    display: flex;
    background: var(--bg);
    border-radius: 8px;
    padding: 2px;
}

.fp-view-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}

.fp-view-btn:hover { color: var(--text-secondary); }
.fp-view-btn.active { background: white; color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

#files-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 60px 16px;
    color: var(--text-muted);
    font-size: 15px;
}

#files-empty .btn-small {
    font-size: 13px;
    padding: 7px 16px;
}

/* ── Folder items ── */

.folder-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s;
    margin-bottom: 2px;
}

.folder-item:hover { background: var(--bg); }

.folder-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.folder-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    flex: 1;
}

/* ── File items - List view ── */

.file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s;
    margin-bottom: 2px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

.file-item:hover { background: var(--bg); }
.file-item.file-selected { background: var(--blue-bg); }

.file-checkbox {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    background: white;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.12s;
    cursor: pointer;
}

body.shift-held .file-checkbox { display: flex; }
.file-item.file-selected .file-checkbox { display: flex; }

.file-checkbox:hover { border-color: var(--text-muted); }

.file-item.file-selected .file-checkbox {
    background: var(--text);
    border-color: var(--text);
}

.file-checkbox svg { display: none; }
.file-item.file-selected .file-checkbox svg { display: block; }

.file-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--bg);
    border: 1px solid var(--border-light);
}

.file-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: none;
    border-radius: 3px;
}
.file-name[contenteditable="true"] {
    background: white;
    box-shadow: 0 0 0 2px var(--blue, #3b82f6);
    overflow: visible;
    text-overflow: clip;
    padding: 0 4px;
}

.file-rename,
.file-delete {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.12s;
    flex-shrink: 0;
}

.file-item:hover .file-rename,
.file-item:hover .file-delete { opacity: 1; }
.file-rename:hover { background: var(--bg); color: var(--text); }
.file-delete:hover { background: var(--red-bg); color: var(--red); }

.file-thumb-video {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background: #000;
    border: 1px solid var(--border-light);
}

.file-duration {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 8px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 1px 3px;
    border-radius: 2px;
    font-weight: 600;
}

.file-thumb-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.file-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-play-icon svg { width: 8px; height: 8px; }

/* ── Gallery view ── */

.files-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 4px 8px;
}

.gallery-item {
    position: relative;
    cursor: pointer;
    transition: transform 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    min-width: 0;
    user-select: none;
    -webkit-user-select: none;
}

.gallery-item:hover {
    transform: scale(1.03);
}

.gallery-item.file-selected .gallery-img-wrap { box-shadow: 0 0 0 3px var(--blue); }

.gallery-img-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--bg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 1 / 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.15s;
}

.gallery-item:hover .gallery-img-wrap {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.gallery-thumb { display: none; }

.gallery-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
}

.gallery-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid rgba(255,255,255,0.6);
    background: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.12s;
}

body.shift-held .gallery-checkbox { opacity: 1; }
.gallery-item.file-selected .gallery-checkbox {
    opacity: 1;
    background: var(--text);
    border-color: var(--text);
}

.gallery-checkbox svg { display: none; }
.gallery-item.file-selected .gallery-checkbox svg { display: block; }

.gallery-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.gallery-play svg { width: 12px; height: 12px; }

/* Brand-kit file: green-tinted tile + corner badge in both gallery + list views. */
.gallery-brand-badge,
.file-brand-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: #d1fae5;
    color: #047857;
    border: 1px solid #a7f3d0;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.brand-kit-thumb { position: relative; }
.brand-kit-thumb .file-thumb { background: #fff; }

/* Hook file: amber-tinted tile + Hook badge. */
.gallery-hook-badge,
.file-hook-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.hook-thumb { position: relative; }
/* Gallery: render the headline preview centered over the amber tile. */
.gallery-hook-headline {
    position: absolute;
    inset: 12px 8px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #78350f;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* ═══════════════════════════════════════════════════
   FILE PREVIEW MODAL
   ═══════════════════════════════════════════════════ */

#file-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.preview-container {
    position: relative;
    display: flex;
    max-width: 90vw;
    max-height: 85vh;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3);
    animation: modalIn 0.25s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.preview-sidebar {
    width: 240px;
    padding: 20px;
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
}

.preview-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.preview-meta-time {
    font-size: 12px;
    color: var(--text-secondary);
}

.preview-actions {
    display: flex;
    gap: 4px;
}

.preview-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
}

.preview-action-btn:hover {
    background: var(--bg);
    color: var(--text);
}

.preview-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.preview-filename {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    word-break: break-all;
    line-height: 1.4;
}

.preview-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.preview-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.preview-pill svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

.preview-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 400px;
    max-width: 70vw;
    max-height: 85vh;
    background: #f0f0f0;
}

.preview-img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
}

.preview-vid {
    max-width: 100%;
    max-height: 85vh;
    outline: none;
}

.preview-brand-kit {
    width: min(640px, 90vw);
    max-height: 80vh;
    overflow: auto;
    background: white;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Hook preview card inside the file preview modal. */
.preview-hook-card {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text);
}
.preview-hook-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.preview-hook-num {
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    background: #fef3c7;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #fcd34d;
}
.preview-hook-cat {
    font-size: 10px;
    font-weight: 600;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.preview-hook-line {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.preview-hook-label {
    flex-shrink: 0;
    width: 50px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 6px;
    border-radius: 4px;
    text-align: center;
    background: #fef2f2;
    color: #dc2626;
}
.preview-hook-label.body { background: #eff6ff; color: #2563eb; }
.preview-hook-label.cta  { background: #ecfdf5; color: #047857; }
.preview-hook-text { flex: 1; font-size: 13px; line-height: 1.5; color: var(--text); }
.preview-hook-why {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    border-top: 1px dashed #fcd34d;
    padding-top: 10px;
    margin-top: 4px;
}
.preview-brand-kit.hidden { display: none; }
.preview-brand-kit-actions {
    display: flex;
    justify-content: flex-end;
}
.preview-brand-kit .brand-kit-section { padding: 0; }

.preview-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.06);
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
    z-index: 5;
}

.preview-close:hover { background: rgba(0,0,0,0.12); }

/* ═══════════════════════════════════════════════════
   CONTEXT MENU — Divider & Legacy styling
   ═══════════════════════════════════════════════════ */

.ctx-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 8px;
}

.ctx-item-legacy {
    opacity: 0.7;
    font-size: 12px;
}

/* ═══════════════════════════════════════════════════
   NODE: Image Generation (ElevenLabs-style)
   ═══════════════════════════════════════════════════ */

.image-gen-node {
    width: 520px;
}

.igen-header {
    padding: 10px 14px;
}

.igen-model-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.igen-header-logo {
    display: flex;
    align-items: center;
    width: 16px;
    height: 16px;
}

.igen-header-logo img,
.igen-header-logo svg {
    width: 16px;
    height: 16px;
}

.igen-body {
    padding: 10px 14px;
    gap: 10px;
}

/* Logo grid for multishot/volley source nodes */
/* Source reference shown above Multishot / Volley fanout grids so the user can
   see which image the N variants will edit against. Pinned at the top of the
   canvas area so the logo grid sits below it instead of under it. */
.igen-source-ref {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.igen-source-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.igen-source-img {
    width: auto;
    max-width: 140px;
    max-height: 80px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: repeating-conic-gradient(#f4f4f5 0deg 90deg, #ffffff 90deg 180deg) 0 0/10px 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* When a source reference is present, push the logo grid down so it doesn't
   sit behind the thumbnail pill. Targets the logo-grid that is a sibling of
   .igen-source-ref inside .igen-canvas. */
.igen-canvas:has(.igen-source-ref) .igen-logo-grid {
    padding-top: 120px;
}

.igen-logo-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--logo-cols, 3), 1fr);
    align-content: center;
    justify-items: center;
    gap: 14px 10px;
    padding: 16px;
    overflow-y: auto;
}

/* Compact mode for high counts */
.igen-logo-grid.compact {
    gap: 10px 8px;
    padding: 12px;
}

.igen-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    opacity: 0.35;
    filter: grayscale(1);
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.3s ease;
    position: relative;
}

.igen-logo-grid.compact .igen-logo-icon { width: 32px; height: 32px; }
.igen-logo-grid.compact .igen-logo-icon img,
.igen-logo-grid.compact .igen-logo-icon svg { width: 22px; height: 22px; }
.igen-logo-grid.compact .igen-logo-name { font-size: 9px; }
.igen-logo-grid.compact .igen-logo-sublabel { font-size: 9px; }

.igen-logo-item.completed {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.05);
    animation: logoPulse 0.6s ease;
}

.igen-logo-item.failed {
    opacity: 0.5;
    filter: grayscale(1) sepia(1) hue-rotate(-50deg) saturate(3);
}

@keyframes logoPulse {
    0% { transform: scale(0.85); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1.05); }
}

.igen-logo-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: white;
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.igen-logo-icon img, .igen-logo-icon svg { width: 28px; height: 28px; }

.igen-logo-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.3;
    white-space: normal;
    word-break: normal;
}

.igen-logo-sublabel {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.2;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.igen-canvas {
    position: relative;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    aspect-ratio: 16 / 9;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    overflow: hidden;
    transition: aspect-ratio 0.25s ease;
}

.igen-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-dim);
    font-size: 13px;
    pointer-events: none;
    user-select: none;
}

.igen-progress-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(250, 250, 250, 0.92);
    z-index: 2;
    padding: 20px;
}

.igen-progress-overlay .mini-progress-bar {
    width: 75%;
    max-width: 320px;
    height: 8px;
    border-radius: 4px;
}

.igen-progress-overlay .mini-progress-fill { border-radius: 4px; }

.igen-progress-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

/* Both layers use width:100% with intrinsic height (no object-fit) so the
   image keeps its natural aspect and fits the node width. They're absolutely
   positioned + vertically centered via translateY(-50%) so when the user
   resizes the canvas taller than the image's natural height, the image
   stays centered with even space above and below — instead of stuck to
   the top with empty space below it. Both layers share the same
   geometry, so when the result-img is hidden the thumb shows in
   exactly the same spot (no shift). */
.igen-result-img,
.igen-result-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
    display: block;
}
.igen-result-img  { z-index: 2; }
.igen-result-thumb { z-index: 1; }
.igen-result-img.hidden,
.igen-result-thumb.hidden { display: none; }

.igen-input-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.igen-refs-row {
    display: flex;
    gap: 6px;
    padding: 0 2px;
}

.igen-ref-slot {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1.5px dashed var(--border);
    background: var(--bg);
    position: relative;
    overflow: hidden;
    display: none;
}

.igen-ref-slot.has-image {
    display: block;
    border-style: solid;
}

.igen-ref-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

.igen-ref-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 10px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.igen-ref-slot:hover .igen-ref-remove { display: flex; }

.igen-prompt-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: var(--font);
    color: var(--text);
    background: white;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.igen-prompt-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.igen-prompt-input::placeholder {
    color: var(--text-dim);
}

/* Prompt wrapper hosts the input, a sparkle "Write with AI" button, and the popover. */
.igen-prompt-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
}

.igen-prompt-wrap .igen-prompt-input {
    flex: 1;
    padding-right: 34px; /* space for the sparkle button */
}

.igen-ai-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: var(--blue-bg, #eff6ff);
    color: var(--blue);
    transition: background 0.12s, color 0.12s, transform 0.12s;
}

.igen-ai-btn:hover { background: var(--blue); color: white; transform: translateY(-50%) scale(1.05); }

.igen-ai-popover {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    width: 320px;
    max-width: 80vw;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 12px;
    z-index: 900;
}

.igen-ai-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.igen-ai-close {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.igen-ai-close:hover { background: var(--bg); color: var(--text); }

.igen-ai-brief {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 12px;
    font-family: var(--font);
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

.igen-ai-brief:focus { border-color: var(--blue); }

.igen-ai-models {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 8px 0;
}

.igen-ai-model {
    padding: 4px 9px;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font);
}

.igen-ai-model:hover { background: var(--bg); color: var(--text); }

.igen-ai-model.active {
    background: var(--blue);
    border-color: var(--blue);
    color: white;
}

.igen-ai-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

.igen-ai-run {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 7px;
}

.igen-ai-status {
    font-size: 11px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════
   LLM NODE — prompt drafting, feeds text-in of downstream nodes
   ═══════════════════════════════════════════════════ */

.llm-node,
.text-node { width: 340px; }

.llm-header .llm-model-wrap { position: relative; }

.llm-model-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    background: white;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: var(--font);
    cursor: pointer;
}

.llm-model-toggle:hover { background: var(--bg); color: var(--text); }

.llm-model-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 4px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.llm-model-option {
    padding: 7px 10px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.llm-model-option:hover { background: var(--bg); }

.llm-model-option.active {
    background: var(--blue-bg, #eff6ff);
    color: var(--blue);
}

.llm-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }

.llm-prompt-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 12px;
    font-family: var(--font);
    color: var(--text);
    resize: vertical;
    min-height: 60px;
    outline: none;
    box-sizing: border-box;
}

.llm-prompt-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08); }

.llm-actions-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.llm-run-btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 7px;
}

.llm-status {
    font-size: 11px;
    color: var(--text-muted);
}

.llm-output-wrap {
    margin-top: 4px;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: 7px;
}

.llm-output-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.llm-output {
    display: block;
    width: 100%;
    min-height: 80px;
    max-height: 340px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.5;
    font-family: var(--font);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 7px;
    background: white;
    resize: vertical;       /* matches the prompt input's draggable corner */
    outline: none;
    box-sizing: border-box;
    white-space: pre-wrap;
}

.llm-output:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

/* Custom resize corner for the LLM output (browser native is tiny). */
.llm-output-resize-host {
    position: relative;
}
.llm-output-resize-host .llm-output {
    resize: none; /* suppress native corner — we draw our own */
}
.llm-output-resize-handle {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 18px;
    height: 18px;
    cursor: ns-resize;
    border-radius: 0 0 7px 0;
    background: white;
    opacity: 0.6;
    z-index: 5;
}
.llm-output-resize-handle::before,
.llm-output-resize-handle::after {
    content: '';
    position: absolute;
    background: var(--text-dim);
    border-radius: 1px;
    transform: rotate(-45deg);
    pointer-events: none;
}
.llm-output-resize-handle::before { width: 8px; height: 1.5px; bottom: 4px; right: 2px; }
.llm-output-resize-handle::after  { width: 5px; height: 1.5px; bottom: 7px; right: 2px; }
.llm-output-resize-handle:hover { opacity: 1; }

/* Port placement: text-in on the left edge, text-out on the right edge. */
.llm-port-in  { left: -8px;  top: 50%; transform: translateY(-50%); }
.llm-port-out { right: -8px; top: 50%; transform: translateY(-50%); }

.igen-run-wrap {
    display: flex;
    position: relative;
    flex-shrink: 0;
}

.igen-run-btn {
    padding: 8px 14px;
    border: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--text);
    color: white;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background 0.12s;
    white-space: nowrap;
}

.igen-run-btn:hover {
    background: #374151;
}

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

/* ═══════════════════════════════════════════════════
   NODE: Image Upload
   ═══════════════════════════════════════════════════ */

.image-upload-node { width: 300px; }

.imgup-preview { border-radius: 8px; overflow: hidden; }

.imgup-img {
    width: 100%;
    display: block;
    border-radius: 8px;
}

.imgup-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.imgup-reupload {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: white;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.imgup-reupload:hover { background: var(--bg); color: var(--text); }

.imgup-download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: white;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.imgup-download:hover { background: var(--bg); color: var(--text); }

.imgup-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    color: var(--text-muted);
    font-size: 12px;
}

.imgup-dropzone:hover, .imgup-dropzone.drag-over {
    border-color: var(--blue);
    background: var(--blue-bg);
}

/* ── Volley Config ── */

.igen-volley-config {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg);
    border-radius: var(--radius-sm);
}

.volley-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.volley-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 48px;
}

/* Volley model dropdown */
.volley-model-wrap { position: relative; flex: 1; }

.volley-model-toggle {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: white;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s;
}

.volley-model-toggle:hover { border-color: var(--text-muted); }

.volley-model-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 20;
    padding: 4px;
    animation: menuIn 0.12s ease-out;
}

.volley-model-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s;
    text-align: left;
}

.volley-model-option:hover { background: var(--bg); }

.volley-model-logo {
    display: flex;
    align-items: center;
    width: 20px;
    height: 20px;
}

.volley-model-logo img, .volley-model-logo svg { width: 18px; height: 18px; }

/* Volume grid */
.volley-volume-grid {
    display: flex;
    gap: 2px;
    background: white;
    border-radius: 6px;
    padding: 2px;
    border: 1px solid var(--border);
    flex: 1;
}

.volley-vol-btn {
    flex: 1;
    padding: 4px 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.12s;
    text-align: center;
    white-space: nowrap;
}

.volley-vol-btn:hover { color: var(--text-secondary); background: var(--bg); }

.volley-vol-btn.active {
    background: var(--text);
    color: white;
}

.igen-upscale-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--text);
    color: white;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background 0.12s;
}

.igen-upscale-btn:hover { background: #374151; }

.igen-run-caret {
    padding: 8px 8px;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--text);
    color: white;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.12s;
    display: flex;
    align-items: center;
}

.igen-run-caret:hover {
    background: #374151;
}

/* ── Run dropdown ── */

.run-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 150px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 50;
    padding: 4px;
    animation: menuIn 0.12s ease-out;
}

.run-drop-item {
    display: block;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
    transition: background 0.1s;
}

.run-drop-item:hover {
    background: var(--bg);
}

/* ── Image Gen Footer ── */

.igen-footer {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-top: 1px solid var(--border-light);
    gap: 8px;
}

.igen-footer-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s;
    white-space: nowrap;
}

.igen-footer-btn:hover {
    background: var(--bg);
    color: var(--text);
}

.igen-model-name {
    font-size: 11px;
}

.igen-aspect-wrap {
    position: relative;
}

.igen-aspect-toggle {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: white;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s;
}

.igen-aspect-toggle:hover { background: var(--bg); }

.igen-aspect-dropdown {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 130px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 4px;
    z-index: 20;
    animation: menuIn 0.12s ease-out;
}

.igen-aspect-dropdown-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 6px 10px 4px;
}

.igen-aspect-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s;
    text-align: left;
}

.igen-aspect-option:hover { background: var(--bg); }
.igen-aspect-option.active { font-weight: 600; }
.igen-aspect-option svg { flex-shrink: 0; }

.igen-footer-actions {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.igen-footer-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.12s;
}

.igen-footer-icon-btn:hover {
    background: var(--bg);
    color: var(--text);
}

/* ── Port tooltips ── */

.port-tooltip {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--text);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 20;
}

.port:hover .port-tooltip {
    opacity: 1;
}

/* Port positioning for image-gen */

.igen-port-ref,
.igen-port-text,
.image-gen-node .port-output {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    cursor: pointer;
}

.igen-port-ref {
    top: 35% !important;
    left: -16px !important;
    background: #dbeafe !important;
    color: #2563eb;
}

.igen-port-text {
    top: 55% !important;
    left: -16px !important;
    background: #f3f4f6 !important;
    color: #6b7280;
}

.image-gen-node .port-output {
    top: 35% !important;
    right: -16px !important;
    left: auto !important;
    background: #dbeafe !important;
    color: #2563eb;
}

.igen-port-ref:hover,
.image-gen-node .port-output:hover {
    background: #bfdbfe !important;
    transform: scale(1.1);
}

.igen-port-text:hover {
    background: #e5e7eb !important;
    transform: scale(1.1);
}

/* Hide default port tooltip, use icon instead */
.igen-port-ref .port-tooltip,
.igen-port-text .port-tooltip { display: none; }

/* ═══════════════════════════════════════════════════
   MODEL SELECTOR POPUP
   ═══════════════════════════════════════════════════ */

.model-selector-popup {
    position: fixed;
    width: 400px;
    max-height: 480px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    z-index: 300;
    display: flex;
    flex-direction: column;
    animation: menuIn 0.15s ease-out;
}

.model-popup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
    border-radius: 12px 12px 0 0;
}

.model-search-input {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: var(--font);
    color: var(--text);
    outline: none;
    background: var(--bg);
}

.model-search-input:focus {
    border-color: var(--border-focus);
    background: white;
}

.model-search-input::placeholder {
    color: var(--text-dim);
}

.model-popup-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s;
}

.model-popup-close:hover {
    background: var(--bg);
    color: var(--text);
}

.model-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
}

.model-tabs::-webkit-scrollbar { display: none; }

.model-tab {
    padding: 5px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
    line-height: 1.2;
}

.model-tab:hover {
    color: var(--text-secondary);
    background: var(--bg);
}

.model-tab.active {
    background: var(--text);
    color: white;
}

.model-tab:first-child {
    min-width: 36px;
    text-align: center;
}

.model-list {
    flex: 1;
    overflow-y: overlay;
    overflow-x: hidden;
    padding: 6px;
    border-radius: 0 0 12px 12px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.model-list:hover {
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.model-list::-webkit-scrollbar { width: 6px; }
.model-list::-webkit-scrollbar-track { background: transparent; }
.model-list::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.model-list:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

.model-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s;
}

.model-item:hover {
    background: var(--bg);
}

.model-item-active {
    background: var(--blue-bg);
}

.model-item-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.model-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
    overflow: hidden;
}

.model-item-icon svg { flex-shrink: 0; }

.model-item-info {
    min-width: 0;
}

.model-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.model-badge {
    display: inline-block;
    padding: 1px 6px;
    background: #dbeafe;
    color: var(--blue);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.model-rating {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 2px;
}

.model-item-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════
   NODE: Placeholder (Coming Soon)
   ═══════════════════════════════════════════════════ */

.tts-node,
.sfx-node,
.llm-node,
.text-node {
    width: 280px;
}

.placeholder-body {
    padding: 24px 14px;
}

.placeholder-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 500;
    user-select: none;
}

/* ═══════════════════════════════════════════════════════════════
   ASK STUDIO AI — semantic file search + Q&A
   ═══════════════════════════════════════════════════════════════ */

.fp-search-bar {
    padding: 12px 14px 14px;
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.03) 0%, rgba(96, 165, 250, 0.025) 100%);
    position: relative;
}

.fp-search-bar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.3), rgba(96, 165, 250, 0.4), transparent);
    opacity: 0.7;
}

.fp-search-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.fp-search-brand-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fp-spark {
    color: #1e40af;
    animation: fpSparkle 2.6s ease-in-out infinite;
    transform-origin: center;
}

@keyframes fpSparkle {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}

.fp-brand-text {
    background: linear-gradient(90deg, #1e40af 0%, #3b82f6 55%, #60a5fa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.fp-search-close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, color 0.1s;
}

.fp-search-close:hover { background: var(--bg); color: var(--text); }

.fp-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 9px 8px 9px 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
}

.fp-search-input-wrap:focus-within {
    border-color: transparent;
    box-shadow:
        0 0 0 1.5px #2563eb,
        0 0 0 5px rgba(37, 99, 235, 0.1),
        0 2px 10px rgba(59, 130, 246, 0.12);
}

#fp-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font);
    font-size: 13px;
    color: var(--text);
    resize: none;
    line-height: 1.5;
    max-height: 96px;
}

#fp-search-input::placeholder { color: var(--text-muted); }

.fp-search-clear {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, color 0.1s;
}

.fp-search-clear:hover { background: var(--bg); color: var(--text); }

.fp-search-submit {
    border: none;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 55%, #60a5fa 100%);
    box-shadow: 0 1px 3px rgba(30, 64, 175, 0.3);
    transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s;
    flex-shrink: 0;
}

.fp-search-submit:hover { transform: translateY(-0.5px); box-shadow: 0 2px 7px rgba(30, 64, 175, 0.4); }
.fp-search-submit:active { transform: translateY(0); }
.fp-search-submit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.fp-search-hint {
    margin-top: 8px;
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.fp-kbd {
    display: inline-block;
    padding: 1px 5px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 10px;
    font-family: var(--font);
    color: var(--text-secondary);
    box-shadow: 0 1px 0 var(--border);
    font-weight: 500;
}

/* Results list container replaces folder view while active */
.fp-results {
    padding: 4px 0 12px;
}

.fp-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 8px 10px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fp-results-mode {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 10.5px;
}

.fp-results-mode.retrieval { background: var(--blue-bg); color: var(--blue); }
.fp-results-mode.deep { background: #eff6ff; color: #1e40af; }

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

.fp-examples {
    padding: 20px 14px 8px;
}

.fp-examples-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 10px;
    padding-left: 2px;
}

.fp-examples-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fp-example {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: white;
    color: var(--text-secondary);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
    text-align: left;
    width: 100%;
    font-family: var(--font);
}

.fp-example:hover {
    border-color: rgba(37, 99, 235, 0.4);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.04), rgba(96, 165, 250, 0.03));
    color: var(--text);
}

.fp-example-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.14), rgba(96, 165, 250, 0.14));
    color: #1e40af;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Return to files button — sleek pill with subtle border */
.fp-return-wrap {
    padding: 14px 14px 12px;
    display: flex;
    justify-content: center;
}

.fp-return-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.fp-return-btn:hover {
    background: var(--bg);
    color: var(--text);
    border-color: var(--text-muted);
    transform: translateX(-1px);
}

.fp-return-btn svg {
    opacity: 0.85;
    transition: transform 0.15s;
}

.fp-return-btn:hover svg { transform: translateX(-2px); }

.fp-result-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
    -webkit-user-select: none;
}

.fp-result-item:hover { background: var(--bg); }
.fp-result-item.file-selected { background: var(--blue-bg); }

.fp-result-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    background: white;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.12s;
    cursor: pointer;
}

.fp-result-item:hover .fp-result-checkbox,
body.shift-held .fp-result-checkbox,
.fp-result-item.file-selected .fp-result-checkbox { display: flex; }

.fp-result-checkbox:hover { border-color: var(--text-muted); }

.fp-result-item.file-selected .fp-result-checkbox {
    background: var(--blue);
    border-color: var(--blue);
}

.fp-result-checkbox svg { display: none; }
.fp-result-item.file-selected .fp-result-checkbox svg { display: block; }

.fp-result-rank {
    flex-shrink: 0;
    width: 22px;
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.fp-result-thumb {
    width: 44px;
    height: 44px;
    border-radius: 7px;
    background-size: cover;
    background-position: center;
    background-color: #1a1a2e;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.fp-result-thumb .fp-result-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
}

.fp-result-thumb .fp-result-play svg { width: 14px; height: 14px; }

.fp-result-info {
    flex: 1;
    min-width: 0;
}

.fp-result-name {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-result-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.fp-result-score-bar {
    flex-shrink: 0;
    width: 48px;
    height: 4px;
    background: var(--border-light);
    border-radius: 2px;
    overflow: hidden;
}

.fp-result-score-fill {
    height: 100%;
    background: linear-gradient(90deg, #93c5fd, #2563eb);
    border-radius: 2px;
    transition: width 0.3s ease-out;
}

/* ── Search results — gallery view ── */
.fp-results-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 4px 8px;
}

.fp-result-item.fp-result-gallery {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 0;
    border-radius: 10px;
    background: transparent;
    overflow: hidden;
    min-width: 0;
}

.fp-result-item.fp-result-gallery:hover { background: transparent; }
.fp-result-item.fp-result-gallery.file-selected { background: transparent; }

.fp-result-item.fp-result-gallery .gallery-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0 0 0 1px var(--border);
    transition: box-shadow 0.12s;
    overflow: hidden;
}

.fp-result-item.fp-result-gallery:hover .gallery-img-wrap {
    box-shadow: 0 0 0 1px var(--text-muted);
}

.fp-result-item.fp-result-gallery.file-selected .gallery-img-wrap {
    box-shadow: 0 0 0 3px var(--blue);
}

.fp-result-item.fp-result-gallery .gallery-checkbox {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    border: 1.5px solid white;
    border-radius: 5px;
}

.fp-result-item.fp-result-gallery:hover .gallery-checkbox { display: flex; }
.fp-result-item.fp-result-gallery.file-selected .gallery-checkbox {
    display: flex;
    background: var(--blue);
    border-color: var(--blue);
}

.fp-result-item.fp-result-gallery .gallery-checkbox svg { display: none; }
.fp-result-item.fp-result-gallery.file-selected .gallery-checkbox svg { display: block; }

.fp-result-gallery-rank {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 7px;
    background: rgba(0,0,0,0.65);
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.fp-result-gallery-name {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    width: 100%;
    min-width: 0;
    padding: 0 2px;
}

/* Override the score bar sizing inside gallery mode — full-width strip under the thumb */
.fp-result-item.fp-result-gallery .fp-result-score-bar {
    width: 100%;
    height: 5px;
    margin: 0 auto 2px;
}

/* Deep-mode answer card */
.fp-answer-card {
    margin: 4px 8px 14px;
    padding: 14px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.fp-answer-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.1), rgba(96, 165, 250, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.fp-answer-head .fp-spark { color: #1e40af; }
.fp-answer-head .fp-brand-text {
    background: linear-gradient(90deg, #1e40af 0%, #3b82f6 55%, #60a5fa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.fp-answer-body {
    font-size: 13px;
    color: var(--text);
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.fp-answer-body p { margin: 0 0 8px; }
.fp-answer-body p:last-child { margin-bottom: 0; }
.fp-answer-body strong { font-weight: 600; }

.fp-answer-cites {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}

.fp-cite-label {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: center;
    margin-right: 4px;
}

.fp-cite-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 3px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    max-width: 180px;
}

.fp-cite-chip:hover { background: white; border-color: var(--border-focus); }

.fp-cite-chip-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #1a1a2e;
    flex-shrink: 0;
}

.fp-cite-chip-name {
    font-size: 11px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.fp-answer-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 8px 14px;
    padding: 14px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.fp-answer-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: fpSpin 0.8s linear infinite;
    flex-shrink: 0;
}

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

/* Embed status dot on thumbnails */
.fp-embed-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 0 1.5px white;
    z-index: 2;
}

.fp-embed-dot.ready { background: var(--green); }
.fp-embed-dot.error { background: var(--red); }
.fp-embed-dot.pending { background: #d1d5db; }
.fp-embed-dot.embedding { background: #fbbf24; animation: fpPulse 1.2s ease-in-out infinite; }

@keyframes fpPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Hide nav / tags when search is active (selection bar remains so users can select + download results) */
#files-panel.fp-search-active .fp-nav,
#files-panel.fp-search-active .fp-tags {
    display: none !important;
}

/* ═══════════════════════════════════════════════════
   NODE: Video Gen (Veo 3.1)
   Mirrors .image-gen-node / .igen-* but with video-specific footer pills
   (resolution, duration, audio mute).
   ═══════════════════════════════════════════════════ */

.video-gen-node { width: 520px; }

.vgen-header { padding: 10px 14px; }
.vgen-model-label { font-size: 11px; color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 5px; }
.vgen-header-logo { display: flex; align-items: center; width: 16px; height: 16px; }
.vgen-header-logo img, .vgen-header-logo svg { width: 16px; height: 16px; }

.vgen-body { padding: 10px 14px; gap: 10px; display: flex; flex-direction: column; }

.vgen-canvas {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.vgen-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; color: var(--text-muted); font-size: 12px;
    pointer-events: none;
}
.vgen-placeholder.hidden { display: none; }
.vgen-progress-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 0 20px;
    background: rgba(255,255,255,0.6); backdrop-filter: blur(2px);
}
.vgen-progress-overlay.hidden { display: none; }
.vgen-progress-overlay .mini-progress-bar { width: 60%; }
.vgen-progress-text { font-size: 12px; color: var(--text-secondary); }
.vgen-result-video {
    width: 100%; height: 100%; object-fit: contain; background: #000;
    display: block;
    position: relative;
    z-index: 2;
}
.vgen-result-video.hidden { display: none; }

/* Thumb layer below the full video. Always painted (when present), so if the
   <video> ever unmounts (memory pressure, future LOD swap), the thumb
   becomes the visible fallback — no flicker. */
.vgen-result-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
    z-index: 1;
}
.vgen-result-thumb.hidden { display: none; }

/* Start + End frame thumbnails, flowed below the preview area (mirroring
   image-gen's .igen-refs-row). Show automatically when either port is
   connected. */
.vgen-refs-row {
    display: flex;
    gap: 6px;
    padding: 0 2px;
}
.vgen-refs-row.hidden { display: none; }
.vgen-ref-slot {
    position: relative;
    width: 44px; height: 44px;
    background: var(--bg);
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    overflow: hidden;
    display: none;   /* revealed when .has-image */
}
.vgen-ref-slot.has-image {
    display: block;
    border-style: solid;
}
.vgen-ref-slot img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: 6px;
}
.vgen-ref-label {
    position: absolute;
    bottom: 1px; left: 1px;
    background: rgba(0,0,0,0.72);
    color: white;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 3px;
}

.vgen-input-row { display: flex; gap: 6px; align-items: stretch; }
.vgen-prompt-wrap { flex: 1; position: relative; }
.vgen-prompt-input {
    width: 100%; padding: 8px 12px; font-size: 12px; font-family: var(--font);
    border: 1px solid var(--border); border-radius: 8px; background: white; color: var(--text);
    outline: none; box-sizing: border-box;
}
.vgen-prompt-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
.vgen-run-wrap { display: flex; }
.vgen-run-btn {
    background: var(--text); color: white; border: none; border-radius: 8px 0 0 8px;
    padding: 0 16px; font-weight: 600; font-size: 12px; cursor: pointer; font-family: var(--font);
}
.vgen-run-btn:hover { background: #1f2937; }
.vgen-run-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.vgen-run-caret {
    background: var(--text); color: white; border: none; border-left: 1px solid rgba(255,255,255,0.18);
    border-radius: 0 8px 8px 0; padding: 0 8px; font-size: 10px; cursor: pointer;
}
.vgen-run-caret:hover { background: #1f2937; }

.vgen-footer {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-top: 1px solid var(--border-light);
}
.vgen-footer .igen-footer-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; }
.vgen-model-name { font-size: 11px; font-weight: 500; }
.vgen-pill-wrap { position: relative; }
.vgen-pill {
    padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px;
    background: white; font-size: 11px; font-weight: 600; font-family: var(--font);
    color: var(--text); cursor: pointer;
}
.vgen-pill:hover { background: var(--bg); }
.vgen-pill-dropdown {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    min-width: 130px; background: white; border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 4px; z-index: 20;
    animation: menuIn 0.12s ease-out;
}
.vgen-pill-dropdown.hidden { display: none; }
.vgen-pill-dropdown-header {
    font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 6px 10px 4px;
}
.vgen-pill-option {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 7px 10px; border: none; background: transparent;
    font-size: 13px; font-weight: 500; font-family: var(--font); color: var(--text);
    cursor: pointer; border-radius: 6px; transition: background 0.1s; text-align: left;
}
.vgen-pill-option:hover { background: var(--bg); }
.vgen-pill-option.active { font-weight: 600; }
.vgen-footer-divider { width: 1px; height: 18px; background: var(--border-light); margin: 0 4px; }
.vgen-footer-actions { display: flex; gap: 2px; }
.vgen-audio-toggle { color: var(--text-muted); }
.vgen-audio-toggle:hover { color: var(--text); }

/* Video-gen ports (mirror image-gen pattern: round 32x32 colored circles
   absolutely positioned on the left edge, plus the output on the right). */
.vgen-port-vidin,
.vgen-port-start,
.vgen-port-end,
.vgen-port-text,
.video-gen-node .vgen-port-out {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    cursor: pointer;
}
/* Pin port `top` positions in CSS so they render correctly at first paint —
   before any JS `_repositionPorts` call. Without this, recalcPorts (which
   fires first) stacks every port at node.height/2, making start/end look
   merged. !important beats the inline style recalcPorts sets. */
.vgen-port-vidin { left: -16px !important; top: 80px  !important; background: #ede9fe !important; color: #7c3aed; }
.vgen-port-vidin:hover { background: #ddd6fe !important; transform: scale(1.1); }
.vgen-port-start { left: -16px !important; top: 150px !important; background: #dbeafe !important; color: #2563eb; }
.vgen-port-start:hover { background: #bfdbfe !important; transform: scale(1.1); }
.vgen-port-end   { left: -16px !important; top: 210px !important; background: #dbeafe !important; color: #2563eb; }
.vgen-port-end:hover   { background: #bfdbfe !important; transform: scale(1.1); }
.vgen-port-text  { left: -16px !important; top: 310px !important; background: #f3f4f6 !important; color: #6b7280; }
.vgen-port-text:hover  { background: #e5e7eb !important; transform: scale(1.1); }
.video-gen-node .vgen-port-out {
    right: -16px !important; left: auto !important; top: 50% !important;
    background: #ede9fe !important; color: #7c3aed;
}
.video-gen-node .vgen-port-out:hover { background: #ddd6fe !important; transform: scale(1.1); }
/* hide legacy default tooltips */
.vgen-port-vidin .port-tooltip,
.vgen-port-start .port-tooltip,
.vgen-port-end .port-tooltip,
.vgen-port-text .port-tooltip { display: none; }

/* Custom "11Labs-style" port tooltip: black pill to the LEFT of the port on
   hover. Skipped transitions keep it snappy during fast mouse-overs. */
.vgen-port-tooltip {
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: #111827;
    color: white;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    z-index: 10;
}
.vgen-port-tooltip-right {
    /* Right-edge ports (vid-out) — tooltip sits to the LEFT of the port. */
    right: calc(100% + 8px);
}
.vgen-port-vidin:hover .vgen-port-tooltip,
.vgen-port-start:hover .vgen-port-tooltip,
.vgen-port-end:hover   .vgen-port-tooltip,
.vgen-port-text:hover  .vgen-port-tooltip,
.video-gen-node .vgen-port-out:hover .vgen-port-tooltip { opacity: 1; }

/* ═══════════════════════════════════════════════════
   LOD: SKELETON DOM AT LOW ZOOM
   ═══════════════════════════════════════════════════
   When zoom drops below SKEL_ZOOM_THRESHOLD (script.js), each visible node
   gets `node-skeleton-mode` added. CSS hides the full body and shows a
   compact skeleton (color bar + thumb + title). Full DOM stays in the tree
   so event listeners survive — only display:none changes. */

.node-skeleton {
    display: none;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    flex-direction: column;
    box-sizing: border-box;
}

/* Hide every direct child EXCEPT the skeleton itself and the group badge.
   Connection paths use stored coordinates (not DOM measurements), so the
   bezier lines stay accurate even when ports are hidden. */
.canvas-node.node-skeleton-mode > *:not(.node-skeleton):not(.node-group-badge) {
    display: none !important;
}
.canvas-node.node-skeleton-mode > .node-skeleton { display: flex; }

/* Skeleton internals */
.ns-bar {
    height: 8px;
    width: 100%;
    flex-shrink: 0;
}
.ns-body {
    flex: 1;
    min-height: 0;
    position: relative;
    background: var(--bg, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ns-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Empty-state icon centered in the body — sized at a generous baseline
   so it remains visible even when the world transform shrinks the tile
   at low zoom (skeleton only renders below SKEL_ZOOM_THRESHOLD anyway,
   so a "too big at full zoom" case never happens). */
.ns-icon-wrap {
    width: 60%;
    aspect-ratio: 1 / 1;
    max-width: 140px;
    max-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
}
.ns-icon-wrap svg { width: 100%; height: 100%; display: block; }

.ns-title {
    flex-shrink: 0;
    padding: 10px 14px;
    /* Baseline is large because skeleton mode only fires at zoom < 0.4.
       At zoom 0.3 a 22px font renders ~7px on screen — readable. */
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--bg-node, #fff);
    border-top: 1px solid var(--border-light, #f0f0f0);
}