/* =========================================================
   AIDA hi-fi · the prototype's own styles, on top of the lo-fi CSS
   Loaded after the inline <style>, so it wins. Grows step by step:
   step 2 · shell (top bar, spaces), AIDA panel (messages, cards, composer, tray), global controls
   ========================================================= */

/* ---------- base ---------- */
body.ui{font-size:13px;line-height:1.45}                       /* the board keeps the lo-fi density until step 3 */
.ti{width:1em;height:1em}
.gi{display:inline-flex;vertical-align:-.15em}                 /* an icon in running text: gi('name') */
.gi>.ti{width:1.05em;height:1.05em}
.win{background:var(--background)}

/* ---------- global controls ---------- */


















.spark{color:var(--aida)}

/* menus: kit menu-content */
.menu{background:var(--popover);color:var(--popover-foreground);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:4px;
  animation:float-in var(--dur-3) var(--ease-spring) both;transform-origin:top right}
.menu.up{transform-origin:bottom left}.menu.up.r{transform-origin:bottom right}
.menu button{align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-sm);font-size:var(--text-sm)}
.menu button:hover{background:var(--accent)}
.menu .mh{padding:6px 8px 4px;font-size:var(--text-xs);font-weight:500;color:var(--muted-foreground)}
.menu .sep{margin:4px -4px;background:var(--border)}
.menu .ico{width:16px;display:inline-grid;place-items:center;color:var(--muted-foreground)}.menu .ico .ti{width:16px;height:16px}
.menu small{font-size:var(--text-xs)}

/* tooltip: kit tooltip */
.tipx{background:var(--foreground);color:var(--background);font-size:var(--text-xs);font-weight:500;padding:6px 10px;border-radius:var(--radius-md);box-shadow:var(--shadow-md);transition:opacity var(--dur-2)}

/* toast: kit toast, rises with the spring */
.toast{display:flex;align-items:center;gap:10px;bottom:24px;background:var(--popover);color:var(--popover-foreground);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:10px 14px;font-size:var(--text-base);transform:translateX(-50%) translateY(16px) scale(.97);
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-4) var(--ease-spring)}
.toast.show{transform:translateX(-50%)}
.toast .ti{width:16px;height:16px;color:inherit;flex:none}
/* the action is the opposite of the toast: light on a dark toast, dark on a light one */
.toast.act button{height:28px;padding:0 10px;border-radius:var(--radius-sm);background:var(--primary);color:var(--primary-foreground);font-weight:500;transition:opacity var(--dur-1)}
.toast.act button:hover{opacity:.85}
/* the kit Toaster's icons (size-4); the one deviation: success and error icons take the kit's success and destructive colours */
.toast .t-ic{display:inline-flex;flex:none}
.toast.ok .t-ic{color:var(--success)}
.toast.no .t-ic{color:var(--destructive)}

/* ---------- top bar ---------- */
.topbar{height:56px;padding:0 16px 0 20px;background:var(--background);border-bottom:1px solid var(--border)}
.topbar>.crumbs,.topbar>.top-r{flex:1;width:auto;min-width:0}
.crumbs{display:flex;align-items:center;gap:8px;font-size:var(--text-base);white-space:nowrap}
.crumbs .show{color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis}
.crumbs .ti{color:var(--faint);flex:none}
.crumbs .ep{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 6px 0 8px;margin-left:-4px;border-radius:var(--radius-md);color:var(--foreground);font-weight:500;overflow:hidden}
.crumbs .ep span{overflow:hidden;text-overflow:ellipsis}.crumbs .ep:hover{background:var(--accent)}.crumbs .ep .ti{color:var(--muted-foreground)}
.top-r{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.top-tools{display:flex;align-items:center;gap:8px}
/* the output library opens under the header, at its right edge */
/* filter and display sit on the right of the tools bar, so their menus open under their own button and grow leftwards */
.board-tools.r12 .r #fltWrap,.board-tools.r12 .r #dispWrap{position:relative}
.board-tools.r12 .r #fltWrap .pop-float,.board-tools.r12 .r #dispWrap .pop-float{left:auto;right:0}
.topbar{position:relative}
/* above the sticky tools (15), below the modals (20+), so a preview opened from the library covers it */
.topbar:has(.ab-pop){z-index:18}
.top-tools .menu-wrap{position:static}
.top-tools .ab-pop{position:absolute;bottom:auto;top:calc(100% + 8px);left:auto;right:16px;transform:none;z-index:40;width:960px;max-width:calc(100% - 32px);padding:16px}
.op-pop .op-list{height:min(560px,62vh)}.op-pop .op-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
#spaces.tabs{flex:none}
#spaces .tab{padding:0 12px}

/* ---------- AIDA panel ---------- */
.main{grid-template-columns:1fr 400px}
.chat{position:relative;background:var(--sidebar);border-left:1px solid var(--border);overflow:hidden;isolation:isolate}
.chat-h{position:relative;height:56px;padding:0 10px 0 16px;gap:10px;border-bottom:0;font-weight:600;font-size:var(--text-base)}
.comp-presence{position:absolute;left:0;right:0;bottom:0;height:0;z-index:0;pointer-events:none}
.chat .aida-presence:before{inset:auto -40px -104px -40px;height:240px}

.chat-h .who{display:flex;align-items:center;gap:10px}
#chatStep{display:flex}
.msgs{position:relative;padding:8px 18px 56px;gap:8px;font-size:var(--text-base);line-height:1.55}
.msg{max-width:100%}
.msg.me{align-self:flex-end;max-width:88%;display:flex;flex-direction:column;align-items:flex-end;gap:0;background:none;padding:0}
.msg.me .mrow{display:flex;align-items:flex-end;gap:8px;min-width:0}
.msg.me .mb{background:color-mix(in oklab,var(--u) 70%,var(--secondary));color:var(--foreground);padding:8px 14px;border-radius:18px 18px 6px 18px;min-width:0}
.msg.me .avatar{background:var(--u);color:var(--foreground);margin-bottom:2px}
.msg.ai{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-left:0;position:relative}
.msg.ai .av{display:none}
.msg.ai>.orb{position:absolute;left:0;top:2px}
.msg.ai .bubble{background:none;padding:0;border-radius:0;min-width:0;flex:none}
.bubble p{margin:0 0 8px}.bubble p:last-child{margin-bottom:0}
.bubble b{font-weight:600}
.bubble ol,.bubble ul{margin:6px 0;padding-left:20px}
.typing{display:flex;align-items:center;gap:10px;padding-left:0;font-size:var(--text-sm);color:var(--muted-foreground)}
.typing span{background:linear-gradient(90deg,var(--muted-foreground) 30%,var(--foreground) 50%,var(--muted-foreground) 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 1.8s linear infinite}

/* cards in chat: brief, beat, arc (planCardHTML) */
.mini-card,.cc,.fc-card,.opt{border:1px solid var(--border);border-radius:var(--radius-lg);background:color-mix(in oklab,var(--sidebar) 50%,var(--background))}
.mini-card{padding:8px;gap:10px}.mini-card .mc-t{font-size:var(--text-sm)}
.cc{padding:10px 12px}.cc-why,.iflag{background:var(--aida-soft);color:var(--foreground);border-radius:var(--radius-md)}.cc-why b,.iflag b{color:var(--aida)}
.fc-card{padding:10px 12px;font-size:var(--text-sm);gap:4px}
.fc-opts{padding-left:0;gap:8px}
.fc-opt{height:auto;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;padding:10px 12px;text-align:left;white-space:normal;font-size:var(--text-sm)}
.fc-opt b{font-weight:500}.fc-opt span{color:var(--muted-foreground);font-size:var(--text-xs);font-weight:400}.fc-keep{align-self:flex-start;margin:2px 0 0 4px}
.rchip{height:auto;min-height:32px;justify-content:flex-start;padding:8px 12px;text-align:left;white-space:normal;line-height:1.45}

.role.key,.rt.key{background:var(--aida-soft);color:var(--aida)}

/* stepper in the panel header (Scene brief › Beats › Shots) */

/* ---------- composer + tray ---------- */
.composer{position:relative;z-index:1;margin:0 14px 14px;padding:10px;gap:0;display:block;background:color-mix(in oklab,var(--sidebar) 66%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--input);
  border-radius:calc(var(--radius) + 8px);box-shadow:var(--shadow-md);transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.composer:focus-within{border-color:color-mix(in oklab,var(--ring) 70%,var(--input))}
.composer>textarea{height:auto;min-height:40px;max-height:160px;padding:6px 6px 4px;margin:0 0 4px;font-size:var(--text-base);line-height:1.5;color:var(--foreground);field-sizing:content}
.composer>textarea::placeholder{color:var(--muted-foreground)}
.attach{gap:8px;background:var(--secondary);border-radius:var(--radius-md);padding:4px 6px 4px 4px;font-size:var(--text-xs);margin:0 0 6px}
.attach .thumb{width:32px;height:20px;border-radius:5px}
.attach button{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;color:var(--muted-foreground)}.attach button:hover{background:var(--accent);color:var(--foreground)}

/* the tray: AIDA's open question on the input, inside the wash */
.tray{margin:-4px -4px 10px;padding:12px;max-height:58vh;overflow:auto;border-radius:calc(var(--radius) + 4px);background:color-mix(in oklab,var(--sidebar) 70%,var(--background))}
.tray.in{animation:tray-in var(--dur-4) var(--ease-spring) both}
/* an open AIDA card (kit .aida-card) takes the tray's place on the composer */
#tray>.aida-card{margin:-4px -4px 10px}
.msg .bubble>.aida-card{margin:10px 0}
@keyframes tray-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
.tray.aida-wash{border:1px solid color-mix(in oklab,var(--p-indigo) 28%,var(--border))}
.tr-q{gap:10px;margin-bottom:10px;font-size:var(--text-base);line-height:1.45}.tr-q b{font-weight:500}
.tr-q>.orb{margin-top:1px}
.tr-s{width:100%;height:auto;min-height:32px;justify-content:flex-start;gap:10px;padding:7px 12px;margin-top:6px;text-align:left;white-space:normal}

.tr-s i{display:inline-flex;align-items:center;justify-content:center;height:20px;min-width:20px;padding:0 4px;margin-left:auto;border-radius:4px;background:var(--muted);color:var(--muted-foreground);font-style:normal;flex:none}
.tr-s i .ti{width:12px;height:12px}
.tr-s.sm{width:auto;margin:0;min-height:28px;padding:4px 10px}



/* AIDA toggle on the board when the panel is closed */
.aida-tg{gap:8px}.aida-tg i{top:-2px;right:-2px;width:9px;height:9px;background:var(--p-sky);border-color:var(--background)}

/* ---------- prototype flows (not product UI): a quiet glass card bottom-left ---------- */
.guide{top:auto;bottom:12px;right:auto;left:12px;width:300px;background:color-mix(in oklab,oklch(0.2 0 0) 88%,transparent);color:oklch(0.85 0 0);border:1px solid oklch(1 0 0 / 10%);
  border-radius:var(--radius-xl);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow-xl);font-size:var(--text-xs)}
.guide.closed{width:auto}
.guide-h{padding:8px 12px;gap:8px;font-size:var(--text-xs)}
.guide-h small{color:oklch(0.6 0 0)}

.msgs{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px);mask-image:linear-gradient(to bottom,transparent 0,#000 18px)}
.top-r .avatar{font-size:11px;font-weight:600}
/* the guide stays dark glass in both themes */
.guide .flow{color:oklch(0.85 0 0);border-radius:var(--radius-md);transition:background-color var(--dur-1)}
.guide .flow:hover{background:oklch(1 0 0 / 6%)}
.guide .flow.on{background:oklch(1 0 0 / 9%)}
.guide .flow b{color:oklch(0.97 0 0);font-weight:500}
.guide .flow .k{background:oklch(1 0 0 / 10%);color:oklch(0.9 0 0);font-weight:600}
.guide .flow.on .k{background:oklch(0.97 0 0);color:oklch(0.2 0 0)}
.guide .flow p{color:oklch(0.68 0 0);line-height:1.5}
.guide-t{border-top-color:oklch(1 0 0 / 10%)}.guide-t button.on{background:oklch(1 0 0 / 12%)}

/* =========================================================
   step 3 · Storyboard
   ========================================================= */
/* segmented controls everywhere (lo-fi .seg) → kit tabs look */
.seg{gap:0;background:var(--muted);padding:3px;border-radius:var(--radius-lg)}
.seg button{border-radius:var(--radius-md);color:var(--muted-foreground);font-weight:500;border:1px solid transparent;transition:color var(--dur-2),background-color var(--dur-2)}
.seg button:hover{color:var(--foreground)}
.seg .on{background:var(--background);color:var(--foreground);box-shadow:var(--shadow-sm)}
.dark .seg .on{background:color-mix(in oklab,var(--input) 40%,var(--muted));border-color:var(--input);box-shadow:none}

/* board + its sticky tools */
.board{padding:20px 32px 160px}
.board-tools.r12{margin:-20px -32px 24px;padding:12px 32px;background:color-mix(in oklab,var(--background) 82%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.tools-stuck .board-tools.r12{box-shadow:0 1px 0 var(--border)}




.board-tools .tabs .tab{font-size:var(--text-sm)}
.bt-vr{background:var(--border)}
.fcount{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--foreground);color:var(--background);font-size:11px;font-weight:600;margin-left:2px}

/* scene rail */
.rail{gap:8px}
.rail::before{left:13.5px;width:1px;background:var(--border)}
.rail button{position:relative;width:28px;height:28px;border-radius:999px;background:var(--secondary);border:1px solid var(--border);font-size:var(--text-xs);font-weight:500;color:var(--foreground);font-variant-numeric:tabular-nums;transition:background-color var(--dur-2),color var(--dur-2),border-color var(--dur-2)}
.rail button:hover{background:var(--accent)}
.rail button.on{background:var(--foreground);color:var(--background);border-color:var(--foreground)}

/* scene sections + header */
.scene-sec{padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid var(--border)}
.scene-h{align-items:center;gap:10px;margin-bottom:18px;min-height:32px}
.scene-h h2{font-size:var(--text-lg);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.scene-h h2 .sn{color:var(--muted-foreground);font-weight:500;margin-right:8px;font-variant-numeric:tabular-nums}
.tag{font-size:11px;font-weight:500;padding:1px 8px;border-radius:999px;background:transparent;border:1px solid var(--border);color:var(--muted-foreground)}
.tag.act{background:transparent}
.tag.cutg{border-color:transparent}
.plan-tg{gap:4px;padding-right:6px}
.plan-tg.on{background:var(--accent)}
.plan-tg .chev{display:inline-flex;transition:transform var(--dur-3) var(--ease-spring)}.plan-tg .chev .ti{width:14px;height:14px;color:var(--muted-foreground)}
.plan-dot{width:6px;height:6px;background:var(--p-sky)}
.sh-acts{gap:2px}





/* the scene plan (description, brief, beats) */
.plan{margin:0 0 22px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:16px 18px;transform-origin:top left}
.pl-ed{font-size:var(--text-sm);border-radius:var(--radius-md);padding:4px 8px;margin:0 -8px;width:calc(100% + 16px);transition:background-color var(--dur-1),border-color var(--dur-1)}
.pl-ed:hover{border-color:transparent;background:var(--accent)}
.pl-ed:focus{border-color:var(--ring);background:transparent;box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}
.pl-l{font-size:var(--text-xs);color:var(--muted-foreground)}
.pl-desc .pl-ed{font-size:var(--text-base)}
.pl-brief{border-color:var(--border);gap:24px;padding:12px 0;margin-bottom:12px}
.pl-beats{gap:10px}
.pl-b{background:var(--background);border-color:var(--border);border-radius:var(--radius-lg);padding:10px 12px;gap:6px}
.pl-b.active{background:color-mix(in oklab,var(--aida-soft) 70%,var(--background));border-color:var(--aida-border)}
.pl-t{font-weight:600}
.pl-ic{width:26px;height:26px;border-radius:var(--radius-sm);display:inline-grid;place-items:center}.pl-ic .ti{width:14px;height:14px}
.pl-ic:hover{background:var(--accent);color:var(--foreground)}
.btalk{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--aida)}.btalk .ti{width:8px;height:8px}
.lnk{color:var(--foreground);font-size:var(--text-xs);font-weight:500;text-decoration:underline;text-decoration-color:var(--input);text-underline-offset:3px}.lnk:hover{text-decoration-color:var(--foreground)}

/* empty scene */
.board-empty{border:1px dashed var(--input);border-radius:var(--radius-xl);padding:56px 24px;background:color-mix(in oklab,var(--card) 35%,transparent);color:var(--muted-foreground)}
.board-empty h3{font-size:var(--text-md);font-weight:600;margin:0 0 6px}



.flt-none{border:1px dashed var(--input);border-radius:var(--radius-xl)}

/* keyframes page: shots as runs of frames, the label line spans each shot */
.cp-page{background:none;border-radius:0;padding:0;column-gap:12px;row-gap:28px;grid-template-columns:repeat(auto-fill,minmax(var(--cp-min,184px),1fr));--cp-rule:color-mix(in oklab,var(--muted-foreground) 25%,transparent)}
.cp-p{gap:8px}
.cp-l{height:26px;gap:6px;font-size:var(--text-xs);border-bottom:1px solid var(--cp-rule)}
.cp-l b{font-weight:600;font-size:var(--text-sm)}
.cp-p:not(.cp-last) .cp-l:after{right:-12px;bottom:-1px;width:12px;border-bottom:1px solid var(--cp-rule)}
.cp-p.cp-last .cp-l{border-bottom-color:transparent}
.cp-p.cp-last .cp-l:before{content:"";position:absolute;left:0;right:0;bottom:-1px;border-bottom:1px solid var(--cp-rule)}
.cp-l i{color:var(--muted-foreground)}
.cp-img{border:0;border-radius:10px;isolation:isolate;transition:box-shadow var(--dur-2)}
.cp-img:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px oklch(1 0 0 / 7%);pointer-events:none;z-index:3}
.cp-img .art{border-radius:0}
.cp-img{overflow:hidden}.cp-img .art{transition:transform var(--dur-4) var(--ease-out)}
.cp-p:hover .cp-img{outline:0}
.cp-p:hover .cp-img .art{transform:scale(1.06)}
.cp-p.sel .cp-img{outline:2px solid var(--foreground);outline-offset:3px}
.cp-cap{gap:4px;font-size:var(--text-xs)}
.cp-d{color:var(--muted-foreground)}
.cp-addrow{grid-column:1/-1;justify-self:start;margin:0;height:32px;padding:0 12px;border:0;border-radius:var(--radius-md);color:var(--muted-foreground);font-weight:500;font-size:var(--text-sm);display:inline-flex;align-items:center;gap:6px}
.cp-addrow:hover{background:var(--accent);color:var(--foreground)}

/* frame art */
.art.empty{border:0;background:color-mix(in oklab,var(--foreground) 6%,var(--background));box-shadow:inset 0 0 0 1px var(--border);color:var(--muted-foreground)}.art.empty .ae{color:var(--muted-foreground)}.art.empty .ae .ti{width:clamp(16px,18cqw,32px);height:clamp(16px,18cqw,32px);stroke-width:1.5}
.ae{color:var(--muted-foreground)}.ae-t{font-size:var(--text-xs)}
.art.sketch{background:var(--paper) repeating-linear-gradient(-35deg,transparent 0 9px,oklch(0.95 0 0) 9px 10px);color:oklch(0.72 0 0);border:0}
.art.sketch.hand{background:var(--paper)}.art.sketch.hand svg{color:oklch(0.22 0 0)}
.art.gen{background:var(--p-navy);color:#fff;font-size:var(--text-xs);font-weight:500;isolation:isolate;animation:none}
.art.gen:before{content:"";position:absolute;inset:-25%;z-index:-1;filter:blur(22px);
  background:radial-gradient(45% 60% at var(--gx) var(--gy),var(--p-cobalt),transparent 75%),radial-gradient(40% 55% at calc(100% - var(--gx)) calc(100% - var(--gy)),var(--p-indigo),transparent 75%),
             radial-gradient(30% 40% at 55% 45%,color-mix(in oklab,var(--p-sky) 70%,var(--p-indigo)),transparent 75%);animation:gen-drift 9s var(--ease-in-out) infinite alternate}
.art.gen:after{content:"";position:absolute;inset:0;z-index:-1;opacity:var(--grain-o);mix-blend-mode:overlay;background-image:var(--grain)}
.art.gen .gen-l{display:inline-flex;align-items:center;gap:8px;text-shadow:0 1px 8px oklch(0 0 0 / 40%)}
.art.fresh img.snap{animation:reveal 900ms var(--ease-out) both}
.art-new{display:inline-flex;align-items:center;gap:5px;background:oklch(0 0 0 / 45%);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px;padding:1px 8px;font-weight:500}
.art-new:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--p-sky)}

/* selection checkboxes: frosted over images (appear on hover), kit checkbox in lists and menus */

/* warnings: frosted over images, warning badge elsewhere */
.flag,.cp-srv,.ip-w{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:1px 7px;border-radius:999px;background:var(--warning-soft);color:var(--warning-foreground)}
.flag:before{display:none}
.flag .ti,.cp-srv .ti,.cp-rv .ti{width:12px;height:12px}
.cp-rv{display:inline-flex;align-items:center;gap:4px;background:oklch(0 0 0 / 45%);color:var(--p-ice);color:oklch(0.87 0.13 85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px;padding:1px 8px;font-weight:500}
.film-tag{font-size:10px;font-weight:500;color:var(--muted-foreground);background:transparent;border:1px solid var(--border);border-radius:999px;padding:0 6px}

/* camera size · angle */
.meta{gap:6px;align-items:center}
.meta span{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--radius-md);background:var(--secondary);color:var(--secondary-foreground);font-size:11px;font-weight:500;line-height:1}

/* shot list: a shadcn table in a card */
.list{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl)}
.nl12 .lrow.shot,.nl12 .lrow.lh{padding-left:22px}
.ls-grip{color:var(--muted-foreground);letter-spacing:0}
.rt{font-size:10px;letter-spacing:.06em;padding:1px 6px;border-radius:4px}
.rt.key{background:transparent;border:1px solid var(--input);color:var(--foreground)}
.rt.supporting{background:transparent;border:1px solid var(--border);color:var(--muted-foreground)}
.nc-track:before{border-top:1px solid var(--input)}
.nc-k i{width:7px;height:7px;margin-left:-3.5px;background:var(--muted-foreground)}
.nc-k .art,.nl .c-kf .nc-k .art{border:0;border-radius:6px}
.nc-more{background:var(--secondary);color:var(--muted-foreground);font-weight:500}
.ls-film{border-radius:6px;outline:2px solid transparent;outline-offset:2px;transition:outline-color var(--dur-1)}.ls-film:hover{outline-color:var(--ring)}
.ls-novid{border:1px dashed var(--input);border-radius:6px}
.add-row{padding:12px 14px;border-top:1px solid var(--border);color:var(--muted-foreground);font-weight:500;display:flex;align-items:center;gap:6px}
.add-row:hover{background:color-mix(in oklab,var(--accent) 55%,transparent)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px color-mix(in oklab,var(--p-sky) 35%,transparent)}}

