/* ═══════════════════════════════════════════════════════
   OKTA JOURNEY MAP — CSS  (v2 — matched to reference)
   ═══════════════════════════════════════════════════════ */

:root {
    /* ── Okta Brand Palette ── */
    --okta-deep-navy: #0A0B26;
    --okta-electric-blue: #4114FF;
    --okta-ether-blue: #8A84FF;
    --okta-shell: #E5E0D8;
    --okta-solar: #FF6B22;

    /* ── Semantic Tokens ── */
    --okta-bg: var(--okta-deep-navy);
    --okta-surface: rgba(10, 11, 38, 0.85);
    --okta-border: rgba(138, 132, 255, 0.18);
    --okta-text: var(--okta-shell);
    --okta-text-dim: rgba(229, 224, 216, 0.7);
    --okta-text-muted: rgba(229, 224, 216, 0.45);

    /* ── Column accent strip colors ── */
    --col-pre: var(--okta-ether-blue);
    --col-aware: var(--okta-electric-blue);
    --col-eval: #6C3AFF;
    --col-select: var(--okta-ether-blue);
    --col-adopt: var(--okta-solar);
    --col-renew: #FF9F59;

    --persona-biz: #48C9B0;
    --persona-tech: #4A90E2;
    --persona-dev: #8E44AD;
    --persona-sec: #F4D03F;
    --persona-itsec: #F39C12;

    --fp-blue: var(--okta-ether-blue);

    --row-label-w: 48px;
    --sub-label-w: 90px;
    --okta-doc-accent: #8B5CF6;
    /* Violet/Indigo for Documentation */
}

/* ═══════════ WRAPPER ═══════════ */
.okta-journey {
    width: 100%;
    min-width: 1300px;
    margin: 1.2rem 0 2rem;
    font-family: 'Inter', -apple-system, sans-serif;
    animation: fadeSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
    position: relative;
}

/* ═══════════ COLUMN HEADERS ═══════════ */
.okta-col-headers {
    display: grid;
    /* spacer for row-label + sub-label, then 6 data cols */
    grid-template-columns: calc(var(--row-label-w) + var(--sub-label-w)) repeat(6, 1fr);
    gap: 4px;
    margin-bottom: 2px;
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 11, 38, 0.35);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    padding: 8px 0 18px;
    /* extra bottom padding to give the badges space */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

/* ═══════════ EMBEDDED TRANSITION BADGES ═══════════ */
/* Each badge sits inside its col-header div, absolutely positioned
   at the LEFT edge. translateX(-50%) centres it exactly on the column boundary. */
.col-transition-badge {
    position: absolute;
    bottom: -12px;
    /* hang below the col-header pill */
    left: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 101;
    pointer-events: auto;
    cursor: pointer;
    white-space: nowrap;
}

.ctb-line {
    display: block;
    height: 1px;
    width: 18px;
    border-radius: 1px;
    opacity: 0.5;
    /* color set per tier via parent class */
    background: currentColor;
}

.ctb-chevron {
    width: 7px;
    height: 9px;
    flex-shrink: 0;
    opacity: 0.75;
}

/* Score bubble */
.ctb-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(10, 11, 38, 0.85);
    border: 1px solid currentColor;
    box-shadow: 0 0 10px -2px currentColor;
    /* glow matches tier color */
}

/* Score tiers — color cascades to all children via currentColor */
.col-transition-badge.ts-high {
    color: #4ADE80;
}

.col-transition-badge.ts-medium {
    color: #FFB347;
}

.col-transition-badge.ts-low {
    color: #FF6B6B;
}

.col-transition-badge:hover .ctb-score {
    box-shadow: 0 0 16px -2px currentColor;
    transform: scale(1.08);
}

.col-transition-badge:hover .ctb-line {
    width: 22px;
    opacity: 0.75;
}




.okta-col-header {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 0.55rem 0.4rem;
    text-align: center;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--okta-shell);
    position: relative;
    overflow: visible;
}

.okta-col-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 10px 10px 0 0;
}

.okta-col-header:nth-child(2)::before {
    background: var(--col-pre);
}

.okta-col-header:nth-child(2).hover-bg-active {
    background: color-mix(in srgb, var(--col-pre) 15%, rgba(255, 255, 255, 0.02));
    border-color: color-mix(in srgb, var(--col-pre) 40%, rgba(255, 255, 255, 0.1));
}

.okta-col-header:nth-child(3)::before {
    background: var(--col-aware);
}

.okta-col-header:nth-child(3).hover-bg-active {
    background: color-mix(in srgb, var(--col-aware) 15%, rgba(255, 255, 255, 0.02));
    border-color: color-mix(in srgb, var(--col-aware) 40%, rgba(255, 255, 255, 0.1));
}

.okta-col-header:nth-child(4)::before {
    background: var(--col-eval);
}

.okta-col-header:nth-child(4).hover-bg-active {
    background: color-mix(in srgb, var(--col-eval) 15%, rgba(255, 255, 255, 0.02));
    border-color: color-mix(in srgb, var(--col-eval) 40%, rgba(255, 255, 255, 0.1));
}

.okta-col-header:nth-child(5)::before {
    background: var(--col-select);
}

.okta-col-header:nth-child(5).hover-bg-active {
    background: color-mix(in srgb, var(--col-select) 15%, rgba(255, 255, 255, 0.02));
    border-color: color-mix(in srgb, var(--col-select) 40%, rgba(255, 255, 255, 0.1));
}

.okta-col-header:nth-child(6)::before {
    background: var(--col-adopt);
}

.okta-col-header:nth-child(6).hover-bg-active {
    background: color-mix(in srgb, var(--col-adopt) 15%, rgba(255, 255, 255, 0.02));
    border-color: color-mix(in srgb, var(--col-adopt) 40%, rgba(255, 255, 255, 0.1));
}

.okta-col-header:nth-child(7)::before {
    background: var(--col-renew);
}

.okta-col-header:nth-child(7).hover-bg-active {
    background: color-mix(in srgb, var(--col-renew) 15%, rgba(255, 255, 255, 0.02));
    border-color: color-mix(in srgb, var(--col-renew) 40%, rgba(255, 255, 255, 0.1));
}

/* ═══════════ MAIN BODY ═══════════ */
.okta-body {
    display: flex;
    border: 1px solid rgba(138, 132, 255, 0.15);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(10, 11, 38, 0.65);
    backdrop-filter: blur(16px);
    box-shadow:
        0 0 0 1px rgba(138, 132, 255, 0.06) inset,
        0 20px 80px -15px rgba(65, 20, 255, 0.15);
}

/* ═══════════ ROW LABELS (THINK / DO / FEEL) ═══════════ */
.okta-row-wrapper {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid var(--okta-border);
}

.okta-row-wrapper:last-child {
    border-bottom: none;
}

.okta-row-label {
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    width: var(--row-label-w);
    flex-shrink: 0;
    border-right: 1px solid var(--okta-border);
    padding: 0.5rem 0;
}

.okta-row-label.think-label {
    color: var(--okta-ether-blue);
    background: linear-gradient(180deg, rgba(138, 132, 255, 0.08), rgba(138, 132, 255, 0.02));
}

.okta-row-label.do-label {
    color: var(--okta-electric-blue);
    background: linear-gradient(180deg, rgba(65, 20, 255, 0.1), rgba(65, 20, 255, 0.02));
    text-shadow: 0 0 18px rgba(65, 20, 255, 0.3);
}

.okta-row-label.feel-row {
    color: var(--okta-solar);
    background: linear-gradient(180deg, rgba(255, 107, 34, 0.08), rgba(255, 107, 34, 0.02));
    text-shadow: 0 0 18px rgba(255, 107, 34, 0.3);
}

.okta-row-label.doc-label {
    color: var(--okta-doc-accent);
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.02));
    text-shadow: 0 0 18px rgba(139, 92, 246, 0.3);
}

/* ═══════════ CONTENT AREA ═══════════ */
.okta-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ═══════════ THINK SECTION ═══════════ */
.okta-think {
    flex: 1;
    min-width: 0;
}

.think-sub-row {
    display: grid;
    /* Sub-label + 6 data columns */
    grid-template-columns: var(--sub-label-w) repeat(6, 1fr);
    border-bottom: 1px solid rgba(100, 116, 139, 0.12);
    position: relative;
    /* Essential to establish stacking context above the flow-col backgrounds */
    z-index: 10;
}

