html, body {
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
        background-color: #0A1325 !important;
      }
      body {
        font-family: 'Space Grotesk', sans-serif;
      }

      /* Glowing background animations */
      @keyframes pulse-blob-1 {
        0%, 100% { opacity: 0.4; transform: scale(1) translate(0px, 0px); }
        50%       { opacity: 0.65; transform: scale(1.08) translate(15px, -15px); }
      }
      @keyframes pulse-blob-2 {
        0%, 100% { opacity: 0.3; transform: scale(1.05) translate(0px, 0px); }
        50%       { opacity: 0.5; transform: scale(0.95) translate(-15px, 15px); }
      }
      .blob-1 {
        animation: pulse-blob-1 14s ease-in-out infinite;
        will-change: transform;
      }
      .blob-2 {
        animation: pulse-blob-2 18s ease-in-out infinite;
        will-change: transform;
      }

      /* Custom scrollbar styling */
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      ::-webkit-scrollbar-track {
        background: rgba(10, 19, 37, 0.05);
      }
      ::-webkit-scrollbar-thumb {
        background: rgba(245, 142, 24, 0.2);
        border-radius: 3px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: rgba(245, 142, 24, 0.4);
      }

      /* ==========================================================================
         OVERRIDING DYNAMIC JS INJECTED STYLES FOR DARK-THEME COMPATIBILITY
         ========================================================================== */

      /* ==========================================================================
         GLASSMORPHIC THEME CONFIGURATIONS (rrweb.com Navbar Style)
         ========================================================================== */

      .glass-premium {
        background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 45%, rgba(245,142,24,0.04) 100%), radial-gradient(120% 180% at 0% 0%, rgba(99,140,255,0.08) 0%, transparent 60%), rgba(10,19,37,0.38) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
        transition: all 0.3s ease-in-out !important;
        color: #ffffff !important;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
      }
      .glass-premium:hover {
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.03) 45%, rgba(245,142,24,0.06) 100%), radial-gradient(120% 180% at 0% 0%, rgba(99,140,255,0.1) 0%, transparent 60%), rgba(10,19,37,0.45) !important;
        border-color: rgba(255,255,255,0.15) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
      }

      /* Mapping legacy bg-white to use the premium glassmorphism styling */
      .bg-white {
        background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 45%, rgba(245,142,24,0.04) 100%), radial-gradient(120% 180% at 0% 0%, rgba(99,140,255,0.08) 0%, transparent 60%), rgba(10,19,37,0.38) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
        transition: all 0.3s ease-in-out !important;
        color: #ffffff !important;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
      }
      .bg-white:hover {
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.03) 45%, rgba(245,142,24,0.06) 100%), radial-gradient(120% 180% at 0% 0%, rgba(99,140,255,0.1) 0%, transparent 60%), rgba(10,19,37,0.45) !important;
        border-color: rgba(255,255,255,0.15) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
      }

      /* Green glassmorphism (sty === 1) */
      .glass-green, .bg-green-500 {
        background: linear-gradient(135deg, rgba(16,185,129,0.06) 0%, rgba(16,185,129,0.01) 45%, rgba(16,185,129,0.03) 100%), radial-gradient(120% 180% at 0% 0%, rgba(16,185,129,0.08) 0%, transparent 60%), rgba(10,19,37,0.38) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border: 1px solid rgba(16,185,129,0.2) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
        color: #10b981 !important;
        transition: all 0.3s ease-in-out !important;
      }
      .glass-green:hover, .bg-green-500:hover {
        background: linear-gradient(135deg, rgba(16,185,129,0.10) 0%, rgba(16,185,129,0.03) 45%, rgba(16,185,129,0.05) 100%), radial-gradient(120% 180% at 0% 0%, rgba(16,185,129,0.10) 0%, transparent 60%), rgba(10,19,37,0.45) !important;
        border-color: rgba(16,185,129,0.4) !important;
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.15) !important;
      }

      /* Red glassmorphism (sty === 2) */
      .glass-red, .bg-red-500 {
        background: linear-gradient(135deg, rgba(239,68,68,0.06) 0%, rgba(239,68,68,0.01) 45%, rgba(239,68,68,0.03) 100%), radial-gradient(120% 180% at 0% 0%, rgba(239,68,68,0.08) 0%, transparent 60%), rgba(10,19,37,0.38) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border: 1px solid rgba(239,68,68,0.2) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
        color: #ef4444 !important;
        transition: all 0.3s ease-in-out !important;
      }
      .glass-red:hover, .bg-red-500:hover {
        background: linear-gradient(135deg, rgba(239,68,68,0.10) 0%, rgba(239,68,68,0.03) 45%, rgba(239,68,68,0.05) 100%), radial-gradient(120% 180% at 0% 0%, rgba(239,68,68,0.10) 0%, transparent 60%), rgba(10,19,37,0.45) !important;
        border-color: rgba(239,68,68,0.4) !important;
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.15) !important;
      }

      /* Tile text formatting overrides */
      .text-gray-500 {
        color: #DBE2FD !important;
        font-size: 0.725rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        opacity: 0.85;
      }
      .text-xl.font-bold, .text-xl.text-white {
        color: #e2e8f0 !important;
        font-size: 1.125rem !important;
        font-weight: 600 !important;
        font-family: monospace !important;
      }
      .text-lg.text-white {
        color: #DBE2FD !important;
        font-size: 0.725rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        opacity: 0.85;
      }

      /* Session list li elements (populated by dashboard.js) */
      #sessionList li {
        padding: 0.95rem 1.25rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-left: 3px solid transparent !important;
        background-color: transparent !important;
        color: #DBE2FD !important;
        transition: all 0.2s ease-in-out !important;
        font-family: monospace !important;
        font-size: 0.8rem !important;
        letter-spacing: 0.02em !important;
        opacity: 0.8;
      }
      #sessionList li:hover {
        background-color: rgba(255, 255, 255, 0.02) !important;
        color: #f58e18 !important;
        opacity: 1;
      }
      #sessionList li.bg-blue-100 {
        background-color: rgba(255, 255, 255, 0.04) !important;
        color: #f58e18 !important;
        border-left: 3px solid #f58e18 !important;
        font-weight: 700 !important;
        opacity: 1;
      }

      /* Dynamic buttons inside details card */
      #contentArea button.bg-blue-500 {
        background-color: #f58e18 !important;
        color: #ffffff !important;
        border: none !important;
        font-weight: 600 !important;
        border-radius: 0.75rem !important;
        padding: 0.65rem 1.5rem !important;
        font-size: 0.85rem !important;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        transition: all 0.2s ease-in-out !important;
        cursor: pointer !important;
      }
      #contentArea button.bg-blue-500:hover {
        background-color: #d4750c !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 15px rgba(245, 142, 24, 0.2) !important;
      }
      #contentArea button.bg-teal-500 {
        background-color: #0ea5e9 !important;
        color: #ffffff !important;
        border: none !important;
        font-weight: 600 !important;
        border-radius: 0.75rem !important;
        padding: 0.65rem 1.5rem !important;
        font-size: 0.85rem !important;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        transition: all 0.2s ease-in-out !important;
        cursor: pointer !important;
      }
      #contentArea button.bg-teal-500:hover {
        background-color: #0284c7 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 15px rgba(14, 165, 233, 0.25) !important;
      }
      #contentArea button.bg-red-500 {
        background-color: transparent !important;
        color: #ef4444 !important;
        border: 1px solid rgba(239, 68, 68, 0.4) !important;
        font-weight: 600 !important;
        border-radius: 0.75rem !important;
        padding: 0.5rem 1.25rem !important;
        font-size: 0.85rem !important;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
      }
      #contentArea button.bg-red-500:hover {
        background-color: rgba(239, 68, 68, 0.08) !important;
        border-color: #ef4444 !important;
        transform: translateY(-1px) !important;
      }
      #contentArea button.bg-red-600 {
        background-color: #dc2626 !important;
        color: #ffffff !important;
        border: none !important;
        font-weight: 600 !important;
        border-radius: 0.75rem !important;
        padding: 0.5rem 1.25rem !important;
        font-size: 0.85rem !important;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
      }
      #contentArea button.bg-red-600:hover {
        background-color: #b91c1c !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 15px rgba(220, 38, 38, 0.2) !important;
      }

