/* ═══════════════════════════════════════════════
   LIVE TIMELINE - Adversus-identical styling, theme-aware
   All surface colours driven by design-system tokens so
   light/dark modes follow the rest of the app. Disposition
   block colours are kept semantic (green = success etc.)
   but also exposed as --adv-disp-* so admins can retheme
   them without editing this file.
   ═══════════════════════════════════════════════ */

:root {
    /* Semantic disposition palette - tuned to match Adversus's own block colours
       so the two timelines look identical side-by-side. Ugyldigt (burnt orange)
       and Ukvalificeret (yellow) are deliberately split - Adversus renders them
       with distinct hues and we must too. Override in org-config.theme if needed. */
    --adv-disp-success:         #5cb85c;  /* Adversus Bootstrap success - Succes */
    --adv-disp-not-interested:  #d9534f;  /* Adversus Bootstrap danger - Ikke interesseret */
    --adv-disp-busy:            #d9534f;
    --adv-disp-callback:        #9e9e9e;  /* Automatisk genopkald - grå (system-retry, ikke menneske-kontakt) */
    --adv-disp-private-redial:  #b894d4;  /* Adversus lilac - Personligt genopkald */
    --adv-disp-unqualified:     #f0ad4e;  /* Adversus Bootstrap warning - Ukvalificeret */
    --adv-disp-invalid:         #e67e22;  /* Adversus burnt orange - Ugyldigt */
    --adv-disp-voicemail:       #95a5a6;  /* Adversus neutral grey - Telefonsvarer */
    --adv-disp-default:         #5b9bd5;  /* default (ukendt status) - blå, adskilt fra grå auto-redial */
    /* Timeline chrome - pull from the existing design system so light/dark works */
    --adv-live-bg:     var(--card, #fff);
    --adv-live-border: var(--border, #e2e8f0);
    --adv-row-alt:     var(--surface, #f7fafc);
    --adv-row-hover:   var(--border, #edf2f7);
    --adv-text-1:      var(--text-1, #2d3748);
    --adv-text-2:      var(--text-2, #4a5568);
    --adv-text-3:      var(--text-3, #718096);
    --adv-grid-minor:  var(--border, #f7fafc);
    --adv-grid-major:  var(--border-2, #edf2f7);
    --adv-ruler-bg:    var(--surface, #f7fafc);
    --adv-thumb-bg:    var(--surface, #f7fafc);
}

/* Dark theme tweaks - disposition colours dim slightly so they don't glow on a
   dark background, and voicemail/default swap to darker greys so bars remain
   visible against the new dark row backgrounds. */
[data-theme="dark"] {
    --adv-disp-success:         #4ea64e;
    --adv-disp-not-interested:  #c94641;
    --adv-disp-busy:            #c94641;
    --adv-disp-callback:        #8a8a8a;
    --adv-disp-private-redial:  #a582c4;
    --adv-disp-unqualified:     #d99b40;
    --adv-disp-invalid:         #d16f1e;
    --adv-disp-voicemail:       #7a8a8e;
    --adv-disp-default:         #4d8cc2;
    /* Softer UI chrome - the light theme inherits via design-system tokens, dark
       needs explicit low-contrast values so grid lines don't feel like graph paper
       and the row stripes don't strobe under the colourful blocks. */
    --adv-live-bg:     #1a1f2e;
    --adv-live-border: rgba(255,255,255,0.06);
    --adv-row-alt:     rgba(255,255,255,0.018);
    --adv-row-hover:   rgba(255,255,255,0.05);
    --adv-grid-minor:  rgba(255,255,255,0.025);
    --adv-grid-major:  rgba(255,255,255,0.055);
    --adv-ruler-bg:    #1e2436;
    --adv-thumb-bg:    rgba(255,255,255,0.04);
}
[data-theme="dark"] .adv-live {
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 32px rgba(0,0,0,0.35);
    border-radius: 12px;
}
[data-theme="dark"] .adv-user__thumb {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09));
    border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .adv-user__thumb span { color: rgba(255,255,255,0.75); }
[data-theme="dark"] .adv-ruler__label--hour { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .adv-user__badge--gray { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.55); }
[data-theme="dark"] .adv-session { box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
[data-theme="dark"] .adv-session:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.4); }

.adv-live { display: flex; border: 1px solid var(--adv-live-border); border-radius: 8px; background: var(--adv-live-bg); overflow: hidden; height: calc(100vh - 320px); height: calc(100dvh - 320px); min-height: 400px; }

/* ── Fixed user column ── */
.adv-users { width: 220px; flex-shrink: 0; border-right: 1px solid var(--adv-live-border); overflow-y: auto; overflow-x: hidden; background: var(--adv-live-bg); z-index: 10; }
.adv-users::-webkit-scrollbar { display: none; }
.adv-users { scrollbar-width: none; }
/* Mobil: 220px fast user-kolonne efterlod 0px til timelinen på telefoner.
   Skrumper kolonnen + tillader timelinen at vokse + hor-scroll. */
@media (max-width: 600px) {
  .adv-live { height: calc(100vh - 220px); height: calc(100dvh - 220px); }
  .adv-users { width: 120px; }
  .adv-section-divider--users { padding: 0 8px; font-size: .55rem; }
  .adv-user { padding: 8px 8px; gap: 8px; }
}

/* Section-divider - adskiller Dagshold/Aftenhold. Users-side har label +
   emoji; timeline-side er tom men samme højde så rækkerne forbliver aligned. */
.adv-section-divider { height: 28px; box-sizing: border-box; display: flex; align-items: center; background: var(--adv-live-bg); border-top: 1px solid var(--adv-live-border); border-bottom: 1px solid var(--adv-live-border); }
.adv-section-divider--users { padding: 0 14px; gap: 8px; font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--divider-color, var(--text-2)); }
.adv-section-divider__emoji { font-size: .85rem; }
.adv-section-divider--timeline { position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }

.adv-user-header { height: 36px; background: var(--adv-ruler-bg); border-bottom: 1px solid var(--adv-live-border); padding: 10px 14px; font-size: .78rem; font-weight: 700; color: var(--adv-text-3); }

.adv-user { display: flex; align-items: center; gap: 12px; padding: 10px 14px; height: 72px; border-bottom: 1px solid var(--adv-grid-major); cursor: pointer; /* Phase 4: let the browser skip layout/paint for rows scrolled out of view */ content-visibility: auto; contain-intrinsic-size: 72px; }
.adv-user:nth-child(even) { background: var(--adv-row-alt); }
.adv-user:hover { background: var(--adv-row-hover); transition: background .1s; }

.adv-user__thumb { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--adv-thumb-bg); }
.adv-user__thumb span { font-size: .72rem; font-weight: 800; color: var(--adv-text-2); }
.adv-user__thumb--green { border-color: var(--adv-disp-success); }
.adv-user__thumb--yellow { border-color: #ecc94b; }
.adv-user__thumb--red { border-color: var(--adv-disp-busy); }
.adv-user__thumb--gray { border-color: var(--adv-text-3); }

.adv-user__info { min-width: 0; flex: 1; }
.adv-user__name { font-size: .88rem; font-weight: 600; color: var(--adv-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-user__badges { display: flex; gap: 5px; align-items: center; margin-top: 5px; }
.adv-user__badge { font-size: .64rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; line-height: 1.4; }
.adv-user__badge--green { background: rgba(72,187,120,.12); color: var(--adv-disp-success); }
.adv-user__badge--yellow { background: rgba(236,201,75,.14); color: #d69e2e; }
.adv-user__badge--gray { background: rgba(160,174,192,.14); color: var(--adv-text-3); }
.adv-user__camp { font-size: .66rem; color: var(--adv-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }

/* ── Scrollable timeline ── */
.adv-timeline-scroll { flex: 1; overflow-x: auto; overflow-y: auto; position: relative; background: var(--adv-live-bg); }
.adv-timeline-scroll::-webkit-scrollbar { height: 8px; }
.adv-timeline-scroll::-webkit-scrollbar-thumb { background: var(--adv-text-3); border-radius: 4px; opacity: .5; }

.adv-ruler { position: sticky; top: 0; z-index: 5; background: var(--adv-ruler-bg); border-bottom: 1px solid var(--adv-live-border); height: 36px; }
.adv-ruler__step { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--adv-grid-major); }
.adv-ruler__step--hour { border-left-color: var(--adv-text-3); opacity: .4; }
.adv-ruler__label { position: absolute; top: 10px; left: 5px; font-size: .74rem; font-weight: 500; color: var(--adv-text-3); white-space: nowrap; }
.adv-ruler__label--hour { font-weight: 700; color: var(--adv-text-2); }

/* ── Timeline row ── */
.adv-tl-row { position: relative; height: 72px; border-bottom: 1px solid var(--adv-grid-major); content-visibility: auto; contain-intrinsic-size: 72px; }
.adv-tl-row:nth-child(even) { background: var(--adv-row-alt); }

/* ── Session bars (individual calls) ── */
/* Phase 4 optimisation: no always-on transitions - they trigger GPU composite
   on every refresh even when nothing changes. Hover still animates via the
   pseudo-class which only runs when the user interacts. */
.adv-session { position: absolute; top: 6px; bottom: 6px; border-radius: 4px; overflow: hidden; cursor: pointer; }
.adv-session:hover { filter: brightness(1.08); z-index: 2; transition: filter .15s; }

/* Status colours - themed via --adv-disp-* so light/dark + org themes work */
.adv-session--default         { background: var(--adv-disp-default); }
.adv-session--success         { background: var(--adv-disp-success); }
.adv-session--not-interested  { background: var(--adv-disp-not-interested); }
.adv-session--busy            { background: var(--adv-disp-busy); }
.adv-session--callback        { background: var(--adv-disp-callback); }
.adv-session--private-redial  { background: var(--adv-disp-private-redial); }
.adv-session--unqualified     { background: var(--adv-disp-unqualified); }
.adv-session--invalid         { background: var(--adv-disp-invalid); }
.adv-session--voicemail       { background: var(--adv-disp-voicemail); }
/* Pause = agent var logget ind men gik ingen opkald; vises som grå blok
   mellem sessioner, label "Pause". Farven følger voicemail-grå, men
   detail-teksten differentierer dem klart for brugeren. */
.adv-session--pause {
    background: repeating-linear-gradient(45deg, var(--adv-disp-voicemail), var(--adv-disp-voicemail) 6px, rgba(0,0,0,0.08) 6px, rgba(0,0,0,0.08) 12px);
    opacity: .65;
}
[data-theme="dark"] .adv-session--pause { opacity: .55; }

.adv-session__details { padding: 4px 8px; font-size: .68rem; line-height: 1.3; color: #fff; overflow: hidden; }
.adv-session__details span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-session__details span:first-child { font-weight: 700; }
.adv-session__details span:last-child { opacity: .85; font-size: .6rem; }

/* Per-disposition text colour - reads the --adv-disp-<key>-text var that the
   palette settings modal writes. Falls back to #fff if not set so older
   localStorage palettes keep working. */
.adv-session--success         .adv-session__details { color: var(--adv-disp-success-text,         #fff); }
.adv-session--not-interested  .adv-session__details { color: var(--adv-disp-not-interested-text,  #fff); }
.adv-session--busy            .adv-session__details { color: var(--adv-disp-not-interested-text,  #fff); }
.adv-session--callback        .adv-session__details { color: var(--adv-disp-callback-text,        #fff); }
.adv-session--private-redial  .adv-session__details { color: var(--adv-disp-private-redial-text,  #fff); }
.adv-session--unqualified     .adv-session__details { color: var(--adv-disp-unqualified-text,     #1a1a1a); }
.adv-session--invalid         .adv-session__details { color: var(--adv-disp-invalid-text,         #fff); }
.adv-session--voicemail       .adv-session__details { color: var(--adv-disp-voicemail-text,       #fff); }
.adv-session--default         .adv-session__details { color: var(--adv-disp-default-text,         #fff); }

.adv-session__icon { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); font-size: .5rem; color: rgba(255,255,255,.6); }

/* Anomali-flag: blokken får gul outline + lille ⚠-badge. Pulserer diskret så
   lederen fanger det uden at hele tidslinjen skriger. Klik åbner session-detail
   med anomaly-note. Kriterier justeres i Live → Indstillinger → Anomalier. */
.adv-session--anomaly {
    outline: 2px solid rgba(245,158,11,0.85);
    outline-offset: -2px;
    animation: adv-anomaly-pulse 2.2s ease-in-out infinite;
    z-index: 2;
}
.adv-session--anomaly::after {
    /* FIX 2026-06-10 (audit css-design-1): emoji ⚠ erstattet med egen inline .ic-warn SVG-glyf
       (samme advarselstrekant som .ic-systemet). Cirklen er stadig badge-baggrunden;
       SVG'en tegnes som background-image ovenpå, glyf-fyld #1a1a1a for kontrast mod amber. */
    content: '';
    position: absolute;
    top: -4px; right: -4px;
    width: 14px; height: 14px;
    background: var(--amber, #f59e0b);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a1a1a'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px 9px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    pointer-events: none;
    z-index: 3;
}
@keyframes adv-anomaly-pulse {
    0%, 100% { outline-color: rgba(245,158,11,0.85); box-shadow: 0 0 0 0 rgba(245,158,11,0); }
    50%      { outline-color: rgba(245,158,11,1);    box-shadow: 0 0 8px 1px rgba(245,158,11,0.35); }
}
/* Meget smalle blokke (korte redials/no-answers) har ikke plads til både ikon og farve -
   skjul ikonet så blokken bliver et rent farve-kort. Klassen sættes fra JS når w < 22px. */
.adv-session--narrow .adv-session__icon { display: none; }

/* Prediction-indikator - integreret som subtil bund-linje der fylder til predict-rate
   i stedet for en tyk badge der bryder blokken op. Procent-tallet vises som et lille
   chip i øverste venstre hjørne (semi-transparent, så det læner sig ind i blokken).
   Fire niveauer: quiet (20-40), warm (40-60), good (60-80), hot (80+) - farve følger
   samme family som blokkens egen farve for at undgå visuel clash.

   Stregens bredde = procent (54% → fyldt 54% af blokken fra venstre), så brugeren kan
   aflæse tæt på 100% ved øjnene selvom tekst-label er udfalmet. */
.adv-session__predict {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto;
    height: 0; /* Elementet er nul-højde - ::before og ::after ligger oven på blokken via bottom:0 */
    pointer-events: none; z-index: 2;
}
.adv-session__predict::before {
    /* Bund-progress-bar - viser prognose-pct visuelt */
    content: '';
    position: absolute; left: 0; bottom: 0;
    height: 3px;
    width: var(--predict-pct, 0%);
    background: currentColor;
    opacity: .9;
    transition: width .4s ease, opacity .3s ease;
    border-top-right-radius: 2px;
}
/* Prognose-brødtekst som chip ved bunden af blokken - læsbar, truncates ved smalle blokke.
   Indhold: "Stærk prognose · 73%" / "Ser lovende ud · 62%" / "Usikker · 48%" / "Lav sandsynlighed · 22%"
   Backdrop-blur gør at chippen stadig respekterer blokkens status-farve som baggrund. */
.adv-session__predict::after {
    content: attr(data-label);
    position: absolute; left: 6px; right: 6px; bottom: 6px;
    width: fit-content; max-width: calc(100% - 12px);
    font-size: .58rem; font-weight: 700;
    padding: 2px 7px; border-radius: 4px;
    color: rgba(255,255,255,.96);
    background: rgba(0,0,0,.42);
    letter-spacing: .02em;
    line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
/* Farver pr. niveau - currentColor styrer fyldstribens farve; background-override
   på ::after-chippen lader værdien stå tydeligt uden at dominere. */
.adv-session__predict--quiet   { color: rgba(148,160,180,.65); }
.adv-session__predict--warm    { color: rgba(245,158,11,.82); }
.adv-session__predict--good    { color: rgba(16,185,129,.85); }
.adv-session__predict--hot     { color: rgba(239,68,68,.9); }
.adv-session__predict--pending { color: rgba(148,160,180,.5); }
.adv-session__predict--clickable:hover::after { background: rgba(0,0,0,.6); transform: translateY(-1px); transition: all .15s; }

/* Kompakt variant - kun "43%" på smalle blokke (w 30-60px).
   Chippen centreres og har mindre padding så den stadig er aflæselig. */
.adv-session__predict--compact::after {
    left: 2px; right: 2px; bottom: 3px;
    padding: 2px 5px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-align: center;
    width: auto;
    max-width: calc(100% - 4px);
    background: rgba(0,0,0,.58);
    color: #fff;
}
.adv-session__predict--compact::before {
    /* Skjul fyld-stribe på kompakte chips - der er ikke plads til både stribe og tekst */
    display: none;
}

/* Phoner-prognose-badge ved siden af navn + status-badge - klikbar, åbner modal med breakdown */
.adv-user__prognose {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .55rem;
    font-weight: 800;
    font-family: var(--font-mono);font-variant-numeric:tabular-nums;
    letter-spacing: .02em;
    cursor: pointer;
    margin-left: 4px;
    transition: transform .1s ease, filter .1s ease;
    white-space: nowrap;
}
.adv-user__prognose:hover { transform: translateY(-1px); filter: brightness(1.15); }
.adv-user__prognose--hot   { background: rgba(239,68,68,.18); color: #fca5a5; }
.adv-user__prognose--good  { background: rgba(16,185,129,.18); color: #6ee7b7; }
.adv-user__prognose--warm  { background: rgba(245,158,11,.18); color: #fcd34d; }
.adv-user__prognose--quiet { background: rgba(148,160,180,.15); color: rgba(203,213,225,.7); }

/* Kampagne-tjek-badge - rød (hard) eller gul (soft), klikbar for at se detaljer */
.adv-user__campcheck {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    margin-left: 4px;
    transition: transform .1s ease, filter .1s ease;
    white-space: nowrap;
}
.adv-user__campcheck:hover { transform: translateY(-1px); filter: brightness(1.15); }
.adv-user__campcheck--hard {
    background: rgba(239,68,68,.20);
    color: #fca5a5;
    animation: adv-campcheck-pulse 2.4s ease-in-out infinite;
}
.adv-user__campcheck--soft {
    background: rgba(245,158,11,.18);
    color: #fcd34d;
}
@keyframes adv-campcheck-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    50%     { box-shadow: 0 0 0 3px rgba(239,68,68,.25); }
}

/* Live-blok på forkert kampagne - rød outline (adskilt fra anomaly's gule) */
.adv-session--wrongcamp {
    outline: 2px solid rgba(239,68,68,0.85);
    outline-offset: -2px;
    z-index: 2;
}
.adv-session--wrongcamp::before {
    /* FIX 2026-06-10 (audit css-design-2): emoji 🚫 erstattet med egen inline "forbudt"-SVG
       (cirkel-med-skråstreg) i samme stil som .ic-systemet. Rød badge-baggrund bevares;
       glyf-fyld #fff for kontrast mod rød. */
    content: '';
    position: absolute;
    top: -5px; left: -5px;
    width: 15px; height: 15px;
    background: var(--red,#ef4444);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    pointer-events: none;
    z-index: 3;
}
[data-theme="dark"] .adv-user__prognose--hot   { color: #ef4444; }
[data-theme="dark"] .adv-user__prognose--good  { color: #10b981; }
.adv-session__predict--pending::after { background: rgba(255,255,255,.08); color: rgba(255,255,255,.55); font-weight: 600; letter-spacing: .1em; }
.adv-session__predict--hot::before { box-shadow: 0 0 10px rgba(239,68,68,.55); animation: adv-predict-hot 1.8s ease-in-out infinite; }
.adv-session__predict--hot::after  { background: rgba(239,68,68,.65); color: #fff; animation: adv-predict-hot-chip 1.8s ease-in-out infinite; }
@keyframes adv-predict-hot {
    0%,100% { opacity: .85; }
    50%     { opacity: 1; box-shadow: 0 0 16px rgba(239,68,68,.75); }
}
@keyframes adv-predict-hot-chip {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.06); }
}

/* ── Ongoing-blok: gradvis grøn wash der afspejler prognose-sandsynlighed.
   --predict-rate sættes af JS (0-1). Overlay er semi-transparent så "Igang"-
   teksten stadig er læselig og det er klart at det IKKE er en bekræftet salg. */
.adv-session--ongoing {
    position: relative;
    overflow: hidden;
}
.adv-session--ongoing::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--adv-disp-success);
    /* Minimum .35 opacity så ongoing-blokke ALTID har synlig grøn wash,
       uanset om phonerPrediction er beregnet endnu. Skalerer op mod .85 ved høj rate. */
    opacity: calc(0.35 + var(--predict-rate, 0) * 0.5);
    pointer-events: none;
    z-index: 0;
    transition: opacity .6s ease;
}
.adv-session--ongoing .adv-session__details,
.adv-session--ongoing .adv-session__icon {
    position: relative;
    z-index: 1;
}
/* Predict skal bevare position:absolute (left/right/bottom = placeringsanker for chippen).
   z-index alene er nok til at holde den oven på ::before-washen. */
.adv-session--ongoing .adv-session__predict {
    z-index: 2;
}
.adv-session--ongoing[data-predict-level="hot"] {
    animation: adv-ongoing-hot 2s ease-in-out infinite;
}
@keyframes adv-ongoing-hot {
    0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
    50%     { box-shadow: 0 0 18px 2px rgba(16,185,129,.35); }
}

/* ── Level-indikator på ALLE blokke (ikke kun ongoing) ──
   Tydelig inset-border så phoner-prognosen kan aflæses uanset blokkens
   disposition-farve. Box-shadow respekterer border-radius automatisk. */
.adv-session[data-predict-level="hot"]   { box-shadow: inset 0 0 0 2px rgba(239,68,68,.95),   0 0 10px rgba(239,68,68,.35); }
.adv-session[data-predict-level="good"]  { box-shadow: inset 0 0 0 2px rgba(16,185,129,.95),  0 0 8px rgba(16,185,129,.3); }
.adv-session[data-predict-level="warm"]  { box-shadow: inset 0 0 0 2px rgba(245,158,11,.95),  0 0 6px rgba(245,158,11,.22); }
.adv-session[data-predict-level="quiet"] { box-shadow: inset 0 0 0 2px rgba(148,160,180,.75); }
/* Bevar inset-border under hover (filter alene ændrer ikke shadow) */
.adv-session[data-predict-level]:hover { filter: brightness(1.12); }
/* Smalle blokke: tynd 1px inset så de ikke bliver "alt border" */
.adv-session--narrow[data-predict-level="hot"]   { box-shadow: inset 0 0 0 1px rgba(239,68,68,.9); }
.adv-session--narrow[data-predict-level="good"]  { box-shadow: inset 0 0 0 1px rgba(16,185,129,.9); }
.adv-session--narrow[data-predict-level="warm"]  { box-shadow: inset 0 0 0 1px rgba(245,158,11,.9); }
.adv-session--narrow[data-predict-level="quiet"] { box-shadow: inset 0 0 0 1px rgba(148,160,180,.7); }

/* ── Now marker ── */
.adv-now { position: absolute; top: 0; bottom: 0; width: 2px; background: #e53e3e; z-index: 20; pointer-events: none; }
.adv-now::before { content: 'Live'; position: absolute; top: -18px; left: -14px; font-size: .5rem; font-weight: 700; color: #e53e3e; background: var(--adv-live-bg); padding: 1px 4px; border-radius: 3px; border: 1px solid #e53e3e; }

/* ── Grid lines ── */
.adv-grid-line { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--adv-grid-minor); pointer-events: none; opacity: .4; }
.adv-grid-line--hour { border-left-color: var(--adv-grid-major); opacity: .8; }