.think-sub-row:last-child {
    border-bottom: none;
}

.think-row-label {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.45rem;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--okta-text-muted);
    border-right: 1px solid rgba(100, 116, 139, 0.1);
    line-height: 1.3;
}

.think-cell {
    padding: 0.4rem 0.5rem;
    font-size: 0.58rem;
    line-height: 1.45;
    color: var(--okta-text-dim);
    border-right: 1px solid rgba(100, 116, 139, 0.1);
}

.think-cell:last-child {
    border-right: none;
}

/* ── Buyer Mindset formatting & Tooltip ── */
.think-cell.buyer-mindset {
    font-size: 0.72rem;
    /* Larger font size as requested */
    font-weight: 600;
    color: var(--okta-text);
    /* Brighter text color for emphasis */
    position: relative;
    cursor: default;
    /* Indicate it's interactive */
    pointer-events: auto !important;
    /* Force hover reception despite JS column overlays */
    /* Ensure flex context to center if needed, or keep block */
    display: flex;
    align-items: center;
}

.think-cell.buyer-mindset::after {
    content: attr(data-full-text);
    position: absolute;
    bottom: 105%;
    /* Position above */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #0f172a;
    /* Slate 900 for modern dark tooltip */
    border: 1px solid rgba(138, 132, 255, 0.4);
    /* Ether blue tint */
    color: #f8fafc;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    width: 240px;
    /* Width of the tooltip */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.4s;
    /* Smooth pop with delay */
    z-index: 100;
    pointer-events: none;
    text-align: left;
}

.think-cell.buyer-mindset:hover {
    z-index: 100;
    /* Pop the whole cell up so tooltip is above siblings */
}

.think-cell.buyer-mindset:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ═══════════ DO SECTION ═══════════ */
.okta-do {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: var(--sub-label-w) 1fr;
}

/* Sub-labels column for DO (BEHAVIOR, PRIMARY DRIVING PERSONA) */
.do-sub-label {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.45rem;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--okta-text-muted);
    border-right: 1px solid rgba(100, 116, 139, 0.1);
    line-height: 1.3;
    border-bottom: 1px solid rgba(100, 116, 139, 0.12);
}

.do-sub-label:last-of-type {
    border-bottom: none;
}

.do-main-area {
    border-bottom: 1px solid rgba(100, 116, 139, 0.12);
    padding: 2.8rem 1.5rem;
}

