/* --- Animations --- */
@property --gradient-angle {
    syntax: '<angle>';
    initial-value: 135deg;
    inherits: true;
}

/* =========================================
   base-and-theme.css
   Variables, Resets, Typography, Utilities, Animations
   ========================================= */

body {
    /* --- Typography --- */
    --font-family-main: "Nunito Sans", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    & p {
        /* font-family: "Georgia"; */
        font-size: 1.1em;
    }































    --control-font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji";
    --link-color: #db8c1f;
    --complement-bg: oklch(from var(--header-bg) calc(l * 1) calc(c * .5) calc(h + 0));

    /* --- Dimensions & Spacing --- */
    --sidebar-width: 20px;
    --strip-width: 0;
    /* Referenced in shell styles */
    --controls-width: 20em;
    --default-margin: 0px;
    --logo-div-margin: 5px;
    --dialog-button-padding: 3px 5px;
    --chat-button-margin: 6px;
    --pill-radius: 3px;
    --bump-radius: 8px;
    --detail-padding: 10%;
    --detail-window-padding: 10px;
    --backdrop-padding: 0px;
    --paper-padding: 10px;
    --paper-fade-height-top: 5px;
    --paper-fade-height-bottom: 20px;
    --max-cell-height: 75px;
    --cell-fade-height: 10px;
    --report-container-padding: 0px;
    --window-radius: 20px;
    --mini-window-radius: var(--window-radius)
    /* --- Animation Timings --- */
    --animation-time: .3s;
    --slow-animation-time: 1s;
    /* Inferred from context */
    --spin-animation-time: 1s;
    --first-reply-animation-time: 1s;
    --reply-animation-time: 3s;
    /* --- Colors: Core --- */
    --main-bg-components: 255,
    255,
    255;
    --main-bg-color: rgb(var(--main-bg-components));
    --main-fg-color: #333;
    --omnicolor-components: 11,
    28,
    50;
    --omnicolor: #31312f;
    --omnicolor-darker: #1c1c1a;

    /* Omnicolor Variations (Calculated via OKLCH) */
    --omnicolor-lighter-1: oklch(from var(--omnicolor) calc(l + (1 - l) * 0.05) c h);
    --omnicolor-lighter-2: oklch(from var(--omnicolor) calc(l + (1 - l) * 0.15) c h);
    --omnicolor-lighter-3: oklch(from var(--omnicolor) calc(l + (1 - l) * 0.25) c h);
    --omnicolor-lighter-4: oklch(from var(--omnicolor) calc(l + (1 - l) * 0.35) c h);
    --omnicolor-lighter-5: oklch(from var(--omnicolor) calc(l + (1 - l) * 0.45) c h);
    --omnicolor-lighter-x: oklch(from var(--omnicolor) calc(l + (1 - l) * 0.75) c h);
    --omnicolor-lighter-z: oklch(from var(--omnicolor) calc(l + (1 - l) * 0.85) c h);
    /* --- Colors: Shell & Backgrounds --- */
    --shell-deep-background: hsl(0deg 3.81% 4.68%);
    --shell-void: #302b2b;
    /* --shell-void: hsl(266deg 17.42% 19.3%); */
    /* --shell-void:  color-mix(in srgb, #cbcbcb, black 70%); */
    /* --shell-void: #050505; */
    --shell-background: #373743;
    --shell-foreground: rgb(235, 235, 235);
    --master-bg-color: #242420;
    /* --- Colors: Accents & Highlights --- */
    --tool-background: color-mix(in srgb, var(--shell-deep-background), transparent 30%);
    /* --nav-bg-base: #573c58; */
    /* A subtle and sophisticated purple */
    --nav-bg-base: #635195;
    --nav-bg-base: #433e75;
    --nav-bg-base: #523b1e;
    /* A more stand-out blue */
    /*#565f28;*/
    --logo-bg: #020e33;
    --dt-row-selected: 205,
    208,
    202;
    /* Used in RGB contexts */
    /* --- Colors: Text & UI Elements (Extracted from hardcoded values) --- */
    --text-color-primary: #eee;
    --text-color-secondary: #aaa;
    --text-color-dim: #ccc;
    --text-color-light: rgb(221, 221, 221);
    --text-color-dark: rgb(68, 68, 68);
    --border-color-light: rgb(238, 238, 238);
    --border-color-medium: rgb(204, 204, 204);
    /* --- Colors: Translucent Helpers (Extracted) --- */
    --white-alpha-03: rgba(255, 255, 255, 0.03);
    --white-alpha-05: rgba(255, 255, 255, 0.05);
    --white-alpha-10: rgba(255, 255, 255, 0.1);
    /* Often #ffffff11 or similar */
    --white-alpha-20: rgba(255, 255, 255, 0.2);
    --white-alpha-30: rgba(255, 255, 255, 0.3);
    --black-alpha-10: rgba(0, 0, 0, 0.1);
    --black-alpha-20: rgba(0, 0, 0, 0.2);
    --black-alpha-50: rgba(0, 0, 0, 0.5);
    /* --- Colors: Annotations --- */
    --annotation-light: #ffffff;
    --annotation-medium: rgb(255 252 172);
    --annotation-dark: hsl(59deg 100% 54.05%);
    --annotation-panel: yellow;
    /* --- Colors: Functional --- */
    --color-success: rgb(40, 167, 69);
    --color-danger: rgb(220, 53, 69);
    --color-action-blue: rgb(0, 123, 255);
    --color-action-hover: rgb(0, 86, 179);
    --search-container-height: 30px;
    --circle-stop-25: #ffffff05;
    --circle-stop-90: #ffffff20;
    --circle-stop-95: #ffffff25;
    --circle-stop-100: #ffffff30;
    --circle-shadow: #020d2d;
    --header-bg: color-mix(in srgb, var(--nav-bg-base), black 0%);
    --header-fg: #fff;































}

