/* Avoid the well-known footgun of `transition: all 0.5s` on the universal
   selector: it animates layout and color shifts on every element during
   page-load and during legitimate interactions (slider drags, frame swaps,
   model rebuilds), causing visible jank and unnecessary GPU work.

   The original code relied on this for incidental hover affordances on
   miscellaneous elements. We keep that affordance with a much shorter
   duration scoped to common interactive properties (color, background,
   border, opacity, transform, box-shadow) instead of `all`, which leaves
   layout-affecting properties (width, height, top, left, etc.) un-animated.
*/
* {
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        opacity 0.18s ease,
        box-shadow 0.18s ease;
}

/* Accessible global focus ring fallback. Many components below intentionally
   set `outline: none` to clean up mouse focus rings. We restore a visible
   focus indicator for keyboard users via :focus-visible — it only renders
   when the browser determines focus arrived via keyboard, so mouse clicks
   stay clean. Component-specific :focus-visible rules elsewhere override
   this safely. */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--brand-cyan, #42D6FF);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip-to-content link: visually hidden until keyboard focus moves to it,
   then slides into view at the top-left. Lets keyboard users jump past the
   3D viewport overlay into the chat input. */
.skip-link {
    position: fixed;
    top: -100px;
    left: 12px;
    z-index: 10000;
    padding: 8px 14px;
    background: #111;
    color: #fff;
    border: 2px solid var(--brand-cyan, #42D6FF);
    border-radius: 6px;
    text-decoration: none;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    font-weight: 500;
    transition: top 0.18s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 12px;
    outline: none;
}

/* Honor accessibility preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Force dark-mode native controls (fixes white dropdowns on Windows) */
select,
select option,
select optgroup {
    color-scheme: dark;
}

body>canvas,
#frameSliderContainer {
    transition: none !important;
}

body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #050810;
    background-image: var(--brand-grad-deep);
    display: flex;
    perspective: 1000px;
}

:root {
    --panel-width: 220px;

    /* ── Brand gradient tokens ────────────────────────────────
       Use `--brand-grad` (vibrant) for primary actions, brand text,
       send/submit buttons, accents. Use `--brand-grad-dim` for
       large surfaces where full saturation would distract. Use
       `--brand-grad-bright` for hover / highlight states. */
    --brand-purple: #833AB4;
    --brand-blue: #1D60FD;
    --brand-cyan: #42D6FF;
    --brand-grad: linear-gradient(90deg,
            rgba(131, 58, 180, 1) 0%,
            rgba(29, 96, 253, 1) 50%,
            rgba(66, 214, 255, 1) 100%);
    --brand-grad-135: linear-gradient(135deg,
            rgba(131, 58, 180, 1) 0%,
            rgba(29, 96, 253, 1) 50%,
            rgba(66, 214, 255, 1) 100%);
    --brand-grad-bright: linear-gradient(90deg,
            rgba(168, 85, 233, 1) 0%,
            rgba(59, 130, 253, 1) 50%,
            rgba(116, 236, 255, 1) 100%);
    --brand-grad-dim: linear-gradient(135deg,
            rgba(18, 8, 30, 0.98) 0%,
            rgba(8, 16, 42, 0.98) 50%,
            rgba(8, 24, 36, 0.98) 100%);
    --brand-grad-deep: linear-gradient(180deg,
            rgba(14, 6, 24, 0.98) 0%,
            rgba(6, 12, 32, 0.98) 50%,
            rgba(6, 18, 28, 0.98) 100%);
    --brand-grad-soft: linear-gradient(135deg,
            rgba(131, 58, 180, 0.18) 0%,
            rgba(29, 96, 253, 0.18) 50%,
            rgba(66, 214, 255, 0.18) 100%);
    --brand-glow: 0 5px 20px rgba(29, 96, 253, 0.35);

    /* ── Spacing scale (4px grid) ─────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* ── Radii ────────────────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* ── Shadows ──────────────────────────────────────────── */
    /* Shadow RGB is dynamically rewritten by main.js when the user picks a
       background color (applyBackgroundColorToUI). All UI shadows reference
       this token so the entire chrome — panels, cards, modals, toolbar —
       casts shadows tinted by the active background hue, keeping the look
       color-coherent. Default is straight black for stock dark mode. */
    --ui-shadow-rgb: 0 0 0;
    --shadow-sm: 0 1px 2px rgb(var(--ui-shadow-rgb) / 0.28);
    --shadow-md: 0 4px 12px rgb(var(--ui-shadow-rgb) / 0.4);
    --shadow-lg: 0 12px 32px rgb(var(--ui-shadow-rgb) / 0.55);

    /* User-controlled text scale — driven by #textSizeSlider in the Style
       panel. Applied via calc() to the highest-traffic text elements (chat
       message content, chat input, file explorer rows, section headers).
       1.0 = current default; range 0.85 → 1.4 covers comfortable to large. */
    --ui-text-scale: 1;

    /* ── Semantic neutrals ────────────────────────────────── */
    --surface-0: rgba(8, 12, 24, 0.95);
    --surface-1: rgba(255, 255, 255, 0.04);
    --surface-2: rgba(255, 255, 255, 0.07);
    --surface-3: rgba(255, 255, 255, 0.12);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-default: rgba(255, 255, 255, 0.14);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.72);
    --text-muted: rgba(255, 255, 255, 0.5);

    /* ── Semantic state colors ────────────────────────────── */
    --color-success: #4ade80;
    --color-warn: #fbbf24;
    --color-danger: #ef4444;
    --color-info: var(--brand-blue);

    /* ── Z-index scale ────────────────────────────────────── */
    --z-base: 1;
    --z-raised: 10;
    --z-sticky: 100;
    --z-dropdown: 500;
    --z-panel: 1000;
    --z-overlay: 2000;
    --z-modal-backdrop: 3000;
    --z-modal: 3100;
    --z-toast: 4000;
    --z-tooltip: 5000;
    --z-max: 9999;

    /* ── Touch / hit target ───────────────────────────────── */
    --tap-min: 40px;
}

#canvas {
    height: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
    transition: none;
}

#customButton {
    background: var(--brand-grad, linear-gradient(90deg, #833AB4, #1D60FD, #42D6FF));
    color: #ffffff;
    padding: 8px 11px;
    border: none;
    cursor: pointer;
    height: auto;
    border-radius: 6px;
}

#customButton:hover {
    background: var(--brand-grad-bright, linear-gradient(90deg, #a855e9, #3b82fd, #74ecff));
}

#chatInputContainer {
    display: flex;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 10px;
}

#smilesInputContainer {
    display: flex;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 10px;
}



#chatInput::placeholder {
    color: #9ca3af;
    opacity: 1;
}

#captureScreen {
    background-color: rgb(255, 128, 0);
}

#chatInput:focus {
    outline: none;
    border-color: transparent;
    background: linear-gradient(white, white) padding-box,
        var(--brand-grad) border-box;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}


#chatInput:hover {
    border-color: #a5b4fc;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

#chatInput:disabled {
    background-color: #f3f4f6;
    border-color: #e5e7eb;
    cursor: not-allowed;
    opacity: 0.7;
}

#chatInput.error {
    border-color: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.3);
}

#chatContainer {
    background: linear-gradient(90deg, rgb(211, 237, 255) 0%, rgba(255, 232, 224, 1) 50%, rgb(255, 254, 219) 100%);
}

#smilesContainer {

    background: linear-gradient(90deg, rgb(211, 255, 220) 0%, rgba(255, 232, 224, 1) 50%, rgb(252, 219, 255) 100%);

}

#jsonContainer {
    background: linear-gradient(90deg, rgb(230, 211, 255) 0%, rgb(255, 224, 224) 50%, rgb(219, 247, 255) 100%);
}

.fancy-input-container {
    /* padding: 200px; */
    position: absolute;
    top: -200px;
    /* Adjust spacing from bottom of viewport or buttons */
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    height: auto;
    width: 1000px;
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    gap: 32px;
}

.fancy-input-container.on {
    top: 80px !important;
}


#chatOutput {
    margin: 0;
}

#aiGenerate {
    color: #fff;
    background: var(--brand-grad, linear-gradient(90deg, #833AB4, #1D60FD, #42D6FF));
    padding: 8px 11px;
    border: none;
    cursor: pointer;
    height: auto;
    border-radius: 6px;
    font-weight: 500;
}

#aiGenerate:hover {
    background: var(--brand-grad-bright, linear-gradient(90deg, #a855e9, #3b82fd, #74ecff));
    box-shadow: var(--brand-glow, 0 5px 20px rgba(29, 96, 253, 0.35));
}

#buttons {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
    /* background-color: #e4e4e4; */
    /* padding: 30px; */
    width: 100vw;
}

#aiContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.button {
    background-color: rgb(0, 115, 8);
    padding: 8px 11px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.button:hover {
    background-color: #00d600;
}

#generateButton {
    color: #fff;
    background: var(--brand-grad, linear-gradient(90deg, #833AB4, #1D60FD, #42D6FF));
    padding: 8px 11px;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    background-size: 200% 100%;
    height: 43px;
    font-weight: 500;
}

#generateButton:hover {
    background: var(--brand-grad-bright, linear-gradient(90deg, #a855e9, #3b82fd, #74ecff));
    box-shadow: var(--brand-glow, 0 5px 20px rgba(29, 96, 253, 0.35));
}

#toggleLabels {
    color: #fff;
    background-color: rgb(255, 170, 0);
    padding: 8px 11px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}


#showAllBondLengths {
    color: #ffffff;
    padding: 4px 11px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: 999;
}

.snake-container {
    position: relative;
    padding: 20px;
    background: #ffffff;
    border-radius: 10px;
}

#compare {
    background-color: #a855f7;
}

.snake-container::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(45deg, #ff0000, #ff9900, #33cc33, #3399ff, #cc33cc, #ff0000);
    background-size: 400%;
    z-index: -2;
    border-radius: 14px;
    animation: snake 8s linear infinite;
}

.snake-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    border-radius: 10px;
    z-index: -1;
}

#loadSmilesButton {
    height: 43px;
    background: linear-gradient(90deg, rgba(0, 136, 255, 1) 0%, rgb(0, 94, 255) 0%, rgba(255, 0, 98, 1) 100%);
}

#loadJsonButton {
    height: 43px;
    background: linear-gradient(90deg, rgba(0, 136, 255, 1) 0%, rgb(0, 94, 255) 0%, rgba(255, 0, 98, 1) 100%);
}

.typewriter {
    display: inline-block;
    overflow: hidden;
    border-right: 0.15em solid rgba(255, 166, 0, 0);
    white-space: nowrap;
    animation: typing 0.75s steps(20, end), blink-caret 0.75s step-end infinite;
}

.glow {
    font-size: 2em;
    color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 20px #ff0080, 0 0 30px #ff0080;
    animation: glow 2s ease-in-out infinite alternate;
}

.fade-in {
    animation: fadeIn 0.5s;
}

.fade-out {
    animation: fadeOut 0.5s;
}

.fancy-button {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.513), inset 2px 2px 3px rgba(255, 255, 255, 0.396), inset -8px -8px 16px rgba(255, 255, 255, 0.285);
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 140px;
    will-change: transform;

}

.fancy-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 0 8px rgba(255, 255, 255, 0.3);
}

.fancy-button.pulse {
    animation: subtlePulse 2s infinite;
}

@keyframes subtlePulse {

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

    50% {
        transform: scale(1.02);
    }
}

.fancy-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); */
    transition: left 0.4s ease;
}



.fancy-button:active {
    transform: translateY(0) scale(0.98);
    /* Subtle press-down effect */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    /* Reduced shadow on click */
}

.fancy-button {
    position: relative;
    overflow: hidden;
}

.fancy-button::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    /* background: rgba(255, 255, 255, 0.3); */
    /* Subtle white ripple */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}

.fancy-button:active::after {
    width: 100px;
    /* Size of ripple */
    height: 100px;
    opacity: 0.5;
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
}

.fancy-button::after {
    left: var(--ripple-x, 50%);
    top: var(--ripple-y, 50%);
}

#import-smiles {
    background-color: #d244ef;
}

#import-json {
    background-color: #17af2d;
    display: none;
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

#tutorialLinkButton {
    /* position: absolute; */
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 13px;
    background-color: #006dea;
    padding: 8px 16px;
    margin: 10px;
    bottom: 10px;
    right: 10px;
    z-index: var(--z-sticky);
    width: 106px;
}

#tutorialLinkButton:hover {
    background-color: #009dff;
    transform: translate(0, -2px);
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

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

.fancy-textbox {
    padding: 12px 9px;
    border: 2px solid #d1d5db;
    /* margin: 12px; */
    font-size: 15px;
    background-color: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
    caret-color: #6366f1;
    /* border: 2px solid #0065ea; */
    border: none;
    width: 880px;
    /* Vibrant border color */
    border-radius: 15px;
    /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.513), inset 2px 2px 3px rgba(255, 255, 255, 0.396), inset -8px -8px 16px rgba(255, 255, 255, 0.285);
    /* Subtle shadow + glow */
    height: 20px;
    outline: none;
    /* Remove default outline */
}



/* Loading indicator — formerly a rainbow gradient that read as cartoonish.
   Now uses the brand gradient for a calm, branded loading state. */
#loading {
    position: absolute;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    background: linear-gradient(90deg,
        rgba(168, 85, 233, 1) 0%,
        rgba(59, 130, 253, 1) 50%,
        rgba(116, 236, 255, 1) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradient 6s linear infinite;
    display: inline-block;
    top: -100px;
    transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    z-index: 9999;
    pointer-events: none;
    text-shadow: none;
}

#loading.on {
    top: 78px;
}

#clear-canvas {
    background-color: #efbc44;
}

#analyze-molecule {
    background-color: #7ad23c;
}

#analysisResponseContainer {
    background-color: #c2e7ff5e;
    width: calc(100vw - 80px);
    height: 610px;
    overflow-y: scroll;
    z-index: var(--z-modal);
    position: absolute;
    top: calc(50% + 20px);
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    border: none;
    transition: all 1s ease;
    pointer-events: none;
    padding: 20px;
    color: #fff;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 1.2em;
    opacity: 0;
    overflow-y: auto;
    overflow-x: hidden;

}


#analysisResponseContainer.on {
    opacity: 1;
    pointer-events: all !important
}

#analysisHeader {
    z-index: var(--z-modal);
    background-color: #0088dd;
    padding: 10px;
    border-radius: 10px;
}

#closeAnalysis {
    position: absolute;
    transform: translate(-50%, -50%);
    right: 0px;
    top: 35px;
    background-color: rgba(255, 0, 0, 0);

}

#explorationCanvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    pointer-events: none;
    opacity: 0;
    z-index: 9;
    transition: all 0.9s ease;
    background-color: #0088dd43;
}

#compareButton {
    background-color: #5800dd;
}

#explorationCanvas.on {
    opacity: 1;
}

#styleSelector>* {
    flex-shrink: 0;
}

#styleSelector {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 9999;

    width: 300px;
    height: 85vh;
    /* Large + scrollable */
    overflow-y: auto;
    /* Enables scrolling */
    overflow-x: hidden;

    padding: 30px;
    border-radius: 10px;
    font-weight: 450;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #ffffff;

    background: linear-gradient(145deg,
            rgba(0, 133, 205, 0.501) 0%,
            rgba(10, 46, 118, 0.462) 67%,
            rgba(89, 0, 184, 0.555) 100%);

    backdrop-filter: blur(10px);

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.513),
        inset 5px 5px 5px rgba(255, 255, 255, 0.326),
        inset -8px -8px 16px rgba(255, 255, 255, 0.285);
}

