/* Karmalipi AI Console - Phase 1 Revision 7 */

:root {
    /* Brand Colors */
    --km-teal: #2A4B59;
    --km-amber: #CF9003;

    /* Backgrounds */
    --km-bg-main: #FFFFFF;
    --km-bg-sidebar: #FFFCF2;

    /* UI Elements */
    --km-border: #E0E0E0;
    --km-surface: #FFFFFF;
    --km-text: #2D3436;
    --km-text-light: #636E72;
    --km-accent-light: rgba(207, 144, 3, 0.1);

    /* Layout - Rev 7: Wider Left Sidebar (350px) */
    --cols-layout: 350px 1fr 70px;
    --radius: 12px;
}

/* Suggestion Chips */
.suggestion-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 600px;
    margin: 20px auto 0 auto;
}

.suggestion-chip {
    background: transparent;
    border: 1px solid rgba(207, 144, 3, 0.4);
    color: var(--km-text);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.suggestion-chip:hover {
    background: var(--km-accent-light);
    border-color: var(--km-amber);
    transform: translateY(-2px);
}


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    background-color: var(--km-bg-main);
    color: var(--km-text);
    overflow: hidden;
}





.mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh; height: 100dvh;
    background: var(--km-bg-sidebar);
    z-index: 11000;
    /* Drawer Layer - Above Overlays (10000) */
    /* REV 7.6: Higher than everything */
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    padding: 20px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-drawer.active {
    transform: translateX(0);
    display: flex;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.drawer-logo {
    height: 24px;
}

#close-drawer-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--km-text);
    cursor: pointer;
}

.drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.drawer-item {
    font-size: 16px;
    color: var(--km-teal);
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-item:hover,
.drawer-item.active {
    background: var(--km-surface);
    color: var(--km-amber);
}

.drawer-separator {
    height: 1px;
    background: var(--km-border);
    margin: 10px 0;
}

.ml-auto {
    margin-left: auto;
}

.drawer-submenu {
    padding-left: 20px;
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 5px;
}

.drawer-submenu.show {
    display: flex;
}

.submenu-item {
    font-size: 14px;
    color: var(--km-text-light);
    padding: 5px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: center;
}



/* High Specificity Logo Override */
/* High Specificity Logo Override */
.dashboard-panel .logo-full,
.dash-title .logo-full,
/* Override layout.css */
.logo-full {
    height: 42px !important;
    /* User requested pleasant size */
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* MATCH LOGO SIZE */
.sidebar-logo {
    height: 38px !important;
    /* Match logo-full */
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Logo icon — expanded state matches wordmark height.
   Collapsed state is overridden in console.html inline block to 32px. */
.dash-title .logo-icon {
    height: 26px;
    /* Decreased size for icon-only logo to visually match full logo */
    width: auto;
    object-fit: contain;
    display: block;
}


/* --- CENTER PANEL (scrollable content) --- */

.view-container {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 120px;
    padding-top: 20px;
    scroll-behavior: smooth;
    min-height: 0;
    /* Critical for Flexbox scrolling */
}


/* SCROLLBAR STYLING — fixed width (no layout shift, gutter reserved) */
/* Thin always-visible track; thumb darkens on scrollbar hover only */
.view-container,
.chat-history,
.stage-view {
    scrollbar-gutter: stable;
    /* Reserve gutter so content never shifts */
}

.view-container::-webkit-scrollbar,
.chat-history::-webkit-scrollbar,
.stage-view::-webkit-scrollbar {
    width: 8px;
}

.view-container::-webkit-scrollbar-track,
.chat-history::-webkit-scrollbar-track,
.stage-view::-webkit-scrollbar-track {
    background: transparent;
}

.view-container::-webkit-scrollbar-thumb,
.chat-history::-webkit-scrollbar-thumb,
.stage-view::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.12);
    border-radius: 10px;
}

/* Darken ONLY when cursor is on the scrollbar thumb itself */
.view-container::-webkit-scrollbar-thumb:hover,
.chat-history::-webkit-scrollbar-thumb:hover,
.stage-view::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.42);
}




/* Selectors */
.selectors-row {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    position: relative;
    z-index: 3000;
    /* EXPERT FIX: Higher than sidebars (2000) so centered tooltips float OVER them */
}

.selector-container {
    position: relative;
}

.selector-trigger {
    width: auto;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Icon on left, text next to it */
    gap: 8px;
    border-radius: 16px;
    color: var(--km-teal);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    position: relative;
    white-space: nowrap;
    /* Prevent abnormal stacking */
}

.selector-trigger:hover {
    background: var(--km-accent-light);
    color: var(--km-amber);
}

.selector-trigger.active-menu {
    background: var(--km-accent-light);
    color: var(--km-amber);
}

/* Popup Defaults (Desktop) */
.selector-popup {
    position: absolute;
    bottom: 150%;
    right: 0;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--km-surface);
    border: 1px solid var(--km-border);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 10px;
    min-width: 170px;
    z-index: 15000 !important;
    /* Above Input Bar (2000) but below Modals (25000) */
    margin-bottom: 10px;
    display: none;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    overflow: hidden;
    /* Scroll is handled by .scrollable-menu inside */
    max-height: 320px;
}

/* REV 37: Wide Menu for Themes */
.selector-popup.wide-popup {
    min-width: 280px !important;
}

.selector-popup.show {
    display: block;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Override for Right Sidebar */
.right-sidebar .selector-popup {
    right: 120%;
    /* Safely to the left of the sidebar */
    left: auto;
    bottom: 0;
    transform: none;
}

.right-sidebar .selector-popup.show {
    transform: none;
}

.scrollable-menu {
    max-height: 200px;
    overflow-y: auto;
}

/* ... Scrollbar ... */
.scrollable-menu::-webkit-scrollbar {
    width: 4px;
}

.scrollable-menu::-webkit-scrollbar-thumb {
    background: var(--km-border);
    border-radius: 2px;
}

/* ... */
.scrollable-menu::-webkit-scrollbar-thumb {
    background: var(--km-border);
    border-radius: 2px;
}

.popup-title {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--km-amber);
    font-weight: 700;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--km-border);
    padding-bottom: 4px;
    text-align: center;
}

.popup-item {
    padding: 6px 10px;
    font-size: 12px;
    color: var(--km-text);
    border-radius: 4px;
    cursor: pointer;
    white-space: normal;
    /* Allow desc to wrap */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Inline description subtext inside popup items */
.popup-desc {
    display: block;
    font-size: 10px;
    color: var(--km-text-light);
    font-weight: 400;
    line-height: 1.3;
    opacity: 0.8;
    margin-top: 1px;
}

.popup-item:hover {
    background: var(--km-accent-light);
    color: var(--km-amber);
}

.popup-item.active {
    background: var(--km-amber);
    color: #fff;
}

/* WCAG fix: description text must be white on amber background */
.popup-item.active .popup-desc {
    color: rgba(255, 255, 255, 0.82);
}

/* Scrollable container inside popup — constrains long lists (e.g. language picker) */
.scrollable-menu {
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* thin scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--km-amber) transparent;
}

.scrollable-menu::-webkit-scrollbar {
    width: 4px;
}

.scrollable-menu::-webkit-scrollbar-track {
    background: transparent;
}

.scrollable-menu::-webkit-scrollbar-thumb {
    background-color: var(--km-amber);
    border-radius: 4px;
}

.popup-grid {
    display: grid;
    gap: 4px;
}

.two-col {
    grid-template-columns: 1fr 1fr;
}

/* ... */

/* --- RIGHT SIDEBAR --- */
.right-sidebar {
    grid-area: right;
    background: var(--km-bg-sidebar);
    border-left: 1px solid var(--km-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    gap: 30px;
    z-index: 1200;
    /* REV 8.3: Higher than Input Bar (900) */
    overflow: visible;
    /* REV 7.6: Allow Popups to overflow */
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.nav-item {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--km-teal);
    font-size: 18px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.nav-item:hover {
    background: rgba(42, 75, 89, 0.1);
}

.nav-item.active {
    background: var(--km-teal);
    color: #fff;
    box-shadow: 0 4px 10px rgba(42, 75, 89, 0.3);
}

/* Custom Tooltips (Left) */

/* SUPPRESS LAYOUT.CSS CONFLICT - DISABLED (Was hiding rich tooltip) */
/* .nav-icon[data-label]:hover::after { content: none !important; display: none !important; } */

/* 1. Standard Tooltip (Single Line) - For Menus */
/* 1. Standard Tooltip (Single Line) - For Menus */
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 120%;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    /* White Background */
    border: 1px solid var(--km-amber);
    /* Amber Border */
    color: var(--km-teal);
    /* Teal Text */
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    white-space: pre-wrap;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 150px;
    font-weight: 500;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    right: 100%;
    /* Arrow touches border */
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent var(--km-amber);
    /* Amber Arrow */
    z-index: 9999;
}

/* Nav Rail Rich Tooltip — styled by JS (see tooltip engine below) */
/* The [data-tooltip-head] elements use a JS-injected tooltip div */
/* so that head and description can be styled independently */

/* JS Tooltip element styles */
#km-tooltip {
    position: fixed;
    background: #fff;
    border: 1px solid var(--km-amber);
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    z-index: 99999;
    max-width: 220px;
    display: none;
    overflow: visible;
    /* allow ::after arrow to extend outside the rounded box */
    animation: tooltipFadeIn 0.08s ease;
}

