/*  ================================================================
    EnergyEquity — Modern Dark Polished Override Layer
    Loaded AFTER styles.css; overrides visual properties only.
    Layout and structure remain in the base file.
    ================================================================ */

/* ----------------------------------------------------------------
   1. Design Tokens
   ---------------------------------------------------------------- */
:root {
    /* Deeper backgrounds for more contrast */
    --bg-primary: #0a0d14;
    --bg-secondary: #111827;
    --bg-card: #1a2035;
    --bg-input: #1e2540;
    --border: #1e293b;

    /* Glass effect tokens */
    --glass-bg: rgba(17, 24, 39, 0.6);
    --glass-bg-strong: rgba(17, 24, 39, 0.8);
    --glass-border: rgba(255, 255, 255, 0.07);
    --glass-border-hover: rgba(255, 255, 255, 0.12);
    --glass-blur: 16px;

    /* Gradient tokens */
    --gradient-accent: linear-gradient(135deg, #4ade80, #6c8cff);
    --gradient-accent-subtle: linear-gradient(135deg, rgba(74,222,128,0.15), rgba(108,140,255,0.15));
    --gradient-surface: linear-gradient(180deg, rgba(74,222,128,0.04) 0%, transparent 60%);

    /* Shadow & glow tokens */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.04);
    --glow-energy: 0 0 24px rgba(74, 222, 128, 0.12);
    --glow-accent: 0 0 24px rgba(108, 140, 255, 0.12);
    --glow-red: 0 0 24px rgba(248, 113, 113, 0.12);

    /* Animation tokens */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);
    --transition-fast: 0.2s var(--ease-out-expo);
    --transition-med: 0.35s var(--ease-out-expo);

    /* Radius */
    --radius: 10px;
    --radius-lg: 14px;

    /* Layout */
    --drawer-width: 420px;
}


/* ----------------------------------------------------------------
   2. Body & Global Background
   ---------------------------------------------------------------- */
body {
    background: radial-gradient(ellipse at 50% 0%, #0f172a 0%, var(--bg-primary) 70%);
}


/* ----------------------------------------------------------------
   2b. Dashboard Tabs — Glassmorphic
   ---------------------------------------------------------------- */
.dash-tabs {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
}

.dash-tabs__tab {
    font-weight: 600;
    letter-spacing: 0.03em;
    border-bottom-width: 2px;
    transition: all var(--transition-fast);
}

.dash-tabs__tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.02);
}

.dash-tabs__tab--active {
    color: var(--energy);
    border-image: var(--gradient-accent) 1;
    text-shadow: 0 0 12px rgba(74, 222, 128, 0.3);
}

/* Technical tab content — add some padding */
#tab-technical {
    padding: 0;
}

#tab-technical .pipeline {
    margin: 16px;
    border-radius: var(--radius-lg);
    border-bottom: none;
}

#tab-technical .dash-details {
    margin: 0 16px 16px;
    border-radius: var(--radius);
    border-top: none;
    overflow: hidden;
}


/* ----------------------------------------------------------------
   2c. Backdrop Status — Big Animated Text on Blur Overlay
   ---------------------------------------------------------------- */
.backdrop-status {
    position: absolute;
    top: 0;
    left: 0;
    right: var(--drawer-width, 420px);
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s var(--ease-out-expo);
}

.backdrop-status--visible {
    opacity: 1;
}

.backdrop-status__icon {
    font-size: 3rem;
    margin-bottom: 16px;
    filter: drop-shadow(0 0 20px rgba(74, 222, 128, 0.4));
    animation: backdropFloat 3s ease-in-out infinite;
}

.backdrop-status__text {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
    text-shadow:
        0 0 40px rgba(74, 222, 128, 0.25),
        0 0 80px rgba(108, 140, 255, 0.12);
    text-align: center;
    padding: 0 32px;
    opacity: 0;
    transform: translateY(12px);
}

.backdrop-status__text--enter {
    animation: backdropTextIn 0.5s var(--ease-out-expo) forwards;
}

.backdrop-status__detail {
    margin-top: 12px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.03em;
    text-align: center;
    min-height: 1.3em;
    transition: opacity 0.3s ease;
}

@keyframes backdropTextIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes backdropFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}


/* ----------------------------------------------------------------
   3. Header — Glassmorphic
   ---------------------------------------------------------------- */
