/* ===== Video Studio review panel + player (docs/VIDEO_STUDIO.md §11.2–11.3) =====
   Loaded by BOTH hosts — the dashboard (index.html) and the public review page
   (review.html) — each AFTER index.css, whose tokens (--card, --text2,
   --accent, the -txt contrast pairs, the spacing/radius/type scales) this file
   reads. Prefix `.vr-` throughout.

   The panel follows the dashboard's theme. The PLAYER does not: a video is
   judged on a dark surround in both themes (a white frame around a picture
   changes how its contrast reads), so the player carries its own dark ink.

   Every coloured TEXT uses a -txt token (AA in both themes); the raw hues are
   only for fills, dots and bars. Button fills below are darkened variants
   measured against white ink:  #2f6fe0 4.70:1, #1d7f4c 5.01:1, #c23a31 5.33:1. */

body.vr-open{overflow:hidden}

.vr-panel{
  --vr-primary:#2f6fe0;--vr-primary-hover:#2563d6;
  --vr-approve:#1d7f4c;--vr-approve-hover:#186a40;
  --vr-danger:#c23a31;--vr-danger-hover:#ab3229;
  --vr-side-w:400px;--vr-top-h:56px;
  /* One under --z-modal: the review is a full-screen layer, and the dialogs
     opened FROM it (the client-link modal, the confirm dialog, toasts) must
     land on top of it, not behind. */
  position:fixed;inset:0;z-index:calc(var(--z-modal,200) - 1);
  display:flex;flex-direction:column;
  background:var(--bg);color:var(--text);
  font-size:var(--fz-base,13px);line-height:var(--lh-normal,1.5);
  outline:none;
}
.vr-panel [hidden],.vr-player [hidden]{display:none!important}
.vr-panel :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vr-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.vr-ico{width:18px;height:18px;fill:currentColor;flex-shrink:0;display:block}
.vr-grow{flex:1 1 auto}
.vr-muted{color:var(--text2)}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.vr-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 12px;
  border-radius:var(--r2,8px);border:1px solid var(--border2);background:var(--chip);color:var(--text);
  font:inherit;font-size:13px;font-weight:600;letter-spacing:-.005em;cursor:pointer;white-space:nowrap;
  text-decoration:none;transition:background var(--tr-fast,.12s),border-color var(--tr-fast,.12s),color var(--tr-fast,.12s)}
