/* CTH Video on the web: the page shell, and Obsidian's own chrome (modal,
   setting rows, notices, buttons, toggles) redrawn in the player's shadcn
   neutral look, so plugin code written for Obsidian renders the same here.
   plugin/styles.css is concatenated after this file by build-web.mjs. */

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --popover: oklch(1 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --sidebar: oklch(0.985 0 0);
  --radius: 0.625rem;
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  /* the Obsidian variables plugin/styles.css reads */
  --font-interface: 'Geist Variable', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-monospace: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-ui-small: 13px;
  --font-ui-smaller: 12px;
  --text-normal: var(--foreground);
  --text-muted: var(--muted-foreground);
  --text-faint: oklch(0.708 0 0);
  --background-secondary: var(--sidebar);
  --background-modifier-border: var(--border);
  --tree-w: 272px;
}
body.cvsw-dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --popover: oklch(0.205 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --sidebar: oklch(0.205 0 0);
  --text-faint: oklch(0.556 0 0);
}
html, body { height: 100%; margin: 0; }
body { background: var(--background); color: var(--foreground); font: 400 14px/1.45 var(--font-interface); -webkit-font-smoothing: antialiased; overflow: hidden; }
*, *::before, *::after { box-sizing: border-box; }
button { font: inherit; color: inherit; }
.svg-icon { width: 16px; height: 16px; stroke-width: 2; flex: none; }
.cvsw-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cvsw-ic svg { width: 16px; height: 16px; }
.cvsw-grow { flex: 1; }

/* ---- shell ------------------------------------------------------------------- */
.cvsw-app { display: grid; grid-template-columns: var(--tree-w) minmax(0, 1fr); height: 100dvh; }
.cvsw-app.is-tree-closed, .cvsw-app.is-disconnected { grid-template-columns: minmax(0, 1fr); }
.cvsw-app.is-tree-closed .cvsw-tree, .cvsw-app.is-disconnected .cvsw-tree { display: none; }
.cvsw-main { min-width: 0; min-height: 0; height: 100dvh; overflow: hidden; position: relative; background: var(--background); }
.cvsw-scrim { display: none; }

/* ---- buttons, inputs, badges (shadcn) ---------------------------------------------- */
.cvsw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; margin: 0; border: 1px solid transparent; border-radius: calc(var(--radius) * 0.8); background: transparent; color: var(--foreground); font: 500 14px/1 var(--font-interface); white-space: nowrap; cursor: pointer; transition: background-color 150ms, border-color 150ms; }
.cvsw-btn.is-sm { height: 32px; padding: 0 12px; gap: 6px; }
.cvsw-btn.is-icon { width: 32px; height: 32px; padding: 0; }
.cvsw-btn.is-block { width: 100%; }
.cvsw-btn.is-default { background: var(--primary); color: var(--primary-foreground); }
.cvsw-btn.is-default:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.cvsw-btn.is-outline { background: var(--background); border-color: var(--border); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.cvsw-btn.is-outline:hover, .cvsw-btn.is-ghost:hover { background: var(--accent); }
.cvsw-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.cvsw-input { height: 34px; width: 100%; padding: 0 10px; border: 1px solid var(--input); border-radius: calc(var(--radius) * 0.8); background: transparent; color: var(--foreground); font: 400 14px/1 var(--font-interface); outline: none; }
.cvsw-input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.cvsw-search { position: relative; display: flex; align-items: center; }
.cvsw-search > .cvsw-ic { position: absolute; left: 10px; color: var(--muted-foreground); pointer-events: none; }
.cvsw-search > .cvsw-input { padding-left: 32px; }
.cvsw-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--secondary); font: 500 12px/1 var(--font-interface); }
.cvsw-label { font: 500 14px/1.3 var(--font-interface); }
.cvsw-hint { margin: 0; font: 400 13px/1.5 var(--font-interface); color: var(--muted-foreground); }

/* ---- the file tree ----------------------------------------------------------------- */
.cvsw-tree { display: flex; flex-direction: column; min-height: 0; height: 100dvh; background: var(--sidebar); border-right: 1px solid var(--border); }
.cvsw-brand { display: flex; align-items: center; gap: 8px; padding: 12px 10px 8px 14px; }
.cvsw-logo { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: calc(var(--radius) * 0.8); background: var(--primary); color: var(--primary-foreground); flex: none; }
.cvsw-logo.is-lg { width: 44px; height: 44px; border-radius: var(--radius); }
.cvsw-logo.is-lg svg { width: 24px; height: 24px; }
.cvsw-brand-name { font: 600 14px/1 var(--font-interface); }
.cvsw-tree-actions { display: flex; gap: 6px; padding: 4px 12px 8px; }
.cvsw-grow-btn { flex: 1; height: 32px; }
.cvsw-tree-searchwrap { margin: 0 12px 8px; }
.cvsw-tree-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 6px 12px; overscroll-behavior: contain; scrollbar-width: thin; }
.cvsw-row { display: flex; align-items: center; gap: 6px; width: 100%; height: 30px; padding: 0 8px; margin: 0; border: 0; border-radius: calc(var(--radius) * 0.6); background: transparent; color: var(--foreground); font: 400 13px/1 var(--font-interface); text-align: left; cursor: pointer; user-select: none; outline: none; }
.cvsw-row:hover { background: var(--accent); }
.cvsw-row:focus-visible { box-shadow: 0 0 0 2px var(--ring); }
.cvsw-row.is-active { background: var(--secondary); font-weight: 500; }
.cvsw-row .cvsw-ic svg { width: 15px; height: 15px; color: var(--muted-foreground); }
.cvsw-row.is-active .cvsw-ic svg { color: var(--foreground); }
.cvsw-rootrow { margin: 0 6px 2px; width: calc(100% - 12px); font-weight: 500; }
.cvsw-chev { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 4px; }
.cvsw-chev:hover { background: var(--muted); }
.cvsw-chev .cvsw-ic svg { width: 13px; height: 13px; }
.cvsw-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvsw-row-count { font: 400 11px/1 var(--font-interface); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.cvsw-tree-empty { padding: 10px 12px; font: 400 13px/1.4 var(--font-interface); color: var(--muted-foreground); }
.cvsw-tree-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-top: 1px solid var(--border); }
.cvsw-dropping { box-shadow: inset 0 0 0 2px var(--mark, oklch(0.769 0.188 70.08)) !important; }