#loadingBar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background-color: limegreen;
    transition: width 0.2s ease, opacity 0.2s ease;
    z-index: 10000;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    opacity: 0;

}

#loadingBar.active {
    animation: pulse-glow 1.5s ease-in-out infinite;
}

#loadingBar.complete {
    opacity: 0;
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    }
}

#createFragment {
    padding: 9.5px 9px;
    font-size: 14px;
    color: #fff;
    border: none;
    font-weight: 600;
    border-radius: 0px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    background-color: #001d4e;
    will-change: transform;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#createFragment:hover {
    cursor: pointer;
    background: #364d76;
}

#styleSelector.on {
    right: -500px;
}

#molecules-list {
    color: black !important;
    /* or whatever color shows on white background */
    background: white;
    padding: 0px !important;
    height: 35px !important;
}

#switchMode {
    color: #ffffff;
    padding: 8px 11px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: 999;
}

.shine {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.513), inset 3px 3px 5px rgba(145, 145, 145, 0.396), inset -8px -8px 16px rgba(255, 255, 255, 0.171);
}

#select-an-atom {
    color: #000000;
    align-self: center;
}

.switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cccccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #90cdff;
}

input:checked+.slider:before {
    transform: translateX(26px);
}

.switch-label {
    font-size: 16px;
}

@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 600% 0%;
        /* Moves gradient fully to the right */
    }
}

input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    /* background: #ddd; */
    background: linear-gradient(90deg, #e1e7ff46, #f0deff59);
    box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.23), 0 3px 4px rgba(61, 61, 61, 0.151);
    border-radius: 5px;
    outline: none;
    transition: background 0.3s;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    background: #0080ff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #0077ff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

input[type="range"]::-moz-range-track {
    background: #ddd;
    border-radius: 5px;
    height: 8px;
}

input[type="range"]:focus {
    background: linear-gradient(90deg, rgb(255, 251, 227), #ffdede);

}


#editMolecule {
    background: #0084ff;
    background: linear-gradient(90deg, rgba(0, 132, 255, 1) 0%, rgba(159, 69, 255, 1) 51%, rgba(255, 171, 74, 1) 100%);
}

#dragFile {
    background: #0084ff;
    background: linear-gradient(90deg, rgba(0, 132, 255, 1) 0%, rgba(159, 69, 255, 1) 51%, rgba(255, 171, 74, 1) 100%);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;

}

/* Database Search Panel - Unified Panel */
.db-search-panel {
    position: relative;
    width: 800px;
    min-width: 280px;
    max-width: 850px;
    min-height: 20px;
    background: rgba(20, 20, 35, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transform: translateY(-10px);
    transition: all 0.25s ease;
    z-index: 9999;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition:
        background-color 200ms ease,
        color 200ms ease,
        opacity 200ms ease,
        transform 200ms ease,
        box-shadow 200ms ease;
    visibility: hidden;
}

.db-search-panel:not(.active) * {
    pointer-events: none !important;
}

.db-search-table .col-desc {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    max-width: 180px;
    max-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.25s ease;
}

.db-search-table .col-desc:hover {
    color: rgba(255, 255, 255, 0.7);
}

.db-search-table .col-desc.expanded {
    white-space: normal;
    max-width: 400px;
    max-height: 200px;
    padding: 14px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 50, 80, 0.4);
    border-radius: 4px;
}

.db-search-panel.active {
    opacity: 1;
    pointer-events: all;
    user-select: all;
    transform: translateY(0);
    visibility: visible;
}

.dropdown:not(.active) .dropdown-content {
    pointer-events: none !important;
    visibility: hidden !important;
}

.dropdown:not(.active) .dropdown-content * {
    pointer-events: none !important;
}

/* Panel Header */
.db-search-header {
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-search-header i {
    color: rgba(0, 180, 255, 0.8);
}

/* Search Bar Row */
.db-search-bar {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.15);
}

.db-search-input {
    width: 100%;
    padding: 10px 12px;
    padding-right: 36px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
}

.db-search-input:focus {
    border-color: rgba(0, 136, 255, 0.5);
    background: rgba(255, 255, 255, 0.12);
}

.db-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Loader Spinner */
.db-search-loader {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #00bbff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    opacity: 0;
    transition: opacity 0.2s;
}

.db-search-loader.show {
    opacity: 1;
}

/* Results Dropdown */
.db-search-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.db-search-dropdown.show {
    max-height: 320px;
    overflow-y: auto;
}

.db-search-dropdown::-webkit-scrollbar {
    width: 6px;
}

.db-search-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.db-search-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* Table with Grid Lines */
.db-search-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.db-search-table thead {
    position: sticky;
    top: 0;
    background: rgba(30, 30, 50, 0.98);
    z-index: 1;
}

.db-search-table th {
    padding: 10px 12px;
    text-align: left;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.db-search-table th:last-child {
    border-right: none;
}

.db-search-table td {
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
}

.db-search-table td:last-child {
    border-right: none;
}

.db-search-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}

.db-search-table tbody tr:hover {
    background: rgba(0, 136, 255, 0.15);
}

.db-search-table tbody tr.active {
    background: rgba(0, 136, 255, 0.3);
}

.db-search-table tbody tr:last-child td {
    border-bottom: none;
}

/* Column Styles */
.db-search-table .col-name {
    font-weight: 500;
    color: #fff;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-search-table .col-db {
    color: rgba(0, 200, 255, 0.8);
    font-size: 11px;
}

.db-search-table .col-type {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}

/* Empty State */
.db-search-empty {
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    border: none !important;
}

/* Panel Resizers */
.db-search-resizer {
    position: absolute;
    background: transparent;
    z-index: 10;
    transition: background 0.2s;
}

.db-search-resizer:hover {
    background: rgba(0, 136, 255, 0.4);
}

.db-search-resizer-left {
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: ew-resize;
}

.db-search-resizer-right {
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: ew-resize;
}

.db-search-resizer-bottom {
    bottom: 0;
    left: 5px;
    right: 5px;
    height: 5px;
    cursor: ns-resize;
}

#dragFile.dragover {
    opacity: 0.4;
    z-index: var(--z-overlay);
    cursor: pointer;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ff0000;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    margin-bottom: 8px;
}

.tooltip:hover::after {
    opacity: 1;
}

#signInButton {
    background-color: #2195f300;
}

#signOutButton {

    background-color: #8e1acd00;
}

#userStatus {
    position: absolute;
    top: 7px;
    right: 10px;
    padding: 0px 0px;
    border-radius: 5px;
    color: #ffffff6a;
    background-color: none;
}

/* Dropdown container */
.dropdown {
    position: relative;
    display: inline-block;

    background: none !important;
}

/* Icon styling */
.dropdown-icon {
    font-size: 21px;
    cursor: pointer;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.78);
    transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
    width: 42px;
    height: 42px;
    position: relative;
}

.dropdown-icon:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.06);
}

.dropdown-icon:focus-visible {
    outline: 2px solid var(--brand-cyan, #42D6FF);
    outline-offset: -2px;
    color: #ffffff;
}

/* Tooltip on hover */
.dropdown-icon .toolbar-label {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    font-size: 11px;
    color: #fff;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: rgba(0, 0, 0, 0.8);
    padding: 4px 8px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
}

.dropdown-icon:hover .toolbar-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Toolbar group containers */
.toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Vertical divider between groups */
.toolbar-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 8px;
    flex-shrink: 0;
}

/* Show dropdown when active class is present */
.dropdown.active .dropdown-content {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.dropdown.active .dropdown-icon {
    color: #ffee00;
    text-shadow: 0 0 8px rgba(255, 157, 0, 0.4);
    background-color: rgba(255, 238, 0, 0.08);
    transition: all 0.18s ease;
}

#toolbar-background {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    border-radius: 25px;
    padding: 5px 12px;
    transition: opacity 0.3s ease;
    background-repeat: no-repeat !important;
    perspective: 1000px;
    background: var(--brand-grad-dim);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    /* Stronger drop + 1px inner highlight makes the toolbar read as a floating
       chip against the dark viewport instead of blending into it. */
    box-shadow: 0 6px 28px rgb(var(--ui-shadow-rgb) / 0.5),
        0 1px 3px rgb(var(--ui-shadow-rgb) / 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#fragmentList {
    list-style: none;
    padding: 0;
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    color: white;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    justify-content: center;
    background-color: none;
}

#fragmentListContainer {

    display: flex;
    align-items: center;
    justify-content: top;
    flex-direction: column;
    width: 140px;
    height: 100vh;
    padding: 10px 0;
    position: absolute;
    top: -20px;
    left: 290px;
    margin-right: 0px;
    margin-top: 10px;
    right: 0px;
    background-color: rgba(0, 24, 55, 0.237);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.227);
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
    max-height: 0px;
    opacity: 0;
}

#fragmentListContainer.open {
    max-height: 100vh;
    opacity: 1;
}

#fragmentListTitle {
    color: white;
    position: relative;
}


#selectionBox {
    position: absolute;
    border: 2px dashed;
    background: rgba(246, 255, 0, 0.1);
    pointer-events: none;
    display: none;
    z-index: 1000;
    transition: none;
    animation: pulse 2s infinite;
    border-radius: 3px;
}

/* #premiumUpgradeBtn {
    display: flex !important;
    opacity: 1 !important;
    z-index: 10000 !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    margin-top: 10px;
} */

/* Success notification style */
.limit-notification.success {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.9), rgba(40, 200, 69, 0.9));
    border: 2px solid #28a745;
}

.limit-notification.success i {
    color: #ffffff;
}

#energyChartDropdown .dropdown-content {
    background: rgba(20, 20, 35, 0.95);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#rotationSlider {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 5px;
    outline: none;
    opacity: 0.8;
    transition: opacity 0.3s;
}

#rotationSlider:hover {
    opacity: 1;
}



#rotationSlider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 3px 8px rgba(255, 0, 255, 0.7);
}

#rotationSlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #ff00ff;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(255, 0, 255, 0.5);
}

/* Axis control panel styling */
#defineAxisBtn {
    animation: pulse-magenta 2s infinite;
}

@keyframes pulse-magenta {
    0% {
        box-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
    }

    50% {
        box-shadow: 0 0 15px rgba(255, 0, 255, 0.8);
    }

    100% {
        box-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
    }
}

#removeAxisBtn:hover {
    background-color: #ff3333 !important;
    transform: scale(1.05);
}

/* Rotation value display */
#rotationValue {
    font-weight: bold;
    font-size: 14px;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
}

/* Enhanced user initials styling - add this to your style.css */

.file-pdb {
    color: #4CAF50;
}

.file-xyz {
    color: #2196F3;
}

.file-mol {
    color: #FF9800;
}

.file-mol2 {
    color: #E91E63;
}

.file-cif {
    color: #9C27B0;
}

.file-cml {
    color: #00BCD4;
}

.file-gro {
    color: #8BC34A;
}

.file-pqr {
    color: #FFC107;
}

/* Signed-in state for dropdown icon - prevents rainbow effect */

.donate-panel {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999;
}

