/**
 * VisitorLens — Replay Page CSS
 * Scoped to .vsr-replay-shell to avoid WP admin style conflicts.
 * Unified with VisitorLens design system — amber accent, warm palette.
 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ── CSS VARIABLES (dark default) ───────────────────────────── */
.vsr-replay-shell {
  --bg:#0e0d0b;--bg2:#171612;--bg3:#1f1e1a;--bg4:#28261f;
  --border:#2e2c24;--text:#f0ede8;--text2:#a09a8e;--text3:#6b6660;
  --accent:#f59e0b;--accent-dark:#fbbf24;
  --green:#34d399;--red:#f87171;--orange:#fb923c;--purple:#c084fc;
  --cursor:#f43f5e;--click-ring:#f59e0b;
}

/* ── LIGHT OVERRIDE ──────────────────────────────────────────── */
.vsr-replay-shell[data-theme="light"] {
  --bg:#f8f7f4;--bg2:#ffffff;--bg3:#f1ede8;--bg4:#e8e4de;
  --border:#e8e4de;--text:#0f172a;--text2:#64748b;--text3:#94a3b8;
  --accent:#f59e0b;--accent-dark:#d97706;
  --green:#22c55e;--red:#ef4444;--orange:#f97316;--purple:#a855f7;
  --cursor:#e11d48;--click-ring:#f59e0b;
}

/* ── SCOPED RESET ────────────────────────────────────────────── */
.vsr-replay-shell *,
.vsr-replay-shell *::before,
.vsr-replay-shell *::after {
  margin:0;padding:0;box-sizing:border-box;
}

/* ── SHELL (body-like container) ─────────────────────────────── */
.vsr-replay-shell {
  display:flex;flex-direction:column;
  margin-top:16px;
  height:calc(100vh - 72px);overflow:hidden; /* #wpadminbar is hidden on our pages: 56px vsr-top-nav + 16px gap */
  border-radius:10px 10px 0 0;overflow:hidden;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;
  background:var(--bg);color:var(--text);
}

/* ── TOP BAR ─────────────────────────────────────────────────── */
.vsr-replay-shell .topbar {
  height:56px;background:var(--bg2);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 24px;gap:16px;flex-shrink:0;z-index:20;
}
.vsr-replay-shell .topbar-logo {
  font-family:'Plus Jakarta Sans',sans-serif;font-style:normal;font-weight:700;font-size:15px;
  color:var(--text);display:flex;align-items:center;gap:8px;letter-spacing:-0.02em;
}
.vsr-replay-shell .logo-pip {
  width:8px;height:8px;background:var(--accent);border-radius:50%;
  animation:vsrRpBlink 2s infinite;
}
@keyframes vsrRpBlink { 0%,100%{opacity:1} 50%{opacity:.3} }
.vsr-replay-shell .topbar-sep { width:1px;height:24px;background:var(--border); }
.vsr-replay-shell .topbar-search {
  flex:1;max-width:300px;background:var(--bg3);border:1px solid var(--border);
  border-radius:8px;padding:6px 12px;color:var(--text);font-size:13px;outline:none;
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
}
.vsr-replay-shell .topbar-search::placeholder { color:var(--text3); }
.vsr-replay-shell .topbar-right { margin-left:auto;display:flex;gap:8px;align-items:center; }

/* Small square icon buttons in the topbar (new-tab, gear) */
.vsr-replay-shell .topbar-icon-btn {
  width:32px;height:32px;border-radius:7px;background:var(--bg3);
  border:1px solid var(--border);color:var(--text2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0;
}
.vsr-replay-shell .topbar-icon-btn:hover { background:var(--bg4);color:var(--text); }

/* ── GEAR POPUP — narrow floating menu holding the less-used actions ── */
.vsr-replay-shell .gear-wrap { position:relative; }
.vsr-replay-shell .gear-btn.active { background:var(--bg4);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent); }
.vsr-replay-shell .gear-menu {
  display:none;position:absolute;top:calc(100% + 8px);right:0;width:190px;
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.35);z-index:300;
  flex-direction:column;padding:8px;gap:5px;
}
.vsr-replay-shell .gear-menu.open { display:flex; }
.vsr-replay-shell .gear-menu .theme-btn,
.vsr-replay-shell .gear-menu .export-wrap,
.vsr-replay-shell .gear-menu .export-btn,
.vsr-replay-shell .gear-menu .bulk-del-btn,
.vsr-replay-shell .gear-menu .clear-btn { width:100%; }
.vsr-replay-shell .gear-menu .theme-btn,
.vsr-replay-shell .gear-menu .export-btn,
.vsr-replay-shell .gear-menu .bulk-del-btn,
.vsr-replay-shell .gear-menu .clear-btn { text-align:left; }

.vsr-replay-shell .theme-btn {
  padding:7px 10px;border-radius:7px;background:var(--bg3);border:1px solid var(--border);
  color:var(--text2);cursor:pointer;font-size:12px;font-family:'Plus Jakarta Sans',-apple-system,sans-serif;transition:.15s;
}
.vsr-replay-shell .theme-btn:hover { background:var(--bg4);color:var(--text); }
.vsr-replay-shell .clear-btn {
  padding:7px 10px;border-radius:7px;background:transparent;
  border:1px solid rgba(239,68,68,.4);color:#ef4444;cursor:pointer;
  font-size:12px;font-family:'Plus Jakarta Sans',-apple-system,sans-serif;transition:.15s;
}
.vsr-replay-shell .clear-btn:hover { background:rgba(239,68,68,.12);border-color:#ef4444; }

/* ── EXPORT DROPDOWN (19a) ───────────────────────────────────── */
.vsr-replay-shell .export-wrap { position:relative; }
.vsr-replay-shell .export-btn {
  padding:7px 10px;border-radius:7px;background:var(--bg3);border:1px solid var(--border);
  color:var(--text2);cursor:pointer;font-size:12px;font-family:'Plus Jakarta Sans',-apple-system,sans-serif;transition:.15s;
}
.vsr-replay-shell .export-btn:hover { background:var(--bg4);color:var(--text); }
.vsr-replay-shell .export-menu {
  display:none;position:absolute;top:calc(100% + 4px);right:0;min-width:130px;
  background:var(--bg2);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);overflow:hidden;z-index:310;
}
.vsr-replay-shell .export-menu.open { display:block; }
.vsr-replay-shell .export-menu-item {
  display:block;width:100%;padding:9px 14px;background:transparent;border:none;
  color:var(--text2);cursor:pointer;font-size:12px;font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
  text-align:left;transition:.12s;
}
.vsr-replay-shell .export-menu-item:hover { background:var(--bg3);color:var(--text); }