.vr-btn:hover{background:var(--card-hover);border-color:var(--border3)}
.vr-btn:disabled{opacity:.55;cursor:not-allowed}
.vr-btn[aria-disabled="true"]{opacity:.7;cursor:progress}
.vr-btn[aria-busy="true"]{cursor:progress}
.vr-btn .vr-ico{width:16px;height:16px}
.vr-btn--ghost{background:transparent}
.vr-btn--sm{height:28px;padding:0 10px;font-size:12px}
.vr-btn--primary{background:var(--vr-primary);border-color:var(--vr-primary);color:#fff}
.vr-btn--primary:hover{background:var(--vr-primary-hover);border-color:var(--vr-primary-hover)}
.vr-btn--approve{background:var(--vr-approve);border-color:var(--vr-approve);color:#fff}
.vr-btn--approve:hover{background:var(--vr-approve-hover);border-color:var(--vr-approve-hover)}
.vr-btn--approve-next{color:var(--text)}
.vr-btn--danger{background:var(--vr-danger);border-color:var(--vr-danger);color:#fff}
.vr-btn--danger:hover{background:var(--vr-danger-hover);border-color:var(--vr-danger-hover)}
.vr-btn.is-on{border-color:var(--accent);background:var(--accent-dim);color:var(--accent-txt)}
.vr-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r2,8px);
  border:1px solid transparent;background:transparent;color:var(--text2);cursor:pointer;text-decoration:none;flex-shrink:0;
  transition:background var(--tr-fast,.12s),color var(--tr-fast,.12s)}
.vr-iconbtn:hover{background:var(--card-hover);color:var(--text)}
.vr-iconbtn:disabled{opacity:.4;cursor:not-allowed}
.vr-iconbtn--sm{width:28px;height:28px}
.vr-link{display:inline-flex;align-items:center;gap:4px;padding:2px 0;background:none;border:0;color:var(--text2);
  font:inherit;font-size:12px;font-weight:500;cursor:pointer}
.vr-link .vr-ico{width:14px;height:14px}
.vr-link:hover{color:var(--text)}
.vr-link:disabled,.vr-link[aria-disabled="true"]{opacity:.55;cursor:progress}
.vr-link--danger:hover{color:var(--red-txt)}
.vr-link--icon{padding:2px 4px;border-radius:6px}
.vr-link--icon .vr-ico{width:15px;height:15px}
.vr-link--icon:hover{background:var(--chip)}
.vr-link.vr-vis.is-shared{color:var(--band-strong-txt)}

/* ── top bar ─────────────────────────────────────────────────────────────── */
.vr-top{display:flex;align-items:center;gap:var(--s3,12px) var(--s4,16px);flex-wrap:wrap;flex-shrink:0;
  min-height:var(--vr-top-h);padding:var(--s2,8px) var(--s4,16px);background:var(--card);border-bottom:1px solid var(--border)}
.vr-top-main{display:flex;align-items:center;gap:var(--s3,12px);flex:1 1 320px;min-width:0}
.vr-heading{flex:1;min-width:0}
.vr-crumbs{display:flex;gap:6px;min-width:0;font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden}
.vr-crumbs span{overflow:hidden;text-overflow:ellipsis}
.vr-title{margin:0;font-size:16px;font-weight:650;line-height:1.3;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vr-title-row{display:flex;align-items:center;gap:6px;min-width:0}
.vr-title-row .vr-title{flex:0 1 auto;min-width:0}
.vr-rename-btn{opacity:.55}
.vr-title-row:hover .vr-rename-btn,.vr-rename-btn:focus-visible{opacity:1}
.vr-title-input{flex:1;width:auto;min-width:0;min-height:0;padding:3px 8px;font-size:16px;font-weight:650;letter-spacing:-.01em}
.vr-statusline{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vr-tone--failed{color:var(--red-txt)}
.vr-tone--working{color:var(--accent-txt)}
.vr-tone--done{color:var(--green-txt)}
.vr-tone--ready{color:var(--gold-txt)}
.vr-tone--waiting,.vr-tone--muted{color:var(--text2)}
.vr-status-extra{display:none;color:var(--band-strong-txt)}
.vr-nav{display:flex;align-items:center;gap:2px;flex-shrink:0}
.vr-nav-pos{min-width:48px;text-align:center;font-size:12px;color:var(--text2);font-variant-numeric:tabular-nums}
.vr-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--s2,8px);flex-wrap:wrap}
.vr-actions-sep{width:1px;height:24px;background:var(--border2)}
.vr-actions-sep:last-child{display:none}
.vr-version-btn{font-variant-numeric:tabular-nums}
.vr-dl-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.vr-dl-text small{font-size:11px;font-weight:500;color:var(--text2)}
.vr-download{height:auto;min-height:34px;padding-top:3px;padding-bottom:3px}
.vr-pill{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:14px;font-size:12px;font-weight:600;white-space:nowrap}
.vr-pill .vr-ico{width:14px;height:14px}
.vr-pill--done{color:var(--green-txt);background:rgba(47,163,100,.14)}
.vr-pill--client{color:var(--band-strong-txt);background:rgba(155,108,255,.14)}
.vr-pill--warn{color:var(--gold-txt);background:rgba(217,170,69,.14)}

/* ── menus ───────────────────────────────────────────────────────────────── */
.vr-menu-wrap{position:relative}
.vr-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:250px;max-width:min(340px,calc(100vw - 24px));
  max-height:min(60vh,420px);overflow-y:auto;padding:4px;background:var(--card);border:1px solid var(--border2);
  border-radius:var(--r3,10px);box-shadow:var(--shadow-lg)}
.vr-menu-item{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;width:100%;
  padding:8px 32px 8px 10px;border:0;border-radius:var(--r2,8px);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.vr-menu-item:hover,.vr-menu-item:focus-visible{background:var(--card-hover)}
.vr-menu-item:focus-visible{outline-offset:-2px}
.vr-menu-item.is-active{background:var(--accent-dim)}
.vr-menu-item > .vr-ico:first-child{grid-row:span 2;color:var(--text2)}
.vr-menu-main{grid-column:2;font-weight:600;font-size:13px}
.vr-menu-sub{grid-column:2;font-size:12px;color:var(--text2)}
.vr-menu-item:not(:has(> .vr-ico:first-child)) .vr-menu-main,.vr-menu-item:not(:has(> .vr-ico:first-child)) .vr-menu-sub{grid-column:1 / -1}
.vr-menu-check{position:absolute;right:10px;top:50%;margin-top:-9px;color:var(--accent-txt)}
.vr-menu-item--danger .vr-menu-main{color:var(--red-txt)}

/* ── banner ──────────────────────────────────────────────────────────────── */
.vr-banner{flex-shrink:0}
.vr-banner-row{display:flex;align-items:center;gap:var(--s2,8px);padding:8px var(--s4,16px);border-bottom:1px solid var(--border);font-size:13px}
.vr-banner-row p{flex:1;min-width:0}
.vr-banner-row--error{background:var(--danger-dim);color:var(--red-txt)}
.vr-banner-row--error p{color:var(--text)}
.vr-banner-row--info{background:var(--accent-dim);color:var(--accent-txt)}
.vr-banner-row--info p{color:var(--text)}

/* ── body: player on the left, the review rail on the right ──────────────── */
.vr-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) var(--vr-side-w)}
.vr-panel.is-loading .vr-body{visibility:hidden}
.vr-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:#000}
.vr-player-host{flex:1;min-height:0;display:flex}
.vr-main-note{display:flex;align-items:center;gap:var(--s2,8px);padding:10px var(--s4,16px);background:var(--card);
  border-top:1px solid var(--border);color:var(--text2);font-size:13px}