#km-tooltip .km-tip-head {
    display: block;
    font-size: 13px;
    font-weight: 800;
    /* Extra bold for heading */
    color: #1A2A33;
    /* Rich dark slate for prominence */
    margin-bottom: 5px;
    line-height: 1.2;
}

#km-tooltip .km-tip-desc {
    display: block;
    font-size: 11px;
    font-weight: 400;
    /* Regular weight for description */
    color: var(--km-text-light);
    /* Muted gray for hierarchy */
    line-height: 1.5;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(6px);
    }

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

/* Amber arrow pointer — positioned fully OUTSIDE the right edge */
#km-tooltip::after {
    content: '';
    position: absolute;
    right: -13px;
    /* border-width is 6px → triangle is 12px wide → -13px clears the box */
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent var(--km-amber);
}

/* SLIM VARIANT: Minimal padding and smaller font for secondary items */
#km-tooltip.slim {
    padding: 6px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

#km-tooltip.slim .km-tip-head {
    margin-bottom: 0;
    font-size: 11px;
    font-weight: 600;
}

#km-tooltip.slim .km-tip-desc {
    font-size: 10px;
}

/* UPWARD VARIANT (For bottom selectors) */
#km-tooltip.tip-upward::after {
    right: auto;
    left: 50%;
    bottom: -13px;
    top: auto;
    transform: translateX(-50%);
    border-color: var(--km-amber) transparent transparent transparent;
}

/* Hidden by default; tablet media query styles/positions it */
.gen-exp-quick-menu {
    display: none;
}


.profile-section {
    margin-top: auto;
    position: relative;
}

.avatar-circle-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--km-amber);
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-popup {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 5px;
    /* REV 8.1: Tighter spacing */
    width: 220px;
    background: var(--km-surface);
    border: 1px solid var(--km-border);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 10px;
    display: none;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    transform: translateY(10px);
    z-index: 11000;
    /* Above Oracle Tray (1000) */
    /* REV 8.1: High Z-Index to overlap Input Bar */
}

.profile-popup.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.profile-header {
    border-bottom: 1px solid var(--km-border);
    padding-bottom: 8px;
    margin-bottom: 5px;
}

.profile-header strong {
    display: block;
    font-size: 13px;
    color: var(--km-teal);
}

.profile-header span {
    font-size: 10px;
    color: var(--km-text-light);
}

.profile-popup ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-popup li {
    padding: 8px;
    font-size: 12px;
    color: var(--km-text);
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: center;
    border-radius: 6px;
}

.profile-popup li:hover {
    background: var(--km-accent-light);
    color: var(--km-amber);
}



/* --- AI LOADER BUBBLE --- */
.karmalipi-loader {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(42, 75, 89, 0.12);
    border-left: 3px solid var(--km-teal);
    border-radius: 12px 12px 12px 6px;
    padding: 10px 14px;
    width: max-content;
    margin: 10px 0;
    align-self: flex-start;
    font-family: inherit;
    color: var(--km-teal);
}

.karmalipi-loader .loader-box {
    width: 28px;
    height: 28px;
    border: 2px solid var(--km-teal);
    border-radius: 6px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.karmalipi-loader .loader-dot {
    width: 6px;
    height: 6px;
    background: var(--km-amber);
    border-radius: 50%;
    position: absolute;
    animation: km-orbit 1.2s linear infinite;
}

@keyframes km-orbit {
    0% {
        transform: rotate(0deg) translateX(8px) rotate(0deg);
    }

    50% {
        transform: rotate(180deg) translateX(8px) rotate(-180deg);
    }

    100% {
        transform: rotate(360deg) translateX(8px) rotate(-360deg);
    }
}

.karmalipi-loader .loader-text {
    color: var(--km-teal);
    opacity: 0.95;
}

/* --- INPUT ISLAND (Global) --- */
.input-island-container {
    position: fixed;
    bottom: 30px;
    left: 350px;
    /* REV 8.4: Match Left Sidebar */
    right: 70px;
    /* REV 8.4: Match Right Sidebar */
    display: flex;
    justify-content: center;
    padding: 0 40px;
    pointer-events: none;
    /* REV 8.1: Lower than Profile (2000) */
    z-index: 900;
}

.input-island {
    pointer-events: auto;
    width: 100%;
    max-width: 750px;
    background: var(--km-surface);
    border: 1px solid #bbb;
    /* Visible Border */
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- Responsive (900px & Tablet Portrait) --- */
@media (max-width: 900px), (max-width: 1024px) and (orientation: portrait) {
    #app-container {
        grid-template-columns: 1fr;
        grid-template-areas: "mobile_header" "center";
        grid-template-rows: 60px 1fr;
    }

    .left-sidebar,
    .right-sidebar {
        display: none;
    }

    .mobile-header {
        display: flex;
    }

    .view-container {
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Match Layout.css view-container padding */
    .view-container {
        padding-bottom: 120px !important;
    }

    /* Mobile Profile Trigger */
    .profile-trigger-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        border-radius: 8px;
        color: var(--km-teal);
        font-weight: 500;
        cursor: pointer;
        border: 1px solid var(--km-border);
        margin-top: auto;
    }

    .profile-trigger-mobile:hover {
        background: var(--km-surface);
    }

    .mobile-profile-menu {
        display: none;
        flex-direction: column;
        gap: 5px;
        padding-left: 15px;
        margin-top: 5px;
        border-left: 2px solid var(--km-border);
        /* REV 8.1: Scroll Support */
        max-height: 50vh;
        overflow-y: auto;
    }

    .mobile-profile-menu.show {
        display: flex;
    }

    /* Mobile Chart Panel */
    .mobile-chart-panel {
        display: none;
        background: var(--km-surface);
        padding: 10px;
        border-bottom: 1px solid var(--km-border);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }

    .mobile-chart-panel.active {
        display: flex;
        flex-direction: column;
        height: 350px;
        z-index: 900;
    }
}

/* 2. Mobile Bottom Sheets (The "One True Layout") */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {

    /* Reset any previous transforms/positions */
    .selector-container .selector-popup,
    .selector-container:last-child .selector-popup,
    .right-sidebar .selector-popup {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateY(100%) !important;
        /* Start off-screen */

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        position: fixed !important;
        z-index: 20000 !important;
        /* Above everything */

        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
        display: block !important;
        /* Ensure it's layout-ready */
        visibility: hidden;
        /* Hide until 'show' */
        opacity: 1 !important;
    }

    /* Active State */
    .selector-container .selector-popup.show,
    .selector-container:last-child .selector-popup.show,
    .right-sidebar .selector-popup.show {
        transform: translateY(0) !important;
        /* Slide Up */
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Handle/Grip Indicator */
    .selector-popup::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #e0e0e0;
        border-radius: 2px;
        margin: 10px auto 15px auto;
    }
}

/* Handle/Grip Indicator */
.selector-popup::before {
    content: ' ';
    display: block;
    width: 40px;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin: 10px auto 15px auto;
}

/* REV 86: Mobile Tweaks (Sessions) */
@media (max-width: 900px) {
    .side-drawer.right-drawer {
        width: 85%;
    }

    /* Fix Mobile Overlap */
    .side-drawer {
        z-index: 11000 !important;
        /* Above everything */
    }

    /* Hide Logo in Chart Header on Mobile */
    .chart-dashboard .chart-header .logo-container,
    .chart-dashboard .chart-header .brand-text {
        display: none !important;
    }
}

/* REV 82: Global Drawer Overlay — hidden by default, activated via .show class by JS */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; height: 100dvh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    /* Overlay Background Layer */
    /* Below Drawer (11000) but above everything else */
    display: none !important;
    pointer-events: none;
}

/* Activated ONLY when JS explicitly opens a drawer */
.drawer-overlay.show {
    display: block !important;
    pointer-events: all;
}

/* REV 80: Sessions Drawer Styles */
.side-drawer {
    position: fixed;
    top: 0;
    height: 100vh; height: 100dvh;
    background: var(--km-bg-main);
    z-index: 11000;
    /* Above Oracle Tray (1000) and Overlay (10000) */
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
}

.right-drawer {
    right: 0;
    width: 320px;
    border-left: 1px solid var(--km-border);
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--km-border);
    background: var(--km-bg-sidebar);
}

.drawer-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--km-teal);
    font-family: 'Cinzel Decorative', serif;
}

.close-drawer-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--km-text-light);
    cursor: pointer;
}

.drawer-actions {
    padding: 15px 20px;
    border-bottom: 1px solid var(--km-border);
    background: var(--km-surface);
}

.journey-profile-filter-wrap {
    padding-top: 10px;
    padding-bottom: 14px;
}