/* ── BULK DELETE (19c) ───────────────────────────────────────── */
.vsr-replay-shell .bulk-del-btn {
  padding:7px 10px;border-radius:7px;background:transparent;
  border:1px solid rgba(239,68,68,.4);color:#ef4444;cursor:pointer;
  font-size:12px;font-family:'Plus Jakarta Sans',-apple-system,sans-serif;transition:.15s;
}
.vsr-replay-shell .bulk-del-btn:hover { background:rgba(239,68,68,.12);border-color:#ef4444; }
.vsr-replay-shell .bulk-del-btn:disabled { opacity:.5;cursor:not-allowed; }

/* ── MAIN LAYOUT ─────────────────────────────────────────────── */
.vsr-replay-shell .body { display:flex;flex:1;overflow:hidden; }

/* ── SESSION LIST ────────────────────────────────────────────── */
.vsr-replay-shell .list-panel {
  width:420px;flex-shrink:0;border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
}
.vsr-replay-shell .list-header {
  padding:14px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.vsr-replay-shell .list-title {
  font-family:'Plus Jakarta Sans',sans-serif;font-style:normal;font-weight:700;font-size:14px;letter-spacing:-0.01em;color:var(--text);
}
.vsr-replay-shell .list-header-right { display:flex;align-items:center;gap:8px; }
.vsr-replay-shell .list-count { font-size:12px;color:var(--text3); }
.vsr-replay-shell .list-filter-toggle {
  width:26px;height:26px;border-radius:6px;background:var(--bg3);
  border:1px solid var(--border);color:var(--text2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.15s;flex-shrink:0;padding:0;
}
.vsr-replay-shell .list-filter-toggle:hover { background:var(--bg4);color:var(--text); }
.vsr-replay-shell .list-filter-toggle.active {
  background:var(--bg4);color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
}
/* ── LIST FILTERS ─────────────────────────────────────────────── */
/* Hidden by default — toggled open via #listFilterToggle in replay.js. */
.vsr-replay-shell .list-filters {
  display:none;flex-wrap:wrap;align-items:center;
  gap:6px;padding:8px 12px;border-bottom:1px solid var(--border);
  background:var(--bg2);flex-shrink:0;
}
.vsr-replay-shell .list-filters.open { display:flex; }
.vsr-replay-shell .filter-select {
  flex:1 1 110px;min-width:90px;max-width:calc(50% - 3px);
  padding:5px 8px;background:var(--bg3);border:1px solid var(--border);
  color:var(--text);border-radius:6px;font-size:11px;cursor:pointer;
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
}
.vsr-replay-shell .filter-select:focus { outline:none;border-color:var(--accent); }

/* ── CUSTOM DATE ROW ──────────────────────────────────────────── */
.vsr-replay-shell .custom-date-row {
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;background:var(--bg3);border-bottom:1px solid var(--border);
  flex-shrink:0;flex-wrap:wrap;
}
.vsr-replay-shell .cdr-label {
  font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;
  flex-shrink:0;
}
.vsr-replay-shell .cdr-input {
  flex:1;min-width:110px;max-width:140px;
  padding:4px 8px;background:var(--bg2);border:1px solid var(--border);
  border-radius:6px;color:var(--text);font-size:11px;cursor:pointer;
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
}
.vsr-replay-shell .cdr-input:focus { outline:none;border-color:var(--accent); }
.vsr-replay-shell .cdr-input::-webkit-calendar-picker-indicator { filter:invert(0.5); }

/* ── BOT BANNER ──────────────────────────────────────────────── */
.vsr-replay-shell .bot-banner {
  display:flex;align-items:center;gap:8px;
  padding:7px 14px;flex-shrink:0;
  background:linear-gradient(90deg,rgba(168,85,247,.08) 0%,rgba(168,85,247,.04) 100%);
  border-bottom:1px solid rgba(168,85,247,.18);
}
.vsr-replay-shell .bot-banner-icon { font-size:14px;line-height:1;flex-shrink:0; }
.vsr-replay-shell .bot-banner-text {
  flex:1;font-size:11px;color:var(--text2);
}
.vsr-replay-shell .bot-banner-text strong { color:#c084fc;font-weight:600; }
.vsr-replay-shell .bot-banner-tip {
  width:16px;height:16px;border-radius:50%;
  background:rgba(168,85,247,.2);border:1px solid rgba(168,85,247,.35);
  color:#c084fc;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  cursor:help;flex-shrink:0;
}

.vsr-replay-shell .list-scroll { flex:1;overflow-y:auto; }
.vsr-replay-shell .session-row {
  padding:14px 16px;border-bottom:1px solid var(--border);
  cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:5px;
}
.vsr-replay-shell .session-row:hover { background:var(--bg3); }
.vsr-replay-shell .session-row.active {
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-left:3px solid var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 15%,transparent);
}
.vsr-replay-shell .sr-top { display:flex;align-items:center;justify-content:space-between;gap:6px; }
.vsr-replay-shell .sr-favicon {
  width:14px;height:14px;flex-shrink:0;border-radius:2px;object-fit:contain;
}
.vsr-replay-shell .sr-page-title {
  font-size:11px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vsr-replay-shell .sr-uri {
  font-size:13px;font-weight:500;color:var(--text);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vsr-replay-shell .sr-time { font-size:11px;color:var(--text3);flex-shrink:0;margin-left:8px; }
.vsr-replay-shell .sr-meta { display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
.vsr-replay-shell .sr-badge { font-size:10px;padding:2px 6px;border-radius:4px;font-weight:500; }
.vsr-replay-shell .badge-dur {
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);
}
.vsr-replay-shell .badge-click {
  background:color-mix(in srgb,var(--orange) 12%,transparent);color:var(--orange);
}
.vsr-replay-shell .badge-scroll {
  background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green);
}
.vsr-replay-shell .badge-rage {
  background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red);
}
.vsr-replay-shell .badge-vp { background:var(--bg4);color:var(--text3);display:inline-flex;align-items:center;gap:3px; }
.vsr-replay-shell .sr-device-icon { vertical-align:middle;flex-shrink:0; }
.vsr-replay-shell .sr-scroll-bar {
  height:2px;background:var(--bg4);border-radius:1px;overflow:hidden;
}
.vsr-replay-shell .sr-scroll-fill {
  height:100%;background:var(--green);border-radius:2px;transition:width .3s;
}
.vsr-replay-shell .list-pagination {
  padding:12px 16px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.vsr-replay-shell .pg-btn {
  padding:5px 12px;border-radius:6px;background:var(--bg3);
  border:1px solid var(--border);color:var(--text2);cursor:pointer;
  font-size:12px;font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
}
.vsr-replay-shell .pg-btn:disabled { opacity:.35;cursor:default; }
.vsr-replay-shell .pg-info { font-size:12px;color:var(--text3); }

/* ── IP GROUP ─────────────────────────────────────────────────
   Header is two stacked rows so identity (who/what) and meta/
   actions (when/controls) each get room to breathe instead of
   competing for space in one packed line:
     row1 — flags/icons, IP, user badge  ·····  online  ·  duration
     row2 — 🕐 last seen  ·····  visit count  ·  play/insights/delete
   ─────────────────────────────────────────────────────────────── */
.vsr-replay-shell .ip-group { border-bottom:1px solid var(--border); }
.vsr-replay-shell .ip-group-header {
  padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:8px;
  background:var(--bg2);transition:.15s;user-select:none;
}
.vsr-replay-shell .ip-group-header:hover { background:var(--bg3); }
.vsr-replay-shell .ip-group.expanded .ip-group-header { background:var(--bg3); }
.vsr-replay-shell .ip-group-arrow {
  font-size:10px;color:var(--text3);transition:transform .2s;
  display:inline-block;flex-shrink:0;
}
.vsr-replay-shell .ip-group-main {
  display:flex;flex-direction:column;gap:5px;min-width:0;flex:1;
}
.vsr-replay-shell .ip-group-row1,
.vsr-replay-shell .ip-group-row2 {
  display:flex;align-items:center;gap:6px;min-width:0;
}
.vsr-replay-shell .ip-group-row1-spacer,
.vsr-replay-shell .ip-group-row2-spacer { flex:1 1 auto;min-width:4px; }
.vsr-replay-shell .ip-group-flag {
  display:inline-block;flex-shrink:0;
  width:20px;height:14px;object-fit:cover;border-radius:2px;
  vertical-align:middle;
}
.vsr-replay-shell .vsr-ipg-icon {
  display:inline-block;flex-shrink:0;vertical-align:middle;
  width:15px;height:15px;object-fit:contain;opacity:.75;
}
.vsr-replay-shell .ip-group-ip {
  font-family:'DM Mono',monospace;font-size:12.5px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vsr-replay-shell .ip-group-user {
  font-size:11px;font-weight:600;color:var(--accent);text-decoration:none;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  padding:1px 7px;border-radius:20px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:130px;flex-shrink:1;
}
.vsr-replay-shell .ip-group-user:hover { text-decoration:underline; }
.vsr-replay-shell .ip-group-time {
  font-size:11px;font-weight:600;color:var(--accent);flex-shrink:0;
}
/* Last-seen: relative label on its own row so it never has to fight
   icons/buttons for width (that's what caused the awkward mid-word
   wrap before); full absolute timestamp is available via title="". */
.vsr-replay-shell .ip-group-last-rec {
  display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
  font-size:11px;color:var(--text3);font-family:'DM Mono',monospace;
  white-space:nowrap;cursor:help;
}
.vsr-replay-shell .ip-group-last-rec svg { opacity:.6;flex-shrink:0; }
.vsr-replay-shell .ip-group-count {
  font-size:10.5px;color:var(--text3);background:var(--bg4);
  padding:2px 8px;border-radius:10px;flex-shrink:0;
}
.vsr-replay-shell .ip-group-del {
  width:22px;height:22px;border-radius:6px;background:transparent;
  border:1px solid transparent;color:var(--text3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.15s;flex-shrink:0;padding:0;
}
.vsr-replay-shell .ip-group-del:hover {
  background:color-mix(in srgb,var(--red) 12%,transparent);
  border-color:color-mix(in srgb,var(--red) 30%,transparent);color:var(--red);
}
.vsr-replay-shell .ip-group-body { display:none; }
.vsr-replay-shell .ip-group-body .session-row { padding-left:28px; }

/* ── Visit Row (grouped page views) ─────────────────────────── */
.vsr-replay-shell .visit-row {
  padding:10px 16px 10px 28px;border-bottom:1px solid var(--border);
  cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:6px;
}
.vsr-replay-shell .visit-row:hover { background:var(--bg3); }
.vsr-replay-shell .visit-row.active {
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-left:3px solid var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 15%,transparent);
}
.vsr-replay-shell .vr-top {
  display:flex;align-items:center;gap:6px;min-width:0;
}
.vsr-replay-shell .vr-route {
  display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow:hidden;
}
.vsr-replay-shell .vr-entry {
  font-size:13px;font-weight:500;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;max-width:45%;
}
.vsr-replay-shell .vr-arrow {
  font-size:11px;color:var(--text3);flex-shrink:0;
}
.vsr-replay-shell .vr-exit {
  font-size:12px;color:var(--text2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;max-width:45%;
}
.vsr-replay-shell .badge-pages {
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--accent);font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600;
}
/* Premium feature — full styles in premium/admin/css/visitor-insights.css */
.vsr-replay-shell .vr-insights-btn {
  margin-left:auto;flex-shrink:0;
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:600;padding:3px 8px;border-radius:5px;
  background:color-mix(in srgb,var(--text3) 8%,transparent);
  color:var(--text3);border:1px solid color-mix(in srgb,var(--text3) 20%,transparent);
  cursor:pointer;transition:.15s;font-family:inherit;
}
.vsr-replay-shell .vr-insights-btn:hover {
  background:color-mix(in srgb,var(--text3) 15%,transparent);
}
.vsr-replay-shell .ip-group.highlight .ip-group-header {
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-left:3px solid var(--accent);
}

/* ── ONLINE INDICATOR ────────────────────────────────────────── */
.vsr-replay-shell .online-dot-ip {
  display:inline-flex;align-items:center;gap:5px;padding:2px 8px;
  border-radius:10px;background:color-mix(in srgb,var(--green) 12%,transparent);flex-shrink:0;
}
.vsr-replay-shell .online-dot-ip::before {
  content:'';width:8px;height:8px;border-radius:50%;background:var(--green);
  animation:vsrRpOnlinePulse 1.5s ease-in-out infinite;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 25%,transparent);
}
.vsr-replay-shell .online-dot-ip::after {
  content:'Online';font-size:10px;font-weight:500;color:var(--green);
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
}
@keyframes vsrRpOnlinePulse {
  0%,100%{box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 25%,transparent)}
  50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 10%,transparent)}
}

/* ── REPLAY PANEL ────────────────────────────────────────────── */
.vsr-replay-shell .replay-panel {
  flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);
}
.vsr-replay-shell .replay-empty {
  flex:1;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:12px;color:var(--text3);
}
.vsr-replay-shell .replay-empty svg { opacity:.3; }
.vsr-replay-shell .replay-empty p { font-size:14px; }