/* Hover effect for user initials - replaces the rainbow effect */
.dropdown-icon.signed-in:hover .user-initials {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background: var(--brand-grad-135);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Animation for when user signs in */
.user-initials {
    animation: fadeInScale 0.5s ease-out;
}

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

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

/* Optional: Different color themes for variety */
.user-initials.blue-theme {
    background: linear-gradient(135deg, #2196F3 0%, #21CBF3 100%);
}

.user-initials.purple-theme {
    background: linear-gradient(135deg, #9C27B0 0%, #E91E63 100%);
}

.user-initials.green-theme {
    background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
}

.user-initials.orange-theme {
    background: linear-gradient(135deg, #FF9800 0%, #FF5722 100%);
}


@keyframes rainbow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
        /* Move gradient for seamless loop */
    }
}

@keyframes pulse {
    0% {
        border-color: #007bff;
        box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    }

    50% {
        border-color: #00d4ff;
        box-shadow: 0 0 15px rgba(0, 212, 255, 0.7);
    }

    100% {
        border-color: #007bff;
        box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    }
}

/* Dropdown content */
.dropdown-content {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 160px;
    z-index: var(--z-dropdown);
    border-radius: 20px;
    padding: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    align-items: center;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    background: #ffffff11;
    backdrop-filter: blur(10px) !important;
    background-repeat: no-repeat !important;
}

.dropdown-content::before {
    content: "";
    position: fixed;
    inset: 0;
    opacity: 0.1;
    pointer-events: none;
}

/* Show dropdown on hover with fade-in and slide */


/* Fancy button styling */
.dropdown-content button {
    margin: 5px 0;
}

.fancy-button:hover {
    background-color: #0056b3;
}

/* ── Backend switcher (Settings → Account dropdown) ── */
.backend-switcher {
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.backend-switcher-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 6px;
}

.backend-switcher-label i {
    font-size: 11px;
    opacity: 0.8;
}

.backend-switcher-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
}

.backend-pill {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-transform: none;
    letter-spacing: 0.3px;
    margin: 0 !important;
    /* Override .dropdown-content button { margin: 5px 0 } */
    width: auto;
    /* Override .fancy-button { width: 140px } if class collisions occur */
}

.backend-pill:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.backend-pill.active {
    background: linear-gradient(135deg, #1962ff, #6e3aff);
    border-color: rgba(110, 58, 255, 0.6);
    color: #fff;
    box-shadow: 0 0 10px rgba(110, 58, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.backend-pill.active i {
    color: #fff;
}



@keyframes slideIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Accessibility: Focus state for keyboard navigation */
.dropdown-icon:focus+.dropdown-content {
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.shake-button:hover {
    animation: angry-shake 1s infinite;
}

#modalSignIn:hover {
    box-shadow: 0 4px 12px rgba(25, 98, 255, 0.473);
    transform: scale(1.1);
    transition: 0.4s all ease;
}

.dismiss {
    background: rgba(255, 255, 255, 0.232);
    border: none;
    color: white;
    border-radius: 20px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background 0.2s;
    flex-shrink: 0;

}

.dismiss:hover {
    background: rgba(255, 67, 67, 0.316);


}

/* Add these styles to your style.css file */

/* User initials styling */
.user-initials {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 0;
    width: 30px;
    height: 30px;
    background: none;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 3px solid rgb(0, 175, 3);
    transition: all 0.3s ease;
    margin: 0px;
}

/* Signed-in state for dropdown icon */

/* Override the rainbow hover effect for signed-in users */
.dropdown:hover .dropdown-icon.signed-in {
    background: transparent !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    animation: none !important;
}

/* Hover effect for user initials */
.dropdown-icon.signed-in:hover .user-initials {
    transform: scale(1.1);
}

/* Animation for when user signs in */
.user-initials {
    animation: fadeInScale 0.5s ease-out;
}



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

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

/* Alternative color schemes you can use */
.user-initials.blue-theme {
    background: linear-gradient(135deg, #2196F3 0%, #21CBF3 100%);
}

.user-initials.purple-theme {
    background: linear-gradient(135deg, #9C27B0 0%, #E91E63 100%);
}

.user-initials.green-theme {
    background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
}

/* For WebKit browsers */
::-webkit-scrollbar {
    width: 4px;
    /* scrollbar width */
}

::-webkit-scrollbar-track {
    background: #111;
    /* background behind scrollbar */
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ============ STRIPE PREMIUM STYLES ============ */

/* Premium upgrade button */
.premium-upgrade-btn {
    position: fixed;
    top: 20px;
    left: 75px;
    padding: 5px 15px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #1a1a1a;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 8px;
}

.premium-upgrade-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
}

.premium-upgrade-btn.premium-active {
    background: linear-gradient(135deg, #10812b, #00fa21);
    color: white;
}

.premium-upgrade-btn i {
    font-size: 16px;
}

/* Premium modal */
.premium-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.309);
    z-index: 10000;
    backdrop-filter: blur(10px);
    animation: fadeIn 0.3s ease;
}

.premium-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.premium-modal-content {
    background: var(--brand-grad-dim);
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    animation: slideUp 0.3s ease;
    position: relative;
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.close-premium-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #888;
    font-size: 28px;
    cursor: pointer;
    transition: color 0.3s;
}

.close-premium-modal:hover {
    color: #fff;
}

.premium-header {
    text-align: center;
    margin-bottom: 30px;
}

.premium-crown {
    font-size: 48px;
    color: #FFD700;
    /* margin-bottom: 15px; */
    animation: float 3s ease-in-out infinite;
    perspective: 1000px;
}

.premium-header h2 {
    font-size: 32px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.premium-header p {
    color: #aaa;
    font-size: 16px;
}

.premium-price-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 215, 0, 0.2);
    border-radius: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    font-size: 15px;
}

.price-tag {
    font-size: 38px;
    font-weight: bold;
    margin-bottom: 25px;
    color: #fff;
}

.price-tag .currency {
    font-size: 24px;
    vertical-align: super;
    color: #FFD700;
}

.price-tag .period {
    font-size: 18px;
    color: #aaa;
}

.premium-features {
    list-style: none;
    padding: 0;
    margin: 25px 0;
    text-align: left;
}

.premium-features li {
    padding: 12px 0;
    color: #ddd;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.premium-features li:last-child {
    border-bottom: none;
}

.premium-features i {
    color: #28a745;
    font-size: 14px;
}

.subscribe-premium-btn {
    width: 100%;
    padding: 15px;
    background: var(--brand-grad-135);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    position: relative;
}

.subscribe-premium-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(29, 96, 253, 0.4);
}

.subscribe-premium-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.subscribe-premium-btn.loading .btn-text {
    display: none;
}

.subscribe-premium-btn.loading .loading-spinner {
    display: block;
}

.loading-spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

.trial-text {
    color: #888;
    font-size: 12px;
    margin-top: 15px;
}

/* Limit notification */
.limit-notification {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(220, 53, 69, 0.4);
    display: none;
    animation: slideInRight 0.3s ease;
    z-index: 2000;
    max-width: 300px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.limit-notification.show {
    display: flex;
}

.limit-notification.success {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.limit-notification i {
    font-size: 20px;
}

/* Tool locked state */
.tool-locked {
    opacity: 0.5;
    cursor: not-allowed !important;
    position: relative;
}

.tool-locked:after {
    content: "🔒";
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 12px;
}

#premiumUpgradeBtn {
    display: none;
    /* Hidden by default */
}

/* Trial active state */
.premium-upgrade-btn.trial-active {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED) !important;
    color: white;
}

.premium-upgrade-btn.trial-active:hover {
    background: linear-gradient(135deg, #9333EA, #8B5CF6) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(131, 58, 180, 0.4);
}


/* Trial notification styles */
.limit-notification.trial-warning {
    background: linear-gradient(135deg, #F59E0B, #D97706) !important;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes float {

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

    50% {
        transform: translateY(-10px) scale(0.9) rotateX(15deg);

    }
}

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

@keyframes glowButton {
    0% {
        box-shadow: 0 0 20px #00a6ff;
        transform: scale(1);
        color: #fff;
    }

    50% {
        box-shadow: 0 0 30px #00ffe1;
        /* color: #00ffea; */
        transform: scale(1.1);

    }

    100% {
        box-shadow: 0 0 20px #009dff;
        color: #fff;
        transform: scale(1);

    }
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes glow {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #ff0080, 0 0 30px #ff0080;
        color: #fff;
    }

    to {
        text-shadow: 0 0 20px #fff, 0 0 30px #00ffea, 0 0 40px #00ffea;
        color: #00ffea;
    }
}

@keyframes angry-shake {
    0% {
        transform: translate(0, 0);
    }

    5% {
        transform: translate(1.2px, 0.8px);
    }

    10% {
        transform: translate(-1.7px, 1.1px);
    }

    15% {
        transform: translate(0.3px, -1.9px);
    }

    20% {
        transform: translate(-1.1px, -0.6px);
    }

    25% {
        transform: translate(-1.9px, -1.4px);
    }

    30% {
        transform: translate(-0.5px, 1.7px);
    }

    35% {
        transform: translate(1.3px, -0.3px);
    }

    40% {
        transform: translate(2px, 1px);
    }

    45% {
        transform: translate(0.7px, -1.8px);
    }

    50% {
        transform: translate(-1.6px, 1.4px);
    }

    55% {
        transform: translate(1.5px, -0.9px);
    }

    60% {
        transform: translate(-0.4px, 1.2px);
    }

    65% {
        transform: translate(0.9px, -1.6px);
    }

    70% {
        transform: translate(-1.3px, 0.2px);
    }

    75% {
        transform: translate(1.8px, -1.1px);
    }

    80% {
        transform: translate(-0.7px, 1.9px);
    }

    85% {
        transform: translate(0.2px, -1.3px);
    }

    90% {
        transform: translate(-1.9px, 0.5px);
    }

    95% {
        transform: translate(1.1px, -0.6px);
    }

    100% {
        transform: translate(0, 0.5);
    }
}


@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: rgba(255, 166, 0, 0);
    }
}

@keyframes snake {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 400% 50%;
    }
}

@keyframes moveGradient {
    0% {
        background-position: 0% 50%;
    }

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

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

/* AI Toggle Button in Toolbar — primary CTA, branded gradient ring */
#aiToggleBtn {
    color: white;
    position: relative;
}

#aiToggleBtn::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 8px;
    padding: 1px;
    background: var(--brand-grad-bright, linear-gradient(135deg, #a855e9, #74ecff));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

#aiToggleBtn:hover::before,
#aiToggleBtn.active::before {
    opacity: 1;
}

#aiToggleBtn.active {
    color: #ffffff;
    background: rgba(131, 58, 180, 0.12);
}

#aiToggleBtn:focus-visible {
    outline: 2px solid var(--brand-cyan, #42D6FF);
    outline-offset: 2px;
}



/* Main Chat Panel */

/* Markdown styling in AI chat */
.ai-message.assistant .ai-message-content p {
    margin: 0 0 8px 0;
}

.ai-message.assistant .ai-message-content p:last-child {
    margin-bottom: 0;
}

.ai-message.assistant .ai-message-content code {
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', monospace;
    font-size: 13px;
}

.ai-message.assistant .ai-message-content pre {
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 8px 0;
}

.ai-message.assistant .ai-message-content pre code {
    background: none;
    padding: 0;
}

.ai-message.assistant .ai-message-content ul,
.ai-message.assistant .ai-message-content ol {
    margin: 8px 0;
    padding-left: 20px;
}

.ai-message.assistant .ai-message-content strong {
    color: #fff;
}

/* Custom model picker trigger (replaces native <select>) */
.ai-model-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 120px;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(131, 58, 180, 0.35);
    border-radius: 8px;
    color: #ffffff;
    padding: 5px 10px;
    font-family: 'Rubik', sans-serif;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    overflow: hidden;
}

.ai-model-trigger > i.fa-microchip {
    color: rgba(180, 160, 255, 0.75);
    font-size: 11px;
    flex-shrink: 0;
}

.ai-model-trigger .ai-model-trigger-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.ai-model-trigger-caret {
    color: rgba(255, 255, 255, 0.4);
    font-size: 9px;
    margin-left: auto;
    flex-shrink: 0;
}

.ai-model-trigger:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(131, 58, 180, 0.55);
    color: #fff;
}

.ai-model-trigger:focus-visible {
    outline: 2px solid var(--brand-cyan, #42D6FF);
    outline-offset: 2px;
}

.ai-model-trigger-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.ai-model-trigger-badge.new {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.ai-model-trigger-badge.default {
    background: rgba(131, 58, 180, 0.18);
    color: rgba(180, 160, 255, 0.95);
    border: 1px solid rgba(131, 58, 180, 0.3);
}

/* Model picker modal */
.ai-model-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    z-index: 10003;
    align-items: center;
    justify-content: center;
    animation: aiModelFade 0.15s ease-out;
}

.ai-model-modal.open {
    display: flex;
}

@keyframes aiModelFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ai-model-modal-content {
    width: min(520px, 92vw);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: var(--brand-grad-dim);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(131, 58, 180, 0.08);
    overflow: hidden;
    animation: aiModelPop 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

@keyframes aiModelPop {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.ai-model-modal-header {
    display: flex;
    align-items: center;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-model-modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
}

.ai-model-modal-header h3 i {
    color: rgba(180, 160, 255, 0.9);
    font-size: 14px;
}

.ai-model-modal-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.ai-model-modal-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.ai-model-modal-thinking {
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(131, 58, 180, 0.04);
}

.ai-model-modal-thinking .ai-thinking-control {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.ai-model-modal-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 14px 0;
}

.ai-model-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Rubik', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ai-model-tab i {
    font-size: 11px;
    opacity: 0.8;
}

.ai-model-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
}

.ai-model-tab.active {
    background: rgba(131, 58, 180, 0.18);
    border-color: rgba(131, 58, 180, 0.45);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(131, 58, 180, 0.15), 0 4px 12px rgba(131, 58, 180, 0.12);
}

.ai-model-tab.active i {
    color: rgba(180, 160, 255, 1);
    opacity: 1;
}

.ai-model-modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
}

.ai-model-modal-footer-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.ai-model-modal-footer-value {
    flex: 1;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.ai-model-set-default {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Rubik', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ai-model-set-default i {
    font-size: 11px;
    color: rgba(251, 191, 36, 0.7);
}

.ai-model-set-default:hover:not(:disabled) {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fff;
}

.ai-model-set-default.is-default {
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.35);
    color: rgba(252, 211, 77, 0.95);
}

.ai-model-set-default.is-default i {
    color: #fbbf24;
}

.ai-model-set-default:disabled {
    cursor: default;
}

.ai-model-item-default {
    font-size: 10px;
    color: #fbbf24;
    margin-left: 2px;
}

.ai-model-modal-done {
    background: var(--brand-grad-135);
    border: none;
    color: #fff;
    font-family: 'Rubik', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}

.ai-model-modal-done:hover {
    filter: brightness(1.12);
}

.ai-model-modal-done:active {
    transform: scale(0.97);
}

.ai-model-modal-search {
    position: relative;
    padding: 10px 14px 6px;
}

.ai-model-modal-search i {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    pointer-events: none;
}

.ai-model-modal-search input {
    width: 100%;
    padding: 8px 10px 8px 30px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Rubik', sans-serif;
    font-size: 12px;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.ai-model-modal-search input:focus {
    outline: none;
    border-color: rgba(131, 58, 180, 0.5);
}

.ai-model-list {
    overflow-y: auto;
    padding: 4px 10px 14px;
    flex: 1;
}

.ai-model-list::-webkit-scrollbar { width: 8px; }
.ai-model-list::-webkit-scrollbar-track { background: transparent; }
.ai-model-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

.ai-model-subgroup {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.35);
    padding: 6px 8px 2px;
    margin-top: 2px;
}

.ai-model-item {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px 34px 8px 10px;
    margin: 2px 0;
    color: rgba(255, 255, 255, 0.82);
    font-family: 'Rubik', sans-serif;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

/* Auto mode toggle row above the tabs */
.ai-model-auto-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    margin: 0 16px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
}
.ai-model-auto-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.ai-model-auto-info > i {
    color: rgba(180, 160, 255, 0.95);
    font-size: 14px;
}
.ai-model-auto-title {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.2;
}
.ai-model-auto-desc {
    margin-top: 2px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.3;
}
.ai-model-auto-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
}
.ai-model-auto-switch input { opacity: 0; width: 0; height: 0; }
.ai-model-auto-slider {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    transition: background 0.18s;
}
.ai-model-auto-slider::before {
    content: '';
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.18s;
}
.ai-model-auto-switch input:checked + .ai-model-auto-slider {
    background: rgba(131, 58, 180, 0.65);
}
.ai-model-auto-switch input:checked + .ai-model-auto-slider::before {
    transform: translateX(16px);
}

.ai-model-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.07);
}

.ai-model-item.selected {
    background: rgba(131, 58, 180, 0.12);
    border-color: rgba(131, 58, 180, 0.35);
}

.ai-model-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-model-item-name {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
}

.ai-model-item-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-model-item-check {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(180, 160, 255, 0.95);
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.15s;
}

.ai-model-item.selected .ai-model-item-check {
    opacity: 1;
}

.ai-model-empty {
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

.ai-model-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
    flex: 1;
    min-width: 120px;
    max-width: 100%;
    font-family: 'Rubik', sans-serif;
    transition: background 0.2s, border-color 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-model-select option,
.ai-model-select optgroup {
    background: #1a1d2e;
    color: rgba(255, 255, 255, 0.85);
    padding: 4px 8px;
}

.ai-model-select:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.ai-model-select:focus {
    outline: none;
    border-color: rgba(29, 96, 253, 0.3);
}

#bottom-options {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
}

.ai-chat-panel {
    position: fixed;
    left: 0;
    top: 0;
    width: 280px;
    height: 100vh;
    /* Layered background. --panel-bg is set by applyBackgroundColorToUI when
       the user picks a background color — it's clamped to a low-luminance
       range so the panel always reads darker than the viewport regardless
       of how vibrant the picked color is. Falls back to --brand-grad-deep
       for the initial state before any pick has happened. The white wash
       on top adds the subtle glassy lift. */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
        var(--panel-bg, var(--brand-grad-deep));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    display: flex;
    flex-direction: column;
    z-index: 10001;
    font-family: 'Rubik', sans-serif;
    /* Stronger drop shadow + 1px inner top highlight gives the panel visible
       separation and elevation against the viewport. */
    /* Layered shadow — modern dashboard pattern. Three drop shadows stacked:
         · Close 8px blur with low Y offset    → defined edge, sharp seam
         · Medium 24px blur with moderate Y    → near-field depth
         · Wide 48px blur with strong Y        → ambient halo on the viewport
       Light is imagined from top-left, so the right-side panel mirrors X.
       Inset top highlight catches the same light at the very top of the
       panel "wall." Multi-layer stacking creates a much softer, more
       believable shadow than a single huge blur at high alpha. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        2px 2px 8px rgb(var(--ui-shadow-rgb) / 0.45),
        8px 8px 24px rgb(var(--ui-shadow-rgb) / 0.36),
        20px 16px 56px rgb(var(--ui-shadow-rgb) / 0.26);
    transform: translateX(-100%);
    transition: transform 0.3s ease !important;
}

.ai-chat-panel.open {
    transform: none;
}

/* Header */
.ai-chat-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.32);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0 12px 0 0;
    color: white;
    font-weight: 600;
    font-size: 14px;
    gap: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ai-chat-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.ai-chat-header-title i {
    font-size: 12px;
    color: rgba(140, 160, 255, 0.95);
}

