/* =========================================================
   AIDA hi-fi · hand-written mirror of the jadu-ui components
   NOT the kit: the kit is @scenarix/jadu-ui. This file imitates it for this plain-HTML prototype,
   so fix a component in jadu-ui first, then copy the change here.
   Mirrors shadcn/ui (new-york, v4) anatomy:
   <Button variant="outline" size="sm">  →  <button class="button" data-variant="outline" data-size="sm">
   Every colour comes from tokens.css. (kit.html was removed; the kit page now lives in jadu-ui.)
   ========================================================= */

/* ---------- base ---------- */
.ui{font-family:var(--font-sans);font-optical-sizing:auto;font-size:var(--text-base);line-height:1.5;color:var(--foreground);background:var(--background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.ui *,.ui *:before,.ui *:after{box-sizing:border-box}
.ui ::selection{background:color-mix(in oklab,var(--p-indigo) 40%,transparent)}
.ui{scrollbar-color:color-mix(in oklab,var(--foreground) 16%,transparent) transparent;scrollbar-width:thin}
.ui :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
.ui :where(input,select,textarea){font:inherit;color:inherit}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--muted-foreground)}
.ti{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:var(--ti-stroke,1.75);stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em}
.focus-ring:focus-visible,.ui :where(button,a,[tabindex]):focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}

/* ---------- Button ---------- */
.button{--h:36px;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 16px;
  border:1px solid transparent;border-radius:var(--radius-md);background:var(--primary);color:var(--primary-foreground);box-shadow:var(--shadow-xs);
  font:500 var(--text-base)/1 var(--font-sans);white-space:nowrap;cursor:pointer;user-select:none;outline:none;text-decoration:none;
  transition:background-color var(--dur-1),color var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-1),opacity var(--dur-1),transform var(--dur-2) var(--ease-out)}
.button .ti{width:16px;height:16px}
.button:has(>.ti:first-child:not(:only-child)){padding-left:12px}
.button:has(>.ti:last-child:not(:only-child)){padding-right:12px}
.button:hover{background:color-mix(in oklab,var(--primary) 90%,transparent)}
.button:active{transform:scale(.97)}
.button:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}
.button:disabled,.button[aria-disabled=true]{opacity:.5;pointer-events:none;box-shadow:none}
.button[data-variant=secondary]{background:var(--secondary);color:var(--secondary-foreground)}
.button[data-variant=secondary]:hover{background:color-mix(in oklab,var(--secondary) 80%,transparent)}
.button[data-variant=outline]{background:var(--background);border-color:var(--border);color:var(--foreground)}
.button[data-variant=outline]:hover{background:var(--accent);color:var(--accent-foreground)}
.dark .button[data-variant=outline]{background:color-mix(in oklab,var(--input) 30%,transparent);border-color:var(--input)}
.dark .button[data-variant=outline]:hover{background:color-mix(in oklab,var(--input) 50%,transparent)}
.button[data-variant=ghost]{background:transparent;color:var(--foreground);box-shadow:none}
.button[data-variant=ghost]:hover{background:var(--accent);color:var(--accent-foreground)}
.dark .button[data-variant=ghost]:hover{background:color-mix(in oklab,var(--accent) 50%,transparent)}
.button[data-variant=ghost][aria-pressed=true],.button[data-variant=ghost].on{background:var(--accent)}
.button[data-variant=destructive]{background:var(--destructive);color:var(--white)}
.button[data-variant=destructive]:hover{background:color-mix(in oklab,var(--destructive) 90%,transparent)}
/* soft destructive: a light destructive tint with destructive text (icon-only trash, "Delete …" in side panels) */
.button[data-variant=destructive-soft]{background:var(--destructive-soft);color:var(--destructive-foreground)}
.button[data-variant=destructive-soft]:hover:not(:disabled){background:color-mix(in oklab,var(--destructive) 20%,var(--destructive-soft))}
.dark .button[data-variant=destructive]{background:color-mix(in oklab,var(--destructive) 60%,transparent)}
.button[data-variant=link]{background:transparent;box-shadow:none;color:var(--primary);padding-left:0;padding-right:0;text-underline-offset:4px}
.button[data-variant=link]:hover{text-decoration:underline;background:transparent}
.button[data-size=xs]{--h:28px;padding:0 10px;gap:6px;font-size:var(--text-xs);border-radius:var(--radius-sm)}
.button[data-size=xs] .ti{width:14px;height:14px}
.button[data-size=sm]{--h:32px;padding:0 12px;gap:6px;font-size:var(--text-sm)}
.button[data-size=lg]{--h:40px;padding:0 24px}
.button[data-size^=icon]{width:var(--h);padding:0}
.button[data-size=icon-xs]{--h:28px;border-radius:var(--radius-sm)}.button[data-size=icon-xs] .ti{width:14px;height:14px}
.button[data-size=icon-sm]{--h:32px}
.button[data-size=icon-lg]{--h:40px}
.button[data-shape=pill]{border-radius:var(--radius-pill)}

/* ---------- Input / Textarea / Select ---------- */
.input{height:36px;width:100%;min-width:0;padding:4px 12px;border:1px solid var(--input);border-radius:var(--radius-md);background:transparent;color:var(--foreground);
  font:var(--text-base)/1.5 var(--font-sans);box-shadow:var(--shadow-xs);outline:none;transition:border-color var(--dur-1),box-shadow var(--dur-1),background-color var(--dur-1)}
