/* ─────────────────────────────────────────────────────────────
   Capraseo — AI videos (ai-videos/)
   A sibling of the image generator: one prompt surface (model /
   character / dimension / duration / style chips) plus a clean
   gallery of generated clips. Generation is a frontend MOCKUP for
   now — clips persist per-domain in localStorage and render as
   poster tiles; the real generation pipeline lands later.
   ───────────────────────────────────────────────────────────── */

.center.center-scroll.vg {
  align-items: stretch;
  justify-content: flex-start;
  padding: 14px 36px 56px;
  gap: 30px;
  overflow-y: auto;
}
.vg > * {
  width: 100%;
  flex-shrink: 0;
}

/* ── Prompt surface ────────────────────────────────────────── */
.vg-composer {
  position: relative;
  z-index: 5;             /* lift above the gallery (backdrop-filter stacking) */
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(var(--dk13-rgb),0.72) 0%, rgba(var(--glass-lo-rgb),0.82) 100%);
  border: 1px solid rgba(var(--wash-rgb), 0.07);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.05),
    0 18px 50px -22px rgba(0,0,0,0.65);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vg-composer:focus-within {
  border-color: rgba(99, 102, 241,0.40);
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.05),
    0 0 0 3px rgba(99, 102, 241,0.10),
    0 18px 50px -22px rgba(0,0,0,0.65);
}

/* Prompt textarea — borderless, the surface is the frame */
.vg-prompt {
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  padding: 15px 17px 4px;
  min-height: 52px;
  max-height: 220px;
  overflow-y: auto;
}
.vg-prompt::placeholder { color: var(--grey-2); }

/* Dialogue — a subtle inset row that appears under the prompt when Sound is on. */
.vg-dialogue {
  margin: 2px 11px 4px;
  padding: 9px 12px 4px;
  border-top: 1px solid rgba(var(--wash-rgb), 0.06);
}
.vg-dialogue[hidden] { display: none; }
.vg-dialogue-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.vg-dialogue-label svg { width: 13px; height: 13px; opacity: 0.85; }
.vg-dialogue-hint {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 400;
}
.vg-dialogue-input {
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 0;
  min-height: 22px;
  max-height: 120px;
  overflow-y: auto;
}
.vg-dialogue-input::placeholder { color: #56565e; }

/* Toolbar: option chips (left) · generate (right) */
.vg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 9px 9px 11px;
}
.vg-toolbar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
/* Chip styling comes from chat.css; nudge the height to line up the row. */
.vg-toolbar .chip { height: 32px; }
.vg-model .chip-label,
.vg-character .chip-label,
.vg-style .chip-label { max-width: 150px; }

/* chat.css forces these menus to open UPWARD (its composer is anchored to the
   bottom of the screen). Here the composer sits at the TOP, so flip every
   chip menu back to opening downward — else it clips behind the header. */
.vg-toolbar .dropdown .menu {
  top: calc(100% + 8px);
  bottom: auto;
  transform: translateY(-4px);
}
.vg-toolbar .dropdown .menu.open { transform: translateY(0); }

/* Dimension + duration + resolution + audio menus: wide enough for one-liners. */
.dropdown.vg-dimension .menu,
.dropdown.vg-duration .menu,
.dropdown.vg-resolution .menu,
.dropdown.vg-audio .menu { min-width: 248px; }
.dropdown.vg-dimension .menu-item .mi-label,
.dropdown.vg-duration .menu-item .mi-label,
.dropdown.vg-resolution .menu-item .mi-label,
.dropdown.vg-audio .menu-item .mi-label { white-space: nowrap; }
.dropdown.vg-dimension .menu-item .mi-sub,
.dropdown.vg-duration .menu-item .mi-sub,
.dropdown.vg-resolution .menu-item .mi-sub,
.dropdown.vg-audio .menu-item .mi-sub {
  font-size: 11.5px;
  color: var(--muted-2);
  margin-left: auto;
  padding-left: 14px;
  white-space: nowrap;
}
.dropdown.vg-dimension .menu-item.selected .mi-sub,
.dropdown.vg-duration .menu-item.selected .mi-sub,
.dropdown.vg-resolution .menu-item.selected .mi-sub,
.dropdown.vg-audio .menu-item.selected .mi-sub { color: var(--muted); }

/* Model picker hover card — rating stars (the shared .chip-tooltip shell +
   .tt-title/.tt-body/.tt-foot come from chat.css, loaded on this page). */