body.night-mode {
    --nav-bg-base: #50486a !important;
}

/* =========================================
   Resets & Global Elements
   ========================================= */

* {
    box-sizing: border-box;
}

html,
body {
    overscroll-behavior: none;
}

body {
    font-family: var(--font-family-main);
    font-size: 15px;
    margin: 0px;
    color: var(--main-fg-color);
    max-height: 100vh;
    min-height: 100vh;
    box-sizing: border-box;
    overflow: scroll;
    border-radius: var(--window-radius);
}

html.dark {
    position: relative;
    background-color: rgb(33, 37, 41);
    color: rgb(218, 224, 231);
    font: 90% / 1.5em system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;
}

/* Typography Basics */
h2 {
    font-size: 1.3em;
    margin: 0px;
}

pre {
    /* background-color: rgb(45, 45, 45);
    color: rgb(240, 240, 240); */
    padding: 15px;
    border-radius: 0px 0px 4px 4px;
    overflow-x: auto;
    font-size: 0.85em;
    margin: 0px;
}

button {
    color: inherit;
}

/* =========================================
   Utility Classes
   ========================================= */

.hidden {
    display: none !important;
}

.hiding {
    opacity: 0 !important;
}

.error-message {
    padding: 20px;
    color: var(--color-danger);
    font-weight: bold;
    margin-top: 1em;
}

.white-glow {
    box-shadow: rgba(255, 255, 255, 0.667) 0px 0px 2px;
}

.slow-animation {
    --animation-time: var(--slow-animation-time);
}

.hide-scrollbar {
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

/* --- Glass Effects --- */

.glass-effect,
.icon-glass-effect,
.app-glass-effect,
.custom-color-pill,
.slight-glass-effect {
    position: relative;
    overflow: hidden;

    /* Common positioning for the pseudo-element */
    &::before {
        content: "";
        position: absolute;
        inset: 0px;
        z-index: 20;
        /* 199 for app/slight, overridden below */
        pointer-events: none;
        border-radius: inherit;
        corner-shape: squircle;
    }
}


.icon-glass-effect {
    justify-content: center;
    align-items: center;
    border-radius: inherit;

    &::before {
        background: linear-gradient(170deg, var(--white-alpha-03) 0%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 50%, var(--white-alpha-05) 98%, var(--white-alpha-05) 100%);
    }
}

.app-glass-effect::before {
    /* background: linear-gradient(170deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.1) 95%, rgba(0, 0, 0, 0.2) 100%); */
    /* background: linear-gradient(170deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 8%, rgba(255, 255, 255, .2) 50%, rgba(0, 0, 0, 0.1) 95%, rgba(0, 0, 0, 0.2) 100%); */
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 8%, rgba(255, 255, 255, .2) 30%, rgba(0, 0, 0, 0.1) 85%, rgba(0, 0, 0, 0.2) 100%);
    opacity: 0.3;
    z-index: 199;
}