.journey-profile-filter-label {
    display: block;
    margin: 0 0 8px 0;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--km-text-light);
}

.journey-profile-filter-box {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    border: 1px solid rgba(42, 75, 89, 0.2);
    border-radius: 12px;
    background: rgba(42, 75, 89, 0.04);
    padding: 0 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.journey-profile-filter-box:focus-within {
    border-color: rgba(42, 75, 89, 0.45);
    box-shadow: 0 0 0 3px rgba(42, 75, 89, 0.12);
    background: #fff;
}

.journey-profile-filter-box i {
    color: var(--km-amber);
    font-size: 1.15rem;
}

#journey-profile-filter {
    width: 100%;
    min-height: 38px;
    border: none !important;
    border-radius: 8px;
    background: transparent !important;
    font-weight: 600;
    color: var(--km-teal);
    padding: 0 26px 0 0 !important;
}

#journey-profile-filter:focus {
    outline: none;
}

.action-btn-primary {
    width: 100%;
    background: var(--km-teal);
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}

.action-btn-primary:hover {
    background: #1e3641;
}

.sessions-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.session-item {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.session-item:hover {
    background: var(--km-bg-sidebar);
    border-color: var(--km-border);
}

.session-item.active {
    background: rgba(207, 144, 3, 0.08);
    /* Amber tint */
    border-color: rgba(207, 144, 3, 0.3);
}

.s-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* REV 83: Session Delete Button */
.session-item {
    position: relative;
    /* Anchor for btn */
    padding-right: 35px;
    /* Space for delete btn */
}

.session-delete-btn {
    opacity: 0;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #ff4444;
    /* Red for delete */
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Show on Hover (Desktop) or always if mobile? Hover is fine for now */
.session-item:hover .session-delete-btn {
    opacity: 1;
}

.session-delete-btn:hover {
    background: rgba(255, 68, 68, 0.1);
}

/* REV 83: Loader Bubble Style */
.loading-bubble-container {
    background: var(--km-surface);
    border: 1px solid var(--km-border);
    padding: 12px 16px;
    border-radius: 18px;
    border-bottom-left-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    width: fit-content;
    animation: fadeIn 0.3s ease;
}

.loader-dot {
    width: 8px;
    height: 8px;
    background: var(--km-gold);
    border-radius: 50%;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.5;
        transform: scale(0.9);
    }

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

    100% {
        opacity: 0.5;
        transform: scale(0.9);
    }
}



.s-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--km-teal);
    line-height: 1.3;
}

.s-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--km-text-light);
}

.s-icon {
    font-size: 1rem;
    color: var(--km-amber);
    margin-right: 6px;
    vertical-align: text-bottom;
}

/* --- DYNAMIC DASHBOARD STYLES --- */

/* Interactive Chat Keys */
.interactive-key {
    cursor: pointer;
    background: rgba(207, 144, 3, 0.05);
    /* very soft amber tint */
    border-radius: 6px;
    padding: 2px 6px;
    color: var(--km-teal);
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 10;
    border: 1px solid transparent;
    /* Prepare for hover */
}

.interactive-key:hover {
    background: rgba(207, 144, 3, 0.15);
    color: var(--km-teal);
    border-color: rgba(207, 144, 3, 0.3);
    box-shadow: 0 2px 8px rgba(207, 144, 3, 0.1);
}

/* SVG Highlights */
/* SVG Highlights */
.active-highlight {
    fill: #E67E22 !important;
    font-weight: 900 !important;
    font-size: 1.2em;
}

/* Specific Element Overrides for Sharpness */
text.active-highlight {
    fill: #D35400 !important;
    /* Burnt Orange for better contrast */
    stroke: none !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    /* Sharp shadow */
    filter: none !important;
}

rect.active-highlight,
circle.active-highlight,
polygon.active-highlight {
    stroke: #E67E22 !important;
    stroke-width: 3px !important;
    fill: rgba(230, 126, 34, 0.15) !important;
    filter: none !important;
}

/* Aspect Highlights (Dashed - Secondary) */
.aspect-target,
.aspect-highlight {
    stroke: var(--km-teal-light) !important;
    stroke-width: 2px !important;
    stroke-dasharray: 4, 3;
    fill: rgba(0, 255, 230, 0.05) !important;
    /* Subtle tint */
    transition: all 0.3s ease;
}

.aspect-source {
    stroke: var(--km-amber) !important;
    /* Orange/Amber for Incoming */
    stroke-width: 2px !important;
    stroke-dasharray: 4, 3;
    fill: rgba(255, 159, 67, 0.05) !important;
    transition: all 0.3s ease;
}

/* Text overrides for Aspects (Planets) */
text.aspect-target,
text.aspect-highlight {
    fill: var(--km-teal) !important;
    stroke: none !important;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 255, 230, 0.4);
}

text.aspect-source {
    fill: var(--km-amber) !important;
    stroke: none !important;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 159, 67, 0.4);
}

/* Ensure Polygon zones are clickable but transparent normally */
.chart-interactive-zone {
    cursor: pointer;
    transition: all 0.2s;
}

.chart-interactive-zone:hover {
    fill: rgba(255, 215, 0, 0.05);
    /* Very subtle hover hint */
}

/* Nadi Overlays (SVG) */
/* Nadi Overlays (SVG) - Base Styles */
.nadi-overlay-active {
    outline: 2px solid var(--km-gold);
    border-radius: 50%;
}

/* Simulated Overlay Rings */
.nadi-overlay-major circle,
.nadi-overlay-major path {
    stroke: #ffd700 !important;
    stroke-width: 3px !important;
    stroke-dasharray: 4 2;
}

.nadi-overlay-minor circle,
.nadi-overlay-minor path {
    stroke: #c0c0c0 !important;
    stroke-width: 2px !important;
    stroke-dasharray: 2 2;
}

.nadi-overlay-sukshma {
    fill: #ff4444 !important;
    font-weight: bold;
}

/* Multi-Chart Grid */
.chart-wrapper {
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-label {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: var(--km-text-light);
    text-transform: uppercase;
    font-weight: 700;
}

.chart-svg-host {
    width: 100%;
    display: flex;
    justify-content: center;
}


/* --- SUB-TABS (Compact Header Version) --- */
/* --- SUB-TABS (Compact Header Version) --- */
.compact-header-tabs {
    display: flex;
    gap: 6px;
    margin-left: auto;
    padding: 2px 6px;
    align-items: center;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 20px;
}

.compact-header-tabs .sub-tab-item {
    font-size: 10px;
    flex-shrink: 0 !important;
    /* Critical override */
    padding: 3px 10px;
    background: #fff;
    border: 1px solid var(--km-border);
    color: var(--km-text-light);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.compact-header-tabs .sub-tab-item:hover {
    border-color: var(--km-teal);
    color: var(--km-teal);
    transform: translateY(-1px);
}

.compact-header-tabs .sub-tab-item.active {
    background: var(--km-teal);
    color: #fff;
    border-color: var(--km-teal);
    box-shadow: 0 2px 4px rgba(0, 128, 128, 0.25);
}


/* --- SUB-TABS (Chart Navigation - Generic) --- */
.chart-sub-tabs-bar {
    /* Legacy / Fallback Styles */
    display: flex;
    gap: 6px;
    padding: 6px 0;
    margin-bottom: 2px;
    /* removed border/sticky for compact mode mainly */
}

/* Renamed original class usage or use generic if needed */
/* Renamed original class usage or use generic if needed */
.sub-tab-item {
    /* Base styles mainly covered above but defining defaults here */
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--km-surface);
    color: var(--km-text-light);
    cursor: pointer;
    border: 1px solid var(--km-border);
    transition: all 0.2s;
}

.sub-tab-item:hover {
    background: var(--km-bg-main);
    color: var(--km-teal);
    border-color: var(--km-teal);
}

.sub-tab-item.active {
    background: var(--km-teal);
    color: #fff;
    border-color: var(--km-teal);
}

.single-view {
    /* Optimize for single rendering */
    max-width: 600px;
    margin: 0 auto;
    border: none;
    box-shadow: none;
}

/* --- MARKDOWN STYLES --- */
.interactive-key {
    color: var(--km-teal);
    font-weight: 600;
    cursor: pointer;
    border-bottom: none;
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(207, 144, 3, 0.05);
    /* very soft amber tint */
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid transparent;
}

.interactive-key:hover {
    background: rgba(207, 144, 3, 0.15);
    color: var(--km-teal);
    border-color: rgba(207, 144, 3, 0.3);
    box-shadow: 0 2px 8px rgba(207, 144, 3, 0.1);
}

.md-list-item {
    margin-left: 10px;
    margin-bottom: 4px;
    font-size: 0.95em;
    line-height: 1.4;
    display: block;
}

/* FINAL TOOLTIP FIX OVERRIDE (Appended) */
/* INCREASED SPECIFICITY to beat layout.css */
.nav-icon[data-tooltip-head]:hover::after {
    /* Concatenation Fix */
    content: attr(data-tooltip-head) "\A" attr(data-tooltip-desc);
    position: absolute;
    right: 125% !important;
    /* Shift further left */
    top: 50%;
    transform: translateY(-50%);
    background: #fff !important;
    /* White Background */
    border: 1px solid var(--km-amber) !important;
    /* Amber Border */
    color: var(--km-teal) !important;
    /* Teal Text */
    padding: 10px 14px !important;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap !important;
    /* Force multi-line */
    text-align: left;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    min-width: 180px;
    opacity: 1 !important;
    /* Force visible */
    pointer-events: none;
    z-index: 16000 !important;
    /* Peak visibility */
    display: block !important;
}

/* === KM CONTEXT MENU (Floating Profile Menu) === */
.km-context-menu {
    position: absolute;
    bottom: calc(100% + 15px);
    right: 0;
    width: 260px;
    background: #fff;
    border: 1px solid var(--km-amber);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    padding: 20px;
    display: flex;
    /* Always flex — visibility controls show/hide */
    flex-direction: column;
    gap: 16px;
    z-index: 15000;
    /* Hidden by default via visibility + opacity */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease 0s, visibility 0s linear 0.1s;
    /* instant hide */
}

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

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

/* === EXPANDED TRAY: Profile button — menu opens UPWARD === */
#profile-btn {
    position: relative;
}