.ai-header-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.ai-header-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1;
    font-weight: 500;
    font-family: 'Rubik', sans-serif;
    white-space: nowrap;
}

.ai-header-btn i {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
}

.ai-header-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
}

.ai-header-btn:focus-visible {
    outline: 2px solid var(--brand-cyan, #42D6FF);
    outline-offset: 2px;
    color: rgba(255, 255, 255, 0.95);
}

/* "New chat" button — was previously red which read as a "delete/danger"
   action rather than a positive new-conversation affordance and clashed
   with the brand purple/cyan palette. */
.ai-clear-btn {
    padding: 5px 7px;
    width: auto;
    color: rgba(255, 255, 255, 0.55);
    border-color: transparent;
    background: none;
    font-size: 12px;
}

.ai-clear-btn:hover {
    color: rgba(140, 160, 255, 0.95);
    background: rgba(140, 160, 255, 0.10);
    border-color: rgba(140, 160, 255, 0.18);
}

.ai-header-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── History Drawer ── */

.ai-history-drawer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(8, 8, 20, 0.97);
    backdrop-filter: blur(20px);
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-history-drawer.open {
    transform: translateX(0);
}

.ai-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-history-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Rubik', sans-serif;
    letter-spacing: 0.2px;
}

.ai-history-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 13px;
    transition: color 0.2s, background 0.2s;
}

.ai-history-close:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.06);
}

.ai-history-search {
    padding: 10px 14px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-history-search i {
    color: rgba(255, 255, 255, 0.2);
    font-size: 11px;
    position: absolute;
    left: 24px;
}

.ai-history-search input {
    width: 100%;
    padding: 7px 10px 7px 28px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-family: 'Rubik', sans-serif;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.ai-history-search input:focus {
    border-color: rgba(140, 160, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
}

.ai-history-search input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.ai-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px;
}

.ai-history-list::-webkit-scrollbar {
    width: 4px;
}

.ai-history-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

.ai-history-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 0;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    font-family: 'Rubik', sans-serif;
}

.ai-history-item {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    border-left: 3px solid transparent;
    margin-bottom: 2px;
}

.ai-history-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.ai-history-item.active {
    border-left-color: rgba(140, 160, 255, 0.5);
    background: rgba(140, 160, 255, 0.06);
}

.ai-history-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.ai-history-item-title {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Rubik', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.ai-history-item-date {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    flex-shrink: 0;
}

.ai-history-item-preview {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}

.ai-history-item-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
}

.ai-history-item-model {
    padding: 1px 6px;
    background: rgba(140, 160, 255, 0.08);
    border-radius: 4px;
    color: rgba(140, 160, 255, 0.6);
    font-family: 'Rubik', sans-serif;
}

.ai-history-item-count {
    color: rgba(255, 255, 255, 0.2);
}

.ai-history-item-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.ai-history-item:hover .ai-history-item-actions {
    opacity: 1;
}

.ai-history-item-actions button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 10px;
    transition: color 0.15s, background 0.15s;
}

.ai-history-item-actions button:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
}

.ai-history-rename-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(140, 160, 255, 0.4);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 500;
    font-family: 'Rubik', sans-serif;
    outline: none;
    padding: 0 0 2px 0;
    width: 100%;
}

.ai-history-confirm-text {
    color: rgba(239, 80, 80, 0.7);
    font-size: 10px;
    font-weight: 500;
    font-family: 'Rubik', sans-serif;
    margin-right: 4px;
}

.ai-history-confirm-yes,
.ai-history-confirm-no {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    cursor: pointer;
    font-family: 'Rubik', sans-serif;
    transition: all 0.15s;
}

.ai-history-confirm-yes {
    color: rgba(239, 80, 80, 0.8);
    border-color: rgba(239, 80, 80, 0.2);
}

.ai-history-confirm-yes:hover {
    background: rgba(239, 80, 80, 0.15);
    border-color: rgba(239, 80, 80, 0.4);
}

.ai-history-confirm-no {
    color: rgba(255, 255, 255, 0.5);
}

.ai-history-confirm-no:hover {
    background: rgba(255, 255, 255, 0.06);
}

.ai-history-empty,
.ai-history-signin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    color: rgba(255, 255, 255, 0.2);
    font-family: 'Rubik', sans-serif;
}

.ai-history-empty i,
.ai-history-signin i {
    font-size: 28px;
    opacity: 0.5;
}

.ai-history-empty p,
.ai-history-signin p {
    font-size: 12px;
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

/* Figure placeholder in loaded history */
.figure-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    margin: 8px 0;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
    font-family: 'Rubik', sans-serif;
}

.figure-placeholder i {
    font-size: 16px;
    opacity: 0.5;
}

/* Messages Container */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}


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

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

.ai-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
}

.ai-chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Individual Messages */
.ai-message {
    width: 100%;
    box-sizing: border-box;
    animation: aiMessageFloat 0.3s ease-out;
    position: relative;
    padding: 10px 12px;
}

.ai-message + .ai-message {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

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

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

/* Message Labels */
.ai-message-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.ai-message-label i {
    font-size: 10px;
}

.ai-message-label.user-label {
    color: rgba(130, 160, 255, 0.6);
}

.ai-message-label.assistant-label {
    color: rgba(160, 140, 255, 0.6);
}

.ai-message.assistant .ai-message-content {
    /* no extra styling — flat full-width */
}

.ai-message-content {
    font-size: calc(13px * var(--ui-text-scale, 1));
    line-height: 1.5;
    word-wrap: break-word;
    pointer-events: all !important;
    user-select: text;
    -webkit-user-select: text;
}

.ai-message-content * {
    user-select: text;
    -webkit-user-select: text;
}

.ai-message.user .ai-message-content {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    border-left: 2px solid rgba(100, 140, 255, 0.3);
    padding: 8px 12px;
}

.ai-message.assistant .ai-message-content {
    color: rgba(255, 255, 255, 0.85);
    padding: 0;
}

.ai-message.error .ai-message-content {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fca5a5;
}

/* ── Thinking Block ── */
.ai-thinking-block {
    margin-bottom: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.ai-thinking-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    transition: background 0.2s;
}

.ai-thinking-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

.ai-thinking-header i.fa-brain {
    color: rgba(180, 160, 255, 0.6);
    font-size: 11px;
}

.ai-thinking-label {
    flex: 1;
}

.ai-thinking-timer {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    font-variant-numeric: tabular-nums;
}

.ai-thinking-chevron {
    font-size: 10px;
    transition: transform 0.2s;
    color: rgba(255, 255, 255, 0.25);
}

.ai-thinking-block.expanded .ai-thinking-chevron {
    transform: rotate(180deg);
}

.ai-thinking-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.5;
    white-space: pre-wrap;
    font-family: 'Fira Code', monospace;
}

.ai-thinking-block.expanded .ai-thinking-content {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Auto-expand while actively thinking */
.ai-thinking-block:not(.done) .ai-thinking-content {
    max-height: 200px;
    overflow-y: auto;
    padding: 8px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.ai-thinking-block:not(.done) .ai-thinking-label {
    animation: thinkingPulse 1.5s ease-in-out infinite;
}

@keyframes thinkingPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ── Tool Call Rows (Cursor-style) ── */
.ai-tool-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.ai-tool-row {
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    overflow: hidden;
    transition: background 0.2s, border-color 0.2s;
}

.ai-tool-row.active {
    border-color: rgba(131, 58, 180, 0.2);
    background: rgba(131, 58, 180, 0.05);
}

.ai-tool-row.completed {
    opacity: 0.7;
}

.ai-tool-row.completed:hover {
    opacity: 1;
}

.ai-tool-row-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    transition: background 0.15s;
    min-height: 32px;
}

.ai-tool-row-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

.ai-tool-icon {
    font-size: 11px;
    width: 16px;
    text-align: center;
    color: rgba(131, 58, 180, 0.6);
    flex-shrink: 0;
}

.ai-tool-row-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-tool-row-status {
    font-size: 11px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.ai-tool-row.active .ai-tool-row-status {
    color: rgba(131, 58, 180, 0.8);
}

.ai-tool-row.completed .ai-tool-row-status {
    color: rgba(74, 222, 128, 0.7);
}

.ai-tool-row.interrupted {
    border-color: rgba(251, 191, 36, 0.25);
    background: rgba(251, 191, 36, 0.06);
    opacity: 0.85;
}

.ai-tool-row.interrupted .ai-tool-row-status {
    color: rgba(251, 191, 36, 0.8);
}

.ai-tool-row.interrupted .ai-tool-row-name {
    color: rgba(251, 191, 36, 0.9);
}

.ai-tool-row.failed {
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.05);
    opacity: 0.8;
}

.ai-tool-row.failed .ai-tool-row-status {
    color: rgba(239, 68, 68, 0.7);
}

.ai-tool-row.failed .ai-tool-row-name {
    color: rgba(239, 68, 68, 0.8);
}

.ai-interruption-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 8px;
    color: rgba(251, 191, 36, 0.9);
    font-size: 12px;
    font-family: 'Rubik', sans-serif;
    line-height: 1.5;
    margin: 8px 10px;
}

.ai-interruption-notice i {
    margin-top: 2px;
    flex-shrink: 0;
}

.ai-tool-row-chevron {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.2);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.ai-tool-row.expanded .ai-tool-row-chevron {
    transform: rotate(90deg);
}

.ai-tool-row-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

.ai-tool-row.expanded .ai-tool-row-details {
    max-height: 300px;
    overflow-y: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.ai-tool-row-params,
.ai-tool-row-result {
    padding: 4px 8px;
    font-size: 11px;
    font-family: 'Fira Code', monospace;
    color: rgba(255, 255, 255, 0.35);
    white-space: pre-wrap;
    word-break: break-all;
}

.ai-tool-row-result {
    color: rgba(74, 222, 128, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* Live progress strip inside tool row (streaming batch ops, SCF iterations, Python stdout) */
.ai-tool-row-progress {
    padding: 6px 10px 8px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'SF Mono', 'Fira Code', monospace;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    display: none;
}

.ai-tool-row-progress.visible {
    display: block;
}

.ai-tool-row-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
    position: relative;
}

.ai-tool-row-progress-fill {
    height: 100%;
    width: 0%;
    background: #8b5cf6;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 3px;
    position: relative;
}

/* Traveling sheen across the whole bar (not just the fill) so even a small
   fill telegraphs "live" and the motion never stalls. */
.ai-tool-row.active .ai-tool-row-progress-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(131, 58, 180, 0.18) 45%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(131, 58, 180, 0.18) 55%,
        transparent 100%);
    background-size: 200% 100%;
    animation: ai-tool-progress-sheen 1.6s linear infinite;
    pointer-events: none;
    border-radius: 3px;
}

@keyframes ai-tool-progress-sheen {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Completion: snap to 100%, switch to green. */
.ai-tool-row.completed .ai-tool-row-progress-fill {
    width: 100% !important;
    background: #4ade80;
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.25s ease;
}

.ai-tool-row.failed .ai-tool-row-progress-fill,
.ai-tool-row.interrupted .ai-tool-row-progress-fill {
    background: #ef4444;
}

.ai-tool-row-progress-text {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-tool-row-stdout {
    margin: 0;
    padding: 6px 10px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 10.5px;
    line-height: 1.45;
    color: rgba(200, 200, 255, 0.85);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    max-height: 220px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.ai-tool-row-stdout .stderr {
    color: #ff8a8a;
}

/* Python Live Code Preview in Tool Row */
.ai-tool-row-code {
    margin: 0;
    padding: 8px 10px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 11px;
    line-height: 1.5;
    color: #c8c8ff;
    white-space: pre-wrap;
    word-break: break-all;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
}

/* Python Execution Permission Dialog */
/* Inline python execution permission (Cursor-style) */
.python-confirm-inline {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: rgba(131, 58, 180, 0.04);
    animation: pyConfirmFadeIn 0.2s ease;
}
@keyframes pyConfirmFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.python-confirm-inline-label {
    flex: 1;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 6px;
}
.python-confirm-inline-label i {
    font-size: 10px;
    color: rgba(245, 158, 11, 0.7);
}
.python-confirm-inline-buttons {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.python-confirm-inline-deny {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    font-size: 11px;
    min-height: 28px;
    transition: all 0.15s;
}
.python-confirm-inline-deny:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
}
.python-confirm-inline-allow {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    border: none;
    background: rgba(131, 58, 180, 0.7);
    color: white;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    min-height: 28px;
    transition: all 0.15s;
}
.python-confirm-inline-allow:hover {
    background: rgba(131, 58, 180, 0.9);
}
/* Waiting-for-permission state on the tool row */
.ai-tool-row.awaiting-permission {
    border-color: rgba(245, 158, 11, 0.25);
    background: rgba(245, 158, 11, 0.04);
}
.ai-tool-row.awaiting-permission .ai-tool-row-status {
    color: rgba(245, 158, 11, 0.8);
}

/* Python Inline Figures — match the Stripe/Linear chart-card aesthetic.
   The matplotlib figure is generated with #1a1a2e background to seamlessly
   continue into this card; the card itself adds the rounded edges, subtle
   border, and elevation shadow that matplotlib can't render natively. */
.python-figure-wrapper {
    margin-top: 12px;
    margin-bottom: 4px;
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 8px 24px -8px rgb(var(--ui-shadow-rgb) / 0.6),
        0 2px 6px rgb(var(--ui-shadow-rgb) / 0.28);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.python-figure-wrapper:hover {
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 12px 32px -8px rgb(var(--ui-shadow-rgb) / 0.65),
        0 4px 10px rgb(var(--ui-shadow-rgb) / 0.34);
}
.python-figure {
    width: 100%;
    display: block;
    cursor: zoom-in;
    /* Default browser bilinear is right for downscaling our 140-dpi PNG to
       the chat column width — `crisp-edges` would re-introduce aliasing. */
    transition: opacity 0.15s ease;
}
.python-figure:hover { opacity: 0.92; }

/* Stop Button Mode */
#aiSendBtn.ai-stop-mode {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.15));
    border-color: rgba(239, 68, 68, 0.3);
    color: rgba(252, 165, 165, 0.9);
}

#aiSendBtn.ai-stop-mode:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.5), rgba(239, 68, 68, 0.3));
    border-color: rgba(239, 68, 68, 0.5);
}

/* Legacy — kept for backwards compat */
.ai-actions-badge {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-action-tag {
    background: rgba(29, 96, 253, 0.2);
    color: rgba(165, 180, 252, 0.8);
    padding: 2px 7px;
    border-radius: 8px;
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ai-action-tag i {
    font-size: 9px;
}

/* Typing Indicator */
.ai-typing {
    display: flex;
    gap: 5px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    width: fit-content;
}

.ai-typing span {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    animation: aiTypingBounce 1.4s infinite ease-in-out;
}

.ai-typing span:nth-child(1) {
    animation-delay: 0s;
}

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

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

@keyframes aiTypingBounce {

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

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

/* ── Thinking Budget Control ── */
.ai-thinking-control {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

.ai-thinking-control i {
    font-size: 10px;
    color: rgba(180, 160, 255, 0.5);
}

.ai-thinking-control-label {
    white-space: nowrap;
}

.ai-thinking-toggle {
    display: flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.ai-thinking-opt {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    font-size: 10px;
    font-family: 'Rubik', sans-serif;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.ai-thinking-opt:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
}

.ai-thinking-opt.active {
    background: rgba(131, 58, 180, 0.2);
    color: rgba(180, 160, 255, 0.9);
}

/* Input Area */
.ai-chat-input-area {
    display: flex;
    flex-direction: column;
    padding: 8px 10px 10px;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    gap: 6px;
    position: relative;
}

.ai-chat-input-area::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to top, rgba(8, 10, 22, 0.8), transparent);
    pointer-events: none;
}

/* Attachment button */
.ai-attach-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ai-attach-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}
.ai-attach-btn.has-files {
    color: rgba(29, 96, 253, 0.8);
    border-color: rgba(29, 96, 253, 0.2);
}

/* Attachment chips container */
.ai-attachment-chips {
    display: none;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0;
}
.ai-attachment-chips.visible {
    display: flex;
}

/* Individual file chip */
.ai-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(29, 96, 253, 0.12);
    border: 1px solid rgba(29, 96, 253, 0.2);
    border-radius: var(--radius-lg);
    color: rgba(180, 195, 255, 0.9);
    font-size: 11px;
    max-width: 100%;
    min-width: 0;
}
.ai-attachment-chip .chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-attachment-chip .chip-size {
    color: rgba(255, 255, 255, 0.3);
    font-size: 10px;
    flex-shrink: 0;
}
.ai-attachment-chip .chip-remove {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.3);
    font-size: 9px;
    padding: 2px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: color 0.15s;
}
.ai-attachment-chip .chip-remove:hover {
    color: rgba(239, 68, 68, 0.8);
}

/* Drop overlay */
.ai-drop-overlay {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(29, 96, 253, 0.18);
    border: 2px dashed rgba(29, 96, 253, 0.6);
    border-radius: var(--radius-md);
    z-index: var(--z-raised);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(220, 230, 255, 0.95);
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    backdrop-filter: blur(2px);
}
.ai-drop-overlay i {
    font-size: 24px;
    color: rgba(116, 180, 255, 0.95);
}
.ai-chat-input-area.drag-active .ai-drop-overlay {
    display: flex;
}

/* File badges in sent user messages */
.ai-message.user .ai-attached-files {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ai-attached-file-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}
.ai-attached-file-badge i {
    font-size: 9px;
}

#aiChatInput {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: white;
    font-size: calc(13px * var(--ui-text-scale, 1));
    font-family: 'Rubik', sans-serif;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    resize: none;
    min-height: 24px;
    max-height: 220px;
    overflow-y: auto;
    line-height: 1.4;
}


#aiChatInput::-webkit-scrollbar {
    width: 4px;
}

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