.dark .input{background:color-mix(in oklab,var(--input) 30%,transparent)}
.input::placeholder{color:var(--muted-foreground)}
.input:focus-visible,.input:focus{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}
.input[aria-invalid=true]{border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in oklab,var(--destructive) 20%,transparent)}
.input:disabled{opacity:.5;cursor:not-allowed}
textarea.input{height:auto;min-height:64px;padding:8px 12px;resize:vertical;field-sizing:content}
.input[data-size=sm]{height:32px;font-size:var(--text-sm)}
.select{position:relative;display:inline-flex;width:100%}
.select>select{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer}
.select:after{content:"";position:absolute;right:10px;top:50%;width:16px;height:16px;margin-top:-8px;pointer-events:none;background:var(--muted-foreground);
  -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='M6 9l6 6l6 -6'/%3E%3C/svg%3E") center/16px 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='M6 9l6 6l6 -6'/%3E%3C/svg%3E") center/16px no-repeat}
.select option{background:var(--popover);color:var(--popover-foreground)}
.label{display:flex;align-items:center;gap:8px;font-size:var(--text-base);font-weight:500;line-height:1;user-select:none}
.field{display:grid;gap:8px}.field .hint{font-size:var(--text-sm);color:var(--muted-foreground)}
.input-group{position:relative;display:flex;align-items:center}.input-group>.ti{position:absolute;left:12px;width:16px;height:16px;color:var(--muted-foreground);pointer-events:none}.input-group>.input{padding-left:36px}

/* select trigger + list: a select that opens a checkable list (multi-pick allowed, "All …" first) */
.select-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:36px;padding:0 10px 0 12px;border:1px solid var(--input);border-radius:var(--radius-md);background:color-mix(in oklab,var(--input) 30%,transparent);color:var(--muted-foreground);font:var(--text-sm)/1 var(--font-sans);cursor:pointer;transition:border-color var(--dur-1),background-color var(--dur-1)}
.select-trigger[data-size=sm]{height:32px}
.select-trigger:hover{background:color-mix(in oklab,var(--input) 50%,transparent)}
.select-trigger[data-has]{color:var(--foreground);font-weight:500}
.select-trigger[aria-expanded=true]{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}
.select-trigger>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-trigger .ti{width:14px;height:14px;flex:none;color:var(--muted-foreground)}
.select-list{min-width:240px;max-height:240px;overflow:auto;padding:4px;display:flex;flex-direction:column;background:var(--popover);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}
.select-list button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:var(--radius-sm);text-align:left;font-size:var(--text-sm);color:var(--muted-foreground);background:none}
.select-list button:hover{background:var(--accent);color:var(--foreground)}.select-list button[aria-selected=true]{color:var(--foreground)}
.select-list .ck{flex:none;width:16px;display:inline-flex}.select-list .ck .ti{width:14px;height:14px}
.select-list b{font-weight:500;white-space:nowrap}.select-list small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs);color:var(--muted-foreground)}

/* ---------- Badge ---------- */
.badge{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:2px 8px;border:1px solid transparent;border-radius:var(--radius-md);
  background:var(--primary);color:var(--primary-foreground);font:500 var(--text-xs)/1.35 var(--font-sans);white-space:nowrap;width:fit-content}
.badge .ti{width:12px;height:12px;--ti-stroke:2.2}.badge[data-variant=warning] .ti{--ti-stroke:2.5}

.badge[data-variant=secondary]{background:var(--secondary);color:var(--secondary-foreground)}
.badge[data-variant=outline]{background:transparent;border-color:var(--border);color:var(--foreground)}
.badge[data-variant=destructive]{background:var(--destructive-soft);color:var(--destructive-foreground)}
.badge[data-variant=success]{background:var(--success-soft);color:var(--success-foreground)}
.badge[data-variant=warning]{background:var(--warning-solid);color:var(--warning-solid-fg);font-weight:600}
.badge[data-variant=info]{background:var(--info-soft);color:var(--info-foreground)}
.badge[data-variant=aida]{background:var(--aida-soft);color:var(--aida);border-color:var(--aida-border)}
/* camera size (CameraSizeBadge): tight shots warm, wide shots cool; the colours are the --cam-* tokens */
.badge[data-cam]{background:var(--cam-bg);color:var(--cam-fg);font-weight:600;font-variant-numeric:tabular-nums}
.badge[data-cam=ECU]{--cam-fg:var(--cam-ecu);--cam-bg:var(--cam-ecu-bg)}
.badge[data-cam=CU]{--cam-fg:var(--cam-cu);--cam-bg:var(--cam-cu-bg)}
.badge[data-cam=MCU]{--cam-fg:var(--cam-mcu);--cam-bg:var(--cam-mcu-bg)}
.badge[data-cam=MS]{--cam-fg:var(--cam-ms);--cam-bg:var(--cam-ms-bg)}
.badge[data-cam=MWS]{--cam-fg:var(--cam-mws);--cam-bg:var(--cam-mws-bg)}
.badge[data-cam=WS]{--cam-fg:var(--cam-ws);--cam-bg:var(--cam-ws-bg)}
.badge[data-cam=EWS]{--cam-fg:var(--cam-ews);--cam-bg:var(--cam-ews-bg)}
/* a system shot type (Master shot) carries a filled star */
.badge[data-sys] .ti{color:var(--warning-solid);fill:currentColor}
.badge[data-shape=pill]{border-radius:var(--radius-pill)}
.badge[data-variant=glass]{background:var(--glass-badge-bg);color:var(--white);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--radius-pill);font-size:var(--text-badge-glass)}

/* ---------- Alert (something to review) ---------- */
.alert{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:var(--radius-surface);background:color-mix(in oklab,var(--background) 70%,transparent);border:1px solid var(--border);color:var(--foreground)}
.alert-title{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);font-weight:600}.alert-title .ti{width:16px;height:16px;flex:none}
.alert-description{font-size:var(--text-sm);color:var(--muted-foreground)}
.alert[data-variant=warning]{border-color:var(--warning-solid)}.alert[data-variant=warning] .alert-title{color:var(--warning-text)}
.alert[data-variant=destructive]{border-color:var(--destructive)}.alert[data-variant=destructive] .alert-title{color:var(--destructive)}
.alert[data-variant=aida]{border-color:var(--aida-border);background:var(--aida-soft)}.alert[data-variant=aida] .alert-title{color:var(--aida)}