/* ── Fingerprint Legend ── */
.fp-legend {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    font-size: 0.5rem;
    color: var(--okta-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.fp-legend .fp-badge-inline {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--fp-blue);
    background: rgba(59, 89, 152, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fp-legend .fp-badge-inline svg {
    width: 9px;
    height: 9px;
    fill: var(--fp-blue);
}

/* ── Flowchart — 3 Lane Grid Layout ── */
.do-flowchart {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.4rem;
    width: 100%;
    padding: 0.5rem 0;
    align-items: stretch;
}

/* Each stage group — 3 vertical lanes */
.flow-col {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0.25rem;
    padding: 0;
    position: relative;
    border-radius: 12px;
    transition: background-color 0.3s ease;
}

/* Invisible hit-area extending into parent padding so hover works on margins */
.flow-col::after {
    content: '';
    position: absolute;
    top: -2.8rem;
    bottom: -2.8rem;
    left: 0;
    right: 0;
    z-index: 0;
    /* Behind the nodes so they can still receive hover events */
}

/* Base style for the hover background GIF layer */
.flow-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 0;
    /* Behind the lanes and nodes */
    transition: opacity 0.3s ease;
    border-radius: 12px;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Activate the GIF visibility on hover */
.flow-col.hover-bg-active::before {
    opacity: 0.25;
    /* Subtle opacity so text is still readable */
}

/* Ensure the grid content sits above the background */
.flow-col .lane {
    position: relative;
    z-index: 1;
}

/* Specific GIF for Pre-Awareness (index 0) */
.flow-col:nth-child(1)::before {
    /* User-provided background GIF for Pre-Awareness */
    background-image: url('okta-pre-auth-bg.gif');
}

/* Specific GIF for Awareness (index 1) */
.flow-col:nth-child(2)::before {
    background-image: url('journeygifawarness.gif');
}

/* Specific GIF for Evaluation (index 2) */
.flow-col:nth-child(3)::before {
    background-image: url('journeygifevaluation.gif');
}

/* Documentation Section Styles */
.okta-doc {
    flex: 1;
    min-width: 0;
}

.doc-sub-row {
    display: grid;
    grid-template-columns: var(--sub-label-w) repeat(6, 1fr);
    position: relative;
    z-index: 10;
}

.doc-row-label {
    display: flex;
    align-items: center;
    padding: 0.8rem 0.45rem;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--okta-text-muted);
    border-right: 1px solid rgba(138, 132, 255, 0.1);
    line-height: 1.3;
}

.doc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.2rem 0.8rem;
    background: rgba(255, 255, 255, 0.02);
    border-right: 1px solid rgba(138, 132, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-align: center;
    min-height: 120px;
}

.doc-item:last-child {
    border-right: none;
}

.doc-item:hover {
    background: rgba(139, 92, 246, 0.06);
    border-color: rgba(139, 92, 246, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
}

.doc-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 8px;
    color: var(--okta-doc-accent);
}

.doc-icon svg {
    width: 18px;
    height: 18px;
}

.doc-name {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--okta-text-dim);
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Specific GIF for Selection (index 3) */
.flow-col:nth-child(4)::before {
    background-image: url('journeygifsadoption2.gif?v=3');
}

/* Specific GIF for Adoption (index 4) */
.flow-col:nth-child(5)::before {
    background-image: url('journeygifadoption.gif?v=3');
}

/* Specific GIF for Renewal (index 5) */
.flow-col:nth-child(6)::before {
    background-image: url('journeygifrenewal.gif?v=3');
}

/* Individual horizontal lanes within a column (upper, middle, bottom) */
.lane {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: 0.25rem;
    min-height: 38px;
    width: 100%;
}

/* Standard node — glassmorphism pill */
.journey-node {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(138, 132, 255, 0.18);
    border-radius: 2rem;
    padding: 0.4rem 0.45rem;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    color: var(--okta-text);
    line-height: 1.25;
    width: 100%;
    max-width: 130px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: default;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.02em;
    z-index: 20;
    /* Keep high so tooltips and hovers work above the background hit-box */
    box-shadow: 0 2px 10px -3px rgba(0, 0, 0, 0.25);
}

.journey-node.start-node {
    background: rgba(255, 107, 34, 0.12);
    /* Very light orange tint */
    border-color: rgba(255, 107, 34, 0.35);
}

.journey-node:hover {
    border-color: rgba(138, 132, 255, 0.45);
    background: rgba(138, 132, 255, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -6px rgba(65, 20, 255, 0.25);
}

/* Action node — electric blue filled */
.journey-node.action-node {
    background: var(--okta-electric-blue);
    border-color: rgba(138, 132, 255, 0.4);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 18px -4px rgba(65, 20, 255, 0.45);
}

.journey-node.action-node:hover {
    border-color: var(--okta-ether-blue);
    background: #4F24FF;
    box-shadow: 0 8px 30px -6px rgba(65, 20, 255, 0.7);
}

/* Fingerprint badge — large & prominent */
.fp-badge {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2.5px solid var(--fp-blue);
    background: rgba(59, 89, 152, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.fp-badge.top-right {
    top: -4px;
    right: -4px;
}

.fp-badge.bottom-right {
    bottom: -4px;
    right: -4px;
}

.fp-badge svg {
    width: 15px;
    height: 15px;
    fill: var(--fp-blue);
}

/* ═══════════ PERSONA TIMELINES ═══════════ */
.persona-area {
    padding: 0.5rem 0.5rem;
}

.persona-legend {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.persona-legend-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.48rem;
    color: var(--okta-text-dim);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.persona-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Track layout: 6 columns */
.persona-track-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    margin-bottom: 0.3rem;
    align-items: center;
}

.persona-track-label {
    font-size: 0.52rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--okta-text-muted);
    text-align: center;
}

.persona-col {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    /* Slightly wider gap for taller boxes */
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Ensure container takes full height for vertical centering */
}

.persona-bar {
    height: 32px;
    /* Increased height for 2 rows */
    border-radius: 4px;
    /* Slightly rounder to match larger height */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.44rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: rgba(0, 0, 0, 0.75);
    white-space: normal;
    /* Allow text to wrap */
    text-align: center;
    line-height: 1.1;
    /* Tighter line height for the tiny text */
    overflow: hidden;
    padding: 2px 3px;
    flex: 1;
    min-width: 24px;
    transition: all 0.3s ease;
}

.persona-bar:hover {
    filter: brightness(1.15);
    transform: scaleY(1.15);
}

.persona-bar.biz {
    background: var(--persona-biz);
}

.persona-bar.tech {
    background: var(--persona-tech);
    color: rgba(255, 255, 255, 0.9);
}

.persona-bar.dev {
    background: var(--persona-dev);
    color: rgba(255, 255, 255, 0.9);
}

.persona-bar.sec {
    background: var(--persona-sec);
}

.persona-bar.itsec {
    background: var(--persona-itsec);
}

/* ═══════════ FEEL SECTION ═══════════ */
.okta-feel {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: var(--sub-label-w) 1fr;
}

.feel-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.3rem;
    border-right: 1px solid rgba(100, 116, 139, 0.1);
}

.feel-y-label {
    font-size: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.feel-y-label.positive {
    color: var(--okta-shell);
}

.feel-y-label.negative {
    color: var(--okta-solar);
}

.feel-y-title {
    font-size: 0.52rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--okta-text-muted);
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.feel-data-area {
    padding: 0.6rem 0.5rem 0.8rem;
    position: relative;
}

.feel-curve-svg {
    width: 100%;
    height: 140px;
    display: block;
}

.feel-labels {
    position: relative;
    height: 80px;
    margin-top: 0.3rem;
}

.feel-label {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.1rem;
    max-width: 110px;
    z-index: 50;
    /* Base z-index */
}

/* Invisible hover area extending upwards to cover the graph data point */
.feel-label::before {
    content: '';
    position: absolute;
    bottom: 0;
    /* Starts from bottom of label */
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    /* Wide enough to catch point hovers and account for alignment offsets */
    height: 180px;
    /* Tall enough to cover the SVG above it */
    z-index: 10;
}

.feel-emotion {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.feel-emotion.positive {
    color: var(--okta-shell);
}

.feel-emotion.negative {
    color: var(--okta-solar);
}

.feel-emotion.neutral {
    color: var(--okta-shell);
}

.feel-emotion.mixed {
    color: var(--okta-shell);
}

.feel-desc {
    font-size: 0.42rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.15rem;
}

/* ── Interactive Social Tooltips ── */
.social-tooltip {
    position: absolute;
    bottom: calc(100% + 5px);
    /* Lift above the text label */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 220px;
    background: rgba(15, 23, 42, 0.85);
    /* Slate 900 base */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
    color: #f8fafc;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.4s;
    z-index: 100;
    text-align: left;
    pointer-events: none;
}

/* Connector arrow */
.social-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(15, 23, 42, 0.95);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Edge Case Positioning for Tooltips */
.social-tooltip.tooltip-right {
    left: auto;
    right: -20px;
    transform: translateY(10px);
}

.feel-label:hover .social-tooltip.tooltip-right {
    transform: translateY(0);
}

.social-tooltip.tooltip-right::after {
    left: auto;
    right: 55px;
    /* Adjusting the arrow to still point at the dot */
    transform: translateX(50%) rotate(45deg);
}

.feel-label:hover {
    z-index: 110;
}

.feel-label:hover .social-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.social-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.social-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* Persona Avatars */
.dev-avatar {
    background-image: url('avatar_sarah.png');
}

.tech-avatar {
    background-image: url('avatar_marcus.png');
}

.biz-avatar {
    background-image: url('avatar_elena.png');
}

.sec-avatar {
    background-image: url('avatar_david.png');
}

.social-user {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.social-name {
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.social-handle {
    font-size: 0.5rem;
    color: #94a3b8;
}

.social-time {
    font-size: 0.5rem;
    color: #64748b;
}

.social-body {
    font-size: 0.58rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
    font-weight: 400;
    white-space: normal;
    /* Override parent white-space if needed */
}

.social-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    font-size: 0.55rem;
    font-weight: 500;
}

.social-footer span {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: color 0.2s;
}

.social-footer span:hover {
    color: #fff;
}

/* ═══════════ ENTRANCE ANIMATIONS ═══════════ */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.journey-node {
    opacity: 0;
    animation: nodeReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes nodeReveal {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.do-col:nth-child(1) .journey-node {
    animation-delay: 0.3s;
}

.do-col:nth-child(2) .journey-node {
    animation-delay: 0.5s;
}

.do-col:nth-child(3) .journey-node {
    animation-delay: 0.7s;
}

.do-col:nth-child(4) .journey-node {
    animation-delay: 0.9s;
}

.do-col:nth-child(5) .journey-node {
    animation-delay: 1.1s;
}

.do-col:nth-child(6) .journey-node {
    animation-delay: 1.3s;
}

.persona-bar {
    opacity: 0;
    animation: barSlide 0.4s ease forwards;
    animation-delay: 1.2s;
}

@keyframes barSlide {
    from {
        opacity: 0;
        transform: scaleX(0);
        transform-origin: left;
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

.feel-point {
    opacity: 0;
    animation: fadeSlideUp 0.5s ease forwards;
}

.feel-point:nth-child(1) {
    animation-delay: 1.4s;
}

.feel-point:nth-child(2) {
    animation-delay: 1.5s;
}

.feel-point:nth-child(3) {
    animation-delay: 1.6s;
}

.feel-point:nth-child(4) {
    animation-delay: 1.7s;
}

.feel-point:nth-child(5) {
    animation-delay: 1.8s;
}

.feel-point:nth-child(6) {
    animation-delay: 1.9s;
}

/* ═══════════════════════════════════════════════════════
   PERSONA POPUP — Liquid Glass Effect
   ═══════════════════════════════════════════════════════ */

/* ── Overlay ── */
.persona-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(4, 4, 20, 0.40);
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.persona-popup-overlay.active {
    display: flex;
    animation: popupOverlayIn 0.35s ease forwards;
}

@keyframes popupOverlayIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── Card Shell ── */
.persona-popup-card {
    position: relative;
    width: 96vw;
    max-width: 1440px;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 28px;
    padding: 2.2rem 2.5rem 2rem;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--okta-text);

    /* ── Liquid Glass layers ── */
    background:
        linear-gradient(135deg,
            rgba(138, 132, 255, 0.06) 0%,
            rgba(138, 132, 255, 0.05) 30%,
            rgba(65, 20, 255, 0.04) 60%,
            rgba(255, 107, 34, 0.03) 100%),
        rgba(12, 14, 42, 0.42);
    backdrop-filter: blur(32px) saturate(160%);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
    border: 1.2px solid rgba(138, 132, 255, 0.22);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 40px 120px -20px rgba(0, 0, 0, 0.55),
        0 0 80px -10px rgba(65, 20, 255, 0.12);

    animation: popupCardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes popupCardIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(30px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Iridescent shimmer sweep */
.persona-popup-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: linear-gradient(105deg,
            transparent 38%,
            rgba(138, 132, 255, 0.03) 42%,
            rgba(138, 132, 255, 0.025) 48%,
            rgba(255, 107, 34, 0.015) 52%,
            transparent 56%);
    background-size: 250% 100%;
    animation: shimmerSweep 10s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes shimmerSweep {

    0%,
    100% {
        background-position: 200% 0;
    }

    50% {
        background-position: -50% 0;
    }
}

/* Scrollbar */
.persona-popup-card::-webkit-scrollbar {
    width: 5px;
}

.persona-popup-card::-webkit-scrollbar-track {
    background: transparent;
}

.persona-popup-card::-webkit-scrollbar-thumb {
    background: rgba(138, 132, 255, 0.25);
    border-radius: 10px;
}

/* ── Close button ── */
.persona-popup-close {
    position: sticky;
    top: 0;
    float: right;
    z-index: 10;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(138, 132, 255, 0.3);
    border-radius: 50%;
    background: rgba(12, 14, 42, 0.55);
    backdrop-filter: blur(12px);
    color: var(--okta-shell);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.persona-popup-close:hover {
    background: rgba(138, 132, 255, 0.2);
    border-color: rgba(138, 132, 255, 0.55);
    transform: rotate(90deg) scale(1.1);
}

/* ── Hero: Photo + Chat side-by-side ── */
.persona-hero {
    display: grid;
    grid-template-columns: 1fr 2.2fr;
    gap: 1.4rem;
    margin-bottom: 1.4rem;
    align-items: stretch;
}

.persona-hero-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: rgba(138, 132, 255, 0.04);
    border: 1px solid rgba(138, 132, 255, 0.12);
    border-radius: 18px;
    gap: 0.5rem;
}

.persona-hero-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 2.5px solid rgba(255, 107, 34, 0.5);
    box-shadow: 0 8px 32px -8px rgba(255, 107, 34, 0.35);
    margin-bottom: 0.3rem;
}

.persona-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.persona-hero-identity .persona-popup-eyebrow {
    font-size: 0.48rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--okta-ether-blue);
    opacity: 0.8;
}

.persona-hero-identity .persona-popup-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--okta-shell);
    line-height: 1.1;
}

.persona-hero-role {
    font-size: 0.55rem;
    color: var(--okta-text-muted);
    font-weight: 500;
}

.persona-hero-status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.48rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #FF6B22;
    margin-top: 0.3rem;
}

.chat-status-dot-inline {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FF6B22;
    display: inline-block;
    animation: statusPulse 2s ease-in-out infinite;
}

/* ── Body 3-column grid ── */
.persona-popup-body {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 1.4rem;
    position: relative;
    z-index: 1;
}

/* ── Glass column panels ── */
.persona-popup-col {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(138, 132, 255, 0.15);
    border-radius: 18px;
    padding: 1.3rem 1.1rem;
    position: relative;
    overflow: hidden;
}

/* Subtle inner glow */
.persona-popup-col::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    pointer-events: none;
}

/* ── Section titles ── */
.persona-popup-section-title {
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--okta-ether-blue);
    margin: 0 0 0.9rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(138, 132, 255, 0.15);
}

.persona-popup-subtitle {
    font-weight: 400;
    font-size: 0.68rem;
    text-transform: none;
    color: var(--okta-text-muted);
    letter-spacing: 0;
}

/* ── Subsection titles (h4) ── */
.persona-popup-subsection {
    margin-bottom: 1rem;
}

.persona-popup-subsection:last-child {
    margin-bottom: 0;
}

.persona-popup-subsection h4 {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--okta-shell);
    margin: 0 0 0.4rem;
    opacity: 0.9;
}

.persona-popup-subsection p {
    font-size: 0.62rem;
    line-height: 1.55;
    color: var(--okta-text-dim);
    margin: 0 0 0.3rem;
}

.persona-popup-subsection p strong {
    color: var(--okta-shell);
    font-weight: 700;
}

.persona-popup-subsection ul {
    margin: 0;
    padding-left: 1rem;
    list-style: none;
}

.persona-popup-subsection ul li {
    font-size: 0.58rem;
    line-height: 1.5;
    color: var(--okta-text-dim);
    margin-bottom: 0.2rem;
    position: relative;
}

.persona-popup-subsection ul li::before {
    content: '▸';
    position: absolute;
    left: -0.85rem;
    color: var(--okta-ether-blue);
    font-size: 0.55rem;
}

/* ── Mindset Grid ── */
.persona-mindset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

.mindset-col {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(138, 132, 255, 0.1);
    border-radius: 10px;
    padding: 0.4rem 0.5rem;
}

.mindset-col ul li {
    font-size: 0.6rem;
    line-height: 1.45;
    margin-bottom: 0.2rem;
}

.mindset-col-header {
    font-size: 0.52rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--okta-ether-blue);
    margin-bottom: 0.25rem;
    text-align: center;
}

/* ── Org Chart ── */
.persona-org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.org-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.65rem;
    border-radius: 2rem;
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 1px solid rgba(138, 132, 255, 0.18);
    background: rgba(255, 255, 255, 0.03);
    color: var(--okta-text-dim);
}

.org-node.org-ceo {
    background: var(--okta-solar);
    color: rgba(0, 0, 0, 0.85);
    border-color: var(--okta-solar);
    font-size: 0.6rem;
}

.org-node.org-highlight {
    border-color: var(--okta-ether-blue);
    background: rgba(138, 132, 255, 0.1);
    color: var(--okta-ether-blue);
}

.org-node.org-sub {
    font-size: 0.48rem;
    opacity: 0.6;
}

.org-level2,
.org-level3 {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Objectives Grid ── */
.objectives-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

/* .objectives-col */

.objectives-header {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    padding: 0.3rem;
    border-radius: 6px;
    margin-bottom: 0.4rem;
}

.objectives-header.wic {
    background: rgba(138, 132, 255, 0.15);
    color: var(--okta-ether-blue);
    border: 1px solid rgba(138, 132, 255, 0.3);
}

.objectives-header.cic {
    background: rgba(138, 132, 255, 0.12);
    color: var(--okta-ether-blue);
    border: 1px solid rgba(138, 132, 255, 0.25);
}

/* ── Influence Scale ── */
.influence-scale {
    margin-top: 0.3rem;
}

.influence-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.influence-label {
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--okta-text-muted);
    min-width: 28px;
}

.influence-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(138, 132, 255, 0.1), rgba(255, 107, 34, 0.2));
    position: relative;
}