.header {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 1px 24px rgba(0, 0, 0, 0.4);
}

.header__badge {
    background: var(--gradient-accent-subtle);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.header__btn {
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    transition: all var(--transition-fast);
}

.header__btn:hover {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.25);
    box-shadow: var(--glow-energy);
    transform: translateY(-1px);
}


/* ----------------------------------------------------------------
   4. Landing & Hero
   ---------------------------------------------------------------- */
.landing__title {
    text-shadow: 0 0 60px rgba(74, 222, 128, 0.15);
}

.landing__subtitle {
    color: var(--text-secondary);
    line-height: 1.7;
}


/* ----------------------------------------------------------------
   5. Wizard — Glassmorphic Cards
   ---------------------------------------------------------------- */
.wizard {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* Progress dots */
.wizard__progress-dot {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border);
    transition: all var(--transition-med);
}

.wizard__progress-dot--active {
    border-color: var(--energy);
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.5), 0 0 4px rgba(74, 222, 128, 0.8);
    animation: glowPulse 2s ease-in-out infinite;
}

.wizard__progress-dot--done {
    background: var(--energy);
    border-color: var(--energy);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}

.wizard__progress-line--done {
    background: linear-gradient(90deg, var(--energy), var(--accent));
}

/* Building type option cards */
.wizard__option {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.wizard__option:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(74, 222, 128, 0.2);
    background: rgba(74, 222, 128, 0.04);
}

.wizard__option--selected {
    border-color: var(--energy);
    box-shadow: var(--glow-energy), var(--shadow-md);
    background: rgba(74, 222, 128, 0.06);
}

/* Era buttons */
.wizard__era-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    transition: all var(--transition-fast);
}

.wizard__era-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(74, 222, 128, 0.2);
    box-shadow: var(--shadow-sm);
}

.wizard__era-btn--selected {
    border-color: var(--energy);
    box-shadow: var(--glow-energy);
    background: rgba(74, 222, 128, 0.06);
}

/* Heating / wall / window buttons */
.wizard__heating-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    transition: all var(--transition-fast);
}

.wizard__heating-btn:hover {
    border-color: rgba(74, 222, 128, 0.2);
    background: rgba(74, 222, 128, 0.04);
}

.wizard__heating-btn--selected {
    border-color: var(--energy);
    box-shadow: var(--glow-energy);
    background: rgba(74, 222, 128, 0.08);
    color: var(--energy);
}

/* Form inputs */
.wizard__input,
.wizard__select {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.wizard__input:focus,
.wizard__select:focus {
    border-color: var(--energy);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.12);
}

/* Autocomplete dropdown */
.wizard__suggestions {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg);
}

.wizard__sug-item:hover,
.wizard__sug-item--active {
    background: rgba(74, 222, 128, 0.12);
    color: var(--energy);
}

.wizard__sug-item:hover .wizard__sug-pop,
.wizard__sug-item--active .wizard__sug-pop {
    color: rgba(74, 222, 128, 0.6);
}

.wizard__dropdown-btn {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--glass-border);
    transition: all var(--transition-fast);
}

.wizard__dropdown-btn:hover {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.25);
    color: var(--energy);
}

/* Submit button */
.wizard__submit {
    background: var(--gradient-accent);
    border: none;
    border-radius: var(--radius);
    color: #000;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(74, 222, 128, 0.25);
    transition: all var(--transition-fast);
}

.wizard__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(74, 222, 128, 0.35);
    filter: brightness(1.1);
}

/* Range slider */
.wizard__range::-webkit-slider-thumb {
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}

/* Step title */
.wizard__step-title {
    letter-spacing: 0.01em;
}


/* ----------------------------------------------------------------
   6. Pipeline Visualizer — Glow Dots
   ---------------------------------------------------------------- */
.pipeline {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
    padding: 18px 16px;
    gap: 6px;
    border-radius: 0;
}

.pipeline__step {
    padding: 8px 12px;
    border-radius: var(--radius);
    transition: all var(--transition-fast);
}

.pipeline__step--active {
    background: rgba(74, 222, 128, 0.06);
}

.pipeline__dot {
    width: 12px;
    height: 12px;
    transition: all var(--transition-med);
}

.pipeline__step--active .pipeline__dot {
    box-shadow: 0 0 14px rgba(74, 222, 128, 0.6), 0 0 4px rgba(74, 222, 128, 0.9);
}

