/* ===== VIDEO & EXPORT PANEL — now a persistent workspace column, not a
   modal (see index.html: #vpanel is section.vpanel.col.right, laid out by
   main's grid in layout.css). Historical note: this used to slide in as
   an overlay (#vmod dimming backdrop + position:fixed #vpanel/#vbar) —
   that machinery is gone; #vmod no longer exists in the DOM. ===== */

/* ===== Frame style: iPhone Screen Recording ===== */
/* Strip the mockup bezel + hardware buttons — content reads as a live
   iOS screen recording, just the screen with real iPhone rounded corners. */
body.frame-screenrec .device{width:393px;height:856px;padding:0;
  border-radius:54px;background:#000;box-shadow:none}
body.frame-screenrec .hw-btn{display:none!important}
body.frame-screenrec .screen{border-radius:54px;outline:none}
/* black backdrop so the rounded corners read black, like a real recording */
body.frame-screenrec.vrecording .stage{background:#000;background-image:none}
/* blinking red recording indicator inside the Dynamic Island */
.rec-dot{display:none}
body.frame-screenrec .rec-dot{display:block;position:absolute;z-index:11;
  top:23px;left:calc(50% - 48px);width:10px;height:10px;border-radius:50%;
  background:#FF3B30;box-shadow:0 0 5px rgba(255,59,48,.8);
  animation:recblink 1.4s ease-in-out infinite}
@keyframes recblink{0%,100%{opacity:1}50%{opacity:.25}}
/* Capture mode: hide all editor chrome so only the phone is on screen —
   render/video.js's CAPTURE_CSS also hides .col.left/.col.right/header.top
   directly; these ID-based rules are a second, redundant guard. */
body.vrecording #vpanel,
body.vrecording #vbar{display:none!important}
body.vrecording .stage{z-index:auto!important;position:static!important}
/* Floating recording badge shown during capture */
#vrec-badge{position:fixed;top:14px;right:14px;z-index:19000;
  background:rgba(0,0,0,.72);color:#fff;font-size:11px;font-weight:700;
  padding:5px 10px;border-radius:8px;display:none;align-items:center;gap:6px;
  backdrop-filter:blur(6px);pointer-events:none}
#vrec-badge.on{display:flex}
#vrec-badge .dot{width:7px;height:7px;border-radius:50%;background:#e0364f;animation:vblink 1s infinite;flex:none}

/* ---- persistent video/export column ---- */
.vpanel.col.right{padding:0;display:flex;flex-direction:column;background:var(--t-bg,var(--bg))}
.vpanel-head{display:flex;align-items:center;gap:9px;padding:16px 16px 14px;flex:none}
.vpanel-head h2{font-family:var(--t-font-display,var(--display));font-weight:700;font-size:15px;flex:1}
.vpanel-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  padding:3px 7px;border-radius:var(--t-radius-sm,5px);
  background:linear-gradient(135deg,#7c3aed,#db2777);color:#fff}
.vpanel-body{flex:1;padding:0 16px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}

/* ---- preview-area play/stop controls, now inline under the phone (not a fixed floating bar) ---- */
.vbar-inline{position:static;width:min(100%,393px);margin:14px auto 0;box-shadow:none;
  border:1px solid var(--t-line);background:var(--t-card);border-radius:var(--t-radius-md);
  padding:9px 12px}
.preview-status{position:absolute;top:10px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:700;color:var(--t-muted);letter-spacing:.03em;
  background:var(--t-card);padding:4px 12px;border-radius:var(--t-radius-pill);
  box-shadow:var(--t-shadow-sm);pointer-events:none;z-index:5}
.stage{position:relative}

.vprog-track{flex:1;height:5px;background:var(--t-line,var(--soft));border-radius:5px;overflow:hidden;cursor:pointer}
.vprog-fill{height:100%;background:var(--t-gradient,var(--accent));width:0%;transition:width .08s linear}
.vtime{font-size:11px;font-family:monospace;color:var(--t-muted,var(--muted));white-space:nowrap}
.vrec-ind{display:none;align-items:center;gap:5px;font-size:10px;font-weight:700;
  color:#e0364f}
.vrec-ind.on{display:flex}
.vrec-dot{width:7px;height:7px;border-radius:50%;background:#e0364f;animation:vblink 1s infinite}

/* Control buttons — aligned to the shared token button language */
.vbtn{display:inline-flex;align-items:center;gap:5px;border:none;
  background:var(--t-surface,var(--card));color:var(--t-ink,var(--ink));padding:8px 13px;
  border-radius:var(--t-radius-sm,8px);font-size:12px;font-weight:700;cursor:pointer;
  transition:transform .1s,box-shadow .1s;font-family:inherit;white-space:nowrap}
.vbtn:hover{box-shadow:var(--t-shadow-sm)}
.vbtn:active{transform:scale(.96)}
.vbtn:disabled{opacity:.5;cursor:not-allowed}
.vbtn.vgreen{background:var(--t-gradient,var(--accent));color:#fff}
.vbtn svg{width:12px;height:12px;flex:none}

/* ---- Settings sections — native <details>/<summary> for free, accessible
   collapse/expand (keyboard + screen-reader support out of the box) ---- */
.vset{background:var(--t-card,var(--card));border:1px solid var(--t-line,var(--soft));
  border-radius:var(--t-radius-md,11px);padding:0;overflow:hidden}
.vset summary{padding:11px 13px;cursor:pointer;list-style:none;display:flex;
  align-items:center;justify-content:space-between;font-family:var(--t-font-body)}
.vset summary::-webkit-details-marker{display:none}
.vset summary::after{content:'';width:8px;height:8px;border-inline-end:2px solid var(--t-muted);
  border-bottom:2px solid var(--t-muted);transform:rotate(45deg);transition:transform var(--t-dur-base,.2s)}
.vset[open] summary::after{transform:rotate(-135deg)}
.vset summary h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--t-sub,var(--muted));margin:0}
.vset > *:not(summary){padding-inline:13px}
.vset > *:last-child{padding-bottom:12px}
.vrow{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 0;font-size:13px;font-family:var(--t-font-body)}
.vrow label{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:13px}
.vrow input[type=checkbox]{width:17px;height:17px;accent-color:var(--t-accent,var(--accent));cursor:pointer}
.vrow select{border:1.5px solid var(--t-line,var(--soft));border-radius:var(--t-radius-sm,7px);padding:6px 8px;
  font-size:12px;background:var(--t-surface,var(--surface));color:var(--t-ink,var(--ink));cursor:pointer;font-family:inherit;
  transition:border-color .1s}
.vrow select:focus-visible{outline:none;border-color:var(--t-accent);box-shadow:var(--t-shadow-focus)}
.vrow input[type=range]{width:90px;accent-color:var(--t-accent,var(--accent))}
.vspeedval{font-size:11px;font-weight:700;color:var(--t-accent,var(--accent));min-width:24px;text-align:right}

/* Inline "this needs a plan" badge, shown next to a restricted control */
.plan-req{font-size:10px;font-weight:700;color:var(--t-accent-d);background:var(--t-accent-soft);
  padding:2px 7px;border-radius:var(--t-radius-pill);margin-inline-start:6px;cursor:help;white-space:nowrap}

/* "My plan" restriction summary list inside the settings panel */
.plan-restrictions{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--t-sub)}
.plan-restrictions li{display:flex;align-items:center;gap:7px}
.plan-restrictions li.locked::before{content:'🔒';font-size:11px}
.plan-restrictions li.ok::before{content:'✓';color:var(--t-accent);font-weight:700}

.vgen-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  border:none;background:var(--t-gradient,var(--accent));color:#fff;padding:13px;
  border-radius:var(--t-radius-md,11px);font-size:14px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:transform .1s,box-shadow .1s;pointer-events:auto;
  box-shadow:var(--t-shadow-md)}
.vgen-btn:hover{box-shadow:var(--t-shadow-lg)}
.vgen-btn:active{transform:scale(.98)}
.vgen-btn:disabled{opacity:.5;cursor:not-allowed}
.vgen-btn svg{width:16px;height:16px}
.vstatus{font-size:12px;color:var(--t-sub,var(--muted));text-align:center;min-height:14px;padding:2px 4px;
  word-break:break-word;line-height:1.5}

/* ---- premium generating card ---- */
#vGenCard{border-radius:var(--t-radius-lg);}
.vgen-spinner{width:40px;height:40px;margin:0 auto;border-radius:50%;
  border:3px solid var(--t-line,#e7e9ee);border-top-color:var(--t-accent,var(--accent));
  animation:vgSpin .8s linear infinite}
@keyframes vgSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.vgen-spinner{animation-duration:2.4s}}

/* ---- watermark overlay — free plan only, toggled via body.watermark-on
   (see render/video.js's watermark param + vg-main.js). Small, corner-
   anchored, never covers message content. ---- */
.wm-overlay{display:none;position:absolute;bottom:64px;left:50%;transform:translateX(-50%);
  font-size:9px;font-weight:700;color:rgba(255,255,255,.85);background:rgba(0,0,0,.32);
  padding:3px 10px;border-radius:var(--t-radius-pill);letter-spacing:.03em;
  pointer-events:none;z-index:6;backdrop-filter:blur(2px)}
body.watermark-on .wm-overlay{display:block}

/* ---- admin video-order Recording Mode (src/services/order-snapshot-
   boot.js, ?orderSnapshot=<id>&recording=1) — clean, fullscreen,
   watermark-free view of a submitted snapshot for manual screen
   recording. Distinct from body.vrecording (the OLD automated capture
   pipeline's marker, render/video.js) so nothing here can change that
   pipeline's behavior. !important throughout: this overrides the normal
   editor layout, not a state it needs to cooperate with. ---- */
body.admin-record-mode{background:#000!important}
body.admin-record-mode header.top,
body.admin-record-mode .col.left,
body.admin-record-mode .col.right,
body.admin-record-mode #mobileTabs,
body.admin-record-mode #mobileStickyBar,
body.admin-record-mode #vpanel,
body.admin-record-mode .preview-status{display:none!important}
body.admin-record-mode main{grid-template-columns:1fr!important;background:#000!important}
body.admin-record-mode .stage{background:#000!important;background-image:none!important;padding:0!important}

/* #vbar (play/pause + seek track + time) stays visible in Recording Mode
   — the admin explicitly wants transport controls — but its normal
   position:static placement (right after .device in .stage's flex flow)
   assumes .device's LAYOUT box, which transform:scale() deliberately
   does NOT resize (only the painted appearance grows) — left alone, the
   bar would render where the small unscaled phone used to be, well
   inside where the large scaled phone now visually sits. Pinning it to
   the viewport instead, entirely independent of .device's box, is what
   actually keeps it clear of the phone at every scale.

   A bottom-centered bar (the first version of this) turned out to sit
   right against — sometimes almost touching — the phone's bottom edge on
   narrower/shorter windows, since the only reserved margin was vertical.
   A narrow vertical side panel instead needs just a fixed, small width
   reserved once (sizeRecordingDevice() in order-snapshot-boot.js
   constrains the phone's scale by BOTH available height and available
   width now, not height alone), which stays clear of the phone at any
   window size or aspect ratio. Restyled dark/translucent — the default
   light-card look would be a jarring white block on the black recording
   background. */
body.admin-record-mode #vbar{position:fixed!important;left:16px!important;top:50%!important;
  bottom:auto!important;transform:translateY(-50%);width:126px!important;margin:0!important;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px;
  padding:14px 10px!important;background:rgba(20,20,20,.82)!important;
  border-color:rgba(255,255,255,.12)!important;backdrop-filter:blur(6px);z-index:19000}
body.admin-record-mode #vbar .vbtn{justify-content:center;width:100%}
body.admin-record-mode #vbar .vtime{color:rgba(255,255,255,.75);text-align:center}
body.admin-record-mode #vbar .vprog-track{background:rgba(255,255,255,.18);width:100%}
body.admin-record-mode #vbar .vrec-ind{justify-content:center}

/* Internal automated-recording page (src/services/internal-recording-
   boot.js, server/routes/internalRecording.js) — same admin-record-mode
   base (black bg, no chrome, no watermark) but with NO interactive
   controls at all: a worker drives playback over CDP, it never clicks
   anything, so the transport bar (#vbar, otherwise always present in the
   DOM regardless of page) and frame switcher (only ever created by
   order-snapshot-boot.js's setupFrameSwitch(), never on this page) have
   no reason to render and would otherwise sit inside the exact viewport
   the screen recorder is capturing. */
body.internal-record-mode #vbar{display:none!important}

/* Minimal frame-style switcher (order-snapshot-boot.js) — #vpanel (which
   normally hosts the classic/iOS-screen-recording radio buttons, among
   many other settings irrelevant here) is hidden entirely in Recording
   Mode, so this is the one control re-exposed on its own: small, in a
   corner, never overlapping the phone. Clicking it checks the REAL
   vFrame radio input and dispatches 'change' on it, so vg-main.js's own
   already-registered listener does the actual body.frame-screenrec
   toggle — no duplicated logic here. */
#recordFrameSwitch{display:none;position:fixed;bottom:16px;right:16px;z-index:19000;
  gap:6px;background:rgba(20,20,20,.82);padding:6px;border-radius:var(--t-radius-md,10px);
  backdrop-filter:blur(6px)}
body.admin-record-mode #recordFrameSwitch{display:flex}
#recordFrameSwitch button{border:none;background:transparent;color:rgba(255,255,255,.6);
  font-size:11px;font-weight:700;padding:6px 10px;border-radius:var(--t-radius-sm,7px);
  cursor:pointer;font-family:inherit;white-space:nowrap}
#recordFrameSwitch button.active{background:rgba(255,255,255,.16);color:#fff}
/* Scale is computed in JS (order-snapshot-boot.js's sizeRecordingDevice())
   to hit a real ~90-96vh target on whatever viewport is actually open —
   a fixed CSS scale() number can't do that across different screens. This
   is just the transform-origin so the JS-set scale() stays centered. */
body.admin-record-mode .device{transform-origin:center center}
/* No watermark for admin regardless of their own account's plan — see
   order-snapshot-boot.js's explicit classList.remove('watermark-on'),
   this is the belt to that suspender in case anything else re-adds it. */
body.admin-record-mode .wm-overlay{display:none!important}

/* input-field typing animation */
.vsend-btn{width:28px;height:28px;border-radius:50%;background:#1DAB61;
  display:flex;align-items:center;justify-content:center;transition:transform .12s ease}
.vsend-btn.tapped{transform:scale(.75)}
/* Message entrance animation */
@keyframes vMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vmsg-anim{animation:vMsgIn .22s ease forwards}
@keyframes vblink{0%,100%{opacity:1}50%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .vmsg-anim{animation-duration:.01ms}
  .vrec-dot,#vrec-badge .dot{animation:none}
}
/* Video button in header */
.btn.video-btn{background:linear-gradient(135deg,#7c3aed 0%,#db2777 100%);
  color:#fff;border-color:#5b21b6}