.inf-dot {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--okta-solar);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(255, 107, 34, 0.4);
}

.inf-text {
    position: absolute;
    top: -18px;
    transform: translateX(-50%);
    font-size: 0.48rem;
    font-weight: 600;
    color: var(--okta-ether-blue);
    white-space: nowrap;
}

.influence-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.44rem;
    color: var(--okta-text-muted);
    margin-top: 0.1rem;
}

/* ── Stage pills ── */
.stage-bars {
    margin-top: 0.3rem;
}

.stage-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.stage-label {
    font-size: 0.52rem;
    font-weight: 800;
    color: var(--okta-text-muted);
    min-width: 28px;
}

.stage-pills {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.stage-pill {
    padding: 0.2rem 0.45rem;
    border-radius: 2rem;
    font-size: 0.44rem;
    font-weight: 600;
    background: rgba(138, 132, 255, 0.18);
    color: var(--okta-ether-blue);
    border: 1px solid rgba(138, 132, 255, 0.3);
    white-space: nowrap;
}

.stage-pill.dim {
    background: rgba(138, 132, 255, 0.06);
    color: rgba(138, 132, 255, 0.45);
    border-color: rgba(138, 132, 255, 0.12);
}

/* ── Challenges list ── */
.challenges-list {
    padding-left: 1rem !important;
}

/* ── Segment Cards ── */
.segment-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.segment-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(138, 132, 255, 0.1);
    border-radius: 10px;
    padding: 0.55rem;
}

.segment-card p {
    font-size: 0.52rem !important;
}

.segment-card-header {
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.35rem;
    text-align: center;
}

.segment-card-header.strategic {
    background: rgba(65, 20, 255, 0.15);
    color: #a99cff;
    border: 1px solid rgba(65, 20, 255, 0.3);
}

.segment-card-header.commercial {
    background: rgba(255, 107, 34, 0.12);
    color: #FF9F59;
    border: 1px solid rgba(255, 107, 34, 0.25);
}

/* ── Preference Tags ── */
.pref-row {
    margin-bottom: 0.5rem;
}

.pref-label {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--okta-text-muted);
    display: block;
    margin-bottom: 0.25rem;
}

.pref-tags {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.pref-tag {
    padding: 0.2rem 0.55rem;
    border-radius: 2rem;
    font-size: 0.5rem;
    font-weight: 600;
    background: rgba(138, 132, 255, 0.1);
    color: var(--okta-ether-blue);
    border: 1px solid rgba(138, 132, 255, 0.2);
}

/* ── Touchpoints ── */
.touchpoints-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

/* .touchpoint-block */

.touchpoint-header {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--okta-shell);
    margin-bottom: 0.35rem;
}

.touchpoint-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.tp-tag {
    padding: 0.18rem 0.45rem;
    border-radius: 4px;
    font-size: 0.46rem;
    font-weight: 600;
    background: rgba(65, 20, 255, 0.12);
    color: var(--okta-ether-blue);
    border: 1px solid rgba(65, 20, 255, 0.2);
}

/* ── Section separator ── */
.persona-popup-section+.persona-popup-section {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(138, 132, 255, 0.1);
}