/* ---- the library ------------------------------------------------------------------ */
.cvsw-lib { display: flex; flex-direction: column; height: 100%; }
.cvsw-lib-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.cvsw-lib-left, .cvsw-lib-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cvsw-lib-right .cvsw-search { width: 240px; }
.cvsw-lib-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; overscroll-behavior: contain; }
.cvsw-crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
.cvsw-crumb { border: 0; background: transparent; padding: 4px 6px; border-radius: 6px; font: 500 14px/1.2 var(--font-interface); color: var(--muted-foreground); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.cvsw-crumb:hover { background: var(--accent); color: var(--foreground); }
.cvsw-crumb.is-current { color: var(--foreground); cursor: default; }
.cvsw-crumb.is-current:hover { background: transparent; }
.cvsw-crumb-sep svg { width: 14px; height: 14px; color: var(--muted-foreground); }
.cvsw-section { margin: 4px 0 10px; font: 500 12px/1 var(--font-interface); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .04em; }
.cvsw-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 22px; }
.cvsw-folder { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); cursor: pointer; text-align: left; font: 500 14px/1 var(--font-interface); }
.cvsw-folder:hover { background: var(--accent); }
.cvsw-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvsw-folder-count { color: var(--muted-foreground); font-size: 12px; }
.cvsw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.cvsw-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.4); background: var(--card); overflow: hidden; cursor: pointer; outline: none; transition: box-shadow 150ms, border-color 150ms; }
.cvsw-card:hover { box-shadow: var(--shadow-sm); border-color: color-mix(in oklab, var(--foreground) 18%, transparent); }
.cvsw-card:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.cvsw-card-pic { position: relative; aspect-ratio: 16 / 9; background: #0b0b0c; overflow: hidden; }
.cvsw-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cvsw-card-pic.is-broken .cvsw-thumb { display: none; }
.cvsw-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: rgb(0 0 0 / 0.55); color: #fff; opacity: 0; transition: opacity 150ms; }
.cvsw-play svg { width: 20px; height: 20px; fill: #fff; }
.cvsw-card:hover .cvsw-play { opacity: 1; }
.cvsw-corner { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; background: rgb(0 0 0 / 0.6); color: #fff; font: 500 11px/1.2 var(--font-interface); }
.cvsw-card-meta { padding: 10px 12px 12px; display: grid; gap: 3px; }
.cvsw-card-name { font: 500 14px/1.3 var(--font-interface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvsw-card-sub { font: 400 12px/1.3 var(--font-interface); color: var(--muted-foreground); }
.cvsw-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 420px; margin: 60px auto; text-align: center; }
.cvsw-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); background: var(--muted); }
.cvsw-empty-icon svg { width: 20px; height: 20px; }
.cvsw-empty-title { font: 600 16px/1.3 var(--font-interface); }
.cvsw-empty-desc { font: 400 14px/1.5 var(--font-interface); color: var(--muted-foreground); }

/* ---- the player page ----------------------------------------------------------------- */
.cvsw-doc { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cvsw-topbar { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--background); }
.cvsw-leaf { flex: 1; min-height: 0; display: flex; position: relative; }
.cvsw-leaf > .view-content { flex: 1; min-width: 0; min-height: 0; height: 100%; }
.cvsw-leaf .view-content.cvs-content { border-top: 0; }
.cvsw-leaf .video-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #000; }
.cvsw-leaf .video-container video { max-width: 100%; max-height: 100%; }

/* ---- connect ---------------------------------------------------------------------------- */
.cvsw-connect { display: grid; place-items: center; height: 100%; overflow-y: auto; padding: 24px 16px; }
.cvsw-connect-card { width: min(480px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.4); box-shadow: var(--shadow-sm); }
.cvsw-connect-card h1 { margin: 4px 0 0; font: 600 22px/1.2 var(--font-interface); }
.cvsw-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font: 400 13px/1.5 var(--font-interface); }
.cvsw-steps code { font: 500 12px/1.4 var(--font-monospace); background: var(--muted); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
.cvsw-steps a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cvsw-steps .cvsw-btn { vertical-align: middle; width: 26px; height: 26px; }

/* the connect card's "different app" disclosure */
.cvsw-other { font: 400 13px/1.5 var(--font-interface); color: var(--muted-foreground); }
.cvsw-other summary { cursor: pointer; }
.cvsw-other[open] { display: grid; gap: 8px; }
.cvsw-other code { font: 500 12px/1.4 var(--font-monospace); background: var(--muted); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
.cvsw-other .cvsw-btn { vertical-align: middle; width: 26px; height: 26px; }

/* ---- Obsidian chrome: modal ---------------------------------------------------------------- */
.modal-container { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; font-family: var(--font-interface); color: var(--foreground); }
.modal-bg { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); animation: cvsw-fade 120ms ease-out; }
.modal { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); outline: none; }
.modal.cvsw-settings { width: min(760px, 100%); }
.modal-close-button { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; color: var(--muted-foreground); }
.modal-close-button:hover { background: var(--accent); color: var(--foreground); }
.modal-title { font: 600 18px/1.3 var(--font-interface); margin: 0 36px 14px 0; }
.modal-content { font: 400 14px/1.5 var(--font-interface); }
.modal-content p { margin: 0 0 12px; color: var(--muted-foreground); }
.modal-button-container { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ---- Obsidian chrome: buttons, inputs, toggles ------------------------------------------------ */
.modal button, .notice button, .setting-item-control button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 0.8); background: var(--background); color: var(--foreground); font: 500 14px/1 var(--font-interface); cursor: pointer; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.modal button:hover, .notice button:hover, .setting-item-control button:hover { background: var(--accent); }
.modal button.mod-cta, .notice button.mod-cta, .setting-item-control button.mod-cta { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.modal button.mod-warning, .setting-item-control button.mod-warning { background: var(--destructive); color: #fff; border-color: transparent; }
.modal button.clickable-icon, .setting-item-control button.clickable-icon { width: 30px; height: 30px; padding: 0; border-color: transparent; box-shadow: none; background: transparent; }
.modal button.clickable-icon:hover, .setting-item-control button.clickable-icon:hover { background: var(--accent); }
.modal input[type=text], .modal input[type=search], .modal input[type=number], .modal textarea, .modal select, .setting-item-control input[type=text], .setting-item-control textarea, .setting-item-control select {
  height: 34px; min-width: 0; padding: 0 10px; border: 1px solid var(--input); border-radius: calc(var(--radius) * 0.8); background: transparent; color: var(--foreground); font: 400 14px/1 var(--font-interface); outline: none;
}
.modal textarea, .setting-item-control textarea { height: auto; min-height: 80px; padding: 8px 10px; line-height: 1.45; width: min(340px, 100%); resize: vertical; }
.modal select, .setting-item-control select { padding-right: 28px; background: var(--background); }
.modal input:focus, .modal textarea:focus, .modal select:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.checkbox-container { position: relative; width: 36px; height: 20px; flex: none; border-radius: 999px; background: var(--input); cursor: pointer; transition: background-color 150ms; outline: none; }
.checkbox-container::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); transition: transform 150ms; }
.checkbox-container.is-enabled { background: var(--primary); }
.checkbox-container.is-enabled::after { transform: translateX(16px); }
body.cvsw-dark .checkbox-container.is-enabled::after { background: var(--primary-foreground); }
.checkbox-container:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.checkbox-container input { display: none; }
.checkbox-container.is-disabled { opacity: 0.5; cursor: default; }
.cvsw-slider { display: flex; align-items: center; gap: 8px; }
.cvsw-slider input[type=range] { width: 160px; accent-color: var(--primary); }
.cvsw-slider-val { min-width: 32px; font: 400 12px/1 var(--font-monospace); color: var(--muted-foreground); }

/* ---- Obsidian chrome: setting rows ---------------------------------------------------------- */
.setting-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); }
.setting-item:first-child { border-top: 0; }
.setting-item-info { flex: 1; min-width: 0; }
.setting-item-name { font: 500 14px/1.35 var(--font-interface); }
.setting-item-description { margin-top: 2px; font: 400 12px/1.45 var(--font-interface); color: var(--muted-foreground); }
.setting-item-control { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; max-width: 60%; flex-wrap: wrap; }
.setting-item-control input[type=text] { width: 240px; }
.setting-item-heading { padding-top: 22px; }
.setting-item-heading .setting-item-name { font: 600 13px/1 var(--font-interface); text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); }
.setting-item.is-disabled { opacity: 0.55; }
.vertical-tab-content h1, .vertical-tab-content h2, .vertical-tab-content h3 { font-family: var(--font-interface); }
.cvsw-set-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ---- Obsidian chrome: notices and the fallback menu --------------------------------------------- */
.notice-container { position: fixed; top: 14px; right: 14px; z-index: 140; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(420px, calc(100vw - 28px)); pointer-events: none; }
.notice { pointer-events: auto; padding: 12px 14px; background: var(--popover); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); font: 400 14px/1.45 var(--font-interface); white-space: pre-line; animation: cvsw-rise 160ms ease-out; }
.notice.is-out { opacity: 0; transform: translateY(-4px); transition: opacity 160ms, transform 160ms; }
.notice button { height: 30px; padding: 0 12px; font-size: 13px; }
.menu { position: fixed; z-index: 120; min-width: 180px; padding: 4px; background: var(--popover); border: 1px solid var(--border); border-radius: calc(var(--radius) * 0.8); box-shadow: var(--shadow-lg); font: 400 14px/1 var(--font-interface); }
.menu-item { padding: 8px; border-radius: 6px; cursor: pointer; }
.menu-item:hover { background: var(--accent); }
.menu-separator { height: 1px; margin: 4px -4px; background: var(--border); }
@keyframes cvsw-fade { from { opacity: 0; } }
@keyframes cvsw-rise { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .modal-bg, .notice { animation: none; } }