.vr-main-note p{flex:1}
.vr-side{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--card);border-left:1px solid var(--border)}
.vr-side-handle{display:none}

/* tabs */
.vr-tabs{display:flex;gap:2px;padding:0 var(--s3,12px);border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto;scrollbar-width:none}
.vr-tab{position:relative;padding:12px 10px 11px;border:0;background:none;color:var(--text2);font:inherit;font-size:13px;font-weight:600;
  white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.vr-tab:hover{color:var(--text)}
.vr-tab.is-active{color:var(--text);border-bottom-color:var(--accent)}
.vr-tab:focus-visible{outline-offset:-2px}
.vr-pane{flex:1;min-height:0;display:flex;flex-direction:column}
.vr-pane-scroll{flex:1;overflow-y:auto;padding:var(--s4,16px)}

/* comment filters */
.vr-filters{display:flex;gap:4px;padding:var(--s3,12px) var(--s4,16px) var(--s2,8px);flex-shrink:0}
.vr-seg{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:14px;border:1px solid var(--border2);
  background:transparent;color:var(--text2);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.vr-seg:hover{color:var(--text)}
.vr-seg.is-active{background:var(--chip);color:var(--text);border-color:var(--border3)}
.vr-seg-n{font-variant-numeric:tabular-nums;color:var(--text2);font-weight:500}

/* threads */
.vr-threads{flex:1;min-height:0;overflow-y:auto;padding:var(--s1,4px) var(--s4,16px) var(--s4,16px);display:flex;flex-direction:column;gap:var(--s2,8px)}
.vr-threads-sep{margin:var(--s3,12px) 0 0;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}
.vr-thread{padding:var(--s3,12px);border:1px solid var(--border);border-radius:var(--r3,10px);background:var(--bg2);
  transition:border-color var(--tr-base,.16s),box-shadow var(--tr-base,.16s)}
.vr-thread.is-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.vr-thread.is-other-version{opacity:.62}
.vr-thread.is-other-version:hover,.vr-thread.is-other-version:focus-within{opacity:.9}
.vr-thread.is-resolved .vr-comment-body{color:var(--text2)}
.vr-comment{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s2,8px)}
.vr-comment--reply{grid-template-columns:24px minmax(0,1fr)}
.vr-avatar{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:var(--vr-primary);color:#fff;font-size:12px;font-weight:700;letter-spacing:0}
.vr-comment--reply .vr-avatar{width:24px;height:24px;font-size:11px}
.vr-avatar--client{background:#6a45e0}
.vr-avatar--ai{background:#7d5410;font-size:10px}
.vr-comment-main{min-width:0}
.vr-comment-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;min-height:20px}
.vr-author{font-weight:650;color:var(--text)}
.vr-when{margin-left:auto;color:var(--text2);font-size:12px;white-space:nowrap}
.vr-badge,.vr-sev,.vr-vtag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:9px;font-size:11px;font-weight:650}
.vr-badge--client{color:var(--band-strong-txt);background:rgba(155,108,255,.14)}
.vr-badge--ai{color:var(--gold-txt);background:rgba(217,170,69,.14)}
.vr-sev--blocker{color:var(--red-txt);background:var(--danger-dim)}
.vr-sev--major{color:var(--orange-txt);background:rgba(224,149,74,.13)}
.vr-sev--minor{color:var(--text2);background:var(--chip)}
.vr-cause{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:9px;font-size:11px;font-weight:650;color:var(--text2);background:var(--chip);box-shadow:inset 0 0 0 1px var(--border)}
.vr-ai-fact{margin-top:var(--s2,8px);line-height:1.5;color:var(--text2)}
.vr-ai-fact strong{color:var(--text);font-weight:650}
.vr-vtag{color:var(--text2);background:var(--chip);font-variant-numeric:tabular-nums}
.vr-cstatus{display:inline-flex;align-items:center;gap:3px;height:18px;padding:0 6px;border-radius:9px;font-size:11px;font-weight:650}
.vr-cstatus .vr-ico{width:11px;height:11px}
.vr-cstatus--open{color:var(--text2);background:var(--chip)}
.vr-cstatus--resolved{color:var(--green-txt);background:rgba(63,158,77,.13)}
.vr-cstatus--sent{color:var(--accent-txt);background:var(--accent-dim)}
.vr-cstatus--unsent{color:var(--orange-txt);background:rgba(224,149,74,.13)}
.vr-vgroup-head{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:transparent;color:inherit;
  font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.vr-vgroup-head:hover{color:var(--text)}
.vr-vgroup-head::after{content:"";border:solid currentColor;border-width:0 1.5px 1.5px 0;padding:2.5px;transform:rotate(45deg);transition:transform var(--tr-fast,.12s)}
.vr-vgroup.is-collapsed .vr-vgroup-head::after{transform:rotate(-45deg)}
.vr-vgroup-body{display:flex;flex-direction:column;gap:var(--s2,8px);margin-top:var(--s2,8px)}
.vr-vgroup-body[hidden]{display:none}
.vr-tc{display:inline-flex;align-items:center;gap:4px;margin:6px 0 0;padding:2px 7px;border:0;border-radius:6px;background:var(--accent-dim);
  color:var(--accent-txt);font:inherit;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;cursor:pointer}
.vr-tc:hover{background:var(--accent-sel)}
.vr-tc--static{cursor:default;margin:0}
.vr-tc .vr-ico,.vr-tc-draw{width:13px;height:13px}
.vr-comment-body{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.vr-comment-actions{display:flex;flex-wrap:wrap;gap:4px var(--s3,12px);margin-top:6px}
.vr-replies{display:flex;flex-direction:column;gap:var(--s2,8px);margin:var(--s3,12px) 0 0 14px;padding-left:22px;border-left:2px solid var(--border2)}
.vr-reply-box{margin:var(--s2,8px) 0 0 36px}
.vr-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 16px;text-align:center;color:var(--text2)}
.vr-empty .vr-ico{width:28px;height:28px;opacity:.7}

/* composers */
.vr-composer,.vr-editor-composer{flex-shrink:0;padding:var(--s3,12px) var(--s4,16px) var(--s4,16px);border-top:1px solid var(--border);background:var(--card)}
.vr-input{display:block;width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--border2);border-radius:var(--r2,8px);
  background:var(--bg2);color:var(--text);font:inherit;font-size:13px;line-height:1.45;resize:vertical}
.vr-input::placeholder{color:var(--text2);opacity:1}
.vr-input:disabled{opacity:.6;cursor:not-allowed}
.vr-composer-input{max-height:30vh}
.vr-composer-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:var(--s2,8px)}
.vr-composer .vr-composer-row{gap:4px}
.vr-composer .vr-chip{padding:0 8px;gap:4px}
.vr-composer .vr-send{height:30px;padding:0 12px;margin-left:auto}
.vr-chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:14px;border:1px solid var(--border2);
  background:var(--chip);color:var(--text2);font:inherit;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;white-space:nowrap}