/* ── Clickable persona bar cursor ── */
.persona-bar.biz {
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════
   PERSONA CHAT — Immersive AI Conversation
   ═══════════════════════════════════════════════════════ */

.persona-chat {
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(138, 132, 255, 0.18);
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-height: 380px;
}

/* ── Chat Header ── */
.persona-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    background: rgba(138, 132, 255, 0.06);
    border-bottom: 1px solid rgba(138, 132, 255, 0.12);
    flex-shrink: 0;
}

.chat-persona-identity {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(138, 132, 255, 0.4);
    position: relative;
    flex-shrink: 0;
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-status-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8A84FF;
    border: 1.5px solid rgba(12, 14, 42, 0.8);
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(52, 211, 153, 0);
    }
}

.chat-persona-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--okta-shell);
    display: block;
}

.chat-persona-role {
    font-size: 0.5rem;
    color: var(--okta-text-muted);
    display: block;
}

.chat-header-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--okta-ether-blue);
    opacity: 0.7;
}

.chat-header-label svg {
    opacity: 0.6;
}

/* ── Messages Area ── */
.persona-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-height: 140px;
    max-height: 240px;
}

.persona-chat-messages::-webkit-scrollbar {
    width: 4px;
}

.persona-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.persona-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(138, 132, 255, 0.2);
    border-radius: 10px;
}

/* ── Message Bubbles ── */
.chat-msg {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    animation: msgSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes msgSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-msg-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(138, 132, 255, 0.3);
}

.chat-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Persona message */
.persona-msg {
    align-self: flex-start;
    max-width: 75%;
}

.persona-msg .chat-msg-bubble {
    background: rgba(138, 132, 255, 0.08);
    border: 1px solid rgba(138, 132, 255, 0.15);
    border-radius: 14px 14px 14px 4px;
    padding: 0.6rem 0.8rem;
    font-size: 0.6rem;
    line-height: 1.55;
    color: var(--okta-text);
}

/* User message */
.user-msg {
    align-self: flex-end;
    flex-direction: row-reverse;
    max-width: 65%;
}

.user-msg .chat-msg-bubble {
    background: rgba(255, 107, 34, 0.15);
    border: 1px solid rgba(255, 107, 34, 0.3);
    border-radius: 14px 14px 4px 14px;
    padding: 0.6rem 0.8rem;
    font-size: 0.6rem;
    line-height: 1.55;
    color: var(--okta-shell);
}

/* ── Typing Indicator ── */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 0.6rem 0.8rem;
    align-items: center;
}

.typing-indicator span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--okta-ether-blue);
    opacity: 0.4;
    animation: typingDot 1.4s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {

    0%,
    60%,
    100% {
        opacity: 0.2;
        transform: scale(0.8);
    }

    30% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* ── Suggestion Chips ── */
.persona-chat-chips {
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    flex-wrap: wrap;
    border-top: 1px solid rgba(138, 132, 255, 0.08);
    flex-shrink: 0;
}

.chat-chip {
    padding: 0.3rem 0.65rem;
    border-radius: 2rem;
    font-size: 0.5rem;
    font-weight: 600;
    background: rgba(138, 132, 255, 0.08);
    color: var(--okta-ether-blue);
    border: 1px solid rgba(138, 132, 255, 0.2);
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.chat-chip:hover {
    background: rgba(138, 132, 255, 0.18);
    border-color: rgba(138, 132, 255, 0.4);
    transform: translateY(-1px);
}

/* ── Input Bar ── */
.persona-chat-input {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: rgba(12, 14, 42, 0.3);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(138, 132, 255, 0.12);
    flex-shrink: 0;
}

.persona-chat-input input {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(138, 132, 255, 0.18);
    border-radius: 2rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.6rem;
    font-family: 'Inter', sans-serif;
    color: var(--okta-shell);
    outline: none;
    transition: border-color 0.25s ease;
}

.persona-chat-input input::placeholder {
    color: var(--okta-text-muted);
}

.persona-chat-input input:focus {
    border-color: rgba(138, 132, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

.chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 107, 34, 0.4);
    background: rgba(255, 107, 34, 0.15);
    color: var(--okta-solar);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.chat-send-btn:hover {
    background: rgba(255, 107, 34, 0.3);
    border-color: rgba(255, 107, 34, 0.6);
    transform: scale(1.08);
}

/* ═══════════════════════════════════════════════════════
   NODE HOVER CARD — Liquid Glass Tooltip
   ═══════════════════════════════════════════════════════ */
.node-hover-card {
    position: fixed;
    z-index: 10000;
    width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 22px;

    /* Liquid glass */
    background:
        linear-gradient(135deg,
            rgba(138, 132, 255, 0.08) 0%,
            rgba(65, 20, 255, 0.05) 40%,
            rgba(255, 107, 34, 0.04) 100%),
        rgba(10, 11, 38, 0.82);
    backdrop-filter: blur(36px) saturate(170%);
    -webkit-backdrop-filter: blur(36px) saturate(170%);
    border: 1.2px solid rgba(138, 132, 255, 0.25);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 32px 100px -16px rgba(0, 0, 0, 0.6),
        0 0 60px -10px rgba(65, 20, 255, 0.15);

    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.97);
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.node-hover-card.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* Scrollbar */
.node-hover-card::-webkit-scrollbar {
    width: 4px;
}

.node-hover-card::-webkit-scrollbar-track {
    background: transparent;
}

.node-hover-card::-webkit-scrollbar-thumb {
    background: rgba(138, 132, 255, 0.2);
    border-radius: 10px;
}

/* ── Header ── */
.nhc-header {
    position: relative;
    padding: 1rem 1.2rem 0.8rem;
    overflow: hidden;
}

.nhc-stage-badge {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border-radius: 2rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: rgba(0, 0, 0, 0.85);
    text-transform: uppercase;
}

/* Shimmer sweep across header */
.nhc-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            transparent 38%,
            rgba(255, 255, 255, 0.06) 42%,
            rgba(255, 255, 255, 0.04) 48%,
            transparent 52%);
    background-size: 250% 100%;
    animation: shimmerSweep 6s ease-in-out infinite;
    pointer-events: none;
}

/* ── Body ── */
.nhc-body {
    padding: 0 1.2rem 1.2rem;
}

/* ── Sections ── */
.nhc-section {
    margin-bottom: 0.9rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(138, 132, 255, 0.08);
}

.nhc-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.nhc-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--okta-ether-blue);
    margin-bottom: 0.5rem;
}

.nhc-section-title svg {
    flex-shrink: 0;
    opacity: 0.7;
    color: var(--okta-solar);
}

/* ── Experience Content ── */
.nhc-section-content {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    line-height: 1.6;
    color: var(--okta-text-dim);
}