/* ---------- Empty state ---------- */
.empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 24px;text-align:center;border-radius:var(--radius-xl);background:color-mix(in oklab,var(--foreground) 4%,transparent)}
.empty h3{margin:0;font-size:var(--text-base);font-weight:600}.empty p{margin:0;font-size:var(--text-sm);color:var(--muted-foreground)}
.empty .row{margin-top:10px;justify-content:center}

/* ---------- Highlighter (the line you came for, in the script) ---------- */
mark.hl{color:var(--highlight-fg);background-image:linear-gradient(var(--highlight),var(--highlight));background-repeat:no-repeat;background-size:100% 100%;padding:.12em .4em;margin:0 -.4em;border-radius:var(--radius-mark);-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:mark-sweep 700ms var(--ease-out) 250ms both}
@keyframes mark-sweep{from{background-size:0% 100%}}
.dot{width:6px;height:6px;border-radius:var(--radius-circle);background:currentColor;flex:none}

/* ---------- Card ---------- */
.card{display:flex;flex-direction:column;gap:24px;padding:24px 0;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}
.card-header{display:grid;gap:6px;padding:0 24px}.card-title{font-weight:600;line-height:1}.card-description{color:var(--muted-foreground);font-size:var(--text-base)}
.card-content{padding:0 24px}.card-footer{display:flex;align-items:center;gap:8px;padding:0 24px}
.card[data-size=sm]{gap:12px;padding:16px 0}.card[data-size=sm]>*{padding-left:16px;padding-right:16px}

/* media card (Suno-like): the image is the card */
.media-card{display:flex;flex-direction:column;gap:10px;min-width:0;cursor:pointer;color:inherit;text-align:left}
.media{position:relative;aspect-ratio:var(--aspect-media);border-radius:var(--radius-media);overflow:hidden;background:var(--media);isolation:isolate}
.media>img,.media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-4) var(--ease-out),filter var(--dur-3)}
.media:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--media-ring);pointer-events:none}
.media-card:hover .media>img{transform:scale(1.035)}
.media .media-tl,.media .media-br,.media .media-bl,.media .media-tr{position:absolute;z-index:var(--z-raised-2);display:flex;gap:6px;align-items:center}
.media .media-tl{top:10px;left:10px}.media .media-tr{top:10px;right:10px}.media .media-bl{bottom:10px;left:10px}.media .media-br{bottom:10px;right:10px}
.media .media-play{position:absolute;z-index:var(--z-raised-2);left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:var(--radius-circle);display:grid;place-items:center;
  background:var(--frost);color:var(--white);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);opacity:0;transform:scale(.85);
  transition:opacity var(--dur-2),transform var(--dur-3) var(--ease-spring-pop)}
.media .media-play .ti{width:18px;height:18px;margin-left:2px}
/* frosted round action on media (same material as the play button): favorite, more… */
.media-fab{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-circle);background:var(--frost);color:var(--white);
  backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);opacity:0;transform:scale(.85);
  transition:opacity var(--dur-2),transform var(--dur-3) var(--ease-spring-pop),background-color var(--dur-1)}
.media-fab .ti{width:15px;height:15px}.media-fab:hover{background:var(--frost-hover)}
.media-card:hover .media-fab,.media-fab[aria-pressed=true]{opacity:1;transform:none}
.media-card:hover .media-play{opacity:1;transform:none}
.media-shade:before{content:"";position:absolute;inset:auto 0 0 0;height:55%;z-index:var(--z-raised);background:linear-gradient(to top,var(--media-shade),transparent);pointer-events:none}
.media-card[aria-selected=true] .media,.media.is-selected{outline:2px solid var(--foreground);outline-offset:3px}
.media-title{font-weight:500;font-size:var(--text-base);line-height:1.3}.media-meta{font-size:var(--text-sm);color:var(--muted-foreground);display:flex;gap:6px;align-items:center}
.glass{background:var(--glass-bg);color:var(--white);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border-radius:var(--radius-pill);padding:2px 8px;font-size:var(--text-xs);font-weight:500;display:inline-flex;gap:4px;align-items:center}
.glass .ti{width:12px;height:12px}

/* ---------- Tabs / Toggle group ---------- */
.tabs{display:inline-flex;align-items:center;height:36px;padding:3px;gap:0;background:var(--muted);color:var(--muted-foreground);border-radius:var(--radius-tabs);width:fit-content}
.dark .tabs{background:var(--tabs-bg)}
.tab{position:relative;height:100%;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;border:0;border-radius:var(--radius);
  background:none;color:inherit;font:500 var(--text-base)/1 var(--font-sans);white-space:nowrap;cursor:pointer;transition:color var(--dur-2)}
.tab .ti{width:16px;height:16px}
.tab>*{position:relative;z-index:var(--z-raised)}
.tab[aria-selected=true]{color:var(--foreground)}
.tab:hover{color:var(--foreground)}
/* the sliding thumb: one element per tabs, rendered inside the selected tab, morphs between tabs (motion.js) */
.tab-thumb{position:absolute;inset:0;z-index:var(--z-base)!important;border-radius:inherit;background:var(--background);box-shadow:var(--shadow-sm);pointer-events:none}
.dark .tab-thumb{background:var(--tab-thumb-bg);box-shadow:none}
.tabs[data-size=sm]{height:32px}.tabs[data-size=sm] .tab{font-size:var(--text-sm);padding:0 8px}
/* line variant (ElevenLabs header tabs) */
.tabs[data-variant=line]{background:none;padding:0;height:40px;gap:20px;border-radius:0}
.tabs[data-variant=line] .tab{padding:0 2px;border:0;flex:none}
.tabs[data-variant=line] .tab-thumb{inset:auto 0 -1px 0;height:2px;border-radius:var(--radius-2xs);background:var(--foreground);box-shadow:none}
.toggle-group{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--border);border-radius:var(--radius-md)}
.toggle{display:inline-grid;place-items:center;height:30px;min-width:30px;padding:0 8px;border-radius:var(--radius-sm);color:var(--muted-foreground);transition:background var(--dur-1),color var(--dur-1)}
.toggle:hover{background:var(--muted);color:var(--foreground)}.toggle[aria-pressed=true]{background:var(--accent);color:var(--accent-foreground)}
.toggle .ti{width:16px;height:16px}