.vr-chip .vr-ico{width:14px;height:14px}
.vr-chip:hover:not(:disabled){color:var(--text);border-color:var(--border3)}
.vr-chip:disabled{opacity:.6;cursor:not-allowed}
.vr-chip[aria-pressed="true"],.vr-chip--attached{color:var(--accent-txt);border-color:rgba(76,141,255,.45);background:var(--accent-dim)}
.vr-visibility-chip[aria-pressed="true"]{color:var(--band-strong-txt);border-color:rgba(155,108,255,.45);background:rgba(155,108,255,.12)}
.vr-chip--sm{height:22px;padding:0 8px;font-size:11px}
.vr-chip-x{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:-6px;border:0;border-radius:50%;
  background:transparent;color:inherit;cursor:pointer}
.vr-chip-x:hover{background:rgba(255,255,255,.08)}
.vr-error{margin-top:6px;color:var(--red-txt);font-size:12px;font-weight:500}
.vr-hint{margin-top:6px;color:var(--text2);font-size:12px}
.vr-editor-reason{color:var(--text2);font-size:12px}
.vr-label{display:block;margin:var(--s3,12px) 0 6px;font-size:12px;font-weight:600;color:var(--text)}

/* AI review */
.vr-ai-head{display:flex;align-items:center;gap:var(--s4,16px)}
.vr-ring{position:relative;width:64px;height:64px;flex-shrink:0}
.vr-ring svg{width:64px;height:64px;display:block}
.vr-ring circle{fill:none;stroke-width:6}
.vr-ring-track{stroke:var(--track)}
.vr-ring-fill{stroke-linecap:round;transition:stroke-dasharray var(--tr-slow,.3s)}
.vr-ring--pass .vr-ring-fill{stroke:var(--green)}
.vr-ring--warn .vr-ring-fill{stroke:var(--gold)}
.vr-ring--fail .vr-ring-fill{stroke:var(--red)}
.vr-ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.vr-ai-verdict{font-size:15px;font-weight:700}
.vr-ai-summary{margin-top:var(--s3,12px);line-height:1.55}
.vr-h3{display:flex;align-items:center;gap:8px;margin:var(--s5,20px) 0 var(--s2,8px);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}
.vr-count{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text2);background:var(--chip);border-radius:9px;padding:1px 7px}
.vr-issues,.vr-checks,.vr-activity,.vr-req-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2,8px)}
.vr-issue{padding:10px 12px;border:1px solid var(--border);border-radius:var(--r3,10px);background:var(--bg2)}
.vr-issue-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.vr-issue-head .vr-tc{margin:0}
.vr-issue p{margin-top:4px;color:var(--text2);line-height:1.5}
.vr-issue-fix span{font-weight:650;color:var(--text)}
.vr-check{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.vr-check > div{display:flex;flex-direction:column;min-width:0}
.vr-check strong{font-weight:600}
.vr-check span{color:var(--text2);font-size:12px}
.vr-check.is-pass .vr-ico{color:var(--green-txt)}
.vr-check.is-fail .vr-ico{color:var(--orange-txt)}
.vr-check.is-warn .vr-ico{color:var(--gold-txt)}
.vr-check--blocker .vr-ico{color:var(--red-txt)!important}
.vr-ai-meta{margin-top:var(--s4,16px);font-size:12px}

/* editor chat */
.vr-msgs{flex:1;min-height:0;overflow-y:auto;padding:var(--s4,16px);display:flex;flex-direction:column;gap:var(--s3,12px)}
.vr-msg{max-width:92%;padding:10px 12px;border-radius:var(--r4,12px);background:var(--bg2);border:1px solid var(--border)}
.vr-msg--user{align-self:flex-end;background:var(--accent-dim);border-color:rgba(76,141,255,.3)}
.vr-msg--agent{align-self:flex-start}
.vr-msg--system{align-self:center;max-width:100%;padding:2px 8px;border:0;background:none;color:var(--text2);font-size:12px;text-align:center}
.vr-msg-head{display:flex;align-items:center;gap:6px;font-size:12px;margin-bottom:4px}
.vr-msg-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;max-height:40vh;overflow-y:auto}
.vr-msg-meta{margin-top:4px;font-size:12px;color:var(--text2)}