.chip-tooltip .tt-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font-size: 11px;
}
.chip-tooltip .tt-rating .stars { letter-spacing: 1px; line-height: 1; }
.chip-tooltip .tt-rating .st { color: rgba(var(--wash-rgb), 0.20); }
.chip-tooltip .tt-rating .st.on { color: #f5c451; }
.chip-tooltip .tt-rating .st.half { color: #f5c451; opacity: 0.5; }
.chip-tooltip .tt-rating .num { color: var(--lt50); font-weight: 600; }
.chip-tooltip .tt-rating .max { color: #7a7a82; }

/* Character/style picker — a thumbnail glyph in the chip + menu when the
   selection carries a reference photo, so it reads at a glance. */
.vg-skill-thumb,
.vg-char-thumb {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
}

/* Large hover preview of a character image (js/video-character.js), so the
   16px menu thumbnails are actually legible. Floated on <body>, follows the
   hovered row, never intercepts pointer events. */
.vg-char-preview {
  position: fixed;
  z-index: 200;
  width: 200px;
  height: 200px;
  padding: 4px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(var(--glass-hi-rgb),0.98), rgba(var(--glass-lo-rgb),0.98));
  border: 1px solid rgba(var(--wash-rgb), 0.12);
  box-shadow: 0 20px 44px -14px rgba(0,0,0,0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.vg-char-preview.visible { opacity: 1; }
.vg-char-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
}

.vg-generate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 100%);
  color: var(--cyan-bg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.28),
    0 6px 16px -6px rgba(99, 102, 241,0.6);
  transition: transform 0.15s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.vg-generate:hover { transform: translateY(-1px); filter: brightness(1.05); }
.vg-generate:active { transform: translateY(0); }
.vg-generate:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}
.vg-generate svg { width: 15px; height: 15px; }

/* Generate + Automate sit together on the right of the toolbar. */
.vg-actions { display: flex; align-items: center; gap: 8px; }
.vg-automate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(var(--wash-rgb), 0.14);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.vg-automate:hover { color: var(--text); border-color: rgba(129,140,248,0.5); background: rgba(99,102,241,0.08); }
.vg-automate svg { width: 15px; height: 15px; }

/* ── Video agents ──────────────────────────────────────────── */
.vg-agents[hidden] { display: none; }
.vg-agents-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.vg-agents-head h2 { margin: 0; font-size: 14px; font-weight: 500; color: var(--text); }
.vg-agents-sub { font-size: 12px; color: var(--muted-2); }
.vg-agents-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.vg-agent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(var(--wash-rgb), 0.07);
  background: var(--panel-2);
}
.vg-agent.is-paused { opacity: 0.72; }
.vg-agent-main { min-width: 0; }
.vg-agent-name {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--text);
}
.vg-agent-cadence {
  font-size: 11px; font-weight: 500; color: var(--lt51);
  background: rgba(99,102,241,0.14); border: 1px solid rgba(129,140,248,0.3);
  padding: 1px 8px; border-radius: 999px;
}
.vg-agent-angle {
  margin-top: 3px; font-size: 12.5px; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vg-agent-status { margin-top: 5px; font-size: 11.5px; }
.vg-agent-status.active { color: #8fe3b0; }
.vg-agent-status.paused { color: #ffb37a; }
.vg-agent-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.vg-agent-btn {
  height: 30px; padding: 0 12px; border-radius: 8px;
  border: 1px solid rgba(var(--wash-rgb), 0.14); background: rgba(var(--wash-rgb), 0.03);
  color: var(--muted); font-family: inherit; font-size: 12px; cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.vg-agent-btn:hover { color: var(--text); border-color: rgba(var(--wash-rgb), 0.28); }
.vg-agent-btn.danger:hover { color: #fff; background: var(--danger); border-color: transparent; }
.vg-agent-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Automate modal ────────────────────────────────────────── */
.vg-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.vg-modal[hidden] { display: none; }
.vg-modal-backdrop { position: absolute; inset: 0; background: rgba(var(--dk17-rgb),0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.vg-modal-card {
  position: relative;
  width: min(680px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 24px 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(var(--dk13-rgb),0.98), rgba(var(--glass-lo-rgb),0.98));
  border: 1px solid rgba(var(--wash-rgb), 0.09);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8);
}
.vg-modal-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 8px;
  border: 1px solid rgba(var(--wash-rgb), 0.12); background: rgba(var(--wash-rgb), 0.03);
  color: var(--muted); cursor: pointer;
}
.vg-modal-close:hover { color: var(--text); }
.vg-modal-close svg { width: 14px; height: 14px; }
.vg-modal-title { margin: 0 0 6px; font-size: 17px; font-weight: 600; color: var(--text); }
.vg-modal-sub { margin: 0 0 18px; font-size: 12.5px; line-height: 1.5; color: var(--muted-2); }
.vg-field { display: block; margin-bottom: 14px; }
.vg-field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.vg-field-opt { opacity: 0.6; font-size: 11px; margin-left: 6px; }
.vg-field input[type="text"], .vg-field textarea, .vg-field select {
  width: 100%; box-sizing: border-box; color: var(--text-1);
  background: rgba(var(--wash-rgb), 0.03); border: 1px solid var(--line);
  border-radius: 10px; outline: none; font-family: inherit; font-size: 13px; padding: 10px 12px;
}
.vg-field input:focus, .vg-field textarea:focus, .vg-field select:focus { border-color: rgba(129,140,248,0.55); }
.vg-field textarea { resize: vertical; line-height: 1.5; min-height: 120px; }
/* The native <select> popup defaults to a white background, which hid the
   light option text. Force a dark menu + light options so it's readable, and
   keep a custom caret (appearance:none drops the OS one). */
.vg-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a92' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.vg-field select option {
  background: #1c1c20;
  color: var(--text-1);
}
.vg-field-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.vg-field-row .vg-field { flex: 1 1 180px; }
.vg-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; cursor: pointer; }
.vg-check input { width: 15px; height: 15px; accent-color: var(--accent); }
.vg-bundle { margin: 4px 0 8px; padding: 12px 14px; border-radius: 10px; background: rgba(var(--wash-rgb), 0.02); border: 1px solid var(--line); }
.vg-bundle-head { font-size: 11.5px; color: var(--muted-2); margin-bottom: 9px; }
.vg-bundle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; }
.vg-bundle-item { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.vg-bundle-k { color: var(--muted-2); }
.vg-bundle-v { color: var(--text); font-weight: 500; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* On phones the side-by-side label/value gets squeezed, so break each item
   onto two rows (label above, value below) and let the value wrap fully. */
@media (max-width: 520px) {
  .vg-bundle-item { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1px; }
  .vg-bundle-v { text-align: left; white-space: normal; overflow: visible; text-overflow: clip; }
}
.vg-modal-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: #ffce99; }
.vg-modal-note[hidden] { display: none; }
.vg-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.vg-modal-cancel {
  height: 36px; padding: 0 16px; border-radius: 9px;
  border: 1px solid rgba(var(--wash-rgb), 0.14); background: transparent;
  color: var(--muted); font-family: inherit; font-size: 13px; cursor: pointer;
}
.vg-modal-cancel:hover { color: var(--text); }
.vg-modal-save {
  height: 36px; padding: 0 18px; border: 0; border-radius: 9px;
  background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 100%);
  color: var(--cyan-bg); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(var(--wash-rgb), 0.28), 0 6px 16px -6px rgba(99,102,241,0.6);
}
.vg-modal-save:hover { filter: brightness(1.05); }
.vg-modal-save:disabled { opacity: 0.6; cursor: default; filter: none; }
/* "Ask Capraseo AI about this" — a secondary AI action that sits next to
   Cancel; outlined in the chat accent so it reads as the soft, helpful option. */
.vg-modal-ask {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 9px;
  border: 1px solid rgba(129,140,248,0.45); background: rgba(129,140,248,0.08);
  color: var(--ind-2); font-family: inherit; font-size: 13px; cursor: pointer;
}
.vg-modal-ask:hover { background: rgba(129,140,248,0.16); color: var(--lt52); border-color: rgba(129,140,248,0.7); }
.vg-modal-ask svg { width: 15px; height: 15px; flex-shrink: 0; }
/* On a narrow screen the buttons wrap; keep them tidy. */
@media (max-width: 520px) { .vg-modal-actions { flex-wrap: wrap; } }

/* ── History ───────────────────────────────────────────────── */
.vg-history-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.vg-history-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
}
.vg-count {
  font-size: 12px;
  color: var(--muted-2);
}

.vg-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.vg-gallery:empty { display: none; }

.vg-tile {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(var(--wash-rgb), 0.06);
  background: var(--panel-2);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  animation: vg-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes vg-pop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.vg-tile-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.45s ease;
}
.vg-tile:hover .vg-tile-img { transform: scale(1.05); }

/* Centered play affordance — this is a video clip, not a still. */
.vg-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--dk14-rgb),0.55);
  border: 1px solid rgba(var(--wash-rgb), 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  z-index: 1;
  transition: transform 0.18s ease, background 0.18s ease;
}
.vg-tile:hover .vg-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(var(--dk5-rgb),0.72); }
.vg-play svg { width: 20px; height: 20px; margin-left: 2px; }