/* ---------- Switch / Checkbox / Radio / Choice ---------- */
.switch{position:relative;flex:none;width:32px;height:18px;border-radius:var(--radius-pill);border:1px solid transparent;background:var(--input);box-shadow:var(--shadow-xs);cursor:pointer;transition:background-color var(--dur-2)}
.dark .switch{background:color-mix(in oklab,var(--input) 80%,transparent)}
.switch:after{content:"";position:absolute;top:0;left:0;width:16px;height:16px;border-radius:var(--radius-circle);background:var(--background);transition:transform var(--dur-3) var(--ease-spring),background-color var(--dur-2)}
.dark .switch:after{background:var(--foreground)}
.switch[aria-checked=true]{background:var(--primary)}
.switch[aria-checked=true]:after{transform:translateX(14px)}
.dark .switch[aria-checked=true]:after{background:var(--primary-foreground)}
.switch:active:after{width:19px}.switch[aria-checked=true]:active:after{transform:translateX(11px)}
input.checkbox,input.radio{appearance:none;-webkit-appearance:none;margin:0;flex:none;width:16px;height:16px;border:1px solid var(--input);border-radius:var(--radius-xs);background:transparent;box-shadow:var(--shadow-xs);
  display:inline-grid;place-items:center;cursor:pointer;transition:background-color var(--dur-1),border-color var(--dur-1)}
.dark input.checkbox,.dark input.radio{background:color-mix(in oklab,var(--input) 30%,transparent)}
input.radio{border-radius:var(--radius-circle)}
input.checkbox:checked{background:var(--primary);border-color:var(--primary)}
input.checkbox:checked:after{content:"";width:12px;height:12px;background:var(--primary-foreground);
  -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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/12px 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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/12px no-repeat;
  animation:check-in var(--dur-2) var(--ease-spring-pop)}
input.radio:checked{border-color:var(--primary)}
input.radio:checked:after{content:"";width:8px;height:8px;border-radius:var(--radius-circle);background:var(--primary);animation:check-in var(--dur-2) var(--ease-spring-pop)}
@keyframes check-in{from{transform:scale(.4);opacity:0}}
/* choice: a selectable card (AIDA's options, radio or checkbox inside) */
.choice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-lg);background:transparent;cursor:pointer;text-align:left;
  transition:border-color var(--dur-2),background-color var(--dur-2),box-shadow var(--dur-2)}
.choice:hover{background:color-mix(in oklab,var(--accent) 60%,transparent)}
.choice:has(input:checked),.choice[aria-checked=true]{border-color:var(--foreground);background:color-mix(in oklab,var(--accent) 50%,transparent)}
.choices{display:flex;flex-direction:column;gap:8px}.choice input{margin-top:2px}.choice-t{font-weight:500}.choice-d{font-size:var(--text-sm);color:var(--muted-foreground);margin-top:2px}