.pipeline__step--done .pipeline__dot {
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}

.pipeline__label {
    background: rgba(255, 255, 255, 0.03);
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: all var(--transition-fast);
}

.pipeline__step--active .pipeline__label {
    background: rgba(74, 222, 128, 0.1);
    color: var(--energy);
}

.pipeline__arrow svg {
    opacity: 0.3;
}

.pipeline__step--done ~ .pipeline__arrow svg {
    opacity: 0.5;
    color: var(--energy);
}


/* ----------------------------------------------------------------
   7. Progress Narrative — Centered Hero State
   ---------------------------------------------------------------- */

/* Progress narrative is now a centered overlay that sits on top of the
   dashboard cards while analysis is running. The dashboard cards behind it
   get blurred via .dashboard.is-analyzing (see below). The chat drawer is
   positioned separately (fixed) so it stays sharp. */
.progress-narrative {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    pointer-events: auto;
}

/* Anchor the absolute narrative to the dashboard tab content, not the page. */
#tab-dashboard {
    position: relative;
    min-height: 60vh;
}

/* Blur and disable dashboard content while analysis is running. The chat
   drawer is .chat-drawer (fixed position outside the dashboard view) so it
   is unaffected. The progress-narrative is a sibling of these blurred
   elements, not a child, so it stays sharp on top. */
.dashboard.is-analyzing .hero-metrics,
.dashboard.is-analyzing .dashboard__grid,
.dashboard.is-analyzing .dash-tabs {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
    transition: filter 0.4s ease;
}

/* When analysis ends, the .is-analyzing class is removed and we snap back
   to crisp content; transition gives a quick fade. */
.dashboard:not(.is-analyzing) .hero-metrics,
.dashboard:not(.is-analyzing) .dashboard__grid,
.dashboard:not(.is-analyzing) .dash-tabs {
    transition: filter 0.4s ease;
}

/* Pending phase rows — dimmer than active, but still animated. Used by the
   pre-populated timeline so the user sees the full pipeline structure
   before any phase has started. We DO want the spinner to keep rotating
   on pending rows, just at lower visual weight, so the timeline always
   looks alive (proxy buffering on the SSE stream sometimes delays the
   first phase event by 5-15 s — without a running spinner the page
   looked frozen). */
.progress-phase--pending {
    opacity: 0.55;
    border-left-color: rgba(255, 255, 255, 0.08);
}
.progress-phase--pending .progress-phase__spinner {
    opacity: 0.7;
    background: rgba(255, 255, 255, 0.04);
}
.progress-phase--pending .progress-spin {
    /* keep the animation; just soften the colour so it reads as
       "pending / waiting" instead of "actively running" */
    border-top-color: rgba(255, 255, 255, 0.45);
    filter: none;
}

.progress-narrative__inner {
    max-width: 480px;
    width: 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), var(--glow-energy);
    padding: 36px 32px 28px;
    position: relative;
    overflow: hidden;
}

/* Gradient top accent on the narrative card */
.progress-narrative__inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-accent);
}

.progress-narrative__title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.progress-narrative__subtitle {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-bottom: 28px;
}

/* Timeline line */
.progress-narrative__timeline {
    position: relative;
}

.progress-phase {
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius);
    transition: all var(--transition-med);
    padding: 12px 16px;
    border-left: 2px solid rgba(74, 222, 128, 0.15);
}

.progress-phase--active {
    background: rgba(74, 222, 128, 0.05);
    border-left-color: var(--energy);
    box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.08);
}

.progress-phase--active .progress-phase__spinner {
    border-color: var(--energy);
    background: rgba(74, 222, 128, 0.08);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.3);
}

.progress-phase--done {
    opacity: 0.5;
}

.progress-phase--done .progress-phase__icon {
    filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.4));
}

.progress-phase--complete {
    border-left-color: transparent;
}

.progress-phase--complete .progress-phase__spinner {
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
}

.progress-phase__label {
    font-weight: 600;
    font-size: 0.9rem;
}

.progress-phase--active .progress-phase__label {
    color: var(--energy);
}

.progress-phase__detail {
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.progress-spin {
    border-top-color: var(--energy);
    filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.5));
}


/* ----------------------------------------------------------------
   8. Dashboard Cards — Glass + Gradient Border
   ---------------------------------------------------------------- */
