/* =================================================================
   video.css — the /video page's own parts
   -----------------------------------------------------------------
   The rail, the nav, .wrap, .act-btn and the tokens are security.css's,
   which video.html links first. Everything here is prefixed vid- so
   nothing in it can reach back into that page. Logical properties
   throughout: the page is read right to left in Arabic, and
   margin-left on a row would sit on the wrong side.
   rest of the page is a gallery. The stage is dark in both themes.

/* 2026-10-23, the owner: "when sending a message it goes into chat mode like
   agent". The page opens on one prompt, centred, as the builder does; the
   first message turns it into a conversation with the composer docked under
   the log and the player beside it. The page follows the theme now — a dark
   stage in both themes read as a different product from the builder it sits
   next to. Only the player stays dark: it is a screen. */

.wrap:has(.vid-app){max-width:1320px}
.vid-app{--vid-a:#7c5cff;--vid-grad:linear-gradient(100deg,#7c5cff,#b65cff 50%,#ff5ca8);
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;
  padding:clamp(28px,9vh,96px) 0 48px}
.vid-app>.vid-intro{width:100%;max-width:760px}
.vid-app>.vid-humans{width:100%;grid-column:1/-1}
.vid-app-glow{position:absolute;inset:-40px -10% auto;height:620px;z-index:-1;pointer-events:none;opacity:.55;
  background:radial-gradient(38% 42% at 38% 58%,rgba(124,92,255,.28),transparent 70%),
    radial-gradient(34% 38% at 64% 62%,rgba(255,92,168,.2),transparent 70%)}
:root[data-theme="dark"] .vid-app-glow{opacity:.9}
.vid-chat{position:relative;width:100%;max-width:760px;min-width:0;display:flex;flex-direction:column}
.vid-stage-col,.vid-chat-log{display:none}

.vid-pro{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:linear-gradient(100deg,#7c5cff,#ff5ca8);border-radius:999px;padding:2px 8px}
.vid-intro{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:26px}
.vid-hero-kick{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);font-size:.78rem;font-weight:600;color:var(--ink-2)}
.vid-hero-h{margin:20px 0 12px;font-family:Jost,Inter,sans-serif;font-weight:600;font-size:clamp(2.1rem,4.6vw,3.4rem);
  line-height:1.05;letter-spacing:-.035em;color:var(--ink)}
.vid-hero-h em{font-style:normal;background:var(--vid-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vid-hero-sub{max-width:540px;margin:0;font-size:1rem;line-height:1.55;color:var(--ink-2)}

/* ---- the composer: the hero before the first message, the dock after ---- */
.vid-composer{width:100%;text-align:start;border-radius:24px;padding:14px 14px 12px;background:var(--card);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(var(--wash-rgb),.05),0 28px 60px -32px rgba(60,40,140,.38);transition:border-color .2s,box-shadow .2s}
.vid-wallet{display:flex;align-items:center;gap:9px;min-height:50px;margin:0 0 7px;padding:7px 9px;border:1px solid color-mix(in srgb,var(--vid-a) 18%,var(--line));
  border-radius:15px;background:linear-gradient(105deg,color-mix(in srgb,var(--vid-a) 7%,var(--card)),var(--card) 70%);font-variant-numeric:tabular-nums}
.vid-wallet-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:11px;color:#fff;background:linear-gradient(140deg,#7c5cff,#c25bfa 55%,#ff5ca8);
  box-shadow:0 5px 14px -6px rgba(124,92,255,.75)}
.vid-wallet-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vid-wallet-balance{display:flex;flex-direction:column;line-height:1.15;min-width:57px}
.vid-wallet-balance small{font-size:.63rem;color:var(--mut)}
.vid-wallet-balance strong{font-size:.88rem;color:var(--ink);font-weight:750}
.vid-wallet-quote{margin-inline-start:auto;padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--vid-a) 9%,var(--card));
  color:var(--ink-2);font-size:.7rem;font-weight:650;white-space:nowrap}
.vid-wallet-topups{display:flex;align-items:center;gap:5px}
.vid-wallet-topups[hidden]{display:none}
.vid-wallet-add{border:1px solid color-mix(in srgb,var(--vid-a) 28%,var(--line));border-radius:999px;background:var(--card);color:var(--ink-2);
  padding:5px 8px;font:inherit;font-size:.68rem;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.vid-wallet-add:hover{background:color-mix(in srgb,var(--vid-a) 9%,var(--card));border-color:var(--vid-a);color:var(--ink)}
.vid-wallet-add:disabled{opacity:.5;cursor:wait}
.vid-wallet-status{color:var(--mut);font-size:.66rem;line-height:1.25}
.vid-wallet-status:empty{display:none}
.vid-composer:focus-within{border-color:color-mix(in srgb,var(--vid-a) 55%,var(--line));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--vid-a) 14%,transparent),0 28px 60px -32px rgba(60,40,140,.45)}
.vid-composer textarea{display:block;width:100%;min-height:88px;max-height:220px;resize:none;border:0;background:transparent;color:var(--ink);
  font:inherit;font-size:1.05rem;line-height:1.55;padding:6px 6px 10px;outline:none}
.vid-composer textarea::placeholder{color:var(--mut)}
.vid-row{display:flex;align-items:center;gap:8px}
/* One line of settings that scrolls sideways and fades at its end: stacked, they stood six pills tall above Generate. */
.vid-tools{display:flex;align-items:center;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;
  mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent)}