/* ---- phones and narrow windows: the tree is a drawer ----------------------------------------- */
@media (max-width: 800px) {
  .cvsw-app, .cvsw-app.is-tree-closed { grid-template-columns: minmax(0, 1fr); }
  .cvsw-app .cvsw-tree, .cvsw-app.is-tree-closed .cvsw-tree { display: flex; position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 60; transform: translateX(-102%); transition: transform 180ms ease; box-shadow: var(--shadow-lg); }
  .cvsw-app.is-drawer-open .cvsw-tree { transform: none; }
  .cvsw-app.is-drawer-open .cvsw-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgb(0 0 0 / 0.4); }
  .cvsw-app.is-disconnected .cvsw-tree { display: none; }
  .cvsw-lib-toolbar { padding: 10px 12px; }
  .cvsw-lib-right { width: 100%; }
  .cvsw-lib-right .cvsw-search { flex: 1; width: auto; }
  .cvsw-lib-body { padding: 12px; }
  .cvsw-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .setting-item { flex-direction: column; align-items: stretch; gap: 8px; }
  .setting-item-control { max-width: none; justify-content: flex-start; }
  .setting-item-control input[type=text] { width: 100%; }
}

/* ---- the status pill (offline, signed out, changes waiting) ---------------------- */
.cvsw-banner { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: 10px; max-width: min(640px, calc(100vw - 24px)); padding: 8px 10px 8px 14px; background: var(--popover); color: var(--foreground); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-lg); font: 500 13px/1.35 var(--font-interface); }
.cvsw-banner.is-hidden { display: none; }
.cvsw-banner .cvsw-ic svg { width: 15px; height: 15px; color: var(--mark, oklch(0.769 0.188 70.08)); }
.cvsw-banner-btn { flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font: 500 13px/1 var(--font-interface); cursor: pointer; }
.cvsw-notice-sub { margin-top: 2px; font-size: 12px; color: var(--muted-foreground); }
.cvsw-btn.is-spinning svg { animation: cvsw-spin 700ms linear infinite; }
@keyframes cvsw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cvsw-btn.is-spinning svg { animation: none; } }

/* CTH Video: the player, styled with the shadcn "neutral" tokens that CTH
   Calendar, Mail and Bookings use (same oklch values, radius 0.625rem, Geist).
   Light is the default; .is-dark applies shadcn's .dark set. The picture
   stage stays black in both. Component mapping:
     sidebar table  -> Table (h-10 muted head, border-b rows, hover muted/50, selected accent)
     toolbar icons  -> Button variant=ghost size=icon (h-8 w-8, radius-md)
     timeline       -> Slider (h-1.5 track primary/20, range primary, 16px thumb)
     clip pill      -> Badge variant=secondary
     speed stepper  -> ButtonGroup outline
     inputs         -> Input (border-input, ring-ring/50 on focus)
     hover tip      -> Tooltip (bg-primary text-primary-foreground)
     flash          -> Toast-like card (popover, border, shadow)  */

.workspace-leaf-content[data-type="video"] .view-content.cvs-content, .cvs-menu {
  /* shadcn neutral (light) */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --accent-strong: oklch(0.93 0 0);
  --selection: oklch(0.87 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --sidebar: oklch(0.985 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --mark: oklch(0.769 0.188 70.08);          /* amber-500, the one non-neutral: clip ticks and In/Out range */
  --font-sans: 'Geist Variable', 'Geist', var(--font-interface), system-ui, sans-serif;
  --font-mono: var(--font-monospace);
  --cvs-side-w: 300px;

  padding: 0;
  background: var(--background);
  color: var(--foreground);
  border-top: 1px solid var(--border); /* separator under Obsidian's view header (path and arrows) */
  font-family: var(--font-sans);
  font-size: 13px;
  display: flex;
  overflow: hidden;
}
.workspace-leaf-content[data-type="video"] .view-content.cvs-content.is-dark, .cvs-menu.is-dark {
  /* shadcn neutral (.dark) */
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --accent-strong: oklch(0.32 0 0);
  --selection: oklch(0.42 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --mark: oklch(0.828 0.189 84.429);          /* amber-400 */
}
.cvs-root { flex: 1 1 auto; display: flex; flex-direction: row; min-width: 0; min-height: 0; position: relative; }
/* the video area never drops below STAGE_MIN even if the sidebar setting is wider than the pane (see .cvs-main) */
.cvs-content ::selection, .cvs-content input::selection { background: var(--selection); color: var(--foreground); }
.cvs-content.cvs-side-right .cvs-root { flex-direction: row-reverse; }
.cvs-content button { font-family: inherit; }

/* ---- sidebar (shadcn Sidebar surface) ----------------------------------- */
.cvs-side {
  position: relative;
  flex: 0 1 var(--cvs-side-w);
  width: var(--cvs-side-w);
  min-width: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--background);
  border-right: 1px solid var(--sidebar-border);
  min-height: 0;
}
/* filter bar (Select triggers) */
.cvs-filter { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px; border-bottom: 1px solid var(--border); background: var(--background); flex: 0 0 auto; overflow: hidden; }
.cvs-content button.cvs-select { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; height: 28px; min-width: 0; flex: 1 1 0; padding: 0 8px 0 10px; border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--background); color: var(--foreground); font: inherit; font-size: 12px; box-shadow: 0 1px 2px oklch(0 0 0 / 0.05); cursor: default; }
.cvs-content button.cvs-select:hover { background: var(--accent); }
.cvs-content button.cvs-select:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.cvs-content button.cvs-select.is-active { border-color: var(--foreground); font-weight: 500; }
.cvs-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvs-select-icon { display: flex; color: var(--muted-foreground); flex: 0 0 auto; }
.cvs-select-icon svg { width: 14px; height: 14px; }
.cvs-filter .cvs-btn.cvs-filter-clear, .cvs-filter .cvs-btn.cvs-filter-sort { width: 28px; height: 28px; color: var(--muted-foreground); flex: 0 0 auto; }
.cvs-filter .cvs-btn.cvs-filter-sort { border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--background); box-shadow: 0 1px 2px oklch(0 0 0 / 0.05); }
.cvs-filter .cvs-btn.cvs-filter-clear.is-hidden { display: none; }
.cvs-content.cvs-side-right .cvs-side { border-right: 0; border-left: 1px solid var(--sidebar-border); }
.cvs-side.is-hidden { display: none; }

