/* GhostStat Session Recording — list + rrweb-player viewer styles */
.sr-toolbar{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end}
.sr-field{display:flex;flex-direction:column;min-width:120px}
[data-sr-device].on{background:var(--accent,#1FA463);color:#fff;border-color:var(--accent,#1FA463)}

/* session list */
.sr-list-wrap{max-height:560px;overflow:auto}
.sr-list td,.sr-list th{white-space:nowrap;vertical-align:middle}
.sr-list .sr-page{max-width:220px}
.sr-row{cursor:pointer}
.sr-list tbody tr:hover{background:var(--surface-2,#F4F7FA)}
.sr-row.on{background:#E7F0FE}
.sr-row.on:hover{background:#DCE8FC}

/* trigger badges (palette: green #1FA463 blue #2A6FE8 amber #D97706 red #DC2626) */
.sr-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap}
.sr-b-red{background:#FCE8E8;color:#B91C1C}
.sr-b-amber{background:#FDF0DC;color:#B45309}
.sr-b-blue{background:#E7F0FE;color:#1F5FD0}
.sr-b-grey{background:#EEF1F5;color:#6B7280}

/* player */
.sr-player-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.sr-meta{white-space:nowrap;flex:none}
.sr-mount{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line,#E7ECF2);border-radius:10px;overflow:hidden;
  background:repeating-conic-gradient(#f3f5f8 0% 25%, #fff 0% 50%) 50% / 18px 18px}
.sr-mount .rr-player{box-shadow:none;border-radius:8px}
.sr-empty,.sr-loading{padding:24px;font-size:14px;text-align:center}

@media (max-width:575.98px){
  .sr-player-head{flex-direction:column;align-items:flex-start;gap:2px}
  .sr-list .sr-page{max-width:150px}
}

/* deep-link page filter chip (arrives from the heatmap cross-link) */
.sr-pagechip{display:inline-flex;align-items:center;gap:8px;margin:-4px 0 14px;padding:7px 12px;
  background:#EAF1FE;border:1px solid #D3E1FB;border-radius:8px;color:#1F5FD0;font-size:13px}
.sr-pagechip strong{font-weight:700}
.sr-chip-x{border:0;background:transparent;color:#1F5FD0;font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.sr-chip-x:hover{color:#B91C1C}

/* --- direct rrweb.Replayer stage + our own controls (2.3.0) --- */
.sr-mount{display:block;align-items:initial;justify-content:initial}
.sr-stage{position:relative;overflow:hidden;margin:0 auto;background:#fff;border-radius:8px}
.sr-stage .replayer-wrapper{position:relative;float:none;left:0;top:0;transform-origin:top left}
.sr-stage .replayer-wrapper>iframe{border:none;background:#fff}
.replayer-mouse{position:absolute;width:20px;height:20px;border-radius:100%;background:#4950f6;opacity:.35;transition:left .05s linear,top .05s linear;pointer-events:none;z-index:9999}
.sr-ctrls{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.sr-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line,#E7ECF2);background:#fff;border-radius:8px;cursor:pointer;color:#1FA463;font-size:16px}
.sr-btn:hover{background:#f3f7f4}
.sr-prog{flex:1;min-width:140px;height:8px;background:#e7ecf2;border-radius:5px;position:relative;cursor:pointer}
.sr-prog__fill{position:absolute;left:0;top:0;height:100%;background:#1FA463;border-radius:5px;width:0}
.sr-time{font-variant-numeric:tabular-nums;font-size:12px;color:#5b6672;min-width:96px;text-align:center}
.sr-speed{display:inline-flex;gap:4px}
.sr-speed button{border:1px solid var(--line,#E7ECF2);background:#fff;border-radius:6px;font-size:12px;padding:3px 8px;cursor:pointer;color:#5b6672}
.sr-speed button.on{background:#1FA463;border-color:#1FA463;color:#fff}

/* Shared date-range picker (normalised to /devicedetector) */
.mb-pill{position:relative;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--line-2,#D0D4DA);border-radius:6px;background:#fff;font-size:12.5px;font-weight:600;color:var(--ink-2,#3C4350);cursor:pointer;white-space:nowrap}
.mb-pill .car{font-size:11px;color:var(--muted-2,#AAB2BD)}
.rangepick{background:#fff;border:1px solid var(--line,#E9EDF3);border-radius:10px;box-shadow:0 12px 30px rgba(16,24,40,.16);min-width:236px;padding:6px}
.rangepick .rp-presets{display:flex;flex-direction:column}
.rangepick .rm{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:6px;font-weight:600;font-size:13px;color:var(--ink-2,#3C4350);border:0;background:none;cursor:pointer}
.rangepick .rm:hover{background:#F5F7FA}
.rangepick .rm.on{background:var(--accent-soft,#E7F5EC);color:var(--accent-2,#178A52)}
.rangepick .rp-custom{border-top:1px solid #EEF1F6;margin-top:6px;padding:10px 10px 8px}
.rangepick .rp-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--muted,#8C95A1);margin-bottom:8px}
.rangepick .rp-dates{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rangepick .rp-dates input[type=date]{flex:1;min-width:0;height:32px;border:1px solid var(--line-2,#D0D4DA);border-radius:6px;padding:0 8px;font-size:12.5px;color:var(--ink-2,#3C4350);background:#fff}
.rangepick .rp-dates input[type=date]:focus{outline:none;border-color:var(--accent,#1FA463);box-shadow:0 0 0 3px rgba(31,164,99,.14)}
.rangepick .rp-arrow{color:var(--muted-2,#AAB2BD);font-weight:700}
.rangepick .rp-apply{width:100%;height:34px;border:0;border-radius:6px;background:var(--accent,#1FA463);color:#fff;font-weight:700;font-size:13px;cursor:pointer}
.rangepick .rp-apply:hover{background:var(--accent-2,#178A52)}