:root { --primary:#00738f; --ink:#060606; --espresso:#180f08; --cocoa:#3d2e24; --muted:#6b5a50; --quiet:#cbc0b6; --sand:#eae2dc; --oat:#f5f1ee; --mist:#f9f6f3; --canvas:#fefdfb; --border:#f1ece7; --rail:56px; --sidebar:260px; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { min-width:320px; min-height:100%; margin:0; }
body { min-height:100dvh; overflow-x:hidden; background:var(--canvas); color:var(--ink); font:400 16px/1.5 IDGrotesk,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input,textarea { font:inherit; } button { border:0; padding:0; background:transparent; color:inherit; cursor:pointer; } a { color:inherit; text-decoration:none; } svg { display:block; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
:where(button,a,textarea,input):focus-visible { outline:2px solid var(--primary); outline-offset:2px; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:8px 12px; border-radius:9px; background:var(--espresso); color:#fff; transform:translateY(-140%); transition:transform .16s ease; }.skip-link:focus { transform:translateY(0); }

/* Video shell uses same grid as image */
.video-shell { display:grid; grid-template-columns:var(--rail) minmax(0,1fr); min-height:100dvh; transition:grid-template-columns .26s cubic-bezier(.32,.72,0,1); }
.video-shell[data-sidebar="expanded"] { grid-template-columns:var(--sidebar) minmax(0,1fr); }

/* Main content area */
.video-main { position:relative; grid-column:2; display:flex; min-width:0; min-height:100dvh; flex-direction:column; padding-bottom:184px; outline:0; }
.video-topbar { display:flex; height:56px; align-items:center; justify-content:space-between; padding:0 16px; }
.get-app-pill,.video-credit { display:inline-flex; height:32px; align-items:center; gap:7px; border:1px solid var(--border); border-radius:999px; background:rgba(254,253,251,.96); color:var(--cocoa); font-size:14px; padding:0 12px; }
.get-app-pill:hover { background:var(--mist); }
.video-credit { border-color:rgba(222,155,74,.12); background:rgba(222,155,74,.08); color:#bd8440; font-size:13px; }
.video-credit svg { width:15px; height:15px; }

/* Empty state */
.video-empty-state { display:flex; width:min(620px,calc(100% - 40px)); flex:1; flex-direction:column; align-items:center; justify-content:center; margin:0 auto 48px; padding-top:34px; text-align:center; }
.video-mark { display:inline-flex; width:auto; height:auto; align-items:center; justify-content:center; background:transparent; border-radius:0; color:var(--cocoa); overflow:visible; margin-bottom:2px; }
.video-mark svg { width:40px; height:40px; stroke-width:1.25; }
.video-mark img { width:54px; height:54px; object-fit:contain; display:block; pointer-events:none; transition:opacity .16s ease, transform .16s cubic-bezier(.32,.72,0,1); filter:drop-shadow(0 2px 8px rgba(24,15,8,.05)); }
.video-eyebrow { margin:16px 0 4px; color:var(--muted); font-size:14px; }
.video-empty-state h1 { margin:0; color:var(--cocoa); font-size:30px; font-weight:500; letter-spacing:-.3px; line-height:1.25; }
.video-description { max-width:490px; margin:12px 0 0; color:var(--muted); font-size:16px; line-height:24px; }

/* Composer */
.video-composer { position:fixed; z-index:10; bottom:24px; left:var(--rail); right:0; margin-inline:auto; width:min(720px,calc(100vw - var(--rail) - 48px)); overflow:visible; border:1px solid var(--quiet); border-radius:16px; background:#fff; box-shadow:0 10px 30px rgba(24,15,8,.07),0 2px 7px rgba(24,15,8,.04); transform:none; transition:left .26s cubic-bezier(.32,.72,0,1),width .26s cubic-bezier(.32,.72,0,1),border-color .16s ease,box-shadow .16s ease; }
.video-shell[data-sidebar="expanded"] .video-composer,.app-shell[data-sidebar="expanded"] .video-composer { left:var(--sidebar); right:0; margin-inline:auto; width:min(720px,calc(100vw - var(--sidebar) - 48px)); }
.video-composer:focus-within { border-color:rgba(0,115,143,.65); box-shadow:0 0 0 3px rgba(0,115,143,.10),0 12px 30px rgba(24,15,8,.08); }
.video-composer textarea { display:block; width:100%; min-height:104px; resize:vertical; max-height:220px; padding:17px 18px 8px; border:0; outline:0; background:transparent; color:var(--espresso); font-size:16px; line-height:24px; }
.video-composer textarea::placeholder { color:#a18f84; opacity:1; }
.video-composer-toolbar { display:flex; min-height:56px; align-items:center; justify-content:space-between; gap:10px; padding:8px; border-top:1px solid var(--border); background:var(--mist); border-radius:0 0 15px 15px; }
.video-tools,.video-submit-tools { display:flex; align-items:center; gap:5px; }
.video-tool { display:inline-flex; height:32px; align-items:center; gap:6px; padding:0 9px; border-radius:9px; color:var(--cocoa); font-size:13px; white-space:nowrap; transition:background-color .14s ease,color .14s ease; }
.video-tool:hover,.video-tool[aria-pressed="true"] { background:var(--sand); }
.video-tool svg { width:16px; height:16px; }
.video-upload { cursor:pointer; }
.tool-chevron { width:12px!important; height:12px!important; }
.video-option-wrap { position:relative; }
.video-option-menu { position:absolute; bottom:calc(100% + 9px); left:0; z-index:30; width:158px; padding:5px; border:1px solid rgba(61,46,36,.07); border-radius:13px; background:rgba(254,253,251,.985); box-shadow:0 12px 32px rgba(24,15,8,.12),0 2px 6px rgba(24,15,8,.04); }
.video-option-menu button { display:flex; width:100%; align-items:center; justify-content:space-between; padding:8px 9px; border-radius:8px; color:var(--cocoa); font-size:13px; text-align:left; }
.video-option-menu button:hover,.video-option-menu button[aria-selected="true"] { background:var(--oat); }
.video-option-menu small { color:var(--muted); font-size:11px; }
.video-send { display:inline-flex; height:36px; align-items:center; gap:7px; padding:0 12px; border-radius:10px; background:var(--espresso); color:#fff; font-size:13px; font-weight:500; transition:background-color .14s ease,opacity .14s ease; }
.video-send:hover:not(:disabled) { background:#302017; }
.video-send:disabled { cursor:not-allowed; opacity:.42; }
.video-send svg { width:15px; height:15px; }

/* Duration badge */
.duration-number { display:inline-grid; width:auto; min-width:19px; height:18px; padding:0 5px; place-items:center; border-radius:5px; border:1px solid var(--quiet); color:var(--muted); font-size:10px; font-weight:600; line-height:1; letter-spacing:.01em; }

/* Model menu */
.video-model-menu { min-width: 224px; width: auto; max-height: min(390px, calc(100vh - 160px)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--quiet) transparent; }
.video-model-menu::-webkit-scrollbar { width: 5px; }
.video-model-menu::-webkit-scrollbar-track { background: transparent; }
.video-model-menu::-webkit-scrollbar-thumb { background: var(--quiet); border-radius: 999px; }
.video-model-menu button { gap: 14px; min-height: 36px; padding: 6px 10px; justify-content: space-between; }
.model-option-left { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.model-name { white-space: nowrap; font-weight: 500; }
.model-logo-box { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; background: transparent; border: none; box-shadow: none; color: var(--espresso); overflow: visible; user-select: none; font-family: IDGrotesk, ui-sans-serif, -apple-system, sans-serif; font-size: 11px; font-weight: 600; line-height: 1; }
.model-logo-box img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.model-trigger-logo { width: 20px; height: 20px; flex: 0 0 20px; margin-right: 2px; background: transparent; border: none; box-shadow: none; }
.model-logo-box svg { width: 16px; height: 16px; stroke: currentColor; }

/* Cost badge */
.video-cost-badge { display: inline-flex; height: 32px; align-items: center; gap: 5px; padding: 0 9px; border-radius: 9px; background: var(--espresso); color: #fbf8f5; font-size: 13px; font-weight: 600; letter-spacing: .01em; user-select: none; cursor: default; transition: background-color .14s ease, transform .14s ease; }
.video-cost-badge:hover { background: #2b1b13; }
.cost-val { font-variant-numeric: tabular-nums; line-height: 1; display: inline-block; }
.cost-bolt { width: 12px; height: 12px; flex: 0 0 12px; fill: #f4eee5; }
.cost-pulse { animation: costPulse .2s cubic-bezier(.32,.72,0,1); }
@keyframes costPulse { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Result area */
.video-result { display:flex; width:min(540px,calc(100% - 40px)); flex:1; flex-direction:column; align-items:center; justify-content:center; margin:0 auto 36px; padding-top:30px; }
.video-result-card { width:min(100%,520px); aspect-ratio:16/9; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:var(--mist); box-shadow:0 18px 36px rgba(24,15,8,.08); }
.video-result-placeholder { display:flex; width:100%; height:100%; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--muted); font-size:13px; }
.video-result-placeholder strong { color:var(--cocoa); font-size:16px; font-weight:500; }
.video-result-loader { width:26px; height:26px; border:2px solid var(--sand); border-top-color:var(--primary); border-radius:50%; animation:video-spin .75s linear infinite; }
.video-result-card.is-complete { background:linear-gradient(145deg,#dce6e4 0%,#f4eee5 42%,#d9c5b8 100%); }
.video-result-card.is-complete .video-result-placeholder { background:radial-gradient(circle at 28% 28%,rgba(255,255,255,.75) 0 6%,transparent 6.5%),linear-gradient(140deg,transparent 0 42%,rgba(61,46,36,.14) 42.3% 43.2%,transparent 43.6%); }
.video-result-card.is-complete .video-result-loader { display:none; }
.video-result-prompt { max-width:520px; margin:14px 0 0; color:var(--muted); font-size:13px; text-align:center; }
@keyframes video-spin { to { transform:rotate(360deg); } }

/* Reference tray */
.video-references-tray { display:flex; flex-direction:column; gap:8px; padding:12px 14px 10px; border-bottom:1px solid var(--border); background:var(--mist); border-radius:15px 15px 0 0; animation:traySlideDown .2s cubic-bezier(.32,.72,0,1); }
@keyframes traySlideDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.video-references-header { display:flex; align-items:center; justify-content:space-between; line-height:1; }
.video-references-title { display:inline-flex; align-items:center; gap:6px; color:var(--espresso); font-size:12.5px; font-weight:500; }
.video-references-title svg { width:14px; height:14px; stroke:var(--cocoa); }
.video-references-clear { color:var(--muted); font-size:11.5px; padding:2px 6px; border-radius:5px; cursor:pointer; transition:color .14s ease,background-color .14s ease; }
.video-references-clear:hover { color:#a82e2e; background:rgba(168,46,46,.08); }
.video-references-list { display:flex; align-items:center; gap:10px; overflow-x:auto; padding:2px 0 4px; scrollbar-width:thin; }
.video-references-items { display:flex; align-items:center; gap:10px; }
.video-reference-item { position:relative; width:62px; height:62px; flex:0 0 62px; border-radius:10px; overflow:hidden; border:1px solid var(--border); background:#fff; box-shadow:0 1px 3px rgba(24,15,8,.06); transition:transform .15s ease,box-shadow .15s ease; }
.video-reference-item:hover { transform:translateY(-1px); box-shadow:0 3px 8px rgba(24,15,8,.1); }
.video-reference-thumb { width:100%; height:100%; object-fit:cover; display:block; }
.video-reference-remove { position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:rgba(24,15,8,.78); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; cursor:pointer; transition:opacity .15s ease,background-color .15s ease,transform .15s ease; }
.video-reference-item:hover .video-reference-remove, .video-reference-remove:focus-visible { opacity:1; }
.video-reference-remove:hover { background:#a82e2e; transform:scale(1.08); }
.video-reference-remove svg { width:10px; height:10px; stroke:#fff; stroke-width:2; }
.video-reference-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:62px; height:62px; flex:0 0 62px; border-radius:10px; border:1.5px dashed var(--quiet); background:rgba(255,255,255,.6); color:var(--muted); font-size:11px; font-weight:500; cursor:pointer; transition:border-color .15s ease,color .15s ease,background-color .15s ease; }
.video-reference-add:hover { border-color:var(--cocoa); color:var(--cocoa); background:var(--sand); }
.video-reference-add svg { width:16px; height:16px; stroke:currentColor; stroke-width:1.6; }
.video-composer.has-references textarea { padding-top:12px; }

/* Quality diamond icon */
.quality-diamond-icon { width:16px; height:16px; }

/* Reduced motion */
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }

/* Responsive – mobile */
@media (max-width:767px) {
  .video-shell { grid-template-columns:1fr; }
  .video-main { grid-column:1; padding-bottom:160px; }
  .video-composer,.video-shell[data-sidebar="expanded"] .video-composer,.app-shell[data-sidebar="expanded"] .video-composer { bottom:16px; left:0; right:0; margin-inline:auto; width:calc(100vw - 24px); transform:none; }
  .video-empty-state { margin-bottom:12px; padding-top:6px; }
  .video-empty-state h1 { font-size:26px; }
  .video-description { font-size:15px; }
  .video-composer textarea { min-height:90px; }
  .video-tool { width:auto; min-width:32px; justify-content:center; padding:0 6px; }
  .video-tool #vDurationLabel { display:none; }
  .video-tool #vModelLabel { max-width:65px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .video-tool .duration-number { display:inline-grid; }
  .video-submit-tools { gap:4px; }
  .video-result { margin-bottom:12px; }
  .video-references-tray { padding:10px 12px 6px; }
  .video-reference-item,.video-reference-add { width:54px; height:54px; flex:0 0 54px; }
  .video-reference-remove { opacity:.85; }
}
@media (max-width:440px) {
  .video-topbar { padding:0 12px; }
  .video-composer-toolbar { gap:4px; }
  .video-tools { gap:2px; }
  .video-tool { width:auto; min-width:30px; padding:0 4px; }
  .video-tool #vModelLabel { display:none; }
  .video-cost-badge { height:32px; padding:0 7px; gap:4px; font-size:12px; }
  .cost-bolt { width:11px; height:11px; flex:0 0 11px; }
  .video-send { width:36px; justify-content:center; padding:0; }
  .video-send span { display:none; }
  .video-empty-state { width:calc(100% - 32px); }
  .video-result { width:calc(100% - 32px); }
}