/* Transparent bridge: fills the gap between the icon and the floating menu above
   so the hover state doesn't break when moving cursor upward into the menu */
#profile-btn::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 20px;
    /* Covers the gap (calc(100% + 15px) offset) */
    background: transparent;
    pointer-events: all;
    /* Intercepts cursor movement through gap */
    display: none;
    /* Only shown when menu is visible */
}

#profile-btn:hover::before {
    display: block;
}

/* Show on hover with 300ms delay, hide with 400ms delay (prevents flicker) */
#profile-btn:hover .km-context-menu,
#profile-btn .km-context-menu:hover {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.1s ease 0.1s, visibility 0s linear 0.1s;
}

/* Delayed hide — menu stays 400ms after cursor leaves */
#profile-btn .km-context-menu {
    transition: opacity 0.1s ease 0.2s, visibility 0s linear 0.3s;
}

/* === COLLAPSED TRAY STRIP: Profile icon — menu opens to the LEFT === */
.km-context-menu-collapsed {
    bottom: auto !important;
    top: 50% !important;
    right: calc(100% + 12px) !important;
    /* Opens LEFT of the icon */
    left: auto !important;
    transform: translateY(-50%) !important;
}

@keyframes menuFadeInLeft {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

.km-profile-icon-collapsed {
    position: relative;
}

/* Transparent bridge to the LEFT (menu is to the left of icon) */
.km-profile-icon-collapsed::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 0;
    bottom: 0;
    width: 16px;
    background: transparent;
    pointer-events: all;
    display: none;
}

.km-profile-icon-collapsed:hover::before {
    display: block;
}

/* Show on hover; stay visible when hovering the menu itself */
.km-profile-icon-collapsed:hover .km-context-menu,
.km-profile-icon-collapsed .km-context-menu:hover {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
    transition: opacity 0.1s ease 0.1s, visibility 0s linear 0.1s;
}

.km-profile-icon-collapsed .km-context-menu {
    transition: opacity 0.1s ease 0.2s, visibility 0s linear 0.3s;
}


/* Suppress the ::after tooltip text when the floating menu is hovered */
.km-profile-icon-collapsed:hover::after {
    display: none !important;
}

.km-context-menu .menu-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 12px;
}

#menu-user-name {
    font-weight: 700;
    color: var(--km-teal);
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#menu-user-email {
    font-size: 0.8rem;
    color: var(--km-text-light);
    margin-top: 2px;
}

.menu-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--km-teal);
    background: rgba(42, 75, 89, 0.05);
    padding: 10px 14px;
    border-radius: 8px;
}

.menu-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menu-action-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: var(--km-teal);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition-property: transform, opacity, background-color, border-color, color;
    transition-duration: 100ms;
    transition-timing-function: ease-out;
}

.menu-action-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.menu-action-btn.secondary {
    background: #f5f1e6;
    color: var(--km-teal);
    border: 1px solid var(--km-border);
}

.menu-action-btn.secondary:hover {
    background: #ebe6d9;
}

/* Loader text fade transition for rotating phrases */
.loader-text {
    transition: opacity 0.3s ease;
}

/* ============================================================ */
/* VIVEKA TRACE — Premium Cognitive Derivation Block            */
/* ============================================================ */

.viveka-trace-container {
    margin: 12px 0 20px 0;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(126, 200, 200, 0.04), rgba(126, 200, 200, 0.01));
    border: 1px solid rgba(126, 200, 200, 0.15);
    border-left: 3px solid var(--km-teal, #7ec8c8);
    font-family: var(--font-family-base, 'Inter', sans-serif);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.viveka-trace-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--km-teal, #7ec8c8);
    transition: background 0.2s ease;
}

.viveka-trace-toggle:hover {
    background: rgba(126, 200, 200, 0.06);
}

.vtt-left {
    display: flex;
    align-items: center;
}

.viveka-brain-icon {
    font-size: 1.1rem;
    margin-right: 8px;
    opacity: 0.9;
}