/* ==========================================================================
   RESPONSIVE — TABLET & MOBILE
   The desktop layout is a fixed-height, non-scrolling two-column workspace.
   On smaller screens we stack the columns and let the page scroll normally.
   ========================================================================== */

/* --- Tablet landscape: keep two columns, just give the sidebar less room --- */
@media (max-width: 1024px) and (min-width: 901px) {
  #divDashboardView > aside {
    width: 16rem;              /* was w-80 (20rem) */
    flex-shrink: 0;
  }
  /* 4 stat tiles is too many at this width */
  #contentArea .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --- Tablet portrait & mobile: stack everything, enable page scrolling --- */
@media (max-width: 900px) {

  /* Desktop locks the page to the viewport with overflow:hidden.
     On small screens the content must be allowed to grow and scroll. */
  html, body {
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Stack the sidebar above the workspace instead of side-by-side */
  #divDashboardView {
    flex-direction: column !important;
    overflow: visible !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    gap: 1rem !important;
  }

  /* Sidebar becomes a full-width panel */
  #divDashboardView > aside {
    width: 100% !important;
  }

  /* Cap the session list so it can't push the workspace off-screen */
  #divDashboardView > aside > div:last-of-type {
    max-height: 45vh;
    overflow-y: auto;
  }

  /* Workspace panel: full width with a usable minimum height */
  #divDashboardView > section {
    width: 100% !important;
    min-height: 60vh;
  }

  /* Let the detail area flow with the page rather than scrolling internally */
  #contentArea {
    overflow: visible !important;
  }

  /* Stat tiles: 4 across is unreadable on a phone/tablet */
  #contentArea .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Action buttons (Replay / Charts / Delete) wrap instead of overflowing */
  #contentArea .flex.justify-center {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* Header nav: let both groups wrap instead of running off the screen */
  header.glass-premium {
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }
  header.glass-premium > div {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.5rem;
  }
}