/* table: one scroll container, sticky head */
.cvs-table { flex: 1 1 auto; min-height: 0; overflow: auto; outline: none; display: flex; flex-direction: column; }
.cvs-table::-webkit-scrollbar { width: 8px; height: 8px; }
.cvs-table::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; border: 2px solid var(--background); }
.cvs-table::-webkit-scrollbar-thumb:hover { background: var(--ring); }
.cvs-table::-webkit-scrollbar-corner { background: transparent; }
.cvs-cols, .cvs-row { display: grid; grid-template-columns: var(--cvs-cols, 60px 44px 62px 62px 62px); gap: 8px; min-width: var(--cvs-table-min, 100%); box-sizing: border-box; }
.cvs-cols { position: sticky; top: 0; z-index: 2; height: 36px; align-items: center; padding: 0 12px; background: var(--muted); color: var(--muted-foreground); font-size: 12px; font-weight: 500; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.cvs-col { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; height: 100%; }
.cvs-col-t, .cvs-col-in, .cvs-col-out { justify-content: flex-start; cursor: pointer; }
.cvs-col-t:hover, .cvs-col-in:hover, .cvs-col-out:hover { color: var(--foreground); }
.cvs-col-label { overflow: hidden; text-overflow: ellipsis; }
.cvs-col-icon { display: none; color: var(--muted-foreground); }
.cvs-col-icon svg { width: 14px; height: 14px; display: block; }
.cvs-side.col-t-collapsed .cvs-col-t .cvs-col-label, .cvs-side.col-in-collapsed .cvs-col-in .cvs-col-label, .cvs-side.col-out-collapsed .cvs-col-out .cvs-col-label { display: none; }
.cvs-side.col-t-collapsed .cvs-col-t .cvs-col-icon, .cvs-side.col-in-collapsed .cvs-col-in .cvs-col-icon, .cvs-side.col-out-collapsed .cvs-col-out .cvs-col-icon { display: block; }
.cvs-side.col-t-collapsed .cvs-row .cvs-t, .cvs-side.col-in-collapsed .cvs-row .cvs-in, .cvs-side.col-out-collapsed .cvs-row .cvs-out { visibility: hidden; }
.cvs-side.col-t-collapsed .cvs-col-t .cvs-grip, .cvs-side.col-in-collapsed .cvs-col-in .cvs-grip, .cvs-side.col-out-collapsed .cvs-col-out .cvs-grip { display: none; }
/* column resize grip (Resizable handle): lives in the 8px gap after each header cell */
.cvs-grip { position: absolute; top: 0; bottom: 0; right: -8px; width: 8px; cursor: col-resize; z-index: 3; }
.cvs-grip::after { content: ''; position: absolute; top: 8px; bottom: 8px; left: 3px; width: 1px; background: var(--border); transition: background 120ms, width 120ms; }
.cvs-grip:hover::after { background: var(--ring); width: 2px; }
body.cvs-col-resizing { cursor: col-resize; user-select: none; }
body.cvs-col-resizing .cvs-root { pointer-events: none; }
body.cvs-col-resizing .cvs-grip { pointer-events: auto; }

.cvs-list { flex: 1 1 auto; padding-bottom: 6px; }
.cvs-empty { padding: 14px 12px; color: var(--muted-foreground); font-size: 13px; line-height: 1.45; }
.cvs-empty.is-hidden { display: none; }
.cvs-row { padding: 0 12px; height: var(--cvs-row-h, 28px); align-items: center; cursor: default; position: relative; border-bottom: 1px solid var(--border); transition: background 100ms; }
/* vertical gridlines: the 8px column gap carries a hairline at its center */
.cvs-content.cvs-grid .cvs-cell:not(:last-child):not(.cvs-check)::after, .cvs-content.cvs-grid .cvs-col:not(:last-child):not(.cvs-col-check)::after { content: ''; position: absolute; top: 0; bottom: 0; right: -4.5px; width: 1px; background: var(--border); pointer-events: none; }
.cvs-content.cvs-grid .cvs-cell { position: relative; }
.cvs-content.cvs-grid .cvs-col::after { z-index: 0; }
.cvs-content.cvs-grid .cvs-grip { z-index: 3; }
.cvs-row:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.cvs-row.is-selected { background: var(--accent); color: var(--accent-foreground); }
.cvs-table:focus-within .cvs-row.is-selected { background: var(--accent-strong); }
.cvs-cell { min-width: 0; align-self: stretch; display: flex; align-items: center; }
.cvs-title { overflow: hidden; white-space: nowrap; font-size: 13px; display: flex; align-items: center; gap: 6px; line-height: var(--cvs-row-h, 28px); }
.cvs-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvs-row.is-selected .cvs-title { font-weight: 500; }
.cvs-title.is-blank::before { content: 'untitled'; color: var(--muted-foreground); font-style: italic; }
/* annotated clips: a small freeze badge after the name (click to annotate) */
.cvs-anno-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--secondary); color: var(--muted-foreground); font-size: 10px; font-weight: 600; line-height: 16px; cursor: pointer; }
.cvs-anno-badge svg { width: 10px; height: 10px; display: block; }
.cvs-anno-badge:hover { background: var(--accent-strong); color: var(--foreground); }
.cvs-row.is-annotating { box-shadow: inset 2px 0 0 var(--mark); }
/* checkbox column (shadcn Checkbox: 16px, border-input, primary when checked) */
.cvs-check, .cvs-col-check { display: flex; align-items: center; justify-content: center; cursor: default; }
.cvs-cb { width: 16px; height: 16px; box-sizing: border-box; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in oklab, var(--foreground) 22%, transparent); border-radius: 4px; background: var(--background); color: var(--primary-foreground); box-shadow: 0 1px 2px oklch(0 0 0 / 0.05); transition: background 100ms, border-color 100ms; }
.cvs-cb:hover { border-color: color-mix(in oklab, var(--foreground) 45%, transparent); }
.cvs-cb.is-checked, .cvs-cb.is-mixed { background: var(--primary); border-color: var(--primary); }
.cvs-cb svg { width: 12px; height: 12px; display: block; stroke-width: 3px; }
.cvs-side.no-checks .cvs-col-check { display: none; }
/* editors stay inside their own column, like a table cell: the box is the
   cell's width (plus the 7px pulled out on the left so the text does not
   move); long text scrolls inside the box and the column refits on commit */
.cvs-t, .cvs-in, .cvs-out { font-family: var(--font-mono); font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: left; overflow: hidden; display: block; line-height: var(--cvs-row-h, 28px); }
.cvs-row.is-selected .cvs-t, .cvs-row.is-selected .cvs-in, .cvs-row.is-selected .cvs-out { color: var(--accent-foreground); }
.cvs-cell.is-editing { overflow: visible; display: flex; align-items: center; align-self: center; height: min(24px, calc(var(--cvs-row-h, 28px) - 4px)); margin: 0 0 0 -7px; width: calc(100% + 7px); }
.cvs-cell.is-editing::before { content: none; display: none; }
/* Input: text stays on the same pixel as the static cell (7px = 6px pad + 1px border) */
.cvs-side input.cvs-input[type="text"] { width: 100%; min-width: 0; max-width: 100%; flex: 1 1 auto; box-sizing: border-box; font: inherit; font-size: inherit; line-height: 1; height: min(24px, calc(var(--cvs-row-h, 28px) - 4px)); min-height: 0; padding: 0 6px; margin: 0; border-radius: var(--radius-md); border: 1px solid var(--input); background: var(--background); color: var(--foreground); box-shadow: none; transition: box-shadow 120ms, border-color 120ms; }
.cvs-side input.cvs-input[type="text"]:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 40%, transparent); }
.cvs-side input.cvs-input[type="text"]::placeholder { color: var(--muted-foreground); }
.cvs-cell.cvs-t.is-editing input.cvs-input[type="text"], .cvs-cell.cvs-in.is-editing input.cvs-input[type="text"], .cvs-cell.cvs-out.is-editing input.cvs-input[type="text"] { text-align: left; font-family: var(--font-mono); font-size: 12px; }
.cvs-cell.cvs-t.is-editing, .cvs-cell.cvs-in.is-editing, .cvs-cell.cvs-out.is-editing { margin: 0 0 0 -7px; }

/* footer toolbar */
.cvs-side-bar { position: relative; container-type: inline-size; display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 8px; border-top: 1px solid var(--border); background: var(--background); overflow: hidden; min-width: 0; }
.cvs-side-bar > * { flex: 0 0 auto; }
.cvs-count { color: var(--muted-foreground); font-size: 12px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.cvs-content button.cvs-export-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: 0 1px 2px oklch(0 0 0 / 0.08); cursor: default; }
.cvs-content button.cvs-export-btn:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.cvs-content button.cvs-export-btn.is-hidden { display: none; }
.cvs-content button.cvs-export-btn.is-busy { opacity: 0.7; pointer-events: none; }
.cvs-content button.cvs-export-btn.is-busy .cvs-export-icon svg { animation: cvs-spin 1s linear infinite; }
.cvs-export-icon { display: flex; }
.cvs-export-n { font-variant-numeric: tabular-nums; }
/* narrow sidebars: the export button drops its word and the delete button goes (Backspace and the row menu still delete) */
@container (max-width: 300px) { .cvs-export-lbl { display: none; } .cvs-content button.cvs-export-btn { padding: 0 8px; gap: 4px; } .cvs-side-bar .cvs-del-btn { display: none; } }
@container (max-width: 190px) { .cvs-side-bar .cvs-count { display: none; } }
.cvs-export-icon svg { width: 14px; height: 14px; }
.cvs-export-btn:not(.is-hidden) ~ .cvs-btn.is-right { margin-left: 2px; }
@keyframes cvs-spin { to { transform: rotate(360deg); } }
.cvs-notice-btn { margin-top: 8px; }
.cvs-saved { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); padding: 0 6px; background: var(--background); font-size: 12px; color: var(--muted-foreground); opacity: 0; transition: opacity 200ms; pointer-events: none; }
.cvs-saved.is-saved { opacity: 1; }
.cvs-saved.is-error { opacity: 1; color: var(--destructive); }
/* sidebar edge (Resizable handle) */
.cvs-handle { position: absolute; top: 0; bottom: 0; right: -4px; width: 8px; cursor: col-resize; z-index: 5; }
.cvs-content.cvs-side-right .cvs-handle { right: auto; left: -4px; }
.cvs-handle::after { content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: var(--ring); opacity: 0; transition: opacity 120ms; }
.cvs-handle:hover::after, body.cvs-resizing .cvs-handle::after { opacity: 1; }
/* ResizableHandle withHandle: the small grip pill at mid-height */
.cvs-handle::before { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 24px; margin: -12px 0 0 -4px; border-radius: var(--radius-sm); background: var(--border); border: 1px solid var(--border); box-sizing: border-box; z-index: 1; transition: background 120ms; }
.cvs-handle:hover::before, body.cvs-resizing .cvs-handle::before { background: var(--ring); border-color: var(--ring); }
body.cvs-resizing { cursor: col-resize; user-select: none; }
body.cvs-resizing .cvs-root { pointer-events: none; }
body.cvs-resizing .cvs-handle { pointer-events: auto; }