#aiChatInput::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

#aiChatInput::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

#aiChatInput::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

#aiChatInput:focus {
    border-color: rgba(66, 214, 255, 0.55);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(66, 214, 255, 0.15);
}

#aiSendBtn {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(29, 96, 253, 0.2);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(29, 96, 253, 0.2), rgba(131, 58, 180, 0.15));
    color: rgba(180, 195, 255, 0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

#aiSendBtn:hover {
    transform: scale(1.06);
    background: linear-gradient(135deg, rgba(29, 96, 253, 0.35), rgba(131, 58, 180, 0.25));
    border-color: rgba(29, 96, 253, 0.35);
    box-shadow: 0 0 14px rgba(29, 96, 253, 0.2);
}

#aiSendBtn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

/* Settings Modal */
.ai-settings-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 10002;
    align-items: center;
    justify-content: center;
}

.ai-settings-modal.open {
    display: flex;
}

.ai-settings-content {
    background: var(--brand-grad-dim);
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-settings-content h3 {
    color: white;
    margin: 0 0 20px 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-settings-content h3 i {
    color: #fbbf24;
}

#aiApiKeyInput {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 14px;
    font-family: monospace;
    margin-bottom: 10px;
    box-sizing: border-box;
}

#aiApiKeyInput:focus {
    outline: none;
    border-color: var(--brand-blue);
}

.ai-settings-note {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin: 0 0 20px 0;
}

.ai-settings-buttons {
    display: flex;
    gap: 10px;
}

.ai-settings-buttons button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-family: 'Rubik', sans-serif;
    transition: all 0.2s;
}

#aiSaveKeyBtn {
    background: var(--brand-grad-135);
    color: white;
}

#aiSaveKeyBtn:hover {
    box-shadow: 0 5px 20px rgba(29, 96, 253, 0.4);
}

#aiCancelKeyBtn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

#aiCancelKeyBtn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* BYOK key modal */
.byok-content {
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px 28px 24px;
}

.byok-content .ai-settings-note {
    margin-bottom: 22px;
    line-height: 1.5;
}

.byok-field {
    margin-bottom: 18px;
}

.byok-field:last-of-type {
    margin-bottom: 4px;
}

.byok-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.byok-label-name {
    letter-spacing: 0.2px;
}

.byok-prefix-hint {
    color: rgba(255, 255, 255, 0.32);
    font-family: monospace;
    font-size: 11px;
    font-weight: 400;
}

.byok-get-link {
    margin-left: auto;
    color: #a5b4fc;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
}

.byok-get-link:hover {
    color: #c7d2fe;
    text-decoration: underline;
}

.byok-input-row {
    position: relative;
    display: block;
}

.byok-input {
    width: 100%;
    padding: 11px 40px 11px 13px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.32);
    color: white;
    font-size: 13px;
    font-family: monospace;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.byok-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.byok-input:focus {
    outline: none;
    border-color: #818cf8;
    background: rgba(0, 0, 0, 0.4);
}

.byok-eye {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 6px 8px;
    font-size: 13px;
    line-height: 1;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.byok-eye:hover {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.06);
}

.byok-status {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.byok-status-on {
    color: #34d399;
}

.byok-status-off {
    color: rgba(255, 255, 255, 0.35);
}

.byok-warn {
    margin: 4px 0 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fecaca;
    font-size: 12px;
}

.byok-buttons {
    margin-top: 22px;
    gap: 8px;
}

.byok-clear-btn {
    background: rgba(239, 68, 68, 0.15);
    color: #fecaca;
    border: 1px solid rgba(239, 68, 68, 0.22) !important;
}

.byok-clear-btn:hover {
    background: rgba(239, 68, 68, 0.28);
}

.byok-privacy-link {
    display: inline-block;
    margin-left: 4px;
    color: #a5b4fc;
    text-decoration: none;
    white-space: nowrap;
}

.byok-privacy-link:hover {
    color: #c7d2fe;
    text-decoration: underline;
}

/* Account dropdown — privacy link styled as inline flex to match buttons */
#settingsDropdown .privacy-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    justify-content: center;
}

/* Welcome Message */
.ai-welcome {
    text-align: center;
    padding: 30px 16px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: auto;
    margin-bottom: auto;
}

.ai-welcome-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(29, 96, 253, 0.15), rgba(131, 58, 180, 0.15));
    border: 1px solid rgba(29, 96, 253, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-welcome-icon i {
    font-size: 18px;
    color: rgba(140, 160, 255, 0.6);
}

.ai-welcome h4 {
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 6px 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.ai-welcome p {
    font-size: 11.5px;
    line-height: 1.6;
    margin: 0;
    color: rgba(255, 255, 255, 0.28);
}

/* Quick Actions */
.ai-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: none;
}

.ai-quick-btn {
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    font-family: 'Rubik', sans-serif;
}

.ai-quick-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

/* Tool Caption (shown at bottom of message during streaming) */
.ai-tool-caption {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(29, 96, 253, 0.1);
    border-radius: 8px;
    color: rgba(165, 180, 252, 0.7);
    font-size: 11px;
    animation: toolCaptionPulse 1.5s ease-in-out infinite;
}

.ai-tool-caption i {
    font-size: 10px;
}

@keyframes toolCaptionPulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* Responsive (covered by mobile section at bottom) */

/* File Explorer Panel */
.file-explorer-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 244px;
    height: 100vh;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
        var(--panel-bg, var(--brand-grad-deep));
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    backdrop-filter: blur(10px);
    /* Mirror of .ai-chat-panel — same layered shadow language but flipped
       on X since this panel sits on the right edge of the viewport. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        -2px 2px 8px rgb(var(--ui-shadow-rgb) / 0.45),
        -8px 8px 24px rgb(var(--ui-shadow-rgb) / 0.36),
        -20px 16px 56px rgb(var(--ui-shadow-rgb) / 0.26);
}

.file-explorer-panel.open {
    transform: translateX(0);
}

.file-explorer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.file-explorer-title {
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    background: none;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    outline: none;
    width: 100%;
}

.file-explorer-title option {
    background: #1a1a2e;
    color: #fff;
}

.file-explorer-actions {
    display: flex;
    gap: 4px;
}

.file-explorer-actions button {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.file-explorer-actions button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.file-explorer-actions button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

#fileSearchInput {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff;
    font-size: 12px;
    outline: none;
    width: 100%;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

#fileSearchInput:focus {
    border-color: rgba(66, 214, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(66, 214, 255, 0.12);
}

#fileSearchInput::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

#fileSearchInput:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.file-item.hidden,
.folder-item.hidden,
.folder-contents.hidden {
    display: none !important;
}

.file-tree {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    transition: none;
}

.file-tree-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.4);
    gap: 12px;
}

.file-tree-empty i {
    font-size: 48px;
    opacity: 0.3;
}

.file-tree-empty p {
    margin: 0;
    font-size: 14px;
}

/* File/Folder Items */
.file-item,
.folder-item {
    display: flex;
    align-items: center;
    padding: 3px 16px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    transition: background 0.15s;
    user-select: none;
    font-size: calc(12px * var(--ui-text-scale, 1));
}

.file-item:hover,
.folder-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.folder-item.drop-target {
    background: rgba(0, 136, 255, 0.2);
    outline: 2px dashed rgba(0, 136, 255, 0.6);
    outline-offset: -2px;
}

.file-item.active,
.cloud-item.active {
    background: rgba(0, 136, 255, 0.2);
    color: #fff;
}

.file-item.ai-created {
    background: rgba(0, 255, 136, 0.12);
    border-right: 2px solid #00ff88;
}

.file-item i,
.folder-item i {
    margin-right: 8px;
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.folder-item i.folder-icon {
    color: #f0c36d;
}

.file-item i.file-mol {
    color: #00bbff;
}

.file-item i.file-pdb {
    color: #ff6b6b;
}

.file-item i.file-xyz {
    color: #4ecdc4;
}

.file-item i.file-text {
    color: rgba(255, 255, 255, 0.5);
}

.file-item i.file-json {
    color: #f0db4f;
}

/* Panel Resizers */
.panel-resizer {
    position: absolute;
    background: transparent;
    z-index: 10002;
    transition: background 0.2s;
}

.panel-resizer:hover,
.panel-resizer.active {
    background: rgba(29, 96, 253, 0.5);
}

.panel-resizer-horizontal {
    width: 6px;
    height: 100%;
    top: 0;
    cursor: ew-resize;
}

.panel-resizer-vertical {
    width: 100%;
    height: 6px;
    cursor: ns-resize;
}

/* AI Panel resizer (right edge) */
.ai-chat-panel .panel-resizer-horizontal {
    right: -3px;
}

/* File Explorer resizer (left edge) */
.file-explorer-panel .panel-resizer-horizontal {
    left: -3px;
}

/* Cloud/Local divider resizer */
.explorer-divider-resizer {
    height: 8px;
    cursor: ns-resize;
    background: transparent;
    margin: 0;
    position: relative;
}

.explorer-divider-resizer:hover,
.explorer-divider-resizer.active {
    background: rgba(29, 96, 253, 0.3);
}

.explorer-divider-resizer::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.explorer-divider-resizer:hover::after {
    background: rgba(29, 96, 253, 0.6);
}

.folder-contents {
    display: none;
    padding-left: 16px;
}

.folder-item.expanded+.folder-contents {
    display: block;
}

.folder-item .chevron {
    margin-right: 4px;
    transition: transform 0.2s;
    font-size: 11px;
}

.folder-item.expanded .chevron {
    transform: rotate(90deg);
}

/* Text Editor Modal */
.text-editor-modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface-0);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: var(--z-modal);
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s;
    box-shadow: var(--shadow-lg);
}

.text-editor-modal.open {
    display: flex;
    opacity: 1;
}

.text-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.3);
}

#textEditorFilename {
    color: #fff;
    font-weight: 500;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 13px;
}

.text-editor-status {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 12px;
}

#textEditorContent {
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: #e0e0e0;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.6;
    padding: 20px;
    resize: none;
    outline: none;
}

/* Scrollbar styling */
.file-tree::-webkit-scrollbar,
#textEditorContent::-webkit-scrollbar {
    width: 8px;
}

.file-tree::-webkit-scrollbar-track,
#textEditorContent::-webkit-scrollbar-track {
    background: transparent;
}

.file-tree::-webkit-scrollbar-thumb,
#textEditorContent::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* Explorer Tabs */
.explorer-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cloud-section {
    flex: 0 0 auto;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.cloud-section>* {
    flex-shrink: 0;
}

.local-section {
    flex: 1;
    min-height: 80px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* File Context Menu */
.file-context-menu {
    position: fixed;
    background: rgba(20, 25, 40, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 4px 0;
    min-width: 140px;
    z-index: 20000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
}

.file-context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.file-context-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.file-context-menu-item i {
    width: 16px;
    text-align: center;
    font-size: 12px;
    opacity: 0.7;
}

.file-context-menu-item.danger {
    color: #f87171;
}

.file-context-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.15);
}

.file-context-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 0;
}

/* Save Dialog Modal */
.save-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.local-save-dialog {
    background: var(--brand-grad-dim);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 24px 28px;
    min-width: 340px;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.local-save-dialog .save-dialog-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.local-save-dialog .save-dialog-title i {
    color: #4ade80;
}

.local-save-dialog .save-dialog-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.local-save-dialog input[type="text"] {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 14px 16px;
    color: #fff;
    font-size: 15px;
    outline: none;
    min-width: 0;
}

.local-save-dialog input[type="text"]:focus {
    border-color: rgba(0, 136, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.15);
}

.local-save-dialog select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 14px 12px;
    color: #fff;
    font-size: 15px;
    outline: none;
    cursor: pointer;
}

.local-save-dialog select option {
    background: #1a1a2e;
}

.local-save-dialog .save-dialog-buttons {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.local-save-dialog button {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.9);
    padding: 14px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.local-save-dialog button:hover {
    background: rgba(255, 255, 255, 0.15);
}

#localSaveConfirm {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
}

#localSaveConfirm:hover {
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
}

#localSaveCancel:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Inline Rename/Delete */
.file-item .rename-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(0, 136, 255, 0.5);
    border-radius: 3px;
    padding: 2px 6px;
    color: #fff;
    font-size: 12px;
    outline: none;
    min-width: 0;
}

.file-item .rename-confirm,
.file-item .rename-cancel,
.file-item .delete-confirm,
.file-item .delete-cancel {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 2px 6px;
    cursor: pointer;
    font-size: 11px;
}

.file-item .rename-confirm:hover,
.file-item .delete-confirm:hover {
    color: #4ade80;
}