/* --- Phones: tighter spacing, single-column tiles --- */
@media (max-width: 560px) {
  #divDashboardView {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  header.glass-premium {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #divDashboardView > aside > div:last-of-type {
    max-height: 35vh;
  }

  /* One tile per row so the values stay readable */
  #contentArea .grid-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* Long session IDs and URLs must wrap, not overflow the panel */
  #contentArea {
    word-break: break-word;
  }

  #contentArea .flex.justify-center button,
  #contentArea .flex.justify-center a {
    width: 100%;
  }
}

/* ==========================================================================
   Rage-click "Watch in replay" link
   The Error Analysis panel uses a fixed translucent dark (bg-slate-900/40),
   so it reads DARK over the dark page but WASHED-OUT LIGHT over the light page.
   A pale purple works on dark but disappears on light — so make it theme-aware:
   a brighter purple on dark, a stronger/darker purple on light.
   ========================================================================== */
.watch-replay {
  color: #a78bfa;                 /* dark theme: vivid purple pops on the dark panel */
  transition: color .15s ease;
}
.group:hover .watch-replay {
  color: #c4b5fd;
}
html.light-theme .watch-replay {
  color: #7c3aed;                 /* light theme: deeper purple for contrast */
}
html.light-theme .group:hover .watch-replay {
  color: #6d28d9;
}

/* Sidebar: the currently-selected session row. A real CSS class (not a Tailwind
   arbitrary value) so it renders reliably on first paint under the Tailwind CDN,
   including when arriving with ?session_id=... */
.session-selected {
  background: rgba(245, 142, 24, 0.15) !important;
  border-left-color: #f58e18 !important;
  box-shadow: inset 3px 0 0 #f58e18;
}

/* ==========================================================================
   Pipeline status toast — clear running / success / error feedback
   Appears bottom-right while the pipeline runs and reports the outcome.
   ========================================================================== */
.pipeline-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #ffffff;
  /* Default = teal, matching the "Session Analytics" button (bg-teal-500). */
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 40px rgba(13, 148, 136, 0.35);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.pipeline-toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pipeline-toast .pt-icon {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
}
/* Running = teal (Session Analytics colour); success/error stay semantic. */
.pipeline-toast.running { background: linear-gradient(135deg, #14b8a6, #0d9488); box-shadow: 0 12px 40px rgba(13, 148, 136, 0.35); }
.pipeline-toast.success { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 12px 40px rgba(22, 163, 74, 0.35); }
.pipeline-toast.error   { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 12px 40px rgba(220, 38, 38, 0.35); }

.pt-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  display: inline-block;
  animation: pt-spin 0.7s linear infinite;
}
@keyframes pt-spin { to { transform: rotate(360deg); } }