.nhc-section-content em {
    color: var(--okta-shell);
    font-weight: 600;
    font-style: italic;
    display: block;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.nhc-section-content p {
    margin: 0 0 0.5rem;
}

.nhc-section-content ul {
    list-style: none;
    padding-left: 0.9rem;
    margin: 0;
}

.nhc-section-content ul li {
    position: relative;
    margin-bottom: 0.35rem;
    font-size: 0.6rem;
    line-height: 1.55;
}

.nhc-section-content ul li::before {
    content: '▸';
    position: absolute;
    left: -0.85rem;
    color: var(--okta-solar);
    font-size: 0.55rem;
}

.nhc-section-content strong {
    color: var(--okta-shell);
    font-weight: 700;
}

/* ── Channel Tags ── */
.nhc-channels {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.nhc-channel-tag {
    padding: 0.22rem 0.6rem;
    border-radius: 2rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.48rem;
    font-weight: 600;
    background: rgba(138, 132, 255, 0.1);
    color: var(--okta-ether-blue);
    border: 1px solid rgba(138, 132, 255, 0.22);
    transition: all 0.2s ease;
}

.nhc-channel-tag:hover {
    background: rgba(138, 132, 255, 0.2);
    border-color: rgba(138, 132, 255, 0.4);
    transform: translateY(-1px);
}

/* ── Strategy Quote ── */
.nhc-strategy-quote {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    line-height: 1.6;
    color: var(--okta-shell);
    font-weight: 500;
    padding: 0.6rem 0.8rem;
    background: rgba(255, 107, 34, 0.06);
    border-left: 3px solid var(--okta-solar);
    border-radius: 0 10px 10px 0;
    font-style: italic;
}

/* ── Features List ── */
.nhc-features {
    list-style: none;
    padding-left: 0.9rem;
    margin: 0;
}

.nhc-features li {
    position: relative;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    line-height: 1.55;
    color: var(--okta-text-dim);
    margin-bottom: 0.4rem;
    padding-left: 0;
}

.nhc-features li::before {
    content: '◆';
    position: absolute;
    left: -0.85rem;
    color: var(--okta-solar);
    font-size: 0.4rem;
    top: 0.05rem;
}

/* ── Hover glow on journey nodes ── */
.journey-node {
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.journey-node:hover {
    box-shadow: 0 0 20px -4px rgba(138, 132, 255, 0.35);
    border-color: rgba(138, 132, 255, 0.5) !important;
    transform: translateY(-1px);
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════
   TOUCHPOINT IFRAME MODAL — Liquid Glass
   ═══════════════════════════════════════════════════════ */
.tp-iframe-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 6, 20, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tp-iframe-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.tp-iframe-card {
    width: 88vw;
    height: 82vh;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;

    /* Liquid glass */
    background:
        linear-gradient(135deg,
            rgba(138, 132, 255, 0.06) 0%,
            rgba(65, 20, 255, 0.04) 50%,
            rgba(255, 107, 34, 0.03) 100%),
        rgba(10, 11, 38, 0.92);
    border: 1.2px solid rgba(138, 132, 255, 0.22);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 40px 120px -20px rgba(0, 0, 0, 0.6),
        0 0 80px -10px rgba(65, 20, 255, 0.12);

    transform: scale(0.94) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tp-iframe-overlay.visible .tp-iframe-card {
    transform: scale(1) translateY(0);
}

/* ── Header Bar ── */
.tp-iframe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    background: rgba(12, 14, 42, 0.5);
    border-bottom: 1px solid rgba(138, 132, 255, 0.12);
    flex-shrink: 0;
}

.tp-iframe-url {
    font-family: 'Inter', monospace;
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--okta-text-muted);
    padding: 0.3rem 0.7rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(138, 132, 255, 0.12);
    border-radius: 2rem;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-iframe-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(138, 132, 255, 0.2);
    background: rgba(138, 132, 255, 0.08);
    color: var(--okta-shell);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.tp-iframe-close:hover {
    background: rgba(255, 107, 34, 0.2);
    border-color: rgba(255, 107, 34, 0.4);
    transform: scale(1.1);
}

/* ── Spinner ── */
.tp-iframe-spinner {
    position: absolute;
    inset: 0;
    top: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 1;
}

.tp-iframe-spinner span {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    color: var(--okta-text-muted);
    font-weight: 500;
}

.tp-spinner-ring {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid rgba(138, 132, 255, 0.15);
    border-top-color: var(--okta-ether-blue);
    animation: spinnerRotate 0.8s linear infinite;
}

@keyframes spinnerRotate {
    to {
        transform: rotate(360deg);
    }
}

/* ── Iframe ── */
.tp-iframe {
    flex: 1;
    width: 100%;
    border: none;
    background: white;
    border-radius: 0 0 22px 22px;
    transition: opacity 0.4s ease;
}

/* ── Clickable tp-tags ── */
.tp-tag {
    transition: all 0.2s ease;
}

.tp-tag:hover {
    background: rgba(138, 132, 255, 0.2) !important;
    border-color: rgba(138, 132, 255, 0.45) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -2px rgba(138, 132, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════
   OKTA AI ASSISTANT WIDGET
   ═══════════════════════════════════════════════════════ */
.okta-ai-widget {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* ── Toggle Button ── */
.okta-ai-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--okta-electric-blue), var(--okta-ether-blue));
    border: none;
    color: white;
    cursor: pointer;
    box-shadow:
        0 4px 20px rgba(65, 20, 255, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 2;
}

.okta-ai-toggle::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(138, 132, 255, 0.3);
    animation: oktaPulseRing 3s infinite;
    pointer-events: none;
}

@keyframes oktaPulseRing {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.15);
        opacity: 0;
    }
}

.okta-ai-toggle:hover {
    transform: scale(1.08) translateY(-3px);
    box-shadow:
        0 8px 28px rgba(65, 20, 255, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.okta-ai-icon {
    font-size: 1.5rem;
}

/* ── Chat Panel ── */
.okta-ai-panel {
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 380px;
    height: 520px;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    z-index: 1;

    /* Liquid glass */
    background:
        linear-gradient(135deg,
            rgba(138, 132, 255, 0.06) 0%,
            rgba(65, 20, 255, 0.04) 50%,
            rgba(255, 107, 34, 0.02) 100%),
        rgba(10, 11, 38, 0.92);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1.2px solid rgba(138, 132, 255, 0.2);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 24px 64px -12px rgba(0, 0, 0, 0.5),
        0 0 40px -10px rgba(65, 20, 255, 0.12);

    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px) scale(0.95);
    transform-origin: bottom right;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.okta-ai-panel.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* ── Header ── */
.okta-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.1rem;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(138, 132, 255, 0.1);
}

.okta-ai-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--okta-shell);
}

.okta-ai-icon-sm {
    font-size: 1rem;
    animation: oktaFloatIcon 3s ease-in-out infinite alternate;
}

@keyframes oktaFloatIcon {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-2px);
        text-shadow: 0 0 8px rgba(138, 132, 255, 0.6);
    }
}

.okta-ai-close-btn {
    background: transparent;
    border: none;
    color: rgba(229, 224, 216, 0.5);
    font-size: 1.3rem;
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1;
}

.okta-ai-close-btn:hover {
    color: var(--okta-shell);
}

/* ── Messages ── */
.okta-ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(138, 132, 255, 0.2) transparent;
}

.okta-ai-messages::-webkit-scrollbar {
    width: 4px;
}

.okta-ai-messages::-webkit-scrollbar-track {
    background: transparent;
}

.okta-ai-messages::-webkit-scrollbar-thumb {
    background: rgba(138, 132, 255, 0.2);
    border-radius: 10px;
}

/* ── Message Bubbles ── */
.okta-ai-msg {
    max-width: 88%;
    display: flex;
    flex-direction: column;
    animation: fadeSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.okta-ai-msg-content {
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    line-height: 1.5;
    word-wrap: break-word;
}

.okta-ai-msg.ai {
    align-self: flex-start;
}

.okta-ai-msg.ai .okta-ai-msg-content {
    background: rgba(20, 22, 50, 0.6);
    border: 1px solid rgba(138, 132, 255, 0.08);
    color: var(--okta-shell);
    border-bottom-left-radius: 3px;
}

.okta-ai-msg.ai .okta-ai-msg-content p {
    margin: 0 0 0.4rem;
}

.okta-ai-msg.ai .okta-ai-msg-content p:last-child {
    margin-bottom: 0;
}

.okta-ai-msg.ai .okta-ai-msg-content ul {
    padding-left: 1rem;
    margin: 0.3rem 0;
}

.okta-ai-msg.ai .okta-ai-msg-content li {
    margin-bottom: 0.2rem;
    font-size: 0.6rem;
    color: rgba(229, 224, 216, 0.7);
}

.okta-ai-msg.ai .okta-ai-msg-content strong {
    color: var(--okta-shell);
}

.okta-ai-msg.ai .okta-ai-msg-content em {
    color: var(--okta-solar);
    font-weight: 600;
}

.okta-ai-msg.user {
    align-self: flex-end;
}

.okta-ai-msg.user .okta-ai-msg-content {
    background: linear-gradient(135deg, var(--okta-electric-blue), var(--okta-ether-blue));
    color: white;
    border-bottom-right-radius: 3px;
}

/* ── Suggestion Chips ── */
.okta-ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.2rem 0;
}

.okta-ai-chip {
    padding: 0.3rem 0.65rem;
    border-radius: 2rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.5rem;
    font-weight: 600;
    background: rgba(138, 132, 255, 0.08);
    border: 1px solid rgba(138, 132, 255, 0.2);
    color: var(--okta-ether-blue);
    cursor: pointer;
    transition: all 0.2s ease;
}

.okta-ai-chip:hover {
    background: rgba(138, 132, 255, 0.18);
    border-color: rgba(138, 132, 255, 0.4);
    transform: translateY(-1px);
}