.viveka-toggle-text {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.viveka-chevron {
    font-size: 1.2rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.viveka-trace-container:not(.collapsed) .viveka-chevron {
    transform: rotate(-180deg);
}

.viveka-trace-body {
    padding: 4px 18px 14px 18px;
    display: block;
}

.viveka-trace-container.collapsed .viveka-trace-body {
    display: none;
}



.viveka-trace-content {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
}

.viveka-trace-content p {
    margin: 0 0 10px 0;
}

.viveka-trace-content p:last-child {
    margin-bottom: 0;
}

/* Fix markdown parser injecting newlines before lists and hide empty tags */
.viveka-trace-content>br:first-child,
.viveka-trace-content>br:last-child,
.viveka-trace-content>p:empty {
    display: none !important;
}

.viveka-trace-content .md-list-item:first-of-type {
    margin-top: 0 !important;
}

/* Interactive Keys inside Viveka Trace - Instant, no lag */
.viveka-trace-content .interactive-key {
    font-size: 0.85em !important;
    padding: 2px 6px !important;
    background: rgba(126, 200, 200, 0.06) !important;
    border: 1px solid rgba(126, 200, 200, 0.2) !important;
    border-radius: 4px !important;
    color: var(--km-teal, #7ec8c8) !important;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    white-space: nowrap;
}

.viveka-trace-content .interactive-key:hover {
    background: rgba(126, 200, 200, 0.15) !important;
    border-color: rgba(126, 200, 200, 0.4) !important;
}

/* --- UNIFIED MOBILE UX & ACTION STRIP (≤599px PHONES ONLY) --- */
/* NOTE: 600-768px range is handled by the layout.css grid + overlay drawer mechanism.
   Only screens narrower than 600px get the 50/50 flex-column split mode. */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {

    /* 1. Base Container */
    #app-container,
    .app-container {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important; height: 100dvh !important;
        overflow: hidden !important;
        padding-bottom: 0 !important;
        /* Removed Bottom Nav space */
    }

    /* Reduce bottom empty space for portrait chat mode */
    html body .app-container:not(.mobile-split-active) .input-stage-wrapper {
        bottom: 30px !important;
    }
    html body .app-container:not(.mobile-split-active) .ai-disclaimer {
        bottom: 2px !important;
        z-index: 1000 !important;
        display: block !important;
    }
    html body .app-container:not(.mobile-split-active) .stage-view {
        padding-bottom: 150px !important; 
    }

    /* Prevent flickering layout shift when header reappears on closing dashboard */
    html body .mobile-header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1500 !important;
    }
    html body .app-container.mobile-split-active .dashboard-pull-handle {
        display: none !important;
    }

    /* 2. Hamburger Nav Drawer (Slides from Top Right) */
    .mobile-nav-drawer {
        position: fixed !important;
        top: 0 !important;
        right: -280px;
        left: auto !important;
        width: 280px !important;
        height: 100vh !important; height: 100dvh !important;
        max-height: none !important;
        background: var(--km-surface) !important;
        border-left: 1px solid var(--km-border) !important;
        border-right: none !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.12) !important;
        z-index: 10001 !important;
        display: flex;
        flex-direction: column;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 20px 0;
        overflow-y: auto;
    }

    .app-container.mobile-menu-active .mobile-nav-drawer {
        right: 0;
    }

    /* Force overlay visibility when mobile menu is active */
    .app-container.mobile-menu-active .drawer-overlay {
        display: block !important;
        pointer-events: all !important;
        opacity: 1 !important;
        z-index: 10000 !important;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .nav-drawer-item {
        padding: 15px 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--km-teal);
        font-weight: 500;
        cursor: pointer;
        transition: background 0.2s;
    }

    .nav-drawer-item i {
        color: var(--km-amber);
        font-size: 20px;
    }

    .nav-drawer-item:hover,
    .nav-drawer-item.active {
        background: var(--km-bg-sidebar);
    }

    .nav-gen-exp-parent {
        justify-content: space-between !important;
    }

    .mobile-gen-exp-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-gen-exp-chevron {
        font-size: 20px;
        color: var(--km-text-light);
        transition: transform 120ms ease-out;
    }

    .mobile-gen-exp-submenu {
        display: none;
        flex-direction: column;
        gap: 6px;
        padding: 0 14px 10px 14px;
    }

    .mobile-gen-exp-submenu.open {
        display: flex;
    }

    .mobile-gen-exp-submenu.open+.nav-drawer-item,
    .mobile-gen-exp-submenu.open~.nav-drawer-item {
        border-top: none;
    }

    .mobile-gen-exp-subitem {
        border: none;
        background: rgba(42, 75, 89, 0.03);
        border-radius: 10px;
        color: var(--km-teal);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px 10px 14px;
        text-align: left;
        font-size: 0.88rem;
    }

    .mobile-gen-exp-subitem .material-icons-round {
        font-size: 18px;
        color: var(--km-amber);
    }

    .mobile-exp-badge {
        margin-left: auto;
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        border-radius: 9px;
        background: var(--km-amber);
        color: #fff;
        font-size: 0.68rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 3. Oracle Tray -> Right Side Drawer (For History) */
    .oracle-tray {
        position: fixed !important;
        top: 0;
        right: -320px;
        /* Hidden off-screen initially */
        height: 100vh; height: 100dvh;
        width: 320px !important;
        z-index: 8500;
        transform: none !important;
        /* CRITICAL: Prevents containing block that hides Action Strip */
        transition: right 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        border-left: 1px solid var(--km-border);
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
        background: var(--km-surface) !important;
    }

    .app-container.mobile-drawer-active .oracle-tray {
        right: 0;
    }

    /* FIX: Force expanded content visible when mobile drawer is active, even if tray has .collapsed class */
    .app-container.mobile-drawer-active .oracle-tray .tray-expanded-content {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .tray-collapsed-icons {
        display: none !important;
    }

    /* 4. Split-Screen Dashboard on Mobile */
    .dashboard-panel {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important; height: 100dvh !important;
        max-width: none !important;
        z-index: 9500 !important;
        transform: translateY(-200%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border-right: none !important;
        border-bottom: none !important;
        background: var(--km-surface) !important;
    }

    /* ===================================================
       PORTRAIT SPLIT: Chart (50vh top) / Chat (50vh bottom)
       =================================================== */
    .app-container.mobile-split-active .dashboard-panel {
        position: relative !important;
        height: 50% !important;
        width: 100% !important;
        transform: none !important;
        transition: none !important;
        border-bottom: 1px solid var(--km-border) !important;
        z-index: 10 !important;
        /* FIX: column so children stack vertically and fill the 50vh height */
        display: flex !important;
        flex-direction: column !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    /* Empty-state sizing in split mode (avoid overlap/clipping) */
    .app-container.mobile-split-active .empty-chart-hint {
        transform: none !important;
        transform-origin: center center !important;
        width: 100% !important;
        max-width: 330px !important;
        height: 100% !important;
        justify-content: center !important;
        margin: 0 auto !important;
        padding: 10px 14px !important;
        gap: 10px !important;
    }

    .app-container.mobile-split-active .empty-chart-hint .mandala-container {
        width: 120px !important;
        height: 120px !important;
        min-width: 120px !important;
        min-height: 120px !important;
        max-width: 120px !important;
        max-height: 120px !important;
        aspect-ratio: 1 / 1 !important;
        flex: 0 0 120px !important;
        margin-bottom: 4px !important;
    }

    .app-container.mobile-split-active .empty-chart-hint h3 {
        font-size: clamp(1rem, 3.8vw, 1.16rem) !important;
        line-height: 1.2 !important;
        letter-spacing: 0.07em !important;
    }

    .app-container.mobile-split-active .empty-chart-hint p {
        font-size: clamp(0.75rem, 2.5vw, 0.9rem) !important;
        line-height: 1.5 !important;
        margin-top: 0 !important;
        max-width: 260px !important;
    }

    /* Hide the chart footer in mobile split mode */
    .app-container.mobile-split-active .chart-view-caption,
    .app-container.mobile-split-active .chart-caption {
        display: none !important;
    }

    /* Hide the S/N toggle when empty chart hint is visible */
    .app-container.mobile-split-active .dashboard-panel:has(.empty-chart-hint) .chart-style-text-toggle {
        display: none !important;
    }

    /* Empty split view: remove chart-rail chrome around placeholder */
    .app-container.mobile-split-active.dashboard-empty .dashboard-panel {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .app-container.mobile-split-active.dashboard-empty .context-bar,
    .app-container.mobile-split-active.dashboard-empty .dash-tabs,
    .app-container.mobile-split-active.dashboard-empty .control-row {
        display: none !important;
    }

    .app-container.mobile-split-active.dashboard-empty .dash-content {
        padding: 0 !important;
    }

    .app-container.mobile-split-active.dashboard-empty #dash-section-charts {
        padding: 8px 12px !important;
        justify-content: center !important;
    }

    .app-container.mobile-split-active.dashboard-empty .chart-viz-container {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
    }

    .app-container.mobile-split-active .stage-panel {
        height: 50% !important;
        flex: none !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* ===================================================
       HIDE ALL UNWANTED DASHBOARD CHROME IN SPLIT MODE
       =================================================== */

    /* Edge collapse/expand chevron handle */
    .app-container.mobile-split-active #dash-edge-handle {
        display: none !important;
    }

    /* Entire header bar (logo) — close btn is re-shown via absolute position */
    .app-container.mobile-split-active .dash-header {
        display: none !important;
    }

    /* Collapsed-state SVG hint */
    .app-container.mobile-split-active .dash-collapsed-hint {
        display: none !important;
    }

    /* Charts/Planets tab switcher row */
    .app-container.mobile-split-active .dash-tabs {
        display: none !important;
    }

    /* App top header bar (hamburger + logo) */
    .app-container.mobile-split-active .mobile-header {
        display: none !important;
    }

    /* Input bar — correct class is .input-stage-wrapper */
    .app-container.mobile-split-active .input-stage-wrapper {
        display: none !important;
    }

    /* AI disclaimer text bar */
    .app-container.mobile-split-active .ai-disclaimer {
        display: none !important;
    }

    /* Chart controls row (adds unnecessary height) */
    .app-container.mobile-split-active .control-row {
        display: none !important;
    }

    /* Chart peek strip — shown by JS in chat area; must be hidden in split-active */
    .app-container.mobile-split-active #chart-peek-strip {
        display: none !important;
    }

    .app-container.mobile-split-active .dash-mobile-close {
        display: flex !important;
        position: absolute !important;
        top: 6px !important;
        right: 6px !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(42, 75, 89, 0.18) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10) !important;
        color: var(--km-teal) !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 9999 !important;
        cursor: pointer !important;
    }

    .app-container.mobile-split-active .dash-mobile-close .material-icons-round {
        font-size: 14px !important;
    }

    /* ===================================================
       VERTICAL CHART TAB RAIL (RIGHT side, 44px wide)
       — chips are vertically stacked circles, scrollable
       — padding-top reserves space for the close button
       — padding-bottom reserves space for N/S toggle
       =================================================== */
    .app-container.mobile-split-active .context-bar {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: 44px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding-top: 46px !important;
        padding-bottom: 68px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        z-index: 5 !important;
        gap: 6px !important;
    }

    /* Hide scrollbar track for clean rail look */
    .app-container.mobile-split-active .context-bar::-webkit-scrollbar {
        display: none !important;
    }

    /* sub-tabs-row: override the inline display:flex to stack vertically */
    .app-container.mobile-split-active .context-bar .sub-tabs-row {
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        gap: 6px !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        width: 100% !important;
        align-items: center !important;
    }

    .app-container.mobile-split-active .context-bar .sub-tabs-row::-webkit-scrollbar {
        display: none !important;
    }

    /* Chart tab chips — compact circles in the left rail */
    .app-container.mobile-split-active .context-bar .sub-tab-item {
        margin: 0 !important;
        width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        border-radius: 50% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 0.6rem !important;
        font-weight: 600 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        border: 1px solid rgba(42, 75, 89, 0.15) !important;
        background: #fff !important;
        color: var(--km-teal) !important;
        cursor: pointer !important;
        transition: background 0.15s, color 0.15s !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .app-container.mobile-split-active .context-bar .sub-tab-item.active {
        background: var(--km-primary, #004242) !important;
        color: #fff !important;
        border-color: var(--km-primary, #004242) !important;
    }

    /* ===================================================
       CHART CONTAINER — Fills remaining space perfectly
       =================================================== */
    .app-container.mobile-split-active .dash-content {
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    .app-container.mobile-split-active #dash-section-charts {
        flex: 1 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    /*
     * Chart viz container: explicit square = min(available-width, available-height)
     * Left rail is 44px. Legend + context bar ≈ 54px.
     * Portrait: 100vw - 44px often < 50vh − 54px → width-constrained (correct)
     * Landscape: 100vw - 44px often > 50vh − 54px → height-constrained (was overflowing before)
     * Using min() guarantees the chart always fits in both dimensions.
     */
    .app-container.mobile-split-active .chart-viz-container {
        width: min(calc(100vw - 52px), calc(50vh - 54px)) !important;
        height: min(calc(100vw - 52px), calc(50vh - 54px)) !important;
        aspect-ratio: 1 / 1 !important;
        flex: none !important;
        margin: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: #fdfbf5 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    /* SVG fills the explicitly-sized square container */
    .app-container.mobile-split-active .chart-viz-container svg {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        display: block !important;
    }

    .app-container.mobile-split-active .chart-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
    }

    .app-container.mobile-split-active .chart-svg-host {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        display: flex !important;
        /* FIX: stretch fills SVG to full height instead of centering it */
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    /* Legend: in-flow caption below chart.
       The JS injects: width:100%;display:block;text-align:center;
       We override: make it tiny, auto-width, centered. NOT absolutely positioned.
       !important beats inline styles on everything EXCEPT display, which we also override. */
    .app-container.mobile-split-active .chart-legend {
        display: block !important;
        position: static !important;
        /* cancel any prior absolute positioning */
        width: 100% !important;
        /* override JS width:100% */
        max-width: calc(100vw - 8px) !important;
        margin: 0 auto !important;
        padding: 0 6px !important;
        font-size: 0.6rem !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        color: #a0a8b0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 0 0 auto !important;
    }

    .app-container.mobile-split-active .control-row {
        display: none !important;
    }

    /* SVG fills the explicitly-sized square container at 100% */
    .app-container.mobile-split-active .chart-viz-container svg,
    .app-container.mobile-split-active .chart-svg-host>svg {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        display: block !important;
    }

    /* chart-wrapper and chart-svg-host must fill the container fully */
    .app-container.mobile-split-active .chart-wrapper {
        width: 100% !important;
        height: 100% !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* chart-svg-host: flex centering wrapper; chart-viz-container centers itself via margin:auto */
    .app-container.mobile-split-active .chart-svg-host {
        min-height: 0 !important;
        flex: 1 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    /* SVG rendered by backend: fills the square container */
    .app-container.mobile-split-active .chart-svg-host>svg {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        display: block !important;
    }

    /* SVG text: reduce native font sizes for compact mobile display.
       The SVG is rendered by jhora at a fixed coordinate space;
       scaling down the text avoids overlap in crowded houses. */
    .app-container.mobile-split-active .chart-svg-host svg text,
    .app-container.mobile-split-active .chart-viz-container svg text {
        font-size: 0.95em !important;
        /* increased for better readability */
    }

    /* N/S Toggle — Pinned to the BOTTOM of the left rail, always visible
       [FIX] Anchored with bottom offset so it never overlaps the tab chips
    */
    .app-container.mobile-split-active .dash-tabs {
        display: flex !important;
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        bottom: 0 !important;
        width: 44px !important;
        height: 64px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        z-index: 7 !important;
    }

    /* Hide the Charts/Planets tab buttons */
    .app-container.mobile-split-active .dash-tabs>div:first-child {
        display: none !important;
    }

    /* Make the S/N toggle vertical inside the bottom section of the rail */
    .app-container.mobile-split-active .chart-style-text-toggle {
        display: flex !important;
        flex-direction: column !important;
        border-radius: 12px !important;
        padding: 3px 2px !important;
        gap: 2px !important;
        background: rgba(42, 75, 89, 0.07) !important;
        border: 1px solid rgba(42, 75, 89, 0.15) !important;
    }

    .app-container.mobile-split-active .chart-style-text-toggle .separator {
        display: none !important;
    }

    .app-container.mobile-split-active .style-opt {
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        border-radius: 50% !important;
        color: var(--km-teal) !important;
        cursor: pointer !important;
    }

    .app-container.mobile-split-active .style-opt.active {
        background: var(--km-primary, #004242) !important;
        color: #fff !important;
    }

    /* Mobile landscape overrides are consolidated near end of file */

    /* 5. Mobile Menu Button */
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        color: var(--km-teal);
        cursor: pointer;
        border-radius: 50%;
        background: rgba(42, 75, 89, 0.05);
        transition: background 0.2s;
    }

    /* Peek strip replaces the old header chart icon */
    .app-container.mobile-split-active .chart-fab {
        color: var(--km-amber);
        background: rgba(207, 144, 3, 0.1);
    }

    .app-container.mobile-menu-active .mobile-menu-btn {
        color: var(--km-amber);
        background: rgba(207, 144, 3, 0.1);
    }

    /* === CHART PEEK STRIP — contextual dashboard trigger === */
    #chart-peek-strip {
        width: 100%;
        padding: 6px 12px;
        position: sticky;
        top: 0;
        z-index: 200;
        background: rgba(250, 248, 242, 0.96);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom: 1px solid rgba(42, 75, 89, 0.1);
        box-sizing: border-box;
    }

    .peek-inner {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: rgba(42, 75, 89, 0.05);
        border: 1px solid rgba(42, 75, 89, 0.15);
        border-radius: 22px;
        cursor: pointer;
        transition: transform 120ms ease-out, background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
    }

    .peek-icon {
        font-size: 18px;
        color: var(--km-amber);
    }

    .peek-label {
        flex: 1;
        font-family: var(--km-font-sans, sans-serif);
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--km-teal);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .peek-expand {
        font-size: 18px;
        color: var(--km-teal);
    }

    /* 7. Stage Panel & Input Island */
    .stage-panel {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        height: auto !important;
        padding-top: 0 !important;
    }

    .input-island-container {
        position: fixed !important;
        bottom: 0 !important;
        /* Sits natively at bottom, viewport resizes on keyboard open */
        left: 0 !important;
        right: 0 !important;
        padding: 10px !important;
        z-index: 1000 !important;
        width: auto !important;
        background: var(--km-bg-main) !important;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05) !important;
    }

    .view-container {
        padding-top: 60px !important;
        /* Space for action strip */
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 80px !important;
        /* Space for input island */
    }

    .kl-message {
        max-width: 95% !important;
    }

    /* 8. Mobile Modals Scrolling Fix */
    .modal-card {
        max-height: 85vh !important;
        overflow-y: auto !important;
        border-radius: 16px !important;
        margin: 10px !important;
        width: calc(100% - 20px) !important;
    }

    .mobile-only {
        display: flex !important;
    }

    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 768px) and (orientation: landscape), (min-width: 1025px) {
    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: flex !important;
    }

    .mobile-nav-drawer {
        display: none !important;
    }

    .mobile-chart-btn {
        display: none !important;
    }

    .mobile-menu-btn {
        display: none !important;
    }

    .action-strip-close {
        display: none !important;
    }

    .dash-mobile-close {
        display: none !important;
    }
}

/* ===================================================
   TABLET LAYOUT CONSTRAINTS (600px – 1100px)
   Oracle Tray is forced icon-only to protect the center stage.
   At ≤900px the tray is hidden entirely (mobile header replaces navigation).
   =================================================== */

/* 600px – 1100px: Oracle Tray stays collapsed (icon-only, 60px) — no expansion allowed */
/* Universal Default Hidden State */
.dashboard-pull-handle, .chart-bottom-grabber {
    display: none !important;
}

/* Unified Mobile & Tablet pull-tab below header:
   show on screens up to 765px width; hide on landscape mobile or when split is active. */
@media (max-width: 1024px) and (orientation: portrait) {
    .app-container:not(.mobile-split-active) .dashboard-pull-handle {
        display: flex !important;
    }
}

@media (orientation: landscape) {
    .dashboard-pull-handle {
        display: none !important;
    }
}



@media (max-width: 1100px) {
    .oracle-tray {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }

    /* Hide the expand button since expansion is disabled */
    #tray-expand-btn {
        display: none !important;
    }

    /* Always show collapsed icons at this breakpoint */
    .oracle-tray .tray-collapsed-icons {
        opacity: 1 !important;
        pointer-events: all !important;
    }

    /* Hide expanded content even if JS removes 'collapsed' class */
    .oracle-tray .tray-expanded-content {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
}

/* ≤900px: Oracle Tray hidden entirely (mobile header has navigation) */
@media (max-width: 900px) {
    .oracle-tray {
        display: none !important;
    }
}

/* ===================================================
   MOBILE SPLIT-VIEW LAYOUT
   Left Rail: Chart Chips (D1, D9...)
   Right Column: Close & Toggle (S/N)
   Only for phones < 600px (CSS). Tablets use desktop layout.
   =================================================== */

/* Split trigger: shown only in mobile header when ≤1024px */
#mobile-split-trigger {
    display: none;
    /* Hidden on desktop */
}

@media (max-width: 1024px) {
    #mobile-split-trigger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        background: rgba(0, 66, 66, 0.05);
        color: var(--km-teal);
        border-radius: 8px;
        cursor: pointer;
        margin-right: 5px;
    }

    #mobile-split-trigger i {
        font-size: 24px;
    }

    /* Show short Selector Labels on Mobile/Tablet */
    .selector-trigger span {
        display: block !important;
        font-size: 0.75rem;
        margin-left: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .selector-trigger i.fa-chevron-down {
        display: none !important;
    }

    .selector-trigger {
        padding: 6px 10px !important;
        justify-content: center !important;
        min-width: auto !important;
        max-width: 100px;
    }
}

/* 2. Dashboard Panel Adjustments for Dual Rails */
.app-container.mobile-split-active .dashboard-panel {
    padding-left: 44px !important;
    /* Space for Left Rail */
    padding-right: 44px !important;
    /* Space for Right Column */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 3. Left Rail (Context Bar) - Chart Chips Only */
.app-container.mobile-split-active .context-bar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 44px !important;
    height: 100% !important;
    background: #faf8f2 !important;
    border-right: 1px solid rgba(42, 75, 89, 0.08) !important;
    border-left: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 10px 0 !important;
    z-index: 20 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
}

.app-container.mobile-split-active .context-bar::-webkit-scrollbar {
    display: none !important;
}

.app-container.mobile-split-active .context-bar .sub-tabs-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: center !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

.app-container.mobile-split-active .sub-tab-item {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    background: #fff !important;
    border: 1px solid rgba(42, 75, 89, 0.15) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    position: relative !important;
    cursor: pointer !important;
}

/* Clip the label text within the circle — abbreviation handles readability */
.app-container.mobile-split-active .sub-tab-item span.pill-label {
    display: block !important;
    max-width: 30px !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    text-align: center !important;
}

/* Tooltip: show full chart name on hover/focus to the RIGHT of the pill */
.app-container.mobile-split-active .sub-tab-item[data-full-name]::after {
    content: attr(data-full-name) !important;
    position: absolute !important;
    left: calc(100% + 8px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(28, 50, 60, 0.92) !important;
    color: #fff !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    letter-spacing: 0 !important;
}

/* Show tooltip on hover */
.app-container.mobile-split-active .sub-tab-item[data-full-name]:hover::after {
    opacity: 1 !important;
}

/* Active pill styling */
.app-container.mobile-split-active .sub-tab-item.active {
    background: var(--km-primary) !important;
    color: #fff !important;
    border-color: var(--km-primary) !important;
}

.app-container.mobile-split-active .dash-mobile-close {
    display: flex !important;
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(42, 75, 89, 0.18) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10) !important;
    color: var(--km-teal) !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    cursor: pointer !important;
}

.app-container.mobile-split-active .dash-mobile-close .material-icons-round {
    font-size: 14px !important;
}

.app-container.mobile-split-active .chart-style-text-toggle {
    display: flex !important;
    position: absolute !important;
    bottom: 12px !important;
    right: 8px !important;
    flex-direction: column !important;
    width: auto !important;
    gap: 4px !important;
    background: transparent !important;
    /* Removed solid partition */
    border: none !important;
    /* Removed solid partition */
    padding: 0 !important;
    z-index: 30 !important;
    align-items: center !important;
}

.app-container.mobile-split-active .chart-style-text-toggle .separator {
    display: none !important;
}

.app-container.mobile-split-active .style-opt {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.65rem !important;
    /* Smaller text */
    font-weight: 800 !important;
    border-radius: 50% !important;
    color: var(--km-teal) !important;
    background: rgba(42, 75, 89, 0.05) !important;
    /* Subtle background for buttons */
}

.app-container.mobile-split-active .style-opt.active {
    background: var(--km-amber, #cf9003) !important;
    color: #fff !important;
}

/* 5. Chart Size — consolidated into @media block above. This section is intentionally minimal. */
/* No additional overrides needed here. */
.active-highlight {
    fill: #E67E22 !important;
    font-weight: 900 !important;
    transition: all 0.3s ease;
}

.chart-has-highlight text:not(.active-highlight) {
    opacity: 0.6 !important;
    /* More contrast */
}

/* Performance tuning: keep animations, reduce persistent paint/composite load */
:root {
    --km-motion-fast: 120ms;
}

/* ===================================================
   CANONICAL TABLET MODE (766px - 1024px)
   - Keep desktop canvas (dashboard + stage + right rail)
   - Hide redundant mobile header/drawer
   - Use right rail icon for Generated Experiences
   =================================================== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .app-container {
        display: grid !important;
        grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) 60px !important;
        grid-template-rows: 1fr !important;
        height: 100vh !important; height: 100dvh !important;
        overflow: hidden !important;
    }

    .app-container.dashboard-collapsed {
        grid-template-columns: 60px minmax(0, 1fr) 60px !important;
    }

    .app-container.dashboard-collapsed .dash-header {
        justify-content: center !important;
        padding: 0 !important;
    }

    .app-container.dashboard-collapsed .dash-title {
        justify-content: center !important;
        width: 100% !important;
        gap: 0 !important;
    }

    .app-container.dashboard-collapsed .dash-title .logo-full {
        display: none !important;
    }

    .app-container.dashboard-collapsed .dash-title .logo-icon {
        display: block !important;
        height: 26px !important;
        width: 26px !important;
        max-height: 26px !important;
        max-width: 26px !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }



    .app-container.dashboard-collapsed #dashboard-context-bar,
    .app-container.dashboard-collapsed .dash-tabs,
    .app-container.dashboard-collapsed .dash-content,
    .app-container.dashboard-collapsed .control-row {
        display: none !important;
    }

    .mobile-header {
        display: none !important;
    }

    .mobile-nav-drawer {
        display: none !important;
    }

    .app-container.mobile-menu-active .mobile-nav-drawer {
        display: none !important;
    }

    .drawer-overlay {
        display: none !important;
    }

    .app-container .dashboard-panel,
    .app-container .dashboard-panel.open {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        max-width: none !important;
        height: 100vh !important; height: 100dvh !important;
        transform: none !important;
        border-right: 1px solid var(--km-border) !important;
        box-shadow: none !important;
        overflow: visible !important;
        z-index: auto !important;
    }

    .app-container .stage-panel {
        min-width: 0 !important;
        height: 100vh !important; height: 100dvh !important;
        overflow: hidden !important;
    }

    .stage-view {
        padding-top: 0 !important;
    }

    /* Tablet landscape chart visibility:
       avoid flex %-height dependency that can collapse SVG host on iPad Safari */
    .app-container:not(.dashboard-collapsed) #dash-section-charts {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    .app-container:not(.dashboard-collapsed) .chart-wrapper.single-view {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-width: none !important;
    }

    .app-container:not(.dashboard-collapsed) .chart-svg-host {
        width: min(100%, calc(100dvh - 120px)) !important;
        aspect-ratio: 1 / 1 !important;
        min-height: 220px !important;
        max-height: none !important;
        flex: 0 0 auto !important;
        margin: 0 auto !important;
    }

    .app-container:not(.dashboard-collapsed) .chart-svg-host > svg {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        display: block !important;
    }

    .app-container:not(.dashboard-collapsed) .chart-legend {
        display: block !important;
        width: 100% !important;
        margin-top: 8px !important;
        padding: 8px 10px 18px !important;
        text-align: center !important;
        line-height: 1.35 !important;
        flex: 0 0 auto !important;
    }

    .oracle-tray {
        display: flex !important;
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }

    .oracle-tray .tray-collapsed-icons {
        opacity: 1 !important;
        pointer-events: all !important;
    }

    .oracle-tray .tray-expanded-content {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    #tray-expand-btn {
        display: none !important;
    }

    #tray-gen-exp-btn-collapsed {
        display: flex !important;
    }

    .gen-exp-quick-menu {
        position: fixed;
        display: none;
        flex-direction: column;
        gap: 6px;
        width: 210px;
        background: #fff;
        border: 1px solid rgba(42, 75, 89, 0.15);
        border-radius: 12px;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
        padding: 8px;
        z-index: 12050;
    }

    .gen-exp-quick-menu.open {
        display: flex;
    }

    .gen-exp-quick-item {
        border: none;
        background: rgba(42, 75, 89, 0.04);
        border-radius: 9px;
        color: var(--km-teal);
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        text-align: left;
        cursor: pointer;
    }

    .gen-exp-quick-item .material-icons-round {
        font-size: 18px;
        color: var(--km-amber);
    }

    .quick-exp-badge {
        margin-left: auto;
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        border-radius: 9px;
        background: var(--km-amber);
        color: #fff;
        font-size: 0.68rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Tablet: disable right-rail hover tooltips */
    .oracle-tray .nav-icon::before,
    .oracle-tray .nav-icon::after,
    .oracle-tray .nav-icon[data-tooltip-head]:hover::after,
    .oracle-tray .nav-icon[data-tooltip-head]:hover::before {
        content: none !important;
        display: none !important;
    }

    #km-tooltip {
        display: none !important;
    }

    .dash-collapsed-hint {
        display: none !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 34px !important;
        height: 34px !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 5 !important;
    }

    .app-container.dashboard-collapsed .dash-collapsed-hint {
        display: flex !important;
    }

    #dash-edge-handle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #dash-edge-handle i {
        margin-left: 0 !important;
        line-height: 1 !important;
        display: block !important;
    }
}

/* Fixed input wrapper is always visible; avoid expensive live blur/noise repaint */
.input-stage-wrapper {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-image: none !important;
    background-color: #ffffff !important;
}

/* Keep mobile peek strip crisp without blur compositor cost */
#chart-peek-strip {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Replace broad 'all' transitions on high-frequency controls */
.selector-trigger,
.nav-icon,
.tray-action-btn,
.history-card,
.send-btn,
.mic-btn,
.exp-pill-btn,
.peek-inner,
.interactive-key,
.active-highlight {
    transition-property: transform, opacity, background-color, color, border-color, fill;
    transition-duration: var(--km-motion-fast);
    transition-timing-function: ease-out;
}

/* 510px–765px: use original (desktop-like) dashboard form, not split rails */
@media (min-width: 510px) and (max-width: 767px) and (orientation: landscape) {
    .app-container .dash-header {
        display: none !important;
    }

    .app-container.mobile-split-active .mobile-header {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1700 !important;
    }

    .app-container.mobile-split-active .input-stage-wrapper {
        display: flex !important;
        position: absolute !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 45px !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        z-index: 1200 !important;
    }

    .app-container.mobile-split-active .ai-disclaimer {
        display: block !important;
    }

    .app-container.mobile-split-active .dashboard-panel {
        width: clamp(280px, 36vw, 360px) !important;
        min-width: 280px !important;
        max-width: 360px !important;
        height: calc(100vh - 60px) !important;
        margin-top: 60px !important;
        border-right: 1px solid var(--km-border) !important;
        border-bottom: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }

    .app-container.mobile-split-active .context-bar {
        margin-top: 0 !important;
    }

    .app-container.mobile-split-active .stage-panel {
        height: calc(100vh - 60px) !important;
        margin-top: 60px !important;
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .app-container.mobile-split-active {
        flex-direction: row !important;
    }

    .app-container.mobile-split-active .dash-mobile-close {
        display: flex !important;
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.94) !important;
        border: 1px solid rgba(42, 75, 89, 0.2) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
        color: var(--km-teal) !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 9999 !important;
        cursor: pointer !important;
    }

    .app-container.mobile-split-active .dash-mobile-close .material-icons-round {
        font-size: 20px !important;
    }

    .app-container.mobile-split-active #dash-edge-handle {
        display: flex !important;
        right: -10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 18px !important;
        height: 36px !important;
        border-radius: 0 10px 10px 0 !important;
        background: #fff !important;
        border: 1px solid var(--km-border) !important;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1) !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 1600 !important;
        pointer-events: auto !important;
    }

    .app-container.mobile-split-active #dash-edge-handle i {
        margin-left: 0 !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
    }

    .app-container .dash-header {
        display: none !important;
    }

    .app-container.mobile-split-active .context-bar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 8px 12px !important;
        background: #faf8f2 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(42, 75, 89, 0.08) !important;
        box-shadow: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 6px !important;
        z-index: auto !important;
    }

    .app-container.mobile-split-active .context-bar .sub-tabs-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: auto !important;
        gap: 6px !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .app-container.mobile-split-active .context-bar .sub-tab-item {
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 16px !important;
        padding: 4px 10px !important;
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .app-container.mobile-split-active .dash-tabs {
        display: flex !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #faf8f2 !important;
        border: none !important;
        padding: 6px 12px 4px 12px !important;
        z-index: auto !important;
    }

    .app-container.mobile-split-active .dash-tabs>div:first-child {
        display: flex !important;
    }

    .app-container.mobile-split-active .chart-style-text-toggle {
        position: static !important;
        bottom: auto !important;
        right: auto !important;
        flex-direction: row !important;
        width: auto !important;
        gap: 0 !important;
        border-radius: 20px !important;
        padding: 3px 4px !important;
        z-index: auto !important;
        background: rgba(42, 75, 89, 0.05) !important;
        border: 1px solid rgba(42, 75, 89, 0.15) !important;
    }

    .app-container.mobile-split-active .chart-style-text-toggle .separator {
        display: inline !important;
    }

    .app-container.mobile-split-active .style-opt {
        width: auto !important;
        height: auto !important;
        padding: 3px 9px !important;
        border-radius: 16px !important;
    }

    .app-container.mobile-split-active .dash-content {
        overflow-y: auto !important;
        padding: 8px !important;
    }

    .app-container.mobile-split-active #dash-section-charts {
        justify-content: flex-start !important;
    }

    .app-container.mobile-split-active .chart-viz-container {
        width: min(calc(100% - 12px), calc(100vh - 210px)) !important;
        height: min(calc(100% - 12px), calc(100vh - 210px)) !important;
        margin: 0 auto !important;
        border-radius: 10px !important;
    }

    .app-container.mobile-split-active.dashboard-collapsed .dashboard-panel {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }

    .app-container.mobile-split-active.dashboard-collapsed .dash-title .logo-full {
        display: none !important;
    }

    .app-container.mobile-split-active.dashboard-collapsed .dash-title .logo-icon {
        display: block !important;
        margin: 0 auto !important;
    }

    .app-container.mobile-split-active.dashboard-collapsed #dashboard-context-bar,
    .app-container.mobile-split-active.dashboard-collapsed .dash-tabs,
    .app-container.mobile-split-active.dashboard-collapsed .dash-content,
    .app-container.mobile-split-active.dashboard-collapsed .control-row {
        display: none !important;
    }

    .app-container.mobile-split-active.dashboard-collapsed .dash-mobile-close {
        display: flex !important;
    }

    .app-container.mobile-split-active.dashboard-collapsed .dash-collapsed-hint {
        display: flex !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .app-container.mobile-split-active.dashboard-collapsed #dash-edge-handle i {
        transform: rotate(180deg) !important;
    }
}