/* ---------- Slider / Progress / Skeleton ---------- */
input.slider{--v:50%;appearance:none;-webkit-appearance:none;width:100%;height:16px;background:transparent;cursor:pointer;margin:0}
input.slider::-webkit-slider-runnable-track{height:6px;border-radius:var(--radius-pill);background:linear-gradient(to right,var(--primary) var(--v),var(--muted) var(--v))}
input.slider::-moz-range-track{height:6px;border-radius:var(--radius-pill);background:linear-gradient(to right,var(--primary) var(--v),var(--muted) var(--v))}
input.slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;border-radius:var(--radius-circle);background:var(--white);border:1px solid var(--primary);box-shadow:var(--shadow-sm);transition:box-shadow var(--dur-1)}
input.slider::-moz-range-thumb{width:16px;height:16px;border-radius:var(--radius-circle);background:var(--white);border:1px solid var(--primary);box-shadow:var(--shadow-sm)}
input.slider:hover::-webkit-slider-thumb,input.slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in oklab,var(--ring) 50%,transparent)}
.progress{position:relative;height:6px;border-radius:var(--radius-pill);background:color-mix(in oklab,var(--primary) 20%,transparent);overflow:hidden}
.progress>i{display:block;height:100%;width:var(--v,40%);border-radius:inherit;background:var(--primary);transition:width var(--dur-4) var(--ease-out)}
.progress[data-variant=aida]{background:color-mix(in oklab,var(--p-indigo) 22%,transparent)}
.progress[data-variant=aida]>i{background:linear-gradient(90deg,var(--p-cobalt),var(--p-indigo),color-mix(in oklab,var(--p-sky) 60%,var(--p-indigo)),var(--p-cobalt));background-size:200% 100%;animation:sheen 4s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}
.skeleton{background:var(--accent);border-radius:var(--radius-md);animation:pulse 2s var(--ease-in-out) infinite}
@keyframes pulse{50%{opacity:.5}}
.spinner{width:16px;height:16px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Avatar / Kbd / Separator ---------- */
.avatar{position:relative;flex:none;width:32px;height:32px;border-radius:var(--radius-circle);overflow:hidden;display:inline-grid;place-items:center;background:var(--muted);color:var(--foreground);font:500 var(--text-xs)/1 var(--font-sans)}
.avatar>img{width:100%;height:100%;object-fit:cover}
.avatar[data-size=sm]{width:24px;height:24px;font-size:var(--text-avatar-sm)}.avatar[data-size=xs]{width:20px;height:20px;font-size:var(--text-avatar-xs)}
.avatar-stack{display:inline-flex}.avatar-stack>.avatar{box-shadow:0 0 0 2px var(--background)}.avatar-stack>.avatar+.avatar{margin-left:-8px}
.kbd{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:20px;min-width:20px;padding:0 5px;border-radius:var(--radius-xs);background:var(--muted);color:var(--muted-foreground);font:500 var(--text-2xs)/1 var(--font-sans);pointer-events:none;user-select:none}
.kbd .ti{width:12px;height:12px}
.separator{flex:none;height:1px;width:100%;background:var(--border)}.separator[data-orientation=vertical]{width:1px;height:auto;align-self:stretch}

/* ---------- Floating layers: menu, popover, tooltip ---------- */
.menu-content{min-width:8rem;padding:4px;background:var(--popover);color:var(--popover-foreground);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);overflow:hidden auto}
.menu-item{position:relative;display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:var(--radius-sm);background:none;color:inherit;font:var(--text-base)/1.4 var(--font-sans);text-align:left;cursor:default;user-select:none;outline:none}
.menu-item .ti{width:16px;height:16px;color:var(--muted-foreground)}
.menu-item:hover,.menu-item:focus-visible,.menu-item[data-highlighted]{background:var(--accent);color:var(--accent-foreground)}
.menu-item[data-variant=destructive]{color:var(--destructive)}.menu-item[data-variant=destructive] .ti{color:inherit}
.menu-item[data-variant=destructive]:hover{background:color-mix(in oklab,var(--destructive) 12%,transparent)}
.menu-item:disabled,.menu-item[aria-disabled=true]{opacity:.5;pointer-events:none}
.menu-label{padding:6px 8px;font-size:var(--text-sm);font-weight:500;color:var(--muted-foreground)}
.menu-sep{height:1px;margin:4px -4px;background:var(--border)}
.menu-shortcut{margin-left:auto;font-size:var(--text-xs);letter-spacing:.08em;color:var(--muted-foreground)}
.menu-check{margin-left:auto}
.popover{width:288px;padding:16px;background:color-mix(in oklab,var(--popover) 94%,transparent);color:var(--popover-foreground);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
.popover[data-size=lg]{width:auto;border-radius:var(--radius-surface)}
/* note: a backdrop-filter on an ancestor (e.g. a sticky bar) stops the popover from blurring what is behind it */
.tooltip{padding:6px 10px;border-radius:var(--radius-md);background:var(--foreground);color:var(--background);font:500 var(--text-xs)/1.35 var(--font-sans);white-space:nowrap;box-shadow:var(--shadow-md)}
/* entering from where they live: the origin is set by the placement */
.float-in{animation:float-in var(--dur-3) var(--ease-spring) both;transform-origin:var(--origin,top center)}
@keyframes float-in{from{opacity:0;transform:translateY(var(--from-y,-4px)) scale(.96)}}
.float-out{animation:float-out var(--dur-2) var(--ease-in) both;transform-origin:var(--origin,top center)}
@keyframes float-out{to{opacity:0;transform:translateY(var(--from-y,-2px)) scale(.98)}}

/* ---------- Combobox: chips and a text input in a field, opening a menu-content list ---------- */
.combobox{position:relative}
.combobox-field{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-height:34px;padding:3px 6px;border:1px solid var(--input);border-radius:var(--radius-md);background:color-mix(in oklab,var(--input) 25%,transparent);cursor:text}
.combobox.open .combobox-field{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}
.combobox-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 2px 1px 9px;border-radius:var(--radius-pill);background:var(--secondary);color:var(--secondary-foreground);font:500 var(--text-xs)/1.4 var(--font-sans)}
.combobox-chip .button{--h:18px;width:18px;padding:0;border-radius:var(--radius-pill)}.combobox-chip .button .ti{width:12px;height:12px}
.combobox-input{flex:1;min-width:80px;border:0;outline:0;background:transparent;color:inherit;font:var(--text-sm)/1.4 var(--font-sans)}
.combobox-input::placeholder{color:var(--muted-foreground)}
.combobox-list{margin-top:4px;max-height:170px}

/* ---------- Table (shadcn): rows divided by a hairline, a quiet hover, a selected tint ---------- */
.table{width:100%;font-size:var(--text-sm)}
.table-row{border-bottom:1px solid var(--border);transition:background-color var(--dur-1)}
.table-row:hover{background:color-mix(in oklab,var(--muted) 50%,transparent)}
.table-row[data-state=selected]{background:var(--muted)}
.table-head{padding:8px;height:40px;display:flex;align-items:center;font-weight:500;color:var(--foreground);text-align:left;white-space:nowrap}
.table-cell{padding:8px;vertical-align:middle;white-space:nowrap}

/* ---------- Dialog ---------- */
.dialog-overlay{position:fixed;inset:0;z-index:var(--z-dialog);display:grid;place-items:center;padding:24px;background:var(--overlay);backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1)}
.dialog{position:relative;display:flex;flex-direction:column;gap:16px;width:100%;max-width:512px;max-height:100%;padding:24px;background:var(--background);color:var(--foreground);
  border:1px solid var(--border);border-radius:var(--radius-dialog);box-shadow:var(--shadow-xl);overflow:auto}
.dark .dialog{background:var(--card)}
.dialog-header{display:flex;align-items:center;gap:12px}.dialog-title{font-size:var(--text-lg);font-weight:600;line-height:1.2;letter-spacing:-.01em}
.dialog-description{font-size:var(--text-base);color:var(--muted-foreground)}
.dialog-footer{display:flex;justify-content:flex-end;gap:8px}
.dialog-close{position:absolute;top:16px;right:16px}
.icon-tile{flex:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--background);box-shadow:var(--shadow-xs)}
.icon-tile .ti{width:20px;height:20px}
.dialog-in{animation:dialog-in var(--dur-4) var(--ease-spring) both}@keyframes dialog-in{from{opacity:0;transform:translateY(8px) scale(.97)}}
.overlay-in{animation:fade-in var(--dur-3) var(--ease-out) both}@keyframes fade-in{from{opacity:0}}