/* activity */
.vr-activity{padding:var(--s4,16px);overflow-y:auto;flex:1}
.vr-act{display:flex;gap:10px;align-items:flex-start}
.vr-act .vr-ico{width:16px;height:16px;margin-top:2px;color:var(--text2)}
.vr-act--error .vr-ico{color:var(--red-txt)}
.vr-act--approval .vr-ico,.vr-act--delivery .vr-ico{color:var(--green-txt)}
.vr-act--usage .vr-ico{color:var(--gold-txt)}
.vr-act p{line-height:1.45}
.vr-act .vr-when{margin-left:0}

/* ── loading, fatal ──────────────────────────────────────────────────────── */
.vr-loading{position:absolute;top:var(--vr-top-h);left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1fr) var(--vr-side-w);
  gap:var(--s4,16px);padding:var(--s4,16px);pointer-events:none}
.vr-panel:not(.is-loading) .vr-loading{display:none}
.vr-sk{border-radius:var(--r3,10px);background:linear-gradient(90deg,var(--chip) 25%,var(--card-hover) 50%,var(--chip) 75%);
  background-size:200% 100%;animation:vr-shimmer 1.4s ease-in-out infinite}
.vr-sk--player{height:100%}
.vr-sk-side{display:flex;flex-direction:column;gap:var(--s3,12px)}
.vr-sk--line{height:32px;width:60%}
.vr-sk--card{height:96px}
.vr-fatal{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2,8px);padding:var(--s7,32px) var(--s4,16px);text-align:center}
.vr-fatal .vr-ico{width:36px;height:36px;color:var(--text2)}
.vr-fatal h3{font-size:18px;font-weight:700}
.vr-fatal p{max-width:460px;color:var(--text2)}

/* ── sheets (request changes, confirm, your name) ────────────────────────── */
.vr-layer{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:var(--s4,16px)}
.vr-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
[data-theme="light"] .vr-backdrop{background:rgba(15,26,51,.35)}
.vr-sheet{position:relative;width:min(560px,100%);max-height:min(86vh,720px);overflow-y:auto;padding:var(--s5,20px);
  background:var(--card);color:var(--text);border:1px solid var(--border2);border-radius:var(--r6,16px);box-shadow:var(--shadow-lg);outline:none;
  animation:vr-rise var(--tr-base,.16s) ease-out}