/* ---- buttons (Button ghost, size icon) ---------------------------------- */
.cvs-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: var(--radius-md); color: var(--foreground); background: transparent; box-shadow: none; border: 0; cursor: default; transition: background 100ms, color 100ms; }
.cvs-btn:hover { background: var(--accent); color: var(--accent-foreground); }
.cvs-btn:active { background: var(--accent-strong); }
.cvs-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.cvs-btn.is-on { background: var(--secondary); color: var(--secondary-foreground); box-shadow: inset 0 0 0 1px var(--border); }
.cvs-btn.is-disabled { opacity: 0.5; pointer-events: none; }
.cvs-btn.is-right { margin-left: auto; }
.cvs-btn svg { width: 16px; height: 16px; display: block; }
.cvs-btn.cvs-play { width: 36px; height: 36px; margin: 0 4px; background: var(--primary); color: var(--primary-foreground); border-radius: 999px; }
.cvs-btn.cvs-play:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.cvs-btn.cvs-play svg { width: 18px; height: 18px; }
.cvs-side-bar .cvs-btn { color: var(--muted-foreground); }
.cvs-side-bar .cvs-btn:hover { color: var(--foreground); }

/* ---- stage --------------------------------------------------------------- */
.cvs-main { flex: 1 1 0; display: flex; flex-direction: column; min-width: 160px; min-height: 0; overflow: hidden; }
/* stage: app background with the picture in a card; ResizeObserver sizes the
   card to the video's aspect ratio so the border hugs the picture exactly */
.cvs-stage { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; background: var(--background); outline: none; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.cvs-frame { position: relative; flex: 0 0 auto; background: #000; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 1px 3px oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1); overflow: hidden; }
.cvs-video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; cursor: ew-resize; }
/* edge to edge: the old theater look */
.cvs-content.cvs-stage-edge .cvs-stage, .cvs-stage.is-fullscreen { background: #000; padding: 0; }
.cvs-content.cvs-stage-edge .cvs-frame, .cvs-stage.is-fullscreen .cvs-frame { border: 0; border-radius: 0; box-shadow: none; }
.cth-scrub-overlay.is-card { border-radius: var(--radius-lg, 0.625rem); overflow: hidden; }
.cvs-stage.is-playing .cvs-video { cursor: default; }
.cvs-show-side { position: absolute; left: 12px; top: 12px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--background); color: var(--muted-foreground); border: 1px solid var(--border); box-shadow: 0 1px 2px oklch(0 0 0 / 0.05); opacity: 0.9; transition: opacity 160ms, background 120ms; cursor: default; z-index: 2; }
.cvs-stage:hover .cvs-show-side { opacity: 1; }
.cvs-show-side:hover { background: var(--accent); color: var(--accent-foreground); }
.cvs-content.cvs-stage-edge .cvs-show-side, .cvs-stage.is-fullscreen .cvs-show-side { background: oklch(1 0 0 / 0.1); color: oklch(1 0 0 / 0.85); border-color: transparent; }
.cvs-show-side.is-hidden { display: none; }
.cvs-show-side svg { width: 16px; height: 16px; display: block; }
.cvs-flash { position: absolute; left: 50%; top: 12%; transform: translateX(-50%); padding: 6px 12px; border-radius: var(--radius-md); background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); box-shadow: 0 4px 12px oklch(0 0 0 / 0.15); font-size: 13px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity 150ms; white-space: nowrap; }
.cvs-flash.is-on { opacity: 1; }

/* ---- transport ------------------------------------------------------------ */
.cvs-transport { container-type: inline-size; flex: 0 0 auto; background: var(--background); border-top: 1px solid var(--border); padding: 10px 12px 8px; user-select: none; }
.cvs-row1 { display: flex; align-items: center; gap: 10px; }
.cvs-row2 { display: flex; justify-content: space-between; padding: 4px 2px 0; }
.cvs-row3 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding-top: 4px; }
.cvs-left { display: flex; align-items: center; gap: 6px; justify-self: start; min-width: 0; }
.cvs-center { display: flex; align-items: center; gap: 2px; justify-self: center; }
.cvs-right { display: flex; align-items: center; justify-self: end; }
.cvs-time { font-family: var(--font-mono); font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.cvs-cur { color: var(--foreground); cursor: text; border-radius: var(--radius-sm); padding: 0 4px; margin-left: -4px; }
.cvs-cur:hover { background: var(--accent); }
.cvs-transport input.cvs-clock-input[type="text"] { font: inherit; font-family: var(--font-mono); font-size: 12px; width: 12ch; min-height: 0; padding: 0 6px; height: 22px; line-height: 20px; border-radius: var(--radius-md); border: 1px solid var(--input); background: var(--background); color: var(--foreground); box-shadow: none; }
.cvs-transport input.cvs-clock-input[type="text"]:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }

/* volume (Slider) */
.cvs-vol { display: flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; }
.cvs-slider { -webkit-appearance: none; appearance: none; width: 80px; min-width: 40px; flex: 0 1 80px; height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--primary) var(--f, 100%), color-mix(in oklab, var(--primary) 20%, transparent) var(--f, 100%)); outline: none; margin: 0; }
.cvs-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--background); border: 1px solid var(--primary); box-shadow: 0 1px 2px oklch(0 0 0 / 0.1); }
.cvs-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }

/* speed (ButtonGroup outline) */
.cvs-speed { display: flex; align-items: stretch; flex: 0 0 auto; height: 28px; border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--background); overflow: hidden; }
.cvs-speed .cvs-speed-btn { width: 24px; height: auto; border-radius: 0; color: var(--muted-foreground); }
.cvs-speed .cvs-speed-btn:hover { color: var(--foreground); }
.cvs-speed .cvs-speed-btn svg { width: 14px; height: 14px; }
.cvs-speed-val { display: flex; align-items: center; justify-content: center; min-width: 36px; padding: 0 4px; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--foreground); border-left: 1px solid var(--input); border-right: 1px solid var(--input); cursor: default; }
.cvs-speed-val.is-off { color: var(--foreground); background: var(--secondary); }

/* timeline (Slider) */
.cvs-timeline { position: relative; flex: 1 1 auto; height: 24px; cursor: pointer; }
.cvs-tl-track { position: absolute; left: 0; right: 0; top: 9px; height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--primary) 20%, transparent); overflow: hidden; }
.cvs-tl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--primary); }
.cvs-tl-range { position: absolute; top: 0; bottom: 0; background: var(--mark); opacity: 0.6; }
.cvs-tl-range.is-hidden { display: none; }
.cvs-tl-head { position: absolute; top: 12px; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--background); border: 1px solid var(--primary); box-shadow: 0 1px 2px oklch(0 0 0 / 0.1); transform: scale(0.85); transition: transform 100ms, box-shadow 100ms; pointer-events: none; }
.cvs-timeline:hover .cvs-tl-head, .cvs-timeline.is-dragging .cvs-tl-head { transform: scale(1); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent); }
.cvs-tl-marks { position: absolute; left: 0; right: 0; top: 0; height: 24px; pointer-events: none; }
.cvs-tl-marks.is-hidden { display: none; }
.cvs-mark { position: absolute; top: 17px; width: 0; height: 0; margin-left: -4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--mark); opacity: 0.9; pointer-events: auto; cursor: pointer; }
.cvs-mark:hover, .cvs-mark.is-current { opacity: 1; border-bottom-width: 7px; top: 16px; }
.cvs-tl-tip { position: absolute; bottom: 26px; transform: translateX(-50%); padding: 4px 10px; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 100ms; }
.cvs-timeline.is-hover .cvs-tl-tip, .cvs-timeline.is-dragging .cvs-tl-tip { opacity: 1; }