/* ---------- Toast (sonner-like) ---------- */
.toast{display:flex;align-items:center;gap:12px;min-width:300px;max-width:420px;padding:12px 12px 12px 16px;background:var(--popover);color:var(--popover-foreground);
  border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);font-size:var(--text-base)}
.toast .ti{width:16px;height:16px}.toast>span{flex:1}
.toast-in{animation:toast-in var(--dur-4) var(--ease-spring) both}@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.96)}}

/* =========================================================
   AIDA patterns
   ========================================================= */

/* orb (canvas drawn by orb.js) */
.orb{position:relative;display:inline-block;flex:none;width:var(--s,24px);height:var(--s,24px);vertical-align:middle}
.orb>canvas{position:absolute;inset:0;width:100%;height:100%}

/* AIDA's presence: a soft blurred gradient behind the composer (where you talk to AIDA). Static. The header has no gradient and no orb. */
.aida-presence{position:relative;isolation:isolate}
.aida-presence:before{content:"";position:absolute;z-index:var(--z-below);inset:-40px -20px auto -20px;height:220px;pointer-events:none;filter:blur(28px);
  background:radial-gradient(40% 60% at 25% 40%,color-mix(in oklab,var(--p-sky) var(--presence-a),transparent),transparent 70%),
             radial-gradient(45% 60% at 70% 30%,color-mix(in oklab,var(--p-violet) var(--presence-a),transparent),transparent 70%),
             radial-gradient(30% 50% at 50% 60%,color-mix(in oklab,var(--p-indigo) var(--presence-a),transparent),transparent 70%);
  transition:opacity var(--dur-4)}
.aida-presence[data-where=composer]{--presence-a:40%}
.aida-presence[data-where=composer]:before{inset:auto -40px -70px -40px;height:250px}

/* AIDA's wash: only where AIDA asks you something (the tray on the composer). Drifts slowly. */
@property --wx{syntax:"<percentage>";inherits:false;initial-value:30%}
.aida-wash{position:relative;isolation:isolate;border:1px solid color-mix(in oklab,var(--p-indigo) 28%,var(--border))}
.aida-wash>.wash{position:absolute;inset:0;z-index:var(--z-below);overflow:hidden;border-radius:inherit;pointer-events:none}
.aida-wash>.wash:before{content:"";position:absolute;inset:-30% -10%;filter:blur(32px);opacity:var(--wash-o);animation:wash-drift 16s var(--ease-in-out) infinite alternate;
  background:radial-gradient(38% 55% at var(--wx) 35%,var(--p-sky),transparent 75%),
             radial-gradient(42% 60% at calc(100% - var(--wx)) 30%,var(--p-indigo),transparent 75%),
             radial-gradient(35% 50% at 50% 75%,var(--p-cobalt),transparent 75%)}
.aida-wash>.wash:after{content:"";position:absolute;inset:0;opacity:var(--grain-o);mix-blend-mode:overlay;background-image:var(--grain)}
@keyframes wash-drift{to{--wx:62%}}

/* covers: seeded blurred gradients for things without images (aida.js › cover()), neighbouring colours only */
.cover{position:relative;overflow:hidden;isolation:isolate;background:var(--cover-base,var(--p-navy))}
.cover:before{content:"";position:absolute;inset:-20%;z-index:var(--z-below);background:var(--cover);filter:blur(18px)}
.cover:after,.grain:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grain-o);mix-blend-mode:overlay;background-image:var(--grain)}

/* generating: the frame AIDA is making breathes, slowly, in neighbouring blues */
@property --gx{syntax:"<percentage>";inherits:false;initial-value:25%}
@property --gy{syntax:"<percentage>";inherits:false;initial-value:30%}
.generating{position:relative;overflow:hidden;isolation:isolate;background:var(--p-navy)}
.generating:before{content:"";position:absolute;inset:-25%;z-index:var(--z-below);filter:blur(30px);
  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}
.generating:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grain-o);mix-blend-mode:overlay;background-image:var(--grain)}
@keyframes gen-drift{0%{--gx:25%;--gy:30%}50%{--gx:50%;--gy:65%}100%{--gx:70%;--gy:35%}}
.generating .gen-label{position:absolute;left:12px;bottom:10px;z-index:var(--z-raised);display:flex;align-items:center;gap:8px;color:var(--white);font-size:var(--text-xs);font-weight:500;text-shadow:var(--media-text-shadow)}
/* reveal: the generated image fades in from the blur */
.reveal{animation:reveal 900ms var(--ease-out) both}@keyframes reveal{from{opacity:0;filter:blur(18px) saturate(1.6);transform:scale(1.04)}}

/* chat */
.msg-user{--u:var(--secondary);align-self:flex-end;max-width:88%;display:flex;flex-direction:column;align-items:flex-end}
.msg-user .msg-row{display:flex;align-items:flex-end;gap:8px;min-width:0}
.msg-user .bubble{padding:8px 14px;border-radius:var(--radius-bubble) var(--radius-bubble) var(--radius-bubble-tail) var(--radius-bubble);background:color-mix(in oklab,var(--u) 70%,var(--secondary));color:var(--foreground);font-size:var(--text-base);line-height:1.55}
.msg-user .avatar{background:var(--u);color:var(--foreground);margin-bottom:2px}
.msg-aida{display:flex;flex-direction:column;max-width:100%;font-size:var(--text-base);line-height:1.55}
/* the orb only while AIDA is thinking */
.thinking{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);color:var(--muted-foreground)}
/* under every message a 28px row is reserved: copy · good · bad · time for AIDA, time only for people; shown on the last message, on hover for older ones */
.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-aida:hover .msg-meta,.msg-user:hover .msg-meta,.msg-meta[data-last],.msg-meta:focus-within{opacity:1}
.msg-meta .button[data-size=icon-xs]{color:var(--muted-foreground)}.msg-meta .button[aria-pressed=true]{color:var(--foreground);background:var(--accent)}
.msg-meta time{margin-left:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.msg-user .msg-meta{height:22px;padding-right:28px}
.msg-aida p{margin:0 0 8px}.msg-aida p:last-child{margin:0}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-pill);background:transparent;color:var(--foreground);
  font:500 var(--text-sm)/1 var(--font-sans);white-space:nowrap;cursor:pointer;transition:background-color var(--dur-1),border-color var(--dur-1),transform var(--dur-2) var(--ease-out)}