/* selection bar: the kit SelectionBar; only its place on the board and its rise/sink are ours */
.selbar{bottom:-140px}
.selbar.in{animation:none}
.selbar .hint{color:var(--muted-foreground)}











/* filter + display menus */
.flt-clr{font-weight:500}
.rail button{display:grid;place-items:center;padding:0}
.scene-h .plan-tg,.scene-h .tag{flex:none;white-space:nowrap}
.scene-h h2{min-width:0}
/* the play badge on video thumbnails: the frosted play button (kit .media-play material) */
.art .play{z-index:2;width:38px;height:38px;max-width:44%;max-height:60%;aspect-ratio:1;background:oklch(1 0 0 / 16%);color:#fff;backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);padding:0}
.art .play .ti{width:45%;height:45%;margin-left:6%}
.cp-img:after{box-shadow:inset 0 0 0 1px var(--media-edge)}
.nc-k .art,.ls-film .art{box-shadow:inset 0 0 0 1px var(--media-edge)}
.media:after{box-shadow:inset 0 0 0 1px var(--media-edge)}
.menu .seg button{white-space:nowrap}

/* =========================================================
   step 4 · keyframe / shot preview, version strip, Tweak
   ========================================================= */
.modal{padding:16px;gap:12px;background:var(--overlay);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);animation:fade-in var(--dur-3) var(--ease-out)}
.fm-main,.fm-side{background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-xl)}
.fm-h{height:56px;padding:0 12px;gap:8px;border-bottom:1px solid var(--border)}
.fm-h .title{font-weight:600;font-size:var(--text-base);display:flex;align-items:center;gap:6px;margin-left:2px}
.fm-h .crumb{display:inline-flex;align-items:center;gap:6px;color:var(--muted-foreground);font-weight:500}
.mb-sep{display:inline-flex;color:var(--faint);margin:0}.mb-sep .ti{width:14px;height:14px}
.fm-h .vr{background:var(--border)}
.fm-nav>span{font-size:var(--text-xs);color:var(--muted-foreground)}



/* the picture */
.stage{padding:20px 24px 8px}
.stage-art .art{border-radius:14px;box-shadow:inset 0 0 0 1px var(--media-edge)}
.stage-art .art-tag,.stage .art-tag{left:12px;bottom:auto;top:12px;background:oklch(0 0 0 / 40%);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px;padding:2px 9px;text-transform:none;letter-spacing:0;font-size:11px;font-weight:500}
.caption{margin-top:12px;gap:6px 10px;font-size:var(--text-sm);color:var(--muted-foreground)}
.caption b{color:var(--foreground);font-weight:600}