/* clip pill (Badge secondary) */
.cvs-pill { flex: 0 0 auto; max-width: 220px; min-width: 56px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: var(--radius-md); background: var(--secondary); color: var(--secondary-foreground); border: 1px solid transparent; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.cvs-pill:hover { background: color-mix(in oklab, var(--secondary) 80%, var(--foreground) 6%); }
.cvs-pill.is-empty { color: var(--muted-foreground); font-weight: 400; }
.cvs-pill.is-empty::before { content: 'no clip'; }
.cvs-pill.is-hidden { display: none; }

/* narrow panes: drop the volume slider (mute stays), then the speed chevrons, then speed */
/* the side columns are symmetric (center stays centered), so each must fit the
   wider of the two groups: left needs 246px with the slider, 114px without
   chevrons, 76px without speed; center is 244px. */
@container (max-width: 780px) { .cvs-slider { display: none; } }
@container (max-width: 680px) { .cvs-speed-btn { display: none; } .cvs-speed-val { border-left: 0; border-right: 0; padding: 0 8px; } .cvs-left { gap: 2px; } }
@container (max-width: 520px) { .cvs-speed { display: none; } }
@container (max-width: 420px) { .cvs-right { display: none; } .cvs-row3 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }

/* ---- scrub overlay (engine) ---------------------------------------------- */
.cth-scrub-overlay { position: fixed; pointer-events: none; z-index: 60; display: none; }
.cth-scrub-overlay.is-live { display: block; }
.cth-scrub-overlay canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
video.cth-scrub-bound:not(.cvs-video) { cursor: ew-resize; }

/* ---- shortcuts sheet (Obsidian modal; Kbd styling) ------------------------ */
.cvs-keys h4 { margin: 14px 0 6px; font-size: var(--font-ui-small); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cvs-keys h4:first-child { margin-top: 0; }
.cvs-keys table { width: 100%; border-collapse: collapse; }
.cvs-keys td { padding: 3px 6px 3px 0; vertical-align: top; }
.cvs-keys .cvs-key { width: 42%; font-family: var(--font-monospace); font-size: var(--font-ui-smaller); color: var(--text-normal); white-space: nowrap; }

/* ---- context / dropdown menu (shadcn ContextMenu) -------------------------- */
.cvs-menu {
  position: fixed; z-index: 1000; min-width: 8rem; max-width: 20rem; padding: 4px; box-sizing: border-box;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
  font-family: var(--font-sans); font-size: 13px; line-height: 1.4;
  display: flex; flex-direction: column; outline: none;
  opacity: 0; transform: scale(0.96); transform-origin: top left; transition: opacity 100ms ease-out, transform 100ms ease-out;
}
.cvs-menu.is-dark { box-shadow: 0 4px 6px -1px oklch(0 0 0 / 0.4), 0 2px 4px -2px oklch(0 0 0 / 0.4); }
.cvs-menu.is-open { opacity: 1; transform: scale(1); }
.cvs-menu-item { position: relative; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: var(--radius-sm); cursor: default; user-select: none; white-space: nowrap; }
.cvs-menu.has-checks .cvs-menu-item { padding-left: 28px; }
.cvs-menu-item.is-focus { background: var(--accent); color: var(--accent-foreground); }
.cvs-menu-item.is-disabled { opacity: 0.5; pointer-events: none; }
.cvs-menu-icon { display: flex; color: var(--muted-foreground); }
.cvs-menu-item.is-focus .cvs-menu-icon { color: var(--accent-foreground); }
.cvs-menu-icon svg, .cvs-menu-check svg { width: 16px; height: 16px; display: block; }
.cvs-menu-check { position: absolute; left: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px; display: flex; align-items: center; justify-content: center; }
.cvs-menu-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.cvs-menu-kbd { margin-left: 16px; font-size: 12px; letter-spacing: 0.08em; color: var(--muted-foreground); }
.cvs-menu-item.is-focus .cvs-menu-kbd { color: var(--accent-foreground); }
.cvs-menu-sep { height: 1px; margin: 4px -4px; background: var(--border); }

/* ---- button panel --------------------------------------------------------- */
.cvs-panel-host { flex: 0 0 auto; }
.cvs-panel { display: flex; flex-direction: column; border-top: 1px solid var(--border); background: var(--background); }
.cvs-panel.is-hidden { display: none; }
.cvs-prow { display: flex; align-items: stretch; height: 34px; border-bottom: 1px solid var(--border); min-width: 0; position: relative; }
.cvs-prow.is-dragging { opacity: 0.4; }
.cvs-prow.is-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--ring); z-index: 2; }
.cvs-prow-head { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; width: 96px; padding: 0 8px 0 10px; border-right: 1px solid var(--border); background: var(--muted); color: var(--muted-foreground); font-size: 11px; font-weight: 500; letter-spacing: 0.01em; cursor: grab; user-select: none; overflow: hidden; }
.cvs-prow-head:active { cursor: grabbing; }
.cvs-prow-kind { display: flex; flex: 0 0 auto; }
.cvs-prow-kind svg { width: 13px; height: 13px; }
.cvs-prow.is-clips .cvs-prow-kind { color: var(--foreground); }
.cvs-prow-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvs-pstrip { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 0 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.cvs-pstrip::-webkit-scrollbar { display: none; }
.cvs-prow-tail { flex: 0 0 auto; display: flex; align-items: center; gap: 0; padding: 0 4px; border-left: 1px solid var(--border); }
.cvs-prow-tail .cvs-pbtn-icon, .cvs-panel-foot .cvs-pbtn-icon { width: 26px; height: 26px; color: var(--muted-foreground); }
.cvs-prow-tail .cvs-pbtn-icon svg, .cvs-panel-foot .cvs-pbtn-icon svg { width: 14px; height: 14px; }
/* slim buttons: Button variant=outline size=sm, 24px tall */
.cvs-content button.cvs-pbtn { flex: 0 0 auto; height: 24px; padding: 0 9px; border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--background); color: var(--foreground); font: inherit; font-size: 12px; font-weight: 500; line-height: 22px; white-space: nowrap; box-shadow: 0 1px 2px oklch(0 0 0 / 0.05); cursor: default; user-select: none; }
.cvs-content button.cvs-pbtn:hover { background: var(--accent); }
.cvs-content button.cvs-pbtn:active { transform: translateY(0.5px); background: var(--accent-strong); }
.cvs-content button.cvs-pbtn.is-dragging { opacity: 0.4; }
.cvs-content button.cvs-pbtn[data-color] { border-color: transparent; }
.cvs-content button.cvs-pbtn[data-color="gray"] { background: oklch(0.93 0 0); }
.cvs-content button.cvs-pbtn[data-color="red"] { background: oklch(0.93 0.05 25); color: oklch(0.45 0.18 25); }
.cvs-content button.cvs-pbtn[data-color="orange"] { background: oklch(0.94 0.06 60); color: oklch(0.5 0.16 55); }
.cvs-content button.cvs-pbtn[data-color="amber"] { background: oklch(0.95 0.08 85); color: oklch(0.5 0.14 75); }
.cvs-content button.cvs-pbtn[data-color="green"] { background: oklch(0.94 0.06 150); color: oklch(0.45 0.14 150); }
.cvs-content button.cvs-pbtn[data-color="teal"] { background: oklch(0.94 0.05 190); color: oklch(0.45 0.1 195); }
.cvs-content button.cvs-pbtn[data-color="blue"] { background: oklch(0.93 0.05 255); color: oklch(0.45 0.16 260); }
.cvs-content button.cvs-pbtn[data-color="violet"] { background: oklch(0.93 0.06 295); color: oklch(0.45 0.18 295); }
.cvs-content button.cvs-pbtn[data-color="pink"] { background: oklch(0.94 0.05 350); color: oklch(0.5 0.18 350); }
.cvs-content.is-dark button.cvs-pbtn[data-color="gray"] { background: oklch(0.32 0 0); }
.cvs-content.is-dark button.cvs-pbtn[data-color="red"] { background: oklch(0.3 0.08 25); color: oklch(0.85 0.1 25); }
.cvs-content.is-dark button.cvs-pbtn[data-color="orange"] { background: oklch(0.32 0.08 55); color: oklch(0.86 0.12 60); }
.cvs-content.is-dark button.cvs-pbtn[data-color="amber"] { background: oklch(0.33 0.08 80); color: oklch(0.88 0.14 85); }
.cvs-content.is-dark button.cvs-pbtn[data-color="green"] { background: oklch(0.3 0.07 150); color: oklch(0.85 0.12 150); }
.cvs-content.is-dark button.cvs-pbtn[data-color="teal"] { background: oklch(0.3 0.06 195); color: oklch(0.85 0.1 195); }
.cvs-content.is-dark button.cvs-pbtn[data-color="blue"] { background: oklch(0.3 0.08 260); color: oklch(0.85 0.1 255); }
.cvs-content.is-dark button.cvs-pbtn[data-color="violet"] { background: oklch(0.3 0.09 295); color: oklch(0.86 0.1 295); }
.cvs-content.is-dark button.cvs-pbtn[data-color="pink"] { background: oklch(0.32 0.08 350); color: oklch(0.86 0.1 350); }
.cvs-pdiv { flex: 0 0 auto; width: 1px; height: 18px; margin: 0 3px; background: var(--border); cursor: grab; position: relative; }
.cvs-pdiv::before { content: ''; position: absolute; left: -5px; right: -5px; top: -4px; bottom: -4px; }
.cvs-pdiv:hover { background: var(--ring); }
.cvs-pdrop { flex: 0 0 auto; width: 2px; height: 22px; margin: 0 -1px; background: var(--ring); border-radius: 1px; }
.cvs-panel-foot { display: flex; align-items: center; height: 26px; padding: 0 6px; }
.cvs-panel-foot .cvs-panel-addrow { width: auto; height: 22px; padding: 0 8px 0 6px; gap: 4px; font-size: 11px; color: var(--muted-foreground); border-radius: var(--radius-sm); }
.cvs-panel-foot .cvs-panel-addrow:hover { color: var(--foreground); }