.vr-sheet-title{font-size:17px;font-weight:700;letter-spacing:-.01em}
.vr-sheet-text{margin-top:6px;color:var(--text2);line-height:1.5}
.vr-sheet-foot{display:flex;justify-content:flex-end;gap:var(--s2,8px);margin-top:var(--s5,20px);flex-wrap:wrap}
.vr-warn{display:flex;gap:8px;align-items:flex-start;margin-top:var(--s3,12px);padding:10px 12px;border-radius:var(--r2,8px);
  background:rgba(217,170,69,.12);color:var(--text);border:1px solid rgba(217,170,69,.35)}
.vr-warn .vr-ico{color:var(--gold-txt);margin-top:1px}
.vr-req-list{margin-top:var(--s3,12px);max-height:42vh;overflow-y:auto}
.vr-req-row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r3,10px);background:var(--bg2);cursor:pointer}
.vr-req-row:has(input:checked){border-color:rgba(76,141,255,.55);background:var(--accent-dim)}
.vr-req-row input{margin-top:3px;width:16px;height:16px;accent-color:var(--vr-primary);flex-shrink:0}
.vr-req-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.vr-req-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px}
.vr-req-body{line-height:1.45;overflow-wrap:anywhere}

/* ── the player (always dark) ────────────────────────────────────────────── */
.vr-player{--vr-ink:#e9ebee;--vr-ink2:#aab0b7;--vr-bar:#0f1215;--vr-track:rgba(255,255,255,.2);--vr-focus:#6ea4ff;
  position:relative;flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:#000;color:var(--vr-ink);outline:none;
  -webkit-user-select:none;user-select:none}