/* ── REPLAY CONTROL BAR — floats below the stage, video-player feel ─
   flex-wrap is always on (not just under .vsr-is-mobile) so that on any
   window/panel width — a laptop screen, a half-split monitor, devtools
   eating half the viewport — buttons that don't fit move to a new row
   instead of silently overflowing past the visible edge. The stage
   (.replay-view, flex:1) automatically gives up space to a taller,
   multi-row toolbar since its size is read live in JS, not hardcoded. */
.vsr-replay-shell .replay-toolbar {
  min-height:60px;background:var(--bg2);border-top:1px solid var(--border);
  box-shadow:0 -6px 16px rgba(0,0,0,.05);
  display:flex;flex-wrap:wrap;align-items:center;padding:10px 16px;gap:10px 12px;flex-shrink:0;
  position:relative;z-index:5;
}
.vsr-replay-shell .play-btn {
  width:38px;height:38px;border-radius:50%;background:var(--accent);border:none;
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .12s,box-shadow .15s;flex-shrink:0;
  box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 45%,transparent);
}
.vsr-replay-shell .play-btn svg { margin-left:1px; }
.vsr-replay-shell .play-btn:hover {
  background:var(--accent-dark); transform:scale(1.06);
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 55%,transparent);
}
.vsr-replay-shell .play-btn:active { transform:scale(.96); }