.file-item .rename-cancel:hover,
.file-item .delete-cancel:hover {
    color: #f87171;
}

.file-item .delete-prompt {
    flex: 1;
    font-size: 11px;
    color: #f87171;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-chat-panel.resizing,
.file-explorer-panel.resizing {
    transition: none !important;
}

.cloud-section.resizing,
.local-section.resizing {
    transition: none !important;
}

.section-header {
    padding: 9px 12px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.42);
    font-size: calc(12px * var(--ui-text-scale, 1));
    /* Top highlight gives section headers a distinct edge against the panel
       background — they used to blend into the gradient. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#cloudSectionHeader {
    border-top: 1px solid rgba(122, 204, 255, 0.519);
}

.explorer-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    margin: 4px 0;
}

.cloud-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    max-height: 200px;
}

/* Drag styles for cloud items */
.cloud-item {
    cursor: grab;
}

.cloud-item.dragging {
    opacity: 0.5;
}

.file-tree.drag-over {
    background: rgba(0, 136, 255, 0.1);
    border: 2px dashed rgba(0, 136, 255, 0.5);
    border-radius: 8px;
    min-height: 50px;
}



.local-actions button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.local-actions button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.folder-name-input {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    gap: 8px;
}

.folder-name-input i {
    color: #f0c36d;
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.folder-name-input input {
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 136, 255, 0.5);
    border-radius: 4px;
    padding: 4px 8px;
    color: #fff;
    font-size: 13px;
    outline: none;
}

.folder-name-input input:focus {
    border-color: rgba(0, 136, 255, 0.8);
}

/* Cloud Tab */

.file-item.hidden,
.folder-item.hidden,
.folder-contents.hidden,
.cloud-item.hidden,
.cloud-folder-item.hidden,
.cloud-folder-contents.hidden {
    display: none !important;
}

.cloud-input {
    flex: 1;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    outline: none;
}

.cloud-input:focus {
    border-color: rgba(0, 136, 255, 0.5);
}



.cloud-save-section button:hover {
    opacity: 0.8;
}




.cloud-item:hover {
    background: rgba(255, 255, 255, 0.05);
}


.cloud-item {
    display: flex;
    align-items: center;
    padding: 3px 16px;
    cursor: grab;
    transition: background 0.15s;
}

.cloud-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.cloud-item.dragging {
    opacity: 0.5;
}

.cloud-item>i:first-child {
    margin-right: 8px;
    font-size: 14px;
    width: 16px;
    text-align: center;
    color: #00bbff;
}

.cloud-item-name {
    flex: 1;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    font-size: 12px;
}

.cloud-item-name:hover {
    color: #46a9ff;
}

.cloud-item-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    visibility: hidden;
}

.cloud-item:hover .cloud-item-actions {
    opacity: 1;
    visibility: visible;
}

.cloud-item-actions button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    padding: 0px 0px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
}

.cloud-item-actions button:hover {
    color: #fff;
}

.cloud-item-actions .delete-btn:hover {
    color: #ff6b6b;
}


.cloud-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.4);
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
}

/* Chart Lightbox (legacy) */
.chart-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    cursor: zoom-out;
    animation: lightboxFadeIn 0.2s ease;
}

@keyframes lightboxFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.chart-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: lightboxZoomIn 0.2s ease;
}

@keyframes lightboxZoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

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

/* Chart Inline Container */
.chart-inline-container {
    margin-top: 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.chart-inline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 4px;
    min-height: 32px;
}

.chart-inline-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

.chart-canvas-wrap {
    padding: 2px 10px 10px;
}

.chart-canvas-wrap canvas {
    width: 100% !important;
    height: 230px !important;
}

/* Chart Toolbar */
.chart-toolbar {
    display: flex;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.chart-inline-container:hover .chart-toolbar {
    opacity: 1;
}

.chart-toolbar-btn {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background 0.15s, color 0.15s;
}

.chart-toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

/* Chart Fullscreen Modal */
.chart-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    cursor: default;
    transition: background 0.25s ease, backdrop-filter 0.25s ease;
}

.chart-modal-overlay.active {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
}

.chart-modal-content {
    width: 85vw;
    height: 78vh;
    max-width: 1200px;
    max-height: 800px;
    background: rgba(20, 20, 35, 0.97);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.chart-modal-overlay.active .chart-modal-content {
    transform: scale(1);
    opacity: 1;
}

.chart-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.chart-modal-title {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.chart-modal-actions {
    display: flex;
    gap: 8px;
}

.chart-modal-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
}

.chart-modal-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Figure modal (Python matplotlib) - scrollable, auto-sized */
.figure-modal-content {
    height: auto;
    max-height: 90vh;
    max-width: 90vw;
    width: auto;
}

.figure-modal-body {
    overflow-y: auto;
    padding: 0 20px 20px;
    max-height: calc(90vh - 60px);
}

.figure-modal-body img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    /* Lift the image with the same shadow language as the inline figure card
       so the modal feels like a zoomed-in version of the same chart, not a
       different component. */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 8px 24px -6px rgb(var(--ui-shadow-rgb) / 0.55);
}

/* Cloud folder styles - reuse local folder styles */
.cloud-folder-item {
    display: flex;
    align-items: center;
    padding: 1px 16px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    font-size: calc(12px * var(--ui-text-scale, 1));
    transition: background 0.15s;
    user-select: none;
}

.cloud-folder-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.cloud-folder-contents {
    display: none;
    padding-left: 16px;
}

.cloud-folder-item.expanded+.cloud-folder-contents {
    display: block;
}

.cloud-folder-item .chevron {
    margin-right: 4px;
    transition: transform 0.2s;
    font-size: 11px;
}

.cloud-folder-item.expanded .chevron {
    transform: rotate(90deg);
}

.cloud-folder-item .folder-icon {
    color: #f0c36d;
    margin-right: 8px;
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.cloud-folder-item .cloud-item-actions {
    margin-left: auto;
    opacity: 0;
    visibility: hidden;
}

.cloud-folder-item:hover .cloud-item-actions {
    opacity: 1;
    visibility: visible;
}

.cloud-folder-item.drop-target {
    background: rgba(0, 136, 255, 0.2);
    outline: 2px dashed rgba(0, 136, 255, 0.6);
    outline-offset: -2px;
}

.explorer-search-bar {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
}

.explorer-search-bar input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 6px 10px;
    color: #fff;
    font-size: 12px;
    outline: none;
    transition: all 0.25s ease;
}

.explorer-search-bar input:focus {
    border-color: rgba(0, 136, 255, 0.5);
    background: rgba(255, 255, 255, 0.12);
}

.explorer-search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

#fileSearchInput {
    flex: 1;
    min-width: 0;
    width: 100%;
    transition: all 0.25s ease;
}

#fileSearchInput.sharing {
    flex: 1;
}

.cloud-item i.file-mol {
    color: #00bbff;
}

.cloud-item i.file-pdb {
    color: #ff6b6b;
}

.cloud-item i.file-xyz {
    color: #4ecdc4;
}

#cloudSaveInput {
    display: none;
}

#cloudSaveCancel:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

#cloudSaveInput.visible {
    display: block;
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    outline: none;
}

#cloudSaveInput.visible:focus {
    border-color: rgba(0, 136, 255, 0.5);
    background: rgba(255, 255, 255, 0.12);
}

.cloud-empty i {
    font-size: 36px;
    opacity: 0.3;
}

.cloud-loading {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.5);
}

/* Database Source Selector */
.db-source-select {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    padding: 8px 10px;
    outline: none;
    cursor: pointer;
    min-width: 100px;
    transition: all 0.2s;
}

.db-source-select:hover {
    border-color: rgba(0, 136, 255, 0.5);
    background: rgba(255, 255, 255, 0.12);
}

.db-source-select:focus {
    border-color: rgba(0, 136, 255, 0.5);
    background: rgba(255, 255, 255, 0.12);
}

.db-source-select option {
    background: #1a1a2e;
    color: #fff;
}

.db-search-bar {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 8px;
    align-items: center;
}

.db-search-input {
    flex: 1;
}

/* Global Explorer Toolbar */
.explorer-toolbar {
    display: flex;
    gap: 6px;
}

.explorer-toolbar button {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 12px;
}

.local-toolbar-button {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 5px 5px;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 12px;
}

.filter-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.filter-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    min-width: 150px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.filter-dropdown.show {
    display: block;
}

.filter-dropdown-item {
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}

.filter-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.filter-dropdown-item.active {
    background: rgba(0, 136, 255, 0.2);
    color: #fff;
}

.explorer-toolbar button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.explorer-toolbar button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.explorer-header-right {
    display: flex;
    gap: 4px;
    align-items: center;
    width: 100%;
}

/* Updated header layout */
.file-explorer-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.3);
    gap: 8px;
}

/* Search bar row */
.explorer-search-bar {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
}

.explorer-search-bar input {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 6px 10px;
    color: #fff;
    font-size: 12px;
    outline: none;
    min-width: 0;
}

.explorer-search-bar input:focus {
    border-color: rgba(0, 136, 255, 0.5);
    background: rgba(255, 255, 255, 0.12);
}

.explorer-search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.explorer-search-bar #cloudSaveInput {
    flex: 1.2;
}


/* Panel Collapse Toggle Buttons */
.panel-collapse-toggle {
    position: absolute;
    top: 100%;
    transform: translateY(-100%);
    width: 20px;
    height: 50px;
    background-color: #8a1500;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10003;
    transition: all 0.2s;
    font-size: 12px;
    font-weight: 600;
}

.panel-collapse-toggle:hover {
    background: rgba(29, 96, 253, 0.3);
    color: #fff;
}

/* AI Panel toggle - on right edge, arrow points left when expanded */
.ai-chat-panel .panel-collapse-toggle {
    right: -20px;
    border-radius: 0 6px 6px 0;
    border-left: none;
    background: rgba(12, 15, 28, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.35);
}

.ai-chat-panel .panel-collapse-toggle:hover {
    background: rgba(20, 25, 45, 0.9);
    color: rgba(255, 255, 255, 0.7);
}

/* File Explorer toggle - on left edge, arrow points right when expanded */
.file-explorer-panel .panel-collapse-toggle {
    left: -20px;
    border-radius: 6px 0 0 6px;
    border-right: none;
}

/* Arrow rotation for collapsed state */
.panel-collapse-toggle.collapsed i {
    transform: rotate(180deg);
}

.panel-collapse-toggle i {
    transition: transform 0.3s ease;
}

.cloud-list.drag-over {
    background: rgba(0, 200, 100, 0.1);
    border: 2px dashed rgba(0, 200, 100, 0.5);
    border-radius: 8px;
}

.file-item.dragging {
    opacity: 0.5;
}

.file-item {
    cursor: grab;
}

/* Multi-select styles */
.file-item.selected,
.cloud-item.selected {
    background: rgba(0, 136, 255, 0.25) !important;
    outline: 1px solid rgba(0, 136, 255, 0.5);
}

.file-item.marquee-hover,
.cloud-item.marquee-hover {
    background: rgba(0, 136, 255, 0.15);
}

.selection-marquee {
    position: fixed;
    border: 1px dashed rgba(0, 136, 255, 0.8);
    background: rgba(0, 136, 255, 0.1);
    pointer-events: none;
    z-index: 10000;
    transition: none;
}


.file-item,
.cloud-item {
    position: relative;
}

/* Mic Button */
.ai-mic-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-mic-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.ai-mic-btn.recording {
    background: rgba(239, 68, 68, 0.4);
    border-color: rgba(239, 68, 68, 0.4);
    color: white;
    animation: pulse-mic 1s infinite;
}

@keyframes pulse-mic {

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

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

/* AI Status Text */
.ai-status-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.5) 40%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0.5) 60%,
            rgba(255, 255, 255, 0.5) 100%);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: aiStatusShine 1.5s linear infinite;
}

@keyframes aiStatusShine {
    0% {
        background-position: 100% 0;
    }

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

/* Settings Gear Submenu Styles */
.settings-submenu {
    width: 100%;
    margin-bottom: 5px;
}

.submenu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    color: white;
    font-size: 13px;
}

.submenu-header:hover {
    background: rgba(255, 255, 255, 0.1);
}

.submenu-arrow {
    margin-left: auto;
    font-size: 10px;
    transition: transform 0.2s;
}

.submenu-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.submenu-content.open {
    max-height: 500px;
    padding: 8px;
}

.settings-submenu.open .submenu-arrow {
    transform: rotate(180deg);
}

/* Floating Style Panel - stuck to file explorer */
.style-panel {
    position: absolute;
    top: 70px;
    left: 50%;
    margin-right: 10px;
    transform: translateX(-50%);
    width: 367px;
    max-height: calc(100vh - 90px);
    z-index: 9999;
    background: var(--brand-grad-deep);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    display: flex;
    flex-direction: column;
}

.style-panel.open {
    opacity: 1;
    pointer-events: auto;
}

.style-panel-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    transition: background 0.2s;
}

.style-panel-header:hover {
    background: rgba(255, 255, 255, 0.1);
}

.style-panel-arrow {
    font-size: 10px;
    transition: transform 0.2s;
}

.style-panel.open .style-panel-arrow {
    transform: rotate(180deg);
}

.style-panel-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 12px;
    transition: max-height 0.3s ease, padding 0.3s ease;
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.style-sliders-col,
.style-checkboxes-col {
    display: flex;
    flex-direction: column;
}

.style-sliders-col {
    flex: 1;
    min-width: 150px;
    gap: 3px;
}

.style-checkboxes-col {
    flex: 0 0 auto;
    min-width: 110px;
    gap: 0px;
}

.style-panel-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 12px;
    transition: max-height 0.3s ease, padding 0.3s ease;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}

.style-save-btn {
    width: 100%;
    padding: 6px 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 15px;
}

.style-save-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.25);
}

.style-panel.open .style-panel-content {
    max-height: calc(100vh - 140px);
    padding: 8px 12px 12px;
    overflow-y: auto;
}

.style-panel-content::-webkit-scrollbar {
    width: 5px;
}
.style-panel-content::-webkit-scrollbar-track {
    background: transparent;
}
.style-panel-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}
.style-panel-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Properties Panel - for force and orbital info */


.properties-panel {
    position: fixed;
    top: 60px;
    left: var(--properties-panel-left, 50%);
    transform: translateX(-50%);
    width: 250px;
    z-index: 9998;
    background: var(--brand-grad-deep);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.properties-panel.open {
    opacity: 1;
    pointer-events: auto;
}

.properties-panel-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.properties-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.properties-section-header i {
    color: #60a5fa;
}

.properties-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.properties-section-title {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.properties-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    text-align: center;
}

.properties-empty i {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.25);
}

/* Properties panel control adjustments */
.properties-panel .compact-style-row {
    margin: 4px 0;
}

.properties-panel .compact-style-row label {
    min-width: 80px;
}

.properties-panel input[type="range"] {
    flex: 1;
    max-width: 100px;
}

.properties-panel select {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    font-size: 11px;
}

.properties-panel select option {
    background: #1e293b;
    color: white;
}

/* Orbital Table Panel - sticks to left of file explorer */
.orbital-table-panel {
    position: fixed;
    top: 10px;
    right: 254px;
    /* file explorer width + 10px margin */
    width: 200px;
    max-height: calc(100vh - 20px);
    z-index: 9999;
    background: var(--brand-grad-deep);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    display: none;
    flex-direction: column;
    transition: right 0.3s ease, opacity 0.2s ease;
}