.dash-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-top: 2px solid;
    border-image: linear-gradient(90deg, var(--energy), var(--accent)) 1;
    border-image-slice: 1 0 0 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    animation: glassReveal 0.5s var(--ease-out-expo) both;
}

.dash-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Fix border-radius with border-image (border-image overrides border-radius) */
.dash-card {
    position: relative;
    overflow: hidden;
    border-top: none;
    border: 1px solid var(--glass-border);
}

.dash-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--energy), var(--accent));
}

.dash-section__title {
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Profile grid items */
.dash-profile-item {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.dash-profile-item__value {
    color: var(--text-primary);
    font-weight: 500;
}

/* 3D Map card */
.dash-section__header--map {
    border-bottom: 1px solid var(--glass-border);
}

.map3d {
    background: radial-gradient(ellipse at 50% 30%, rgba(74, 222, 128, 0.03) 0%, transparent 60%),
                var(--bg-primary);
}

.map3d__btn,
.map-expand-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    transition: all var(--transition-fast);
}

.map3d__btn:hover,
.map-expand-btn:hover {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.2);
    color: var(--energy);
}

.map3d__tooltip {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
}

.map3d__info {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
}

.map3d__info-header {
    border-bottom: 1px solid var(--glass-border);
}

.map3d__info-header h4 {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.map3d__legend {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
}

/* Shadow on the viewport container instead of SVG filter (much cheaper) */
.map3d__viewport {
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.15);
}

.map3d__search-dropdown {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
}

.map3d__info-rating-badge {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}


/* ----------------------------------------------------------------
   9. Energy Gauge — Glow Value
   ---------------------------------------------------------------- */
.viz-gauge__value {
    text-shadow: 0 0 24px currentColor;
}

.viz-gauge__total {
    color: var(--text-secondary);
}

.viz-gauge__avg-label {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 1px 5px;
}


/* ----------------------------------------------------------------
   10. Poverty Card — Tinted Glass
   ---------------------------------------------------------------- */
.viz-poverty {
    border-radius: var(--radius);
    padding: 14px;
}

.viz-poverty--poor {
    background: rgba(248, 113, 113, 0.06);
    border: 1px solid rgba(248, 113, 113, 0.15);
    box-shadow: var(--glow-red);
}

.viz-poverty--safe {
    background: rgba(74, 222, 128, 0.06);
    border: 1px solid rgba(74, 222, 128, 0.15);
    box-shadow: var(--glow-energy);
}

.viz-poverty__status {
    text-shadow: 0 0 12px currentColor;
}

.viz-poverty__bar {
    border-radius: 6px;
    overflow: hidden;
}

.viz-poverty__bar-fill {
    border-radius: 6px;
}


/* ----------------------------------------------------------------
   11. Heat Loss Chart — Gradient Segments
   ---------------------------------------------------------------- */
.viz-heatloss__bar {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.viz-heatloss__legend-dot {
    box-shadow: 0 0 6px currentColor;
}


/* ----------------------------------------------------------------
   12. SHAP Chart — Glass Track
   ---------------------------------------------------------------- */
.viz-shap__bar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}

.viz-shap__bar-center {
    background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
}

.viz-shap__bar-fill {
    border-radius: 3px;
}

.viz-shap__row:hover {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}


/* ----------------------------------------------------------------
   13. Comparison Strip — Vibrant Gradient
   ---------------------------------------------------------------- */
.ctx-strip__track {
    border-radius: 8px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255,255,255,0.04);
}

.ctx-strip__pip {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.ctx-strip__pip-label {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 6px;
    padding: 3px 8px;
    border: 1px solid var(--glass-border);
}


/* ----------------------------------------------------------------
   14. Renovation Cards — Glass + Rank Glow
   ---------------------------------------------------------------- */
.viz-roadmap__card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.viz-roadmap__card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--glass-border-hover);
}

.viz-roadmap__rank {
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.25);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.15);
}

.viz-roadmap__tag--saving {
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.2);
    color: var(--energy);
}

.viz-roadmap__tag--payback {
    background: rgba(108, 140, 255, 0.12);
    border: 1px solid rgba(108, 140, 255, 0.2);
    color: var(--accent);
}


/* ----------------------------------------------------------------
   15. Subsidy Cards — Glass Headers
   ---------------------------------------------------------------- */