/* ── TRANSPORT: skip back/forward, jump to start/end — flat, muted,
   icon-only, no boxes; matches a light modern player's minimal look. ── */
.vsr-replay-shell .skip-btn {
  width:34px;height:34px;border-radius:8px;background:transparent;border:none;
  color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,transform .1s;flex-shrink:0;
}
.vsr-replay-shell .skip-btn:hover { background:var(--bg3);color:var(--text); }
.vsr-replay-shell .skip-btn:active { transform:scale(.92); }
.vsr-replay-shell .jump-btn {
  width:26px;height:34px;border-radius:8px;background:transparent;border:none;
  color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,transform .1s;flex-shrink:0;
}
.vsr-replay-shell .jump-btn:hover { background:var(--bg3);color:var(--text); }
.vsr-replay-shell .jump-btn:active { transform:scale(.92); }
/* ── SPEED DROPDOWN — custom popup, not a native <select> (whose
   dropdown list can't be styled and looked out of place). Opens upward
   since it's docked in the bottom toolbar. ── */
.vsr-replay-shell .speed-wrap { position:relative;flex-shrink:0; }
.vsr-replay-shell .speed-btn {
  height:32px;padding:0 8px;background:transparent;border:none;
  color:var(--text2);border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
  display:flex;align-items:center;gap:4px;
  transition:background .15s,color .15s;
}
.vsr-replay-shell .speed-btn svg { opacity:.6;transition:transform .15s; }
.vsr-replay-shell .speed-btn:hover { background:var(--bg3);color:var(--text); }
.vsr-replay-shell .speed-btn.active {
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}
.vsr-replay-shell .speed-btn.active svg { transform:rotate(180deg); }
.vsr-replay-shell .speed-menu {
  display:none;position:absolute;bottom:calc(100% + 8px);left:0;min-width:76px;
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.35);overflow:hidden;z-index:300;
  flex-direction:column;padding:4px;
}
.vsr-replay-shell .speed-menu.open { display:flex; }
.vsr-replay-shell .speed-menu-item {
  display:block;width:100%;padding:7px 10px;background:transparent;border:none;
  border-radius:6px;color:var(--text2);cursor:pointer;font-size:12px;font-weight:600;
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;text-align:left;transition:.12s;
}
.vsr-replay-shell .speed-menu-item:hover { background:var(--bg3);color:var(--text); }
.vsr-replay-shell .speed-menu-item.active { background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent); }
.vsr-replay-shell .time-display {
  font-family:'DM Mono',monospace;font-size:12px;color:var(--text2);min-width:96px;flex-shrink:0;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.vsr-replay-shell .toolbar-sep { width:1px;height:22px;background:var(--border);flex-shrink:0;opacity:.8; }
.vsr-replay-shell .progress-wrap {
  /* order:10 + flex-basis:100% means whenever the icon buttons around it
     don't all fit on one line, the progress bar is what drops to its own
     full-width row (predictable and still usable), rather than the
     buttons themselves silently shrinking to nothing or overflowing. */
  order:10;flex:1 1 100%;min-width:120px;
  height:5px;background:var(--bg4);border-radius:3px;
  cursor:pointer;position:relative;transition:height .12s,transform .12s;
}
.vsr-replay-shell .progress-wrap:hover { height:7px; }
.vsr-replay-shell .progress-fill {
  height:100%;background:var(--accent);border-radius:3px;
  pointer-events:none;transition:width .1s linear;
}
.vsr-replay-shell .progress-thumb {
  position:absolute;top:50%;transform:translate(-50%,-50%);
  width:12px;height:12px;background:var(--accent);border-radius:50%;
  pointer-events:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent);
}
.vsr-replay-shell .event-markers {
  position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;
}
.vsr-replay-shell .ev-marker {
  position:absolute;top:50%;transform:translateY(-50%);width:3px;height:10px;border-radius:1px;
}
.vsr-replay-shell .ev-marker.click,
.vsr-replay-shell .ev-marker.rage_click {
  pointer-events:auto;cursor:pointer;z-index:2;
}
.vsr-replay-shell .ev-marker.click { background:var(--orange); }
.vsr-replay-shell .ev-marker.click:hover { height:14px;box-shadow:0 0 4px var(--orange); }
.vsr-replay-shell .ev-marker.scroll { background:var(--green);width:2px;height:6px; }
.vsr-replay-shell .ev-marker.rage_click { background:var(--red); }
.vsr-replay-shell .ev-marker.rage_click:hover { height:14px;box-shadow:0 0 4px var(--red); }
.vsr-replay-shell .ev-marker.input { background:var(--purple);width:2px;height:6px; }
.vsr-replay-shell .ev-marker.dead_click { background:var(--text3); }
.vsr-replay-shell .ev-marker.dead_click:hover { height:14px;box-shadow:0 0 4px var(--text3); }
.vsr-replay-shell .ev-marker.u_turn { background:var(--purple);width:3px;height:10px; }
.vsr-replay-shell .ev-marker.network { background:var(--accent);width:2px;height:5px; }
.vsr-replay-shell .ev-marker.custom_tagged { background:var(--orange);width:3px;height:7px; }
.vsr-replay-shell .ev-marker.iframe_click { background:var(--accent);width:3px;height:8px; }
.vsr-replay-shell .ev-marker.touch { background:var(--purple);width:3px;height:8px; }
.vsr-replay-shell .ev-marker.touch:hover { height:14px;box-shadow:0 0 4px var(--purple); }
.vsr-replay-shell .ev-marker.broken_resource { background:var(--red);width:3px;height:9px; }
.vsr-replay-shell .ev-marker.broken_resource:hover { height:14px;box-shadow:0 0 4px var(--red); }
.vsr-replay-shell .ev-marker.mutation { background:var(--green);width:2px;height:4px;opacity:.6; }