/* ---- panel modals (Obsidian modal shell, shadcn-ish table inside) ----------- */
.cvs-modal .modal-content { font-family: var(--font-sans, inherit); }
.cvs-modal-wide { width: min(920px, 92vw); }
.cvs-modal-input { width: 100%; box-sizing: border-box; }
.cvs-btable { display: flex; flex-direction: column; border: 1px solid var(--background-modifier-border); border-radius: 6px; overflow: hidden; margin: 6px 0 10px; }
.cvs-btable-row { display: grid; grid-template-columns: var(--cols); gap: 6px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--background-modifier-border); }
.cvs-btable-row:last-child { border-bottom: 0; }
.cvs-btable-row.is-head { background: var(--background-secondary); font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cvs-btable-row input[type="text"], .cvs-btable-row select { width: 100%; min-width: 0; height: 26px; font-size: 12px; padding: 0 6px; }
.cvs-btable-row.is-divider { background: var(--background-secondary); }
.cvs-btable-divlabel { color: var(--text-muted); font-style: italic; font-size: 12px; }
.cvs-btable-grip { color: var(--text-faint); cursor: grab; display: flex; }
.cvs-btable-grip svg { width: 14px; height: 14px; }
.cvs-btable-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

/* ---- narrow pane: the sidebar is a slide-over sheet (shadcn Sheet, side=left) */
.cvs-content.cvs-narrow .cvs-side { position: absolute; top: 0; bottom: 0; left: 0; z-index: 6; flex: none; width: min(var(--cvs-side-w), calc(100% - 44px)); max-width: none; border-right: 1px solid var(--border); box-shadow: 8px 0 24px -8px oklch(0 0 0 / 0.18); }
.cvs-content.cvs-side-right.cvs-narrow .cvs-side { left: auto; right: 0; box-shadow: -8px 0 24px -8px oklch(0 0 0 / 0.18); }
.cvs-content.cvs-narrow .cvs-handle { display: none; }
.cvs-content.cvs-narrow .cvs-show-side { opacity: 1; }

/* ---- annotate ------------------------------------------------------------------ */
.cvs-content.cvs-annotating .cvs-panel { display: none; }
.cvs-anno { display: flex; flex-direction: column; border-top: 1px solid var(--border); background: var(--background); user-select: none; }
.cvs-anno-bar { container-type: inline-size; display: flex; align-items: center; height: 42px; border-bottom: 1px solid var(--border); min-width: 0; }
.cvs-anno-scroll { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; height: 100%; padding: 0 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent); }
.cvs-anno-scroll::-webkit-scrollbar { display: none; }
.cvs-anno-group { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.cvs-anno-right { flex: 0 0 auto; padding: 0 8px 0 6px; gap: 6px; border-left: 1px solid var(--border); height: 100%; }
/* icon-only actions (Preview / Export / Done), each with its key */
.cvs-content button.cvs-anno-cta.is-icon { position: relative; width: 34px; height: 30px; padding: 0; justify-content: center; gap: 0; }
.cvs-anno-sep { flex: 0 0 auto; width: 1px; height: 20px; margin: 0 6px; background: var(--border); }
.cvs-content button.cvs-anno-tool { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--foreground); box-shadow: none; cursor: default; transition: background 100ms, color 100ms; }
.cvs-content button.cvs-anno-tool:hover { background: var(--accent); }
.cvs-content button.cvs-anno-tool.is-on { background: var(--primary); color: var(--primary-foreground); }
.cvs-content button.cvs-anno-tool.is-disabled { opacity: 0.4; pointer-events: none; }
.cvs-anno-tool svg { width: 16px; height: 16px; display: block; }
.cvs-anno-disc { width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; background: var(--c); border: 2px solid #1e1e1e; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.cvs-content button.cvs-anno-tool.is-on .cvs-anno-disc { box-shadow: 0 0 0 1.5px var(--primary-foreground); }
.cvs-anno-img { width: 20px; height: 20px; object-fit: contain; display: block; }
.cvs-content.is-dark .cvs-anno-img, .cvs-content button.cvs-anno-tool.is-on .cvs-anno-img { filter: invert(1) brightness(1.6); }
.cvs-content button.cvs-anno-swatch { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; margin: 0 1px; border: 0; border-radius: 50%; background: transparent; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; cursor: default; }
.cvs-content button.cvs-anno-swatch::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.18); }
.cvs-content button.cvs-anno-swatch:hover::before { transform: scale(1.08); }
.cvs-content button.cvs-anno-swatch.is-on { box-shadow: 0 0 0 2px var(--foreground); }
.cvs-content button.cvs-anno-size { flex: 0 0 auto; width: 26px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; cursor: default; }
.cvs-content button.cvs-anno-size:hover { background: var(--accent); }
.cvs-anno-size-dot { border-radius: 50%; background: var(--muted-foreground); }
.cvs-anno-size.is-s .cvs-anno-size-dot { width: 5px; height: 5px; }
.cvs-anno-size.is-m .cvs-anno-size-dot { width: 8px; height: 8px; }
.cvs-anno-size.is-l .cvs-anno-size-dot { width: 12px; height: 12px; }
.cvs-content button.cvs-anno-size.is-on .cvs-anno-size-dot { background: var(--foreground); }
.cvs-content button.cvs-anno-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--primary); border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: 0 1px 2px oklch(0 0 0 / 0.08); cursor: default; }
.cvs-content button.cvs-anno-cta:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.cvs-content button.cvs-anno-cta.is-ghost { background: var(--background); color: var(--foreground); border-color: var(--input); }
.cvs-content button.cvs-anno-cta.is-ghost:hover { background: var(--accent); }
.cvs-anno-cta span { display: flex; }
.cvs-anno-cta svg { width: 14px; height: 14px; }
/* freeze strip */
.cvs-anno-strip { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; min-width: 0; }
.cvs-anno-info { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; max-width: 220px; }
.cvs-anno-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvs-anno-range { font-family: var(--font-mono); font-size: 11px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvs-anno-chips { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.cvs-anno-chips::-webkit-scrollbar { display: none; }
.cvs-anno-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border: 1px solid var(--input); border-radius: 999px; background: var(--background); font-size: 12px; box-shadow: 0 1px 2px oklch(0 0 0 / 0.05); cursor: default; }
.cvs-anno-chip:hover { background: var(--accent); }
.cvs-anno-chip.is-on { border-color: var(--foreground); background: var(--secondary); font-weight: 500; }
.cvs-anno-chip.is-out { opacity: 0.55; }
.cvs-anno-chip-icon { display: flex; color: #33a9d6; }
.cvs-anno-chip-icon svg { width: 13px; height: 13px; }
.cvs-anno-chip-t { font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.cvs-anno-chip-d { padding: 1px 5px; border-radius: 999px; background: var(--muted); color: var(--foreground); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cvs-anno-chip-d:hover { background: var(--accent-strong); }
.cvs-anno-chip-n { min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; }
.cvs-content button.cvs-anno-add { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px 0 8px; border: 1px dashed color-mix(in oklab, var(--foreground) 28%, transparent); border-radius: 999px; background: transparent; color: var(--foreground); font: inherit; font-size: 12px; box-shadow: none; cursor: default; }
.cvs-content button.cvs-anno-add:hover { background: var(--accent); }
.cvs-content button.cvs-anno-add.is-disabled { opacity: 0.4; pointer-events: none; }
.cvs-anno-add span { display: flex; }
.cvs-anno-add svg { width: 13px; height: 13px; }
.cvs-anno-tip { flex: 0 1 auto; min-width: 0; color: var(--muted-foreground); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* timeline freeze markers: a small snowflake-blue diamond above the track */
.cvs-freeze-mark { position: absolute; top: 1px; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: #33a9d6; border: 1px solid var(--background); border-radius: 1px; pointer-events: auto; cursor: pointer; }
.cvs-freeze-mark.is-active, .cvs-freeze-mark:hover { background: var(--foreground); }
/* the drawing surface over the picture */
.cvs-anno-canvas { position: absolute; z-index: 1; pointer-events: none; touch-action: none; }
.cvs-anno-canvas.is-live, .cvs-anno-canvas.is-drawing { pointer-events: auto; }
.cvs-anno-canvas.is-drawing { cursor: crosshair; }
.cvs-anno-canvas.is-over { cursor: move; }
.cvs-anno-canvas.is-handle { cursor: grab; }
.cvs-anno-hud.is-preview { left: 50%; right: auto; transform: translateX(-50%); }
.cvs-anno-range.is-default { font-style: italic; }
.cvs-notice-row { display: flex; gap: 6px; }
.cvs-notice-warn { margin-top: 4px; opacity: 0.85; font-size: 0.9em; }
.cvs-anno-hud { position: absolute; z-index: 2; top: 8px; right: 8px; padding: 3px 8px; border-radius: 999px; background: oklch(0 0 0 / 0.62); color: #fff; font-size: 11px; font-weight: 500; letter-spacing: 0.01em; opacity: 0; transition: opacity 150ms; pointer-events: none; backdrop-filter: blur(4px); }
.cvs-anno-hud.is-on { opacity: 1; }
/* text popover (shadcn Popover) */
.cvs-anno-pop { position: absolute; z-index: 20; width: 320px; max-width: calc(100% - 12px); box-sizing: border-box; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 10px 15px -3px oklch(0 0 0 / 0.12), 0 4px 6px -4px oklch(0 0 0 / 0.1); }
.cvs-anno-pop textarea.cvs-anno-textarea, .cvs-anno-pop input.cvs-anno-input[type="text"] { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.4; padding: 6px 8px; min-height: 0; border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--background); color: var(--foreground); box-shadow: none; resize: vertical; }
.cvs-anno-pop input.cvs-anno-input[type="text"] { height: 30px; }
.cvs-anno-pop textarea.cvs-anno-textarea:focus, .cvs-anno-pop input.cvs-anno-input[type="text"]:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 40%, transparent); }
.cvs-anno-pop-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cvs-anno-seg { display: inline-flex; border: 1px solid var(--input); border-radius: var(--radius-md); overflow: hidden; }
.cvs-content .cvs-anno-seg button { height: 24px; padding: 0 7px; border: 0; border-radius: 0; background: var(--background); color: var(--muted-foreground); font: inherit; font-size: 11px; font-weight: 500; box-shadow: none; cursor: default; }
.cvs-content .cvs-anno-seg button + button { border-left: 1px solid var(--input); }
.cvs-content .cvs-anno-seg button:hover { color: var(--foreground); }
.cvs-content .cvs-anno-seg button.is-on { background: var(--secondary); color: var(--foreground); }
.cvs-content button.cvs-anno-pop-btn { width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--background); color: var(--muted-foreground); box-shadow: none; cursor: default; }
.cvs-content button.cvs-anno-pop-btn:hover { color: var(--foreground); background: var(--accent); }
.cvs-content button.cvs-anno-pop-btn.is-on { color: var(--foreground); background: var(--secondary); }
.cvs-anno-pop-btn svg { width: 14px; height: 14px; }
.cvs-anno-chiprow { display: flex; flex-wrap: wrap; gap: 4px; }
.cvs-content .cvs-anno-chiprow button { min-width: 30px; height: 24px; padding: 0 6px; border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--background); color: var(--foreground); font: inherit; font-size: 11px; font-weight: 700; box-shadow: none; cursor: default; }
.cvs-content .cvs-anno-chiprow button:hover { background: var(--accent); }
.cvs-anno-pop-hint { font-size: 11px; color: var(--muted-foreground); }

/* one-key shortcuts, always shown on each tool (lower-right corner) */
.cvs-content button.has-kbd { position: relative; }
.cvs-anno-kbd { position: absolute; right: 1px; bottom: 0px; min-width: 9px; padding: 0 1px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; line-height: 10px; letter-spacing: 0; text-align: center; color: var(--muted-foreground); pointer-events: none; }
.cvs-content button.cvs-anno-tool.is-on .cvs-anno-kbd { color: color-mix(in oklab, var(--primary-foreground) 75%, transparent); }
.cvs-content button.cvs-anno-cta:not(.is-ghost) .cvs-anno-kbd { color: color-mix(in oklab, var(--primary-foreground) 70%, transparent); }
.cvs-anno-cta .cvs-anno-kbd { font-size: 7.5px; bottom: 0; right: 2px; }
.cvs-content button.cvs-anno-tool { width: 32px; height: 32px; }
.cvs-anno-tool .cvs-anno-disc { margin-bottom: 2px; }
.cvs-anno-svg { display: flex; }
.cvs-anno-svg svg { width: 16px; height: 16px; display: block; }
/* the clip timeline: freezes as hold blocks sitting on the track */
.cvs-tl-holds { position: absolute; left: 0; right: 0; top: 0; height: 24px; pointer-events: none; }
.cvs-tl-hold { position: absolute; top: 3px; height: 18px; box-sizing: border-box; min-width: 6px; border-radius: 5px; background: color-mix(in oklab, #33a9d6 26%, var(--background)); border: 1px solid #33a9d6; color: var(--foreground); pointer-events: auto; cursor: grab; display: flex; align-items: center; overflow: hidden; z-index: 1; }
.cvs-tl-hold:hover { background: color-mix(in oklab, #33a9d6 38%, var(--background)); }
.cvs-tl-hold.is-on { background: #33a9d6; color: #fff; }
.cvs-tl-hold:active { cursor: grabbing; }
.cvs-tl-hold-label { display: flex; align-items: center; gap: 3px; padding: 0 12px 0 5px; font-size: 10.5px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.cvs-tl-hold-icon { display: flex; }
.cvs-tl-hold-icon svg { width: 11px; height: 11px; }
.cvs-tl-hold-grip { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.cvs-tl-hold-grip::after { content: ''; position: absolute; right: 2px; top: 4px; bottom: 4px; width: 2px; border-radius: 1px; background: currentColor; opacity: 0.55; }
.cvs-annotating .cvs-tl-head { z-index: 2; }
/* zoom */
.cvs-anno-zoom { position: absolute; z-index: 2; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; background: oklch(0 0 0 / 0.62); color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 150ms; backdrop-filter: blur(4px); }
.cvs-anno-zoom.is-on { opacity: 1; pointer-events: auto; }
.cvs-anno-zoom:hover { background: oklch(0 0 0 / 0.8); }
.cvs-stage.is-zoomed .cvs-video { cursor: grab; }
.cvs-anno-canvas.is-zoomtool { cursor: zoom-in; }
.cvs-anno-hud { z-index: 3; }