.orbital-table-panel.open {
    display: flex;
}

/* Adjust position when file explorer is closed */
.file-explorer-panel:not(.open)~.orbital-table-panel,
.orbital-table-panel.explorer-closed {
    right: 10px;
}

.orbital-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.2);
}

.orbital-table-header i {
    color: #60a5fa;
}

.orbital-preload-bar {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.orbital-preload-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
    transition: width 0.15s ease;
}

.orbital-preload-bar.complete .orbital-preload-fill {
    background: #4CAF50;
}

.orbital-table-controls {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.orbital-control-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
}

.orbital-control-row label {
    min-width: 50px;
    font-size: 10px;
}

.orbital-control-row input[type="range"] {
    flex: 1;
    max-width: 80px;
    height: 4px;
}

.orbital-control-row span {
    min-width: 32px;
    text-align: right;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

.orbital-phase-toggles {
    display: flex;
    gap: 12px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
}

.orbital-phase-toggles label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.orbital-phase-toggles input[type="checkbox"] {
    width: 12px;
    height: 12px;
}

/* Orbital Render Mode Buttons */
.orbital-render-mode {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.orbital-render-mode label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    min-width: 32px;
}

.orbital-mode-buttons {
    display: flex;
    gap: 4px;
}

.orbital-mode-btn {
    width: 28px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.15s ease;
}

.orbital-mode-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
}

.orbital-mode-btn.active {
    background: rgba(99, 102, 241, 0.4);
    border-color: rgba(99, 102, 241, 0.6);
    color: #fff;
}

.orbital-mode-btn i {
    font-size: 11px;
}

#pointSizeControl {
    margin-top: 6px;
}

#materialPresetControl {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.orbital-material-select {
    flex: 1;
    max-width: 100px;
    height: 22px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    padding: 0 4px;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23aaa' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 14px;
}

.orbital-material-select:hover {
    border-color: rgba(255, 255, 255, 0.35);
    background-color: rgba(255, 255, 255, 0.12);
}

.orbital-material-select:focus {
    border-color: rgba(99, 102, 241, 0.6);
}

.orbital-material-select option {
    background: #1e1e2e;
    color: rgba(255, 255, 255, 0.85);
}

.orbital-table-wrapper {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
}

.orbital-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
}

.orbital-table thead {
    position: sticky;
    top: 0;
    background: rgba(15, 23, 42, 0.98);
    z-index: 1;
}

.orbital-table th {
    padding: 6px 4px;
    text-align: left;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.orbital-table td {
    padding: 6px 4px;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.orbital-table tbody tr {
    cursor: pointer;
    transition: background 0.15s ease;
}

.orbital-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.08);
}

.orbital-table tbody tr.selected {
    background: rgba(96, 165, 250, 0.25);
}

.orbital-table tbody tr.homo {
    color: #4ade80;
}

.orbital-table tbody tr.lumo {
    color: #fb923c;
}

.orbital-table .orbital-type {
    font-weight: 600;
    font-size: 9px;
}

.orbital-table .orbital-energy {
    font-family: monospace;
    font-size: 9px;
}

#style8 {
    width: 60%;
    padding: none;
    border: 1px solid white;
}

input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    padding: 0;
    width: 32px;
    height: 32px;
    background: none;
    cursor: pointer;
}

/* Chrome / Safari */
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
}

/* Firefox */
input[type="color"]::-moz-color-swatch {
    border: none;
}

/* Compact style controls */
.compact-style-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
}

.compact-style-row label {
    flex: 0 0 70px;
    font-size: 14px;
}

.compact-style-row input[type="range"] {
    flex: 1;
    height: 4px;
    max-width: 128px;
}

.compact-style-row input[type="color"] {
    width: 30px;
    height: 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.compact-style-row.checkbox-row {
    justify-content: flex-start;
}

.compact-style-row.checkbox-row label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.compact-style-row.checkbox-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

.compact-btn {
    width: 100%;
    padding: 6px 10px !important;
    font-size: 11px !important;
    margin: 4px 0 !important;
}

/* Account icon with initials */
#accountIcon .user-initials {
    width: 20px;
    height: 20px;
    font-size: 10px;
    top: 0;
}

#settingsGear {
    padding: 0px;
}

#settingsDropdown {
    width: fit-content !important;
    width: 90px;
    padding: 10px;
}

/* ===== TUTORIAL OVERLAY - ENHANCED ORANGE THEME ===== */
.tutorial-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
}

.tutorial-overlay.active {
    display: block;
    animation: tutorialFadeIn 0.3s ease-out;
}

@keyframes tutorialFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Four dark panels around the spotlight */
.tutorial-backdrop-top,
.tutorial-backdrop-bottom,
.tutorial-backdrop-left,
.tutorial-backdrop-right {
    position: absolute;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(2px);
    pointer-events: auto;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.tutorial-backdrop-top {
    top: 0;
    left: 0;
    right: 0;
}

.tutorial-backdrop-bottom {
    bottom: 0;
    left: 0;
    right: 0;
}

.tutorial-backdrop-left {
    left: 0;
}

.tutorial-backdrop-right {
    right: 0;
}

/* Highlight ring around target */
.tutorial-highlight {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100001;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 30px rgba(255, 107, 53, 0.3),
        0 0 60px rgba(255, 107, 53, 0.15),
        inset 0 0 20px rgba(255, 107, 53, 0.1);
}

.tutorial-ring {
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 3px solid #ff6b35;
    border-radius: inherit;
    animation: tutorialRingPulse 2s ease-in-out infinite;
}

.tutorial-ring-2 {
    top: -14px;
    left: -14px;
    right: -14px;
    bottom: -14px;
    border: 2px solid rgba(255, 107, 53, 0.4);
    display: block;
    animation: tutorialRingPulse2 2s ease-in-out infinite 0.3s;
}

@keyframes tutorialRingPulse {

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

    50% {
        transform: scale(1.03);
        opacity: 0.85;
    }
}

@keyframes tutorialRingPulse2 {

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

    50% {
        transform: scale(1.05);
        opacity: 0.25;
    }
}

/* Expanded description row */
.desc-expanded-row {
    background: rgba(0, 50, 80, 0.4) !important;
}

.desc-expanded-row:hover {
    background: rgba(0, 50, 80, 0.5) !important;
}

.desc-expanded-row td {
    padding: 0 !important;
    border: none !important;
}

.desc-expanded-cell {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    white-space: normal;
    cursor: pointer;
    border-left: 3px solid rgba(0, 180, 255, 0.6);
    transition: max-height 0.25s ease, padding 0.25s ease;
}

.desc-expanded-row.show .desc-expanded-cell {
    max-height: 200px;
    padding: 16px 20px;
}

@keyframes tutorialPulseOrange {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
        border-color: #ff6b35;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
        border-color: #f7931e;
    }
}

@keyframes tutorialPulseOrange2 {

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

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

.tutorial-tooltip {
    position: absolute;
    background: var(--brand-grad-dim);
    border: 2px solid #ff6b35;
    border-radius: 20px;
    padding: 0;
    width: 360px;
    max-width: calc(100vw - 40px);
    color: white;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.7),
        0 0 50px rgba(255, 107, 53, 0.25),
        0 0 100px rgba(255, 107, 53, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    pointer-events: auto;
    z-index: 100002;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    animation: tutorialTooltipEnter 0.4s ease-out;
}

@keyframes tutorialTooltipEnter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }

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

.tutorial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #ff8c42 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
}

.tutorial-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: tutorialShimmer 3s ease-in-out infinite;
}

@keyframes tutorialShimmer {

    0%,
    100% {
        transform: translateX(-50%);
    }

    50% {
        transform: translateX(50%);
    }
}

.tutorial-step-label {
    font-size: 11px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tutorial-close {
    background: rgba(0, 0, 0, 0.25);
    border: none;
    color: white;
    font-size: 18px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
    backdrop-filter: blur(4px);
}

.tutorial-close:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: scale(1.1) rotate(90deg);
}

.tutorial-step-indicator {
    display: flex;
    gap: 8px;
    padding: 18px 24px 14px;
    justify-content: center;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.15);
}

.tutorial-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 1px solid transparent;
}

.tutorial-step-dot:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.tutorial-step-dot.active {
    background: #ff6b35;
    transform: scale(1.4);
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.7);
    border-color: rgba(255, 255, 255, 0.5);
}

.tutorial-step-dot.completed {
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}

.tutorial-content {
    padding: 4px 24px 20px;
}

.tutorial-content h3 {
    margin: 0 0 12px 0;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.3px;
}

.tutorial-content h3 i {
    color: #ff6b35;
    font-size: 20px;
    filter: drop-shadow(0 2px 4px rgba(255, 107, 53, 0.3));
}

.tutorial-content p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.tutorial-content .tutorial-tip {
    margin-top: 16px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.12), rgba(255, 140, 66, 0.08));
    border-left: 3px solid #ff6b35;
    border-radius: 0 10px 10px 0;
    font-size: 13px;
    color: #ffc4a3;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.tutorial-content .tutorial-tip i {
    color: #ffb088;
    font-size: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}

.tutorial-buttons {
    display: flex;
    gap: 12px;
    padding: 16px 24px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tutorial-btn {
    padding: 11px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tutorial-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
}

.tutorial-btn.tutorial-next {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    margin-left: auto;
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.45);
    border: none;
    padding: 11px 24px;
}

.tutorial-btn.tutorial-next:hover {
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.55);
    transform: translateY(-3px);
    filter: brightness(1.1);
}

.tutorial-btn.tutorial-skip {
    color: rgba(255, 255, 255, 0.45);
    background: transparent;
    font-weight: 500;
    border: none;
    padding: 11px 14px;
}

.tutorial-btn.tutorial-skip:hover {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.05);
}

.tutorial-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none !important;
}

/* Highlight shape variants */
.tutorial-highlight.rect {
    border-radius: 14px;
}

.tutorial-highlight.rect .tutorial-ring,
.tutorial-highlight.rect .tutorial-ring-2 {
    border-radius: 18px;
}

/* Arrow pointer */
.tutorial-tooltip::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: var(--brand-grad-dim);
    border: 2px solid #ff6b35;
    transform: rotate(45deg);
    z-index: -1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tutorial-tooltip.arrow-top::after {
    top: -11px;
    left: 50%;
    margin-left: -9px;
    border-right: none;
    border-bottom: none;
}

.tutorial-tooltip.arrow-bottom::after {
    bottom: -11px;
    left: 50%;
    margin-left: -9px;
    border-left: none;
    border-top: none;
}

.tutorial-tooltip.arrow-left::after {
    left: -11px;
    top: 50%;
    margin-top: -9px;
    border-right: none;
    border-top: none;
}

.tutorial-tooltip.arrow-right::after {
    right: -11px;
    top: 50%;
    margin-top: -9px;
    border-left: none;
    border-bottom: none;
}

.tutorial-tooltip.arrow-none::after {
    display: none;
}

/* Center message special styling */
.tutorial-overlay .tutorial-full-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(3px);
    pointer-events: auto;
}

/* Mobile responsiveness for tutorial */
@media (max-width: 480px) {
    .tutorial-tooltip {
        width: calc(100vw - 32px);
        max-width: none;
        border-radius: 16px;
    }

    .tutorial-content h3 {
        font-size: 18px;
    }

    .tutorial-content p {
        font-size: 13px;
    }

    .tutorial-buttons {
        flex-wrap: wrap;
    }

    .tutorial-btn.tutorial-next {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   REMOTE FILE SYSTEM ACCESS - Compact Integration
   ============================================================================ */

/* Toolbar Button - Connected State */
.remote-connect-btn.connected {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #10b981 !important;
}

.remote-connect-btn.connected:hover {
    background: rgba(16, 185, 129, 0.3) !important;
}

/* Modal Overlay */
.remote-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 10001;
    align-items: center;
    justify-content: center;
}

/* Modal Container */
.remote-modal {
    background: var(--brand-grad-deep);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    width: 400px;
    max-width: 90vw;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* Box sizing for all remote elements */
.remote-modal *,
.remote-modal *::before,
.remote-modal *::after {
    box-sizing: border-box;
}

/* Modal Header */
.remote-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.remote-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 600;
}

.remote-modal-title i {
    color: rgba(255, 255, 255, 0.6);
}

.remote-modal-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.remote-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Modal Body */
.remote-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    max-height: calc(85vh - 130px);
}

/* Status Banner */
.remote-status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 8px;
    margin-bottom: 16px;
    color: #10b981;
    font-size: 13px;
}

.remote-status-banner i {
    font-size: 14px;
}

.remote-disconnect-btn {
    margin-left: auto;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.remote-disconnect-btn:hover {
    background: rgba(239, 68, 68, 0.25);
}

/* Form Styles */
.remote-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.remote-form-row {
    display: flex;
    gap: 12px;
    width: 100%;
}

.remote-form-group {
    margin-bottom: 14px;
    width: 100%;
}

.remote-form-group.flex-1 {
    flex: 1;
    min-width: 0;
}

.remote-form-group.flex-3 {
    flex: 3;
    min-width: 0;
}

.remote-form-group label {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.remote-form-group input[type="text"],
.remote-form-group input[type="number"],
.remote-form-group input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: white;
    font-size: 13px;
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
    margin: 0;
}

.remote-form-group input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

.remote-form-group input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Auth Tabs */
.remote-auth-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    width: 100%;
}

.remote-auth-tab {
    flex: 1;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.remote-auth-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.remote-auth-tab.active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Auth Sections */
.remote-auth-section {
    width: 100%;
}

/* File Input */
.remote-file-input {
    position: relative;
    width: 100%;
}

.remote-file-input input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.remote-file-label {
    display: block;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
}

.remote-file-input:hover .remote-file-label {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

/* Error Message */
.remote-error {
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    color: #f87171;
    font-size: 12px;
    margin-top: 12px;
}

/* Files Browser */
.remote-files-browser {
    display: flex;
    flex-direction: column;
    height: 350px;
}

.remote-path-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    margin-bottom: 12px;
}

.remote-nav-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
}

.remote-nav-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

.remote-path {
    flex: 1;
    color: rgba(255, 255, 255, 0.8);
    font-family: monospace;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Files List */
.remote-files-list {
    flex: 1;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 6px;
}

.remote-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
}

.remote-file-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.remote-file-item.is-folder {
    color: #fbbf24;
}

.remote-file-item .folder-icon {
    color: #fbbf24;
}

.remote-file-item .file-icon {
    color: rgba(255, 255, 255, 0.5);
}

.remote-file-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.remote-file-size {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
}

.remote-file-action {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    padding: 4px 6px;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s;
}

.remote-file-item:hover .remote-file-action {
    opacity: 1;
}

.remote-file-action:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Loading & Empty States */
.remote-loading,
.remote-empty,
.remote-error-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

.remote-error-inline {
    color: #f87171;
}

/* Modal Footer */
.remote-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.remote-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.remote-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

.remote-btn-primary {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.remote-btn-primary:hover {
    background: rgba(255, 255, 255, 0.2);
}

.remote-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Remote Section in File Explorer */
.remote-section {
    flex: 1;
    min-height: 100px;
    display: flex;
    flex-direction: column;
}

.remote-section .section-header {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.15) 0%, transparent 100%);
}