/* Final safeguard: in <=765 landscape split view, close button must stay hidden.
   The edge-handle remains the stable expand/collapse affordance. */
@media (max-width: 767px) and (orientation: landscape) {
    .app-container.mobile-split-active .dash-mobile-close,
    .app-container.mobile-split-active.dashboard-collapsed .dash-mobile-close {
        display: none !important;
    }
}

/* --- THRESHOLD CARDS (Limit Reached UI) --- */
.threshold-card {
    background: linear-gradient(135deg, #fff 0%, #f9fbfb 100%);
    border: 1px solid rgba(42, 75, 89, 0.1);
    border-left: 4px solid var(--km-amber);
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    animation: slideInUp 0.3s ease-out;
    max-width: 450px;
    width: 100%;
    align-self: flex-start;
}

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

.threshold-icon {
    color: var(--km-amber);
    font-size: 28px !important;
}

.threshold-title {
    font-family: 'Noto Serif', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--km-teal);
}

.threshold-body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--km-text-light);
    margin-bottom: 20px;
}

.threshold-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.threshold-btn {
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Manrope', sans-serif;
}

.threshold-btn.primary {
    background: var(--km-teal);
    color: #fff;
    box-shadow: 0 4px 10px rgba(42, 75, 89, 0.2);
}

.threshold-btn.primary:hover {
    background: #1a3a4a;
    transform: translateY(-1px);
}