/* ── ACTION GROUP — Next Click / Fullscreen / Event Log / Notes,
   clustered into one segmented pill instead of scattered separate boxes.
   All icon-only with tooltips, for a flatter, single-toolbar-language
   look (matches a modern video-editor style, not a grid of buttons). ── */
.vsr-replay-shell .toolbar-actions {
  display:flex;align-items:center;gap:2px;flex-shrink:0;
  background:var(--bg3);border:1px solid var(--border);border-radius:11px;padding:3px;
}
.vsr-replay-shell .next-click-btn {
  width:32px;height:32px;border-radius:8px;background:transparent;border:none;
  color:var(--orange);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .1s;flex-shrink:0;
}
.vsr-replay-shell .next-click-btn:hover { background:color-mix(in srgb,var(--orange) 16%,transparent); }
.vsr-replay-shell .next-click-btn:active { transform:scale(.92); }
.vsr-replay-shell .next-click-btn:disabled { opacity:.35;cursor:default;background:transparent; }
/* Floats over the stage, bottom-center, as a small overlay badge rather
   than a full toolbar row. */
.vsr-replay-shell .replay-meta {
  position:absolute;left:5px;bottom:5px;z-index:6;
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  font-size:9px;color:var(--text3);
}
.vsr-replay-shell .rm-chip {
  display:inline-flex;align-items:center;gap:2px;
  padding:1px 6px;border-radius:20px;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text2);font-weight:500;white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.vsr-replay-shell .rm-chip svg { opacity:.65;flex-shrink:0;width:8px;height:8px; }