.slight-glass-effect::before {
    background: linear-gradient(170deg, var(--white-alpha-10) 0%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.1) 98%, rgba(0, 0, 0, 0.2) 100%);
    opacity: 0.3;
    z-index: 199;
}


/* --- Cell Content Fade Mask ---
   Fades the bottom of a clipped cell's own content via CSS mask rather than a
   painted overlay, so whatever background is behind (row stripe, hover, selection)
   shows through unchanged instead of needing to be color-matched. */

.clipped-content-container.is-clipped:not(.is-expanded) .cell-value {
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--cell-fade-height)), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - var(--cell-fade-height)), transparent 100%);
    -webkit-mask-size: 100% var(--max-cell-height);
    mask-size: 100% var(--max-cell-height);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top;
    mask-position: top;
}

/* Note: raw-data-table utility override */
.raw-data-table .clipped-content-container .cell-value {
    -webkit-mask-image: none;
    mask-image: none;
}

/* --- Scroll Shadows --- */

.scroll-shadow,
.tab-scroll-shadow {
    scroll-timeline: --scroll-timeline y;
    border-radius: inherit;
    overflow-y: scroll;

    &::before,
    &::after {
        opacity: 0;
        content: "";
        display: block;
        position: sticky;
        left: 0em;
        right: 0em;
        z-index: 3;
        /* tab-scroll-shadow uses 99999, consider standardizing */
        animation-name: reveal;
        animation-timeline: --scroll-timeline;
        animation-fill-mode: both;
        pointer-events: none;
    }
}

.tab-scroll-shadow {

    &::before,
    &::after {
        z-index: 99999;
    }

    &::before {
        top: 0px;
        height: 0.25rem;
        background: radial-gradient(farthest-side at 50% 0px, var(--scroll-shadow-bg), rgba(0, 0, 0, 0));
        animation-range: 1em 2em;
    }

    &::after {
        bottom: 0px;
        height: 0.35rem;
        background: radial-gradient(farthest-side at 50% 100%, var(--scroll-shadow-bg), rgba(0, 0, 0, 0));
        animation-direction: reverse;
        animation-range: calc(100% - 2em) calc(100% - 1em);
    }
}

.scroll-shadow {
    &::before {
        top: 0px;
        height: 0.15rem;
        background: radial-gradient(farthest-side at 50% 0px, var(--scroll-shadow-bg), rgba(0, 0, 0, 0));
        animation-range: 1em 2em;
    }

    &::after {
        bottom: 0px;
        height: 0.15rem;
        background: radial-gradient(farthest-side at 50% 100%, var(--scroll-shadow-bg), rgba(0, 0, 0, 0));
        animation-direction: reverse;
        animation-range: calc(100% - 2em) calc(100% - 1em);
    }
}

.scroll-shadow-x {
    overscroll-behavior-x: contain;
    overflow-x: auto;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

/* Wrapper for horizontal scroll shadows to avoid pseudo-element collisions */
.scroll-shadow-x-wrapper {
    position: relative;
    width: 100%;
    isolation: isolate;
    overflow: scroll;
}

.scroll-shadow-x-wrapper::before,
.scroll-shadow-x-wrapper::after {
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 10px;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s;
}

.scroll-shadow-x-wrapper::before {
    left: 0px;
    background: radial-gradient(farthest-side at 0px 50%, var(--scroll-shadow-bg), rgba(0, 0, 0, 0));
}

.scroll-shadow-x-wrapper::after {
    right: 0px;
    background: radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow-bg), rgba(0, 0, 0, 0));
}

.scroll-shadow-x-wrapper.has-left-shadow::before,
.scroll-shadow-x-wrapper.has-right-shadow::after {
    opacity: 1;
}


/* =========================================
   Animations
   ========================================= */

@keyframes typing-fade {
    0% {
        opacity: 0.4;
        width: 4px
    }

    50% {
        opacity: 1;
        width: 8px
    }

    100% {
        opacity: 0.4;
        width: 4px
    }
}

@keyframes spin-gradient-smooth {
    to {
        --gradient-angle: 495deg;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes reveal {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}