/* ── Typing Indicator ── */
.okta-ai-typing {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(20, 22, 50, 0.6);
    border: 1px solid rgba(138, 132, 255, 0.08);
    border-radius: 14px;
    border-bottom-left-radius: 3px;
    width: fit-content;
    align-self: flex-start;
}

.okta-ai-dot {
    width: 5px;
    height: 5px;
    background: rgba(229, 224, 216, 0.4);
    border-radius: 50%;
    animation: oktaDotBounce 1.4s infinite ease-in-out both;
}

.okta-ai-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.okta-ai-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes oktaDotBounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

/* ── Input Area ── */
.okta-ai-input-area {
    padding: 0.8rem;
    display: flex;
    gap: 0.45rem;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(138, 132, 255, 0.1);
}

.okta-ai-input {
    flex: 1;
    background: rgba(10, 11, 38, 0.6);
    border: 1px solid rgba(138, 132, 255, 0.12);
    border-radius: 2rem;
    padding: 0.55rem 0.9rem;
    color: var(--okta-shell);
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.okta-ai-input::placeholder {
    color: rgba(229, 224, 216, 0.35);
}

.okta-ai-input:focus {
    border-color: var(--okta-ether-blue);
    background: rgba(10, 11, 38, 0.85);
}

.okta-ai-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--okta-solar);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
}

.okta-ai-send:hover {
    background: #ff9f59;
    transform: scale(1.08);
}

/* ── AI Stage Highlighting ── */
#do-flowchart.ai-stage-dimmed>.flow-col {
    opacity: 0.15;
    filter: grayscale(80%);
    transition: all 0.5s ease;
}

#do-flowchart.ai-stage-dimmed>.flow-col.ai-stage-active {
    opacity: 1;
    filter: none;
    position: relative;
    z-index: 5;
    border-radius: 12px;
    box-shadow: 0 0 30px -6px rgba(138, 132, 255, 0.3);
    transition: all 0.5s ease;
}

/* Accent-glow the individual nodes inside the highlighted column */
#do-flowchart.ai-stage-dimmed>.flow-col.ai-stage-active .journey-node {
    border-color: rgba(138, 132, 255, 0.6) !important;
    box-shadow:
        0 0 18px -3px rgba(138, 132, 255, 0.35),
        0 0 0 1px rgba(138, 132, 255, 0.15) inset;
    transform: translateY(-2px) scale(1.03);
    background: linear-gradient(135deg,
            rgba(138, 132, 255, 0.12),
            rgba(65, 20, 255, 0.06)) !important;
    transition: all 0.4s ease;
}

.do-stage-col.ai-stage-active {
    box-shadow: 0 4px 20px -4px rgba(138, 132, 255, 0.35);
    border-color: rgba(138, 132, 255, 0.5) !important;
    transform: translateY(-2px);
    transition: all 0.4s ease;
}

/* ═══════════════════════════════════════════════════════
   PULSE ANALYTICS POPUP
   ═══════════════════════════════════════════════════════ */
.pulse-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(4, 4, 20, 0.40);
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.pulse-popup-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.pulse-popup-card {
    position: relative;
    width: 96vw;
    max-width: 1440px;
    height: 88vh;
    overflow: hidden;
    /* Changed from auto since we have internal scroll cols */
    border-radius: 28px;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--okta-text);

    /* ── Liquid Glass layers ── */
    background:
        linear-gradient(135deg,
            rgba(138, 132, 255, 0.06) 0%,
            rgba(138, 132, 255, 0.05) 30%,
            rgba(65, 20, 255, 0.04) 60%,
            rgba(255, 107, 34, 0.03) 100%),
        rgba(12, 14, 42, 0.42);
    backdrop-filter: blur(32px) saturate(160%);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
    border: 1.2px solid rgba(138, 132, 255, 0.22);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 40px 120px -20px rgba(0, 0, 0, 0.55),
        0 0 80px -10px rgba(65, 20, 255, 0.12);

    display: flex;
    flex-direction: column;
    transform: translateY(30px) scale(0.92);
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.pulse-popup-overlay.active .pulse-popup-card {
    transform: translateY(0) scale(1);
}

/* Iridescent shimmer sweep */
.pulse-popup-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: linear-gradient(105deg,
            transparent 38%,
            rgba(138, 132, 255, 0.03) 42%,
            rgba(138, 132, 255, 0.025) 48%,
            rgba(255, 107, 34, 0.015) 52%,
            transparent 56%);
    background-size: 250% 100%;
    animation: shimmerSweep 10s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.pulse-popup-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    gap: 1.4rem;
    padding: 2.5rem;
    position: relative;
    z-index: 1;
}

.pulse-col-left {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    min-height: 0;
}

.pulse-col-right {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 0;
    width: 100%;
}

.pulse-panel.ai-assistant-panel {
    flex: 0 0 auto;
    background: rgba(138, 132, 255, 0.05);
    /* Slight tint to differentiate */
}

.pulse-ai-summary {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(138, 132, 255, 0.1);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.8rem;
}

.pulse-ai-summary p {
    font-size: 0.65rem;
    line-height: 1.5;
    color: var(--okta-text);
    margin: 0;
}

.pulse-ai-chat {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pulse-ai-messages {
    max-height: 120px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0.4rem;
}

.pulse-ai-msg {
    font-size: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    line-height: 1.4;
    max-width: 85%;
}

.pulse-ai-msg.ai {
    background: rgba(138, 132, 255, 0.1);
    color: var(--okta-shell);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
}

.pulse-ai-msg.user {
    background: rgba(255, 107, 34, 0.15);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.pulse-ai-input-row {
    display: flex;
    gap: 0.5rem;
}

.pulse-ai-input-row input {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(138, 132, 255, 0.2);
    border-radius: 2rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.6rem;
    color: var(--okta-shell);
    outline: none;
}

.pulse-ai-send-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--okta-border);
    background: rgba(138, 132, 255, 0.1);
    color: var(--okta-ether-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.pulse-ai-send-btn:hover {
    background: rgba(138, 132, 255, 0.2);
    transform: scale(1.05);
}

.pulse-panel.feed-panel {
    flex: 1;
    min-height: 0;
}

.pulse-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.6rem;
}

.pulse-panel-header h3 {
    margin: 0 0 0.2rem 0;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--okta-ether-blue);
}

.pulse-legend,
.pulse-subtext {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--okta-text-muted);
    margin: 0;
}

.pulse-sort {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.65rem;
    outline: none;
    cursor: pointer;
}

.pulse-sort:hover {
    background: rgba(255, 255, 255, 0.1);
}

.pulse-chart-area {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
}

.pulse-feed-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Custom Scrollbar for feed */
.pulse-feed-scroll::-webkit-scrollbar {
    width: 6px;
}

.pulse-feed-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

.pulse-feed-scroll::-webkit-scrollbar-thumb {
    background: rgba(138, 132, 255, 0.3);
    border-radius: 4px;
}

.pulse-feed-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(138, 132, 255, 0.5);
}

/* Post Card Styles */
.pulse-post {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    transition: all 0.2s ease;
}

.pulse-post:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(138, 132, 255, 0.3);
    transform: translateY(-2px);
}

.pulse-post-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.pulse-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--okta-royal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
}

.pulse-author-col {
    display: flex;
    flex-direction: column;
}

.pulse-author {
    color: #fff;
    font-weight: 600;
    font-size: 0.65rem;
}

.pulse-time {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.55rem;
}