/* ── FULLSCREEN / EVENT LOG TOGGLE (inside .toolbar-actions) ────── */
.vsr-replay-shell .fullscreen-btn {
  width:32px;height:32px;border-radius:8px;background:transparent;
  border:none;color:var(--text2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,transform .1s;flex-shrink:0;
}
.vsr-replay-shell .fullscreen-btn:hover { background:var(--bg4);color:var(--text); }
.vsr-replay-shell .fullscreen-btn:active { transform:scale(.92); }
.vsr-replay-shell .fullscreen-btn.active {
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  color:var(--accent);
}
.vsr-replay-shell .fullscreen-btn.active:hover { background:color-mix(in srgb,var(--accent) 24%,transparent); }
.vsr-replay-shell .replay-panel:fullscreen,
.vsr-replay-shell .replay-panel:-webkit-full-screen { background:var(--bg); }
.vsr-replay-shell .replay-panel:fullscreen .replay-toolbar,
.vsr-replay-shell .replay-panel:-webkit-full-screen .replay-toolbar { background:var(--bg2); }

/* ── REPLAY STAGE — soft canvas the framed device sits on ───────── */
.vsr-replay-shell .replay-view {
  flex:1;overflow:hidden;position:relative;
  background:radial-gradient(circle at 50% 0%, var(--bg4) 0%, var(--bg3) 70%);
}
.vsr-replay-shell .vp-scaler { position:absolute;top:0;left:0;transform-origin:top left;transition:left .2s,top .2s; }
.vsr-replay-shell .vp-frame {
  background:#ffffff;position:relative;overflow:hidden;
  border-radius:10px;border:1px solid var(--border);
  box-shadow:0 10px 34px rgba(0,0,0,.16);
}

/* ── CURSOR ──────────────────────────────────────────────────── */
.vsr-replay-shell .cursor {
  position:absolute;pointer-events:none;z-index:9999;transition:left .05s,top .05s;
}
.vsr-replay-shell .cursor-dot {
  width:12px;height:12px;background:var(--cursor);border-radius:50%;
  box-shadow:0 0 0 2px rgba(244,63,94,.3);transform:translate(-50%,-50%);
}
.vsr-replay-shell .click-ring {
  position:absolute;width:30px;height:30px;border:2px solid var(--click-ring);
  border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  animation:vsrRpRing .5s ease-out forwards;
}
@keyframes vsrRpRing {
  0%{width:10px;height:10px;opacity:1} 100%{width:50px;height:50px;opacity:0}
}
.vsr-replay-shell .rage-ring {
  border-color:var(--red);animation:vsrRpRing .4s ease-out forwards;
}
.vsr-replay-shell .dead-click-ring {
  border:2px dashed var(--text3);border-radius:50%;
  animation:vsrRpRing .6s ease-out forwards;
}

/* ── SCROLL INDICATOR ────────────────────────────────────────── */
.vsr-replay-shell .scroll-indicator {
  position:absolute;right:6px;top:0;width:6px;
  background:color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:3px;pointer-events:none;z-index:9998;transition:top .2s,height .2s;
}

/* ── EVENT LOG ───────────────────────────────────────────────── */
/* Desktop: a right-hand sidebar over the stage, full height. The device
   frame re-centers in the narrower remaining space (see
   computeViewportGeometry in replay.js), it doesn't get covered. */
.vsr-replay-shell .event-log {
  position:absolute;top:0;right:0;bottom:0;width:300px;
  background:var(--bg2);border-left:1px solid var(--border);
  box-shadow:-8px 0 20px rgba(0,0,0,.06);
  display:flex;flex-direction:column;z-index:10;
}
.vsr-replay-shell .event-log.hidden { display:none; }
.vsr-replay-shell .log-header {
  height:40px;display:flex;align-items:center;padding:0 10px 0 14px;gap:10px;
  flex-shrink:0;border-bottom:1px solid var(--border);
}
.vsr-replay-shell .log-title {
  font-size:11.5px;font-weight:600;color:var(--text2);
  text-transform:uppercase;letter-spacing:.07em;
}
.vsr-replay-shell .log-close-btn {
  margin-left:auto;width:22px;height:22px;border-radius:6px;
  background:transparent;border:none;color:var(--text3);cursor:pointer;
  font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:.15s;
}
.vsr-replay-shell .log-close-btn:hover { background:var(--bg4);color:var(--text); }
.vsr-replay-shell .log-body { flex:1;overflow-y:auto;padding:4px 0; }
.vsr-replay-shell .log-row {
  display:flex;align-items:baseline;gap:8px;padding:3px 14px;
  font-family:'DM Mono',monospace;font-size:11px;
  border-bottom:1px solid transparent;transition:.1s;
}
.vsr-replay-shell .log-row:hover { background:var(--bg3); }
.vsr-replay-shell .log-row.current {
  background:color-mix(in srgb,var(--accent) 8%,transparent);
}
.vsr-replay-shell .log-t { color:var(--text3);min-width:55px; }
.vsr-replay-shell .log-type { min-width:80px;font-weight:500; }
.vsr-replay-shell .log-type.click { color:var(--orange); }
.vsr-replay-shell .log-type.scroll { color:var(--green); }
.vsr-replay-shell .log-type.rage_click { color:var(--red); }
.vsr-replay-shell .log-type.input { color:var(--purple); }
.vsr-replay-shell .log-type.mousemove { color:var(--text3); }
.vsr-replay-shell .log-type.focus { color:var(--accent); }
.vsr-replay-shell .log-type.error { color:var(--red); }
.vsr-replay-shell .log-type.navigate { color:var(--purple); }
.vsr-replay-shell .log-type.dead_click { color:var(--text3); }
.vsr-replay-shell .log-type.u_turn { color:var(--purple);font-style:italic; }
.vsr-replay-shell .log-type.network { color:var(--accent); }
.vsr-replay-shell .log-type.custom_tagged { color:var(--orange);font-weight:600; }
.vsr-replay-shell .log-type.iframe_click,
.vsr-replay-shell .log-type.iframe_scroll,
.vsr-replay-shell .log-type.iframe_mousemove,
.vsr-replay-shell .log-type.iframe_input { color:var(--accent);font-style:italic; }
.vsr-replay-shell .log-type.mutation { color:var(--green);opacity:.8; }
.vsr-replay-shell .log-type.touch { color:var(--purple);font-weight:600; }
.vsr-replay-shell .log-type.broken_resource { color:var(--red);font-weight:600; }
.vsr-replay-shell .log-row.net-ok .log-detail { color:var(--green); }
.vsr-replay-shell .log-row.net-err .log-detail { color:var(--red); }
.vsr-replay-shell .log-row.net-other .log-detail { color:var(--orange); }
.vsr-replay-shell .log-detail {
  color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── IP PLAY BUTTON ──────────────────────────────────────────── */
.vsr-replay-shell .ip-group-play {
  width:22px;height:22px;border-radius:6px;
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  color:var(--accent);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:.15s;flex-shrink:0;padding:0;
}
.vsr-replay-shell .ip-group-play:hover { background:var(--accent);color:#fff; }
.vsr-replay-shell .ip-group-play.playing {
  background:var(--accent);color:#fff;animation:vsrRpPulsePlay 1.2s infinite;
}
@keyframes vsrRpPulsePlay {
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}
  50%{box-shadow:0 0 0 5px transparent}
}

/* ── SESSION TRANSITION ──────────────────────────────────────── */
.vsr-replay-shell .session-transition {
  position:absolute;inset:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:12px;background:var(--bg);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.vsr-replay-shell .session-transition.show { opacity:1;pointer-events:all; }
.vsr-replay-shell .st-label {
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:17px;letter-spacing:-0.02em;color:var(--text);
}
.vsr-replay-shell .st-sub { font-size:12px;color:var(--text3); }

/* ── CLICK EFFECT ANIMATIONS ─────────────────────────────────── */
@keyframes vsrRpClickRingExpand {
  0%{width:8px;height:8px;opacity:1} 100%{width:64px;height:64px;opacity:0}
}
@keyframes vsrRpClickDotFade {
  0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  60%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(0.8)}
}

/* ── SCROLLBARS ──────────────────────────────────────────────── */
.vsr-replay-shell ::-webkit-scrollbar { width:5px;height:5px; }
.vsr-replay-shell ::-webkit-scrollbar-track { background:transparent; }
.vsr-replay-shell ::-webkit-scrollbar-thumb { background:var(--border);border-radius:3px; }

/* ── ip-group Insights Button (icon-only; locked — premium color
   overrides in visitor-insights.css). Kept the same 22px box as the
   play/delete buttons in row2 so all three read as one control group. */
.vsr-replay-shell .ip-group-insights {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
  background: color-mix(in srgb, var(--text3) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--text3) 20%, transparent);
  color: var(--text3);
}
.vsr-replay-shell .ip-group-insights:hover {
  background: color-mix(in srgb, var(--text3) 14%, transparent);
}

/* ── Premium gate popover ────────────────────────────────────── */
.vsr-premium-gate {
  position: fixed;
  z-index: 99999;
  background: #1e1b16;
  border: 1px solid #3d3a30;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12px;
  color: #f0ede8;
  max-width: 260px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  line-height: 1.5;
  animation: vsrGateFadeIn .15s ease;
}
@keyframes vsrGateFadeIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.vsr-premium-gate strong {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 13px;
}
.vsr-premium-gate p { margin: 0; color: #a09a8e; }
.vsr-premium-gate a {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #f59e0b;
  text-decoration: none;
}
.vsr-premium-gate a:hover { text-decoration: underline; }

/* Light-shell override */
.vsr-replay-shell[data-theme="light"] .vsr-premium-gate {
  background: rgba(255,255,255,0.96);
  border-color: #e2e0da;
  color: #0f172a;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
}
.vsr-replay-shell[data-theme="light"] .vsr-premium-gate p { color: #64748b; }

/* NOTE: .vsr-ip-insights-modal, .vsr-iim-*, .vsr-insight-chip and
   .vsr-insights-list are now in premium/admin/css/visitor-insights.css */

/* ── MOBILE CLOSE BUTTON — hidden until .vsr-is-mobile ──────── */
/* Floats over the stage (top-right) instead of sitting in the
   control bar, which now lives below the stage. */
.vsr-replay-shell .vsr-mob-close-btn {
  display: none;
  position: absolute; top: 10px; right: 10px; z-index: 6;
}

/* ── MOBILE LAYOUT — .vsr-is-mobile is toggled by JS ────────────
   Using a JS class instead of a CSS media query because WP admin
   often renders at desktop viewport width even on phones, which
   means max-width breakpoints never fire reliably.
   ─────────────────────────────────────────────────────────────── */

/* Shell height — #wpadminbar is hidden on our pages, so no admin-bar offset needed */
.vsr-replay-shell.vsr-is-mobile {
  height: calc(100vh - 46px);
  margin-top: 8px;
}

/* Top bar: wrap search to second line, hide rarely-needed actions */
.vsr-replay-shell.vsr-is-mobile .topbar {
  height: auto;
  min-height: 48px;
  padding: 6px 12px;
  gap: 8px;
  flex-wrap: wrap;
}
.vsr-replay-shell.vsr-is-mobile .topbar-sep  { display: none; }
.vsr-replay-shell.vsr-is-mobile .topbar-search {
  order: 10;
  max-width: none;
  flex: 1 1 100%;
}
.vsr-replay-shell.vsr-is-mobile .topbar-right { gap: 6px; }
.vsr-replay-shell.vsr-is-mobile .export-wrap,
.vsr-replay-shell.vsr-is-mobile .bulk-del-btn { display: none; }

/* Session list: full width */
.vsr-replay-shell.vsr-is-mobile .list-panel {
  width: 100%;
  border-right: none;
}

/* ── Replay panel: slide-up sheet over the list ──────────────── */
.vsr-replay-shell.vsr-is-mobile .replay-panel {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0; /* avoid `inset` for Safari < 14.5 */
  z-index: 99998;                        /* below WP admin bar at 99999 */
  border-radius: 14px 14px 0 0;
  display: flex !important;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,.45);
}
.vsr-replay-shell.vsr-is-mobile .replay-panel.vsr-mob-open {
  transform: translateY(0);
}

/* Close button */
.vsr-replay-shell.vsr-is-mobile .vsr-mob-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.vsr-replay-shell.vsr-is-mobile .vsr-mob-close-btn:hover {
  background: var(--bg4);
  color: var(--text);
}

/* Event log stays a bottom sheet on a real phone — no room for a sidebar */
.vsr-replay-shell.vsr-is-mobile .event-log {
  top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 160px;
  border-left: none; border-top: 1px solid var(--border);
  box-shadow: none;
}
.vsr-replay-shell.vsr-is-mobile .log-header { border-bottom: none; }

/* Toolbar: tighter spacing on a real phone (wrapping itself is already
   handled by the base .replay-toolbar rule above) */
.vsr-replay-shell.vsr-is-mobile .replay-toolbar {
  padding: 8px 12px;
  gap: 6px 8px;
}
.vsr-replay-shell.vsr-is-mobile .progress-wrap {
  height: 10px;
  border-radius: 5px;
}
.vsr-replay-shell.vsr-is-mobile .progress-thumb {
  width: 18px;
  height: 18px;
}
.vsr-replay-shell.vsr-is-mobile .time-display  { font-size: 11px; min-width: 80px; }
.vsr-replay-shell.vsr-is-mobile .replay-meta   { display: none; }
/* Fullscreen doesn't apply on a phone; the event-log toggle (which shares
   the same .fullscreen-btn icon-button style) should stay available, so
   this targets the fullscreen button specifically by id, not the class. */
.vsr-replay-shell.vsr-is-mobile #fullscreenBtn { display: none; }


/* ── RECORDING-DISABLED NOTICE ───────────────────────────────── */
/* Sibling of .vsr-replay-shell (rendered above it). Amber/attention style
   so a non-technical user immediately understands recording is off. */
.vsr-rec-notice {
  display:flex;align-items:flex-start;gap:16px;
  margin:16px 0 0;padding:18px 20px;
  background:linear-gradient(180deg,#fffbeb 0%,#fff7e6 100%);
  border:1px solid #f5c86b;border-left:5px solid #f59e0b;
  border-radius:10px;
  box-shadow:0 4px 16px rgba(245,158,11,.14);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  animation:vsrRecNoticeIn .35s ease-out;
}
@keyframes vsrRecNoticeIn { from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:none;} }

.vsr-rec-notice-icon {
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:#fef3c7;color:#b45309;
  animation:vsrRecPulse 2s ease-in-out infinite;
}
@keyframes vsrRecPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(245,158,11,.45); }
  50%     { box-shadow:0 0 0 8px rgba(245,158,11,0); }
}