/* Duration badge — bottom-left, always visible. */
.vg-tile-duration {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(var(--dk14-rgb),0.72);
  border: 1px solid rgba(var(--wash-rgb), 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-5);
  font-size: 11px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
}

/* Hover actions: view · download · delete, top-right. */
.vg-tile-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.vg-tile:hover .vg-tile-actions,
.vg-tile:focus-within .vg-tile-actions { opacity: 1; transform: none; }
.vg-act {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(var(--wash-rgb), 0.14);
  background: rgba(var(--dk14-rgb),0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-6);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.vg-act:hover {
  background: rgba(var(--dk15-rgb),0.9);
  border-color: rgba(var(--wash-rgb), 0.3);
  transform: translateY(-1px);
}
.vg-act:disabled { opacity: 0.5; cursor: default; transform: none; }
.vg-act svg { width: 15px; height: 15px; }
.vg-act.is-danger:hover { background: var(--danger); border-color: transparent; color: #fff; }

/* Styled tooltip — shows immediately on hover, sits below the icon. */
.vg-act::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(var(--dk16-rgb),0.97);
  border: 1px solid rgba(var(--wash-rgb), 0.1);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.75);
  color: var(--text-5);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.1s ease, transform 0.1s ease;
}
.vg-act:hover::after,
.vg-act:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.vg-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 13px 34px;
  background: linear-gradient(180deg, transparent 38%, rgba(var(--dk17-rgb),0.88) 100%);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.vg-tile:hover .vg-tile-overlay { opacity: 1; }