.vr-player :focus-visible{outline:2px solid var(--vr-focus);outline-offset:1px}
.vr-player:fullscreen,.vr-player.is-fullscreen{width:100%;height:100%}
.vr-stage{position:relative;flex:1;min-height:0;overflow:hidden}
.vr-screens{position:absolute;inset:0;display:flex}
.vr-player.is-comparing .vr-screens{gap:4px;background:#111}
.vr-screen{position:relative;flex:1;min-width:0;margin:0}
.vr-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.vr-canvas{position:absolute;display:none;pointer-events:none;z-index:1}
.vr-canvas.is-visible{display:block}
.vr-player.is-drawing .vr-canvas{display:block;pointer-events:auto;cursor:crosshair;touch-action:none}
.vr-player.is-drawing .vr-screen--main{box-shadow:inset 0 0 0 2px rgba(110,164,255,.6)}
.vr-screen-label{position:absolute;top:8px;left:8px;z-index:2;padding:2px 8px;border-radius:10px;background:rgba(0,0,0,.66);color:#fff;font-size:12px;font-weight:650}
.vr-compare-close{position:absolute;top:4px;right:4px;z-index:2;background:rgba(0,0,0,.55)}
/* While playing, the labels recede so they compete less with the picture. */
.vr-player.is-playing .vr-screen-label{opacity:.65}
.vr-bigplay{position:absolute;left:50%;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.55);color:#fff;cursor:pointer;
  transition:transform var(--tr-fast,.12s),background var(--tr-fast,.12s)}
.vr-bigplay:hover{background:rgba(0,0,0,.72);transform:scale(1.05)}
.vr-bigplay .vr-ico{width:32px;height:32px;margin-left:3px}
.vr-player.is-drawing .vr-bigplay,.vr-player.is-comparing .vr-bigplay{display:none}
.vr-status{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:24px;text-align:center;pointer-events:none;color:var(--vr-ink)}
.vr-player.is-empty .vr-status{background:#0a0b0d}
.vr-status-text{max-width:420px;font-size:14px;line-height:1.5;color:var(--vr-ink)}
.vr-status-retry{pointer-events:auto}
.vr-spinner{display:none;width:28px;height:28px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;animation:vr-spin .8s linear infinite}
.vr-status.is-loading .vr-spinner{display:block}

/* pill buttons inside the player (draw toolbar, status) */
.vr-pill-btn{height:32px;padding:0 14px;border-radius:16px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
  color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.vr-pill-btn:hover{background:rgba(255,255,255,.16)}
.vr-pill-btn--primary{background:#2f6fe0;border-color:#2f6fe0}
.vr-pill-btn--primary:hover{background:#2563d6}

/* drawing toolbar */
.vr-drawbar{position:absolute;left:8px;right:8px;bottom:12px;z-index:4;width:max-content;max-width:calc(100% - 16px);margin:0 auto;
  display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px 10px;padding:6px 8px;background:rgba(15,18,21,.94);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.5)}
.vr-draw-group{display:flex;align-items:center;gap:2px}
.vr-draw-end{gap:6px}
.vr-draw-tool,.vr-draw-color{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:8px;
  background:transparent;color:var(--vr-ink);cursor:pointer}
.vr-draw-tool:hover,.vr-draw-color:hover{background:rgba(255,255,255,.08)}
.vr-draw-tool.is-active{background:rgba(110,164,255,.28);color:#fff}
.vr-swatch{display:block;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.55)}
.vr-draw-color.is-active .vr-swatch{box-shadow:0 0 0 2px #0f1215,0 0 0 4px #fff}
.vr-draw-note{font-size:12px;color:#ffd27a;max-width:180px}
.vr-draw-note:empty{display:none}

/* shortcut sheet */
.vr-keys{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.62)}
.vr-keys-card{width:min(440px,100%);max-height:100%;overflow-y:auto;padding:16px 18px;background:#16191d;color:#e9ebee;
  border:1px solid #2f353c;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.vr-keys-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.vr-keys-head h3{font-size:15px;font-weight:700}
.vr-keys-list{display:flex;flex-direction:column;gap:2px}
.vr-keys-row{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;padding:5px 0;border-bottom:1px solid #23272d}
.vr-keys-row:last-child{border-bottom:0}
.vr-keys-row dd{margin:0;color:#aab0b7;font-size:13px}
.vr-keys-row kbd{display:inline-block;padding:2px 7px;border-radius:6px;border:1px solid #3a4149;border-bottom-width:2px;background:#1e2226;
  color:#e9ebee;font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap}

/* controls */
.vr-controls{flex-shrink:0;padding:4px 12px 6px;background:var(--vr-bar)}
.vr-tl-wrap{position:relative;height:30px}
.vr-timeline{position:absolute;left:0;right:0;top:6px;bottom:0;cursor:pointer;touch-action:none;border-radius:4px}
.vr-timeline[aria-disabled="true"]{cursor:default;opacity:.5}
.vr-tl-track{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--vr-track);overflow:hidden;
  transition:height var(--tr-fast,.12s),margin var(--tr-fast,.12s)}
.vr-timeline:hover .vr-tl-track,.vr-timeline:focus-visible .vr-tl-track{height:6px;margin-top:-3px}
.vr-tl-buffered,.vr-tl-played{position:absolute;top:0;bottom:0;left:0;width:0}
.vr-tl-buffered{background:rgba(255,255,255,.28)}
.vr-tl-played{background:#4c8dff}
.vr-tl-thumb{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none}
.vr-tl-markers{position:absolute;left:0;right:0;top:0;height:9px;pointer-events:none}
.vr-marker{position:absolute;top:0;width:9px;height:9px;margin-left:-4.5px;padding:0;border:1.5px solid var(--vr-bar);border-radius:50%;
  pointer-events:auto;cursor:pointer;transition:transform var(--tr-fast,.12s)}
.vr-marker:hover{transform:scale(1.35)}
.vr-marker--team{background:#4c8dff}
.vr-marker--client{background:#9b6cff}
.vr-marker--ai{background:#d4942a}
.vr-marker.is-range{top:1px;height:7px;margin-left:0;min-width:7px;border-radius:4px}
.vr-marker.is-range:hover{transform:scaleY(1.3)}
.vr-tl-preview{position:absolute;bottom:34px;left:0;z-index:6;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.vr-tl-sprite{border-radius:6px;border:1px solid rgba(255,255,255,.35);background-color:#000;background-repeat:no-repeat;box-shadow:0 6px 18px rgba(0,0,0,.55)}
.vr-tl-time{padding:1px 6px;border-radius:5px;background:rgba(0,0,0,.8);color:#fff;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.vr-ctl-row{display:flex;align-items:center;gap:2px;min-width:0}
.vr-pbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;
  background:transparent;color:var(--vr-ink);cursor:pointer;flex-shrink:0}
.vr-pbtn:hover{background:rgba(255,255,255,.09)}
.vr-pbtn:disabled{opacity:.4;cursor:not-allowed}
.vr-pbtn .vr-ico{width:20px;height:20px}
.vr-time{margin-left:6px;font-size:12px;color:var(--vr-ink2);white-space:nowrap;font-variant-numeric:tabular-nums}
.vr-time-cur{color:var(--vr-ink)}
.vr-ctl-spacer{flex:1 1 auto}
.vr-rate{width:auto;min-width:40px;padding:0 8px;font:inherit;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
.vr-loop.is-active{color:var(--vr-focus);background:rgba(110,164,255,.14)}
.vr-vol{display:inline-flex;align-items:center}
.vr-volume{width:72px;accent-color:#4c8dff;cursor:pointer}
.vr-player.is-drawing .vr-controls{pointer-events:none;opacity:.55}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (min-width:600px){
  .vr-menu-wrap:first-child .vr-menu{right:auto;left:0}
}
@media (max-width:1100px){
  .vr-panel{--vr-side-w:360px}
  .vr-dl-text small{display:none}
}
/* Below 900 px the rail stacks under the player and the page scrolls. */
@media (max-width:899px){
  .vr-body{display:flex;flex-direction:column;overflow-y:auto}
  .vr-main{flex:none;height:min(64vh,720px)}
  .vr-side{flex:none;height:72vh;min-height:420px;border-left:0;border-top:1px solid var(--border)}
  .vr-loading{grid-template-columns:1fr;grid-template-rows:60vh auto}
  .vr-top-main{flex-basis:100%}
  .vr-actions{justify-content:flex-start}
}
/* Below 600 px: player capped at 55vh, the rail becomes a bottom sheet that
   opens on Comments with the composer pinned at its foot. */
@media (max-width:599px){
  .vr-top{padding:6px 10px;gap:6px}
  .vr-top-main{gap:6px}
  .vr-title{font-size:15px}
  .vr-title-input{font-size:15px}
  .vr-crumbs{display:none}
  .vr-nav-pos{display:none}
  .vr-actions{gap:6px}
  .vr-actions .vr-btn{height:32px;padding:0 10px}
  .vr-actions .vr-download{min-height:32px;padding:0 10px}
  .vr-actions-sep{display:none}
  /* Secondary actions go icon-only; the label stays for screen readers. */
  .vr-hide-sm{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
  /* Menus become bottom sheets: anchored to a button they would run off a
     phone's edge. */
  .vr-menu{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:40;width:100%;max-width:none;max-height:60vh;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));border-radius:16px 16px 0 0}
  .vr-menu-item{padding:12px 36px 12px 12px}
  .vr-composer-input{height:40px;min-height:40px;resize:none}
  .vr-composer-input:focus{height:76px}
  .vr-composer:not(:focus-within):not(.has-content) .vr-composer-row{display:none}
  .vr-side:not(.is-expanded) .vr-filters{display:none}
  .vr-actions .vr-pill--client,.vr-actions .vr-pill--warn{display:none}
  .vr-status-extra{display:inline}
  .vr-body{display:flex;flex-direction:column;overflow:hidden}
  .vr-main{flex:none;height:55vh;max-height:55vh}
  .vr-player{max-height:55vh}
  .vr-side{position:relative;z-index:2;flex:1 1 auto;height:auto;min-height:160px;margin-top:-10px;border:0;border-top:1px solid var(--border2);
    border-radius:16px 16px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.35);transition:top var(--tr-slow,.3s)}
  /* Expanded, the sheet starts under the top bar as it actually is — its actions
     wrap onto extra rows here, so it is taller than --vr-top-h. The panel
     measures it into --vr-sheet-top (video-review.js syncSheetTop). */
  .vr-side.is-expanded{position:fixed;left:0;right:0;bottom:0;top:var(--vr-sheet-top,var(--vr-top-h));z-index:25;margin:0}
  .vr-side-handle{display:flex;align-items:center;justify-content:center;width:100%;height:22px;padding:0;border:0;background:none;cursor:pointer;flex-shrink:0}
  .vr-side-grip{width:40px;height:4px;border-radius:2px;background:var(--border3)}
  .vr-filters{padding:8px 12px 4px}
  .vr-threads{padding:4px 12px 12px}
  .vr-composer,.vr-editor-composer{padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px))}
  .vr-reply-box{margin-left:0}
  .vr-replies{margin-left:6px;padding-left:12px}
  .vr-layer{align-items:flex-end;padding:0}
  .vr-sheet{width:100%;max-height:88vh;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}
  .vr-loading{display:block}
  .vr-sk--player{height:50vh}
  .vr-sk-side{display:none}
  .vr-vol .vr-volume{display:none}
  .vr-time-sep,.vr-time-dur{display:none}
  .vr-pbtn{width:34px;height:34px}
  .vr-controls{padding:2px 6px 4px}
  .vr-keys-row{grid-template-columns:110px 1fr}
}

/* ── motion ──────────────────────────────────────────────────────────────── */
@keyframes vr-spin{to{transform:rotate(360deg)}}
@keyframes vr-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes vr-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .vr-panel *,.vr-player *,.vr-panel,.vr-player{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .vr-status.is-loading .vr-spinner{border-top-color:rgba(255,255,255,.75)}
}