/* Cardboard 1.3.2 editor, rebuilt. The rules behind every value are in DESIGN.md. */
:root {
  --rail: #0a0a0a; --bar: #141414; --panel: #151515; --lane: #1a1a1a; --card: #1c1c1c; --pop: #1f1f1f;
  --line: #232323; --stage: #242424; --bubble: #282828; --composer: #2a2a2a; --field: #2e2e2e;
  --fg: #d9d9d9; --dim: #6a6a6a; --ring-1: #262626; --ring-2: #3a3a3a;
  --blue: #1a8cff; --sel: #85b2f9; --wait: #fbbd23; --snap: #eb4747; --fxb: #ffbf00;
  --clip-text: #453b83; --clip-audio: #2f5f4a; --clip-audio-line: #71daab; --clip-cap: #5d4db3;
  --rail-w: 45px; --pw: 320px; --cw: 383px; --top: 40px; --tl: 240px; --head-w: 189px;
  --ease: cubic-bezier(.16,1,.3,1); --ease-std: cubic-bezier(.2,0,0,1); --ease-in: cubic-bezier(.4,0,1,1);
  --lvl1: inset 0 0 0 1px var(--ring-1), inset 0 1px 0 #ffffff08;
  --hi: inset 0 1px 0 #ffffff26;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--rail); }
body { font: 13px/1.4 var(--font-sans); color: var(--fg); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; border-radius: 6px; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
kbd { font-family: var(--font-sans); }
.cb-kbd { font: 500 10.5px/1 var(--font-sans); padding: 3px 5px; border-radius: 4px; background: #2c2c2c; color: #a8a8a8; box-shadow: inset 0 -1px 0 #0006; }

/* ================================================================ shell */
.cb {
  display: grid; height: 100vh; min-width: 1100px;
  grid-template-columns: var(--rail-w) var(--pw) minmax(0, 1fr) var(--cw);
  grid-template-rows: var(--top) minmax(0, 1fr) var(--tl);
  grid-template-areas: "top top top top" "rail panel viewer chat" "tl tl tl chat";
  transition: grid-template-columns .28s var(--ease), grid-template-rows .28s var(--ease);
}
.cb > * { min-width: 0; min-height: 0; transition: filter .18s var(--ease-std); }
.cb[data-panel-closed] { --pw: 0px; }
.cb[data-chat-closed] { --cw: 0px; }
.cb[data-tl-closed] { --tl: 40px; }
.cb[data-full] { --rail-w: 0px; --pw: 0px; --cw: 0px; --top: 0px; --tl: 0px; }
.cb[data-full] .cb-top, .cb[data-full] .cb-rail { overflow: hidden; }
/* menus that need focus blur the window behind them */
.cb[data-blur] > * { filter: blur(5px) brightness(.62); }

/* ---------------------------------------------------------------- title bar */
.cb-top { grid-area: top; background: var(--rail); display: flex; align-items: center; gap: 4px; padding: 0 10px 0 14px; overflow: hidden; }
.cb-lights { display: flex; gap: 8px; margin-right: 22px; }
.cb-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px #0003; }
.cb-lights i:nth-child(2) { background: #febc2e; } .cb-lights i:nth-child(3) { background: #28c840; }
.cb-tab { height: 28px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border-radius: 7px; color: #bdbdbd; white-space: nowrap; transition: background .12s, color .12s; }
.cb-tab-home:hover { color: #fff; background: #ffffff0a; }
.cb-tab .ic { width: 13px; height: 13px; }
.cb-tab[data-on] { background: #1a1a1a; box-shadow: inset 0 0 0 1px #262626, var(--hi); color: #ededed; max-width: 260px; margin-left: 22px; padding-right: 6px; }
.cb-tab-name { overflow: hidden; text-overflow: ellipsis; }
.cb-tab-thumb { width: 22px; height: 13px; border-radius: 3px; flex: none; background: linear-gradient(90deg,#ef8f4b,#a2493a 50%,#0f6d7a); box-shadow: inset 0 0 0 .5px #ffffff30; }
.cb-tab-x { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; color: #8a8a8a; }
.cb-tab-x:hover { background: #ffffff12; color: #fff; }
.cb-tab-x .ic { width: 11px; height: 11px; }
.cb-reply { font-style: normal; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 5px; border-radius: 5px; background: #4a3a10; color: #fbd56a; font-size: 12px; font-weight: 500; animation: cb-pulse 1.6s var(--ease-std) infinite; }
.cb-reply[hidden] { display: none; }
.cb-reply .ic { width: 11px; height: 11px; }
@keyframes cb-pulse { 50% { background: #5c4812; } }
.cb-tab-new { margin-left: 4px; }
.cb-top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cb-aspect { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 7px; border-radius: 7px; color: #d6d6d6; transition: background .12s; }
.cb-aspect:hover, .cb-aspect[aria-expanded="true"] { background: #ffffff0f; }
.cb-aspect > .ic { width: 10px; height: 10px; color: #8a8a8a; }
.cb-ar-glyph { --box: 14px; width: var(--box); height: var(--box); display: grid; place-items: center; flex: none; }
.cb-ar-glyph::before { content: ""; aspect-ratio: var(--ar); width: min(100%, calc(var(--box) * var(--ar))); max-height: 100%; border: 1.4px solid currentColor; border-radius: 2px; box-sizing: border-box; }
.cb-export { height: 26px; padding: 0 9px; border-radius: 7px; background: #f4f4f4; color: #111; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; box-shadow: var(--hi), 0 1px 2px #0008; transition: transform .12s var(--ease-std), background .12s; }
.cb-export:hover { background: #fff; }
.cb-export:active { transform: scale(.97); }
.cb-export kbd { font-size: 10.5px; color: #8a8a8a; font-weight: 500; }

/* ---------------------------------------------------------------- rail */
.cb-rail { grid-area: rail; background: var(--rail); display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 10px; overflow: hidden; }
.cb-rail button { width: 35px; height: 35px; border-radius: 8px; display: grid; place-items: center; color: #9d9d9d; transition: background .12s var(--ease-std), color .12s, transform .12s var(--ease-std); }
.cb-rail button .ic { width: 18px; height: 18px; }
.cb-rail button:hover { color: #fff; background: #ffffff08; }
.cb-rail button:active { transform: scale(.94); }
.cb-rail button[aria-pressed="true"] { background: var(--line); color: #fff; box-shadow: inset 0 1px 0 #ffffff0d; }
.cb-aa { font-size: 15px; font-weight: 500; letter-spacing: -.03em; }

/* ---------------------------------------------------------------- left panel */
.cb-panel { grid-area: panel; background: var(--panel); border-right: 1px solid var(--line); overflow: hidden; position: relative; }
.cb[data-panel-closed] .cb-panel { border-right-color: transparent; }
.cb-panel-inner { width: 320px; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.cb-panel-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 0 15px; height: 46px; }
.cb-panel-head h1 { font-size: 17.5px; font-weight: 500; margin: 0; letter-spacing: -.01em; color: var(--text-primary); }
.cb-panel-tools { flex: none; display: flex; gap: 7px; padding: 12px 13px 0 15px; }
.cb-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 13px 18px 15px; margin: 0; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.cb-search { flex: 1; height: 36px; border-radius: 8px; background: #212121; box-shadow: inset 0 0 0 1px #ffffff08; display: flex; align-items: center; gap: 8px; padding: 0 11px; color: #8f8f8f; transition: background .12s, box-shadow .12s; }
.cb-search:hover { background: #242424; }
.cb-search:focus-within { background: #262626; box-shadow: inset 0 0 0 1px #ffffff1f; }
.cb-search .ic { width: 13px; height: 13px; }
.cb-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text-primary); }
.cb-search input::placeholder { color: #8a8a8a; }
.cb-add { height: 36px; padding: 0 11px; border-radius: 8px; background: #212121; box-shadow: inset 0 0 0 1px #ffffff08; display: inline-flex; align-items: center; gap: 5px; font-weight: 500; color: #d2d2d2; transition: background .12s, transform .12s; }
.cb-add:hover { background: #2a2a2a; }
.cb-add:active { transform: scale(.97); }
.cb-add .ic { width: 13px; height: 13px; }
.cb-label { margin: 6px 0 9px; font-size: 12.5px; font-weight: 400; color: var(--text-tertiary); }
.cb-label:not(:first-child) { margin-top: 22px; }
.cb-hint { flex: none; margin: 10px 13px 0 15px; color: var(--text-tertiary); font-size: 12px; }
.cb-hint b { color: #d6d6d6; font-weight: 500; font-variant-numeric: tabular-nums; }

/* segmented control with a sliding pill */
.cb-seg { position: relative; flex: 1; display: grid; grid-template-columns: repeat(var(--n), 1fr); height: 40px; padding: 3px; border-radius: 10px; background: #191919; box-shadow: inset 0 0 0 1px #ffffff0a; }
.cb-seg::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); border-radius: 7px; background: var(--field); box-shadow: var(--hi), 0 1px 3px #0007; transform: translateX(calc(var(--i) * 100%)); transition: transform .28s var(--ease); }
.cb-seg button { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 500; color: #9a9a9a; transition: color .12s; }
.cb-seg button .ic { width: 13px; height: 13px; }
.cb-seg button[aria-pressed="true"] { color: #f0f0f0; }
.cb-seg button:hover { color: #e0e0e0; }

/* dropdown field */
.cb-select { flex: 1; height: 36px; border-radius: 8px; background: #212121; box-shadow: inset 0 0 0 1px #ffffff0a; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 14px; font-weight: 500; color: #e6e6e6; transition: background .12s; }
.cb-select:hover, .cb-select[aria-expanded="true"] { background: #262626; }
.cb-select .ic { width: 13px; height: 13px; color: #8a8a8a; transition: transform .18s var(--ease); }
.cb-select[aria-expanded="true"] .ic { transform: rotate(180deg); }

/* collapsible section */
.cb-sec + .cb-sec { margin-top: 14px; }
.cb-sec-head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 10px; color: #d2d2d2; font-size: 13px; }
.cb-sec-head .ic { width: 13px; height: 13px; color: #8a8a8a; transition: transform .2s var(--ease); }
.cb-sec[data-closed] .cb-sec-head .ic { transform: rotate(180deg); }
.cb-sec-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s var(--ease), opacity .18s; }
.cb-sec-body > * { overflow: hidden; }
.cb-sec[data-closed] .cb-sec-body { grid-template-rows: 0fr; opacity: 0; }

/* ---------------------------------------------------------------- cards (Library, Layout, Text, Transitions, Effects) */
.cb-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; grid-auto-rows: max-content; }
.cb-scroll.cb-cards { padding: 12px 13px 18px 15px; align-content: start; }
.cb-cards-2 { grid-template-columns: 1fr 1fr; }
.cb-cards-3 { grid-template-columns: repeat(3, 1fr); gap: 9px; }
.cb-sec-body .cb-cards { padding: 1px; }
.cb-card { position: relative; display: block; width: 100%; text-align: left; background: var(--card); border-radius: 7px; box-shadow: var(--lvl1), 0 1px 0 #0005; overflow: hidden; cursor: pointer; transition: box-shadow .12s var(--ease-std), transform .12s var(--ease-std); }
.cb-card:hover { box-shadow: inset 0 0 0 1px var(--ring-2), inset 0 1px 0 #ffffff0d, 0 6px 16px -8px #000c; }
.cb-card:active { transform: scale(.985); }
.cb-card[data-on], .cb-card[data-selected] { box-shadow: inset 0 0 0 2px var(--sel), 0 6px 16px -8px #000c; }
.cb-thumb { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; background: #000; container-type: size; }
.cb-thumb > .cb-look, .cb-thumb > .cb-glyph { transition: transform .28s var(--ease); }
.cb-card:hover .cb-thumb > .cb-look, .cb-card:hover .cb-thumb > .cb-glyph { transform: scale(1.05); }
.cb-card[data-on] .cb-thumb, .cb-card[data-selected] .cb-thumb { margin: 2px 2px 0; border-radius: 5px 5px 0 0; }
.cb-card-label { padding: 8px 9px 9px; font-size: 12.5px; font-weight: 500; color: #dcdcdc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-card-label small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--text-tertiary); line-height: 1.45; }
.cb-cards-3 .cb-thumb { aspect-ratio: 1 / .92; }
.cb-cards-3 .cb-card-label { padding: 7px 8px 8px; }
.cb-dur { position: absolute; right: 5px; bottom: 5px; font: 500 10px/1 var(--font-mono); padding: 3px 4px; border-radius: 4px; background: #000000a6; color: #eee; backdrop-filter: blur(4px); }
.cb-thumb-add { position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: #000000a6; color: #fff; backdrop-filter: blur(6px); opacity: 0; transform: scale(.9); transition: opacity .12s, transform .18s var(--ease); }
.cb-thumb-add .ic { width: 13px; height: 13px; }
.cb-m:hover .cb-thumb-add, .cb-thumb-add:focus-visible { opacity: 1; transform: none; }
.cb-thumb-add:hover { background: #000000d9; }
.cb-applied { position: absolute; right: 6px; top: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px 3px 4px; border-radius: 6px; font: 500 10.5px/1 var(--font-sans); font-style: normal; color: #fff; background: #000000a6; backdrop-filter: blur(6px); box-shadow: 0 0 0 1px #ffffff1f; z-index: 2; }
.cb-applied .ic { width: 10px; height: 10px; stroke-width: 2.4; }

/* footage stand-in: gradient + film grain */
.cb-look { position: absolute; inset: 0; background: var(--look); }
.cb-look::after { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .16; mix-blend-mode: overlay; }
.cb-fx { position: absolute; inset: 0; pointer-events: none; }

/* layout preset diagrams */
.cb-thumb-layout { background-color: #3a6fd8; }
.cb-thumb-layout::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 0%, #ffffff30, transparent 60%); pointer-events: none; }
.cb-thumb-layout::before { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .22; mix-blend-mode: overlay; pointer-events: none; }
.cb-slots { position: absolute; inset: 12% 12%; z-index: 1; }
.cb-slots i { position: absolute; display: grid; place-items: center; border-radius: 4px; background: #ffffff38; box-shadow: inset 0 0 0 1px #ffffff40, 0 2px 6px #0002; font: 600 11px/1 var(--font-sans); font-style: normal; color: #ffffffe6; }
.cb-cam-box { position: absolute; inset: 22% 26%; z-index: 1; border: 1.5px dashed #ffffffb3; border-radius: 4px; display: grid; place-items: center; color: #fff; background: #ffffff1a; }
.cb-cam-box.drift { inset: 22% 18% 22% 34%; }
.cb-card:hover .cb-cam-box.dynamic-zoom { animation: cb-push 1.6s var(--ease) infinite alternate; }
.cb-card:hover .cb-cam-box.drift { animation: cb-drift 1.6s var(--ease) infinite alternate; }
@keyframes cb-push { to { inset: 30% 34%; } }
@keyframes cb-drift { to { inset: 22% 34% 22% 18%; } }

/* transition cards */
.cb-thumb-trans { display: grid; place-items: center; }
.cb-thumb-trans::after { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .18; mix-blend-mode: overlay; }
.cb-glyph { width: 30px; height: 30px; color: #fff; stroke-width: 1.8; filter: drop-shadow(0 2px 6px #0004); position: relative; z-index: 1; }
.cb-card-tall .cb-thumb { aspect-ratio: 16 / 9; }

/* type previews: container units, so the same class works on a card and in the viewer */
.cb-thumb-type { background: #141414; display: grid; place-items: center; --s: 1; }
.cb-thumb-type > span { display: grid; place-items: center; width: 100%; height: 100%; text-align: center; color: #fff; }
.ty-hero > span { font: 800 calc(18cqw * var(--s, 1))/0.95 var(--font-sans); letter-spacing: -.035em; }
.ty-cine > span { font: 400 calc(19cqw * var(--s, 1))/0.95 "Instrument Serif", serif; letter-spacing: -.01em; }
.ty-hollow > span { font: 400 calc(23cqw * var(--s, 1))/1 "Anton", sans-serif; color: transparent; -webkit-text-stroke: max(1px, calc(.45cqw * var(--s, 1))) #fff; }
.ty-framed > span { font: italic 400 calc(17cqw * var(--s, 1))/0.95 "Instrument Serif", serif; outline: max(1px, calc(.7cqw * var(--s, 1))) solid #fff; outline-offset: calc(4cqw * var(--s, 1)); padding: 0 calc(6cqw * var(--s, 1)); display: block; }
.ty-elegant > span { font: italic 400 calc(13cqw * var(--s, 1))/1.15 "Instrument Serif", serif; letter-spacing: .01em; }
.ty-l3name > span { font: 800 calc(17cqw * var(--s, 1))/0.98 var(--font-sans); letter-spacing: -.03em; }
.ty-l3role > span { font: 300 calc(13cqw * var(--s, 1))/1.1 var(--font-sans); letter-spacing: -.01em; }

/* caption style previews */
.cb-thumb-cap .cb-frame-caption { font-size: 8cqw; bottom: 9%; }
.cb-thumb-cap .cap-pop { font-size: 9cqw; }
.cb-thumb-cap .cap-minimal { font-size: 6.5cqw; }
.cb-thumb-cap .cap-serif { font-size: 10cqw; }

/* list rows (Audio) */
.cb-rows { list-style: none; padding-left: 8px; padding-right: 8px; }
.cb-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 7px; border-radius: 9px; cursor: pointer; transition: background .12s; }
.cb-row:hover, .cb-row[data-playing] { background: #1e1e1e; box-shadow: var(--lvl1); }
.cb-art { position: relative; width: 36px; height: 36px; border-radius: 6px; flex: none; display: grid; place-items: center; box-shadow: inset 0 0 0 1px #ffffff14, 0 2px 6px #0006; overflow: hidden; }
.cb-art::after { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .3; mix-blend-mode: overlay; }
.cb-art-play { width: 14px; height: 14px; fill: #fff; stroke: none; opacity: 0; transform: scale(.8); transition: opacity .12s, transform .18s var(--ease); position: relative; z-index: 1; filter: drop-shadow(0 1px 3px #000a); }
.cb-row:hover .cb-art-play { opacity: 1; transform: none; }
.cb-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cb-row-text b { font-size: 14px; font-weight: 400; color: #ececec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-row-text small { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-row[data-playing] .cb-row-text b { color: #fff; }
.cb-row-dur { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.cb-row-add { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #cfcfcf; background: #2a2a2a; opacity: 0; transition: opacity .12s, background .12s; }
.cb-row-add .ic { width: 13px; height: 13px; }
.cb-row:hover .cb-row-add { opacity: 1; }
.cb-row:hover .cb-row-dur { display: none; }
.cb-row-add:hover { background: #363636; color: #fff; }
.cb-eq { position: relative; z-index: 1; display: flex; align-items: end; gap: 2px; height: 14px; }
.cb-eq i { width: 3px; background: #fff; border-radius: 1px; animation: cb-eq .8s ease-in-out infinite alternate; }
.cb-eq i:nth-child(2) { animation-delay: -.3s; } .cb-eq i:nth-child(3) { animation-delay: -.55s; } .cb-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes cb-eq { from { height: 3px; } to { height: 14px; } }

/* empty states */
.cb-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 30px; color: var(--text-tertiary); font-size: 12.5px; line-height: 1.5; }
.cb-empty b { color: #ececec; font-size: 14px; font-weight: 600; }
.cb-grow { flex: 1; justify-content: center; }
.cb-empty-tile { width: 50px; height: 50px; border-radius: 10px; display: grid; place-items: center; background: #252525; box-shadow: var(--lvl1); color: #b0b0b0; margin-bottom: 14px; }
.cb-empty-tile .ic { width: 20px; height: 20px; }
.cb-empty-ic { width: 22px; height: 22px; margin-bottom: 6px; }

/* panel footer (Captions) */
.cb-panel-foot { flex: none; padding: 14px 13px 16px 15px; display: grid; gap: 9px; }
.cb-overline { font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.cb-white { height: 38px; border-radius: 8px; background: #f4f4f4; color: #151515; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--hi), 0 1px 2px #0008; transition: background .12s, transform .12s var(--ease-std); }
.cb-white:hover:not(:disabled) { background: #fff; }
.cb-white:active:not(:disabled) { transform: scale(.98); }
.cb-white[data-busy] { background: #d9d9d9; }
.cb-white .ic { width: 14px; height: 14px; }
.cb-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #0003; border-top-color: #151515; animation: cb-rot .7s linear infinite; }
@keyframes cb-rot { to { transform: rotate(1turn); } }

/* transcript */
.cb-transcript { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.cb-transcript li { display: flex; gap: 10px; align-items: baseline; padding: 8px; border-radius: 8px; transition: background .12s; }
.cb-transcript li:hover { background: #1c1c1c; }
.cb-transcript li[data-on] { background: #1f1d2e; box-shadow: inset 2px 0 0 var(--clip-cap); }
.cb-ts { font: 500 11.5px var(--font-mono); color: #8a8a8a; flex: none; padding: 1px 4px; border-radius: 4px; }
.cb-ts:hover { color: #fff; background: #2a2a2a; }
.cb-transcript span { color: #dcdcdc; line-height: 1.5; outline: 0; border-radius: 3px; }
.cb-transcript span:focus { background: #262626; box-shadow: 0 0 0 4px #262626; }

/* drag ghost from Library */
.cb-ghost { position: fixed; left: 0; top: 0; z-index: 60; width: 120px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; pointer-events: none; box-shadow: var(--shadow-surface-raised), 0 0 0 2px var(--sel); opacity: .92; }
.cb-ghost .cb-dur, .cb-ghost .cb-thumb-add { display: none; }
.cb[data-dragging-media], .cb[data-dragging-media] * { cursor: grabbing !important; }

/* ================================================================ viewer */
.cb-viewer { grid-area: viewer; position: relative; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 45%, #272727, #202020 70%, #1d1d1d); }
.cb-viewer::before { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .035; pointer-events: none; }
/* every in-flow layer shares one cell, so the frame is centred in the space it has; a band reserved on top (the
   workbench bar) is padding, and the frame centres in what's left */
.cb-viewer { padding-top: var(--viewer-top, 0px); }
.cb-viewer > * { grid-area: 1 / 1; }
.cb[data-full] .cb-viewer { background: #000; }
.cb-frame { position: relative; transition: translate .28s var(--ease); background: #000; overflow: hidden; container-type: size; box-shadow: 0 40px 90px -40px #000, 0 0 0 1px #ffffff08; }
.cb-frame-layers { position: absolute; inset: 0; transform-origin: 50% 45%; }
.cb-slot { position: absolute; overflow: hidden; outline: 1.5px solid #000; }
.cb-slot-full { inset: 0; outline: 0; }
.cb-grain { position: absolute; inset: -10%; background: var(--noise); opacity: .1; mix-blend-mode: overlay; pointer-events: none; animation: cb-grain .5s steps(4) infinite; }
@keyframes cb-grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -2%); } }
.cb-empty-frame { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #a8a8a8; }
.cb-empty-frame > .ic { width: 22px; height: 22px; margin-bottom: 10px; }
.cb-empty-frame b { color: #f0f0f0; font-size: 15px; font-weight: 600; }
.cb-empty-frame .cb-white { margin-top: 14px; padding: 0 12px; height: 34px; }

/* titles on the frame reuse the type classes at a smaller scale */
.cb-frame-title { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; --s: .42; color: #fff; text-shadow: 0 2px 30px #0007; }
.cb-frame-title > span { display: block; text-align: center; }
.cb-frame-title.ty-l3name, .cb-frame-title.ty-l3role { place-items: end start; padding: 0 0 9cqh 6cqw; --s: .3; }
.cb-frame-title.ty-l3name > span, .cb-frame-title.ty-l3role > span { text-align: left; padding-left: 1.6cqw; border-left: .5cqw solid #fff; }

/* captions */
.cb-frame-caption { position: absolute; left: 8%; right: 8%; bottom: 7%; display: flex; justify-content: center; text-align: center; pointer-events: none; font-size: 3.3cqw; line-height: 1.2; }
.cb-frame-caption > span { max-width: 100%; }
.cb-frame-caption i { font-style: normal; transition: color .12s, opacity .12s, background .12s; }
.cap-classic { font-weight: 600; color: #fff; text-shadow: 0 1px 2px #000, 0 0 18px #000a; }
.cap-pop { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; color: #fff; -webkit-text-stroke: .3em #000; paint-order: stroke fill; font-size: 4.2cqw; }
.cap-pop i[data-on]:has(+ i:not([data-on])), .cap-pop i[data-on]:last-child { color: #ffd23f; }
.cap-karaoke { font-weight: 700; text-shadow: 0 2px 10px #000c; }
.cap-karaoke i { color: #ffffff59; }
.cap-karaoke i[data-on] { color: #fff; }
.cap-boxed > span { background: #000000c9; padding: .25em .55em; border-radius: .3em; color: #fff; font-weight: 500; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cap-minimal { font-weight: 400; font-size: 2.6cqw; letter-spacing: .02em; color: #ffffffe6; text-transform: lowercase; text-shadow: 0 1px 8px #000; }
.cap-serif { font: italic 400 4cqw/1.1 "Instrument Serif", serif; color: #fff; text-shadow: 0 2px 16px #000b; }

/* toasts */
.cb-toasts { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 5; }
.cb-toast { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; background: #262626f2; color: #e0e0e0; backdrop-filter: blur(10px); box-shadow: var(--shadow-surface-near), var(--hi); white-space: nowrap; overflow: hidden; animation: cb-in .28s var(--ease); }
.cb-toast > span { display: inline-flex; align-items: center; gap: 6px; }
.cb-toast b { color: #fff; font-weight: 500; }
.cb-toast .ic { width: 14px; height: 14px; color: var(--status-success); stroke-width: 2.2; }
.cb-toast.is-out { animation: cb-out .18s var(--ease-in) forwards; }
.cb-toast-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--blue); animation: cb-bar var(--ms) linear forwards; }
@keyframes cb-bar { from { width: 0; } to { width: 100%; } }
@keyframes cb-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes cb-out { to { opacity: 0; transform: translateY(4px) scale(.98); } }

/* ================================================================ chat */
.cb-chat { grid-area: chat; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.cb-chat > * { min-width: 362px; }
.cb[data-chat-closed] .cb-chat { border-left-color: transparent; }
.cb-chat-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 0 10px; }
.cb-chat-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--line); border-radius: 7px; padding: 5px 9px; color: #c4c4c4; max-width: 220px; }
.cb-chat-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: #f4f4f4; }
.cb-dot[hidden] { display: none; }
.cb-dot[data-mode="waiting"] { background: var(--wait); box-shadow: 0 0 0 3px #fbbd2326; }
.cb-dot[data-mode="working"] { animation: cb-blink 1s ease-in-out infinite; }
@keyframes cb-blink { 50% { opacity: .3; } }
.cb-chat-actions { display: flex; gap: 6px; }
.cb-chat-log { flex: 1; overflow-y: auto; padding: 18px 14px 18px 16px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.cb-msg-user { align-self: flex-end; max-width: 86%; background: var(--bubble); border-radius: 16px; padding: 7px 12px; color: var(--text-primary); line-height: 1.45; box-shadow: var(--hi); }
.cb-msg-agent { color: #d6d6d6; line-height: 1.6; }
.cb-msg-agent p { margin: 0 0 10px; }
.cb-msg-worked { color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 3px; margin-bottom: 8px; transition: color .12s; }
.cb-msg-worked:hover { color: #d6d6d6; }
.cb-msg-worked .ic { width: 12px; height: 12px; }
.cb-msg-actions { display: flex; gap: 2px; margin-left: -5px; }
.cb-msg-actions .cb-icon { width: 24px; height: 24px; color: #6f6f6f; }
.cb-msg-actions .ic { width: 13px; height: 13px; }
.cb-msg-status { color: #a8a8a8; }
.cb-msg-tool { display: flex; align-items: center; gap: 10px; color: #c9c9c9; text-align: left; width: 100%; transition: color .12s; }
.cb-msg-tool .ic { width: 14px; height: 14px; color: #8a8a8a; }
.cb-msg-tool .ic:last-child { margin-left: auto; width: 12px; }
.cb-msg-tool:hover { color: #fff; }
.cb-msg-card { border: 1px solid #262626; background: #191919; border-radius: 9px; padding: 9px 12px; color: #a8a8a8; font-size: 12.5px; box-shadow: var(--hi); }
.cb-msg-card b { display: flex; align-items: center; gap: 4px; color: #e5e5e5; font-weight: 500; margin-top: 4px; }
.cb-elbow { width: 11px; height: 11px; color: #6a6a6a; }
.cb-msg-thinking { display: flex; align-items: center; gap: 9px; color: #a8a8a8; }
.cb-msg-thinking .ic { width: 15px; height: 15px; }
.cb-msg-thinking span { background: linear-gradient(90deg,#8a8a8a 0 40%,#f0f0f0 50%,#8a8a8a 60% 100%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cb-shimmer 1.6s linear infinite; }
@keyframes cb-shimmer { to { background-position: -150% 0; } }
.cb-chat-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: #9a9a9a; max-width: 210px; line-height: 1.5; }
.cb-chat-empty p { margin: 0; }
.cb-mark { width: 64px; }

.cb-composer { flex: none; margin: 0 10px 10px; background: var(--composer); border-radius: 13px; box-shadow: inset 0 0 0 1px #ffffff0d, var(--hi), 0 10px 30px -18px #000; padding: 13px 10px 10px 16px; transition: box-shadow .18s; }
.cb-composer[hidden] { display: none; }
.cb-composer:focus-within { box-shadow: inset 0 0 0 1px #ffffff21, var(--hi), 0 10px 30px -18px #000; }
.cb-composer textarea { display: block; width: 100%; resize: none; background: none; border: 0; outline: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-primary); min-height: 50px; }
.cb-composer textarea::placeholder { color: #858585; }
.cb-composer-bar { display: flex; align-items: center; gap: 6px; color: #9a9a9a; margin-top: 8px; margin-left: -6px; }
.cb-model { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 8px; color: #c9c9c9; transition: background .12s, color .12s; }
.cb-model:hover, .cb-model[aria-expanded="true"] { background: #ffffff0d; color: #fff; }
.cb-model .ic { width: 15px; height: 15px; stroke-width: 1.4; }
.cb-ring { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; }
.cb-ring:hover { background: #ffffff0d; }
.cb-ring svg { width: 18px; height: 18px; fill: none; stroke-width: 2.2; transform: rotate(-90deg); }
.cb-ring circle:first-child { stroke: #3a3a3a; }
.cb-ring circle:last-child { stroke: #b0b0b0; stroke-linecap: round; }
.cb-send { width: 28px; height: 28px; border-radius: 50%; background: #8a8a8a; color: #161616; display: grid; place-items: center; margin-left: 4px; box-shadow: var(--hi); transition: background .12s, transform .12s var(--ease-std); }
.cb-send:hover { background: #bdbdbd; }
.cb-send:active { transform: scale(.92); }
.cb-send .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.cb-send[data-stop] { background: #f4f4f4; }
.cb-composer:has(textarea:not(:placeholder-shown)) .cb-send { background: #f4f4f4; }

/* approval card: replaces the composer */
.cb-approve { flex: none; margin: 0 10px 10px; background: #1b1b1b; border: 1px solid #2a2a2a; border-radius: 13px; overflow: hidden; box-shadow: var(--shadow-surface-raised), var(--hi); }
.cb-approve-body { padding: 15px 16px 14px; }
.cb-approve h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 500; color: #ededed; }
.cb-approve p { margin: 0; color: #a8a8a8; line-height: 1.55; }
.cb-approve .cb-warn { margin-top: 8px; color: #e0b341; font-size: 12.5px; }
.cb-approve-opt { margin-top: 13px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #2c2c2c; border-radius: 10px; background: #1f1f1f; color: #ececec; }
.cb-approve-opt small { display: block; color: #8a8a8a; font-size: 12px; margin-top: 2px; }
.cb-approve-input { border-top: 1px solid #262626; padding: 12px 14px 0; }
.cb-approve-input input { width: 100%; height: 38px; border-radius: 9px; border: 1px solid #2e2e2e; background: #161616; padding: 0 12px; outline: 0; color: var(--text-primary); }
.cb-approve-input input:focus { border-color: #444; }
.cb-approve-input input::placeholder { color: #7a7a7a; }
.cb-approve-foot { padding: 12px 14px 14px; display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.cb-approve-skip { color: #c4c4c4; display: inline-flex; gap: 7px; align-items: center; }
.cb-approve-skip:hover { color: #fff; }
.cb-primary { height: 34px; padding: 0 10px 0 14px; border-radius: 9px; background: var(--blue); color: #fff; font-weight: 500; display: inline-flex; align-items: center; gap: 9px; box-shadow: inset 0 1px 0 #ffffff40, 0 4px 14px -4px #1a8cff80; transition: background .12s, transform .12s var(--ease-std); }
.cb-primary:hover { background: #3399ff; }
.cb-primary:active { transform: scale(.97); }
.cb-primary i { font-style: normal; border-left: 1px solid #ffffff4d; padding-left: 9px; }
.cb-primary kbd { font-size: 10px; padding: 2px 4px; border-radius: 4px; background: #ffffff33; }

/* ================================================================ popovers, menus, tooltip */
.cb-layer { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.cb-layer > * { pointer-events: auto; }
.cb-pop { position: fixed; min-width: 180px; padding: 6px; border-radius: 12px; background: #1f1f1ff5; backdrop-filter: blur(16px) saturate(1.2); box-shadow: var(--shadow-surface-raised), inset 0 1px 0 #ffffff0f, inset 0 0 0 1px #ffffff0d; animation: cb-pop-in .18s var(--ease); }
.cb-pop.is-out { animation: cb-pop-out .12s var(--ease-in) forwards; }
@keyframes cb-pop-in { from { opacity: 0; transform: scale(.97); } }
@keyframes cb-pop-out { to { opacity: 0; transform: scale(.98); } }
.cb-menu-row { width: 100%; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px; color: #d6d6d6; text-align: left; transition: background .08s; }
.cb-menu-row:hover { background: #2c2c2c; color: #fff; }
.cb-menu-row b { font-weight: 600; color: #f0f0f0; }
.cb-menu-row span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-menu-row b + span { color: #8a8a8a; }
.cb-check { width: 14px; height: 14px; stroke-width: 2; margin-left: auto; color: #f0f0f0; }
.cb-pop-aspect { width: 220px; }
.cb-pop-aspect .cb-ar-glyph { --box: 16px; color: #bdbdbd; }
.cb-pop-model { width: 260px; padding: 8px; }
.cb-model-row { height: 38px; }
.cb-model-row .ic:first-child { width: 16px; height: 16px; color: #bdbdbd; }
.cb-more { color: #9a9a9a; }
.cb-pop-sep { height: 1px; background: #2c2c2c; margin: 6px -8px; }
.cb-effort { padding: 8px 6px 6px; }
.cb-effort-head { display: flex; justify-content: space-between; color: #a8a8a8; margin-bottom: 12px; }
.cb-effort-head b { color: #ececec; font-weight: 400; }
.cb-effort-track { position: relative; height: 30px; border-radius: 999px; background: #151515; box-shadow: inset 0 1px 3px #000a, inset 0 0 0 1px #ffffff08; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; cursor: pointer; touch-action: none; }
.cb-effort-track i { width: 4px; height: 4px; border-radius: 50%; background: #6a6a6a; }
.cb-effort-knob { position: absolute; top: 2px; left: calc(2px + var(--e) * (100% - 30px) / 4); width: 26px; height: 26px; border-radius: 50%; background: #f4f4f4; box-shadow: 0 2px 6px #000a, inset 0 -1px 0 #0002; transition: left .22s var(--ease); }
.cb-account { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 2px; color: #a8a8a8; font-size: 12.5px; }
.cb-account button { color: #8a8a8a; }
.cb-account button:hover { color: #fff; }
.cb-pop-usage { width: 280px; padding: 16px 18px; }
.cb-pop-usage h4 { margin: 0 0 4px; font-size: 15px; font-weight: 500; color: #f0f0f0; }
.cb-pop-usage p { margin: 0 0 14px; color: #a8a8a8; }
.cb-meter { height: 2px; background: #333; border-radius: 2px; overflow: hidden; }
.cb-meter i { display: block; height: 100%; background: #f4f4f4; }
.cb-usage-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; color: #a8a8a8; }
.cb-usage-foot button { display: inline-flex; align-items: center; gap: 4px; color: #ececec; }
.cb-usage-foot .ic { width: 12px; height: 12px; }
.cb-pop-history { width: 280px; }
.cb-pop-label { padding: 6px 10px; color: #8a8a8a; font-size: 12px; }
.cb-chat-row em { font-style: normal; color: #7a7a7a; font-size: 12px; }
.cb-chat-row[data-on] { background: #262626; }
.cb-pop-select { padding: 5px; }
.cb-tip { position: fixed; z-index: 60; display: flex; gap: 8px; align-items: center; padding: 6px 7px 6px 11px; border-radius: 9px; background: #262626; color: #e8e8e8; font-size: 13px; white-space: nowrap; box-shadow: var(--shadow-surface-near); pointer-events: none; animation: cb-tip .14s var(--ease); }
.cb-tip:not(:has(kbd)) { padding-right: 11px; }
@keyframes cb-tip { from { opacity: 0; transform: translateY(3px); } }
.cb-tip[data-side="bottom"] { animation-name: cb-tip-b; }
@keyframes cb-tip-b { from { opacity: 0; transform: translateY(-3px); } }

/* ================================================================ shared controls */
.cb-icon { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 7px; color: #a8a8a8; transition: background .12s var(--ease-std), color .12s, transform .12s var(--ease-std); }
.cb-icon:hover:not(:disabled) { color: #fff; background: #ffffff0f; }
.cb-icon:active:not(:disabled) { transform: scale(.92); }
.cb-icon:disabled { opacity: .3; }
.cb-icon[aria-pressed="true"] { background: var(--field); color: #fff; box-shadow: var(--hi); }
.cb-sep { display: inline-block; width: 1px; height: 16px; background: #2c2c2c; margin: 0 6px; }

/* ================================================================ timeline */
.cb-timeline { grid-area: tl; display: flex; flex-direction: column; overflow: hidden; background: var(--lane); }
.cb-tl-bar { height: 40px; flex: none; background: var(--bar); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 10px; }
.cb-tl-left, .cb-tl-right { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cb-tl-right { justify-content: flex-end; }
.cb-tl-transport { display: flex; gap: 10px; }
.cb-tl-transport .ic { width: 15px; height: 15px; }
.cb-play .ic { fill: currentColor; stroke-width: 1.2; }
.cb-tc { font: 500 12px var(--font-sans); font-variant-numeric: tabular-nums; color: #dcdcdc; min-width: 72px; }
.cb-zoom { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px #ffffff08; color: #9a9a9a; margin-right: 8px; }
.cb-zoom-btn { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; }
.cb-zoom-btn:hover { color: #fff; background: #ffffff0f; }
.cb-zoom-btn .ic { width: 14px; height: 14px; }
.cb-zoom input { -webkit-appearance: none; appearance: none; width: 120px; height: 3px; border-radius: 2px; background: #3a3a3a; cursor: pointer; }
.cb-zoom input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #f4f4f4; box-shadow: 0 1px 3px #000a; transition: transform .12s; }
.cb-zoom input:active::-webkit-slider-thumb { transform: scale(1.2); }

.cb-tl-body { flex: 1; display: grid; grid-template-columns: var(--head-w) 1fr; min-height: 0; overflow: hidden; }
.cb-tl-heads { background: var(--bar); border-right: 1px solid #0d0d0d; overflow: hidden; }
.cb-tl-clock { height: 31px; display: grid; place-items: center; background: var(--lane); border-bottom: 1px solid #111; font: 400 12px var(--font-sans); font-variant-numeric: tabular-nums; color: #dcdcdc; }
.cb-head { height: var(--h, 49px); display: flex; align-items: center; gap: 7px; padding: 0 8px 0 13px; border-bottom: 1px solid var(--lane); color: #cfcfcf; }
.cb-head > .ic { width: 12px; height: 12px; color: #9a9a9a; }
.cb-head b { font-weight: 400; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-head[data-dim] b, .cb-head[data-dim] > .ic { opacity: .45; }
.cb-head-btn { width: 24px; height: 22px; display: grid; place-items: center; border-radius: 5px; color: var(--dim); font-size: 11.5px; font-weight: 500; }
.cb-head-btn .ic { width: 13px; height: 13px; }
button.cb-head-btn:hover { background: #ffffff0f; color: #ddd; }
.cb-head-btn[aria-pressed="true"] { color: var(--wait); }

.cb-tl-lanes { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.cb-tl-lanes::-webkit-scrollbar { display: none; }
.cb-ruler { position: relative; height: 31px; border-bottom: 1px solid #111; cursor: col-resize; }
.cb-ruler i { position: absolute; bottom: 10px; width: 1px; height: 4px; background: #474747; }
.cb-ruler i[data-major] { height: 8px; background: #6e6e6e; }
.cb-ruler em { position: absolute; bottom: 0; font: 400 10.5px var(--font-sans); font-style: normal; color: #a3a3a3; transform: translateX(-2px); }
.cb-track { position: relative; height: var(--h, 49px); border-bottom: 1px solid #151515; background: var(--lane); transition: background .12s; }
.cb-track[data-dim] .cb-clip { opacity: .45; }
.cb-track[data-drop] { background: #1f2533; box-shadow: inset 0 0 0 1px #85b2f955; }

.cb-clip { position: absolute; top: 2px; bottom: 2px; border-radius: 4px; overflow: hidden; background: #222; cursor: grab; box-shadow: inset 0 0 0 1px #00000080, inset 0 1px 0 #ffffff1f; transition: box-shadow .12s; touch-action: none; user-select: none; }
.cb-clip:hover { box-shadow: inset 0 0 0 1px #ffffff40, inset 0 1px 0 #ffffff1f; }
.cb-clip[data-selected] { box-shadow: inset 0 0 0 2px var(--sel), 0 0 0 1px #0008; z-index: 2; }
.cb-clip[data-dragging] { cursor: grabbing; z-index: 3; box-shadow: inset 0 0 0 2px var(--sel), 0 8px 18px -6px #000; }
.cb-clip > b { position: absolute; left: 7px; top: 5px; right: 6px; font-weight: 400; font-size: 11.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; text-shadow: 0 1px 2px #000c; pointer-events: none; }
.cb-strip { position: absolute; inset: 0; background: var(--look); background-size: 64px 100%; background-repeat: repeat-x; }
.cb-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0008 0 1px, transparent 1px) 0 0 / 64px 100%, linear-gradient(180deg, #0006, transparent 40%), var(--noise); opacity: .9; }
.cb-level { position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: #ffffffb3; z-index: 1; }
.cb-clip[data-kind="text"] { background: linear-gradient(180deg, #4d4291, var(--clip-text)); }
.cb-clip[data-kind="caption"] { background: linear-gradient(180deg, #6656c0, var(--clip-cap)); }
.cb-clip[data-kind="caption"] > b { top: 50%; translate: 0 -50%; font-size: 11px; }
.cb-clip[data-kind="audio"], .cb-clip[data-kind="sfx"] { background: linear-gradient(180deg, #336a52, var(--clip-audio)); }
.cb-wave { position: absolute; left: 0; right: 0; bottom: 4px; height: 20px; width: 100%; }
.cb-wave path { stroke: var(--clip-audio-line); stroke-width: 1; opacity: .85; vector-effect: non-scaling-stroke; fill: none; }
.cb-clip[data-kind="sfx"] .cb-wave { height: 16px; bottom: 3px; }
.cb-badges { position: absolute; right: 4px; bottom: 12px; display: flex; gap: 3px; z-index: 2; pointer-events: none; }
.cb-badge { font: 700 9px/1 var(--font-sans); font-style: normal; height: 15px; min-width: 15px; padding: 0 3px; border-radius: 4px; display: grid; place-items: center; background: #000000b3; color: #fff; }
.cb-badge .ic { width: 10px; height: 10px; stroke-width: 2; }
.cb-badge-fx { background: var(--fxb); color: #1a1300; }
.cb-trans { position: absolute; left: 0; top: 50%; translate: -50% -50%; width: 14px; height: 14px; rotate: 45deg; border-radius: 3px; background: #f4f4f4; box-shadow: 0 0 0 2px #0009; z-index: 3; cursor: help; transition: scale .12s; }
.cb-trans:hover { scale: 1.2; }
.cb-grip { position: absolute; top: 0; bottom: 0; width: 7px; z-index: 4; cursor: ew-resize; }
.cb-grip[data-edge="l"] { left: 0; } .cb-grip[data-edge="r"] { right: 0; }
.cb-clip[data-selected] .cb-grip::after, .cb-grip:hover::after { content: ""; position: absolute; top: 30%; bottom: 30%; left: 2px; width: 3px; border-radius: 2px; background: var(--sel); }
.cb-snapline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--snap); z-index: 6; pointer-events: none; box-shadow: 0 0 6px var(--snap); }
.cb-snapline[hidden] { display: none; }
.cb-playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: #f4f4f4; pointer-events: none; z-index: 5; }
.cb-playhead i { position: absolute; top: 3px; left: -5.5px; width: 12px; height: 10px; background: #f4f4f4; clip-path: polygon(0 0, 100% 0, 100% 45%, 50% 100%, 0 45%); filter: drop-shadow(0 1px 2px #000); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .cb, .cb-seg::before, .cb-effort-knob, .cb-sec-body { transition: none !important; }
}

/* real footage */
.cb-vid { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cb-strip[data-strip] { background: var(--strip) 0 0 / auto 100% repeat-x; }
.cb-strip[data-strip]::after { background: linear-gradient(180deg, #0006, transparent 40%); }
.cb-look[style*="url("]::after { opacity: .06; }

/* versions: a small tree beside the chat history. The live line on the left, a draft branching off it. */
.cb-ver-btn { position: relative; }
.cb-ver-btn[data-waiting]::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #f4f4f4; box-shadow: 0 0 0 2px var(--panel); }
.cb-pop-ver { width: 300px; padding-bottom: 0; }
.cb-vtree { display: grid; padding: 2px 0 4px; }
.cb-vrow { --main: 15px; --side: 33px; position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 44px;
  padding: 5px 10px 5px 46px; border-radius: 8px; text-align: left; transition: background .12s; }
.cb-vrow[data-lane="branch"] { padding-left: 52px; }
.cb-vrow:hover, .cb-vrow[data-wb-hover] { background: #262626; }
.cb-vrow[aria-selected="true"] { background: #2c2c2c; box-shadow: inset 0 0 0 1px #3a3a3a; }
.cb-vrow[data-live] { cursor: default; }
.cb-vrow[data-live]:hover { background: none; }
.cb-vrow b { display: block; font-weight: 500; font-size: 12.5px; color: #ececec; }
.cb-vrow small { display: block; font-size: 11.5px; color: #8a8a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-vrow em { font-style: normal; font-size: 11px; color: #f4f4f4; padding: 1px 6px; border-radius: 4px; background: #333; }
/* the live line: through every row, starting at the top dot and ending at the oldest */
.cb-vrow::before { content: ""; position: absolute; left: var(--main); top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #3d3d3d; }
.cb-vrow[data-top]::before { top: 50%; }
.cb-vrow[data-end]::before { bottom: 50%; }
.cb-vdot { position: absolute; left: var(--main); top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--pop); box-shadow: inset 0 0 0 2px #8a8a8a; z-index: 1; }
.cb-vrow[data-live] .cb-vdot { background: #f4f4f4; box-shadow: 0 0 0 3px #f4f4f42e; }
.cb-vrow[aria-selected="true"] .cb-vdot { box-shadow: inset 0 0 0 2px #f4f4f4; }
/* the draft: its own lane, joining the live line where it forked */
.cb-vrow[data-lane="branch"] .cb-vdot { left: var(--side); box-shadow: inset 0 0 0 2px #8a8a8a; background: var(--pop); }
.cb-vrow[data-lane="branch"][aria-selected="true"] .cb-vdot { box-shadow: inset 0 0 0 2px #f4f4f4; }
.cb-vbranch { position: absolute; left: calc(var(--side) - 1px); top: 0; bottom: 0; width: 2px; background: #5a5a5a; }
.cb-vrow[data-first] .cb-vbranch { top: 50%; }
.cb-vrow[data-last] .cb-vbranch { bottom: -1px; width: auto; left: var(--main); right: auto; width: calc(var(--side) - var(--main) + 1px); background: none;
  border-right: 2px solid #5a5a5a; border-bottom: 2px solid #5a5a5a; border-bottom-right-radius: 12px; }
.cb-vrow[data-first][data-last] .cb-vbranch { top: 50%; }
.cb-vfoot { display: grid; gap: 8px; margin: 2px -6px 0; padding: 10px 12px 12px; border-top: 1px solid #2a2a2a; }
.cb-vfoot p { margin: 0; font-size: 12px; color: #8a8a8a; line-height: 1.45; }
.cb-vfoot .cb-primary { justify-content: center; height: 32px; padding: 0 14px; }


/* what the agent will act on: the whole timeline, or the selection */
.cb-context { display: flex; margin: -3px 0 8px -4px; }
.cb-ctx { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 24px; padding: 0 4px 0 8px; border-radius: 6px; background: #343434; color: #d6d6d6; font-size: 12px; box-shadow: inset 0 0 0 1px #ffffff0d; }
.cb-ctx .ic { width: 13px; height: 13px; flex: none; color: #9a9a9a; }
.cb-ctx b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-ctx em { font-style: normal; color: #8a8a8a; white-space: nowrap; }
.cb-ctx button { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; color: #9a9a9a; }
.cb-ctx button:hover { background: #444; color: #f4f4f4; }
.cb-ctx button .ic { width: 11px; height: 11px; }
.cb-ctx:not(:has(button)) { padding-right: 9px; }
.cb-msg-user .cb-ctx-tag { display: block; margin-bottom: 3px; color: #8a8a8a; font-size: 11.5px; }

/* a companion under the frame is placed by fitFrame, as one centred stack with it */
.cb-viewer > [data-below] { position: absolute; transition: top .28s var(--ease), left .28s var(--ease); }