.info-btn{width:28px;height:28px;border:0;border-radius:var(--radius-md);display:inline-grid;place-items:center;color:var(--muted-foreground);font:inherit;padding:0}
.info-btn .ti{width:16px;height:16px}
.info-btn:hover,.info-btn.on{background:var(--accent);color:var(--foreground);border:0}
.o-acts{gap:0}
.o-acts .oa{width:28px;height:28px;border-radius:var(--radius-md);color:var(--muted-foreground);transition:background-color var(--dur-1),color var(--dur-1)}
.o-acts .oa:hover{background:var(--accent);color:var(--foreground)}
.o-acts .oa .ti{width:16px;height:16px}
.inuse{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;background:var(--success-soft);color:var(--success-foreground);font-size:var(--text-xs);font-weight:500}
.inuse .ti{width:12px;height:12px}
.vr-bar{top:30px;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;background:oklch(0 0 0 / 50%);color:#fff;border-radius:999px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:var(--text-xs);font-weight:500;box-shadow:var(--shadow-md);animation:float-in var(--dur-4) var(--ease-spring) both}
.vr-bar .gi{color:var(--p-sky)}.vr-bar .gi .ti{width:8px;height:8px}

/* versions strip */
.strip-h{padding:10px 16px 6px;font-size:var(--text-xs);color:var(--muted-foreground)}
.strip-h b{font-size:var(--text-sm)}
.strip{gap:10px;padding:8px 16px 14px;border-top:0}
.strip button{width:92px;padding:0;border:0;border-radius:8px;outline:2px solid transparent;outline-offset:2px;transition:outline-color var(--dur-2)}
.strip button .art{border-radius:8px;box-shadow:inset 0 0 0 1px var(--media-edge)}
.strip button:hover{outline-color:var(--input)}
.strip button.on{outline-color:var(--foreground)}
.strip .n{font-size:11px;margin-top:6px}
.strip button.on .n{color:var(--foreground)}
.strip .divider{background:var(--border);margin:6px 2px 24px}
.strip .ck,.strip .fv{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:oklch(0 0 0 / 45%);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:none;font-size:10px}
.strip .ck{left:5px;top:5px}.strip .fv{right:5px;top:5px}
.strip .ck:empty{display:none}
.strip .ck .ti,.strip .fv .ti{width:11px;height:11px}
.strip .ck .ti{--ti-stroke:2.6}
.mb-st{background:var(--muted)}

/* details panel */
.fm-side .tabs{height:36px;margin:12px 12px 8px;padding:3px;gap:0;background:var(--muted);border-radius:var(--radius-lg);width:auto}
.fm-side .tabs button{position:relative;padding:0 10px;border-radius:var(--radius-md);color:var(--muted-foreground);font-weight:500;border:1px solid transparent;transition:color var(--dur-2)}
.fm-side .tabs button:hover{color:var(--foreground)}
.fm-side .tabs .on{background:var(--background);color:var(--foreground);box-shadow:var(--shadow-sm)}
.dark .fm-side .tabs .on{background:color-mix(in oklab,var(--input) 40%,var(--muted));border-color:var(--input);box-shadow:none}
.side-body{padding:4px 12px 20px}
.sec{border:1px solid var(--border);border-radius:var(--radius-xl);margin-bottom:12px;background:color-mix(in oklab,var(--background) 30%,transparent)}
.sec-h{padding:10px 12px;border-bottom:1px solid var(--border);background:transparent;border-radius:var(--radius-xl) var(--radius-xl) 0 0;gap:8px}
.sec-h small{color:var(--muted-foreground)}
.lvl{display:inline-flex;align-items:center;gap:6px;padding:0;background:transparent!important;color:var(--foreground)!important;font-size:11px;font-weight:600;letter-spacing:.05em}
.lvl:before{content:"";width:7px;height:7px;border-radius:2px}
.lvl.frame:before{background:var(--warning)}.lvl.shot:before{background:var(--info)}
.fld{padding:10px 12px;border-bottom:1px solid var(--border)}
.fld label{font-size:var(--text-xs);color:var(--muted-foreground);margin-bottom:6px}
.fld textarea,.fld input,.fld select{border:1px solid var(--input);border-radius:var(--radius-md);padding:7px 10px;background:color-mix(in oklab,var(--input) 30%,transparent);color:var(--foreground);font-size:var(--text-sm);transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.fld select{appearance:none;-webkit-appearance:none;padding-right:30px;background-repeat:no-repeat;background-position:right 9px center;background-size:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E")}
.fld select option{background:var(--popover);color:var(--popover-foreground)}
.fld textarea:focus,.fld input:focus,.fld select:focus{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}
.fld.hl{background:var(--warning-soft);border-left-color:var(--warning)}
.fld .hint{font-size:var(--text-xs)}
.a2{border:1px solid var(--border);border-radius:var(--radius-lg);background:transparent;transition:background-color var(--dur-1),border-color var(--dur-1)}
.a2:hover{background:color-mix(in oklab,var(--accent) 55%,transparent);border-color:var(--input)}
.a2-m{border-radius:var(--radius-lg)}
.a2 .pg-th,.pg-th{border-radius:var(--radius-md)}
.a2-t b{font-weight:500}.a2-t small{color:var(--muted-foreground)}
.a2-vp{color:var(--muted-foreground)}
.a2-x{opacity:0;transition:opacity var(--dur-1)}.a2:hover .a2-x{opacity:1}
.a2.add{border-style:dashed;border-color:var(--input)}
.mb-row{border-top:1px solid var(--border);padding:10px 12px}
.mb-th .art{border:0;border-radius:6px;box-shadow:inset 0 0 0 1px var(--media-edge)}
.mb-d{color:var(--muted-foreground)}
.mb-go{display:inline-flex;align-items:center;gap:2px;color:var(--muted-foreground);font-size:var(--text-xs)}
.del-foot{border-top:0;align-items:stretch}



/* shot preview (keyframes of the shot) */
.sp-h{font-size:var(--text-xs);text-transform:none;letter-spacing:0;color:var(--muted-foreground)}
.sp-h span{font-weight:600}
.sp-kfs{gap:20px}
.sp-k .cp-img{border:0;border-radius:12px}
.sp-k:hover .cp-img{outline:0}
.sp-ins b{background:var(--foreground);color:var(--background)}.sp-ins:hover:before{background:var(--foreground)}
.sp-add{border:1px dashed var(--input);border-radius:12px;color:var(--muted-foreground)}.sp-add:hover{border-color:var(--ring);color:var(--foreground);background:var(--accent)}

/* Tweak */
.tw-tools{border:1px solid var(--input);border-radius:var(--radius-lg);padding:3px;gap:2px;background:color-mix(in oklab,var(--input) 20%,transparent)}
.tw-tools .vr{background:var(--border)}
.tw-b{height:30px;padding:0 10px;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;color:var(--foreground);transition:background-color var(--dur-1)}
.tw-b:hover{background:var(--accent)}
.tw-b.on{background:var(--accent);color:var(--foreground);box-shadow:inset 0 0 0 1px var(--input)}
.tw-b .ti{width:16px;height:16px;color:var(--muted-foreground)}
.tw-art>.art,.tw-live,.tw-crop,.tw-busy{border-radius:14px}
/* the tweak field is the chat's composer (textarea + row), a bit wider; the references you add sit above the text */
/* one line tall, it grows up to 5 lines over the picture: the caption keeps the one-line height, so the picture never resizes */
.stage>.caption.tw-cap{position:relative;min-height:89px}
/* --r: what the stage keeps under the picture (caption 89 + its margins 12 and 28, plus a little air), so the picture is sized to leave room for the input */
.tw-main .stage-art,.tw-main .caption{--r:135px}
.tw-ask{position:absolute;left:0;right:0;bottom:0;margin:0 auto;width:min(640px,100%)}
.tw-ask>textarea{min-height:0;max-height:128px;overflow-y:auto}
.tw-ask.off{opacity:.7}
.tw-refs{display:flex;flex-wrap:wrap;gap:6px}
.tw-refs .attach{margin:0}
.tw-pop{background:var(--popover);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:12px 14px;animation:float-in var(--dur-3) var(--ease-spring) both;transform-origin:bottom center}
.tw-pop p{color:var(--muted-foreground)}
.tw-busy{background:color-mix(in oklab,var(--p-navy) 55%,transparent);color:#fff;backdrop-filter:blur(6px) saturate(1.2);-webkit-backdrop-filter:blur(6px) saturate(1.2);font-weight:500;isolation:isolate}
.tw-busy:before{content:"";position:absolute;inset:-25%;z-index:-1;filter:blur(30px);opacity:.75;
  background:radial-gradient(45% 60% at var(--gx) var(--gy),var(--p-cobalt),transparent 75%),radial-gradient(40% 55% at calc(100% - var(--gx)) calc(100% - var(--gy)),var(--p-indigo),transparent 75%);animation:gen-drift 9s var(--ease-in-out) infinite alternate}
.tw-crop i{border-color:#fff;box-shadow:0 0 0 999px oklch(0 0 0 / 55%)}

/* view transitions: the kit's spring */
::view-transition-group(*){animation-duration:var(--dur-4);animation-timing-function:var(--ease-spring)}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--dur-3)}
.fm-side .tabs button{display:inline-flex;align-items:center;justify-content:center}

/* dialogs (lo-fi .smodal / .sm-card): kit dialog, blurred backdrop; the card springs in once, when it opens */
.smodal{padding:24px;background:var(--overlay);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1)}
.smodal:not([hidden]){animation:fade-in var(--dur-3) var(--ease-out)}
.sm-card{background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-xl)}
.sm-h{padding:14px 16px;gap:10px;border-bottom:1px solid var(--border)}
.sm-h b{font-size:var(--text-md);font-weight:600;letter-spacing:-.01em}
.sm-b{padding:16px}
.sm-f{padding:12px 16px;border-top:1px solid var(--border)}




/* review new versions */
.vr-h{padding:18px 20px 12px}
.vr-t b{font-size:var(--text-lg);font-weight:600;letter-spacing:-.01em}
.vr-t p{color:var(--muted-foreground);font-size:var(--text-sm)}
.vr-chips span{background:transparent;border:1px solid var(--border);border-radius:999px;padding:2px 10px;font-size:var(--text-xs);color:var(--muted-foreground)}
.vr-b{padding:4px 20px 16px;gap:12px}
.vr-p{border:1px solid var(--border);border-radius:var(--radius-xl);padding:10px;background:color-mix(in oklab,var(--background) 30%,transparent);transition:border-color var(--dur-2)}
.vr-p.sel{border-color:var(--foreground);box-shadow:none}
.vr-l{font-size:var(--text-xs);font-weight:500;color:var(--muted-foreground);margin-bottom:8px}.vr-p.sel .vr-l{color:var(--foreground)}
.vr-p .art,.vr-strip .art{border-radius:10px;box-shadow:inset 0 0 0 1px var(--media-edge)}
.vr-sh{font-size:var(--text-sm)}
.vr-strip{gap:10px}
.vr-strip button{border:0;padding:0;border-radius:10px;outline:2px solid transparent;outline-offset:3px;transition:outline-color var(--dur-2)}
.vr-strip button:hover:not(.on){border-color:transparent;outline-color:var(--input)}
.vr-strip button.on{border-color:transparent;outline-color:var(--foreground)}
.vr-n{left:8px;top:8px;width:20px;height:20px;background:oklch(0 0 0 / 45%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:11px;font-weight:600}
.vr-strip button.on .vr-n{background:#fff;color:#0a0a0a}
.vr-u{background:oklch(0 0 0 / 45%);color:#fff;backdrop-filter:blur(8px);border-radius:999px;font-weight:500}
.vr-dg{border-top:1px solid var(--border);padding-top:14px;gap:10px}




/* AIDA's recommendation for each pick: an AIDA card (soft tint, no bar) */
.dg-rec{border:1px solid var(--aida-border);border-left:1px solid var(--aida-border);border-radius:var(--radius-lg);padding:10px 12px;background:var(--aida-soft);font-size:var(--text-sm);animation:float-in var(--dur-3) var(--ease-spring) both}
.dg-rec.small{border-color:var(--border);border-left-color:var(--border);background:color-mix(in oklab,var(--background) 30%,transparent)}
.dg-rec b{font-size:var(--text-sm);font-weight:600}.dg-rec p{color:var(--foreground)}
.dg-tag{background:transparent;border:1px solid var(--aida-border);color:var(--aida);border-radius:999px;padding:0 8px;font-weight:500}
.dg-rec.small .dg-tag{background:transparent;border-color:var(--border);color:var(--muted-foreground)}

/* no blocking in the hi-fi: locations are previewed like characters and props */
img.loc-pic{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ad-pp:has(img.loc-pic){padding:0;overflow:hidden;background:var(--media)!important}
.pg-th:has(img.loc-pic){overflow:hidden;background:var(--media)!important}
.guide-h{cursor:grab;user-select:none;touch-action:none}
.guide-h .ti:first-child{color:oklch(0.6 0 0)}
.guide.dragging{opacity:.94;box-shadow:0 30px 70px -10px oklch(0 0 0 / 70%)}
.guide.dragging .guide-h{cursor:grabbing}

/* =========================================================
   step 5 · pre-generation reviews, Animate, video viewer
   ========================================================= */
/* shared form controls inside input cards (pre-gen + Animate) */
.ip-ct select,.flm-cc select,.ip-ct input[type=number],.flm-cdur input,.ip-ct textarea{border:1px solid var(--input);border-radius:var(--radius-md);background:color-mix(in oklab,var(--input) 30%,transparent);color:var(--foreground);font-size:var(--text-sm);padding:6px 10px;transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.ip-ct select,.flm-cc select{appearance:none;-webkit-appearance:none;padding-right:30px;background-repeat:no-repeat;background-position:right 9px center;background-size:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E")}
.ip-ct select option,.flm-cc select option{background:var(--popover);color:var(--popover-foreground)}
.ip-ct select:focus,.flm-cc select:focus,.ip-ct input:focus,.flm-cdur input:focus,.ip-ct textarea:focus{outline:0;border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}
.ip-ct textarea{min-height:56px;line-height:1.45}
/* the include switch: kit switch */
.pg-sw{width:32px;height:18px;border-radius:999px;background:var(--input);transition:background-color var(--dur-2)}
.dark .pg-sw{background:color-mix(in oklab,var(--input) 80%,transparent)}
.pg-sw:after{left:1px;top:1px;width:16px;height:16px;background:var(--background);transition:transform var(--dur-3) var(--ease-spring)}
.dark .pg-sw:after{background:var(--foreground)}
.pg-sw.on{background:var(--primary)}.pg-sw.on:after{left:1px;transform:translateX(14px)}
.dark .pg-sw.on:after{background:var(--primary-foreground)}

/* pre-gen review layout */
.sm-card.pg{border-radius:20px}
.pg-main{background:transparent;padding:18px 20px}
.ip-sec{margin-bottom:22px}
.ip-sh{gap:8px;margin-bottom:10px}.ip-sh b{font-size:var(--text-base);font-weight:600}
.pg-n{background:transparent;border:1px solid var(--border);border-radius:999px;padding:0 8px;color:var(--muted-foreground)}
.ip-grid{gap:10px}
.ip-c{background:color-mix(in oklab,var(--background) 30%,transparent);border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px 12px;transition:border-color var(--dur-1),opacity var(--dur-2)}
.ip-ct small{color:var(--muted-foreground);font-size:var(--text-xs)}.ip-ct b{font-size:var(--text-sm);font-weight:500}
.ip-c.need,.ip-c.cfl{border-color:var(--warning);box-shadow:none}
.ip-c.rg{border-color:var(--aida-border);background:var(--aida-soft)}
.ip-w,.rg-t{border-radius:999px;padding:0 7px;font-weight:500}
.ip-addc{border:1px dashed var(--input);background:transparent}.ip-addc:hover{background:var(--accent)}
.ip-addc .ip-addb{color:var(--muted-foreground);font-weight:500}
.ip-lock{opacity:.6}
.ip-sk{background:color-mix(in oklab,var(--background) 30%,transparent);border:1px solid var(--border);border-radius:var(--radius-xl)}
.ip-skimg .art{border:0;border-radius:10px;box-shadow:inset 0 0 0 1px var(--media-edge)}
.ip-chips span{border:1px solid var(--border);background:transparent;border-radius:999px}
.pg-pr{border-left:1px solid var(--border);width:400px}
.ip-side{padding:16px;gap:12px}
/* the verdict and the checks */
.ip-cnt{border:1px solid color-mix(in oklab,var(--warning) 45%,transparent);background:var(--warning-soft);color:var(--warning-foreground);border-radius:var(--radius-lg);padding:10px 14px;font-weight:600;font-size:var(--text-sm)}
.ip-cnt.ok{border-color:color-mix(in oklab,var(--success) 40%,transparent);background:var(--success-soft);color:var(--success-foreground)}
.ip-ck{border:1px solid color-mix(in oklab,var(--warning) 40%,transparent);background:var(--warning-soft);border-radius:var(--radius-lg);padding:10px 14px;font-size:var(--text-sm)}
.ip-ck b{font-weight:600}
.ip-ck.rg-ok{border-color:var(--border);background:transparent}
.ip-ph{border-top:1px solid var(--border);font-size:var(--text-sm)}
.pg-pr pre,.flm-pr pre{font:12px/1.6 var(--font-mono);background:var(--sunken);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px;color:var(--foreground)}
.pg-refs{gap:8px}
.pg-ref .pg-th{width:44px;height:44px;border-radius:var(--radius-md)}
.pg-ref i{left:3px;bottom:3px;font-size:9px;background:oklch(0 0 0 / 55%);color:#fff;border-radius:4px;backdrop-filter:blur(6px);padding:0 4px}
.pg-th{background:var(--secondary);color:var(--muted-foreground)}
.pg-ft{padding:12px 16px;border-top:1px solid var(--border)}




/* Animate: the shots to animate */
.flm-strip-h{font-size:var(--text-xs);color:var(--muted-foreground);margin-bottom:10px}.flm-strip-h b{font-size:var(--text-base);font-weight:600;color:var(--foreground)}
.flm-strip{gap:10px;padding:4px 4px 16px;margin-bottom:22px;border-bottom:1px solid var(--border)}
.flm-tile{width:124px;padding:0;background:transparent;border:0;border-radius:10px}
.flm-tile .art{border-radius:10px;box-shadow:inset 0 0 0 1px var(--media-edge);outline:2px solid transparent;outline-offset:2px;transition:outline-color var(--dur-2)}
.flm-tile:hover:not(:disabled) .art{outline-color:var(--input)}
.flm-tile:hover:not(:disabled){border-color:transparent}
.flm-tile.in{border-color:transparent;box-shadow:none;background:transparent}
.flm-tile.in .art{outline-color:var(--foreground)}
.flm-ck{top:7px;left:7px;width:20px;height:20px;border-radius:999px;border:1.5px solid oklch(1 0 0 / 85%);background:oklch(0 0 0 / 25%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#0a0a0a;font-size:11px;font-weight:600}
.flm-tile.in .flm-ck{background:#fff;border-color:#fff;color:#0a0a0a}
.flm-tile:not(.in):hover .flm-ck{border-color:#fff}
.flm-tt{font-size:var(--text-xs);margin:7px 2px 0;color:var(--muted-foreground)}.flm-tt b{font-weight:600}
.flm-dot{background:var(--success)}
.flm-newb{border:1px dashed var(--input);border-radius:10px;color:var(--muted-foreground)}.flm-newb:hover{background:var(--accent);color:var(--foreground)}
/* the stage */
.flm-stage{background:var(--media);border-radius:16px;box-shadow:inset 0 0 0 1px var(--media-edge)}
.flm-st-tabs{top:12px;left:12px;background:oklch(0 0 0 / 45%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:999px;padding:2px}
.flm-st-tabs button,.flm-st-tabs span{color:#fff;font-size:11px;font-weight:500;padding:3px 10px;border-radius:999px}
.flm-st-tabs button.on{background:oklch(1 0 0 / 18%)}
.flm-lyl{top:12px;right:12px;background:oklch(0 0 0 / 45%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:999px;padding:2px 10px;font-weight:500}
.player{left:12px;right:12px;bottom:12px;height:38px;gap:12px;padding:0 14px;background:oklch(0 0 0 / 45%);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-radius:999px;font-size:var(--text-xs);font-variant-numeric:tabular-nums}
.player button{width:20px;display:inline-grid;place-items:center}.player .ti{width:14px;height:14px}
.pl-bar{height:4px;background:oklch(1 0 0 / 22%)}.pl-bar i{background:#fff}
/* what goes in */
.flm-wgi b{font-size:var(--text-base);font-weight:600}
.flm-hint{background:none;padding:0;color:var(--muted-foreground);font-size:var(--text-xs)}
.flm-seg{background:color-mix(in oklab,var(--background) 30%,transparent);border:1px solid var(--border);border-radius:var(--radius-lg);padding:8px;transition:border-color var(--dur-2)}
.flm-seg.on{border-color:var(--foreground);box-shadow:none}
.flm-sh{font-size:var(--text-xs)}.flm-sh b{font-weight:600}
.flm-kfs{gap:6px}.flm-kf{border-radius:6px}.flm-kf .art{border-radius:6px}
.flm-kf.master{outline:2px solid var(--foreground);outline-offset:2px}
.flm-kf i{left:4px;bottom:4px;font-size:9.5px;font-weight:500;background:oklch(0 0 0 / 50%);color:#fff;border-radius:999px;padding:0 6px;backdrop-filter:blur(6px)}
.flm-kf.master i{background:#fff;color:#0a0a0a}
.flm-mk{background:oklch(0 0 0 / 50%);color:#fff;border-radius:999px;backdrop-filter:blur(6px)}
.flm-card{background:color-mix(in oklab,var(--background) 30%,transparent);border:1px solid var(--border);border-radius:var(--radius-xl);padding:12px;transition:border-color var(--dur-2)}
.flm-card.on{border-color:var(--foreground)}
.flm-chd{font-size:var(--text-sm)}.flm-cd{font-size:var(--text-sm)}.flm-ca{color:var(--muted-foreground)}
.flm-cdl{background:var(--secondary);border-radius:999px;padding:3px 10px}.flm-cdl:hover{background:var(--accent)}
.flm-in{border:1px solid var(--border);border-radius:var(--radius-xl);background:transparent}.flm-in.on{background:color-mix(in oklab,var(--background) 30%,transparent)}
.flm-ih{padding:12px 14px;font-weight:500}.flm-ih .chev{display:inline-flex;color:var(--muted-foreground)}
.flm-th{border-radius:6px}
/* the side card */
.flm-side{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}
.flm-pr summary{font-weight:500}
.flm-pr summary::before{content:"";width:14px;height:14px;align-self:center;background:var(--muted-foreground);transition:transform var(--dur-2) var(--ease-out);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6l-6 6'/%3E%3C/svg%3E") center/14px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6l-6 6'/%3E%3C/svg%3E") center/14px no-repeat}
.flm-pr[open] summary::before{content:"";transform:rotate(90deg)}
.flm-go{height:40px;font-size:var(--text-base)}
.flm-why{color:var(--muted-foreground);font-size:var(--text-xs)}
.pg-th.flm-au{background:var(--secondary)}

/* video viewer + scene player */
.vd-b{padding:16px;gap:14px}
.vd-b .stage-art .art{border-radius:16px}
.pg-n{display:inline-block}
.ip-side>.pg-n,.flm-pr>.pg-n,.flm-hint.pg-n,div.pg-n{border:0;padding:0;background:none}
button.ip-open:hover .pg-th{outline:2px solid var(--ring);outline-offset:2px}

/* simpler tabs everywhere: solid thumb, no outline */
.seg,.fm-side .tabs{border-radius:calc(var(--radius) + 2px)}
.seg button,.fm-side .tabs button{border:0;border-radius:var(--radius)}
.dark .seg .on,.dark .fm-side .tabs .on{background:oklch(0.32 0 0);border:0;box-shadow:none}
.fm-side .tabs button{height:100%}
.dark .seg,.dark .fm-side .tabs{background:oklch(1 0 0 / 5%)}
.dark .seg .on,.dark .fm-side .tabs .on{background:oklch(1 0 0 / 14%)}

/* =========================================================
   step 6 · Assets + Output library popovers, Script, Import
   ========================================================= */
.ab-pop{background:var(--popover);color:var(--popover-foreground);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-xl);animation:float-in var(--dur-3) var(--ease-spring) both;transform-origin:top right}
.board-tools.r12 .ab-pop{padding:16px}
.ab-h{gap:10px;margin-bottom:12px}.ab-h b{font-size:var(--text-base);font-weight:600}
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0M21 21l-6 -6'/%3E%3C/svg%3E")}

/* output library: media cards (the image is the card) */
.op-scope{gap:8px;margin-bottom:12px}
.op-g{font-size:var(--text-sm);margin:14px 0 8px}.op-g .mute{color:var(--muted-foreground)}

/* script */
.sm-card.script{border-radius:20px}
.scr{background:var(--sunken);font-family:var(--font-mono)}
.scr-sc small,.scr-bh{font-family:var(--font-sans);letter-spacing:.06em}
.scr-blk{border-radius:0 var(--radius-md) var(--radius-md) 0}
.scr-blk:hover{background:color-mix(in oklab,var(--accent) 60%,transparent)}
.scr-blk.on{border-left-color:var(--foreground);background:var(--accent)}
.scr-nav{gap:2px}.scr-nav button{width:32px;height:32px;border-radius:var(--radius-md);background:transparent;color:var(--muted-foreground)}
.scr-nav button:hover:not(:disabled){background:var(--accent);color:var(--foreground)}
.scr-imp{background:transparent;border-color:var(--input);color:var(--foreground);height:32px;font-size:var(--text-sm)}
.scr-imp:hover{background:var(--accent)}

.scr-his{background:var(--card);border-left:1px solid var(--border);padding:12px}
.scr-hi{border-radius:var(--radius-md);padding:8px 10px}.scr-hi.on{background:var(--accent)}
.scr-pv{background:var(--aida-soft);border-bottom:1px solid var(--aida-border);font-family:var(--font-sans)}
.scr-ta,.scr-hd input,.scr-hd select{border:1px solid var(--input);border-radius:var(--radius-md);background:color-mix(in oklab,var(--input) 30%,transparent);color:var(--foreground)}
.scr-ta{border-left:3px solid var(--foreground)}
.scr-ta:focus,.scr-hd input:focus,.scr-hd select:focus{outline:0;border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}
.scr-link{color:var(--foreground);text-decoration-color:var(--muted-foreground)}
.scr-chg{background:var(--success-soft);box-shadow:-6px 0 0 var(--success-soft),6px 0 0 var(--success-soft)}
.scr-l.q{background:var(--warning-soft);box-shadow:0 0 0 3px var(--warning-soft)}
.scp{background:color-mix(in oklab,var(--background) 30%,transparent);border:1px solid var(--border);border-radius:var(--radius-lg)}
.dlg-ask{background:var(--aida-soft);border:1px solid var(--aida-border);border-radius:var(--radius-lg)}

/* import a new draft */
.sm-card.imp{border-radius:20px}
.imp-r{border-top:1px solid var(--border);padding:12px 0}
.imp-k{border-radius:999px;font-weight:500;padding:2px 0}
.imp-k.ord{background:var(--secondary)}
.imp-read .spin{width:28px;height:28px;border:2px solid color-mix(in oklab,var(--p-indigo) 25%,transparent);border-top-color:var(--p-sky)}
.imp-g{border-top:1px solid var(--border)}

/* =========================================================
   step 8 · motion polish: leftover lo-fi timings on the kit tokens,
   and one reduced-motion rule for the hi-fi moves
   ========================================================= */
.toast{transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-3) var(--ease-spring)}
.rail{transition:top var(--dur-3) var(--ease-out)}
.fld{transition:background-color var(--dur-2) var(--ease-out)}
.cc-more .chev{transition:transform var(--dur-3) var(--ease-spring)}
.dp-take.new{animation:dpIn var(--dur-3) var(--ease-spring) both}
.art.image.fresh svg{animation-duration:var(--dur-4);animation-timing-function:var(--ease-out)}
.dp-wv.grow svg{animation-duration:var(--dur-4);animation-timing-function:var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .tray,.dp-take.new,.pl-b.flash,.card.pulse,.lrow.pulse,.cp-p.pulse,.fld.flash,.ab-pop{animation:none!important}
  .toast,.rail,.plan-tg .chev,.cc-more .chev,.pg-sw:after,.media img{transition-duration:var(--dur-1)!important;transition-timing-function:var(--ease-out)!important}
  .media-card:hover .media>img{transform:none}
}

/* storyboard review (user, 2026-10-20) */
.board-tools .tabs{margin:0}
.pop-float .dsize{display:flex;align-items:center;gap:8px;padding:4px 10px 8px}
.pop-float .dsize .ti{width:14px;height:14px;color:var(--muted-foreground);flex:none}
.pop-float .dsize .slider{flex:1;min-width:140px}
/* camera size badges: one hue per size, tight → wide */

/* popovers: dark glass like the guide; they enter via Motion (data-enter), not a CSS animation that replays on every render */
.pop-float,.ab-pop{animation:none;background:color-mix(in oklab,var(--popover) 94%,transparent);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
.menu .seg button,.pop-float .seg button{justify-content:center;text-align:center}
.pop-float .dsize{padding:4px 10px 8px}
/* the sticky tools bar must not blur: a backdrop-filter on it would stop the popovers below from blurring the board */
.board-tools.r12{backdrop-filter:none;-webkit-backdrop-filter:none;background:none}
.board-tools.r12:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:color-mix(in oklab,var(--background) 82%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}

/* empty card: just the icon, no hairline */
.cp-img:has(.art.empty):after{display:none}
/* message actions: the row is always reserved; last message shows it, older ones on hover */
.msg-meta{display:flex;align-items:center;gap:2px;height:28px;margin-top:2px;color:var(--muted-foreground);font-size:var(--text-xs);opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.msg:hover .msg-meta,.msg.last .msg-meta,.msg-meta:focus-within{opacity:1}



.msg-meta .mt{margin-left:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.msg.ai .msg-meta{margin-left:-6px}
.msg.me .msg-meta{padding-right:28px;height:22px}
.msg.me .msg-meta .mt{margin-left:0}

/* review round 3 (user, 2026-10-20) */
.crumbs .burger{width:32px;height:32px;margin:0 2px 0 -8px;flex:none}
/* the tools bar reaches 1px under the header edge, so rounding can never show cards between them */
.board-tools.r12{top:-21px;padding-top:13px}
/* plan: act row */
.pl-act{display:flex;align-items:center;gap:10px;margin:2px 0 14px}
.pl-act .tag.act{border:0;background:var(--secondary);color:var(--secondary-foreground);cursor:pointer;transition:background-color var(--dur-1)}
.pl-act .tag.act:hover{background:var(--accent)}
/* shot list */
.nc-track{padding-top:0;margin-top:0}
.nc-track:before,.nc-k i{display:none}
.nl .c-shot .flag{margin:0}
.ls-n{gap:8px}
.ls-grip{width:22px;height:30px;left:-2px;border-radius:var(--radius-sm);color:var(--muted-foreground)}
.ls-grip .ti{width:16px;height:16px}
.ls-grip:hover{background:var(--accent);color:var(--foreground)}
.rt{display:inline-flex;align-items:center;height:20px;padding:0 8px;border:0;border-radius:var(--radius-md);font-size:11px;font-weight:500;letter-spacing:0;line-height:1;background:var(--secondary);color:var(--secondary-foreground)}
.rt.key{border:0;background:var(--role-key-bg);color:var(--role-key)}
.rt.supporting{border:0;background:var(--role-sup-bg);color:var(--role-sup)}
.ls-ty{gap:4px}
.dl12{display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-who{font-size:var(--text-xs);font-weight:600;color:var(--foreground)}
.dl12 .dl1{color:var(--muted-foreground);font-size:var(--text-xs);line-height:1.4}
.dlm{align-self:flex-start;margin-top:2px;padding:1px 6px;border-radius:var(--radius-sm);background:var(--secondary);color:var(--secondary-foreground);font-size:10.5px;font-weight:500}
.ls-film .art .play{position:absolute;left:50%;top:50%;width:22px;height:22px;max-width:none;max-height:none;margin:0;transform:translate(-50%,-50%);border-radius:50%;padding:0}
.ls-film .art .play .ti{width:10px;height:10px;margin-left:1px}
.ls-novid{display:grid;place-items:center;border:0;background:color-mix(in oklab,var(--secondary) 55%,transparent);color:var(--muted-foreground)}
.ls-novid .ti{width:16px;height:16px;stroke-width:1.5}
/* output library: type tabs left, switches right; scene/shot as comboboxes */
.op-bar{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-bottom:12px}
.op-toggles{display:flex;align-items:center;gap:8px;margin-left:auto}
.op-toggles>*{flex:none}.op-toggles>.lib-sel{flex:0 1 116px;min-width:0}.op-sw{white-space:nowrap;cursor:pointer}
/* AIDA's question on the input: replies stay see-through so the wash shows */


.tray .tr-s i{background:color-mix(in oklab,var(--foreground) 10%,transparent)}
.nl.nl12 .c-kf .nc-k .art{width:72px}
/* composer gradient: behind the whole input area, softer than the first try */
.comp-presence{--presence-a:40%}
.chat .aida-presence:before{inset:auto -40px -70px -40px;height:250px}
.composer{background:color-mix(in oklab,var(--sidebar) 58%,transparent)}

/* review round 4 */
.rt{text-transform:none;letter-spacing:.05em;font-size:10px;font-weight:600}
.dl-h{display:flex;align-items:center;gap:6px;min-width:0}
.dl-h .dlm{margin:0;align-self:auto;flex:none}

/* keyframe preview */
.empty-in svg.ti{position:static;inset:auto;width:16px;height:16px}
.empty-in .acts{width:min(240px,100%)}
.empty-in .acts .menu-wrap{display:flex}


/* same height with or without outputs, so switching keyframes doesn't jump */
.stage>.caption{min-height:32px}
.strip{min-height:96px}
.strip .none{padding-top:10px}
.act-ic{width:24px;height:24px}
.act-ic .ti{width:13px;height:13px}
/* icons inside media (.art) must not inherit the placeholder-drawing rule that stretches svgs over the frame */
.art svg.ti{position:static;inset:auto}
.art .play .gi{display:grid;place-items:center}
.art .play .ti{width:16px;height:16px;margin-left:1px}
.ls-film .art .play .ti{width:10px;height:10px}

/* review round 5 */
.crumbs .burger{color:var(--foreground)}
/* selection bar: raised surface with a visible edge, kit-radius buttons; Generate is the only filled CTA */

/* chat: open and close slide the panel */
.main{overflow:hidden;transition:grid-template-columns var(--dur-4) var(--ease-out)}
.chat{width:400px;min-width:400px;opacity:1;transition:opacity var(--dur-3) var(--ease-out) 60ms,visibility 0s}
.main.chat-off .chat{display:flex;visibility:hidden;opacity:0;transition:opacity var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-4)}
/* preview caption */
.caption .sep-dot{flex:none;width:4px;height:4px;border-radius:50%;background:var(--muted-foreground);opacity:.8}
.caption .cap-acts,.caption .cap-by{display:inline-flex;align-items:center}
.caption .cap-acts{gap:0}
.caption .cap-acts .menu-wrap{position:relative;display:inline-flex}
/* tweak: icon-only tools, room under the ask bar */
.tw-b{width:32px;height:30px;padding:0;justify-content:center}
.tw-b .ti{width:17px;height:17px;color:var(--foreground)}
.tw-b:disabled .ti{color:var(--muted-foreground)}
.tw-main .tw-cap{margin-bottom:28px;padding-bottom:0}
@media (prefers-reduced-motion:reduce){.main,.chat{transition-duration:.01ms!important}}

/* =========================================================
   review round 6
   ========================================================= */
.crumbs .burger{color:var(--foreground)}
.crumbs .burger .ti{color:var(--foreground)}
.crumbs .burger:hover{background:var(--accent)}

/* selection checkboxes on keyframe cards: the same kit checkbox as the shot list (16px, 1px edge, primary when on) */

/* warnings: solid amber with dark text, readable on dark and on images */
.flag,.cp-srv,.ip-w,.cp-rv{background:var(--warning-solid);color:var(--warning-solid-fg);font-weight:600;backdrop-filter:none;-webkit-backdrop-filter:none}
.cp-rv{padding:1px 8px}
.mb-row .wd{background:var(--warning-solid)}



/* favorites are always rose */
.o-acts .oa.on,.op-fav.on .ti{color:var(--favorite)}
.strip .fv{color:var(--favorite)}

/* details panel: one soft container per section (no borders, no dividers), like Suno */
.side-body{display:flex;flex-direction:column;gap:12px;padding:4px 12px 20px}
.fm-side .sec{border:0;background:color-mix(in oklab,var(--foreground) 5%,transparent);border-radius:20px;margin:0;padding:18px}
.fm-side .sec-h{border:0;background:none;padding:0 0 14px;border-radius:0}
.fm-side .lvl{font-size:13px;letter-spacing:0;font-weight:600}
.fm-side .fld{border:0;padding:0 0 16px}
.fm-side .fld:last-child{padding-bottom:0}
.fm-side .fld label{font-size:var(--text-xs);color:var(--muted-foreground);margin-bottom:8px}
.fm-side .fld textarea{border:0;background:transparent;padding:0;border-radius:var(--radius-md);resize:none;box-shadow:none;line-height:1.5}
.fm-side .fld textarea:focus{box-shadow:none;background:color-mix(in oklab,var(--foreground) 6%,transparent);outline:0;margin:-6px -8px;padding:6px 8px;width:calc(100% + 16px)}
.fm-side .fld select,.fm-side .fld input{border:0;background-color:color-mix(in oklab,var(--foreground) 8%,transparent);border-radius:var(--radius-lg);height:38px}
.fm-side .fld select:focus,.fm-side .fld input:focus{box-shadow:0 0 0 2px color-mix(in oklab,var(--ring) 60%,transparent)}
.fm-side .fld.hl{background:color-mix(in oklab,var(--warning-solid) 14%,transparent);border-radius:var(--radius-lg);padding:10px;margin:0 -10px 6px}
.fm-side .banner{border:0;border-radius:20px;padding:16px 18px;margin:0}
.fm-side .other-warn{border:0;border-radius:var(--radius-lg)}
.fm-side .mb-row{border-top:0;border-radius:var(--radius-lg);padding:8px}
.fm-side .sec .mb-row+.mb-row{margin-top:2px}

/* asset tiles: picture first, name under it */
.assets2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
.a2{border:0;background:none;border-radius:var(--radius-xl)}
.a2-m{flex-direction:column;align-items:stretch;gap:8px;padding:0;border-radius:var(--radius-xl)}
button.a2-m:hover,.a2.open>.a2-m{background:none}
.a2-m:hover .a2-t b{text-decoration:none}
.a2 .pg-th{width:100%;height:auto;aspect-ratio:4/3;border-radius:var(--radius-xl);font-size:30px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--media-edge);transition:box-shadow var(--dur-2)}
.a2 .pg-th svg{width:46%;height:auto}
.a2 .pg-th img{width:100%;height:100%;object-fit:cover}
.a2-m:hover .pg-th{box-shadow:inset 0 0 0 1px var(--media-edge),0 0 0 2px color-mix(in oklab,var(--foreground) 25%,transparent)}
.a2-t{padding:0 2px;gap:1px}
.a2-t b{font-size:var(--text-sm);font-weight:600;-webkit-line-clamp:1}
.a2-t small{font-size:var(--text-xs);color:var(--muted-foreground)}
.a2.pick .a2-t small{color:var(--muted-foreground)}
.a2-vp{margin-left:0;padding:0;display:inline-flex;align-items:center;gap:2px;color:var(--muted-foreground)}
.a2-vp:hover{background:none;color:var(--foreground)}
.a2-x{top:6px;right:6px;width:24px;height:24px;background:oklch(0 0 0 / 45%);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center}
.a2-x:hover{background:oklch(0 0 0 / 65%);color:#fff}
.a2.add{grid-column:1/-1}
.a2.add .a2-m{flex-direction:row;justify-content:center;align-items:center;height:40px;gap:8px;padding:0 14px;border-radius:var(--radius-lg);background:color-mix(in oklab,var(--foreground) 8%,transparent);transition:background-color var(--dur-1)}
.a2.add .a2-m:hover{background:color-mix(in oklab,var(--foreground) 14%,transparent)}
.a2.add .a2-t b{font-size:var(--text-sm);font-weight:500}

/* the shot this keyframe belongs to: a card with the picture on top */
.mb-row.mb-shot{flex-direction:column;align-items:stretch;gap:12px;padding:0}
.mb-row.mb-shot:hover{background:none}
.mb-shot .mb-th{width:100%;aspect-ratio:var(--aspect-media)}
.mb-shot .mb-th .art{width:100%;height:100%;border-radius:14px;aspect-ratio:auto}
.mb-shot .mb-rt{gap:8px;font-size:var(--text-sm)}
.mb-shot .mb-rt>b{font-size:var(--text-base);font-weight:600}
.mb-shot .mb-go{font-size:var(--text-xs);color:var(--muted-foreground)}
.mb-shot:hover .mb-go{color:var(--foreground)}
.mb-shot .mb-d{-webkit-line-clamp:2}

/* tweak toolbar: a surface that lifts off the background */
.tw-tools{background:color-mix(in oklab,var(--foreground) 11%,var(--background));border-color:color-mix(in oklab,var(--foreground) 18%,transparent)}
.tw-tools .vr{background:color-mix(in oklab,var(--foreground) 18%,transparent)}


/* output library: independent switch, selects that open a list */
.lib-sel{position:relative}
.lib-sel .select-list{position:absolute;z-index:20;left:0;right:0;min-width:240px;top:calc(100% + 4px)}
.select-list .lc-g{padding:8px 8px 2px}
.a2 .pg-th{aspect-ratio:16/10}
.fm-side .sec .row2 label{color:var(--muted-foreground);font-weight:500;font-size:var(--text-xs)}
.cp-img .cp-rv,.cp-img .cp-srv,.cp-l .cp-srv,.lrow .flag,.nl .c-shot .flag,.ls-n .flag{background:var(--warning-solid);color:var(--warning-solid-fg);font-weight:600;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.cp-img .cp-rv .ti,.flag .ti,.cp-srv .ti{color:inherit}




/* review round 7 */
/* picture inside a rounded card carries the radius itself, so the view transition snapshot keeps its corners */
.cp-img .art,.sp-k .cp-img .art{border-radius:inherit}
/* card checkbox = the shot list checkbox */
/* details: descriptions are visible inputs, two lines tall, so nothing moves when you click in */
.fm-side .fld textarea{height:58px;min-height:58px;width:100%;padding:9px 12px;border-radius:var(--radius-lg);background:color-mix(in oklab,var(--foreground) 8%,transparent);line-height:1.45;overflow:auto}
.fm-side .fld textarea:focus{margin:0;padding:9px 12px;width:100%;background:color-mix(in oklab,var(--foreground) 11%,transparent);box-shadow:0 0 0 2px color-mix(in oklab,var(--ring) 60%,transparent)}
/* assets: small tiles, three across */
.assets2{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
.a2 .pg-th{aspect-ratio:1/1;border-radius:var(--radius-lg);font-size:22px}
.a2-t b{font-size:var(--text-xs)}
.a2-t small,.a2-vp{font-size:11px}
.a2-x{top:4px;right:4px;width:20px;height:20px}
.a2.add{grid-column:auto}
.a2.add .a2-m{flex-direction:column;align-items:stretch;justify-content:flex-start;height:auto;gap:8px;padding:0;background:none}
.a2.add .a2-m:hover{background:none}
.a2.add .a2-t b{font-size:var(--text-xs);font-weight:600;color:var(--muted-foreground)}
.a2:nth-child(even) .menu.vmenu{left:0;right:auto}
.a2:nth-child(3n) .menu.vmenu{left:auto;right:0}
.menu.vmenu{min-width:200px}

/* review round 8 */
/* card size slider: a track you can see */
.pop-float .dsize .slider::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--primary) var(--v),color-mix(in oklab,var(--foreground) 22%,transparent) var(--v))}
.pop-float .dsize .slider::-moz-range-track{background:linear-gradient(to right,var(--primary) var(--v),color-mix(in oklab,var(--foreground) 22%,transparent) var(--v))}
/* video viewer: the big play button centres its icon */
.big-play{display:grid;place-items:center;padding:0}
.big-play .gi{display:grid;place-items:center}
.big-play .ti{width:22px;height:22px;margin-left:2px}
/* details: one label style, one value style */
.fm-side .fld label,.fm-side .sec .fld>label:first-child,.fm-side .fld .row2 label{font-size:var(--text-xs);font-weight:500;color:var(--muted-foreground);margin-bottom:8px}
.fm-side .fld textarea,.fm-side .fld select,.fm-side .fld input{font-size:var(--text-base);color:var(--foreground)}
.fm-side .fld textarea{height:62px;min-height:62px}
.a2-t b{font-size:var(--text-sm);color:var(--foreground)}
.a2-t small,.a2-vp{font-size:var(--text-xs);color:var(--muted-foreground)}
.fm-side .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fm-side .row2>div{min-width:0}
.fm-side .fld .pill{background:color-mix(in oklab,var(--foreground) 14%,transparent);color:var(--foreground);border:0;border-radius:var(--radius-md);padding:3px 4px 3px 10px;font-size:var(--text-sm)}
.fm-side .fld .pill button{color:var(--muted-foreground)}
/* variant menu thumbnails stay small (the tile rule must not reach them) */
.a2 .menu .pg-th{width:26px;height:26px;aspect-ratio:auto;border-radius:var(--radius-sm);font-size:12px;flex:none}
.a2 .menu .pg-th svg{width:26px;height:26px}
.a2 .menu .pg-th img{width:100%;height:100%}
/* add asset: both lists stacked under the tiles, inside the panel */
.fm-side .fld textarea{height:64px;min-height:64px}

/* review round 9: AIDA brief card */
.tray .tr-q{margin-bottom:8px}

/* review round 10 */


/* conflict banner in the details panel: dark surface, warning edge and title, like the storyboard badges */
.fm-side .banner{background:color-mix(in oklab,var(--background) 70%,transparent);border:1px solid var(--warning-solid);color:var(--foreground)}
.fm-side .banner b{display:flex;align-items:center;gap:8px;color:var(--warning-text);font-size:var(--text-sm);font-weight:600;margin-bottom:10px}
.fm-side .banner b .ti{width:16px;height:16px;flex:none}
.fm-side .banner p{color:var(--muted-foreground)}
.fm-side .other-warn{background:transparent;border:1px solid var(--warning-solid);color:var(--warning-text);font-weight:500}
/* prompt dialog: wide, tall, scrolls inside */
.ip-dlg{width:min(860px,94vw)}
.ip-dlg.ip-rv{width:min(720px,94vw)}
.ip-dlg .ip-pb{max-height:min(66vh,640px);overflow:auto;display:flex;flex-direction:column;gap:12px}
.ip-rh{font-size:var(--text-xs);font-weight:500;color:var(--muted-foreground);margin-bottom:-4px}
.ip-pb .ip-refs{gap:8px}
.ip-pb .ip-ref{width:72px;height:72px;border-radius:var(--radius-lg)}
.ip-pre{max-height:none;overflow:visible;font-size:13px;border-radius:var(--radius-lg);background:color-mix(in oklab,var(--foreground) 5%,transparent);border:0}

/* review round 11 */
/* header */
.crumbs button.show{height:30px;padding:0 6px;margin:0 -2px;border-radius:var(--radius-md);color:var(--muted-foreground);font-size:var(--text-base);font-weight:inherit;transition:color var(--dur-1)}
.crumbs button.show:hover{color:var(--foreground)}

.top-r{gap:8px;display:flex;align-items:center;justify-content:flex-end}
.ep-menu{left:0;right:auto;top:calc(100% + 6px);min-width:280px;z-index:30}
.ep-menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left}
.ep-menu .ck{flex:none;width:16px;display:inline-flex}.ep-menu .ck .ti{width:14px;height:14px}
.ep-t{display:flex;flex-direction:column;min-width:0;line-height:1.3}.ep-t b{font-weight:500;font-size:var(--text-sm)}.ep-t small{font-size:var(--text-xs);color:var(--muted-foreground)}
/* tray: wash keeps its phase when it re-renders */
.aida-wash>.wash:before{animation-delay:var(--wash-delay,0s)}
/* suggested reply: a card-like chip, not a pill */

/* confirmed card in the chat: same wash, question and card as the open one */
.ep-menu button{justify-content:flex-start}
.ep-menu .ep-t{flex:1;align-items:flex-start}

/* while the AIDA panel slides, the board keeps its final layout (the cards glide, nothing reflows per frame) */
#board{overflow-x:hidden}
#board.freeze>.scene-wrap{width:var(--bw)}

/* resizable AIDA panel */
.main{grid-template-columns:1fr var(--chat-w,400px)}
.main.chat-off{grid-template-columns:1fr 0}
.chat{width:var(--chat-w,400px);min-width:var(--chat-w,400px)}
.chat-rs{position:absolute;z-index:6;left:0;top:0;bottom:0;width:8px;cursor:col-resize;touch-action:none}
.chat-rs:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background-color var(--dur-2)}
.chat-rs:hover:before,.chat-rs:focus-visible:before,.resizing .chat-rs:before{background:color-mix(in oklab,var(--foreground) 35%,transparent)}
.chat-rs:focus-visible{outline:0}
.resizing,.resizing *{cursor:col-resize!important;user-select:none!important}
.resizing .main{transition:none!important}

.ep-menu{min-width:240px}
.ep-menu .ep-t{flex-direction:row;align-items:baseline;gap:8px}
.ep-menu .ep-n{font-variant-numeric:tabular-nums;color:var(--muted-foreground);font-size:var(--text-sm)}
.ep-menu .ep-t i{font-style:normal;color:var(--muted-foreground)}
.ep-menu .ep-t b{font-weight:500;font-size:var(--text-sm)}

/* selected episode: a white check */
.ep-menu .ck .ti{color:var(--foreground);stroke-width:2.2}
/* script: dialogue is centred under the speaker; the line you came for is marked with a highlighter pen */
.scr-d .scr-l{text-align:center}
.scr-l.q{background:none;box-shadow:none}


/* ---- team feedback, Oct 21 ---- */
/* destructive item in a menu: same red as the Delete shot / keyframe buttons */
.menu button.dng{color:var(--destructive-foreground)}
.menu button.dng:hover:not(:disabled){background:color-mix(in oklab,var(--destructive) 14%,transparent)}
.menu button.dng:disabled{opacity:.5}
/* descriptions: room for exactly 3 lines (line-height 1.45 × 3 + padding) */
.fm-side .fld textarea{font-size:var(--text-base);line-height:1.45;padding:9px 12px;box-sizing:border-box;height:calc(3*1.45em + 18px);min-height:calc(3*1.45em + 18px);resize:none}
/* shot types: a dropdown over the show-level list; system types (star) come first, behind a divider */
.st-sys .ti{width:12px;height:12px;margin-right:4px;color:var(--warning-solid)!important;fill:var(--warning-solid)!important;stroke:var(--warning-solid)!important}
.st-wrap{display:block}
.st-menu{left:0;right:0;top:auto;bottom:calc(100% + 4px);min-width:0;z-index:9}
.st-menu .ti{width:14px;height:14px;color:var(--warning-solid);fill:var(--warning-solid)}
/* keyframe details: the shot as a compact card, name and badges on one line, then thumbnail and description */
.mb-row.mb-shot{flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px;border-radius:var(--radius-lg);border:1px solid var(--border)}
.mb-row.mb-shot:hover{background:color-mix(in oklab,var(--accent) 55%,transparent)}
.mb-shot .mb-rt{flex-direction:row;align-items:center}
.mb-shot .mb-rt>b{display:flex;align-items:center;gap:8px;width:100%;font-size:var(--text-sm)}
.mb-shot .mb-rt .meta{display:inline-flex;gap:6px;margin:0}
.mb-shot .mb-go{margin-left:auto;display:inline-flex}
.mb-shot .mb-go .ti{width:14px;height:14px}
.mb-shot .mb-body{display:flex;gap:10px;align-items:flex-start}
.mb-shot .mb-th{width:56px;flex:none;aspect-ratio:auto}
.mb-shot .mb-th .art,.mb-shot .mb-th .art.empty{width:100%;height:auto;min-height:0;padding:0;box-sizing:border-box;aspect-ratio:var(--aspect-media);border-radius:6px}
.mb-shot .mb-d{-webkit-line-clamp:3;font-size:var(--text-sm);line-height:1.4}
/* asset kind indicator on the tile */
/* output tabs: counts */
.op-n{margin-left:4px;font-size:var(--text-xs);opacity:.6;font-variant-numeric:tabular-nums}

/* shot list type column: one line, first badge then +N, so every row keeps the same height */
.ls-ty.one{flex-wrap:nowrap;overflow:hidden;align-items:center}
.ls-ty.one>span{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-ty.one>.ty-more{flex:none}

/* navigation: Shot in the breadcrumb is a link; the shot card has no outline of its own */
.mb-row.mb-shot{border:0;padding:0;border-radius:0;background:none}
.mb-row.mb-shot:hover{background:none}
.mb-shot:hover .mb-d{color:var(--foreground)}
/* keyframes view: the shot name opens the shot */
.cp-go{display:inline-flex;align-items:center;gap:2px;cursor:pointer;border-radius:var(--radius-sm);transition:color var(--dur-1)}
.cp-go .ti{width:12px;height:12px;opacity:0;margin-left:-2px;transition:opacity var(--dur-1),margin var(--dur-1)}
.cp-go:hover{color:var(--foreground)}
.cp-go:hover .ti{opacity:1;margin-left:0}
.menu button.dng .ico,.menu button.dng .ti{color:inherit}


/* shot list: every row is the same height; the content inside clamps instead of growing */
.nl12 .lrow.shot{height:62px;box-sizing:border-box;overflow:hidden;padding-top:0;padding-bottom:0}
.nl12 .lrow.shot .lc{align-self:center;max-height:100%}
.nl12 .lc.c-chk{display:flex;align-items:center;align-self:stretch}
.nl12 .c-shot{display:flex;align-items:center}
.nl12 .dl12 .dl1{-webkit-line-clamp:1}
.nl12 .dl12 .dl-who,.nl12 .dl12 .dl-h{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nl12 .c-kf .nc-track{flex-wrap:nowrap;align-items:center}
.nl12 .c-kf .nc-k .art,.nl12 .c-kf .nc-k .art.empty{width:72px;height:auto;aspect-ratio:var(--aspect-media);min-height:0}
.nl12 .c-kf .nc-k .art.empty .ae-t{display:none}
.nl12 .c-ty{overflow:hidden}
.nl12 .c-kf .nc-k .art.empty{padding:0!important;box-sizing:border-box;height:auto!important}

/* breadcrumb: ghost links, only the text colour changes */
/* pictures for characters (top of the image), props and locations */
img.loc-pic.char-pic{object-position:50% 0}
.pg-th:has(img.loc-pic){background:var(--media)!important}
/* preview actions (info, link, favourite, download) as big as the buttons next to them */
.caption .info-btn,.caption .o-acts .oa{width:32px;height:32px}
.caption .info-btn .ti,.caption .o-acts .oa .ti{width:18px;height:18px}

/* keyframes view: bigger chevron on the shot name */
.cp-go .ti{width:16px;height:16px;margin-left:-4px}
.cp-go:hover .ti{opacity:1;margin-left:0}
.cp-l .cp-go{gap:4px}

/* details panel fields: shadcn inputs (border, transparent / 30% input fill in dark, ring on focus), border shifts on hover */
.fm-side .fld textarea,.fm-side .fld select,.fm-side .fld input{border:1px solid var(--input);background-color:transparent;border-radius:var(--radius-md);box-shadow:none;transition:border-color var(--dur-1),box-shadow var(--dur-1),background-color var(--dur-1)}
.dark .fm-side .fld textarea,.dark .fm-side .fld select,.dark .fm-side .fld input{background-color:color-mix(in oklab,var(--input) 30%,transparent)}
.fm-side .fld select,.fm-side .fld input{height:36px;padding:4px 12px;font-size:var(--text-sm)}
.fm-side .fld select{padding-right:32px}
.fm-side .fld textarea{padding:8px 12px;font-size:var(--text-sm);line-height:1.5;height:calc(3*1.5em + 18px);min-height:calc(3*1.5em + 18px);box-sizing:border-box;resize:none}
.fm-side .fld textarea:hover,.fm-side .fld select:hover,.fm-side .fld input:hover{border-color:color-mix(in oklab,var(--input) 55%,var(--foreground) 45%)}
.fm-side .fld textarea:focus,.fm-side .fld select:focus,.fm-side .fld input:focus{margin:0;width:100%;padding:8px 12px;border-color:var(--ring);background-color:transparent;box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}
.dark .fm-side .fld textarea:focus,.dark .fm-side .fld select:focus,.dark .fm-side .fld input:focus{background-color:color-mix(in oklab,var(--input) 30%,transparent)}
.fm-side .fld select:focus,.fm-side .fld input:focus{padding:4px 12px}
.fm-side .fld select:focus{padding-right:32px}

/* add asset: the kinds and the list of assets sit side by side, over the tile grid, so the list is never cut off at the end of the panel */

/* prompt dialog: sized for 1000–1500 characters */
.ip-dlg{width:min(1040px,94vw)}
.ip-dlg.ip-rv{width:min(780px,94vw)}
.ip-dlg .ip-pb{max-height:min(78vh,860px)}
.ip-pre{font-size:14px;line-height:1.7;padding:18px 22px}

/* assets without a picture: icon centred in its tile */
.pg-th:not(:has(img)){display:grid;place-items:center}
.pg-th>.ti,.pg-th>svg:only-child{margin:auto}
.pg-th>.gi{display:grid;place-items:center;width:100%;height:100%}
.pg-th>.gi .ti{width:44%;height:44%;position:static;margin:0}
.a2 .pg-th>.gi .ti{width:40%;height:auto;aspect-ratio:1}
.st-trg .ty-more{background:color-mix(in oklab,var(--foreground) 12%,transparent)}

/* round: output counts, add-asset stability, prompt dialog, reference zoom */
/* kinds menu stays put (bottom edge fixed); the asset list grows upward next to it */
/* prompt dialog: narrower, taller */
.ip-dlg{width:min(720px,94vw)}
.ip-dlg.ip-rv{width:min(720px,94vw)}
.ip-dlg .ip-pb{max-height:min(86vh,980px);min-height:min(60vh,520px)}
.ip-pre{font-size:14px;line-height:1.7;padding:18px 20px}
/* visual references: the picture fills its container */
.ip-pb .ip-ref,.ip-ref{padding:0;overflow:hidden;cursor:zoom-in;display:block}
.ip-ref>.art,.ip-ref>.pg-th{width:100%!important;height:100%!important;aspect-ratio:auto!important;border-radius:0!important;border:0;box-shadow:none}
.ip-ref .pg-th img,.ip-ref img.loc-pic{width:100%;height:100%;object-fit:cover}
.ip-ref .pg-th>.gi .ti{width:44%;height:44%}
.ip-ref .pg-th svg:not(.ti){width:60%;height:60%}
.ip-ref:hover{outline:2px solid var(--ring);outline-offset:1px}
#zoomTip{position:fixed;z-index:9999;pointer-events:none;padding:6px;border-radius:16px;background:var(--popover);border:1px solid var(--border);box-shadow:var(--shadow-xl);animation:zoomIn .14s var(--ease-out,ease-out)}
#zoomTip .art,#zoomTip .zoom-img{display:block;border-radius:12px}
#zoomTip .zoom-img{width:360px;height:auto;aspect-ratio:var(--aspect-media);object-fit:cover}
#zoomTip .zoom-img.char-pic{width:280px;aspect-ratio:3/4;object-position:50% 0}
#zoomTip .zoom-ph{width:200px;height:200px;display:grid;place-items:center}
#zoomTip .zoom-ph .pg-th{width:100%;height:100%;border-radius:12px}
#zoomTip .zoom-cap{padding:8px 6px 2px;font-size:var(--text-xs);color:var(--muted-foreground);text-align:center}
@keyframes zoomIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* outputs strip: a light vertical line between sketches and images */
.strip .divider{align-self:stretch;margin:2px 6px;background:var(--border);opacity:.9}
/* video preview: CTAs at 32px like the keyframe preview */





/* shot preview: delete button inset like the sections; the videos strip keeps one height, with or without videos */
.strip{min-height:106px;box-sizing:border-box}
.strip .none{align-self:center;margin:0 auto 0 0}
.fm-side .banner p{margin:0 0 12px;font-size:var(--text-sm);line-height:1.5}
/* video preview: one card per shot in the take, in the same language as the rest */
.vd-segs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:var(--text-sm)}
.vd-seg{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-lg);background:color-mix(in oklab,var(--foreground) 4%,transparent)}
.vd-seg-t{display:flex;align-items:baseline;gap:8px;min-width:0;white-space:nowrap}
.vd-seg-t b{font-size:var(--text-sm);font-weight:600;color:var(--foreground)}
.vd-seg-t span{font-size:var(--text-xs);color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.vd-seg .inuse{flex:none}

/* shot preview: delete button inset like the sections; the videos strip keeps one height, with or without videos */
.strip{min-height:106px;box-sizing:border-box}
.strip .none{align-self:center;margin:0 auto 0 0}
.fm-side .banner p{margin:0 0 12px;font-size:var(--text-sm);line-height:1.5}
/* video preview: one card per shot in the take, in the same language as the rest */
.vd-segs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:var(--text-sm)}
.vd-seg{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-lg);background:color-mix(in oklab,var(--foreground) 4%,transparent)}
.vd-seg-t{display:flex;align-items:baseline;gap:8px;min-width:0;white-space:nowrap}
.vd-seg-t b{font-size:var(--text-sm);font-weight:600;color:var(--foreground)}
.vd-seg-t span{font-size:var(--text-xs);color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.vd-seg .inuse{flex:none}
.vd-segs{width:100%;align-self:stretch}
.vd-segs span{border:0;padding:0;overflow:visible;text-overflow:clip;min-width:0}
.vd-segs .inuse{padding:0 9px}
.vd-seg{flex-grow:1}

/* shot type + dialogue: badges, then a full-width shadcn outline button */
.st-pills{margin-bottom:8px;gap:6px}
.st-pills .pill{display:inline-flex;align-items:center;gap:4px}
.st-pills .pill .st-sys{display:inline-flex;margin:0}
.st-pills .pill .st-sys .ti{width:12px;height:12px;margin:0}
.fm-side .fld .button.st-add{width:100%;--h:36px;font-size:var(--text-sm)}
.dark .fm-side .fld .button.st-add{background:color-mix(in oklab,var(--input) 30%,transparent);border-color:var(--input)}
.dark .fm-side .fld .button.st-add:hover{background:color-mix(in oklab,var(--input) 50%,transparent)}
.dp-rows+.button.st-add{margin-top:8px}
.st-menu{left:0;right:0;top:calc(100% + 4px);bottom:auto}
.st-menu .st-sys .ti{width:14px;height:14px}
.st-menu .lbl{display:flex;align-items:center;gap:8px}
.vd-seg{flex:1 1 150px}

/* ---- feedback: buttons at 32, no colour squares on Shot / Keyframe, dialogue restyle ---- */
.lvl:before{display:none}
.fm-side .fld .button.st-add{--h:32px}
.fm-side .button.dpx-gen{width:100%;margin-top:14px}
.strip-h .button{flex:none}
/* the Sketch/Image tabs in the outputs header: no tab-bar margin, so the header is only as tall as it needs to be */
.fm-side .strip-h .tabs,.strip-h .tabs{margin:0}

/* dialogue card in the shot details */
.dp-rows{gap:8px;margin-bottom:8px}
.dp-row{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--input);border-radius:var(--radius-md);background:transparent;box-shadow:none;font-size:var(--text-sm);transition:border-color var(--dur-1),background-color var(--dur-1)}
.dark .dp-row{background:color-mix(in oklab,var(--input) 30%,transparent)}
.dp-row:hover{border-color:color-mix(in oklab,var(--input) 55%,var(--foreground) 45%);background:transparent}
.dark .dp-row:hover{background:color-mix(in oklab,var(--input) 30%,transparent)}
.dp-who{font-weight:600;color:var(--foreground)}
.dp-line{color:var(--foreground);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dp-tag{background:var(--secondary);color:var(--secondary-foreground);border-radius:var(--radius-sm);font-size:11px;font-weight:500;padding:2px 6px;margin:0 2px;vertical-align:baseline}
.dp-play{border:1px solid var(--input);background:transparent;color:var(--foreground)}
.dp-play:hover{background:var(--accent)}
.dp-play.playing{background:var(--foreground);border-color:var(--foreground);color:var(--background)}

/* dialogue panel: the same cards, fields and buttons as the details */
.dp.dpx{margin:0;min-height:0;display:flex;flex-direction:column;gap:12px}
.dpx-h{display:flex;align-items:center;gap:8px;padding:2px 0 0;position:static;border:0;background:none}
.dpx-h b{font-size:var(--text-base);font-weight:600}
.dpx-h .mute{margin-left:auto;font-size:var(--text-xs);color:var(--muted-foreground)}
.dpx .sec{display:flex;flex-direction:column;gap:14px}
.dpx .fld label{display:flex;align-items:center;gap:6px}
.dpx-lh{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.dpx-lh label{margin:0!important;margin-right:auto!important}
.dpx-lh .button[data-size=icon-sm]{--h:32px;color:var(--muted-foreground)}
.dpx-lh .button[data-size=icon-sm]:hover{color:var(--foreground);background:var(--accent)}
.dpx .dp-ta{width:100%;min-height:96px;font-size:var(--text-base);line-height:1.5;padding:8px 12px;border:1px solid var(--ring);border-radius:var(--radius-md);background:transparent;box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent);outline:0;resize:vertical;box-sizing:border-box}
.dpx .dp-time{margin-top:8px;font-size:var(--text-xs);color:var(--muted-foreground)}
.dpx .dp-time.warn{color:var(--warning-text)}
.dpx .dp-voice{display:flex;align-items:center;gap:10px}
.dpx .dp-voice .pg-th{width:36px;height:36px;flex:none;border-radius:var(--radius-md);overflow:hidden}
.dpx .dp-voice select{flex:1}
.dpx .dp-mode{width:100%}
.dpx .dp-mode button{flex:1}
.dpx input[type=range]{width:100%;accent-color:var(--foreground);margin:4px 0 0}
.dpx .dp-sl{display:flex;justify-content:space-between;padding:0;font-size:var(--text-xs);color:var(--muted-foreground);margin-top:2px}
.dpx .dp-note{margin:0;font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.5}
.dpx .dp-rec{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px;border:1px dashed var(--input);border-radius:var(--radius-lg);background:none}
.dpx .dp-ra{display:flex;gap:8px}
.dpx .dp-take{display:flex;gap:10px;padding:12px;border:1px solid var(--input);border-radius:var(--radius-md);margin:0 0 8px;background:transparent}
.dpx .dp-take.use{border-color:var(--ring);box-shadow:none}
.dpx .dp-tt{display:flex;align-items:center;gap:8px;font-size:var(--text-sm)}
.dpx .dp-tt b{font-weight:600}
.dpx .dp-tt .badge,.dpx .dp-tt .button{margin-left:auto}
.dpx .dp-take>.dp-play{width:32px;height:32px;margin-top:0}
.dpx .dp-none{font-size:var(--text-sm);margin:0}
.dpx .del-foot{margin:4px 0 0;padding:0}
.fm-side .dpx .fld input[type=range]{height:16px;padding:0;border:0;background:none!important;box-shadow:none;margin:6px 0 0}
.fm-side .dpx .fld input[type=range]:hover,.fm-side .dpx .fld input[type=range]:focus{border:0;box-shadow:none;padding:0}
.dpx .dp-sl{margin-top:4px}
.dpx .button.dpx-gen{margin-top:0}

/* ---- dialogue field: edited in place; same look as the other inputs; tags are AIDA-coloured pills ---- */
.dp-ce{display:block;width:100%;box-sizing:border-box;min-height:calc(3*1.6em + 18px);padding:8px 12px;border:1px solid var(--input);border-radius:var(--radius-md);background:transparent;color:var(--foreground);font-size:var(--text-sm);line-height:1.6;box-shadow:none;outline:0;white-space:pre-wrap;word-break:break-word;cursor:text;transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.dark .dp-ce{background:color-mix(in oklab,var(--input) 30%,transparent)}
.dp-ce:hover{border-color:color-mix(in oklab,var(--input) 55%,var(--foreground) 45%)}
.dp-ce:focus{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}
.dp-ce:empty:before{content:attr(data-ph);color:var(--muted-foreground);pointer-events:none}
.dp-tag{display:inline-block;background:color-mix(in oklab,var(--aida) 18%,transparent);color:var(--aida);border-radius:var(--radius-sm);font-size:11px;font-weight:500;line-height:1.5;padding:1px 6px;margin:0 2px;vertical-align:baseline;user-select:none}
.dark .dp-tag{color:color-mix(in oklab,var(--aida) 70%,white)}
/* tag picker: neutral menu, the options are the AIDA tags */
.menu.dp-tags{background:var(--popover);border:1px solid var(--border);gap:6px;padding:10px;width:240px;right:0;left:auto}
.menu.dp-tags button{display:inline-flex;width:auto!important;justify-content:center;padding:2px 8px;border-radius:var(--radius-sm);background:color-mix(in oklab,var(--aida) 18%,transparent);color:var(--aida);font-size:11px;font-weight:500}
.dark .menu.dp-tags button{color:color-mix(in oklab,var(--aida) 70%,white)}
.menu.dp-tags button:hover{background:color-mix(in oklab,var(--aida) 30%,transparent)}
/* script button: outline, foreground colour */
.dpx-lh .button[data-variant=outline][data-size=icon-sm]{color:var(--foreground)}
/* tabs: centred text */
.dpx .dp-mode button{display:inline-flex;align-items:center;justify-content:center;text-align:center}
/* stability */
.dlg-ask{background:color-mix(in oklab,var(--foreground) 5%,transparent);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px;margin-top:8px;font-size:var(--text-sm);gap:8px}
.dlg-ask>span:first-child{flex-basis:100%;line-height:1.5}
.dlg-ask .sp{display:none}

/* ---- tag picker (like ElevenLabs): grouped, bracketed tags, custom tag ---- */
.menu.dp-tags{width:min(348px,calc(100vw - 32px));max-height:min(420px,60vh);overflow:auto;padding:14px;gap:0;display:flex;flex-direction:column;background:var(--popover);right:0;left:auto}
.dp-tg+.dp-tg{margin-top:14px}
.dp-tg small{display:block;font-size:var(--text-sm);color:var(--muted-foreground);margin-bottom:8px}
.dp-tg>div{display:flex;flex-wrap:wrap;gap:8px}
.menu.dp-tags .dp-tg button{display:inline-flex;align-items:center;width:auto!important;height:32px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-md);background:transparent;color:var(--foreground);font-size:var(--text-sm);font-weight:400}
.menu.dp-tags .dp-tg button:hover{background:color-mix(in oklab,var(--aida) 18%,transparent);border-color:color-mix(in oklab,var(--aida) 45%,transparent);color:var(--foreground)}
.dpx-lh .button svg.ti,.dpx-lh .button .ti{width:16px;height:16px}

/* play button: shadcn icon button with a real icon */
.button.dp-play,.dp-play{width:32px;height:32px;padding:0;border-radius:var(--radius-md);display:inline-grid;place-items:center;flex:none}
.dp-play::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E") center/contain no-repeat}
.dp-play.playing::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 5h4v14H6zM14 5h4v14h-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 5h4v14H6zM14 5h4v14h-4z'/%3E%3C/svg%3E")}
.dp-row .dp-play{width:28px;height:28px}
.dp-row .dp-play::before{width:12px;height:12px}
.dp-play.playing{background:var(--foreground);color:var(--background);border-color:var(--foreground)}

/* takes: heading on its own line, play button and waveform below on one line */
.dpx .dp-take{flex-direction:column;gap:10px}
.dpx .dp-take .dp-tb{width:100%}
.dpx .dp-take>.dp-play{display:none}
.dp-wrow{display:flex;align-items:center;gap:10px;margin-top:10px}
.dp-wrow .dp-wv{flex:1;min-width:0;margin:0}
.dpx .dp-tt{flex-wrap:nowrap}

/* recording */
.dpx .dp-rec .dp-tp{font-size:var(--text-sm);line-height:1.5;text-align:center;color:var(--foreground)}
.dpx .dp-rec .dp-ra{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.dpx .dp-rec .dp-rl{display:flex;align-items:center;gap:8px;font-size:var(--text-sm)}
.dpx .dp-rec .button .ti{width:16px;height:16px}
.dpx .dp-rec .button[data-variant=destructive] .ti{fill:currentColor}
.dpx .fld{position:relative}
.dpx-lh .menu-wrap{position:static}
.menu.dp-tags{left:0;right:0;top:44px;width:auto;z-index:20}
.menu.dp-tags>*{flex:none}
.menu.dp-tags{flex-wrap:nowrap;flex-direction:column}

/* round: tags are text drawn as pills; active tags in the picker; takes heading; bottom space */
.dp-ce .dp-tag,.dp-line .dp-tag{margin:0;padding:1px 4px;user-select:text}
.menu.dp-tags .dp-tg button.on{background:color-mix(in oklab,var(--aida) 22%,transparent);border-color:color-mix(in oklab,var(--aida) 55%,transparent);color:var(--foreground)}
.dpx .dp-tt{width:100%;display:flex;align-items:center;gap:8px}
.dpx .dp-tt .cap-acts{display:inline-flex;align-items:center}
.dpx .dp-tt .menu-wrap{display:inline-flex;align-items:center}
.dpx .dp-tt>.button,.dpx .dp-tt>.badge{margin-left:auto;flex:none}
.dpx .dp-tt .info-btn{width:24px;height:24px}
.dpx .del-foot{margin:4px 0 20px}
.dpx{padding-bottom:12px}

/* round: panel keeps its full height (so there is space under Delete), takes as tinted cards, recording buttons same width */
.dp.dpx{flex:none}
.dpx .dp-ra.col{flex-direction:column;width:100%}
.dpx .dp-ra.col .button{width:100%}
.dpx .dp-take{border:0;background:color-mix(in oklab,var(--background) 55%,transparent);box-shadow:none}
.dpx .dp-take.use{border:0;background:color-mix(in oklab,var(--foreground) 10%,transparent);box-shadow:none}
.dpx .dp-take .button[data-variant=outline]{background:transparent}

/* ---- round: takes (same tint, with or without In use), dialogue card, cursors, compact assets ---- */
.dpx .dp-take,.dpx .dp-take.use{background:color-mix(in oklab,var(--foreground) 10%,transparent);border:0;box-shadow:none}
.dp-row,.dark .dp-row{background:color-mix(in oklab,var(--foreground) 10%,transparent);border:0;box-shadow:none}
.dp-row:hover,.dark .dp-row:hover{background:color-mix(in oklab,var(--foreground) 14%,transparent);border:0}
.dp-play:hover:not(.playing){background:var(--accent);border-color:color-mix(in oklab,var(--input) 55%,var(--foreground) 45%);color:var(--foreground)}
.dpx input[type=range],.dpx input[type=range]::-webkit-slider-thumb,.dpx input[type=range]::-webkit-slider-runnable-track{cursor:pointer}

/* assets in the keyframe preview: compact two-column cards, picture on the left */
.fm-side .assets2{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fm-side .a2{border:0;background:color-mix(in oklab,var(--foreground) 6%,transparent);border-radius:var(--radius-lg);position:relative;transition:background-color var(--dur-1)}
.fm-side .a2:hover{background:color-mix(in oklab,var(--foreground) 10%,transparent)}
.fm-side .a2-m{flex-direction:row;align-items:center;gap:10px;padding:6px 28px 6px 6px;border-radius:var(--radius-lg);min-width:0}
.fm-side .a2 .pg-th{width:44px;height:44px;aspect-ratio:1;flex:none;border-radius:var(--radius-md);font-size:16px}
.fm-side .a2 .pg-th>.gi .ti{width:50%;height:auto}
.fm-side .a2 .pg-th svg:not(.ti){width:56%;height:auto}
.fm-side .a2-t{padding:0;min-width:0;gap:0}
.fm-side .a2-t b{font-size:var(--text-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;-webkit-line-clamp:unset}
.fm-side .a2-t small,.fm-side .a2-vp{font-size:var(--text-xs);white-space:nowrap}
.fm-side .a2-x{top:50%;right:4px;transform:translateY(-50%);width:22px;height:22px}
.fm-side .a2:hover .a2-x{opacity:1}
.fm-side .a2.add{grid-column:1/-1;background:none}
.fm-side .a2.add .a2-m{flex-direction:row;justify-content:center;height:32px;padding:0 12px;gap:6px;border:1px solid var(--input);border-radius:var(--radius-md);background:transparent}
.dark .fm-side .a2.add .a2-m{background:color-mix(in oklab,var(--input) 30%,transparent)}
.fm-side .a2.add .a2-m:hover{border-color:color-mix(in oklab,var(--input) 55%,var(--foreground) 45%)}
.fm-side .a2.add .a2-t b{font-size:var(--text-sm);font-weight:500;color:var(--foreground)}
.fm-side .a2:nth-child(3n) .menu.vmenu,.fm-side .a2:nth-child(even) .menu.vmenu{left:auto;right:0}
.fm-side .a2:nth-child(odd) .menu.vmenu{left:0;right:auto}
.fm-side .a2-m{padding-right:8px}
.fm-side .a2-x{background:oklch(0 0 0 / 60%)}
.fm-side .a2.add .a2-m{align-items:center}
.fm-side .a2.add .a2-t{display:inline-flex;align-items:center;padding:0}
.fm-side .a2.add .a2-t b{line-height:1;margin:0;display:inline}
.fm-side .a2 .menu .pg-th{width:32px;height:32px;aspect-ratio:1;border-radius:var(--radius-sm)}
.fm-side .a2 .menu.vmenu{min-width:200px}

/* ---- round: hovers, info button, dialogue card, add asset ---- */
.dpx .dp-take .button[data-variant=outline]:hover:not(:disabled){background:var(--accent);border-color:color-mix(in oklab,var(--input) 55%,var(--foreground) 45%);color:var(--foreground)}
.dpx .fld label .info-btn{width:24px;height:24px;margin-left:2px}
.dpx .fld label .info-btn .ti{width:14px;height:14px}
.dp-row{gap:10px}
.dpr-h{display:flex;align-items:baseline;gap:8px}
.dpr-d{font-size:var(--text-xs);color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.dpr-h .dp-old{margin-left:auto}
.dpr-none{font-size:var(--text-xs);color:var(--muted-foreground)}
.dp-row .dp-wrow{margin-top:0}
.dp-row .button.dp-play{width:32px;height:32px}
.dp-row .dp-play::before{width:14px;height:14px}
.dp-row .dp-line{font-size:var(--text-sm)}
.fm-side .a2.add{background:none}
.fm-side .a2.add .button{width:100%}
.fm-side .a2.add:hover{background:none}

/* ---- round: dialogue card in two lines, shadcn slider ---- */
.dpr-h{align-items:center;min-width:0}
.dpr-h .dp-who{flex:none}
.dpr-h .dpr-d{flex:none}
.dpr-h .dp-line{flex:1;min-width:0;display:block;-webkit-line-clamp:unset;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted-foreground);font-size:var(--text-sm);margin-left:2px}
.dpr-h .dp-tag{padding:0 4px}
.dp-row .dp-old{flex:none;margin-left:0}
.dpx input.slider{accent-color:initial;margin:6px 0 0}
.dpx input.slider::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--primary) var(--v),color-mix(in oklab,var(--foreground) 22%,transparent) var(--v))}
.dpx input.slider::-moz-range-track{background:linear-gradient(to right,var(--primary) var(--v),color-mix(in oklab,var(--foreground) 22%,transparent) var(--v))}

/* ---- round: the text sits between the heading and the waveform ---- */
.dpr-h .dp-line{display:none}
.dp-row>.dp-line{color:var(--foreground);font-size:var(--text-sm);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;margin:0}
.dp-tx{font-size:var(--text-sm);line-height:1.5;color:var(--foreground);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px}
.dp-tx .dp-tag,.dp-row>.dp-line .dp-tag{padding:0 4px}
.dpx .dp-take .dp-wrow{margin-top:8px}
.dp-row{gap:8px}

/* ---- audit round: app buttons and links follow the kit ---- */
/* destructive: the kit's own colours (a softer red in dark) */




/* text links: the kit's link button (underline on hover, neutral colour) */
.lnk{color:var(--foreground);font-size:var(--text-sm);font-weight:500;text-underline-offset:4px;cursor:pointer;background:none;border:0;padding:0}
.lnk:hover{color:var(--foreground);text-decoration:underline}
.scr-edb .ti{width:14px;height:14px}

/* ---- kit components: badges, tabs, checkbox, textareas ---- */
/* the app's own badge classes now sit on the kit .badge: same radius, padding and size everywhere */
.badge.cp-rv,.badge.cp-srv,.badge.flag,.badge.dp-old,.badge.fail-tag,.badge.film-tag,.badge.flm-old,.badge.inuse,.badge.tag{
  border-radius:var(--radius-md);padding:2px 8px;height:auto;font-size:var(--text-xs);font-weight:500;line-height:1.35;gap:4px}
.badge.film-tag,.badge.tag{color:var(--foreground);background:transparent;border:1px solid var(--border)}
.badge.tag.act{background:var(--secondary);color:var(--secondary-foreground);border-color:transparent}
.badge.inuse{background:var(--success-soft);color:var(--success-foreground);border-color:transparent}
.badge.cp-rv,.badge.cp-srv,.badge.flag{background:var(--warning-solid);color:var(--warning-solid-fg);border-color:transparent}
/* tabs inside the dialogue panel fill the card */
.tabs.dp-mode,.fm-side .tabs.dp-mode{display:flex;width:100%;margin:0}
.tabs.dp-mode .tab{flex:1}
/* kit checkbox inside menu rows and the shot list */
.lrow .checkbox{margin:0}
.lc.c-chk{display:flex;align-items:center}
/* textareas in dialogs and the plan: no browser resize handle */
.sm-card textarea,.plan textarea,.pl-ed{resize:none}

/* ======== buttons: the kit's .button everywhere ======== */
.button.on{background:var(--accent);color:var(--foreground)}
.button.warn{background:var(--warning-solid);color:var(--warning-solid-fg);border-color:transparent}
.button.warn:hover:not(:disabled){background:color-mix(in oklab,var(--warning-solid) 90%,transparent)}
.button:disabled{opacity:.5}
/* dialog footers, pre-generation footer and empty states use the default size (36px) */
.sm-f .button,.vr-card .sm-f .button,.pg-ft .button,.board-empty .button,.empty-in .acts .button{--h:36px;padding:0 16px;font-size:var(--text-base)}
.empty-in .acts .button{justify-content:center;flex:none}
.empty-in .acts .menu-wrap .button{flex:1}
.board-tools .button .bi{display:inline-flex}
.board-tools .button .bi .ti{width:16px;height:16px;color:inherit}
.board.narrow .board-tools .button .bl{display:none}
.board.narrow .board-tools .button{padding:0 10px}
.banner .button{width:100%;justify-content:center}
.chat-h .button[data-size^=icon]{margin-left:-6px}
.msg-meta .button[data-size^=icon]{--h:28px}
.top-r .button[data-variant=ghost]{color:var(--muted-foreground)}
.top-r .button[data-variant=ghost]:hover{color:var(--foreground)}
.fm-h .button[data-variant=ghost][data-size^=icon]{color:var(--foreground)}
.tray .button[data-variant=outline]{background:color-mix(in oklab,var(--foreground) 5%,transparent);border-color:color-mix(in oklab,var(--foreground) 14%,transparent)}
.tray .button[data-variant=outline]:hover:not(:disabled){background:color-mix(in oklab,var(--foreground) 11%,transparent)}
.info-pop .button{padding:0 10px}
.blk-insp>.button{margin-top:6px}
.bi-h .button{margin-left:auto}
.vd-acts .button.on{background:var(--ai-soft);color:var(--aida)}
.button[data-variant=destructive]{color:#fff}
.banner .button,.other-warn+.button{background:var(--primary);color:var(--primary-foreground);border-color:transparent}
.banner .button:hover:not(:disabled){background:color-mix(in oklab,var(--primary) 88%,transparent)}
/* "Add asset" in the input grids: the kit's outline button, no dashed tile */
.ip-addc{border:0;background:transparent;min-height:0;padding:0}
.ip-addc:hover{background:transparent}
.ip-addc>.button{width:100%;position:static;inset:auto}

/* icons inside buttons follow the button's text colour (the AIDA sparkle only keeps its colour outside buttons) */
.button .spark,.button .ico,.button .ti{color:inherit}

/* ---- add buttons are kit buttons ---- */
.scene-h .button[data-size^=icon]{color:var(--muted-foreground)}
.scene-h .button[data-size^=icon]:hover{color:var(--foreground)}
.cp-addrow{grid-column:1/-1;justify-self:start;margin:0;padding:0 12px}
.add-row{display:block;padding:12px 14px;border-top:1px solid var(--border);color:inherit;width:auto}
.add-row:hover{background:transparent}
/* the + between keyframes: a round kit button (appears on hover) */
.sp-ins{overflow:visible}
.sp-ins .button{position:relative;z-index:1;opacity:0;transform:scale(.6);transition:opacity var(--dur-1),transform var(--dur-2) var(--ease-spring);pointer-events:none}
.sp-ins:hover .button{opacity:1;transform:none}
.sp-ins .button .ti{width:14px;height:14px}
.sp-ins:hover:before{background:var(--foreground)}
/* the empty tile at the end of the keyframes: a kit outline button filling the tile */
.button.sp-add{height:auto;width:100%;aspect-ratio:var(--aspect-media);flex-direction:column;gap:6px;border-radius:12px;font-weight:500;color:var(--muted-foreground)}
.button.sp-add:hover{color:var(--foreground)}
.button.sp-add .ti{width:20px;height:20px}
.sp-ins .button{flex:none;width:28px;height:28px;padding:0}

/* ======== selection bar, menu rows, composer: kit buttons ======== */
/* menu rows: the kit's ghost button, full width, label left and hint right */
.menu .button{width:100%;height:auto;min-height:32px;padding:6px 8px;justify-content:space-between;gap:8px;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:400;text-align:left;white-space:nowrap;color:var(--popover-foreground)}
.menu .button .lbl{display:inline-flex;align-items:center;gap:8px;min-width:0}
.menu .button small{color:var(--muted-foreground);font-size:var(--text-xs)}
.menu .button.on{background:var(--accent)}
.menu .button.dng{color:var(--destructive-foreground)}
.menu .button.dng:hover:not(:disabled){background:color-mix(in oklab,var(--destructive) 14%,transparent);color:var(--destructive-foreground)}
.menu .button.apk-o{justify-content:flex-start}
.menu .button.apk-o small{margin:0}
.menu.dp-tags .button{width:auto;min-height:32px;padding:0 12px;justify-content:center;font-weight:400;color:var(--foreground)}
.menu.dp-tags .button.on{background:color-mix(in oklab,var(--aida) 22%,transparent);border-color:color-mix(in oklab,var(--aida) 55%,transparent)}
.menu.dp-tags .button:hover:not(:disabled){background:color-mix(in oklab,var(--aida) 18%,transparent);border-color:color-mix(in oklab,var(--aida) 45%,transparent)}
/* selection bar */
/* composer in the AIDA chat: hovers are translucent and blurred, so the gradient keeps showing through */
.composer .button[data-variant=ghost]:hover:not(:disabled),.composer .button[data-variant=outline]:hover:not(:disabled){background:color-mix(in oklab,var(--foreground) 10%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.composer .menu .button:hover:not(:disabled){background:color-mix(in oklab,var(--foreground) 10%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* display popover: tabs fill the popover, labels centred */
.pop-float .tabs{display:flex;width:auto;margin:2px 4px 6px}
.pop-float .tabs .tab{flex:1;justify-content:center;text-align:center}
/* the add-keyframe tile keeps a dashed border on purpose (a place to drop something) */
.button.sp-add{border-style:dashed}

/* ---- round: breadcrumb (kit), soft destructive, shot label, disabled tooltips ---- */
.crumbs{gap:2px}
.crumbs .breadcrumb{gap:6px}
.crumbs .breadcrumb-link.show{height:auto;padding:0;margin:0;background:none}
.breadcrumb .ep{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 6px 0 8px;margin-left:-4px;border-radius:var(--radius-md);overflow:hidden;font-weight:500}
.breadcrumb .ep span{overflow:hidden;text-overflow:ellipsis}
.breadcrumb .ep:hover{background:var(--accent)}
.breadcrumb .ep .ti{color:var(--muted-foreground)}
.fm-h .breadcrumb.title{font-size:var(--text-base);color:var(--muted-foreground)}
.button.del-btn{width:100%;--h:36px}
.button:disabled[data-tip]{pointer-events:auto;cursor:not-allowed}
/* "Shot N" above a group of keyframes: same hover wherever you point at it; no underline, the chevron appears */
.cp-go:hover{text-decoration:none;color:var(--foreground)}
.cp-go:hover .ti{opacity:1;margin-left:0}

/* scene delete dialog: the scene's shots fanned out above the question */
.del-fan{position:relative;height:160px;overflow:hidden;background:color-mix(in oklab,var(--foreground) 4%,transparent);border-bottom:1px solid var(--border)}
.del-card{position:absolute;left:50%;top:50%;width:var(--w);aspect-ratio:var(--aspect-media);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r))}
.del-card .art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.del-card.cover{background-color:var(--cover-base,var(--p-navy))}
.menu.up-dd .button{justify-content:flex-start;width:100%}.menu.up-dd small{margin-left:auto;color:var(--muted-foreground)}

.cc-more{margin-top:6px;color:var(--muted-foreground)}.msg.open .cc-more .chev{transform:rotate(90deg)}
.tr-s,.rchip,.fc-opt{line-height:1.4}.tr-s{padding-block:8px}

/* Add asset: the first menu is as wide as the assets; the second opens on its far side, below or above, wherever there is room (apkPlace) */
.assets2>.apk-pop{position:absolute;left:0;right:0;z-index:8;display:flex;flex-direction:column;gap:6px}
.apk-pop .menu.apk1,.apk-pop .menu.apk2{position:static;width:auto;left:auto;right:auto;top:auto;bottom:auto;overflow:auto}
/* the second menu sits beside the first (left or right, wherever it fits), level with the row you hover, so reaching it never crosses the other rows */
.apk-pop .menu.apk2{position:fixed;z-index:9;width:220px;max-height:min(320px,calc(100vh - 16px))}
.apk-pop .menu.apk1 button,.apk-pop .menu.apk2 button{width:100%}
/* empty keyframe: no border, just the neutral fill; nothing zooms inside it */
.art.empty{box-shadow:none}
.cp-p:hover .cp-img .art.empty{transform:none}
/* the empty keyframe zooms its icon like a picture zooms */
.art.empty .ae{transition:transform var(--dur-4) var(--ease-out)}
.cp-p:hover .cp-img .art.empty .ae{transform:scale(1.2)}
/* the shot's label line (from the first keyframe to the divider's end) opens the shot as a whole */
.cp-l{cursor:pointer}
.cp-p.cp-hot .cp-go{color:var(--foreground)}.cp-p.cp-hot .cp-go .ti{opacity:1;margin-left:0}
.cp-p.cp-hot .cp-l{border-bottom-color:color-mix(in oklab,var(--foreground) 55%,transparent)}
.cp-p.cp-hot:not(.cp-last) .cp-l:after{border-bottom-color:color-mix(in oklab,var(--foreground) 55%,transparent)}
.cp-p.cp-last.cp-hot .cp-l{border-bottom-color:transparent}
.cp-p.cp-last.cp-hot .cp-l:before{border-bottom-color:color-mix(in oklab,var(--foreground) 55%,transparent)}

/* output library filters on one row: type tabs on the left; scene, shot, favorites (icon) and in-use on the right */
.op-toggles{flex-wrap:nowrap;justify-content:flex-end;flex:none}
/* one play button on a video tile: the library's own, above the picture and styled as the picture's play icon (which is hidden) */

.ab-h .op-sw{margin-left:8px}

/* Filter and Display open a kit Popover under their button: only the placement is ours */
.pop-float{position:absolute;z-index:30;top:calc(100% + 4px);left:0;width:auto;min-width:250px;padding:6px;animation:float-in var(--dur-3) var(--ease-spring) both;transform-origin:top right}
.pop-float.flt{min-width:300px}
.pop-float .menu-item .checkbox{pointer-events:none}
.pop-float .menu-item{font-size:var(--text-sm)}
.pop-float .menu-label{font-size:var(--text-xs);padding:6px 8px 4px}
.pop-float .seg{margin:2px 4px 6px}
.pop-float .combobox{margin:2px 4px 8px}

/* output library tiles are the kit's media card: the picture fills the 16:9 frame */
.op-au{display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:6px 10px;background:var(--muted)!important}.op-au>*{height:auto!important}.op-au-p{display:flex!important;align-items:center;gap:6px;width:100%!important}.op-au-p .dp-wv{flex:1}.op-au-l{font-size:11.5px;line-height:1.3;color:var(--ink);text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.op-au .dp-wv{margin:0}
.op-pop .media>.art,.op-pop .media>.vp-img,.op-pop .media>.vp-img>.art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.op-pop .media>.op-au{position:absolute;inset:0;border-radius:0}
.op-pop .media-card{gap:6px}
.op-pop .media .media-play{opacity:1;transform:none}
.op-pop .media.playing .media-play .ti{display:none}.op-pop .media.playing .media-play::before{content:'■';font-size:12px}
.op-pop .media>.vp-prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--white);z-index:var(--z-raised-2)}.op-pop .media.playing>.vp-prog{animation:dpProg var(--d) linear forwards}
.op-pop .media .art .play{display:none}
.op-pop .glass .ti{color:inherit}

/* keyframe selection: the kit Checkbox in the picture's corner, shown on hover or once something is selected */
.cp-img .cp-chk{position:absolute;top:10px;left:10px;z-index:4;opacity:0;transition:opacity var(--dur-2);box-shadow:0 0 0 1px oklch(0 0 0 / 12%),0 1px 4px oklch(0 0 0 / 30%)} /* a shadow keeps the kit checkbox readable on any picture */
.cp-p:hover .cp-img .cp-chk,.board.selecting .cp-img .cp-chk,.cp-img .cp-chk:checked{opacity:1}