.subsidy-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.subsidy-card:hover {
    border-color: var(--glass-border-hover);
}

.subsidy-card__header {
    transition: background var(--transition-fast);
}

.subsidy-card__header:hover {
    background: rgba(255, 255, 255, 0.02);
}

.subsidy-card__badge--eligible,
.subsidy-card__badge[style*="green"] {
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.2);
}

.subsidy-card__body {
    border-top: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.15);
}


/* ----------------------------------------------------------------
   16. Chat Drawer — Glassmorphic
   ---------------------------------------------------------------- */
.chat-drawer {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid var(--glass-border);
}

.chat-drawer--open {
    box-shadow: -8px 0 48px rgba(0, 0, 0, 0.5);
}

.chat-drawer__header {
    border-bottom: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.15);
}

.chat-drawer__close {
    transition: all var(--transition-fast);
}

.chat-drawer__close:hover {
    color: var(--red);
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
}

/* User messages */
.chat-msg--user .chat-msg__content {
    background: linear-gradient(135deg, rgba(108, 140, 255, 0.2), rgba(108, 140, 255, 0.1));
    border: 1px solid rgba(108, 140, 255, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Assistant messages */
.chat-msg--assistant .chat-msg__content {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* System messages */
.chat-msg--system .chat-msg__content {
    background: rgba(74, 222, 128, 0.04);
    border: 1px solid rgba(74, 222, 128, 0.12);
}

/* Chat input */
.chat__input {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--glass-border);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.chat__input:focus {
    border-color: var(--energy);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
}

/* Send button */
.chat__send {
    background: var(--gradient-accent);
    border: none;
    color: #000;
    box-shadow: 0 2px 12px rgba(74, 222, 128, 0.2);
    transition: all var(--transition-fast);
}

.chat__send:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(74, 222, 128, 0.35);
    filter: brightness(1.1);
}

/* Chat backdrop */
.chat-backdrop--visible {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* ----------------------------------------------------------------
   17. Technical Details — Glass Groups
   ---------------------------------------------------------------- */
.dash-details {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
}

.dash-details__header {
    transition: background var(--transition-fast);
}

.dash-details__header:hover {
    background: rgba(255, 255, 255, 0.02);
}

.dash-details__badge {
    background: rgba(108, 140, 255, 0.1);
    border: 1px solid rgba(108, 140, 255, 0.15);
    border-radius: 10px;
}

.trace-group__head {
    transition: background var(--transition-fast);
}

.trace-group__head:hover {
    background: rgba(255, 255, 255, 0.02);
}

.trace-group__agent-dot {
    box-shadow: 0 0 6px currentColor;
}

.trace-call {
    background: rgba(0, 0, 0, 0.15);
    border-left: 2px solid var(--accent);
    border-radius: 0 6px 6px 0;
}


/* ----------------------------------------------------------------
   18. Report View — Glass Stat Cards
   ---------------------------------------------------------------- */
.report__card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

.report__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--energy), var(--accent));
}

.report__stat {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.report__stat-value {
    text-shadow: 0 0 16px currentColor;
}

.report__hero {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}

.energy-label__row--active {
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.2);
}


/* ----------------------------------------------------------------
   19. Suggestion Chips — Glass Pills
   ---------------------------------------------------------------- */
.suggestion-chip {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    transition: all var(--transition-fast);
}

.suggestion-chip:hover {
    transform: translateY(-2px);
    background: rgba(74, 222, 128, 0.06);
    border-color: rgba(74, 222, 128, 0.2);
    box-shadow: var(--glow-energy);
    color: var(--energy);
}


/* ----------------------------------------------------------------
   20. Negotiation Section — Glass Rounds
   ---------------------------------------------------------------- */
.negotiation__round {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
}

.negotiation__round-status--consensus {
    color: var(--energy);
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}

.negotiation__round-status--revise {
    color: var(--yellow);
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.4);
}


/* ----------------------------------------------------------------
   21. 3D Map Polish (moved to section 8 above)
   ---------------------------------------------------------------- */


/* ----------------------------------------------------------------
   22. Renovation Simulator
   ---------------------------------------------------------------- */
.sim-toggle__checkbox:checked + .sim-toggle__label {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.2);
}

.sim-summary {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}


/* ----------------------------------------------------------------
   23. Loading Spinner
   ---------------------------------------------------------------- */