.chip:hover{background:var(--accent);border-color:var(--input)}.chip:active{transform:scale(.97)}
.chip .ti{width:14px;height:14px;color:var(--muted-foreground)}
.chip[aria-pressed=true]{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}.chip[aria-pressed=true] .ti{color:inherit}

/* the composer (input) and AIDA's tray on top of it */
.composer{position:relative;z-index:var(--z-raised);display:flex;flex-direction:column;gap:8px;padding:10px;background:color-mix(in oklab,var(--sidebar) 58%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--input);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md)}
.composer:focus-within{border-color:color-mix(in oklab,var(--ring) 70%,var(--input))}
.composer>textarea{width:100%;min-height:44px;max-height:180px;padding:4px 6px;border:0;outline:0;resize:none;background:transparent;color:var(--foreground);font:var(--text-base)/1.5 var(--font-sans);field-sizing:content}
.composer>textarea::placeholder{color:var(--muted-foreground)}
/* the row under the input (AidaUI.composerRow): + · scene · mic · send. Every control is a .button; translucent hovers so the gradient shows through */
.composer-row{display:flex;align-items:center;gap:4px}.composer-row .sp{flex:1}
.composer-row .button:not(.send):hover:not(:disabled),.composer-row .button.on{background:color-mix(in oklab,var(--foreground) 10%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.composer-row .plus,.composer-row .mic{border-radius:var(--radius-pill);color:var(--muted-foreground);transition:background-color var(--dur-1),color var(--dur-1),transform var(--dur-3) var(--ease-spring)}
.composer-row .plus:hover,.composer-row .mic:hover,.composer-row .plus.on{color:var(--foreground)}
.composer-row .plus.on{transform:rotate(45deg)}
.composer-row .scene-pick{flex:none;padding:0 8px 0 10px;border-radius:var(--radius-pill);background:transparent;border-color:color-mix(in oklab,var(--foreground) 16%,transparent);color:var(--muted-foreground)}
.composer-row .scene-pick:hover,.composer-row .scene-pick.on{color:var(--foreground)}
.composer-row .scene-pick.ctx{padding:0 10px;cursor:default;pointer-events:auto}.composer-row .scene-pick.ctx:hover{background:transparent;color:var(--muted-foreground)}
.composer-row .send{flex:none;transition:opacity var(--dur-1),transform var(--dur-2) var(--ease-out)}
.composer-row .send:disabled{opacity:.3}.composer-row .send:not(:disabled):active{transform:scale(.92)}.composer-row .send .ti{width:16px;height:16px;--ti-stroke:2.2}
.tray{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--radius-xl);background:color-mix(in oklab,var(--sidebar) 70%,var(--background))}
.tray.in{animation:tray-in var(--dur-4) var(--ease-spring) both}@keyframes tray-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
.tray .chip{height:auto;padding:10px 14px;border-radius:var(--radius-lg);white-space:normal;text-align:left;line-height:1.45;font-weight:400}
.tray .chip,.tray .choice,.tray .button[data-variant=outline],.aida-card .button[data-variant=outline]{background:color-mix(in oklab,var(--foreground) 5%,transparent);border-color:color-mix(in oklab,var(--foreground) 14%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tray .chip:hover,.tray .choice:hover{background:color-mix(in oklab,var(--foreground) 11%,transparent);border-color:color-mix(in oklab,var(--foreground) 26%,transparent)}
.tray .choice:has(:checked){background:color-mix(in oklab,var(--foreground) 9%,transparent);border-color:var(--foreground)}
.tray .actions{display:flex;gap:6px}
.tray-q{display:flex;gap:10px;align-items:flex-start;font-weight:500;line-height:1.45}
.tray-chips{display:flex;flex-wrap:wrap;gap:6px}

/* AIDA's card (scene brief, new beat, arc): the content only, straight on the wash. AIDA's question is a chat message above it.
   data-state: open (on the composer, fields editable) · working (AIDA is changing it: the orb shows, nothing else moves) · confirmed (in the chat, still wash, no orb) */
.aida-card{--c:var(--p-sky);--soft:color-mix(in oklab,var(--foreground) 72%,transparent);display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:var(--radius-xl);background:color-mix(in oklab,var(--sidebar) 70%,var(--background));font-size:var(--text-base);line-height:1.45}
.aida-card.in{animation:tray-in var(--dur-4) var(--ease-spring) both}
.aida-card[data-state=confirmed]>.wash:before{animation:none}
.aida-card-h{display:flex;align-items:center;gap:8px;min-height:20px;font-size:var(--text-2xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.aida-card-h:before{content:"";width:7px;height:7px;border-radius:var(--radius-circle);background:var(--c);flex:none}
.aida-card-h>.status{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:var(--text-xs);font-weight:500;letter-spacing:0;text-transform:none;color:var(--foreground)}
.aida-card-h>.status .ti{width:14px;height:14px}
.aida-card-h>.by{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:var(--text-xs);font-weight:500;letter-spacing:0;text-transform:none;color:var(--foreground)}
.aida-card-h>.status+.by{margin-left:0}
.aida-card-h>.by .avatar{background:var(--u);color:var(--foreground)}
.aida-card-h>.confirmed{color:var(--success-foreground)}
.kv{display:grid;gap:4px}
.kv>small{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--soft)}
.kv>small .updated{color:var(--foreground);font-weight:500}.kv>small .updated:before{content:"· "}
.kv>div{font-size:var(--text-base)}
/* fields read as text; the frosted surface (blurred, so it's readable over the wash) shows on hover and while typing */
.kv textarea{display:block;width:calc(100% + 20px);min-height:36px;margin:0 -10px;padding:7px 10px;border:1px solid transparent;border-radius:var(--radius-lg);background:transparent;
  color:var(--foreground);font:var(--text-base)/1.45 var(--font-sans);resize:none;field-sizing:content;max-height:9rem;overflow-y:auto;transition:border-color var(--dur-1),background var(--dur-1)}
.kv textarea:hover{background:color-mix(in oklab,var(--background) 30%,transparent);border-color:color-mix(in oklab,var(--foreground) 12%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.kv textarea:focus{outline:0;border-color:var(--ring);background:color-mix(in oklab,var(--background) 55%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 40%,transparent)}
.kv textarea.title{font-weight:600}
/* the field AIDA is rewriting: its text fades while the rest of the card stays readable */
.kv[data-working] textarea{color:var(--soft);animation:pulse 2s var(--ease-in-out) infinite}
.aida-card .actions{display:flex;align-items:center;gap:6px;margin-top:2px}.aida-card .actions .sp{flex:1}
.aida-card .button[data-variant=ghost]:hover{background:color-mix(in oklab,var(--foreground) 9%,transparent)}
.arc-chart{display:block;width:100%;padding:6px 10px 0;color:var(--soft,var(--muted-foreground))}.arc-chart .ax{fill:currentColor;font-size:var(--text-chart-axis);letter-spacing:.06em}
.arc-beat{display:flex;gap:8px;align-items:baseline}.arc-beat i{width:7px;height:7px;border-radius:var(--radius-circle);flex:none;transform:translateY(-1px)}.arc-beat b{flex:none}.arc-beat span{color:var(--soft,var(--muted-foreground))}
.confirmed{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:var(--text-xs);letter-spacing:0;text-transform:none;color:var(--success-foreground);font-weight:500}

/* selection bar (floats over the board) */
.selbar{display:inline-flex;align-items:center;gap:2px;padding:6px;background:color-mix(in oklab,var(--foreground) 11%,var(--background));color:var(--foreground);border:1px solid color-mix(in oklab,var(--foreground) 18%,transparent);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-selbar);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.selbar .count{display:inline-flex;align-items:center;gap:8px;padding:0 8px;font-weight:500;font-size:var(--text-sm)}
.selbar .separator[data-orientation=vertical]{margin:6px 4px}
.selbar .button[data-variant=ghost]{box-shadow:none}
.selbar .button[data-variant=ghost][data-tone=destructive]{color:var(--destructive)}.selbar .button[data-variant=ghost][data-tone=destructive]:hover{background:color-mix(in oklab,var(--destructive) 16%,transparent);color:var(--destructive)}
.dark .selbar .button[data-variant=ghost][data-tone=destructive]{color:var(--destructive)}

/* ---------- Resizable panel handle (the AIDA panel's left edge) ---------- */
.resize-handle{position:absolute;z-index:var(--z-handle);left:0;top:0;bottom:0;width:8px;cursor:col-resize;touch-action:none}
.resize-handle:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background-color var(--dur-2)}
.resize-handle:hover:before,.resize-handle:focus-visible:before,.resize-handle[data-active]:before{background:color-mix(in oklab,var(--foreground) 35%,transparent)}
.resize-handle:focus-visible{outline:0}


/* ---------- reduced motion: no travel, short fades only ---------- */
@media (prefers-reduced-motion:reduce){
  .float-in,.dialog-in,.toast-in,.tray.in,.aida-card.in{animation-name:fade-in;animation-duration:var(--dur-2)}
  mark.hl{animation:none}
  .reveal{animation:fade-in var(--dur-3) both}
  .aida-wash>.wash:before,.kv[data-working] textarea,.generating:before,.progress[data-variant=aida]>i,.skeleton{animation:none}
  .button:active,.chip:active,.composer-row .send:active{transform:none}
}

.tabs[data-variant=line] .tab-thumb{inset:auto 0 -1px 0}
.dark .tabs:not([data-variant=line]){background:var(--tabs-bg)}
.dark .tab-thumb{background:var(--tab-thumb-bg)}

/* breadcrumb (shadcn Breadcrumb): links in the muted colour, the current page in the foreground colour, a chevron between */
.breadcrumb{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;font-size:var(--text-base);line-height:1.5;color:var(--muted-foreground)}
.breadcrumb-link{color:inherit;transition:color var(--dur-1);cursor:pointer;overflow:hidden;text-overflow:ellipsis}
.breadcrumb-link:hover{color:var(--foreground)}
.breadcrumb-page{color:var(--foreground);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.breadcrumb-sep{display:inline-flex;flex:none;color:var(--muted-foreground)}
.breadcrumb-sep .ti{width:14px;height:14px}

/* Trace (shadcn): a quiet line for what happened; its actions sit under the dots */
.trace{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0}
.trace-line{position:relative;display:flex;align-items:center;gap:8px;width:fit-content;max-width:100%;min-width:0;font-size:var(--text-sm);color:var(--muted-foreground)}
.trace .trace-line .trace-wrap{position:static;flex:none;display:inline-flex}
.trace-icon{display:flex;flex:none;align-items:center;justify-content:center;width:16px;height:16px}.trace-icon .ti{width:16px;height:16px}
.trace-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trace .trace-wrap .menu{left:0;right:auto;top:calc(100% + 4px);transform-origin:top left;white-space:nowrap}