.vsr-rec-notice-body { flex:1;min-width:0; }
.vsr-rec-notice-title {
  font-size:15px;font-weight:700;color:#7c2d12;letter-spacing:-0.01em;margin-bottom:3px;
}
.vsr-rec-notice-text {
  font-size:13px;line-height:1.55;color:#78350f;margin:0;max-width:640px;
}
.vsr-rec-notice-text strong { color:#7c2d12; }

.vsr-rec-notice-actions {
  flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.vsr-rec-notice-btn {
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border:none;border-radius:8px;cursor:pointer;
  background:#f59e0b;color:#fff;font-size:13.5px;font-weight:700;
  font-family:inherit;white-space:nowrap;
  box-shadow:0 2px 8px rgba(245,158,11,.35);transition:.15s;
}
.vsr-rec-notice-btn:hover:not(:disabled) { background:#d97706;transform:translateY(-1px);box-shadow:0 4px 12px rgba(245,158,11,.45); }
.vsr-rec-notice-btn:active:not(:disabled) { transform:translateY(0); }
.vsr-rec-notice-btn:disabled { opacity:.65;cursor:default;box-shadow:none; }
.vsr-rec-notice-btn svg { flex-shrink:0; }

.vsr-rec-notice-link {
  font-size:12px;color:#b45309;text-decoration:none;font-weight:600;
}
.vsr-rec-notice-link:hover { color:#92400e;text-decoration:underline; }

.vsr-rec-notice-status { font-size:12px;font-weight:600;min-height:15px; }
.vsr-rec-notice.vsr-rec-done {
  background:linear-gradient(180deg,#f0fdf4 0%,#ecfdf5 100%);
  border-color:#86efac;border-left-color:#22c55e;
  box-shadow:0 4px 16px rgba(34,197,94,.14);
}
.vsr-rec-notice.vsr-rec-done .vsr-rec-notice-icon { background:#dcfce7;color:#15803d;animation:none; }
.vsr-rec-notice.vsr-rec-done .vsr-rec-notice-title { color:#166534; }
.vsr-rec-notice.vsr-rec-done .vsr-rec-notice-text { color:#15803d; }

@media (max-width:768px) {
  .vsr-rec-notice { flex-wrap:wrap; }
  .vsr-rec-notice-actions { width:100%;align-items:stretch; }
  .vsr-rec-notice-btn { justify-content:center; }
  .vsr-rec-notice-link { text-align:center; }
}