.threshold-btn.secondary {
    background: #f0f4f4;
    color: var(--km-teal);
}

.threshold-btn.secondary:hover {
    background: #e0e8e8;
}

.message.threshold-bubble {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    max-width: 100% !important;
}

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

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

/* ===================================================
   MOBILE/TABLET SPLIT VIEW: CLOSE AFFORDANCES
   =================================================== */

/* Portrait Split: hide bottom grabber, rely on dash-mobile-close button at top-right instead */
@media (max-width: 1024px) {
    .app-container.mobile-split-active .dashboard-panel {
        padding-bottom: 0 !important;
    }
    /* Bottom grabber replaced by top-right close button — keep it hidden in portrait split */
    .app-container.mobile-split-active .chart-bottom-grabber {
        display: none !important;
    }
}
@media (orientation: landscape) {
    .app-container.mobile-split-active .chart-bottom-grabber {
        display: none !important;
    }
}

/* Universal Chat Resume FAB Styling (Premium Glassmorphism) */
.chat-resume-fab {
    /* Base styling (hidden by default, handled by specific media queries/inline styles) */
    position: absolute !important;
    bottom: 24px !important;
    right: 24px !important;
    background: rgba(42, 75, 89, 0.85) !important; /* km-teal with opacity */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

.chat-resume-fab:hover {
    transform: scale(1.05) !important;
    background: rgba(42, 75, 89, 0.95) !important;
}

.chat-resume-fab i {
    font-size: 24px !important;
}

/* Ensure mobile-split-active shows the FAB on phones */
@media (max-width: 767px) and (orientation: landscape) {
    .app-container.mobile-split-active .chat-resume-fab {
        display: flex !important;
    }
}