.loading__spinner {
    border-color: rgba(74, 222, 128, 0.15);
    border-top-color: var(--energy);
    filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.3));
}


/* ----------------------------------------------------------------
   24. Animations
   ---------------------------------------------------------------- */
@keyframes glassReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(74, 222, 128, 0.2), 0 0 2px rgba(74, 222, 128, 0.6);
    }
    50% {
        box-shadow: 0 0 16px rgba(74, 222, 128, 0.5), 0 0 4px rgba(74, 222, 128, 0.8);
    }
}

/* Override base dashFadeIn with smoother easing */
@keyframes dashFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered card entry */
.dash-card:nth-child(1) { animation-delay: 0s; }
.dash-card:nth-child(2) { animation-delay: 0.08s; }
.dash-card:nth-child(3) { animation-delay: 0.16s; }
.dash-card:nth-child(4) { animation-delay: 0.24s; }
.dash-card:nth-child(5) { animation-delay: 0.32s; }
.dash-card:nth-child(6) { animation-delay: 0.40s; }
.dash-card:nth-child(7) { animation-delay: 0.48s; }


/* ----------------------------------------------------------------
   25. Scrollbar
   ---------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(74, 222, 128, 0.2) transparent;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.25), rgba(108, 140, 255, 0.25));
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.4), rgba(108, 140, 255, 0.4));
}


/* ----------------------------------------------------------------
   26. Focus & Accessibility
   ---------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--energy);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--energy);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ----------------------------------------------------------------
   27. Responsive — Tablet (1024px)
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    .dashboard__grid {
        grid-template-columns: 1fr;
    }

    .chat-drawer {
        --drawer-width: 340px;
    }

    /* Reduce blur for performance on tablets */
    .dash-card,
    .pipeline,
    .wizard,
    .progress-narrative__inner {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}


/* ----------------------------------------------------------------
   28. Responsive — Mobile (800px)
   ---------------------------------------------------------------- */
@media (max-width: 800px) {
    .header {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .chat-drawer {
        width: 100vw;
        --drawer-width: 100vw;
    }

    /* On mobile, backdrop status fills whole screen behind chat */
    .backdrop-status {
        right: 0;
    }

    .backdrop-status__text {
        font-size: 1.5rem;
    }

    .backdrop-status__icon {
        font-size: 2rem;
    }

    .dash-card:hover {
        transform: none;
    }

    .wizard__option:hover {
        transform: none;
    }

    .landing__hero {
        padding: 16px;
    }
}


/* ----------------------------------------------------------------
   29. Responsive — Ultra-wide (1600px+)
   ---------------------------------------------------------------- */
@media (min-width: 1600px) {
    .dashboard__grid {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }

    .landing__hero {
        max-width: 720px;
    }
}


/* ----------------------------------------------------------------
   30. Print — Graceful Degradation
   ---------------------------------------------------------------- */
@media print {
    * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .dash-card,
    .wizard,
    .pipeline,
    .report__card {
        background: #1a1d27 !important;
        box-shadow: none !important;
    }

    .dash-card::before,
    .report__card::before {
        display: none !important;
    }
}

/* ============================================================
   History panel — per-user past assessments (right-side drawer)
   ============================================================ */
.history-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 92vw);
    background: var(--glass-bg, #1a1f2e);
    border-left: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    box-shadow: -8px 0 32px rgba(0,0,0,0.4);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.history-panel__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}