.vg-tile-prompt {
  font-size: 12px;
  color: #fff;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vg-tile-time {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(var(--wash-rgb), 0.6);
}

/* Generating shimmer before the mock clip resolves */
.vg-tile.is-loading { cursor: default; }
.vg-tile.is-loading .vg-tile-img {
  background: linear-gradient(110deg, var(--ctl-1) 28%, var(--ctl-4) 50%, var(--ctl-1) 72%);
  background-size: 220% 100%;
  animation: vg-shimmer 1.1s linear infinite;
}
.vg-tile.is-loading .vg-tile-overlay,
.vg-tile.is-loading .vg-play,
.vg-tile.is-loading .vg-tile-duration { display: none; }
@keyframes vg-shimmer {
  from { background-position: 220% 0; }
  to   { background-position: -220% 0; }
}
.vg-tile.is-loading::after {
  content: "Generating video…\A Feel free to do other things in the meantime";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: pre-line;
  text-align: center;
  padding: 16px;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  pointer-events: none;
}

/* Empty state */
.vg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 0 34px;
  color: var(--muted-2);
}
.vg-empty[hidden] { display: none; }
.vg-empty-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(var(--wash-rgb), 0.03);
  border: 1px solid var(--line);
  color: var(--muted);
}
.vg-empty-icon svg { width: 22px; height: 22px; }
.vg-empty p { margin: 0; font-size: 13px; }

/* ── Inline viewer (lightbox) ──────────────────────────────── */
body.vg-viewer-open { overflow: hidden; }
.vg-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 40px;
  background: rgba(var(--dk17-rgb),0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: vg-viewer-in 0.18s ease;
}
.vg-viewer[hidden] { display: none; }
@keyframes vg-viewer-in { from { opacity: 0; } to { opacity: 1; } }
.vg-viewer-stage {
  display: flex;
  width: min(1000px, 90vw);
  max-height: 72vh;
}
.vg-viewer-video {
  width: 100%;
  max-height: 72vh;
  border-radius: 14px;
  background: #000;
  object-fit: contain;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8);
}
.vg-viewer-cap {
  max-width: min(820px, 88vw);
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lt22);
}
.vg-viewer-cap[hidden] { display: none; }
.vg-viewer-meta {
  font-size: 12px;
  color: var(--muted-2);
  font-family: 'JetBrains Mono', monospace;
}
.vg-viewer-meta[hidden] { display: none; }
.vg-viewer-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(var(--wash-rgb), 0.14);
  background: rgba(var(--dk5-rgb),0.6);
  color: var(--text-6);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.vg-viewer-close:hover { background: rgba(var(--dk18-rgb),0.85); border-color: rgba(var(--wash-rgb), 0.28); }
.vg-viewer-close svg { width: 18px; height: 18px; }

/* ── Mobile composer ───────────────────────────────────────── */
@media (max-width: 768px) {
  .vg-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .vg-toolbar-left { flex-wrap: wrap; gap: 8px; }
  .vg-generate { width: 100%; justify-content: center; height: 42px; }
}

/* "no sound" tag on audio-incapable models in the model menu */
.vg-nosound {
  margin-left: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}