/**
 * 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=Instrument+Serif:ital@0;1&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 - 104px);overflow:hidden; /* 32px admin bar + 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:'Instrument Serif',Georgia,serif;font-style:italic;font-size:16px;
  color:var(--text);display:flex;align-items:center;gap:8px;letter-spacing:-0.01em;
}
.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:10px;align-items:center; }
.vsr-replay-shell .theme-btn {
  padding:6px 12px;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:6px 12px;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:6px 12px;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:200;
}
.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:6px 12px;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:'Instrument Serif',Georgia,serif;font-style:italic;font-size:15px;color:var(--text);
}
.vsr-replay-shell .list-count { font-size:12px;color:var(--text3); }
/* ── LIST FILTERS ─────────────────────────────────────────────── */
.vsr-replay-shell .list-filters {
  display:flex;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 .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); }

.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 ────────────────────────────────────────────────── */
.vsr-replay-shell .ip-group { border-bottom:1px solid var(--border); }
.vsr-replay-shell .ip-group-header {
  padding:10px 16px;cursor:pointer;display:flex;align-items:center;gap:10px;
  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-info { display:flex;flex-direction:column;gap:2px;min-width:0; }
.vsr-replay-shell .ip-group-info-top { display:flex;align-items:center;gap:8px; }
.vsr-replay-shell .ip-group-ip {
  font-family:'DM Mono',monospace;font-size:12.5px;font-weight:500;color:var(--text);
}
.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;
}
.vsr-replay-shell .ip-group-user:hover { text-decoration:underline; }
.vsr-replay-shell .ip-group-last-rec {
  font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;
}
.vsr-replay-shell .ip-group-time { font-size:11px;color:var(--accent);margin-left:auto;flex-shrink:0; }
.vsr-replay-shell .ip-group-count {
  font-size:11px;color:var(--text3);background:var(--bg4);
  padding:2px 8px;border-radius:10px;flex-shrink:0;
}
.vsr-replay-shell .ip-group-del {
  width:24px;height:24px;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; }
.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 TOOLBAR ──────────────────────────────────────────── */
.vsr-replay-shell .replay-toolbar {
  height:52px;background:var(--bg2);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 16px;gap:12px;flex-shrink:0;
}
.vsr-replay-shell .play-btn {
  width:34px;height:34px;border-radius:8px;background:var(--accent);border:none;
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.15s;flex-shrink:0;
}
.vsr-replay-shell .play-btn:hover { background:var(--accent-dark); box-shadow:0 3px 10px rgba(245,158,11,.4); }
.vsr-replay-shell .speed-select {
  padding:5px 8px;background:var(--bg3);border:1px solid var(--border);
  color:var(--text);border-radius:6px;font-size:12px;cursor:pointer;
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
}
.vsr-replay-shell .time-display {
  font-family:'DM Mono',monospace;font-size:12px;color:var(--text2);min-width:100px;
}
.vsr-replay-shell .progress-wrap {
  flex:1;height:6px;background:var(--bg4);border-radius:3px;
  cursor:pointer;position:relative;
}
.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; }

/* ── NEXT CLICK BUTTON ────────────────────────────────────────── */
.vsr-replay-shell .next-click-btn {
  display:flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:7px;background:color-mix(in srgb,var(--orange) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--orange) 30%,transparent);
  color:var(--orange);cursor:pointer;font-size:11px;font-weight:500;
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;transition:.15s;flex-shrink:0;white-space:nowrap;
}
.vsr-replay-shell .next-click-btn:hover { background:color-mix(in srgb,var(--orange) 22%,transparent); }
.vsr-replay-shell .next-click-btn:disabled { opacity:.35;cursor:default; }
.vsr-replay-shell .replay-meta {
  font-size:11px;color:var(--text3);margin-left:auto;white-space:nowrap;
}

/* ── FULLSCREEN ──────────────────────────────────────────────── */
.vsr-replay-shell .fullscreen-btn {
  width:34px;height:34px;border-radius:8px;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 .fullscreen-btn:hover { background:var(--bg4);color:var(--text); }
.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 VIEWPORT ─────────────────────────────────────────── */
.vsr-replay-shell .replay-view {
  flex:1;overflow:hidden;position:relative;background:var(--bg3);
}
.vsr-replay-shell .vp-scaler { position:absolute;top:0;left:0;transform-origin:top left; }
.vsr-replay-shell .vp-frame { background:#ffffff;position:relative;overflow:hidden; }

/* ── 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 ───────────────────────────────────────────────── */
.vsr-replay-shell .event-log {
  position:absolute;bottom:0;left:0;right:0;height:160px;
  background:var(--bg2);border-top:1px solid var(--border);
  display:flex;flex-direction:column;z-index:10;transition:height .2s;
}
.vsr-replay-shell .event-log.collapsed { height:32px; }
.vsr-replay-shell .log-header {
  height:32px;display:flex;align-items:center;padding:0 14px;gap:10px;
  cursor:pointer;flex-shrink:0;
}
.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-toggle { margin-left:auto;font-size:11px;color:var(--text3); }
.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:24px;height:24px;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:'Instrument Serif',serif;font-size:18px;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; }
