:root { --fcs-surface:#fff; --fcs-soft:#f4f7fa; }
html[data-theme="dark"] { color-scheme:dark; --fcs-bg:#101720; --fcs-surface:#192430; --fcs-soft:#202e3e; --fcs-ink:#e5edf6; --fcs-muted:#a7b7cb; --fcs-line:#34465b; --fcs-blue:#79baff; --fcs-navy:#10283d; }
html[data-theme="dark"] :is(.panel,.card,.task-workspace,.task-main,.task-side,.task-sidebar,.task-tabs,.task-tab-body,.client-page-tabs,.topbar,.modal-content,.dropdown-menu,.app-confirm-dialog,.app-confirm-card,.task-picker-menu,.task-date-picker-menu,.table,.list-group-item) { background-color:var(--fcs-surface); color:var(--fcs-ink); border-color:var(--fcs-line); }
html[data-theme="dark"] :is(.form-control,.form-select,textarea,input:not([type=checkbox]):not([type=radio]),select) { background-color:var(--fcs-bg); color:var(--fcs-ink); border-color:var(--fcs-line); }
html[data-theme="dark"] :is(h1,h2,h3,h4,h5,.task-kicker,.form-label,.client-inline-value) { color:var(--fcs-ink); }
html[data-theme="dark"] :is(.text-muted,.muted,input::placeholder,textarea::placeholder) { color:var(--fcs-muted)!important; }
html[data-theme="dark"] .table { --bs-table-bg:var(--fcs-surface); --bs-table-color:var(--fcs-ink); --bs-table-border-color:var(--fcs-line); --bs-table-hover-bg:var(--fcs-soft); --bs-table-hover-color:var(--fcs-ink); }
html[data-theme="dark"] :is(.task-tabs,.client-page-tabs) a { color:var(--fcs-muted); }
html[data-theme="dark"] :is(.task-tabs,.client-page-tabs) a.active { background:var(--fcs-soft); color:#91c8ff; }
html[data-theme="dark"] .btn-primary { background:#236bac; border-color:#367fbe; color:#fff; }
html[data-theme="dark"] .btn-outline-primary { color:#91c8ff; border-color:#6499cc; }
html[data-theme="dark"] .btn-outline-secondary { color:#c0cfdf; border-color:#67809c; }
.theme-toggle { white-space:nowrap; order:3; flex-shrink:0; }
.video-library { width:100%; min-width:0; }
.video-upload { padding:20px; background:var(--fcs-soft); border:1px solid var(--fcs-line); border-radius:12px; }
.video-upload label { display:block; margin-bottom:14px; }
.video-card { margin-top:24px; padding:20px; border:1px solid var(--fcs-line); border-radius:12px; background:var(--fcs-surface); overflow-wrap:anywhere; }
.video-card video,.csm-recording-view video { display:block; width:100%; max-height:65vh; background:#000; border-radius:10px; }
.video-card h3 { font-size:1.2rem; }
.video-comment { padding:16px 0; border-bottom:1px solid var(--fcs-line); overflow-wrap:anywhere; }
.video-comment p { margin:10px 0; }
.csm-recording-view { max-width:1040px; margin:auto; padding:32px 24px; }
.csm-recording-view-header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:36px; }
.csm-recording-view h1 { font-size:clamp(1.6rem,4vw,2.5rem); }
.csm-recording-view #comments { max-width:780px; margin:32px auto; }
.csm-recording-view button { padding:10px 16px; border:1px solid var(--fcs-line); border-radius:8px; color:var(--fcs-ink); background:var(--fcs-surface); cursor:pointer; }
.video-comment-form label { display:block; margin:18px 0; }
.video-comment-form input,.video-comment-form textarea { display:block; box-sizing:border-box; width:100%; margin-top:8px; padding:12px; border-radius:8px; border:1px solid var(--fcs-line); background:var(--fcs-surface); color:var(--fcs-ink); font:inherit; }
.video-comment-form button { background:#1769aa; color:#fff; }
.task-tab-videos { overflow:auto!important; }
@media(max-width:600px) { .csm-recording-view { padding:20px 14px; } .video-upload,.video-card { padding:14px; } .topbar { flex-wrap:wrap; } .video-card .input-group { flex-wrap:wrap; } }

/* Theme tokens for existing CSM components, preserving light defaults. */
html[data-theme="dark"] {
  --theme-bg-a1abd0: hsl(227 33% 19%);
  --theme-bg-e8f6ef: hsl(150 44% 19%);
  --theme-bg-edf2f8: hsl(213 44% 19%);
  --theme-bg-edf4f8: hsl(202 44% 19%);
  --theme-bg-edf5ff: hsl(213 45% 19%);
  --theme-bg-edf7fb: hsl(197 45% 19%);
  --theme-bg-edf7ff: hsl(207 45% 19%);
  --theme-bg-eef2f8: hsl(216 42% 19%);
  --theme-bg-eef6fb: hsl(203 45% 19%);
  --theme-bg-eef8fd: hsl(200 45% 19%);
  --theme-bg-eefaf4: hsl(150 45% 19%);
  --theme-bg-f2f5fa: hsl(217 44% 19%);
  --theme-bg-f3f9ff: hsl(210 45% 15%);
  --theme-bg-f3fbff: hsl(200 45% 15%);
  --theme-bg-f4f7fa: hsl(210 37% 19%);
  --theme-bg-f4fbff: hsl(202 45% 15%);
  --theme-bg-f5f8fc: hsl(214 45% 15%);
  --theme-bg-f6f8fb: hsl(216 38% 15%);
  --theme-bg-f6f8fc: hsl(220 45% 15%);
  --theme-bg-f6f9fc: hsl(210 45% 15%);
  --theme-bg-f7f9fc: hsl(216 45% 15%);
  --theme-bg-f7fcff: hsl(202 45% 15%);
  --theme-bg-f8f9fc: hsl(225 40% 15%);
  --theme-bg-f8fbfd: hsl(204 45% 15%);
  --theme-bg-fbfdff: hsl(210 45% 15%);
  --theme-bg-fff0ee: hsl(7 45% 19%);
  --theme-bg-fff1f1: hsl(0 45% 15%);
  --theme-bg-fff7e8: hsl(39 45% 19%);
  --theme-bg-ffffff: hsl(0 0% 15%);
  --theme-line-8db9ef: hsl(213 45% 29%);
  --theme-line-9fb8ff: hsl(224 45% 29%);
  --theme-line-9fd4bd: hsl(154 38% 29%);
  --theme-line-afd7ee: hsl(202 45% 29%);
  --theme-line-b8d3f3: hsl(213 45% 29%);
  --theme-line-b8dcec: hsl(198 45% 29%);
  --theme-line-b9c7d8: hsl(213 28% 29%);
  --theme-line-b9cce3: hsl(213 43% 29%);
  --theme-line-b9d4ef: hsl(210 45% 29%);
  --theme-line-c7d5e5: hsl(212 37% 29%);
  --theme-line-c9d8ea: hsl(213 44% 29%);
  --theme-line-ccd8e6: hsl(212 34% 29%);
  --theme-line-d5e2f0: hsl(211 45% 29%);
  --theme-line-d8e3f0: hsl(212 44% 29%);
  --theme-line-d8e4ef: hsl(209 42% 29%);
  --theme-line-d9e0eb: hsl(217 31% 29%);
  --theme-line-dc3545: hsl(354 45% 29%);
  --theme-line-dce2ec: hsl(218 30% 29%);
  --theme-line-e2e8f2: hsl(218 38% 29%);
  --theme-line-e7aaaa: hsl(0 45% 29%);
  --theme-line-eef2f6: hsl(210 31% 29%);
  --theme-line-f0b4ad: hsl(6 45% 29%);
  --theme-line-f1d29a: hsl(39 45% 29%);
  --theme-line-ffffff: hsl(0 0% 29%);
  --theme-text-082235: hsl(205 45% 82%);
  --theme-text-111827: hsl(221 39% 82%);
  --theme-text-123d2b: hsl(155 45% 82%);
  --theme-text-153d55: hsl(202 45% 82%);
  --theme-text-198754: hsl(152 45% 82%);
  --theme-text-243f9d: hsl(227 45% 70%);
  --theme-text-2f469b: hsl(227 45% 70%);
  --theme-text-30479c: hsl(227 45% 70%);
  --theme-text-334155: hsl(215 25% 82%);
  --theme-text-54657d: hsl(215 20% 70%);
  --theme-text-5f6b7d: hsl(216 14% 70%);
  --theme-text-5f6f85: hsl(215 17% 70%);
  --theme-text-667085: hsl(221 13% 70%);
  --theme-text-697588: hsl(217 13% 70%);
  --theme-text-6b7789: hsl(216 12% 70%);
  --theme-text-6e4700: hsl(39 45% 82%);
  --theme-text-7b251d: hsl(5 45% 82%);
  --theme-text-8190a5: hsl(215 17% 70%);
  --theme-text-8793a6: hsl(217 15% 70%);
  --theme-text-8b98aa: hsl(215 15% 70%);
  --theme-text-9a1f1f: hsl(0 45% 70%);
  --theme-text-b42318: hsl(4 45% 70%);
  --theme-text-b54545: hsl(0 45% 70%);
  --theme-text-dc3545: hsl(354 45% 70%);
}
.standalone-theme-toggle { position:fixed; top:12px; right:12px; z-index:1050; }

html[data-theme="dark"] { --fcs-heading:#e5edf6; }
/* Match the WPM sidebar theme control. */
.fcs-theme-toggle { display:flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.78); border-radius:999px; padding:.3rem .75rem; font-size:.8rem; cursor:pointer; margin-bottom:14px; }
.fcs-theme-toggle:hover { background:rgba(255,255,255,.14); color:#fff; }
.fcs-theme-toggle:disabled { opacity:.65; cursor:wait; }
.theme-save-status { display:block; color:#ffd0c8; font-size:.8rem; }
.sidebar .notification-bell .notification-count { margin-left:auto; }
.notification-count { background:#c43b43; color:#fff; padding:1px 5px; border-radius:999px; font-size:.75rem; margin-left:4px; }
.notification-inbox { max-width:1100px; }
.notification-item { padding:20px; border:1px solid var(--fcs-line); border-radius:10px; margin:16px 0; overflow-wrap:anywhere; }
.notification-item.is-unread { border-left:4px solid var(--fcs-blue); }
.notification-item h2 { font-size:1.15rem; }
.video-library-heading,.video-dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.video-library-heading h2,.video-dialog-heading h2 { margin:0; }
.video-upload-dialog { width:min(760px,calc(100vw - 28px)); max-height:90dvh; padding:24px; border:1px solid var(--fcs-line); border-radius:14px; background:var(--fcs-surface); color:var(--fcs-ink); }
.video-upload-dialog::backdrop { background:rgba(0,0,0,.65); }
.video-upload-dialog .video-upload { padding:0; border:0; background:transparent; }
.video-download { display:inline-block; padding:10px 16px; border-radius:8px; background:#1769aa; color:#fff; text-decoration:none; }
.video-download:hover { background:#12558b; color:#fff; }

.csm-recording-view-logo { display:block; width:auto; height:64px; max-width:45%; object-fit:contain; object-position:left center; }
.csm-recording-view-header .video-download { flex-shrink:0; text-align:center; }
.csm-recording-view h1,.csm-recording-view > p { overflow-wrap:anywhere; }
@media(max-width:360px) { .csm-recording-view-header { gap:12px; flex-wrap:wrap; } .csm-recording-view-logo { height:52px; } }

.shared-video-player { overflow:hidden; border-radius:10px; background:#111; }
.csm-recording-view .shared-video-player video { border-radius:0; }
.video-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 12px; background:#171b21; color:#fff; }
.video-tools svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.video-tools .video-tool,.video-speed-control { display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; padding:8px; margin:0; color:#fff; background:transparent; border:1px solid #526170; border-radius:6px; cursor:pointer; text-decoration:none; }
.video-tools .video-tool:hover,.video-speed-control:hover { background:#344253; color:#fff; }
.video-tools .video-tool:focus-visible,.video-speed-control:focus-within { outline:2px solid #7dc9ff; outline-offset:2px; }
.video-speed-control { gap:6px; }
.video-speed-control select { width:auto; color:#fff; background:#171b21; border:0; padding:0 4px; font-size:.9rem; cursor:pointer; }
.video-tools .video-tool:disabled { opacity:.5; cursor:not-allowed; }
.video-player-status { font-size:.85rem; overflow-wrap:anywhere; }

/* Public viewer uses the viewport; the header participates in sizing. */
.video-view-page { margin:0; }
.video-view-page .csm-recording-view { width:100%; max-width:none; height:100vh; height:100dvh; min-height:280px; padding:20px 24px; display:flex; flex-direction:column; gap:16px; }
.video-view-page .csm-recording-view-header { display:grid; grid-template-columns:minmax(160px,1fr) minmax(0,3fr) minmax(160px,1fr); gap:20px; margin:0; flex-shrink:0; }
.video-view-page .csm-recording-view-header h1 { margin:0; text-align:center; font-size:clamp(1.25rem,2.5vw,2.25rem); overflow-wrap:anywhere; }
.video-view-page .csm-recording-view-logo { max-width:100%; justify-self:start; }
.video-view-page .video-download { justify-self:end; }
.video-view-content { flex:1; min-height:160px; display:flex; flex-direction:column; gap:12px; }
.video-description { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; max-height:20vh; overflow:auto; flex-shrink:0; }
.video-view-page .csm-recording-view video { flex:1; width:100%; height:0; min-height:160px; max-height:none; object-fit:contain; }
@media(max-width:650px) {
 .video-view-page .csm-recording-view { padding:12px; gap:12px; }
 .video-view-page .csm-recording-view-header { grid-template-columns:minmax(0,1fr) auto; gap:12px; }
 .video-view-page .csm-recording-view-header h1 { grid-row:2; grid-column:1 / -1; }
 .video-view-page .csm-recording-view-logo { height:48px; }
 .video-view-page .video-download { grid-column:2; grid-row:1; padding:10px 12px; }
}

.video-short-option { display:inline-flex; align-items:center; gap:8px; margin-top:12px; min-height:44px; cursor:pointer; }
.video-short-option input { width:18px; height:18px; }
/* Fit the recording to phone width rather than a tall portrait black frame. */
@media(max-width:650px) {
 .video-view-page .csm-recording-view { height:auto; min-height:100vh; min-height:100dvh; justify-content:flex-start; }
 .video-view-page .video-view-content { flex:none; min-height:0; }
 .video-view-page .csm-recording-view video { flex:none; height:auto; min-height:0; max-height:75vh; }
}

/* Library previews retain their full frame before and after metadata loads. */
.video-card video { height:auto; max-height:none; aspect-ratio:auto 16 / 9; object-fit:contain; }