.history-panel__title { margin: 0; font-size: 1rem; font-weight: 600; }
.history-panel__close {
    background: none; border: none; color: var(--text-secondary, #94a3b8);
    font-size: 1.4rem; cursor: pointer; padding: 0 6px;
}
.history-panel__close:hover { color: var(--text-bright, #fff); }
.history-panel__status {
    padding: 8px 18px; font-size: 0.78rem; opacity: 0.7;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.05));
}
.history-panel__list {
    flex: 1; overflow-y: auto; padding: 8px 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.history-item {
    position: relative;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.history-item:hover {
    background: rgba(108,140,255,0.08);
    border-color: rgba(108,140,255,0.25);
}
.history-item__head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.74rem; opacity: 0.7; margin-bottom: 4px;
}
.history-item__kwh { font-weight: 700; color: var(--accent, #6c8cff); opacity: 1; }
.history-item__main { font-size: 0.92rem; line-height: 1.35; }
.history-item__sub { opacity: 0.7; font-size: 0.84rem; }
.history-item__tags { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.history-item__poor {
    font-size: 0.72rem; padding: 2px 8px; border-radius: 10px;
    background: rgba(248,113,113,0.15); color: #f87171;
}
.history-item__safe {
    font-size: 0.72rem; padding: 2px 8px; border-radius: 10px;
    background: rgba(74,222,128,0.15); color: #4ade80;
}
.history-item__delete {
    position: absolute; top: 8px; right: 8px;
    width: 22px; height: 22px;
    background: none; border: none; color: rgba(255,255,255,0.35);
    font-size: 1.1rem; line-height: 1; cursor: pointer; border-radius: 4px;
}
.history-item__delete:hover { color: #f87171; background: rgba(248,113,113,0.1); }

/* ============================================================
   Unified chat drawer — header actions + list view
   ============================================================ */
.chat-drawer__header {
    display: flex; align-items: center; gap: 8px;
}
.chat-drawer__back {
    background: none; border: none; color: var(--text-secondary, #94a3b8);
    cursor: pointer; padding: 4px 6px; border-radius: 6px; line-height: 0;
}
.chat-drawer__back:hover { color: var(--text-bright, #fff); background: rgba(255,255,255,0.06); }
.chat-drawer__action {
    margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
    background: rgba(108,140,255,0.12); border: 1px solid rgba(108,140,255,0.25);
    color: var(--accent, #6c8cff);
    padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; cursor: pointer;
}
.chat-drawer__action:hover { background: rgba(108,140,255,0.22); }

.chat-drawer__list {
    flex: 1; overflow-y: auto; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.chat-list__status {
    font-size: 0.78rem; opacity: 0.75; padding: 4px 4px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.chat-list__items {
    display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.chat-list__error {
    padding: 12px; background: rgba(248,113,113,0.07);
    border: 1px solid rgba(248,113,113,0.2); border-radius: 8px;
    font-size: 0.85rem; color: var(--text-bright, #fff);
}
.chat-list__error a { color: var(--accent, #6c8cff); }

.chat-drawer__chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ============================================================
   Conversations panel — side-by-side layout (no overlay blur)
   ============================================================ */

/* Backdrop is no longer used — the panel sits beside the dashboard
   instead of overlaying it. Keep the element invisible/inert so any
   legacy code that toggles its class is harmless. */
.chat-backdrop,
.chat-backdrop--visible {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
}

/* When the conversations drawer is open, shrink the dashboard so
   nothing is hidden behind the drawer. The drawer sits on the right. */
.dashboard-view.dashboard-view--chat-open,
body.chat-drawer-open .dashboard-view,
body.chat-drawer-open .dashboard__grid {
    padding-right: var(--drawer-width-effective, 420px) !important;
    transition: padding-right 0.3s ease;
}
body.chat-drawer-open .dash-card--map-hero { /* let the map breathe */
    min-height: 320px;
}

@media (max-width: 1100px) {
    /* On narrower screens the side-by-side layout would crush the
       dashboard. Fall back to the legacy overlay behavior, but still
       without the blur — we just let the drawer cover the dashboard. */
    body.chat-drawer-open .dashboard-view,
    body.chat-drawer-open .dashboard__grid {
        padding-right: 0 !important;
    }
}

/* "+ New chat" pinned at top of list view */
.chat-list__new {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: rgba(108,140,255,0.12);
    border: 1px solid rgba(108,140,255,0.3);
    color: var(--accent, #6c8cff);
    border-radius: 8px;
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
    width: 100%;
}
.chat-list__new:hover {
    background: rgba(108,140,255,0.22);
    border-color: rgba(108,140,255,0.45);
}

/* Defensive: backdrop-status overlay removed 2026-05-07.
   If any cached version of index.html still has the element, keep it
   invisible so the dashboard isn't covered by a duplicate progress
   indicator. */
.backdrop-status,
.backdrop-status--visible {
    display: none !important;
}

/* "+ New chat" / "Wizard" two-button row at top of conversations list */
.chat-list__actions {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.chat-list__actions .chat-list__new {
    margin-bottom: 0;
    flex: 1;
}
.chat-list__wizard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: var(--purple, #a78bfa);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
}
.chat-list__wizard:hover {
    background: rgba(167, 139, 250, 0.22);
    border-color: rgba(167, 139, 250, 0.45);
}