.remote-section #remoteHeaderTitle {
    color: rgba(255, 255, 255, 0.9);
}

.remote-section #remoteHeaderTitle i {
    color: #818cf8;
    margin-right: 6px;
}

.remote-section .file-tree {
    flex: 1;
    overflow-y: auto;
}

#remoteDisconnectBtn:hover {
    background: rgba(248, 113, 113, 0.2) !important;
}

/* Remote divider - same as explorer divider */
#remoteDivider {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    cursor: ns-resize;
    transition: background 0.2s;
    flex-shrink: 0;
}

#remoteDivider:hover,
#remoteDivider.active {
    background: rgba(99, 102, 241, 0.3);
}

/* Remote file loading state - same as local but with loading indicator */
#remoteFileTree .file-item.loading,
#fileTree .file-item.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

#remoteFileTree .file-item.loading::after,
#fileTree .file-item.loading::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: remoteFileSpin 0.8s linear infinite;
}

@keyframes remoteFileSpin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* ── Brand Attribution Footer ─────────────────────────────────────────────
   Pinned to the bottom of the viewport. Subtle so it never competes
   with primary content; sized to remain legible on dark backgrounds. */
.brand-attribution {
    position: fixed;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.34);
    padding: 4px 12px;
    pointer-events: none;
    z-index: 1;
    letter-spacing: 0.04em;
    font-weight: 400;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@media (max-width: 480px) {
    .brand-attribution { font-size: 10px; bottom: 2px; }
}

/* ── Landing Card ─────────────────────────────────────────────────────────
   Shown when no molecule is loaded. Anchored center of the viewport
   between the AI panel (left) and file explorer (right). Hidden via
   `display:none` by main.js as soon as the first molecule loads. */
#landingCard {
    position: fixed;
    top: 0;
    left: 0;
    /* Use viewport units, not %, because <body> has no explicit height
       (it's flex-sized to its content) and 100% on a fixed element
       resolved to ~32px instead of the viewport height. */
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    /* Padding that still keeps the card off the toolbar (top) and the
       chat input bar (bottom) on a 720p screen. */
    padding: 64px 16px 96px;
    box-sizing: border-box;
}

.landing-card-content {
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(131, 58, 180, 0.10), transparent 60%),
        radial-gradient(120% 80% at 100% 100%, rgba(66, 214, 255, 0.08), transparent 60%),
        rgba(10, 14, 28, 0.55);
    padding: 32px 40px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 520px;
    text-align: center;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 24px 60px rgba(0, 0, 0, 0.45);
}

.landing-headline {
    /* Required by tests: must contain "Design molecules with AI" */
    margin: 0 0 4px 0;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
    background: var(--brand-grad-bright, linear-gradient(135deg, #a855e9, #74ecff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Fallback color for browsers without background-clip:text support */
    color: #ffffff;
}

.landing-lede {
    color: rgba(255, 255, 255, 0.66);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0 0 18px 0;
    max-width: 420px;
    font-weight: 400;
}

.landing-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.landing-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.86);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.landing-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.26);
    transform: translateY(-1px);
}

.landing-btn:active { transform: translateY(0); }

.landing-btn:focus-visible {
    outline: 2px solid var(--brand-cyan, #42D6FF);
    outline-offset: 2px;
}

.landing-btn i {
    font-size: 14px;
    opacity: 0.78;
}

/* Primary action — branded gradient pill */
.landing-btn-primary {
    background: var(--brand-grad, linear-gradient(90deg, #833AB4, #1D60FD, #42D6FF));
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(29, 96, 253, 0.35);
}

.landing-btn-primary:hover {
    background: var(--brand-grad-bright, linear-gradient(90deg, #a855e9, #3b82fd, #74ecff));
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(29, 96, 253, 0.5);
}

.landing-btn-primary i { opacity: 1; }

.landing-hint {
    color: rgba(255, 255, 255, 0.36);
    font-size: 12px;
    margin: 14px 0 0 0;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.landing-hint kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    line-height: 1.2;
    vertical-align: 1px;
}

@media (max-width: 640px) {
    .landing-card-content { padding: 28px 24px 22px; }
    .landing-headline { font-size: 22px; }
    .landing-lede { font-size: 13px; }
}

/* ── Toast Notification System ── */

#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}

.toast-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(20, 20, 40, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-family: Rubik, sans-serif;
    font-size: 13px;
    font-weight: 400;
    max-width: 420px;
    min-width: 220px;
    pointer-events: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateX(20px) scale(0.96);
    transition: none;
}

.toast-item.toast-visible {
    animation: toastSlideIn 0.25s ease forwards;
}

.toast-item.toast-exit {
    animation: toastSlideOut 0.2s ease forwards;
}

.toast-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: none;
}

.toast-message {
    flex: 1;
    line-height: 1.4;
    transition: none;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
    cursor: pointer;
    padding: 0 0 0 6px;
    line-height: 1;
    transition: color 0.15s;
}

.toast-close:hover {
    color: #fff;
}

/* Type variants */
.toast-info {
    border-left: 3px solid #60a5fa;
}

.toast-info .toast-icon {
    color: #60a5fa;
}

.toast-success {
    border-left: 3px solid #34d399;
}

.toast-success .toast-icon {
    color: #34d399;
}

.toast-warning {
    border-left: 3px solid #fbbf24;
}

.toast-warning .toast-icon {
    color: #fbbf24;
}

.toast-error {
    border-left: 3px solid #f87171;
}

.toast-error .toast-icon {
    color: #f87171;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.96);
    }

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

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(20px) scale(0.96);
    }
}

/* ── Critical Error Page ── */

#critical-error-page {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200000;
    background: #0a0a1a;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: Rubik, sans-serif;
    color: #fff;
    padding: 32px;
}

#critical-error-page .error-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
    color: #f87171;
}

#critical-error-page h1 {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #f87171;
}

#critical-error-page p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    max-width: 460px;
    line-height: 1.6;
    margin: 0 0 28px 0;
}

#critical-error-page button {
    padding: 12px 28px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-family: Rubik, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

#critical-error-page button:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ============================================================================
   MOBILE-ONLY ELEMENTS (hidden on desktop)
   ============================================================================ */

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

/* AI Mini-bar — not used in current layout, hidden */
.ai-mini-bar {
    display: none;
}

/* Mobile overflow menu */
.mobile-overflow-menu {
    display: none;
    position: fixed;
    top: 52px;
    right: 10px;
    z-index: 10004;
    background: rgba(20, 20, 22, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 6px 0;
    min-width: 180px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.mobile-overflow-menu.open {
    display: block;
}

.mobile-overflow-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.mobile-overflow-item:active {
    background: rgba(255, 255, 255, 0.08);
}

.mobile-overflow-item i {
    width: 18px;
    text-align: center;
    font-size: 14px;
    color: rgba(100, 180, 255, 0.7);
}

/* Mobile backdrop overlay */
.mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10002;
}

.mobile-backdrop.active {
    display: block;
}


/* ============================================================================
   MOBILE RESPONSIVENESS — 768px breakpoint
   ============================================================================ */

@media (max-width: 768px) {

    /* Prevent horizontal scroll + fix position:fixed with perspective */
    body {
        overflow-x: hidden;
        perspective: none !important;
    }

    /* ── TOOLBAR: bar spans full width, icons stay centered with breathing room ── */
    #toolbar-background {
        position: fixed !important;
        top: 8px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        z-index: 10000 !important;
        justify-content: center !important;
        gap: 18px !important;
    }
    #toolbar-background .toolbar-group {
        gap: 18px;
    }

    /* Mobile toolbar: keep only Search, Reset Camera, Fullscreen, Account/Sign-In */
    #aiToggleBtn,
    #startTutorialBtn,
    .toolbar-group button[onclick*="stylePanel"],
    .toolbar-group button[onclick*="propertiesPanel"],
    .toolbar-group button[onclick*="fragmentListContainer"],
    .toolbar-divider,
    /* Hide the now-empty ANALYZE (5th child) and AI (7th child) groups */
    #toolbar-background > .toolbar-group:nth-child(5),
    #toolbar-background > .toolbar-group:nth-child(7) {
        display: none !important;
    }

    /* ── AI CHAT PANEL: always-visible bottom section ── */
    .ai-chat-panel,
    .ai-chat-panel.open {
        position: fixed !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 40vh !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-right: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        transition: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 10001 !important;
    }

    /* Hide desktop-only panel controls */
    .ai-chat-panel .panel-resizer-horizontal,
    .ai-chat-panel .panel-collapse-toggle {
        display: none !important;
    }

    /* Compact header on mobile — show brand title on left, action buttons on right */
    .ai-chat-header {
        display: flex !important;
        padding: 6px 12px !important;
        min-height: 36px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        align-items: center;
        justify-content: space-between !important;
        background: rgba(0, 0, 0, 0.25) !important;
    }

    .ai-chat-header .ai-chat-header-title {
        display: flex !important;
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.65) !important;
    }

    .ai-chat-header .ai-chat-header-title i {
        font-size: 11px !important;
    }

    .ai-chat-header .ai-header-btn {
        padding: 6px 9px !important;
        font-size: 13px !important;
    }

    .ai-chat-header #aiCloseBtn {
        display: none !important;
    }

    /* BYOK modal — tighten padding on small screens */
    .byok-content {
        padding: 22px 20px 20px !important;
    }

    /* Messages area fills available space */
    .ai-chat-messages {
        flex: 1;
        min-height: 0;
        padding: 8px 10px !important;
    }

    /* Chat input area */
    .ai-chat-input-area {
        padding: 6px 8px !important;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        gap: 4px !important;
    }

    /* Input: 14px minimum to prevent iOS auto-zoom */
    #aiChatInput {
        font-size: 14px !important;
        min-height: 36px;
        max-height: 80px;
        padding: 8px 10px !important;
    }

    /* Bottom options: single compact row */
    #bottom-options {
        flex-wrap: nowrap;
        gap: 6px;
        width: 100%;
    }

    .ai-model-select {
        min-width: 0;
        flex: 1 1 auto;
        font-size: 11px;
        text-align: left;
        padding-left: 28px !important;
    }

    /* Thinking control: compact */
    .ai-thinking-control {
        font-size: 10px;
        gap: 3px;
    }

    .ai-thinking-control-label {
        display: none;
    }

    .ai-thinking-control > i {
        display: none;
    }

    .ai-thinking-opt {
        padding: 2px 5px;
        font-size: 9px;
    }

    /* ── FILE EXPLORER: always hidden on mobile ── */
    .file-explorer-panel,
    .file-explorer-panel.open {
        display: none !important;
    }

    /* Hide the toolbar button that opens it */
    #toggleFileExplorer {
        display: none !important;
    }

    /* ── FLOATING PANELS → overlays above chat ── */
    .style-panel {
        position: fixed !important;
        top: auto !important;
        bottom: 40vh !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 50vh !important;
        transform: none !important;
        margin: 0 !important;
        border-radius: 12px 12px 0 0 !important;
        z-index: 10003 !important;
        overflow-y: auto;
    }

    .style-panel.open .style-panel-content {
        max-height: calc(50vh - 60px);
        flex-direction: column;
    }

    .properties-panel {
        position: fixed !important;
        top: auto !important;
        bottom: 40vh !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 50vh !important;
        transform: none !important;
        border-radius: 12px 12px 0 0 !important;
        z-index: 10003 !important;
        overflow-y: auto;
    }

    .orbital-table-panel {
        position: fixed !important;
        top: auto !important;
        bottom: 40vh !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 50vh !important;
        border-radius: 12px 12px 0 0 !important;
        z-index: 10003 !important;
        overflow-y: auto;
    }

    #fragmentListContainer {
        position: fixed !important;
        top: auto !important;
        bottom: 40vh !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: auto !important;
        max-height: 50vh !important;
        border-radius: 12px 12px 0 0 !important;
        z-index: 10003 !important;
        overflow-y: auto;
        padding: 10px !important;
    }

    /* ── FRAME SLIDER: sits just above the AI panel ── */
    #frameSliderContainer {
        bottom: calc(40vh + 8px) !important;
        left: 10px !important;
        right: 10px !important;
        width: calc(100vw - 20px) !important;
        max-width: none !important;
        transform: none !important;
    }

    /* ── UNDO BUTTONS ── */
    #undoContainer {
        top: 50px !important;
        right: 10px !important;
    }

    #undoBtn, #redoBtn {
        width: 40px !important;
        height: 40px !important;
        font-size: 15px !important;
    }

    /* ── MODALS: full-width ── */
    .modal-dialog,
    .text-editor-modal {
        width: calc(100vw - 20px) !important;
        max-width: none !important;
        margin: 10px auto !important;
    }

    /* ── DB Search panel ── */
    .db-search-panel {
        width: calc(100vw - 40px) !important;
        min-width: unset !important;
        max-width: calc(100vw - 40px) !important;
    }

    /* ── Tool rows: prevent overflow ── */
    .ai-tool-row {
        max-width: 100%;
        overflow-x: hidden;
    }

    .chart-inline-container {
        max-width: 100% !important;
    }

    /* ── Welcome message: compact, no wasted vertical space ── */
    .ai-welcome {
        padding: 14px 16px !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .ai-welcome h4 {
        font-size: 14px;
        margin: 4px 0;
    }

    .ai-welcome p {
        font-size: 11px;
        margin: 0;
        line-height: 1.5;
    }

    .ai-welcome-icon {
        width: 32px !important;
        height: 32px !important;
        margin: 0 auto 8px !important;
    }

    .ai-welcome-icon i {
        font-size: 14px !important;
    }

    /* ── Thinking block: shrink to fit reduced chat height ── */
    .ai-thinking-block:not(.done) .ai-thinking-content,
    .ai-thinking-block.expanded .ai-thinking-content {
        max-height: 25vh;
    }

    /* ── Header buttons: bigger tap area ── */
    .ai-chat-header .ai-header-btn {
        min-width: 36px;
        min-height: 36px;
    }
}


/* ============================================================================
   MOBILE RESPONSIVENESS — 480px breakpoint (small phones)
   ============================================================================ */

@media (max-width: 480px) {
    .fancy-button {
        padding: 5px 8px;
        font-size: 10px;
        border-radius: 20px;
    }

    .ai-model-select {
        max-width: 80px;
        font-size: 9px;
    }

    .ai-attach-btn,
    #aiSendBtn,
    .ai-mic-btn {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    #signInButton {
        font-size: 11px;
        padding: 4px 10px;
    }

    .ai-chat-messages {
        padding: 6px !important;
    }

    /* ── Modals: full-screen on small phones ── */
    .chart-modal-content,
    .figure-modal-content {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    .figure-modal-body {
        max-height: calc(100vh - 60px) !important;
        padding: 0 12px 12px !important;
    }
}


/* ============================================================================
   MOBILE LANDSCAPE — give more room to viewport
   ============================================================================ */

@media (max-width: 768px) and (orientation: landscape) {
    .ai-chat-panel {
        height: 35vh !important;
    }

    .style-panel,
    .properties-panel,
    .orbital-table-panel,
    #fragmentListContainer {
        bottom: 35vh !important;
    }

    #frameSliderContainer {
        bottom: calc(35vh + 8px) !important;
    }

    /* Toolbar tightening in landscape */
    #toolbar-background {
        padding: 4px 8px !important;
        gap: 4px !important;
    }
}