html[dir=rtl] .vid-tools{mask-image:linear-gradient(270deg,#000 calc(100% - 18px),transparent)}
.vid-tools::-webkit-scrollbar{display:none}
.vid-tools>*{flex:none}
.vid-tools[hidden],.vid-attach[hidden]{display:none}
.vid-send{display:flex;align-items:center;gap:8px;flex:none;margin-inline-start:auto}
.vid-active-top .sp{flex:1}

.vid-seg{display:inline-flex;border-radius:999px;padding:2px;background:var(--paper-2);border:1px solid var(--line)}
.vid-seg button{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--ink-2);
  font:inherit;font-size:.78rem;font-weight:600;height:26px;padding:0 10px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.vid-seg button:hover{color:var(--ink)}
.vid-seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.vid-seg .sh{display:inline-block;border:1.5px solid currentColor;border-radius:2px}
.vid-seg .sh.land{width:13px;height:8px}
.vid-seg .sh.port{width:8px;height:12px}
.vid-seg .sh.sq{width:10px;height:10px}

/* a setting is a pill: icon, name, value — the select itself sits on top of it, so the pill opens the native picker */
.vid-len{position:relative;display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 11px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-2);font-size:.78rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.vid-len:hover{background:var(--paper-2);border-color:var(--line-hover)}
.vid-len svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vid-len select{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--ink);font:inherit;font-size:.78rem;
  font-weight:600;padding:0;cursor:pointer;outline:none;field-sizing:content}
.vid-len select option{color:var(--ink);background:var(--card)}
.vid-len[hidden]{display:none}
/* In a narrow composer a pill is its icon and its value, and the title names it. */
.vid-composer{container-type:inline-size}
@container (max-width:740px){ .vid-len-k{display:none} }

.vid-attach,.vid-voice-btn{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;cursor:pointer;padding:0;
  border:1px solid var(--line);background:transparent;color:var(--ink-2);transition:background .15s,color .15s,border-color .15s}
.vid-attach:hover,.vid-voice-btn:hover{background:var(--paper-2);color:var(--ink);border-color:var(--line-hover)}
.vid-attach svg,.vid-voice-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vid-voice-btn[hidden]{display:none}

/* images: the tray of thumbnails, the glow when files are dragged over */
.vid-atts{display:flex;gap:8px;flex-wrap:wrap;padding:2px 2px 10px}
.vid-atts[hidden]{display:none}
.vid-att{position:relative;width:60px;height:60px;border-radius:14px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line)}
.vid-att img{width:100%;height:100%;object-fit:cover;display:block}
.vid-att.uploading img{opacity:.45}
.vid-att .vid-spin{position:absolute;left:50%;top:50%;margin:-7px 0 0 -7px}
.vid-att em{position:absolute;inset:0;display:grid;place-items:center;background:rgba(200,30,40,.55);color:#fff;font-style:normal;font-weight:800}
.vid-att button{position:absolute;top:3px;inset-inline-end:3px;width:20px;height:20px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.65);color:#fff;font-size:.8rem;line-height:20px;padding:0}
.vid-att-add{width:60px;height:60px;border-radius:14px;border:1.5px dashed var(--line-hover);background:transparent;color:var(--mut);
  font-size:1.4rem;cursor:pointer}
.vid-att-add:hover{color:var(--ink)}
/* the word of the person sending faces: under the photos, quiet until a send without it */
.vid-consent{display:flex;align-items:flex-start;gap:8px;margin:0 4px 8px;padding:8px 10px;border-radius:12px;background:var(--paper-2);
  font-size:.78rem;line-height:1.45;color:var(--ink-2);cursor:pointer;transition:box-shadow .2s,background .2s}
.vid-consent[hidden]{display:none}
.vid-consent input{flex:none;width:16px;height:16px;margin:1px 0 0;accent-color:#7c5cff;cursor:pointer}
.vid-consent.ask{box-shadow:0 0 0 2px var(--danger);background:color-mix(in srgb,var(--danger) 8%,var(--paper-2))}
.vid-composer.drop{border-color:var(--vid-a);box-shadow:0 0 0 4px color-mix(in srgb,var(--vid-a) 25%,transparent)}

.vid-count{font-size:.72rem;color:var(--mut);font-variant-numeric:tabular-nums}
.vid-count[hidden]{display:none}
.vid-go{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;border:0;border-radius:999px;padding:0 18px 0 14px;
  background:linear-gradient(100deg,#7c5cff,#b65cff 50%,#ff5ca8);color:#fff;font:inherit;font-size:.88rem;font-weight:700;white-space:nowrap;
  cursor:pointer;text-decoration:none;box-shadow:0 10px 24px -10px rgba(182,92,255,.75),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s,box-shadow .15s,filter .15s}
.vid-go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vid-go:hover{transform:translateY(-1px);filter:brightness(1.07)}
.vid-go:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:none;box-shadow:none}

.vid-msg{margin-top:8px;padding:0 6px;font-size:.84rem;color:var(--ink-2)}
.vid-msg[hidden]{display:none}
.vid-msg.err{color:var(--danger)}
.vid-msg.ok{color:#16a34a}
:root[data-theme="dark"] .vid-msg.ok{color:#5be3a7}

.vid-ideas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.vid-ideas button{border:1px solid var(--line);background:var(--card);color:var(--ink-2);font:inherit;
  font-size:.8rem;font-weight:500;padding:7px 14px;border-radius:999px;cursor:pointer;transition:all .15s}
.vid-ideas button:hover{color:var(--ink);border-color:var(--line-hover);transform:translateY(-1px)}
.vid-ideas[hidden],.vid-composer[hidden]~.vid-ideas{display:none}

/* ---- the gate: sign in, upgrade, or not yet — where the prompt would be ---- */
.vid-gate{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;border-radius:22px;padding:28px 22px;text-align:center;
  margin-bottom:14px;background:var(--card);border:1px solid var(--line);box-shadow:0 28px 60px -32px rgba(60,40,140,.38)}
.vid-gate[hidden]{display:none}
.vid-gate b{font-size:1.05rem;color:var(--ink)}
.vid-gate span{font-size:.88rem;color:var(--ink-2)}
.vid-gate .vid-go{margin-top:8px;padding:0 20px}

/* ---- chat mode ---- */
.ag:not(.is-new){grid-template-columns:minmax(0,1fr) minmax(280px,420px);justify-items:stretch;align-items:stretch;gap:28px;
  padding:0 0 24px;height:calc(100dvh - 40px);min-height:540px}
/* no header bar above it since "Back to builder" went (2026-10-24): the conversation takes the whole screen */
.wrap:has(.ag:not(.is-new)){padding-top:20px}
.ag:not(.is-new):has(.vid-stage[data-shape="16:9"]){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.ag:not(.is-new):has(.vid-stage[data-shape="1:1"]){grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
.ag:not(.is-new) .vid-app-glow{opacity:.25}
.is-chat .vid-chat{max-width:none;min-height:0}
.is-chat .vid-intro,.is-chat .vid-ideas{display:none}
/* the thread's name, and the way out to a new one */
.vid-chat-head{display:none}
.is-chat .vid-chat-head{display:flex;align-items:center;gap:10px;padding:2px 2px 10px;border-bottom:1px solid var(--line)}
.vid-chat-ttl{flex:1;min-width:0;font-size:.9rem;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vid-new{display:inline-flex;align-items:center;gap:6px;flex:none;height:32px;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.vid-new:hover{background:var(--paper-2);border-color:var(--line-hover)}
.vid-new svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* the open thread in the rail's Recent */
.ag-chat-item.on{background:var(--paper-2);color:var(--ink);font-weight:600}
.is-chat .vid-chat-log{display:flex;flex-direction:column;gap:16px;flex:1;min-height:0;overflow-y:auto;padding:12px 6px 18px;
  scrollbar-width:thin;scrollbar-color:rgba(var(--wash-rgb),.16) transparent}
.is-chat .vid-composer{border-radius:20px;padding:10px}
.is-chat .vid-wallet{min-height:40px;margin-bottom:4px;padding:4px 6px;gap:6px}
.is-chat .vid-wallet-icon{width:28px;height:28px}
.is-chat .vid-wallet-quote{padding:4px 6px;font-size:.65rem}
.is-chat .vid-wallet-add{padding:4px 6px;font-size:.64rem}
.is-chat .vid-wallet-status{max-width:110px}
.is-chat .vid-composer textarea{min-height:28px;font-size:.98rem;padding:6px 6px 8px}
.is-chat .vid-go{width:38px;padding:0}
.is-chat .vid-go span{display:none}
/* The log already says it is ready; the line under the composer is kept for what went wrong. */
.is-chat .vid-msg.ok{display:none}
.is-chat .vid-stage-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:0;min-width:0}

.vid-chat-message{margin:0;font-size:.96rem;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap;animation:vidIn .35s var(--ease) both}
.vid-chat-message.user{align-self:flex-end;max-width:min(86%,560px);padding:11px 15px;color:var(--ink);background:var(--paper-2);
  border:1px solid var(--line);border-radius:18px;border-end-end-radius:6px;animation-name:vidSent}
/* The reply is text beside the brand's mark, not a second bubble — the builder's own replies read the same way. */
.vid-chat-message.assistant{position:relative;align-self:stretch;padding-block:2px;padding-inline:36px 4px;color:var(--ink)}
.vid-chat-message.assistant::before{content:"";position:absolute;top:1px;inset-inline-start:0;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,#7c5cff,#ff5ca8);box-shadow:0 4px 12px -4px rgba(182,92,255,.7)}
.vid-chat-message.assistant::after{content:"";position:absolute;top:9px;inset-inline-start:9px;width:6px;height:6px;border-radius:50%;background:#fff}
.vid-chat-message.pending{color:var(--ink-2)}
/* Souqi typing: three dots breathing in turn, until the answer takes their place */
.vid-dots{display:inline-flex;gap:4px;align-items:center;height:1.6em}
.vid-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-2);opacity:.35;animation:vidDot 1.2s ease-in-out infinite}
.vid-dots i:nth-child(2){animation-delay:.15s}
.vid-dots i:nth-child(3){animation-delay:.3s}
@keyframes vidDot{30%{opacity:1;transform:translateY(-2px)}60%{opacity:.35;transform:none}}
@keyframes vidIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes vidSent{from{opacity:0;transform:translateY(14px) scale(.95)}60%{opacity:1;transform:translateY(-2px) scale(1.01)}to{opacity:1;transform:none}}

/* ---- a project's versions: a chip in the chat for each, a switcher under the player ---- */
.vid-ver{display:flex;align-items:center;gap:10px;align-self:flex-start;margin-inline-start:36px;padding:6px 14px 6px 6px;border-radius:14px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;text-align:start;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s;animation:vidIn .35s var(--ease) both}
.vid-ver:hover{border-color:var(--line-hover);transform:translateY(-1px)}
.vid-ver.on{border-color:#7c5cff;box-shadow:0 0 0 3px color-mix(in srgb,#7c5cff 16%,transparent)}
.vid-ver-img{position:relative;flex:none;width:38px;height:52px;border-radius:9px;overflow:hidden;background:#07080c}
.vid-ver-img img{width:100%;height:100%;object-fit:cover;display:block}
.vid-ver-img i{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.25)}
.vid-ver-img svg{width:16px;height:16px;fill:#fff}
.vid-ver-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.vid-ver-t b{font-size:.86rem;font-weight:600}
.vid-ver-t small{font-size:.74rem;color:var(--mut)}
.vid-ver.on .vid-ver-t small{color:#7c5cff;font-weight:600}
.vid-vers{display:inline-flex;align-items:center;gap:2px;flex:none;height:32px;padding:0 2px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.vid-vers[hidden]{display:none}
.vid-vers button{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.vid-vers button:hover:not(:disabled){background:var(--paper-2)}
.vid-vers button:disabled{opacity:.3;cursor:default}
.vid-vers svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html[dir=rtl] .vid-vers svg{transform:scaleX(-1)}
.vid-vers span{font-size:.76rem;font-weight:600;color:var(--ink-2);padding:0 4px;white-space:nowrap;font-variant-numeric:tabular-nums}
/* a project's card while its next version is made: the last one stays on the poster */
.vid-editing{position:absolute;z-index:1;bottom:10px;inset-inline-start:10px;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  font-size:.72rem;font-weight:700;color:#fff;background:rgba(0,0,0,.6);backdrop-filter:blur(8px)}
.vid-editing .vid-spin{width:11px;height:11px;border-color:rgba(255,255,255,.3);border-top-color:#fff}

/* ---- thinking: the director's notes, a quiet column under a fold ---- */
.vid-think{margin-inline-start:36px;animation:vidIn .35s var(--ease) both}
.vid-think summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;font-size:.84rem;font-weight:600;
  color:var(--ink-2);padding:2px 0;user-select:none}
.vid-think summary::-webkit-details-marker{display:none}
.vid-think summary:hover{color:var(--ink)}
.vid-think summary svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.vid-think[open] summary svg{transform:rotate(90deg)}
html[dir=rtl] .vid-think:not([open]) summary svg{transform:scaleX(-1)}
.vid-think.live .vid-think-ttl{background:linear-gradient(90deg,var(--ink-2) 30%,var(--ink) 50%,var(--ink-2) 70%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:vidGlint 2.2s linear infinite}
@keyframes vidGlint{from{background-position:100% 0}to{background-position:-150% 0}}
.vid-think-body{margin-top:6px;padding-inline-start:12px;border-inline-start:2px solid var(--line)}
.vid-think-body p{margin:0 0 7px;font-size:.88rem;line-height:1.55;color:var(--ink-2);overflow-wrap:anywhere;animation:vidIn .3s var(--ease) both}
.vid-think-body p:last-child{margin-bottom:0}

/* ---- the job being made: the assistant's turn, phase by phase ---- */
.vid-active{margin-inline-start:36px;border:1px solid var(--line);border-radius:16px;padding:12px 14px 14px;background:var(--card);
  animation:vidIn .35s var(--ease) both}
.vid-active[hidden]{display:none}
.vid-active-top{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--ink)}
.vid-cancel{border:1px solid var(--line);background:transparent;color:var(--ink-2);border-radius:999px;padding:4px 12px;font:inherit;
  font-size:.78rem;font-weight:600;cursor:pointer}
.vid-cancel:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.vid-steps{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.vid-steps li{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--ink-2);animation:vidIn .3s var(--ease) both}
.vid-steps i{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:#7c5cff;color:#fff;box-sizing:border-box}
.vid-steps i svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vid-steps li.busy{color:var(--ink);font-weight:500}
.vid-steps li.busy i{background:transparent;border:2px solid #7c5cff;border-top-color:transparent;animation:vidSpin .9s linear infinite}
.vid-steps li.busy i svg{display:none}
.vid-bar{height:4px;border-radius:999px;background:var(--paper-2);overflow:hidden;margin:12px 0 0}
.vid-bar i{position:relative;display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7c5cff,#ff5ca8);transition:width .6s var(--ease);overflow:hidden}
.vid-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:vidShine 1.6s linear infinite}
@keyframes vidShine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.vid-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:#a06bff;
  animation:vidSpin .9s linear infinite;flex:none}
@keyframes vidSpin{to{transform:rotate(360deg)}}

/* ---- the stage: a screen, dark in both themes, shaped like the video ---- */
.vid-stage{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:22px;
  background:radial-gradient(80% 60% at 50% 40%,#171427,#06070b);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 70px -34px rgba(20,10,60,.7)}
.vid-stage[data-shape="9:16"]{height:100%;max-width:100%;aspect-ratio:9/16}
.vid-stage[data-shape="16:9"]{width:100%;max-height:100%;aspect-ratio:16/9}
.vid-stage[data-shape="1:1"]{width:100%;max-height:100%;aspect-ratio:1}
.vid-stage.busy::before{content:"";position:absolute;inset:-40%;filter:blur(30px);animation:vidSpin 6s linear infinite;
  background:conic-gradient(from 0deg,transparent,rgba(124,92,255,.4),transparent 30%,rgba(255,92,168,.3),transparent 60%)}
.vid-stage-empty{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px;text-align:center;color:#a7acbd}
.vid-stage-empty[hidden]{display:none}
.vid-stage-empty b{font-size:1rem;color:#fff}
.vid-stage-empty>span:last-child{max-width:220px;font-size:.84rem;line-height:1.5}
.vid-stage-mark{display:grid;place-items:center;width:54px;height:54px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.08)}
.vid-stage-mark svg{width:20px;height:20px;fill:#fff}
.vid-stage.busy .vid-stage-mark{animation:vidPulse 1.6s ease-in-out infinite}
.vid-stage-player{position:relative;display:block;width:100%;height:100%;object-fit:contain;background:#000}
.vid-stage-player[hidden]{display:none}
.vid-stage-status{position:absolute;top:12px;inset-inline:12px;width:max-content;max-width:calc(100% - 24px);margin-inline:auto;padding:7px 12px;border-radius:999px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:.76rem;font-weight:600;text-align:center;backdrop-filter:blur(10px)}
.vid-stage-status[hidden]{display:none}
.vid-stage-bar{display:flex;align-items:center;gap:10px;width:100%}
.vid-stage-bar[hidden]{display:none}
.vid-stage-caption{flex:1;min-width:0;margin:0;font-size:.82rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vid-stage-dl{display:inline-flex;align-items:center;gap:6px;flex:none;height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:.8rem;font-weight:600;text-decoration:none}
.vid-stage-dl:hover{border-color:var(--line-hover);background:var(--paper-2)}
.vid-stage-dl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ag:not(.is-new) .vid-humans{display:none}

/* ---- made with Souqi: real people, generated ---- */
.vid-humans{margin-bottom:34px}
.vid-humans .vid-tpl-head{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:16px;text-align:center}
.vid-humans .vid-tpl-head .vid-h2{margin:0}
.vid-hum-row{overflow:hidden;direction:ltr}
.vid-hum-track{display:flex;width:max-content;animation:vidHumSlideRight 58s linear infinite}
.vid-hum-set{display:flex;flex:none;gap:14px;padding-inline-end:14px}
.vid-hum-row:hover .vid-hum-track,.vid-hum-row:focus-within .vid-hum-track,.vid-hum-row:active .vid-hum-track{animation-play-state:paused}
.vid-hum{position:relative;display:block;flex:0 0 clamp(200px,22vw,250px);aspect-ratio:9/16;border:0;padding:0;border-radius:22px;overflow:hidden;background:#07080c;
  cursor:pointer;text-align:start;color:#fff;font:inherit;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
@keyframes vidHumSlideRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.vid-hum:hover{transform:translateY(-4px);box-shadow:0 26px 50px -22px rgba(0,0,0,.6)}
.vid-hum.loud{box-shadow:0 0 0 3px #a06bff,0 26px 50px -22px rgba(124,92,255,.6)}
.vid-hum video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vid-hum::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 22%,transparent 55%,rgba(0,0,0,.85))}
.vid-hum-tag{position:absolute;z-index:1;top:12px;inset-inline-start:12px;padding:5px 10px;border-radius:999px;font-size:.68rem;font-weight:700;
  letter-spacing:.02em;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px)}
.vid-hum-snd{position:absolute;z-index:1;top:10px;inset-inline-end:10px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.4);backdrop-filter:blur(8px)}
.vid-hum-snd svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vid-hum-snd svg path:first-child{fill:#fff}
.vid-hum-snd .w{display:none}
.vid-hum.loud .vid-hum-snd .w{display:block}.vid-hum.loud .vid-hum-snd .x{display:none}
.vid-hum.loud .vid-hum-snd{background:#7c5cff}
.vid-hum-cap{position:absolute;z-index:1;inset-inline:14px;bottom:14px;display:flex;flex-direction:column;gap:3px}
.vid-hum-cap b{font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.vid-hum-cap small{font-size:.74rem;line-height:1.35;color:rgba(255,255,255,.75)}

/* ---- section heads ---- */
.vid-sec-head{display:flex;align-items:baseline;gap:10px}
.vid-h2{font-family:Jost,Inter,sans-serif;font-size:1.35rem;font-weight:600;letter-spacing:-.02em;margin:6px 0 14px}

/* ---- your videos: a wall of posters, the words under each ---- */
.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin-bottom:40px}
.vid-card{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:20px;overflow:hidden;background:var(--card);
  border:1px solid var(--line);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s}
.vid-card:not(.sk):hover{transform:translateY(-4px);border-color:var(--line-hover);box-shadow:0 26px 50px -26px rgba(30,20,70,.45)}
.vid-card.sk{aspect-ratio:4/6;background:var(--paper-2);animation:vidPulse 1.4s ease-in-out infinite}
@keyframes vidPulse{50%{opacity:.55}}

/* Every card is 4:5 whatever the video's shape, so the rows line up; the poster is contained, never cropped — the
   poster is the first scene and cropping cut off its headline — over a blur of itself, so a 9:16 video fills its
   card instead of sitting between two black bars. */
.vid-thumb{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;width:100%;
  border:0;padding:0;margin:0;background:#07080c;color:#fff;cursor:pointer;overflow:hidden;isolation:isolate}
.vid-thumb img{position:relative;width:100%;height:100%;object-fit:contain;display:block;transition:transform .5s var(--ease)}
.vid-thumb .vid-thumb-bg{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(22px) saturate(1.3) brightness(.7);z-index:-1}
.vid-thumb::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 26%,transparent 70%,rgba(0,0,0,.4))}
.vid-card:hover .vid-thumb img:not(.vid-thumb-bg){transform:scale(1.04)}
.vid-thumb.busy,.vid-thumb.dead{cursor:default;flex-direction:column;gap:10px}
.vid-thumb.busy b,.vid-thumb.dead b{font-size:.84rem;font-weight:600;color:rgba(255,255,255,.85)}
.vid-thumb.busy{background:radial-gradient(70% 55% at 50% 45%,rgba(124,92,255,.45),#07080c)}
.vid-thumb.busy .vid-spin{width:26px;height:26px;border-width:3px;border-color:rgba(255,255,255,.2);border-top-color:#fff}
.vid-thumb.dead{background:radial-gradient(70% 55% at 50% 45%,rgba(220,60,90,.28),#0b0b10)}
.vid-thumb.dead i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-style:normal;font-weight:800;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
/* An SVG, centred by flex, and not a CSS border triangle: i18n.js mirrors
   physical CSS on a right-to-left page, and the border triangle came out
   pointing left in Arabic. A play button points right in every language. */
.vid-play{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.35);
  box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0;transform:scale(.9);transition:opacity .2s,transform .25s var(--ease)}
.vid-play svg{width:20px;height:20px;fill:#fff}
.vid-card:hover .vid-play,.vid-thumb:focus-visible .vid-play{opacity:1;transform:none}
@media (hover:none){ .vid-play{opacity:1;transform:none} }
.vid-dur,.vid-tag{position:absolute;z-index:1;top:10px;padding:3px 8px;border-radius:999px;font-size:.7rem;font-weight:700;
  color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);font-variant-numeric:tabular-nums}
.vid-dur{inset-inline-end:10px}
.vid-tag{inset-inline-start:10px;background:linear-gradient(100deg,#7c5cff,#ff5ca8)}
.vid-player{display:block;width:100%;aspect-ratio:16/9;background:#000}

.vid-card-body{display:flex;flex-direction:column;gap:5px;padding:12px 12px 10px;flex:1;min-width:0}
.vid-brief{font-size:.88rem;font-weight:500;line-height:1.4;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;margin:0}
.vid-active .vid-brief{color:var(--ink-2)}
.vid-err{font-size:.78rem;line-height:1.4;color:var(--danger);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vid-credits{font-size:.72rem;color:var(--mut);margin:0;overflow-wrap:anywhere;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vid-credits a{color:inherit;text-decoration:underline}
/* An edit's card: what the plan changed, under the words that asked for it. */
.vid-edit-note{font-size:.76rem;color:var(--ink-2);margin:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vid-card-foot{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px;min-width:0}
.vid-meta{flex:1;min-width:0;font-size:.72rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vid-acts{display:inline-flex;gap:2px;flex:none}
.vid-ic{display:inline-grid;grid-auto-flow:column;align-items:center;justify-content:center;gap:5px;height:30px;min-width:30px;padding:0 7px;
  border:0;border-radius:9px;background:transparent;color:var(--ink-2);font:inherit;font-size:.76rem;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background .15s,color .15s}
.vid-ic:hover{background:var(--paper-2);color:var(--ink)}
.vid-ic.danger:hover{color:var(--danger)}
.vid-ic.wide{border:1px solid var(--line)}
.vid-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vid-ic:disabled{opacity:.5;cursor:default}

.vid-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:44px 20px;text-align:center;
  border:1px dashed var(--line);border-radius:18px}
.vid-empty b{font-size:1rem}
.vid-empty span{font-size:.85rem;color:var(--mut)}

/* ---- explore designs: a gallery, the title over the picture ---- */
.vid-tpl{margin-bottom:30px}
.vid-tpl-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vid-tpl-head .vid-h2{margin-bottom:12px}
.vid-tpl-head .sp{flex:1}
.vid-tpl-n,.vid-tpl-src{font-size:.8rem;color:var(--mut)}
.vid-tpl-src a{color:inherit;text-decoration:underline}
.vid-tpl-cats{display:flex;gap:6px;overflow-x:auto;padding:4px;margin-bottom:16px;scrollbar-width:none;
  width:max-content;max-width:100%;border-radius:999px;background:var(--paper-2);border:1px solid var(--line)}
.vid-tpl-cats::-webkit-scrollbar{display:none}
.vid-tpl-cats[hidden]{display:none}
.vid-tpl-cats button{flex:none;border:0;background:transparent;color:var(--ink-2);font:inherit;font-weight:600;
  font-size:.8rem;padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.vid-tpl-cats button:hover{color:var(--ink)}
.vid-tpl-cats button.on{background:var(--ink);color:var(--paper)}
.vid-tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.vid-tpl-card{position:relative;display:block;border:0;border-radius:18px;padding:0;background:#07080c;color:#fff;font:inherit;
  text-align:start;cursor:pointer;overflow:hidden;min-width:0;box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.vid-tpl-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -22px rgba(0,0,0,.6)}
.vid-tpl-card:focus-visible{outline:2px solid #a06bff;outline-offset:3px}
/* The ring is a box-shadow, not a thicker border: a border that grows by a
   pixel moves every card after it in the grid. */
.vid-tpl-card.on{box-shadow:0 0 0 3px #a06bff,0 24px 50px -22px rgba(124,92,255,.6)}
.vid-tpl-media{position:relative;display:block;aspect-ratio:16/10;background:#0b0d10;overflow:hidden}
.vid-tpl-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.92))}
.vid-tpl-media img,.vid-tpl-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.vid-tpl-card:hover .vid-tpl-media img,.vid-tpl-card:hover .vid-tpl-media video{transform:scale(1.04)}
.vid-tpl-media video{opacity:0;transition:opacity .25s var(--ease),transform .5s var(--ease)}
.vid-tpl-card.live .vid-tpl-media video{opacity:1}
.vid-tpl-ttl{position:absolute;inset-inline:14px;bottom:30px;font-size:.95rem;font-weight:700;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.vid-tpl-cat{position:absolute;inset-inline-start:14px;bottom:12px;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.7)}
/* "Use" appears on the card under the pointer, and stays on the picked one */
.vid-tpl-card::after{content:"Use this design";position:absolute;inset-inline-end:12px;top:12px;padding:6px 11px;border-radius:999px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.28);font-size:.72rem;font-weight:700;
  opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s}
.vid-tpl-card:hover::after{opacity:1;transform:none}
.vid-tpl-card.on::after{content:"Selected";opacity:1;transform:none;background:#7c5cff;border-color:#7c5cff}
.vid-tpl-more{display:block;margin:18px auto 0}

/* ---- the landing: the heading, the box and the ideas fill the first screen, centred, as the builder's do; the
   showcase and Recent wait below it. "make video html fit chatbox and everything when landing" (the owner, 2026-10-31):
   the showcase sat between the heading and the box and pushed the box under the fold. ---- */
/* then "make the vids fit up": no centring gap, and the showcase cards a size that fits under the box at 800px tall */
.ag.is-new{padding:clamp(12px,5vh,48px) 0 24px}
/* the slideshow takes the height the heading and the box leave, so all three are on the first screen at 630px tall as at 1080 */
.ag.is-new .vid-humans .vid-hum{flex:0 0 auto;width:auto;height:clamp(130px,calc(100dvh - 450px),300px);aspect-ratio:9/16;border-radius:18px}
.ag.is-new .vid-humans .vid-h2{font-size:1.1rem}
.ag.is-new .vid-humans{margin-bottom:18px}
.ag.is-new .vid-humans .vid-tpl-head{display:none}
/* the ideas are one row, scrolled sideways when they do not fit, instead of two rows pushing the slideshow down */
.ag.is-new .vid-ideas{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-top:14px;
  padding-bottom:2px;mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.ag.is-new .vid-ideas::-webkit-scrollbar{display:none}
.ag.is-new .vid-ideas button{flex:none}
@media (min-width:721px){ .ag.is-new .vid-ideas{justify-content:safe center} }
.ag.is-new .vid-humans .vid-tpl-head{margin-bottom:12px}
.ag.is-new .vid-humans .vid-hum-cap b{font-size:.84rem}
.ag.is-new .vid-humans .vid-hum-cap small{display:none}
.ag.is-new .vid-intro{margin-bottom:22px}
.ag.is-new .vid-hero-h{margin-top:0}
.ag:not(.is-new)~.vid-humans{display:none}
.vid-back{display:inline-flex;align-items:center;gap:4px;margin-bottom:4px;font-size:.84rem;font-weight:600;color:var(--ink-2);text-decoration:none}
.vid-back:hover{color:var(--ink)}
.vid-back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[dir=rtl] .vid-back svg{transform:scaleX(-1)}

/* the rail's wallet is a button in a meter row's clothes */
.vid-rail-wallet{width:100%;border:0;background:none;font:inherit;color:inherit;text-align:start;cursor:pointer;border-radius:10px}
.vid-rail-wallet:hover{background:var(--paper-2)}
.vid-rail-wallet .lab i{font-variant-numeric:tabular-nums}

/* ---- places: each pane ---- */
:root{--vid-screen:#07080c;--vid-screen-2:#12131b;--vid-screen-ink:#f3f3f7}
.vid-tabs{display:flex;width:max-content;max-width:100%;margin:0 auto 12px;padding:4px;gap:2px;border-radius:999px;
  background:var(--paper-2);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.vid-tabs::-webkit-scrollbar{display:none}
.vid-tabs a{position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;height:34px;padding:0 15px;border-radius:999px;
  color:var(--ink-2);font-size:.84rem;font-weight:600;text-decoration:none;transition:background var(--dur-chill) var(--ease-chill),color var(--dur-snappy) var(--ease-snappy)}
.vid-tabs a[hidden]{display:none}
.vid-tabs a:hover{color:var(--ink)}
.vid-tabs a.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-subtle)}
.vid-tabs svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vid-tabs a.on svg{stroke:#7c5cff}
.vid-tab-n{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--fade-subtle);font-style:normal;font-size:.68rem;
  line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.vid-tab-n[hidden]{display:none}
.vid-pane[hidden]{display:none}
/* not Create's: a transform mid-animation makes the pane the containing block of the composer fixed under it on a phone */
.vid-pane:not([data-pane="studio"]){animation:sqFadeUp var(--dur-chill) var(--ease-snappy) both}
.vid-pane-head{display:flex;flex-direction:column;align-items:center;gap:6px;padding:clamp(18px,5vh,48px) 0 22px;text-align:center}
.vid-pane-head.start{align-items:flex-start;text-align:start;padding-bottom:10px}
.vid-pane-h{margin:0;font-family:Jost,Inter,sans-serif;font-weight:600;font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.03em;color:var(--ink)}
.vid-pane-sub{max-width:560px;margin:0;font-size:.95rem;line-height:1.55;color:var(--ink-2)}

/* the filters over My videos: a count beside each, and a filter with nothing in it is not offered */
.vid-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.vid-filters[hidden],.vid-filters button[hidden]{display:none}
.vid-filters button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;
  transition:background var(--dur-snappy),color var(--dur-snappy),border-color var(--dur-snappy)}
.vid-filters button:hover{color:var(--ink);border-color:var(--line-hover)}
.vid-filters button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.vid-filters i{font-style:normal;font-size:.7rem;opacity:.65;font-variant-numeric:tabular-nums}
.vid-filters i:empty{display:none}
.vid-empty .vid-go{margin-top:12px}

/* Recent, under an empty composer; gone once the page is a conversation */
.vid-recent{margin-top:8px}
/* one row of four: auto-fill left the fourth alone on a second row at 1024px */
.vid-recent .vid-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.vid-recent[hidden],.ag:not(.is-new)~.vid-recent{display:none}
.vid-sec-head .sp{flex:1}
.vid-more{display:inline-flex;align-items:center;gap:4px;font-size:.84rem;font-weight:600;color:var(--ink-2);text-decoration:none}
.vid-more:hover{color:var(--ink)}
.vid-more svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[dir=rtl] .vid-more svg{transform:scaleX(-1)}

/* hover to play: the video fades in over its own poster once it is actually playing, so a slow start is no black flash */
.vid-thumb-live{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;z-index:0;
  transition:opacity var(--dur-chill) var(--ease-chill);pointer-events:none}
.vid-thumb.live .vid-thumb-live{opacity:1}
.vid-thumb.live .vid-play{opacity:0}

/* the dock: the video being made, while its own chat is elsewhere */
.vid-dock{position:fixed;z-index:20;bottom:calc(16px + env(safe-area-inset-bottom));inset-inline-end:16px;display:grid;
  grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:11px;row-gap:8px;align-items:center;
  width:min(320px,calc(100vw - 32px));padding:10px 12px 11px 10px;border-radius:18px;border:1px solid rgba(255,255,255,.1);
  background:color-mix(in srgb,var(--vid-screen) 92%,transparent);color:var(--vid-screen-ink);font:inherit;text-align:start;cursor:pointer;
  backdrop-filter:blur(14px);box-shadow:var(--sh-overlay),0 20px 50px -18px rgba(60,30,140,.55);
  animation:vidDockIn var(--dur-chill) var(--ease-snappy) both;transition:transform var(--dur-snappy) var(--ease-snappy)}
.vid-dock[hidden]{display:none}
.vid-dock:hover{transform:translateY(-2px)}
@keyframes vidDockIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.vid-dock-screen{position:relative;grid-row:1/3;width:40px;height:56px;border-radius:10px;overflow:hidden;
  background:radial-gradient(70% 60% at 50% 40%,#2a1f55,var(--vid-screen))}
.vid-dock-screen i{position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent,rgba(124,92,255,.7),transparent 35%,rgba(255,92,168,.5),transparent 65%);
  filter:blur(8px);animation:vidSpin 4s linear infinite}
.vid-dock-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.vid-dock-t b{font-size:.84rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vid-dock-t small{font-size:.72rem;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vid-dock-bar{height:3px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.vid-dock-bar i{display:block;height:100%;width:4%;border-radius:inherit;background:linear-gradient(90deg,#7c5cff,#ff5ca8);transition:width .6s var(--ease-chill)}

@media (max-width:900px){
  /* One column: the screen first, then the conversation, the composer held at the bottom of the viewport while it scrolls. */
  .ag:not(.is-new){display:flex;flex-direction:column;height:auto;min-height:0;gap:16px}
  .is-chat .vid-stage-col{order:-1}
  .vid-stage[data-shape="9:16"]{height:min(48vh,460px)}
  .vid-stage[data-shape="16:9"],.vid-stage[data-shape="1:1"]{max-height:48vh}
  .is-chat .vid-chat-log{overflow:visible;flex:none;padding-inline:0}
  /* Fixed, not sticky: .wrap and .ag-main are overflow-x:hidden, which makes each a scroll container of its own
     full height, so a sticky composer sat 130px under the fold and never stuck. */
  .is-chat .vid-chat{padding-bottom:120px}
  /* .fade-up's transform makes the section the composer's containing block while it plays, pinning it mid-page. */
  .ag:not(.is-new){animation:none}
  .is-chat .vid-composer{position:fixed;z-index:5;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;
    inset-inline-start:calc(var(--rail,44px) + 16px);inset-inline-end:16px;box-shadow:0 18px 50px -12px rgba(0,0,0,.35)}
}

@media (max-width:380px){ .vid-tabs svg{display:none} }

@media (max-width:720px){
  .vid-app{padding-top:22px}
  .vid-hero-h{font-size:2.1rem}
  .vid-hero-sub{font-size:.93rem}
  .vid-intro{margin-bottom:20px}
  .vid-hum{flex-basis:62vw}
  /* an empty box needs a line or two, not five: the slideshow under it is what fills a phone's first screen */
  .ag.is-new .vid-composer textarea{min-height:64px}
  .ag.is-new .vid-humans .vid-hum{height:clamp(140px,calc(100dvh - 430px),280px)}
  .vid-composer{padding:10px;border-radius:20px}
  .vid-wallet{flex-wrap:wrap;gap:6px}
  .vid-wallet-quote{margin-inline-start:auto}
  .vid-wallet-status{flex-basis:100%;padding-inline-start:38px}
  .vid-composer textarea{font-size:1rem;min-height:132px}
  /* Before the first message the settings get their own line: beside Generate there was room for one pill. */
  .ag.is-new .vid-row{flex-wrap:wrap}
  .ag.is-new .vid-tools{order:-1;flex-basis:100%;padding-bottom:4px}
  .ag.is-new .vid-send{margin-inline-start:auto}
  .vid-len-k{display:none}
  .vid-chat-message.user{max-width:92%}
  .vid-active,.vid-think,.vid-ver{margin-inline-start:0}
  .vid-tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .vid-tpl-ttl{font-size:.82rem;bottom:26px;inset-inline:10px}
  .vid-tpl-cat{inset-inline-start:10px;bottom:9px}
  .vid-tpl-card::after{display:none}
  .vid-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .vid-recent .vid-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* three tabs share the width: at their natural size My videos scrolled off a 375px phone */
  .vid-tabs{width:100%}
  .vid-tabs a{flex:1 1 0;min-width:0;justify-content:center;gap:5px;padding:0 8px;font-size:.8rem;white-space:nowrap}
  /* clear of the rail, which sits on the start side and covered the dock's first 44px in Arabic */
  .vid-dock{inset-inline-start:calc(var(--rail,44px) + 12px);inset-inline-end:12px;width:auto}
  .vid-card-body{padding:10px 10px 8px}
  .vid-brief{font-size:.82rem}
  .vid-meta{display:none}
  .vid-card-foot{justify-content:flex-end}
}

@media (prefers-reduced-motion:reduce){
  .vid-hum-track{animation:none}
  .vid-spin,.vid-card.sk,.vid-bar i::after,.vid-steps li.busy i,.vid-stage.busy::before,.vid-stage-mark,
  .vid-chat-message,.vid-active,.vid-steps li,.vid-think,.vid-think-body p,.vid-dots i{animation:none}
  .vid-think.live .vid-think-ttl{animation:none;background:none;color:var(--ink-2)}
  .vid-bar i,.vid-tpl-media video,.vid-tpl-card,.vid-card,.vid-thumb-live,.vid-dock-bar i{transition:none}
  .vid-pane,.vid-dock,.vid-dock-screen i{animation:none}
}

/* =================================================================
   The studio, 2026-10-31: "i want a wayyy better ui" (the owner).
   Settings are pictures you pick, the price is on the button, a video
   being made is a film filling in on its own screen, and a finished one
   is revealed rather than swapped in. Every colour a look card or the
   generation card uses is that look's own palette (--lk-*), set from
   presets.ts by the page, so what you pick is what the director gets.
   ================================================================= */
@property --vid-ang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* the light behind the hero drifts, slowly enough to read as light and not as motion */
.vid-app-glow{animation:vidAurora 22s ease-in-out infinite alternate}
@keyframes vidAurora{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(3%,-4%,0) scale(1.08);filter:hue-rotate(18deg)}}

/* the composer: a ring of the brand's light runs round it while you type */
.vid-composer{position:relative}
.vid-composer::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--vid-ang),#7c5cff,#ff5ca8,#ffb347,#7c5cff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity var(--dur-chill) var(--ease-chill)}
.vid-composer:focus-within::before{opacity:1;animation:vidRing 5s linear infinite}
@keyframes vidRing{to{--vid-ang:360deg}}
.vid-src[hidden]{display:none}

/* ---- chips: one per setting, its value in it ---- */
.vid-chip{display:inline-flex;align-items:center;gap:7px;flex:none;height:34px;padding:0 12px 0 9px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);font:inherit;font-size:.79rem;font-weight:600;white-space:nowrap;cursor:pointer;
  transition:background var(--dur-snappy) var(--ease-snappy),border-color var(--dur-snappy) var(--ease-snappy),box-shadow var(--dur-chill) var(--ease-chill)}
.vid-chip:hover{background:var(--paper-2);border-color:var(--line-hover);color:var(--ink)}
.vid-chip[aria-expanded="true"]{border-color:#7c5cff;color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,#7c5cff 18%,transparent)}
.vid-chip b{font-weight:650;color:var(--ink)}
.vid-chip-k{color:var(--mut);font-weight:550}
.vid-chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
@container (max-width:740px){ .vid-chip-k{display:none} }
.vid-sw{display:block;flex:none;width:18px;height:18px;border-radius:6px;
  background:radial-gradient(circle at 72% 28%,var(--lk-a) 0 26%,transparent 30%),linear-gradient(135deg,var(--lk-bg) 52%,var(--lk-b) 52%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 1px var(--line)}
.vid-shp{display:block;flex:none;width:9px;height:14px;border:1.6px solid currentColor;border-radius:3px}
.vid-shp[data-shape="16:9"]{width:16px;height:9px}
.vid-shp[data-shape="1:1"]{width:12px;height:12px}

/* ---- the price, on the button that spends it ---- */
.vid-go-price{font-style:normal;font-weight:650;margin-inline-start:2px;padding-inline-start:9px;border-inline-start:1px solid rgba(255,255,255,.38);
  font-variant-numeric:tabular-nums;opacity:.92}
.vid-go-price:empty,.is-chat .vid-go-price{display:none}

/* ---- the wallet: a quiet line under the composer, not a box above the words ---- */
.vid-wallet{min-height:0;margin:10px 0 0;padding:9px 4px 0;gap:8px;flex-wrap:wrap;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
.vid-wallet-icon{width:22px;height:22px;border-radius:7px;box-shadow:none}
.vid-wallet-icon svg{width:13px;height:13px}
.vid-wallet-balance{flex-direction:row;align-items:baseline;gap:6px;min-width:0}
.vid-wallet-balance small{font-size:.74rem}
.vid-wallet-balance strong{font-size:.84rem}
.vid-wallet-quote{display:none}
.is-chat .vid-wallet-quote{display:inline-flex}
.vid-wallet-more{margin-inline-start:auto;border:0;background:none;padding:4px 2px;color:#7c5cff;font:inherit;font-size:.76rem;font-weight:700;cursor:pointer}
.vid-wallet-more:hover{text-decoration:underline}
.vid-wallet-more[hidden]{display:none}
.vid-wallet:not(.open) .vid-wallet-topups{display:none}
.vid-wallet.open .vid-wallet-topups{flex-basis:100%;flex-wrap:wrap;padding-top:2px}
.vid-wallet-short{font-size:.74rem;font-weight:650;color:var(--danger)}
.vid-wallet-short[hidden]{display:none}
.vid-wallet.short .vid-wallet-balance strong{color:var(--danger)}
.is-chat .vid-wallet{margin-top:6px;padding-top:6px}

/* ---- the picker: above the docked composer, below the hero's ---- */
.vid-pop{position:absolute;z-index:30;inset-inline:0;bottom:calc(100% + 10px);max-height:min(62vh,540px);overflow:auto;overscroll-behavior:contain;
  padding:14px;border-radius:22px;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--sh-overlay),0 34px 80px -34px rgba(40,20,110,.5);animation:vidPopIn .22s var(--ease-snappy) both;transform-origin:50% 100%}
.ag.is-new .vid-pop{bottom:auto;top:calc(100% + 10px);transform-origin:50% 0}
.vid-pop[hidden]{display:none}
/* .vid-app isolates its own stacking, so an open picker drew under Recent, the section after it */
.vid-app:has(.vid-pop:not([hidden])){z-index:5}
@keyframes vidPopIn{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
.vid-pop-head{display:flex;align-items:center;gap:10px;margin:0 2px 12px}
.vid-pop-head b{flex:1;font-family:Jost,Inter,sans-serif;font-size:1.04rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.vid-pop-x{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:var(--paper-2);color:var(--ink-2);cursor:pointer}
.vid-pop-x:hover{color:var(--ink)}
.vid-pop-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.vid-pop-note{margin:12px 2px 0;font-size:.76rem;color:var(--mut)}
.vid-pop-k{grid-column:1/-1;margin:4px 2px 0;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.vid-pop button{font:inherit;color:var(--ink);cursor:pointer;text-align:start}
.vid-pop button:focus-visible{outline:2px solid #7c5cff;outline-offset:2px}

/* every option in every picker is one kind of tile: lifts under the pointer, ringed when picked */
.vid-look,.vid-shape-opt,.vid-len-opt,.vid-opt{border:1px solid var(--line);background:var(--paper-2);border-radius:16px;
  transition:border-color var(--dur-snappy) var(--ease-snappy),transform var(--dur-chill) var(--ease-chill),box-shadow var(--dur-chill) var(--ease-chill)}
.vid-look:hover,.vid-shape-opt:hover,.vid-len-opt:hover,.vid-opt:hover{border-color:var(--line-hover);transform:translateY(-2px)}
.vid-look.on,.vid-shape-opt.on,.vid-len-opt.on,.vid-opt.on{border-color:#7c5cff;background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,#7c5cff 18%,transparent)}

/* looks: each a tiny screen in its own colours, moving the way its camera does */
.vid-looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px}
.vid-look{display:flex;flex-direction:column;gap:6px;padding:6px 6px 9px}
.vid-look-scr{position:relative;display:block;aspect-ratio:4/3;border-radius:11px;overflow:hidden;background:var(--lk-bg);perspective:260px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.vid-look-scr .cam{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.vid-look-scr .l{position:absolute;left:38%;top:-30%;width:80%;height:100%;border-radius:50%;background:radial-gradient(closest-side,var(--lk-a),transparent);opacity:.6;filter:blur(5px)}
.vid-look-scr .s{position:absolute;left:24%;top:24%;width:40%;height:46%;border-radius:8px;background:var(--lk-sf);
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--lk-b) 70%,transparent),0 10px 18px -8px rgba(0,0,0,.6)}
.vid-look-scr .t{position:absolute;left:12%;bottom:12%;width:48%;height:5px;border-radius:3px;background:var(--lk-ink);box-shadow:0 -9px 0 -1px var(--lk-a)}
.vid-look-n{padding-inline:3px;font-size:.82rem;font-weight:650;line-height:1.2}
.vid-look-c{padding-inline:3px;font-size:.68rem;color:var(--mut);line-height:1.2}
.vid-look:hover .cam,.vid-look.on .cam,.vid-look:focus-visible .cam{animation:var(--cam,vidCamNone) 2.4s ease-in-out infinite alternate}
.vid-look-scr[data-cam="push"]{--cam:vidCamPush}
.vid-look-scr[data-cam="pull"]{--cam:vidCamPull}
.vid-look-scr[data-cam="drift"]{--cam:vidCamDrift}
.vid-look-scr[data-cam="orbit"]{--cam:vidCamOrbit}
.vid-look-scr[data-cam="tilt"]{--cam:vidCamTilt}
@keyframes vidCamPush{from{transform:scale(1)}to{transform:scale(1.24)}}
@keyframes vidCamPull{from{transform:scale(1.24)}to{transform:scale(1)}}
@keyframes vidCamDrift{from{transform:translateX(-9%)}to{transform:translateX(9%)}}
@keyframes vidCamOrbit{from{transform:rotateY(-26deg)}to{transform:rotateY(26deg)}}
@keyframes vidCamTilt{from{transform:rotateX(18deg)}to{transform:rotateX(-14deg)}}
@keyframes vidCamNone{from{filter:brightness(.8)}to{filter:brightness(1.2)}}

/* shapes, drawn at their ratio */
.vid-shapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vid-shape-opt{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-height:150px;padding:16px 10px 12px;text-align:center}
.vid-shape-opt b{font-size:.92rem;font-weight:700;font-variant-numeric:tabular-nums}
.vid-shape-opt small{font-size:.72rem;line-height:1.35;color:var(--mut)}
.vid-shp.big{width:38px;height:68px;margin-bottom:auto;border-width:2px;border-radius:9px;color:var(--ink-2);
  background:linear-gradient(160deg,color-mix(in srgb,#7c5cff 22%,transparent),color-mix(in srgb,#ff5ca8 16%,transparent))}
.vid-shp.big[data-shape="16:9"]{width:84px;height:47px;margin-top:10px}
.vid-shp.big[data-shape="1:1"]{width:58px;height:58px;margin-top:5px}
.vid-shape-opt.on .vid-shp.big{color:#7c5cff}

/* lengths, each with what it costs */
.vid-lens{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.vid-len-opt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px}
.vid-len-opt b{font-family:Jost,Inter,sans-serif;font-size:1.08rem;font-weight:600;font-variant-numeric:tabular-nums}
.vid-len-opt small{font-size:.72rem;color:var(--mut);font-variant-numeric:tabular-nums}

/* speed and quality: two rows of choices, each with what it means */
.vid-detail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.vid-opt{display:flex;flex-direction:column;gap:3px;padding:11px 12px}
.vid-opt[data-effort]{grid-column:span 3}
.vid-opt[data-quality]{grid-column:span 2}
.vid-opt b{font-size:.88rem;font-weight:700}
.vid-opt small{font-size:.72rem;line-height:1.35;color:var(--mut)}

/* ---- the film being made ---- */
.vid-gen{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:14px;padding:clamp(14px,4%,22px);overflow:hidden;color:#fff;isolation:isolate;
  background:radial-gradient(90% 55% at 50% 28%,color-mix(in srgb,var(--lk-a) 26%,transparent),transparent 72%),color-mix(in srgb,var(--lk-bg) 84%,transparent);
  backdrop-filter:blur(16px);animation:sqFadeUp var(--dur-chill) var(--ease-snappy) both;--fade-up-shift:0px}
.vid-gen[hidden]{display:none}
.vid-gen-aura{position:absolute;inset:-35%;z-index:-1;opacity:.5;filter:blur(42px);animation:vidSpin 16s linear infinite;
  background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--lk-a) 60%,transparent),transparent 32%,color-mix(in srgb,var(--lk-b) 50%,transparent),transparent 64%)}
.vid-gen-shots{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:8px;flex:1;min-height:0}
.vid-gen-shots i{position:relative;display:grid;place-items:center;width:clamp(30px,17%,62px);aspect-ratio:9/16;border-radius:9px;overflow:hidden;
  border:1px dashed rgba(255,255,255,.26);font-style:normal;font-size:.7rem;font-weight:700;color:rgba(255,255,255,.45);
  transition:border-color var(--dur-chill) var(--ease-chill)}
.vid-gen[data-shape="16:9"] .vid-gen-shots i{aspect-ratio:16/9;width:clamp(52px,21%,108px)}
.vid-gen[data-shape="1:1"] .vid-gen-shots i{aspect-ratio:1;width:clamp(40px,19%,80px)}
.vid-gen-shots i.planned{border-style:solid;border-color:rgba(255,255,255,.34)}
.vid-gen-shots i.live{border:1.5px solid var(--lk-a);color:#fff;box-shadow:0 0 22px -4px var(--lk-a)}
.vid-gen-shots i.live::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--lk-a) 45%,transparent) 50%,transparent 70%) 0 0/250% 100%;
  animation:vidGlint 1.6s linear infinite}
.vid-gen-shots i.filmed{border:0;color:#fff;
  background:linear-gradient(160deg,color-mix(in srgb,var(--lk-a) 75%,#000),color-mix(in srgb,var(--lk-b) 60%,#000));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 8px 18px -8px color-mix(in srgb,var(--lk-a) 70%,transparent);
  animation:vidShotIn .55s cubic-bezier(.2,.8,.2,1.2) both;animation-delay:calc(var(--d) * 50ms)}
@keyframes vidShotIn{from{opacity:0;transform:scale(.7) rotate(-4deg)}to{opacity:1;transform:none}}
.vid-gen.queued .vid-gen-shots{opacity:.45;animation:vidPulse 2.2s ease-in-out infinite}
.vid-gen-cap{min-height:3.6em}
.vid-gen-cap b{display:block;font-family:Jost,Inter,sans-serif;font-size:1.06rem;font-weight:600;letter-spacing:-.01em}
.vid-gen-cap p{margin:4px 0 0;font-size:.82rem;line-height:1.45;color:rgba(255,255,255,.72);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vid-gen-cap p.in{animation:vidIn .45s var(--ease) both}
.vid-gen-acts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.vid-gen-acts li{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.42);
  transition:color var(--dur-chill) var(--ease-chill)}
.vid-gen-acts li.live,.vid-gen-acts li.done{color:#fff}
.vid-gen-acts span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vid-gen-acts i{position:relative;display:block;height:3px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.vid-gen-acts b{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--lk-a),var(--lk-b));transition:width .6s var(--ease-chill)}
.vid-gen-acts li.live i::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:40%;
  background:linear-gradient(90deg,transparent,var(--lk-a),transparent);animation:vidSweep 1.5s ease-in-out infinite}
html[dir=rtl] .vid-gen-acts li.live i::after{animation-direction:reverse}
@keyframes vidSweep{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
/* a small stage on a phone: the frames give way to the words and the acts */
.vid-stage[data-shape="16:9"] .vid-gen-cap p,.vid-stage[data-shape="1:1"] .vid-gen-cap p{-webkit-line-clamp:2}

/* ---- done: the video is revealed from the middle, out of focus into focus ---- */
.vid-stage.reveal .vid-stage-player{animation:vidReveal 1s cubic-bezier(.2,.7,.1,1) both}
@keyframes vidReveal{from{clip-path:circle(0% at 50% 55%);filter:blur(16px) brightness(1.6)}60%{filter:blur(2px) brightness(1.1)}to{clip-path:circle(75% at 50% 50%);filter:none}}

@media (max-width:720px){
  /* the picker is a sheet from the bottom of the screen, the page dimmed behind it */
  .vid-pop,.ag.is-new .vid-pop{position:fixed;z-index:60;inset-inline:0;top:auto;bottom:0;max-height:80vh;border-radius:22px 22px 0 0;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));box-shadow:0 0 0 100vmax rgba(8,6,20,.42),var(--sh-overlay);transform-origin:50% 100%}
  .vid-looks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vid-shape-opt{min-height:132px}
  .vid-detail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vid-opt[data-effort],.vid-opt[data-quality]{grid-column:span 1}
  .vid-gen-acts span{display:none}
  .vid-wallet-balance small{display:none}
}

@media (prefers-reduced-motion:reduce){
  .vid-app-glow,.vid-composer:focus-within::before,.vid-look .cam,.vid-gen,.vid-gen-aura,.vid-gen-shots i,.vid-gen-shots i.live::after,
  .vid-gen.queued .vid-gen-shots,.vid-gen-acts li.live i::after,.vid-gen-cap p.in,.vid-pop,.vid-stage.reveal .vid-stage-player{animation:none}
  .vid-look,.vid-shape-opt,.vid-len-opt,.vid-opt{transition:none}
  .vid-look:hover,.vid-shape-opt:hover,.vid-len-opt:hover,.vid-opt:hover{transform:none}
}

/* A short window (the owner's own pane is 630px tall): the heading tightens and the slideshow's title gives way, so the
   cards still start on the first screen and end on it. */
@media (max-height:700px){
  .ag.is-new{padding-top:4px}
  .ag.is-new .vid-hero-h{font-size:clamp(1.6rem,3.6vw,2.4rem)}
  .ag.is-new .vid-intro{margin-bottom:14px}
  .ag.is-new .vid-humans .vid-tpl-head{display:none}
  /* at this size the tag ran under the sound button */
  .ag.is-new .vid-humans .vid-hum-tag{display:none}
  .ag.is-new .vid-humans .vid-hum{height:clamp(130px,calc(100dvh - 455px),240px)}
}

/* =================================================================
   On the builder's shell (2026-10-31): "make it exactly like it but
   the preview is video". The chat, composer, thinking panel and device
   frame are code.css and code-chat.css, unchanged; these are only the
   places video puts something of its own into them.
   ================================================================= */
.ag-split[hidden],.vid-videos-wrap:has(> .vid-pane[hidden]){display:none !important}
.ag-say:has(.vid-chat-message.pending:empty){display:none}
.ag-user .bubble .vid-chat-message,.ag-say .vid-chat-message{white-space:pre-wrap;overflow-wrap:anywhere}
.ag-meta .vid-extra::before{content:"· "}

/* the showcase sits between the greeting and the box, a row of phones under "What should we film today?" */
.ag.is-new .vid-humans{width:100%;max-width:760px;margin:0 auto 18px}
.ag.is-new .vid-humans .vid-hum{height:clamp(130px,calc(100dvh - 470px),280px)}
.ag:not(.is-new) .vid-humans{display:none}

/* the composer's own parts, inside the builder's box */
.ag-box .vid-atts{padding:0 0 8px}
.ag-box .vid-consent{margin:0 0 8px}
.ag-brow .vid-tools{flex:1 1 auto;mask-image:none}
.ag-brow .vid-chip{height:30px;padding:0 10px 0 8px;font-size:.76rem;border-radius:8px}
.ag-composer .vid-wallet{margin:8px 2px 0;padding:6px 2px 0;border-top:0}
.ag-composer .vid-wallet-quote{display:inline-flex}
.ag-composer .vid-msg{padding:0 4px}
.ag.is-new .vid-pop{bottom:auto;top:calc(100% + 8px);transform-origin:50% 0}
.ag-composer:has(.vid-pop:not([hidden])){z-index:40}

/* the video, where the builder's iframe goes: filling the device's screen, its own black behind it */
.ip-screen .vid-stage{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;
  border:0;border-radius:inherit;box-shadow:none;background:#000}
.ip-screen .vid-stage[data-shape]{height:100%;width:100%;aspect-ratio:auto}
.ip-screen .vid-stage-player{object-fit:contain}
.ag-preview .vid-stage-bar{flex:none;justify-content:center;padding:10px 16px 14px;width:auto}
.ag-preview .vid-stage-caption{max-width:340px}

/* the job's panel: the builder's thinking, with a way to stop it on its top row */
.vid-job .th2-top{gap:6px;cursor:default}
.vid-job .th2-top .sp{flex:1}
.vid-job[hidden]{display:none}
.vid-think .th2-top{cursor:pointer}

/* My videos, a page of its own under the same rail */
.vid-videos-wrap{max-width:1180px;margin:0 auto;width:100%}
/* The page never scrolls sideways: the composer's feather reaches 168px past the column's start and the generation
   card's aura past the window's end, and the owner's window once sat scrolled with the rail and the chat's first words
   off screen (2026-10-31). */
html:has(#agentView),body:has(#agentView){overflow-x:hidden}

/* one row, as the builder's: the chips scroll inside it rather than pushing the send button onto a second line */
.ag-brow .vid-tools{flex:1 1 0;min-width:0}
.ag-brow .vid-chip-k,.ag-brow .vid-len-k{display:none}
/* The old chat's own bubble, avatar and padding were still on the words inside the builder's turn: "HELLO" sat in a
   bubble inside the builder's bubble, and every reply wore the old purple avatar. The builder's turn is the only box. */
.ag-user .vid-chat-message,.ag-say .vid-chat-message{display:inline;max-width:none;margin:0;padding:0;border:0;border-radius:0;
  background:none;box-shadow:none;color:inherit;font:inherit;line-height:inherit;animation:none;align-self:auto}
.ag-say .vid-chat-message::before,.ag-say .vid-chat-message::after{content:none;display:none}
/* the wallet line sat under the composer's feather, which blurred it */
.ag-composer .vid-wallet,.ag-composer .vid-msg{position:relative;z-index:2}
/* in a conversation the settings are their icons, the box is narrower there */
.ag:not(.is-new) .ag-brow .vid-chip[data-pick="detail"] b,.ag:not(.is-new) .ag-brow #vidKitWrap{display:none}
/* "make it show up the options" (the owner, 2026-10-31): the spacer took half the row, so the chips scrolled out of a
   259px strip and "Fast · Standard" read "Fa"; the chips take the room and the spacer none */
.ag-brow:has(.vid-tools) .ag-brow-sp{flex:0 0 0;min-width:0}
.ag-brow .vid-tools{flex:1 1 auto;min-width:0;flex-wrap:wrap;overflow:visible}
/* and the picker opens above the box on the new-video screen too: below it, it ran off the bottom of the window */
.ag.is-new .vid-pop{top:auto;bottom:calc(100% + 8px);transform-origin:50% 100%;max-height:min(70vh,560px)}
/* "make the choices smaller why so big" (the owner, 2026-10-31): the picker was the box's full 720px with 122px cards.
   A compact sheet now — narrower, smaller cards, tighter tiles — the size of the builder's own popovers. */
.vid-pop{max-width:460px;padding:10px;border-radius:16px}
.vid-pop-head{margin:0 2px 8px}
.vid-pop-head b{font-size:.9rem}
.vid-pop-x{width:24px;height:24px}
.vid-looks{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
.vid-look{gap:3px;padding:4px 4px 6px;border-radius:11px}
.vid-look-scr{aspect-ratio:16/10;border-radius:7px}
.vid-look-scr .s{border-radius:5px}
.vid-look-scr .t{height:3px;box-shadow:0 -6px 0 -1px var(--lk-a)}
.vid-look-n{font-size:.72rem}
.vid-look-c{display:none}
.vid-shapes{gap:6px}
.vid-shape-opt{min-height:0;padding:10px 6px 8px;gap:3px;border-radius:11px}
.vid-shp.big{width:20px;height:36px;border-radius:5px}
.vid-shp.big[data-shape="16:9"]{width:42px;height:24px;margin-top:6px}
.vid-shp.big[data-shape="1:1"]{width:30px;height:30px;margin-top:3px}
.vid-shape-opt b{font-size:.8rem}
.vid-shape-opt small{font-size:.66rem}
.vid-lens{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:5px}
.vid-len-opt{padding:7px 4px;border-radius:10px}
.vid-len-opt b{font-size:.86rem}
.vid-len-opt small{font-size:.64rem}
.vid-detail{gap:5px}
.vid-opt{padding:7px 9px;border-radius:10px;gap:1px}
.vid-opt b{font-size:.8rem}
.vid-opt small{font-size:.66rem}
.vid-pop-note{margin-top:8px;font-size:.68rem}
.vid-pop-k{font-size:.62rem}
@media (max-width:720px){ .vid-pop,.ag.is-new .vid-pop{max-width:none} .vid-looks{grid-template-columns:repeat(4,minmax(0,1fr))} }