.pulse-body {
    color: var(--okta-text-dim);
    font-size: 0.6rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.pulse-tags {
    display: flex;
    gap: 0.5rem;
}

.pulse-tag {
    font-size: 0.55rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #ccc;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.pulse-tag.positive {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.pulse-tag.negative {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.pulse-tag.neutral {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

/* D3 SVG Styles */
.pulse-chart-svg {
    width: 100%;
    height: 100%;
}

.pulse-axis path,
.pulse-axis line {
    stroke: rgba(255, 255, 255, 0.1);
    stroke-dasharray: 4, 4;
}

.pulse-axis text {
    fill: rgba(255, 255, 255, 0.4);
    font-size: 9px;
    font-family: 'Inter', sans-serif;
}

.pulse-bubble {
    fill-opacity: 0.8;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1;
    transition: fill-opacity 0.2s, stroke-width 0.2s;
    cursor: pointer;
}

.pulse-bubble:hover {
    fill-opacity: 1;
    stroke: #fff;
    stroke-width: 2;
}

.pulse-label {
    fill: #fff;
    font-size: 9px;
    font-family: 'Inter', sans-serif;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.pulse-bar-bg {
    fill: rgba(255, 255, 255, 0.05);
    rx: 6px;
}

.pulse-bar-fill {
    rx: 6px;
}

.pulse-bar-text {
    fill: var(--okta-text-dim);
    font-size: 9px;
    font-family: 'Inter', sans-serif;
}

/* ═══════════ VIEW SWITCHING ═══════════ */
.view-content {
    display: none;
    flex-direction: column;
    min-height: calc(100vh - 80px);
    animation: viewFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.view-content.active {
    display: flex;
}

@keyframes viewFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════ EDITOR STYLES ═══════════ */
.editor-body {
    padding: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.editor-glass-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    min-height: 700px;
    background: rgba(43, 44, 52, 0.45);
    backdrop-filter: blur(36px);
    -webkit-backdrop-filter: blur(36px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.editor-sidebar {
    width: 250px;
    background: rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.5rem 0;
}

.editor-nav-item {
    padding: 1rem 1.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.editor-nav-item:hover {
    background: rgba(255, 255, 255, 0.03);
    color: white;
}

.editor-nav-item.active {
    background: rgba(255, 107, 34, 0.08);
    color: #FF6B22;
    border-left-color: #FF6B22;
}

.editor-main {
    flex: 1;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow-y: auto;
}

.editor-section h3 {
    font-size: 1.1rem;
    color: white;
    margin-bottom: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.editor-field-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.editor-field-group label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.editor-field-group input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    color: white;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.editor-field-group input:focus {
    outline: none;
    border-color: #FF6B22;
    background: rgba(255, 107, 34, 0.03);
}

.editor-grid-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.editor-item-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.editor-item-card input {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    font-size: 0.95rem;
}

.editor-icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.editor-icon-btn:hover {
    opacity: 1;
}

.editor-add-btn {
    border: 1px dashed rgba(255, 255, 255, 0.1);
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    padding: 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.editor-add-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

.editor-footer {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: auto;
}

.editor-primary-btn {
    background: #FF6B22;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 20px -5px rgba(255, 107, 34, 0.3);
}

.editor-secondary-btn {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
}

.beta-tag {
    font-size: 0.65rem;
    background: #FF6B22;
    color: white;
    padding: 1px 4px;
    border-radius: 4px;
    margin-left: 4px;
    text-transform: uppercase;
    font-weight: 800;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════
   BPI DASHBOARD MODAL — Liquid Glass
   ═══════════════════════════════════════════════════════ */

/* ── Overlay ── */
.bpi-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(4, 4, 20, 0.50);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.bpi-popup-overlay.active {
    display: flex;
    animation: popupOverlayIn 0.35s ease forwards;
}

/* ── Card Shell ── */
.bpi-popup-card {
    position: relative;
    width: 96vw;
    max-width: 1440px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 28px;
    padding: 2.2rem 2.5rem 2rem;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--okta-text);

    background:
        linear-gradient(135deg,
            rgba(138, 132, 255, 0.06) 0%,
            rgba(138, 132, 255, 0.04) 30%,
            rgba(65, 20, 255, 0.03) 60%,
            rgba(255, 107, 34, 0.03) 100%),
        rgba(12, 14, 42, 0.55);
    backdrop-filter: blur(32px) saturate(160%);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
    border: 1.2px solid rgba(138, 132, 255, 0.22);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 40px 120px -20px rgba(0, 0, 0, 0.55),
        0 0 80px -10px rgba(65, 20, 255, 0.12);

    animation: popupCardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Scrollbar */
.bpi-popup-card::-webkit-scrollbar {
    width: 6px;
}

.bpi-popup-card::-webkit-scrollbar-track {
    background: transparent;
}

.bpi-popup-card::-webkit-scrollbar-thumb {
    background: rgba(138, 132, 255, 0.25);
    border-radius: 3px;
}

/* ── Header ── */
.bpi-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.8rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(138, 132, 255, 0.12);
}

.bpi-eyebrow {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--okta-solar);
    font-weight: 700;
}

.bpi-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0.3rem 0 0;
    background: linear-gradient(135deg, #fff 30%, var(--okta-ether-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Mini JES ring in header */
.bpi-header-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.bpi-jes-mini {
    position: relative;
    width: 52px;
    height: 52px;
}

.bpi-jes-mini svg {
    display: block;
}

.bpi-jes-mini-val {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--okta-solar);
}

.bpi-jes-mini-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--okta-text-dim);
    font-weight: 600;
}

/* ── 6-Column KPI Grid ── */
.bpi-stage-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 1.8rem;
}

.bpi-stage-col {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 1rem 0.8rem 0.8rem;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}

.bpi-stage-col:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: var(--stage-color, rgba(138, 132, 255, 0.2));
    transform: translateY(-2px);
    box-shadow: 0 8px 30px -10px rgba(0, 0, 0, 0.4);
}

.bpi-stage-header {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--stage-color, var(--okta-ether-blue));
    text-align: center;
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
    border-bottom: 2px solid var(--stage-color, var(--okta-ether-blue));
    opacity: 0.9;
}

.bpi-kpi-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.bpi-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.bpi-kpi-value {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}

.bpi-kpi-label {
    font-size: 0.62rem;
    color: var(--okta-text-dim);
    letter-spacing: 0.02em;
    line-height: 1.2;
}

/* ── Stage Score Mini Bar ── */
.bpi-stage-score {
    margin-top: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bpi-mini-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.bpi-mini-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--stage-color, var(--okta-ether-blue));
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.bpi-stage-pct {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--stage-color, var(--okta-ether-blue));
    min-width: 28px;
    text-align: right;
}

/* ── Shared Section Title ── */
.bpi-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--okta-text-dim);
    margin: 0 0 0.8rem;
}

/* ── Conversion Funnel ── */
.bpi-funnel-section {
    padding-top: 1.2rem;
    border-top: 1px solid rgba(138, 132, 255, 0.1);
    margin-bottom: 1.4rem;
}

.bpi-funnel {
    display: flex;
    align-items: flex-end;
    gap: 0;
}

.bpi-funnel-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.bpi-funnel-bar {
    width: 100%;
    height: calc(var(--bar-width, 100%) * 0.6);
    min-height: 18px;
    max-height: 52px;
    background: var(--stage-color, var(--okta-ether-blue));
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0.85;
}

.bpi-funnel-bar:hover {
    opacity: 1;
    transform: scaleY(1.08);
    box-shadow: 0 4px 20px -5px var(--stage-color, rgba(138, 132, 255, 0.4));
}

.bpi-funnel-val {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.bpi-funnel-label {
    font-size: 0.58rem;
    color: var(--okta-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.bpi-funnel-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 4px;
    flex-shrink: 0;
    margin-bottom: 18px;
}

.bpi-funnel-rate {
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--okta-text-dim);
}

.bpi-funnel-rate.good {
    color: #4ADE80;
}

/* ── Key Insights ── */
.bpi-insights-section {
    padding-top: 1.2rem;
    border-top: 1px solid rgba(138, 132, 255, 0.1);
}

.bpi-insights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.bpi-insight {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 0.8rem 1rem;
    transition: all 0.25s ease;
    position: relative;
}

.bpi-insight:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(138, 132, 255, 0.15);
}

.bpi-insight-warn {
    border-left: 3px solid #F59E0B;
}

.bpi-insight-ok {
    border-left: 3px solid #4ADE80;
}

.bpi-insight-info {
    border-left: 3px solid var(--okta-ether-blue);
}

.bpi-insight-icon {
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.bpi-insight-body {
    flex: 1;
    min-width: 0;
}

.bpi-insight-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.2rem;
}

.bpi-insight-desc {
    font-size: 0.65rem;
    color: var(--okta-text-dim);
    line-height: 1.5;
    margin: 0;
}

.bpi-insight-tag {
    font-family: 'Outfit', sans-serif;
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 5px;
    flex-shrink: 0;
    align-self: flex-start;
}

.bpi-tag-critical {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.bpi-tag-positive {
    background: rgba(74, 222, 128, 0.12);
    color: #4ADE80;
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.bpi-tag-monitor {
    background: rgba(138, 132, 255, 0.12);
    color: var(--okta-ether-blue);
    border: 1px solid rgba(138, 132, 255, 0.2);
}