/* Import Google Font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend+Giga:wght@100..900&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    color: var(--text-color);
    scrollbar-width: thin;
    scrollbar-color: rgba(49, 49, 49) transparent;
}

:root {
    /* Dark mode colors */
    --text-color: #e3e3e3;
    --subheading-color: #828282;
    --placeholder-color: #a6a6a6;
    --primary-color: #242424;
    --secondary-color: #383838;
    --secondary-hover-color: #444;
    --light-dark-background: #292929;
    --border-color: #e2e3e261;
    --nav-bar-color: rgb(15 15 15 / 85%);
    --nav-bar-border: rgba(17, 25, 40, 0.75);
    --highlight-background: #424242;
    --chat-area-background: #090909;
    --darker-background: #1a1a1a;
    --disabled-color: #161616;
    --loader-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    --loader-primary: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    --loader-secondary: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    --loader-accent: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
    --loader-shadow: rgba(0, 0, 0, 0.3);
    --loader-border: rgba(255, 255, 255, 0.05);
    --violet: 0, 20, 255;
    --orange: 255, 120, 0;
    --black: 10, 10, 10;
    --white: 255, 255, 255;
    --size: 130px;
    --spin: 18s;
    --breath: 6s;
    --rim-rotate: 8s;
    --react-scale: 1;
    --react-rotate: 0deg;
    --react-border: 55%;
    --react-glow: 0.25;
    --react-halo: 0.15;
    --react-sat: 1;
    --react-hue: 0deg;
    --input-wrapper-shadow: rgb(21 139 227 / 30%) 0px 1px 2px 0px, rgb(255 255 255 / 15%) 0px 2px 6px 2px;
    --nav-width: 270px;
}

.light_mode {
    /* Light mode colors */
    --text-color: #222;
    --subheading-color: #a0a0a0;
    --placeholder-color: #6c6c6c;
    --primary-color: #fff;
    --secondary-color: #e9eef6;
    --secondary-hover-color: #dbe1ea;
    --light-dark-background: #41accf3d;
    --border-color: #0c0c0c61;
    --nav-bar-color: rgba(255, 255, 255, 0.75);
    --nav-bar-border: rgba(255, 255, 255, 0.125);
    --highlight-background: #ccc;
    --chat-area-background: #f5f5f5;
    --darker-background: #e3e3e3;
    --disabled-color: #e3e3e3;
    --loader-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    --loader-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --loader-secondary: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    --loader-accent: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    --loader-shadow: rgba(0, 0, 0, 0.1);
    --loader-border: rgba(255, 255, 255, 0.1);
    --violet: 60, 80, 255;
    --orange: 255, 120, 40;
    --black: 245, 245, 248;
    --white: 20, 20, 24;
    --size: 180px;
    --spin: 18s;
    --breath: 6s;
    --rim-rotate: 8s;
    --react-scale: 1;
    --react-rotate: 0deg;
    --react-border: 55%;
    --react-glow: 0.18;
    --react-halo: 0.12;
    --react-sat: 1;
    --react-hue: 0deg;
    --input-wrapper-shadow: rgb(3 49 83 / 88%) 0px 1px 2px 0px, rgb(0 0 0 / 15%) 0px 2px 6px 2px;
    --nav-width: 270px;
}

.loader-mini-twk {
    width: 36px;
    height: 36px;
    border: 4px solid var(--loader-mini-twk-border);
    border-left-color: transparent;
    border-radius: 50%;
    animation: spin89345 1s linear infinite;
    position: relative;
}

.loader-mini-twk::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-left-color: var(--text-color);
    opacity: 0.8;
    animation: spin89345 1.5s linear infinite reverse;
}

.loader-mini-twk::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--loader-mini-twk-primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px var(--loader-mini-twk-shadow);
    animation: pulse89345 2s ease-in-out infinite;
}

@keyframes spin89345 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse89345 {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.6;
    }
}


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

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

::-webkit-scrollbar-thumb {
    background-color: rgba(49, 49, 49);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
}

.switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.switch-wrapper {
    position: relative;
    display: inline-block;
    margin-top: 7px;
}

/* Hide the default checkbox */
.switch-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

/* The switch track */
.switch-track {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background-color: var(--secondary-color);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The switch thumb (circle) */
.switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: var(--text-color);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px var(--loader-shadow);
}

/* Hover effect */
.switch-track:hover {
    background-color: var(--secondary-hover-color);
}

/* Focus visible for accessibility */
.switch-input:focus-visible+.switch-track {
    outline: 2px solid var(--highlight-background);
    outline-offset: 2px;
}

/* Checked state */
.switch-input:checked+.switch-track {
    background: var(--loader-primary);
    border-color: transparent;
}

.switch-input:checked+.switch-track .switch-thumb {
    transform: translateX(20px);
    background-color: var(--primary-color);
}

/* Disabled state */
.switch-input:disabled+.switch-track {
    opacity: 0.5;
    cursor: not-allowed;
}

.switch-input:disabled+.switch-track:hover {
    background-color: var(--secondary-color);
}

/* Label styling */
.switch-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    user-select: none;
    transition: color 0.3s ease;
}

.highlight-text {
    font-weight: 500;
    font-family: "Lexend Giga", serif;
    font-size: 14px;
    padding: 3px;
    background-color: var(--highlight-background);
    border-radius: 4px;
    color: var(--text-color) !important;
    user-select: text;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.ai-glow-buttons {
    --duration: 7s;
    --easing: linear;

    /* Modern Google-like gradient colors */
    --c-color-1: rgba(66, 133, 244, 0.5);
    /* Google Blue */
    --c-color-2: rgba(52, 168, 83, 0.5);
    /* Google Green */
    --c-color-3: rgba(234, 67, 53, 0.5);
    /* Google Red */
    --c-color-4: rgba(251, 188, 5, 0.5);
    /* Google Yellow */

    /* Shadows with more subtle and modern tints */
    --c-shadow: rgba(66, 133, 244, 0.4);
    --c-shadow-inset-top: rgba(66, 133, 244, 0.6);
    --c-shadow-inset-bottom: rgba(232, 240, 254, 0.6);

    /* Radial button gradient */
    --c-radial-inner: #000000;
    --c-radial-outer: #223b62;

    --c-color: #ccc;

    /* Rest stays the same */
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    outline: none;
    position: relative;
    cursor: pointer;
    border: none;
    display: table;
    border-radius: 24px;
    padding: 0;
    margin: 0;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--c-color);
    background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);
    box-shadow: 0 0 14px var(--c-shadow);
}

.ai-glow-buttons:before {
    content: "";
    pointer-events: none;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    box-shadow:
        inset 0 3px 12px var(--c-shadow-inset-top),
        inset 0 -3px 4px var(--c-shadow-inset-bottom);
}

.ai-glow-buttons .wrapper {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    overflow: hidden;
    border-radius: 24px;
    min-width: 132px;
    padding: 12px 0;
}

.ai-glow-buttons .wrapper span {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.ai-glow-buttons:hover {
    --duration: 1400ms;
}

.ai-glow-buttons .wrapper .circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    filter: blur(var(--blur, 8px));
    background: var(--background, transparent);
    transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
    animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

.ai-glow-buttons .wrapper .circle.circle-1,
.ai-glow-buttons .wrapper .circle.circle-9,
.ai-glow-buttons .wrapper .circle.circle-10 {
    --background: var(--c-color-4);
}

.ai-glow-buttons .wrapper .circle.circle-3,
.ai-glow-buttons .wrapper .circle.circle-4 {
    --background: var(--c-color-2);
    --blur: 14px;
}

.ai-glow-buttons .wrapper .circle.circle-5,
.ai-glow-buttons .wrapper .circle.circle-6 {
    --background: var(--c-color-3);
    --blur: 16px;
}

.ai-glow-buttons .wrapper .circle.circle-2,
.ai-glow-buttons .wrapper .circle.circle-7,
.ai-glow-buttons .wrapper .circle.circle-8,
.ai-glow-buttons .wrapper .circle.circle-11,
.ai-glow-buttons .wrapper .circle.circle-12 {
    --background: var(--c-color-1);
    --blur: 12px;
}

.ai-glow-buttons .wrapper .circle.circle-1 {
    --x: 0;
    --y: -40px;
    --animation: circle-1;
}

.ai-glow-buttons .wrapper .circle.circle-2 {
    --x: 92px;
    --y: 8px;
    --animation: circle-2;
}

.ai-glow-buttons .wrapper .circle.circle-3 {
    --x: -12px;
    --y: -12px;
    --animation: circle-3;
}

.ai-glow-buttons .wrapper .circle.circle-4 {
    --x: 80px;
    --y: -12px;
    --animation: circle-4;
}

.ai-glow-buttons .wrapper .circle.circle-5 {
    --x: 12px;
    --y: -4px;
    --animation: circle-5;
}

.ai-glow-buttons .wrapper .circle.circle-6 {
    --x: 56px;
    --y: 16px;
    --animation: circle-6;
}

.ai-glow-buttons .wrapper .circle.circle-7 {
    --x: 8px;
    --y: 28px;
    --animation: circle-7;
}

.ai-glow-buttons .wrapper .circle.circle-8 {
    --x: 28px;
    --y: -4px;
    --animation: circle-8;
}

.ai-glow-buttons .wrapper .circle.circle-9 {
    --x: 20px;
    --y: -12px;
    --animation: circle-9;
}

.ai-glow-buttons .wrapper .circle.circle-10 {
    --x: 64px;
    --y: 16px;
    --animation: circle-10;
}

.ai-glow-buttons .wrapper .circle.circle-11 {
    --x: 4px;
    --y: 4px;
    --animation: circle-11;
}

.ai-glow-buttons .wrapper .circle.circle-12 {
    --blur: 14px;
    --x: 52px;
    --y: 4px;
    --animation: circle-12;
}

@keyframes circle-1 {
    33% {
        transform: translate(0px, 16px) translateZ(0);
    }

    66% {
        transform: translate(12px, 64px) translateZ(0);
    }
}

@keyframes circle-2 {
    33% {
        transform: translate(80px, -10px) translateZ(0);
    }

    66% {
        transform: translate(72px, -48px) translateZ(0);
    }
}

@keyframes circle-3 {
    33% {
        transform: translate(20px, 12px) translateZ(0);
    }

    66% {
        transform: translate(12px, 4px) translateZ(0);
    }
}

@keyframes circle-4 {
    33% {
        transform: translate(76px, -12px) translateZ(0);
    }

    66% {
        transform: translate(112px, -8px) translateZ(0);
    }
}

@keyframes circle-5 {
    33% {
        transform: translate(84px, 28px) translateZ(0);
    }

    66% {
        transform: translate(40px, -32px) translateZ(0);
    }
}

@keyframes circle-6 {
    33% {
        transform: translate(28px, -16px) translateZ(0);
    }

    66% {
        transform: translate(76px, -56px) translateZ(0);
    }
}

@keyframes circle-7 {
    33% {
        transform: translate(8px, 28px) translateZ(0);
    }

    66% {
        transform: translate(20px, -60px) translateZ(0);
    }
}

@keyframes circle-8 {
    33% {
        transform: translate(32px, -4px) translateZ(0);
    }

    66% {
        transform: translate(56px, -20px) translateZ(0);
    }
}

@keyframes circle-9 {
    33% {
        transform: translate(20px, -12px) translateZ(0);
    }

    66% {
        transform: translate(80px, -8px) translateZ(0);
    }
}

@keyframes circle-10 {
    33% {
        transform: translate(68px, 20px) translateZ(0);
    }

    66% {
        transform: translate(100px, 28px) translateZ(0);
    }
}

@keyframes circle-11 {
    33% {
        transform: translate(4px, 4px) translateZ(0);
    }

    66% {
        transform: translate(68px, 20px) translateZ(0);
    }
}

@keyframes circle-12 {
    33% {
        transform: translate(56px, 0px) translateZ(0);
    }

    66% {
        transform: translate(60px, -32px) translateZ(0);
    }
}


/* Base ripple container */
.ripple {
    position: relative;
    overflow: hidden;
    padding: 12px 24px;
    font-size: 16px;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease;
}

/* Ripple element (GPU optimized) */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    pointer-events: none;

    /* Start small */
    transform: scale(0);
    opacity: 1;

    /* GPU prep */
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-origin: center;
    transition: transform 600ms ease-out, opacity 600ms ease-out;
}

/* Focus effect */
.ripple:focus {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

ol,
ul {
    margin-block: 1rem;
}

ol {
    list-style-type: decimal;
    white-space: normal;
    list-style-position: outside;
    padding-left: 1.1em;
}

ul {
    list-style-type: disc;
    white-space: normal;
    list-style-position: inside;
    padding-left: 1.1em;
}

li {
    margin-block-end: 1rem;
    max-width: 75ch;
}

li::marker {
    font-weight: 600;
}

/*** level 2 ***/
li {
    ol {
        list-style-type: lower-alpha;
    }

    ul {
        list-style-type: circle;
    }
}

/*** level 3 ***/

li li {
    ol {
        list-style-type: lower-roman;
    }

    ul {
        list-style-type: square;
    }
}


pre {
    border: 1px solid #cccccc36;
}

/*
Navigation Bar
*/
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: var(--nav-bar-color);
    border-bottom: 1px solid #ffffff0d;
    user-select: none;
    z-index: 9999;

    /* Force GPU compositing */
    transform: translateZ(0);
    will-change: transform, backdrop-filter;
}

.nav .nav-menu-button {
    margin-top: 5px;
    margin-left: 5px;
    background-color: transparent;
    width: fit-content;
    border-radius: 50%;
    cursor: pointer;
}

.nav .action-buttons {
    display: flex;
    position: absolute;
    right: 12px;
    top: 0px;
    gap: 1em;
}

.nav .icon {
    background-color: transparent;
    color: var(--text-color) !important;
    padding: 4px;
    height: 50px;
    width: 50px;
}

.nav .action-icon {
    margin-top: 5px;
    margin-left: 5px;
    background-color: transparent;
    width: fit-content;
    border-radius: 50%;
    cursor: pointer;
}

/* Side menu */
.nav-menu {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    z-index: 999;
    width: 14%;
    max-width: 360px;
    min-width: 270px;
    height: 100%;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: var(--nav-bar-color);
    border-right: 1px solid #ffffff0d;
    user-select: none;

    /* Start off-screen using transform, not left */
    transform: translateX(-100%);
    transition: transform 0.25s ease-in-out;

    /* Hint GPU that this will animate */
    will-change: transform;
}

.nav-menu.open {
    transform: translateX(0);
    /* Smooth GPU slide-in */
}

/* Menu inner content */
.nav-menu .name-ai {
    display: flex;
    padding: 10px;
    margin-top: 10px;
    justify-content: center;
    align-items: center;
}

.nav-menu .top-menu-actions .img-labs-acc {
    width: 100%;
    color: var(--text-color);
    outline: none;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
    background-color: #cccccc4b;
    border: 0;
    transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
    text-align: left;
    margin: 10px 2px 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    /* GPU acceleration for hover/press */
    will-change: background-color, transform;
}

.nav-menu .top-menu-actions .img-labs-acc img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 15px;
}

.nav-menu .top-menu-actions .img-labs-acc:hover {
    background-color: #d8d2d27e;
    transform: translateY(-1px);
    /* subtle lift */
}

.nav-menu .top-menu-actions {
    display: block;
    padding: 10px;
    margin-top: 10px;
}


.custom-select {
    position: relative;
    width: 100%;
    margin-top: 6px;
    margin-left: 1px;
    font-size: 16px;
    margin-left: 2px;
}

.select-selected {
    background-color: #cccccc4b;
    padding: 10px 15px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    will-change: transform, background-color;
    font-size: 14px;
}

.select-selected:hover {
    transform: translateY(-1px);
    background-color: #d8d2d27e;
}

.select-selected img {
    width: 33px;
    height: 33px;
    margin-right: 10px;
    flex-shrink: 0;
}

/* Dropdown container - use opacity + scale instead of max-height */
.select-items {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 99;

    /* Initial hidden state */
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;

    /* GPU optimizations */
    backface-visibility: hidden;
    will-change: transform, opacity;

    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease-in-out;
}

.select-items .select-item {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: var(--nav-bar-color);
    transition: background-color 0.15s ease;
    font-size: 14px;
}

.select-items .select-item span {
    color: var(--text-color);
}

.select-items .select-item img {
    width: 33px;
    height: 33px;
    margin-right: 10px;
    object-fit: cover;
}

.select-items .select-item:hover {
    background-color: #f1f1f1;
}

/* Active dropdown - GPU accelerated */
.custom-select.active .select-items {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    max-height: 300px;
    overflow-y: auto;
}

/* Navigation menu buttons */
.nav-menu .top-menu-actions button {
    width: 100%;
    color: var(--text-color);
    outline: none;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    background-color: #cccccc4b;
    border: 0;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 0 2px;
    transition: transform 0.15s ease, background-color 0.2s ease;
    will-change: transform, background-color;
}

.nav-menu .top-menu-actions button .icon {
    width: 28px;
    height: 28px;
    padding: 2px;
    border-radius: 50%;
    margin-right: 13px;
    background-color: #cccccc4b;
    color: var(--text-color);
    flex-shrink: 0;
}

.nav-menu .top-menu-actions button:hover {
    background-color: #d8d2d27e;
    transform: translateY(-1px);
}

.nav-menu .top-menu-actions button:active {
    transform: scale(0.96);
}

/* Chat histories */
.nav-menu .chats-history {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    padding: 10px;
    margin-top: 10px;
    user-select: none;
    -webkit-overflow-scrolling: touch;
}

.nav-menu .chats-history .history-user {
    display: flex;
    padding: 10px;
    align-items: center;
    border-radius: 50px;
    color: var(--text-color);
    background-color: transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.2s ease;
    will-change: transform, background-color;
    margin-top: 8px;
    font-size: 14px;
}

.nav-menu .chats-history .history-user:hover {
    background-color: #d8d2d27e;
    transform: translateY(-1px);
}

.nav-menu .chats-history .history-user:active {
    transform: scale(0.97);
    box-shadow: rgba(60, 64, 67, 0.2) 0px 1px 3px;
}

.nav-menu .chats-history .history-user.selected {
    background-color: #d8d2d27e;
}

.nav-menu .chats-history .history-user .icon {
    width: 30px;
    height: 30px;
    padding: 2px;
    border-radius: 50%;
    margin-right: 12px !important;
    background-color: #cccccc4b;
    color: var(--text-color);
    font-size: 18px;
    flex-shrink: 0;
}

.nav-menu .history-title {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nav-menu .no-history {
    text-align: center;
}

.nav-menu .no-history svg {
    width: 24px;
    height: 300px;
}

.nav-menu .no-history span {
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    text-align: center;
}

.nav-menu {
    transition:
        transform 0.25s ease-in-out,
        width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide text elements in mini mode */
.nav-menu.mini .button-text,
.nav-menu.mini .chats-history,
.nav-menu.mini .history-header,
.nav-menu.mini .account_actions .profile-actions span:not(.icon) {
    display: none;
}

/* Center buttons in mini mode */
.nav-menu.mini .top-menu-actions button,
.nav-menu.mini .img-labs-acc,
.nav-menu.mini .select-selected {
    justify-content: center;
    padding: 10px;
    min-height: 50px;
}

/* Hide dropdown arrow and adjust character icon */
.nav-menu.mini .select-selected img {
    margin-right: 0;
}

/* Adjust icon margins in mini mode */
.nav-menu.mini .top-menu-actions button .icon {
    margin-right: 0;
}

/* Center profile section in mini mode */
.nav-menu.mini .side_account {
    justify-content: center;
    align-items: center;
    padding: 6px;
}

.nav-menu.mini .side_account img {
    margin-right: 0;
}

/* Adjust account actions in mini mode */
.nav-menu.mini .account_actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nav-menu.mini .account_actions .profile-actions {
    padding: 10px;
    justify-content: center;
}

/* Desktop-specific: Show mini sidebar when closed */
@media (min-width: 1000px) {
    .nav-menu {
        transform: translateX(0);
    }

    .nav-menu:not(.open) {
        min-width: 70px;
        width: 70px;
        max-width: 70px;
    }

    /* Hide all text in mini mode */
    .nav-menu:not(.open) .button-text,
    .nav-menu:not(.open) .chats-history,
    .nav-menu:not(.open) .history-header,
    .nav-menu:not(.open) .account_actions .profile-actions span:not(.icon) {
        display: none;
    }

    /* New Chat Button - Circular */
    .nav-menu:not(.open) .top-menu-actions button {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .nav-menu:not(.open) .top-menu-actions button .icon {
        margin: 0;
    }

    /* Img Labs Button - Circular */
    .nav-menu:not(.open) .img-labs-acc {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px auto 0;
        overflow: hidden;
    }

    .nav-menu:not(.open) .img-labs-acc img {
        width: 32px;
        height: 32px;
        margin: 0;
    }

    /* Character Select Button - Circular */
    .nav-menu:not(.open) .select-selected {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px auto 0;
        overflow: hidden;
    }

    .nav-menu:not(.open) .select-selected img {
        width: 32px;
        height: 32px;
        margin: 0;
    }

    /* User Profile Button - Circular */
    .nav-menu:not(.open) .side_account {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        padding: 0;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 10px auto;
        overflow: hidden;
    }

    .nav-menu:not(.open) .side_account img {
        width: 38px;
        height: 38px;
        margin: 0;
    }

    /* Account actions in mini mode */
    .nav-menu:not(.open) .account_actions .profile-actions {
        padding: 10px;
        justify-content: center;
    }

    /* Adjust top menu actions container */
    .nav-menu:not(.open) .top-menu-actions>div {
        display: flex;
        justify-content: center;
    }
}

/* Mobile: Keep existing behavior */
@media (max-width: 999px) {
    .nav-menu:not(.open) {
        transform: translateX(-100%);
    }
}



/* ──────────────────────────────────────────────────────────────────────────
   MODERN CONVERSATION SKELETON LOADER
   Replaces the old top "blue bar". While a chat (or the app on boot) loads we
   overlay shimmering placeholders shaped like real messages, the way ChatGPT /
   Claude do — no jarring bar, no dimmed screen, just a calm app-like load.
   Toggled by ShowTopLoader() / HideTopLoader() via the `.show` class.
   ────────────────────────────────────────────────────────────────────────── */
.chat-skeleton {
    --sk-base: color-mix(in srgb, var(--text-color, #808090) 9%, transparent);
    --sk-sheen: color-mix(in srgb, var(--text-color, #ffffff) 12%, transparent);

    position: absolute;
    inset: 0;
    z-index: 40;
    display: none;
    flex-direction: column;
    gap: 30px;
    width: 80%;
    max-width: 1000px;
    margin: 66px auto 0;
    padding: 6px 1rem 0;
    box-sizing: border-box;
    overflow: hidden;
    /* Match the chat area background so the swap in/out is seamless. */
    background: var(--chat-area-background);
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
}

.chat-skeleton.show {
    display: flex;
    /* Capture clicks so stale content underneath can't be interacted with. */
    pointer-events: auto;
    animation: sk-appear 0.32s ease both, sk-breathe 2.6s ease-in-out 0.32s infinite;
}

@keyframes sk-appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Very subtle overall breathing — calm, not busy. */
@keyframes sk-breathe {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.72;
    }
}

.sk-row {
    display: flex;
    gap: 14px;
    width: 100%;
    align-items: flex-start;
}

.sk-dot {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    margin-top: 2px;
}

.sk-stack {
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1 1 auto;
    min-width: 0;
}

.sk-bar {
    height: 10px;
    border-radius: 6px;
}

/* The first (short) bar reads as a name/title line. */
.sk-bar--head {
    height: 11px;
    border-radius: 6px;
    margin-bottom: 3px;
}

/* Refined shimmer: a slim, low-contrast sheen gliding across each block. */
.sk-dot,
.sk-bar {
    position: relative;
    overflow: hidden;
    background: var(--sk-base);
    background-image: linear-gradient(100deg,
            transparent 0,
            transparent 30%,
            var(--sk-sheen) 50%,
            transparent 70%,
            transparent 100%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: sk-glide 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Stagger the rows so the sheen feels organic rather than mechanical. */
.sk-row:nth-child(3) .sk-bar,
.sk-row:nth-child(3) .sk-dot {
    animation-delay: 0.18s;
}

@keyframes sk-glide {
    0% {
        background-position: 180% 0;
    }

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

@media (prefers-reduced-motion: reduce) {

    .sk-dot,
    .sk-bar {
        animation: none;
    }

    .chat-skeleton.show {
        animation: sk-appear 0.32s ease both;
    }
}

@media screen and (max-width: 1000px) {
    .chat-skeleton {
        width: 98%;
        margin-top: 72px;
    }
}

/* Screen-reader only helper (used by the skeleton's status text). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Scrollbar Styling */
.typing-input::-webkit-scrollbar {
    display: none;
}

code {
    border-radius: 12px;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    user-select: text;
}

img {
    user-select: none;
    /* Prevents text selection */
}

pre {
    margin-top: 10px;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 12px;
}

h4[class="text"] {
    color: var(--text-color);
}

/* Table styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: var(--secondary-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

th,
td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--light-dark-background);
}

th {
    background-color: var(--light-dark-background);
    color: var(--text-color);
    font-weight: bold;
}

tr:hover {
    background-color: var(--secondary-hover-color);
}

/* Responsive table */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

.h1-text {
    font-size: 32px;
    font-weight: 900;
    user-select: text;
}

body {
    background: var(--chat-area-background);
}

.header,
.chat-list .message,
.typing-form {
    margin: 0 auto;
    max-width: 1000px;
}

.header {
    margin-top: 6vh;
    padding: 1rem;
    overflow-x: hidden;
}

.header img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

body.hide-header .header {
    margin: 0;
    display: none;
}

.header :where(.title, .subtitle) {
    color: var(--text-color);
    font-weight: 500;
    line-height: 4rem;
}

.header .title {
    width: fit-content;
    font-size: 3rem;
    background: linear-gradient(to right,
            #4285f4,
            #d96570,
            #4285f4);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s linear infinite;
}

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

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



.header .subtitle {
    font-size: 2.6rem;
    color: var(--subheading-color);
}

.icon {
    font-weight: 400;
    color: var(--text-color);
}


.chat-container {
    display: flex;
    position: relative;
    overflow-y: auto;
    width: 80%;
    margin-left: 20%;
    justify-content: center;
    background-color: var(--chat-area-background);

    /* GPU assist for scrolling */
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
}

.chat-list {
    padding: 0 1rem 15rem;
    height: auto;
    overflow-y: visible;
    width: 80%;
    max-width: 1000px;
    margin-top: 50px;
    user-select: text !important;
}

.chat-list .message.incoming {
    margin-top: 1rem;
    white-space: pre-line;
}

.chat-list .message .message-content {
    display: block;
    gap: 1.5rem;
    width: 100%;
    align-items: center;
    text-align: left;
    user-select: text;
    font-size: 15px;
    /* GPU prep for content updates */
    will-change: transform, opacity;
}

.chat-list .message .text {
    color: var(--text-color);
    white-space: pre-wrap;
    user-select: text;
}

.chat-list .message.error .text {
    color: #e55865;
}

.chat-list .message.loading .text {
    display: none;
}

.chat-list .message .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    align-self: flex-start;
    border: 0;
    object-fit: cover;

    /* Offload rendering */
    will-change: transform;
    backface-visibility: hidden;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

/* Hide all icons by default */
.chat-list .message .icon {
    color: var(--text-color);
    cursor: pointer;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    font-size: 1.25rem;
    visibility: hidden;
    transition: background 0.2s ease;

    /* GPU hint for hover animations */
    will-change: transform, opacity, background;
    backface-visibility: hidden;
}

/* Force hidden if class 'hide' is applied */
.chat-list .message .icon.hide {
    visibility: hidden !important;
}

/* Show all visible icons on hover of the whole message */
.chat-list .message:not(.loading):not(.error):hover .message-actions .icon:not(.hide) {
    visibility: visible;
}

/* Hover effect on icons */
.chat-list .message .icon:hover {
    background: var(--secondary-hover-color);
}

.chat-list .message .loading-indicator {
    display: none;
    gap: 0.8rem;
    width: 100%;
    flex-direction: column;

    /* Hardware acceleration */
    will-change: transform, opacity;
}

.chat-list .message.loading .loading-indicator {
    display: flex;
}

.chat-list .message .loading-indicator .loading-bar {
    height: 11px;
    width: 100%;
    border-radius: 0.135rem;
    background-position: -800px 0;
    background: linear-gradient(to right, #4285f4, var(--primary-color), #4285f4);
    animation: loading 3s linear infinite;

    /* GPU optimization for animation */
    will-change: background-position;
    backface-visibility: hidden;
}

.chat-list .message .loading-indicator .loading-bar:last-child {
    width: 70%;
}

.outgoing {
    text-align: right;
    padding: 12px;
    background: var(--light-dark-background);
    border-radius: 18px;
    border-top-left-radius: 5px;
    width: 100%;
    margin-top: 22px !important;
    overflow: auto;

    /* GPU acceleration for redraws */
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.outgoing .text {
    text-align: left;
    margin-left: 0px;
    user-select: text;
}

.incoming {
    text-align: left;
    background: transparent;
    border-radius: 18px;
    border-top-left-radius: 5px;
    width: 100%;
    margin-left: -4px;

    /* GPU prep for smoother updates */
    will-change: transform, opacity;
    transform: translateZ(0);
}

.incoming .text {
    padding-left: 0;
    margin-left: 0;
    margin-top: 0;
    user-select: text;
}

.outgoingRadius {
    border-radius: 18px;
    border-top-left-radius: 5px;
    overflow: hidden;
    position: relative;

    /* Avoid re-paint issues on corners */
    will-change: transform;
    transform: translateZ(0);
}

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

    100% {
        background-position: 800px 0;
    }
}

.typing-area {
    position: fixed;
    width: 80%;
    margin-left: 20%;
    left: 0;
    bottom: 0;
    padding: 0.75rem 1rem;
    background: var(--chat-area-background);
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    transform: translateZ(0);
    z-index: 100;
    /* Smooth slide between the centred new-chat position and the docked bottom. */
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Loading: hide the greeting/chat list so it doesn't flicker behind the
      skeleton loader. ─────────────────────────────────────────────────────── */
.chat-container.sk-loading .chat-list {
    visibility: hidden;
}

/* ── New / empty chat: centre the greeting + composer (Claude-style), then
      let them slide down when the conversation starts. ──────────────────────── */
/* Raise the composer to the vertical middle. It stays in the SAME horizontal
   box as the chat list, so the greeting (centred in the chat list) lines up
   perfectly with the input card regardless of the sidebar width. */
body.new-chat-view .typing-area {
    transform: translateY(-42vh);
}

/* Sit the greeting DIRECTLY above the raised composer.
   The composer is fixed at bottom:0 and lifted by 42vh, so its top edge always
   lands on the 58dvh line (minus its own ~118px height). Anchoring the greeting
   box to that same line and bottom-aligning it keeps the pair locked together at
   every viewport height. Centring the two independently (the previous approach)
   let the greeting drift down BEHIND the composer card, which sits at z-index
   100 — that is why the welcome text became invisible.
   The !important flags are required to beat ui-polish.css, which sets
   `.chat-list { margin-top: 28px !important; padding: 0 0 132px !important; }`. */
body.new-chat-view .chat-list {
    margin-top: 0 !important;
    min-height: 0 !important;
    height: calc(58dvh - 130px);
    padding: 0 0 22px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

/* When a playbook (or other skill) is attached, the composer grows taller
   because the pills sit inside .input-wrapper. Shrink the landing box by the
   same amount so the welcome text stays visible above the composer instead of
   being pushed behind it. */
body.new-chat-view.has-active-skills .chat-list {
    height: calc(58dvh - 190px);
}

body.new-chat-view .header {
    position: static;
    margin: 0 auto;
    width: 100%;
    display: block !important;
    animation: nc-greet-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Legacy top-anchored offsets (.header margin-top:8vh and .header-title-con
   margin-top:12vh, both !important in ui-polish.css). They were tuned for the
   old layout where the greeting sat near the top of a scrolling list; inside the
   landing box they push it straight down into the composer. */
body.new-chat-view .header,
body.new-chat-view .header .header-title-con {
    margin-top: 0 !important;

}

body.new-chat-view .header .header-title-con {
    overflow: hidden;
}

body.new-chat-view .header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

@keyframes nc-greet-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

@media screen and (max-width: 1000px) {
    body.new-chat-view .typing-area {
        transform: translateY(-40vh);
    }

    /* Composer is lifted 40vh here, so the anchor line is 60dvh. */
    body.new-chat-view .chat-list {
        height: calc(60dvh - 126px);
        padding: 0 0 18px !important;
    }

    /* Same pill-height compensation on smaller screens. */
    body.new-chat-view.has-active-skills .chat-list {
        height: calc(60dvh - 186px);
    }
}

.typing-area .typing-form {
    display: flex;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

.typing-area :where(.typing-form) {
    display: flex;
    gap: 0.75rem;
}

.typing-form .input-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
    border-radius: 24px;
    background: var(--secondary-color);
    box-shadow: var(--input-wrapper-shadow);
    padding: 0;
    transition: border-radius 0.2s ease;
}

/* When content is tall, slightly less rounded */
.typing-form .input-wrapper.expanded {
    border-radius: 20px;
}

.typing-form .typing-input {
    width: 100%;
    min-height: 48px;
    max-height: 200px;
    border: none;
    outline: none;
    resize: none;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color);
    background: transparent;
    box-sizing: border-box;
    overflow-y: hidden;
    padding: 14px 16px 0 16px;
    font-family: inherit;
    transition: none;
    /* No transition on height for snappy feel */
}

.typing-form .typing-input::placeholder {
    color: var(--placeholder-color);
}

.input-actions {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px 6px 6px;
    box-sizing: border-box;
    flex-shrink: 0;
    min-height: 44px;
}

/* Left side: Tool buttons */
.input-tools-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.input-tools-left .tool-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--text-color);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    will-change: transform, background-color;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.input-tools-left .tool-btn .tools-icon {
    font-size: 20px;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.input-tools-left .tool-btn:hover {
    background-color: var(--hover-bg, rgba(0, 0, 0, 0.06));
}

.input-tools-left .tool-btn:hover .tools-icon {
    opacity: 1;
}

.input-tools-left .tool-btn:active {
    transform: translateZ(0) scale(0.92);
}

/* Disabled state for tool buttons */
.input-tools-left .tool-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.input-tools-left .tool-btn:disabled:hover {
    background: transparent;
}

/* Right side: Send & Stop */
.input-actions-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.input-actions-right .action-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-color);
    background: transparent;
    will-change: transform, background-color;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.input-actions-right .action-btn:hover {
    background-color: var(--hover-bg, rgba(0, 0, 0, 0.06));
}

.input-actions-right .action-btn:active {
    transform: translateZ(0) scale(0.9);
}

/* Send Button - Highlighted */
.input-actions-right .send-btn {
    background-color: var(--text-color);
    color: var(--secondary-color);
    opacity: 0.35;
    transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.2s ease;
}

.input-actions-right .send-btn.active {
    opacity: 1;
}

.input-actions-right .send-btn:hover {
    background-color: var(--text-color);
    opacity: 0.85;
}

.input-actions-right .send-btn.active:hover {
    opacity: 1;
    transform: translateZ(0) scale(1.05);
}

/* ── Attach File Dropdown (keep existing logic) ── */
.attach-file-selections {
    position: absolute;
    bottom: 44px;
    left: 0;
    z-index: 10;
}

/* ── Disclaimer ── */
.disclaimer-text {
    text-align: center;
    max-width: 820px;
    margin: 6px auto 0;
    font-size: 12px;
}

/* ═══════════════════════════════════════════
   REMOVE OLD OUTER TOOLS (no longer needed)
   ═══════════════════════════════════════════ */
.typing-form-tools {
    display: none !important;
}

#delete-chat-button {
    display: none;
}

.icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    font-size: 1.4rem;
    color: var(--text-color);
    align-items: center;
    justify-content: center;
    background: var(--secondary-color);
    transition: 0.2s ease;

    /* GPU acceleration for hover/click */
    will-change: transform, background, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}


.icon:hover {
    background: var(--secondary-hover-color);

    /* GPU acceleration for hover state */
    will-change: background, transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.delphos {
    border: 1px solid var(--primary-color);

    /* Offload border repaints */
    will-change: border-color, transform;
    transform: translateZ(0);
}

.input-action-button {
    position: absolute;
    right: 0;
    bottom: 4px;
    outline: none;
    border: none;
    transform: scale(0);
    background: var(--disabled-color);
    transition: transform 0.2s ease;

    /* GPU layer for smooth scaling */
    will-change: transform, background, opacity;
    backface-visibility: hidden;
    transform: scale(0) translateZ(0);
}

#stop-stream-button {
    bottom: 2px;
    right: 2px;
    /* GPU optimization */
    will-change: transform, opacity;
    transform: scale(0);
}

.typing-form #send-message-button {
    position: absolute;
    outline: none;
    border: none;
    transform: scale(0);
    background: var(--text-color);
    transition: transform 0.2s ease;

    /* GPU hint for scaling + background updates */
    will-change: transform, background, opacity;
    backface-visibility: hidden;
    transform: scale(0) translateZ(0);
}

.typing-form #send-message-button:hover {
    background: rgba(0, 0, 0, 0.1);

    /* Avoid repaint lag */
    will-change: background;
    transform: translateZ(0);
}

.typing-form #send-message-button:active {
    background: rgba(0, 0, 0, 0.2);

    /* Faster active response */
    will-change: background;
    transform: translateZ(0);
}

.typing-area .disclaimer-text {
    text-align: center;
    font-size: 0.85rem;
    margin-top: 1rem;
    color: var(--placeholder-color);

    /* Text rendering optimization */
    -webkit-font-smoothing: antialiased;
    transform: translateZ(0);
}

.outgoing {
    border-top-right-radius: 5px;
    border-top-left-radius: 18px;
    padding: 12px;
    background: var(--light-dark-background);
    width: 80%;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-top: 22px !important;

    /* Smooth GPU-accelerated updates */
    will-change: transform, opacity, background;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.outgoing .avatar {
    display: none;
}

/* Responsive media query code for small screen */

/* MESSAGE BOX */
.message-box {
    position: fixed;
    bottom: -100%;
    min-height: 50px;
    min-width: 160px;
    background-color: #2b2b2b;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px,
        rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 12px;
    padding: 10px;
    z-index: 999999999999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    backface-visibility: hidden;
    will-change: transform, opacity, bottom;
}

.message-box.show {
    bottom: 4%;
    transform: translateX(-50%) translateZ(0);
}

.message-box.hide {
    bottom: -100%;
    transform: translateX(-50%) translateZ(0);
}

.message-box .message {
    margin-left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-box span {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.message-box .icon-msgbox {
    font-size: 20px;
    margin-right: 6px;
    margin-left: 6px;
    color: #fff;
}

/* Overlay layers */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 9999999;
    display: none;

    /* GPU layer for fades */
    will-change: opacity, transform;
    transform: translateZ(0);
}

.overlay-glass {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 11, 11);
    z-index: 99999999;
    display: none;

    /* GPU-accelerated backdrop updates */
    will-change: opacity, transform;
    transform: translateZ(0);
}

/* Sign-in modal */
.signIn {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    width: 90%;
    height: 80%;
    max-width: 450px;
    max-height: 500px;
    background-color: #fff;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999999;
    border-radius: 30px;

    /* Smooth transform + opacity animations */
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Primary button */
.button.suparva {
    max-width: 320px;
    display: flex;
    padding: 8px;
    line-height: 1.25rem;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    align-items: center;
    border-radius: 40px;
    border: 1px solid rgba(50, 50, 80, 0.25);
    gap: 0.75rem;
    color: #ffffff;
    background-color: rgb(50, 50, 80);
    cursor: pointer;
    transition: all 0.6s ease;
    text-decoration: none;

    /* GPU acceleration for hover/active transforms */
    will-change: transform, background, opacity, box-shadow;
    backface-visibility: hidden;
    transform: translateZ(0);
}

#directGAuth {
    display: none;
}

.button.suparva img {
    height: 32px;
    width: 32px;
    fill: #fff;
}

.button.suparva:hover {
    transform: scale(1) translateZ(0);
    background-color: rgb(90, 90, 120);
    box-shadow: 0 2px 4px rgba(90, 90, 120, 0.1);
}

.button.suparva:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 40, 0.3);
}

.button.suparva:active {
    transform: scale(0.98) translateZ(0);
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 480px) {
    .button.suparva {
        max-width: 100%;
    }
}

/* Secondary button */
.button-secondary {
    padding: 6px;
    border: 1px solid #333;
    background-color: #1e90ff;
    color: #fff;
    width: 60%;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.1s ease;
    font-weight: 600;

    /* Promote for smooth press effect */
    will-change: transform, background, opacity;
    transform: translateZ(0);
}

.button-secondary:active {
    background-color: #5c9aff;
}


/* Window Loader */
.windowLoader {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999999;

    /* GPU optimization for fade/entry */
    will-change: opacity, transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Spinner */
.spinner {
    background-image: linear-gradient(rgb(186, 66, 255) 35%, rgb(0, 225, 255));
    width: 100px;
    height: 100px;
    border-radius: 50px;
    filter: blur(1px);
    box-shadow: 0px -5px 20px 0px rgb(186, 66, 255),
        0px 5px 20px 0px rgb(0, 225, 255);

    animation: spinning82341 1.7s linear infinite;

    /* Force GPU rotation */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.spinner1 {
    background-color: rgb(36, 36, 36);
    width: 100px;
    height: 100px;
    border-radius: 50px;
    filter: blur(10px);

    /* Promote to GPU for smoothness */
    transform: translateZ(0);
}

/* Rotation animation */
@keyframes spinning82341 {
    to {
        transform: rotate(360deg);
    }
}

/* Alert Window */
.alert-win {
    width: 80%;
    height: 60%;
    max-width: 500px;
    max-height: 210px;
    background-color: var(--chat-area-background);
    border-radius: 20px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    border: 1px solid;
    z-index: 99999999;
    display: none;
    user-select: none;

    /* Smooth transform + opacity animations */
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.alert-win .bottom-actions-alert {
    position: absolute;
    bottom: 0;
    height: 60px;
    display: flex;
    padding: 6px;
    gap: 6px;
    right: 5px;
}

.alert-win .bottom-actions-alert button {
    transform: translateZ(0);
    background-color: transparent;
    border: 1px solid #ffffff2a;
    width: 100px;
    height: 40px;
    border-radius: 8px;
    color: var(--text-color);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease;
    will-change: background-color;
    backface-visibility: hidden;
    background: #2b62c98f;
}

.alert-win .bottom-actions-alert button.canc {
    color: var(--placeholder-color);
    background-color: rgba(255, 68, 0, 0.308);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.alert-win .bottom-actions-alert button:active {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.alert-win .head-alert {
    width: 100%;
    height: 50px;
    background-color: var(--darker-background);
    border-radius: 20px 20px 0 0;
    position: absolute;
    display: flex;
    align-items: center;
    padding: 10px 0 10px 20px;

    /* Promote header to GPU */
    transform: translateZ(0);
}

.alert-win .head-alert span {
    font-size: 20px;
}

.alert-win .alert-content {
    width: 100%;
    height: calc(100% - 50px);
    margin-top: 50px;
    /* display: flex; */
    /* align-items: center; */
    padding: 20px;
    font-size: 16px;
    transform: translateZ(0);
}

/* History Loader */
.loading-histories-con {
    width: 100%;
    height: 100%;
    min-height: 26rem;
    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateZ(0);
}

.history-loader {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 10px;

    transform: translateZ(0);
}

.history-loader div {
    width: 8%;
    height: 24%;
    background: rgb(128, 128, 128);
    position: absolute;
    left: 50%;
    top: 30%;
    opacity: 0;
    border-radius: 50px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    animation: fade458 1s linear infinite;

    /* GPU optimize opacity anim */
    will-change: opacity, transform;
    transform: translateZ(0);
}

@keyframes fade458 {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.25;
    }
}

/* History Loader Bars */
.history-loader .bar1,
.history-loader .bar2,
.history-loader .bar3,
.history-loader .bar4,
.history-loader .bar5,
.history-loader .bar6,
.history-loader .bar7,
.history-loader .bar8,
.history-loader .bar9,
.history-loader .bar10,
.history-loader .bar11,
.history-loader .bar12 {
    /* Promote to GPU */
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.history-loader .bar1 {
    transform: rotate(0deg) translate(0, -130%);
    animation-delay: 0s;
}

.history-loader .bar2 {
    transform: rotate(30deg) translate(0, -130%);
    animation-delay: -1.1s;
}

.history-loader .bar3 {
    transform: rotate(60deg) translate(0, -130%);
    animation-delay: -1s;
}

.history-loader .bar4 {
    transform: rotate(90deg) translate(0, -130%);
    animation-delay: -0.9s;
}

.history-loader .bar5 {
    transform: rotate(120deg) translate(0, -130%);
    animation-delay: -0.8s;
}

.history-loader .bar6 {
    transform: rotate(150deg) translate(0, -130%);
    animation-delay: -0.7s;
}

.history-loader .bar7 {
    transform: rotate(180deg) translate(0, -130%);
    animation-delay: -0.6s;
}

.history-loader .bar8 {
    transform: rotate(210deg) translate(0, -130%);
    animation-delay: -0.5s;
}

.history-loader .bar9 {
    transform: rotate(240deg) translate(0, -130%);
    animation-delay: -0.4s;
}

.history-loader .bar10 {
    transform: rotate(270deg) translate(0, -130%);
    animation-delay: -0.3s;
}

.history-loader .bar11 {
    transform: rotate(300deg) translate(0, -130%);
    animation-delay: -0.2s;
}

.history-loader .bar12 {
    transform: rotate(330deg) translate(0, -130%);
    animation-delay: -0.1s;
}

/* Image Preview */
.input-wrapper .image-preview {
    width: 72px;
    height: 72px;
    margin: 12px 12px 0 12px;
    border-radius: 12px;
    overflow: hidden;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: var(--darker-background);
    box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 4px 0px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.input-wrapper .image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.input-wrapper .image-preview .rm-img-prv:hover {
    background: rgba(0, 0, 0, 0.8);
}

.input-wrapper .image-preview .file-preview {
    font-size: 12px;
    padding: 6px 10px;
    text-align: center;
    word-break: break-all;
    color: var(--text-color);
}

/* Edit Button */
.edit-outgouing-button {
    position: absolute;
    padding: 9px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 28px;
    left: 16%;
    user-select: none;
    cursor: pointer;

    /* Start hidden */
    transform: scale(0) translateZ(0);
    backface-visibility: hidden;

    /* GPU accelerated transition */
    will-change: transform, opacity, background-color;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.edit-outgouing-button:active {
    background-color: rgba(219, 217, 217, 0.1);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.edit-outgouing-button:hover {
    background-color: rgba(199, 197, 197, 0.2);
}

.edit-outgouing-button span {
    font-size: 18px;
    transform: translateZ(0);
}

/* Edit Confirm */
.edit-confirm {
    margin-top: 10px;
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    transform: translateZ(0);
}

.edit-confirm .edit-confirm-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    padding: 8px;
    background: #cccccc4b;
    border-radius: 30px;

    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Editable Textbox */
.editable-textbox {
    padding: 0;
    text-align: left;
    overflow-y: visible;

    transform: translateZ(0);
}

/* Typing Tools */
.typing-form-tools {
    width: 100%;
    position: relative;
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
    height: 30px;

    transform: translateZ(0);
}

/* Typing Form Tools Buttons */
.typing-form-tools button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    border: none;
    border-radius: 30px;
    gap: 4px;
    cursor: pointer;
    box-shadow: none;

    /* GPU acceleration */
    will-change: transform, background-color, box-shadow, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;

    /* Restrict to performant properties */
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.typing-form-tools button span {
    font-size: 14px;
    transform: translateZ(0);
}

.typing-form-tools .tools-icon {
    font-size: 18px;
    transform: translateZ(0);
}

/* Disabled State */
.typing-form-tools button:disabled {
    background-color: var(--disabled-color);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.8;
}

.typing-form-tools button:disabled:hover,
.typing-form-tools button:disabled:active {
    background-color: var(--disabled-color);
    box-shadow: none;
}

/* Hover/Active */
.typing-form-tools button:hover {
    background-color: #cccccc4b;
    transform: translateZ(0) scale(1.02);
}

.typing-form-tools button:active {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    transform: translateZ(0) scale(0.97);
}

/* Remove Image Preview Button */
.rm-img-prv {
    position: absolute;
    right: 4px;
    top: 4px;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-color);
    padding: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;

    /* GPU acceleration */
    will-change: transform, opacity, background-color;
    transform: translateZ(0);
    backface-visibility: hidden;

    transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.rm-img-prv:hover {
    background: #cccccc4b;
    transform: scale(1.1) translateZ(0);
}

/* File Preview */
.image-preview .file-preview {
    max-width: 200px;
    max-height: 30px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 5px;
    transform: translateZ(0);
}

/* File Loader */
#file-attach-prv-loader {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transform: translateZ(0);
}

#file-attach-prv-loader span {
    animation: rotate 1s linear infinite;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg) translateZ(0);
    }

    100% {
        transform: rotate(360deg) translateZ(0);
    }
}

/* ── Attachment chips in sent message bubbles ───────────────────────────── */

/* Shared shell */
.image-preview-chat {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    border-radius: 16px;
    overflow: hidden;
    user-select: none;
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ── Image chip ── */
.image-preview-chat.ipc-img {
    width: clamp(180px, 45vw, 280px);
    height: clamp(180px, 45vw, 280px);
    background-color: var(--darker-background);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.image-preview-chat.ipc-img img,
.image-preview-chat.ipc-img .preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    transform: translateZ(0);
    cursor: pointer;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.image-preview-chat.ipc-img img:hover {
    transform: scale(1.025) translateZ(0);
    filter: brightness(1.06);
}

/* Loading placeholder (used by aiSendImageFront) */
.image-preview-chat .preview-image-l {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: translateZ(0);
}

/* ── File chip ── */
.image-preview-chat.ipc-file {
    flex-direction: row;
    gap: 12px;
    min-width: 200px;
    max-width: clamp(220px, 55vw, 320px);
    padding: 12px 16px;
    background: var(--darker-background, rgba(0, 0, 0, 0.22));
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.ipc-file-icon {
    font-size: 28px;
    flex-shrink: 0;
    color: var(--accent-color, #7c8cf8);
    opacity: 0.88;
}

.ipc-file-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    /* allow ellipsis */
}

.ipc-file-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    line-height: 1.3;
}

.ipc-file-ext {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent-color, #7c8cf8);
    opacity: 0.75;
    text-transform: uppercase;
    line-height: 1;
}

/* Legacy fallback for chips without the new classes */
.image-preview-chat:not(.ipc-img):not(.ipc-file) {
    width: clamp(180px, 45vw, 280px);
    height: clamp(180px, 45vw, 280px);
    background-color: var(--darker-background);
}

.image-preview-chat:not(.ipc-img):not(.ipc-file) img {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    object-fit: cover;
    transform: translateZ(0);
}

.image-preview-chat .file-preview {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px 10px;
    font-size: 13px;
    transform: translateZ(0);
}

@media screen and (max-width: 668px) {
    .image-preview-chat.ipc-img {
        width: clamp(140px, 52vw, 220px);
        height: clamp(140px, 52vw, 220px);
    }

    .image-preview-chat.ipc-file {
        max-width: 88vw;
    }

    .ipc-file-name {
        max-width: 54vw;
    }
}

@media screen and (max-width: 360px) {
    .image-preview-chat.ipc-img {
        width: 150px;
        height: 150px;
    }
}

/* Sliding Sources Window */
.sources-window {
    position: fixed;
    user-select: none;
    top: 0;
    right: 0;
    left: auto;
    width: 300px;
    height: calc(100% - 60px);
    background-color: var(--darker-background);
    margin-top: 60px;
    z-index: 9999;

    /* Start off-screen */
    transform: translateX(100%);

    /* GPU acceleration */
    will-change: transform;
    transform: translateX(100%) translateZ(0);
    backface-visibility: hidden;

    transition: transform 0.3s ease-in-out;
}

.sources-window.show {
    transform: translateX(0) translateZ(0);
}

.sources-window .head {
    display: flex;
    justify-content: left;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    transform: translateZ(0);
}

.sources-window .head span {
    font-size: 18px;
    font-weight: 800;
}

.sources-window .head .icon-close {
    position: absolute;
    right: 20px;
    top: 10px;
    cursor: pointer;
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-color);
    border-radius: 50%;
    border: 1px solid var(--border-color);
    margin-top: -2px;

    /* GPU-friendly hover */
    will-change: transform, background-color, opacity;
    transform: translateZ(0);
    transition: transform 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.sources-window .content {
    height: calc(100% - 54px);
    overflow-y: auto;
    padding: 6px;
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
    /* smoother scrolling on mobile */
}

.sources-window .content .sources-used:first-child {
    margin-top: 0;
}

.sources-window .content .sources-used {
    background: var(--highlight-background);
    border-radius: 12px;
    padding: 5px;
    margin-top: 8px;
    cursor: pointer;

    /* GPU hints */
    will-change: transform, background-color, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;

    transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.sources-window .content .sources-used:hover {
    background: var(--subheading-color);
    transform: scale(1.02) translateZ(0);
}


.sources-window .content .sources-used span {
    display: block;
    font-size: 12px;
    margin-left: 8px;
    transform: translateZ(0);
}

.sources-window .content .sources-used-metas {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 6px;
    transform: translateZ(0);
}

.sources-window .content .sources-used h4,
.sources-window .content .sources-used small {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    transform: translateZ(0);
}

.sources-window .content .sources-used img {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    object-fit: cover;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Source button */
.source-button {
    color: var(--text-color);
    background: transparent;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    outline: none;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 14px;
    will-change: transform, background-color, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.source-button:hover {
    background: var(--subheading-color);
    transform: scale(1.02) translateZ(0);
}

/* Code block wrapper */
.code-wrapper {
    position: relative;
    margin: 1em 0;
    border-radius: 12px;
    overflow: hidden;
    /* Header stays put; the code body below it scrolls on its own. */
    display: flex;
    flex-direction: column;
    transform: translateZ(0);
    animation: blockFadeIn 0.25s ease;
}

.code-header {
    padding: 0.5em 0.75em;
    display: flex;
    flex: 0 0 auto;
    background: var(--disabled-color);
    color: var(--text-color) !important;
    justify-content: space-between;
    align-items: center;
    font-family: sans-serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    will-change: opacity;
}

.language-label {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--text-color);
    transform: translateZ(0);
}

/* Copy button */
.copy-button {
    background: #ffffff21;
    border: none;
    color: #fff;
    /* padding: 0.3em 0.6em; */
    cursor: pointer;
    border-radius: 50%;
    font-size: 0.8em;
    will-change: transform, background-color, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: background-color 0.2s ease, transform 0.2s ease;
    display: flex;
    padding: 6px;
}

.copy-button:hover {
    background: #0056b3;
    transform: scale(1.05) translateZ(0);
}

/* The highlighted code body scrolls inside its own container, under the header. */
.code-wrapper pre {
    margin: 0 !important;
    max-height: 480px;
    overflow: auto;
    border-radius: 0;
}

/* Think box */
.think {
    padding: 6px;
    font-size: 14px;
    border-left: 4px solid var(--border-color);
    padding-left: 10px;
    padding-top: 1px;
    color: #929292 !important;
    transform: translateZ(0);
}

.think p {
    color: #929292 !important;
    transform: translateZ(0);
}

.loadingtext {
    color: var(--placeholder-color);
    position: relative;
}

.loadingtext::after {
    position: absolute;
    animation: b 3s infinite linear;
    color: var(--placeholder-color);
    content: "";
    left: 105%;
}

@keyframes b {
    0% {
        content: "";
    }

    10% {
        content: ".";
    }

    40% {
        content: "..";
    }

    70% {
        content: "...";
    }

    100% {
        content: "";
    }
}

/* Animation Keyframes */
@keyframes popIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Animate the modal when shown */
.animate-pop {
    animation: popIn 0.3s ease-out;
}

.windows-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    opacity: 1;
    display: none;
    transition: opacity 0.3s ease;
}

.windows-overlay.active {
    opacity: 1;
    pointer-events: auto;
    display: block;
}

/* Existing CSS for modal */
.data-window {
    position: fixed;
    width: 700px;
    height: 75%;
    user-select: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--disabled-color);
    border-radius: 10px;
    z-index: 999999;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    display: none;
    /* Initially hidden */
}


@media screen and (max-width: 1150px) {
    .data-window {
        width: 80%;
        height: 80%;
    }

}


/* Other styles remain unchanged ... */
.data-window .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    height: 54px;
    padding-left: 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--light-dark-background);
    color: var(--text-color);
    font-weight: 500;
    font-size: 16px;
}

.data-window .head span {
    font-size: 18px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    color: var(--text-color);
}

.data-window .content {
    height: calc(100% - 54px);
    overflow: hidden;
    overflow-y: auto;
    padding: 6px;
}

.data-window .content .content-viewer {
    height: calc(100% - 84px);
    overflow: hidden;
    overflow-y: auto;
    padding: 6px;
    border-bottom: 1px solid var(--border-color);
}

@media screen and (max-width: 820px) {
    .data-window {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .data-window .content .content-viewer {
        height: 88%;
    }

    .memory-con textarea {
        max-height: 90px !important;
        height: 90px !important;
    }

    .data-window .head h2 {
        font-size: 20px;
    }
}

/* Legacy modal button styling is intentionally limited to legacy controls.
   Scheduler, Notices, Custom tools, and Permissions provide their own button
   layouts; do not force their controls into 100px blue boxes.

   WHY THE TWO ATTRIBUTE EXEMPTIONS AT THE END
     This selector carries eleven hand-maintained `:not(.class)` opt-outs, and
     every component built since has had to remember to add itself. Playbooks and
     the Directory did not, so every one of their buttons rendered as a 100px navy
     box: the "Add" menu items wrapped onto three lines and overflowed the modal,
     the back link became a pill, and the info/overflow/view-mode icon buttons
     were stretched into rectangles the wrong colour. Nothing was wrong with those
     components' own CSS — this rule simply outranks it at (0,13,1) against their
     single-class (0,1,0) rules, whatever the load order.

     Exempting the two NAMESPACES rather than another dozen individual classes
     fixes the whole family at once and stops the next component inheriting the
     same surprise. An attribute selector costs the same specificity as a class,
     so the rule still wins everywhere it is genuinely meant to apply.

     Anything named `pbk-*` (Playbooks) or `dir-*` (the Directory) therefore opts
     out by construction and is styled entirely by playbooks-ui.css /
     directory-ui.css, which already use the accent tokens. */
.data-window .content button:not(.sc-btn):not(.sc-icon-btn):not(.sc-active-pill):not(.sc-suggest):not(.sc-notices-action-btn):not(.sc-notices-ghost-btn):not(.mcp-card):not(.mcp-btn):not(.mcp-icon-btn):not(.mcp-back):not(.perm-btn):not([class*="pbk-"]):not([class*="dir-"]) {
    border: 1px solid var(--border-color);
    padding: 6px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 8px;
    background: rgb(25 63 103 / 68%);
    cursor: pointer;
    font-size: 14px;
    /* font-weight: 600; */
    color: #fff;
    box-shadow: none;
    will-change: transform, background-color, box-shadow;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.data-window .content button:not(.sc-btn):not(.sc-icon-btn):not(.sc-active-pill):not(.sc-suggest):not(.sc-notices-action-btn):not(.sc-notices-ghost-btn):not(.mcp-card):not(.mcp-btn):not(.mcp-icon-btn):not(.mcp-back):not(.perm-btn):not([class*="pbk-"]):not([class*="dir-"]):active {
    transform: scale(0.98) translateZ(0);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.data-window .content .canc {
    background-color: rgba(255, 68, 0, 0.308);
    color: var(--text-color);
}

.data-window .content .cancel {
    background-color: rgba(240, 87, 31, 0.548);
}

.data-window .content .canc:hover {
    background-color: rgba(240, 87, 31, 0.548);
}

/* Shimmer text */
.shimmer-text {
    /* Base text color (The "off" state) - using rgba for a glass-like feel */
    color: rgba(255, 255, 255, 0.3);

    /* The Magic Gradient */
    /* 120deg tilt = Natural light reflection */
    /* We use a tighter white band (45% to 55%) for a sharper shine */
    background: linear-gradient(120deg,
            #888 40%,
            #fff 50%,
            #888 60%);

    /* Large background size creates the "pause" effect between shines */
    background-size: 300% 100%;

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Slightly longer duration + linear = Smooth, continuous flow */
    animation: shimmer 3s linear infinite;

    white-space: nowrap;
    font-weight: 600;
    font-size: 16px;
    font-family: "Poppins", sans-serif;

    /* Hardware Acceleration */
    will-change: background-position;
    transform: translateZ(0);
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        /* Move it far enough to ensure a seamless loop */
        background-position: -200% 0;
    }
}


/* Image sources container */
.images-sources {
    width: 100%;
    height: 230px;
    display: flex;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Individual image preview */
.images-sources .images-preview {
    display: flex;
    margin: 2px;
    cursor: pointer;
    position: relative;

    border: 1px solid;
    border-radius: 16px;

    /* GPU hints */
    will-change: transform, background-color, box-shadow;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.images-sources .images-preview:hover {
    transform: scale(1.03) translateZ(0);
}

/* Image styling */
.images-sources .images-preview img {
    object-fit: cover;
    border-radius: 16px;
    display: block;

    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Image details */
.images-preview .image-details {
    height: 50px;
    width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    padding: 8px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    color: var(--text-color);

    transform: translateZ(0);
}

.images-preview .image-details span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.images-preview .image-details small {
    font-size: 10px;
    font-weight: 400;
    display: block;
    color: #0056b3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-sources .video-preview {
    height: 100%;
    width: 100%;
    display: inline-table;
    margin: 2px;
    cursor: pointer;
    position: relative;

    /* GPU acceleration */
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;

    transition: transform 0.15s ease, opacity 0.15s ease;
}

.video-sources .video-preview:hover {
    transform: scale(1.02) translateZ(0);
}

.video-sources .video-preview iframe {
    height: 100%;
    width: 100%;
    min-height: 400px;
    object-fit: cover;
    border-radius: 16px;

    /* GPU boost */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Streamed meta block */
.streamed_meta {
    margin-left: -5px;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid;
    border-radius: 12px;
    overflow: hidden;
    max-height: 1000px;

    /* GPU hints */
    will-change: max-height, padding, margin, opacity;
    transform: translateZ(0);

    transition: max-height 0.5s ease, padding 0.5s ease, margin-bottom 0.5s ease, opacity 0.3s ease;
}

.streamed_meta.hidden {
    max-height: 0;
    padding: 0 8px;
    margin-bottom: 0;
    border: none;
    opacity: 0;
}

/* Meta queries */
.streamed_meta .meta-queries {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.streamed_meta .meta-queries a {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);

    position: relative;
    display: block;
    width: 100%;
    max-width: 200px;
    padding: 4px 8px 4px 10px;

    border: 1px solid #ffffff0f;
    border-radius: 12px;
    background-color: var(--light-dark-background);
    text-decoration: none;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
    box-shadow: none;

    /* GPU */
    will-change: transform, background-color;
    transform: translateZ(0);
    backface-visibility: hidden;

    transition: transform 0.15s ease, background-color 0.15s ease;
}

.streamed_meta .meta-queries a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: scale(1.02) translateZ(0);
}

.streamed_meta .meta-queries a span {
    font-size: 15px;
    position: absolute;
    top: 5px;
}

/* Meta sites */
.streamed_meta .meta-sites {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.streamed_meta .meta-sites .sites-tiles {
    display: flex;
    gap: 10px;
    align-items: center;
    max-height: 30px;
    max-width: 200px;

    position: relative;
    white-space: nowrap;
    overflow: hidden;
    padding: 4px 8px 4px 10px;

    border: 1px solid #ffffff0f;
    border-radius: 12px;
    background-color: var(--light-dark-background);
    box-shadow: none;
    user-select: none;

    /* GPU */
    will-change: transform, background-color;
    transform: translateZ(0);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.streamed_meta .meta-sites .sites-tiles:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: scale(1.02) translateZ(0);
}

.streamed_meta .meta-sites .sites-tiles span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.streamed_meta .meta-sites .sites-tiles img {
    height: 15px;
    width: 15px;
    object-fit: cover;
    border-radius: 10px;

    transform: translateZ(0);
}

/* Shimmered text */
.shimmered-text {
    color: #9f9f9f;
    margin-bottom: 10px;
    cursor: pointer;
    user-select: none;

    /* GPU */
    will-change: color;
    transform: translateZ(0);
    transition: color 0.15s ease;
}

.shimmered-text:hover {
    color: #9f9f9fb6;
}

.tiny-loader {
    display: inline-block;
    width: 50px;
    height: 50px;
    position: relative;
    top: -50px;
}

.tiny-loader svg {
    width: 100%;
    height: 100%;
    animation: rotate-svg 2s linear infinite;
    transform-origin: center center;
}

.tiny-loader-circle {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
}

.circle-1 {
    stroke-dasharray: 251.3274;
    /* 2 * π * 40 */
    stroke-dashoffset: 251.3274;
    animation: dash-circle1 1.5s cubic-bezier(0.66, 0, 0.34, 1) infinite alternate;
}

.circle-2 {
    stroke-dasharray: 188.4956;
    /* 2 * π * 30 */
    stroke-dashoffset: 0;
    animation: dash-circle2 1.5s cubic-bezier(0.66, 0, 0.34, 1) infinite alternate;
}

@keyframes rotate-svg {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash-circle1 {
    0% {
        stroke-dashoffset: 251.3274;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes dash-circle2 {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 188.4956;
    }
}

.window-loaders {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 55px;
    z-index: 99;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: var(--highlight-background);
}

.suparva-select-wrapper {
    position: relative;
    width: 140px;
}

/* ===========================
   Standard Select CSS (Preserved)
   =========================== */
.suparva-select,
.suparva-select-like {
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: all 0.2s ease;
    will-change: background-color, transform;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.suparva-select:after {
    content: '▼';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.8rem;
    color: var(--placeholder-color);
    transition: transform 0.3s ease;
    /* Animate arrow rotation */
}

.suparva-select.open {
    border-color: var(--highlight-background);
    background-color: var(--secondary-hover-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.suparva-select.open:after {
    transform: translateY(-50%) rotate(180deg);
}

/* ===========================
   Dropdown Options
   =========================== */
.suparva-select-options {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    background-color: var(--secondary-color);
    /* Glass effect for container */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-height: 400px;
    overflow-y: auto;

    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;

    backface-visibility: hidden;
    will-change: transform, opacity;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease;
    z-index: 1000;
}

.suparva-select.open+.suparva-select-options {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ===========================
   Option Items
   =========================== */
.suparva-option {
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    color: var(--text-color);
    transition: background-color 0.2s ease;
    will-change: background-color;
    border-left: 3px solid transparent;
    /* Space for indicator */
}

.suparva-option:hover {
    background-color: var(--highlight-background);
}

.suparva-option-group-label {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.4rem 0.6rem 0.2rem;
    color: var(--placeholder-color);
    background-color: var(--secondary-color);
    border-top: 1px solid var(--border-color);
}

.suparva-option-group-label:first-child {
    border-top: none;
}

/* ===========================
   FIXED PREMIUM / VIP STYLES
   =========================== */

/* 1. Safe Text Visibility & Gold Color */
.suparva-option.prm,
.suparva-option.vip {
    position: relative;
    font-weight: 800;
    /* Thicker text looks more expensive */

    /* We define the colors here, animation changes them */
    color: #FFD700;
    /* Bright Gold */
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    /* Glow */

    /* Soft golden background to distinguish the row */
    background-color: rgba(255, 215, 0, 0.05);

    /* Animation: Cycle text color & shadow instead of masking */
}

/* 2. The Crown Icon */
.suparva-option.prm::after,
.suparva-option.vip::after {
    content: '👑';
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
}

/* 3. Hover Effect for VIP (Gold Sidebar) */
.suparva-option.prm:hover,
.suparva-option.vip:hover {
    background-color: rgba(255, 215, 0, 0.15);
    /* More visible gold bg */
    border-left-color: #FFD700;
    /* Solid Gold Bar on left */
}

/* 4. DISABLED STATE (Stops Animation) */
.suparva-option.prm[disabled],
.suparva-option.vip[disabled],
.suparva-option.prm.disabled,
.suparva-option.vip.disabled {
    cursor: not-allowed;
    animation: none;
    /* Stops the color cycling */

    /* Static Gold Color */
    color: #C5A000;
    background-color: transparent;
    opacity: 0.6;
    border-left-color: transparent;

    /* Remove shadow */
    text-shadow: none;
    filter: grayscale(0.8);
}

/* ===========================
   ANIMATIONS
   =========================== */

/* This cycles the text color from Dark Gold -> Bright Yellow -> Dark Gold
   It also pulses the text-shadow to make it look like it's glowing. 
   This is 100% safe and won't hide text. */
@keyframes luxuriousShine {
    0% {
        color: #B8860B;
        /* Dark Goldenrod */
        text-shadow: 0 0 2px rgba(184, 134, 11, 0.1);
    }

    50% {
        color: #FFD700;
        /* Bright Gold */
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
        /* Glow */
    }

    100% {
        color: #B8860B;
        /* Dark Goldenrod */
        text-shadow: 0 0 2px rgba(184, 134, 11, 0.1);
    }
}

/* ===========================
   Input Field
   =========================== */
.suparva-input {
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    min-width: 200px;
    appearance: none;

    /* Only GPU-friendly transitions */
    transition: background-color 0.2s ease, transform 0.2s ease;
    will-change: background-color, transform;
}

.suparva-input::placeholder {
    color: var(--placeholder-color);
    opacity: 0.6;
}

.suparva-input:hover {
    background-color: var(--secondary-hover-color);
    transform: translateY(-1px);
}

.suparva-input:focus {
    background-color: var(--highlight-background);
    transform: scale(1.02);
    border-color: var(--text-color);
}

.suparva-input:disabled {
    background-color: var(--disabled-color);
    cursor: not-allowed;
    opacity: 0.6;
}


.memory-con {
    width: 100%;
    height: 100%;
    padding: 5px;
}

.memory-con textarea {
    width: 100%;
    max-height: 60px;
    resize: none;
    border-radius: 12px;
    background-color: var(--light-dark-background);
    border-color: #ffffff0f;
    box-shadow: none;
    color: var(--text-color);
    padding: 10px;
    overflow: auto;
    margin-bottom: 10px;
}

.mini-window-loader {
    height: calc(100% - 54px);
}

.settings-con {
    width: 100%;
    height: 100%;
    padding: 5px;
}

.settings-con .setting-item {
    width: 100%;
    position: relative;
    padding: 5px;
    font-size: 14px !important;
    margin-bottom: 10px;
    border-radius: 6px;
    background-color: var(--highlight-background);
    border-color: #cccccc8f;
    box-shadow: none;
    color: var(--text-color);
    padding: 10px;
    border: 0;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settings-sections h2 {
    font-size: 20px;
}

.deletion-chat-hit {
    position: absolute !important;
    right: -13px !important;
    background: #db7d5a !important;
    z-index: 9 !important;
    height: 100% !important;
    width: 50px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    /*box-shadow: -8px 0 12px var(--nav-bar-color) !important;*/
    color: var(--text-color) !important;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    /* prevents accidental clicks when hidden */
}

.deletion-chat-hit.show {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}


.model-selector {
    top: -45px;
    left: 1%;
    width: 200px;
}

.live-open {
    top: -85px !important;
    left: 25%;
    width: 200px;
}


@media screen and (max-width: 770px) {
    .model-selector {
        top: -42px;
    }

    .live-open {
        top: -82px !important;
    }

    .model-selector .suparva-select.icon-only {
        overflow: hidden;
        position: relative;
    }

}

.model-selector.disabled {
    pointer-events: none;
    opacity: 0.6;
}

.model-selector .suparva-option.disabled {
    pointer-events: none;
    opacity: 0.6;
}


/* Icon-only dropdown styles */
.model-selector .suparva-select.icon-only {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Remove the default arrow for icon-only dropdowns */
.model-selector .suparva-select.icon-only:after {
    display: none;
}

/* Style the icon */
.model-selector .suparva-select.icon-only .material-icons {
    font-size: 20px;
    color: var(--text-color);
    transition: color 0.3s ease;
}

/* Icon color on hover/open */
.model-selector .suparva-select.icon-only:hover .material-icons,
.model-selector .suparva-select.icon-only.open .material-icons {
    color: var(--highlight-background);
}

/* Adjust dropdown positioning since trigger is now smaller */
.model-selector .suparva-select-options {
    left: 0;
    min-width: 230px;
}

/* ── Model option layout ─────────────────────────────── */
.model-selector .suparva-option {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: 6px;
}

.model-selector .suparva-option:hover:not(.disabled) {
    background: var(--highlight-background, rgba(94, 94, 185, 0.15));
}

.model-option-name {
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.model-option-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Reasoning / capability badge */
.model-badge {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.model-badge.reasoning {
    background: rgba(94, 94, 185, 0.2);
    color: #a89fec;
}

/* Small contextual tags (fast / multimodal / etc.) */
.model-tag {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-color, #bbb);
    opacity: 0.75;
}

/* Pro-tier model accent */
.model-selector .suparva-option.pro-model .model-option-name {
    color: #7ec8e3;
}

.model-selector .suparva-option.pro-model::after {
    content: 'PRO';
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #7ec8e3;
    margin-left: auto;
    align-self: flex-start;
}

/* VIP / Premium model accent (already handled by .vip) */
.model-selector .suparva-option.vip .model-option-name {
    background: linear-gradient(90deg, #f5c842, #e89b3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}



#sylvie-think-toggler {
    display: none;
}

.thought-panel {
    margin-left: 3px !important;
    margin-top: 4px !important;
    margin-bottom: 10px !important;
    padding-left: 8px !important;
    border-left: 1px solid !important;
    border-radius: 0px !important;
    overflow: unset;
    max-height: unset;
}

#fatal-error-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999999;
    background-color: rgb(14 13 13);
    color: #fff;
    display: none;
}

#fatal-error-overlay #fatal-error-message {
    padding: 10px;
    margin-top: 10px;
}

#fatal-error-overlay img {
    width: 150px;
    height: 150px;
    mix-blend-mode: lighten;
    border-radius: 50%;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: #007bff solid 1px;
}

.message-content .text {
    white-space: pre-wrap;
}

.secondary-loader {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent, transparent 40%, #007bff);
    animation: glow 2s linear infinite;
}

@keyframes glow {
    0% {
        transform: rotate(0deg);
        filter: hue-rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        filter: hue-rotate(360deg);
    }
}

.ai-loader svg path.stick {
    transform: translate(0);
    animation: stick 2s ease infinite;
    /* Change wand color */
}

.ai-loader svg path.star-1 {
    fill: #ff4500;
    /* OrangeRed color */
    animation: sparkles 2s ease infinite, scaleStars 2s ease infinite,
        colorChange 2s ease infinite;
    animation-delay: 150ms;
}

.ai-loader svg path.star-2 {
    fill: #00ff00;
    /* Lime color */
    animation: sparkles 2s ease infinite, scaleStars 2s ease infinite,
        colorChange 2s ease infinite;
}

.board {
    animation: bounce 2s ease infinite;
}

@keyframes sparkles {
    0% {
        opacity: 1;
    }

    35% {
        opacity: 1;
    }

    55% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes stick {
    0% {
        transform: translate3d(0, 0, 0) rotate(0);
    }

    25% {
        transform: translate3d(0, 0, 0) rotate(0);
    }

    50% {
        transform: translate3d(3px, -2px, 0) rotate(8deg);
    }

    75% {
        transform: translate3d(0, 0, 0) rotate(0);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0);
    }
}

@keyframes scaleStars {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.9);
    }

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

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

    25% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(-1px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes colorChange {
    0% {
        fill: #ff4500;
        /* OrangeRed */
    }

    25% {
        fill: #ffd700;
        /* Gold */
    }

    50% {
        fill: #00ff00;
        /* Lime */
    }

    75% {
        fill: #1e90ff;
        /* DodgerBlue */
    }

    100% {
        fill: #ff4500;
        /* OrangeRed */
    }
}


.secondary-loader::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: #212121;
    border-radius: 50%;
    z-index: 1000;
}

.secondary-loader::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: linear-gradient(45deg, transparent, transparent 40%, #007bff);
    border-radius: 50%;
    z-index: 1000;
    z-index: 1;
    filter: blur(30px);
}


.image-magic-lab {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background-color: rgb(20, 20, 20);
    color: #fff;
    display: none;
    user-select: none;
    will-change: opacity, transform;
    transform: translateZ(0);
    /* GPU acceleration */
    backface-visibility: hidden;
}

.image-magic-lab .head {
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999999999;
    background-color: rgb(20, 20, 20);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    will-change: transform;
    transform: translateZ(0);
}

.image-magic-lab .head h2 {
    color: #ccc;
}

.image-magic-lab .content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transform: translateZ(0);
}

.image-magic-lab .image-editing-lab {
    display: none;
}

.image-magic-lab .content .image-con {
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-magic-lab .content img {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.image-magic-lab .bottom-options {
    width: 100%;
    height: 60px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(20, 20, 20);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    gap: 9px;
    will-change: transform;
    transform: translateZ(0);
}

.image-magic-lab .bottom-options .option {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-magic-lab .bottom-options .option button {
    width: 110px;
    border-radius: 50px;
    padding: 8px;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: #007bff dashed 1px;
    color: #ccc;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.image-magic-lab .bottom-options .option button:active {
    background-color: rgba(12, 121, 238, 0.37);
    color: #fff;
    transform: scale(0.95);
    /* GPU-friendly feedback */
}

.image-magic-lab #re-imagine-opt-con {
    display: none;
    background-color: rgb(14 13 13);
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.image-magic-lab .bottom-reimagine,
.image-magic-lab .bottom-reimagine-extra {
    width: 50%;
    background-color: rgb(20, 20, 20);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    gap: 9px;
    will-change: transform;
    transform: translateZ(0);
}

.image-magic-lab .bottom-reimagine {
    height: 80px;
    position: fixed;
    bottom: 10px;
    left: 25%;
}

.image-magic-lab .bottom-reimagine-extra {
    height: 50px;
    position: fixed;
    bottom: 65px;
    left: 25%;
}

.image-magic-lab .bottom-reimagine .imagine-opt {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-magic-lab .re-imagine-it,
.image-magic-lab .ai-undo,
.image-magic-lab .ai-redo,
.image-magic-lab .re-imagine-close {
    width: auto;
    border-radius: 50px;
    padding: 8px;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: #007bff dashed 1px;
    position: absolute;
    bottom: 4px;
    right: 4px;
    color: #ccc;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.image-magic-lab input {
    width: calc(100% - 90px);
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 40px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 8px;
    background-color: transparent;
    font-size: 16px;
    border: none;
    color: #ccc;
    transition: opacity 0.3s ease-in-out;
    will-change: opacity;
}

.image-magic-lab .img-labs-loader {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999999;
    background-color: rgb(14 13 13);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    will-change: opacity;
    transform: translateZ(0);
}

@media screen and (max-width: 768px) {

    .image-magic-lab .bottom-reimagine,
    .image-magic-lab .bottom-reimagine-extra {
        width: 100%;
        left: 0;
    }
}

.image-magic-lab .a1-loader-c0n {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999999;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(17, 25, 40, 0.75);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    will-change: opacity, transform;
    transform: translateZ(0);
}



.img-lab-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999999;
    background-color: rgb(14 13 13);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.img-labs-menu-tiles {
    width: 250px;
    height: 300px;
    background-color: #202020;
    margin: 30px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 18px;
    border: #ccc solid 1px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
    transform: perspective(1000px) translateZ(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform, box-shadow;
    backface-visibility: hidden;
}

.img-labs-menu-tiles h3,
.img-labs-menu-tiles span,
.img-labs-menu-tiles p,
.img-labs-menu-tiles small,
.img-labs-menu-tiles h2,
.img-labs-menu-tiles h1 {
    color: #fff;
}

.img-labs-menu-tiles:hover {
    transform: translateY(-15px) scale(1.03) translateZ(0);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.4);
}

.img-labs-menu-tiles .head-name {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #ccc;
    border: 2px solid #ccc;
    border-radius: 30px;
    flex-shrink: 0;
    will-change: transform;
    transform: translateZ(0);
}

.img-labs-menu-tiles .content {
    width: 90%;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #ccc;
    margin-top: 10px;
}

.img-labs-menu-tiles .action {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 992px) {
    .img-lab-menu {
        flex-direction: column;
        overflow-y: auto;
        padding: 40px 0;
        justify-content: unset;
        margin-top: 15px;
    }

    .img-labs-menu-tiles {
        width: 90%;
        max-width: 400px;
        height: auto;
        min-height: 280px;
        margin: 20px 0;
    }

    .img-labs-menu-tiles:hover {
        transform: translateY(-5px) scale(1.01) translateZ(0);
    }
}

/* Loader */
.image-loading-ldr {
    width: 80px;
    height: 80px;
    position: relative;
    background: transparent;
    border-radius: 24px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid #ccc;
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.image-loading-ldr:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45px;
    height: 45px;
    transform: rotate(45deg) translate(28%, 35%) translateZ(0);
    background: var(--loader-primary);
    box-shadow:
        36px -38px 0 6px var(--loader-accent),
        0 0 20px rgba(59, 130, 246, 0.3);
    animation: slide 2.5s infinite ease-in-out alternate;
    border-radius: 8px;
    filter: blur(0.5px);
    will-change: transform;
    backface-visibility: hidden;
}

.image-loading-ldr:after {
    content: "";
    position: absolute;
    left: 12px;
    top: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--loader-secondary);
    transform: rotate(0deg) translateZ(0);
    transform-origin: 38px 155px;
    animation: rotate 2.5s infinite ease-in-out;
    box-shadow:
        0 0 15px rgba(139, 92, 246, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
    will-change: transform;
    backface-visibility: hidden;
}

/* GPU-safe animations */
@keyframes slide {
    0% {
        transform: rotate(45deg) translate(28%, 35%) translateZ(0);
    }

    100% {
        transform: rotate(45deg) translate(60%, -10%) translateZ(0);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg) translateZ(0);
    }

    100% {
        transform: rotate(360deg) translateZ(0);
    }
}

/* Compact version */
.image-loading-ldr.compact {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.image-loading-ldr.compact:before {
    width: 35px;
    height: 35px;
    box-shadow:
        28px -30px 0 4px var(--loader-accent),
        0 0 15px rgba(59, 130, 246, 0.3);
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.image-loading-ldr.compact:after {
    width: 16px;
    height: 16px;
    left: 10px;
    top: 10px;
    transform-origin: 30px 125px;
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Large version */
.image-loading-ldr.large {
    width: 100px;
    height: 100px;
    border-radius: 32px;
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.image-loading-ldr.large:before {
    width: 55px;
    height: 55px;
    box-shadow:
        44px -46px 0 8px var(--loader-accent),
        0 0 25px rgba(59, 130, 246, 0.4);
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.image-loading-ldr.large:after {
    width: 24px;
    height: 24px;
    left: 15px;
    top: 15px;
    transform-origin: 45px 180px;
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Enhanced animations */
@keyframes slide {

    0%,
    100% {
        bottom: -40px;
        transform: rotate(45deg) translate(28%, 35%) scale(0.9) translateZ(0);
        opacity: 0.8;
    }

    25%,
    75% {
        bottom: -2px;
        transform: rotate(45deg) translate(28%, 35%) scale(1) translateZ(0);
        opacity: 1;
    }

    20%,
    80% {
        bottom: 2px;
        transform: rotate(45deg) translate(28%, 35%) scale(1.05) translateZ(0);
        opacity: 1;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(-20deg) scale(0.9) translateZ(0);
        opacity: 0.8;
    }

    25%,
    75% {
        transform: rotate(0deg) scale(1) translateZ(0);
        opacity: 1;
    }

    100% {
        transform: rotate(30deg) scale(0.9) translateZ(0);
        opacity: 0.8;
    }
}

/* Pulse animation for container */
@keyframes pulse {

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

    50% {
        transform: scale(1.02) translateZ(0);
        filter: brightness(1.1);
    }
}


.image-magic-lab .gen-imgs-screen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
    background-color: rgb(14 13 13);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
}

.image-magic-lab .gen-imgs-screen .image-con {
    width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-magic-lab .gen-imgs-screen img {
    width: 100%;
    object-fit: cover;
    max-height: 600px;
}

.image-magic-lab .gen-imgs-screen .img-gen-fields {
    position: fixed;
    bottom: 0;
    width: 50%;
    left: 25%;
    height: 110px;
    background-color: rgb(31, 31, 31);
    color: #fff;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    transform-style: preserve-3d;
}

.image-magic-lab .gen-imgs-screen .img-gen-fields::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 90deg at 40% -25%,
            #008cff,
            #036df7,
            #0750ee,
            #0a2be6,
            #0d56de,
            #106cd6,
            #1274cf,
            #15c7b8,
            #cf1261,
            #d61039,
            #de0d0d,
            #07eecf,
            #f79d03,
            #ffd700,
            #00d9ff,
            #ffd700);
    filter: blur(10px);
    transform: translate3d(-3px, -3px, -1px);
    border-radius: inherit;
    pointer-events: none;
    animation: shiftColors 4s linear infinite;
}

@keyframes shiftColors {
    0% {
        filter: hue-rotate(0deg) blur(10px);
    }

    100% {
        filter: hue-rotate(360deg) blur(10px);
    }
}

@media screen and (max-width: 1000px) {
    .image-magic-lab .gen-imgs-screen .img-gen-fields {
        width: 70%;
        left: 15%;
    }
}

@media screen and (max-width: 800px) {
    .image-magic-lab .gen-imgs-screen .img-gen-fields {
        width: 90%;
        left: 5%;
    }
}

@media screen and (max-width: 720px) {
    .image-magic-lab .gen-imgs-screen .img-gen-fields {
        width: 100%;
        left: 0;
    }
}

.image-magic-lab .gen-imgs-screen .img-gen-fields textarea {
    width: calc(100% - 56px);
    height: 110px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    background-color: transparent;
    border: none;
    color: #fff;
    padding: 8px;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    padding: 12px;
    padding-top: 0;
    resize: none;
}

.image-magic-lab .gen-imgs-screen .img-gen-fields .img-gen-prcd,
.image-magic-lab .gen-imgs-screen .img-gen-fields .img-gen-sv {
    position: absolute;
    width: 40px;
    height: 40px;
    padding: 6px !important;
    border-radius: 50%;
    background-color: #f0eeee1e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    bottom: 26px;
    right: 6px;
    border: #007bff dashed 1px;
}

.image-magic-lab .gen-imgs-screen .img-gen-fields .img-gen-prcd span,
.image-magic-lab .gen-imgs-screen .img-gen-fields .img-gen-sv span {
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ccc;
}

.image-magic-lab .gen-imgs-screen .img-gen-fields .img-gen-sv {
    bottom: 74px;
    display: none;
}

.pin-inputs {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 20px 0;
    flex-wrap: wrap;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.pin-input {
    width: 60px;
    height: 60px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-color);
    background: var(--primary-color);
    outline: none;
    caret-color: transparent;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0 2px 8px var(--loader-shadow);
    transition:
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
    will-change: transform, box-shadow, background-color, border-color, color;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.pin-input:focus {
    border-color: var(--loader-primary);
    background: var(--loader-primary);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15),
        0 4px 12px var(--loader-shadow);
    transform: scale(1.05) translateZ(0);
}

.pin-input.filled {
    border-color: var(--loader-accent);
    background: var(--loader-accent);
    color: white;
    transform: scale(1.02) translateZ(0);
    box-shadow: 0 4px 16px rgba(34, 211, 238, 0.3);
}

.pin-input.error {
    border-color: #f56565;
    background: rgba(245, 101, 101, 0.1);
    color: #f56565;
}

/* Shake animation for the entire pin inputs container */
.pin-inputs.shake {
    animation: pinShake 0.6s ease-in-out;
    will-change: transform;
}

@keyframes pinShake {

    0%,
    100% {
        transform: translateX(0) translateZ(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-8px) translateZ(0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(8px) translateZ(0);
    }
}

/* Individual input shake */
.pin-input.shake {
    animation: inputShake 0.6s ease-in-out;
    will-change: transform;
}

@keyframes inputShake {

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

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px) scale(1.02) translateZ(0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px) scale(1.02) translateZ(0);
    }
}

/* Responsive design */
@media (max-width: 480px) {
    .pin-input {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .pin-inputs {
        gap: 12px;
    }
}

@media (max-width: 320px) {
    .pin-inputs {
        gap: 8px;
    }

    .pin-input {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
}


.secure-pass {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999999999;
    background-color: var(--secondary-hover-color);
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding: 24px;
    will-change: opacity, transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.toggle-container {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.toggle-input {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.toggle-label {
    cursor: pointer;
    display: block;
    position: relative;
    user-select: none;
}

.toggle-slider {
    display: block;
    width: 60px;
    height: 30px;
    background: var(--secondary-color);
    border: 2px solid var(--border-color);
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 2px 4px var(--loader-shadow),
        0 2px 8px rgba(0, 0, 0, 0.1);
    transition:
        background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        transform 0.3s ease;
    will-change: transform, opacity, box-shadow, background, border-color;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--loader-bg);
    opacity: 0;
    border-radius: inherit;
    transition: opacity 0.4s ease;
    will-change: opacity;
    backface-visibility: hidden;
}

.toggle-handle {
    display: block;
    width: 22px;
    height: 22px;
    background: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 3px;
    z-index: 2;
    box-shadow:
        0 2px 8px var(--loader-shadow),
        0 0 0 0 rgba(96, 165, 250, 0);
    transition:
        transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        background 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
    will-change: transform, box-shadow, background;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.toggle-handle::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--loader-primary);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.8) translateZ(0);
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
    z-index: -1;
}

.toggle-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--subheading-color);
    border-radius: 50%;
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0) translateZ(0);
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Checked state */
.toggle-input:checked+.toggle-label .toggle-slider {
    background: var(--loader-primary);
    border-color: transparent;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        0 0 20px rgba(96, 165, 250, 0.3);
}

.toggle-input:checked+.toggle-label .toggle-slider::before {
    opacity: 1;
}

.toggle-input:checked+.toggle-label .toggle-handle {
    transform: translateX(28px) translateZ(0);
    background: var(--primary-color);
    box-shadow:
        0 2px 12px rgba(96, 165, 250, 0.4),
        0 0 0 3px rgba(96, 165, 250, 0.2);
}

.toggle-input:checked+.toggle-label .toggle-handle::before {
    opacity: 1;
    transform: scale(1) translateZ(0);
}

.toggle-input:checked+.toggle-label .toggle-handle::after {
    transform: translate(-50%, -50%) scale(1) translateZ(0);
    background: var(--loader-accent);
}

/* Hover effects */
.toggle-label:hover .toggle-slider {
    border-color: var(--highlight-background);
    transform: scale(1.02) translateZ(0);
}

.toggle-label:hover .toggle-handle {
    box-shadow:
        0 4px 16px var(--loader-shadow),
        0 0 0 2px rgba(96, 165, 250, 0.1);
}

.toggle-input:checked+.toggle-label:hover .toggle-handle {
    box-shadow:
        0 4px 16px rgba(96, 165, 250, 0.5),
        0 0 0 4px rgba(96, 165, 250, 0.2);
}

/* Focus effects */
.toggle-input:focus+.toggle-label .toggle-slider {
    outline: 2px solid var(--loader-accent);
    outline-offset: 2px;
}

/* Active/pressed state */
.toggle-label:active .toggle-handle {
    transform: scale(0.95) translateZ(0);
}

.toggle-input:checked+.toggle-label:active .toggle-handle {
    transform: translateX(28px) scale(0.95) translateZ(0);
}

/* Disabled state */
.toggle-input:disabled+.toggle-label {
    cursor: not-allowed;
    opacity: 0.6;
}

.toggle-input:disabled+.toggle-label .toggle-slider {
    background: var(--disabled-color);
    border-color: var(--disabled-color);
}

.toggle-input:disabled+.toggle-label .toggle-handle {
    background: var(--placeholder-color);
}

/* Sliding background pulse */
.toggle-slider::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: 18px;
    height: 18px;
    background: var(--loader-secondary);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0) translateZ(0);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55),
        opacity 0.3s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.toggle-input:checked+.toggle-label .toggle-slider::after {
    opacity: 0.3;
    transform: scale(1.2) translateZ(0);
    left: 30px;
}



.secure-pass .head {
    position: fixed;
    top: 11px;
    left: 11px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.secure-pass .head span {
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-color);
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.secure-pass .inner-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    margin-top: 20%;
    flex-direction: column;
    gap: 24px;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.secure-passmanage {
    width: 100%;
    height: 100%;
}

.secure-passmanage .otp-container {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin: 24px 0;
    padding: 0 20px;
}

.secure-passmanage .otp-digit {
    width: 48px;
    height: 56px;
    font-size: 26px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
    border: none;
    border-bottom: 2px solid var(--border-color);
    border-radius: 8px 8px 0 0;
    outline: none;
    background: transparent;
    color: var(--text-color);
    caret-color: var(--text-color);
    position: relative;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
    will-change: transform, border-color, background, color;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.secure-passmanage .otp-digit::placeholder {
    color: var(--placeholder-color);
    opacity: 0.7;
}

.secure-passmanage .otp-digit:hover {
    background: transparent;
    border-bottom-color: var(--subheading-color);
    transform: translateY(-1px) translateZ(0);
}

.secure-passmanage .otp-digit:focus {
    background: transparent;
    border-bottom: 3px solid var(--text-color);
    transform: translateY(-2px) translateZ(0);
    animation: focusPulse 0.3s ease-out;
    will-change: transform;
}

.secure-passmanage .otp-digit:focus::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--text-color);
    border-radius: 0 0 2px 2px;
    opacity: 0.8;
    will-change: opacity;
}

.secure-passmanage .otp-digit.filled {
    background: transparent;
    border-bottom-color: var(--text-color);
    color: var(--text-color);
    animation: fillSuccess 0.2s ease-out;
    will-change: transform, color;
}

.secure-passmanage .otp-digit.error {
    border-bottom-color: #ef4444;
    background: transparent;
    animation: shake 0.5s ease-in-out;
    will-change: transform;
}

/* GPU-optimized Animations */
@keyframes focusPulse {
    0% {
        transform: translateY(0) scale(1) translateZ(0);
    }

    50% {
        transform: translateY(-2px) scale(1.02) translateZ(0);
    }

    100% {
        transform: translateY(-2px) scale(1) translateZ(0);
    }
}

@keyframes fillSuccess {
    0% {
        transform: scale(1) translateZ(0);
    }

    50% {
        transform: scale(1.05) translateZ(0);
    }

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

@keyframes shake {

    0%,
    100% {
        transform: translateX(0) translateZ(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-3px) translateZ(0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(3px) translateZ(0);
    }
}

/* Hide number input spinners */
.secure-passmanage .otp-digit::-webkit-outer-spin-button,
.secure-passmanage .otp-digit::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.secure-passmanage .otp-digit[type=number] {
    -moz-appearance: textfield;
}

/* Responsive design */
@media (max-width: 480px) {
    .secure-passmanage .otp-container {
        gap: 12px;
        margin: 20px 0;
        padding: 0 16px;
    }

    .secure-passmanage .otp-digit {
        width: 42px;
        height: 50px;
        font-size: 22px;
    }
}

.secure-passmanage .otp-container-glb {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin: 24px 0;
    padding: 0 20px;
}

.secure-passmanage .otp-inputs {
    width: 48px;
    height: 56px;
    font-size: 26px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
    border: none;
    border-bottom: 2px solid var(--border-color);
    border-radius: 8px 8px 0 0;
    outline: none;
    background: transparent;
    color: var(--text-color);
    caret-color: var(--text-color);
    position: relative;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s ease,
        color 0.3s ease;
    will-change: transform, border-color, color;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.secure-passmanage .otp-inputs::placeholder {
    color: var(--placeholder-color);
    opacity: 0.7;
}

.secure-passmanage .otp-inputs:hover {
    background: transparent;
    border-bottom-color: var(--subheading-color);
    transform: translateY(-1px) translateZ(0);
    will-change: transform, border-color;
}

.secure-passmanage .otp-inputs:focus {
    background: transparent;
    border-bottom: 3px solid var(--text-color);
    transform: translateY(-2px) translateZ(0);
    animation: focusPulse 0.3s ease-out;
    will-change: transform, border-color;
}

.secure-passmanage .otp-inputs:focus::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--text-color);
    border-radius: 0 0 2px 2px;
    opacity: 0.8;
    will-change: opacity;
}

.secure-passmanage .otp-inputs.filled {
    background: transparent;
    border-bottom-color: var(--text-color);
    color: var(--text-color);
    animation: fillSuccess 0.2s ease-out;
    will-change: transform, color;
}

.secure-passmanage .otp-inputs.error {
    border-bottom-color: #ef4444;
    background: transparent;
    animation: shake 0.5s ease-in-out;
    will-change: transform;
}

/* GPU-optimized animations */
@keyframes focusPulse {
    0% {
        transform: translateY(0) scale(1) translateZ(0);
    }

    50% {
        transform: translateY(-2px) scale(1.02) translateZ(0);
    }

    100% {
        transform: translateY(-2px) scale(1) translateZ(0);
    }
}

@keyframes fillSuccess {
    0% {
        transform: scale(1) translateZ(0);
    }

    50% {
        transform: scale(1.05) translateZ(0);
    }

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

@keyframes shake {

    0%,
    100% {
        transform: translateX(0) translateZ(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-3px) translateZ(0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(3px) translateZ(0);
    }
}

/* Hide number input spinners */
.secure-passmanage .otp-inputs::-webkit-outer-spin-button,
.secure-passmanage .otp-inputs::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.secure-passmanage .otp-inputs[type=number] {
    -moz-appearance: textfield;
}

/* Responsive design */
@media (max-width: 480px) {
    .secure-passmanage .otp-container {
        gap: 12px;
        margin: 20px 0;
        padding: 0 16px;
    }

    .secure-passmanage .otp-inputs {
        width: 42px;
        height: 50px;
        font-size: 22px;
    }
}

.secure-passmanage .pass-manage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.secure-passmanage .manage-spins {
    width: 100%;
    height: 100%;
    display: block;
}

.secure-passmanage .manage-spins .spin-criters {
    width: 100%;
    height: 60px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, border-color 0.3s ease;
    will-change: transform, border-color;
    transform: translateZ(0);
    backface-visibility: hidden;
    position: relative;
    margin-bottom: 10px;
}

.secure-passmanage .update-secpin {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#attach-file-button {
    position: relative;
    overflow: visible;
    user-select: none;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

/* Icon rotation animation */
#attach-file-button .tools-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#attach-file-button.open .tools-icon {
    transform: rotate(45deg);
    /* Rotates nicely when open */
}

/* The Popup Menu */
#attach-file-button .attach-file-selections {
    position: absolute;
    bottom: 50px;
    /* Slightly higher so it doesn't overlap the button */
    left: -10px;
    min-width: max-content;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--border-color, #e0e0e0);
    background-color: var(--disabled-color, #ffffff);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    /* Modern floating shadow */
    display: flex;
    gap: 10px;
    /* Responsive spacing */


    /* Animation setup */
    opacity: 0;
    transform: scale(0.9) translateY(10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, opacity;
    z-index: 999;
}

#attach-file-button .attach-file-selections {
    position: absolute;
    bottom: 100%;
    /* stick directly above button */
    left: 0;
    margin-bottom: 10px;
    /* spacing */
}

#attach-file-button .attach-file-selections.show {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* Individual Menu Buttons */
#attach-file-button .attach-file-selections .file-attach-menus {
    width: 85px;
    height: 85px;
    border-radius: 12px;
    border: 1px solid transparent;
    background-color: rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    /* Stack icon and text vertically */
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

#attach-file-button .attach-file-selections .file-attach-menus:hover {
    background-color: rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    /* Slight lift on hover */
}

#attach-file-button .attach-file-selections .file-attach-menus span {
    font-size: 28px;
    pointer-events: none;
    color: #444;
    /* Adjust based on your theme */
}

#attach-file-button .attach-file-selections .file-attach-menus p {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    color: #444;
    /* Adjust based on your theme */
}

/* ── Claude-style "+" menu: a clean vertical list of labelled rows ──────────
   Overrides the legacy 85×85 tile layout above. */
#attach-file-button .attach-file-selections.plus-menu {
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    min-width: 232px;
    left: 0;
    border-radius: 14px;
    background-color: var(--secondary-color, #fff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

#attach-file-button .attach-file-selections.plus-menu .plus-menu-item {
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    background: transparent;
    border: none;
    text-align: left;
}

#attach-file-button .attach-file-selections.plus-menu .plus-menu-item:hover {
    background-color: var(--hover-bg, rgba(0, 0, 0, 0.06));
    transform: none;
}

#attach-file-button .attach-file-selections.plus-menu .plus-menu-item span {
    font-size: 20px;
    color: var(--text-color, #333);
    opacity: 0.85;
}

#attach-file-button .attach-file-selections.plus-menu .plus-menu-item p {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-color, #333);
    white-space: nowrap;
}

#attach-file-button .attach-file-selections.plus-menu .plus-menu-item[hidden] {
    display: none !important;
}

#attach-file-button .attach-file-selections.plus-menu .plus-menu-item.cap-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Dimmed-but-clickable: the row still receives the click so it can explain WHY
   it is unavailable (e.g. the character can't search the web). */
#attach-file-button .attach-file-selections.plus-menu .plus-menu-item.pm-disabled {
    opacity: 0.4;
}

#attach-file-button .attach-file-selections.plus-menu .plus-menu-sep {
    height: 1px;
    margin: 5px 8px;
    background: var(--border-color, rgba(0, 0, 0, 0.08));
}




.suggestions {
    width: 100%;
    max-height: 350px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    user-select: none;
}

.suggestions-container {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.suggestions-row {
    display: flex;
    gap: 16px;
    width: 100%;
}

.suggestions-menu {
    flex: 1;
    min-height: 70px;
    padding: 15px 19px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background-color: var(--disabled-color);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.suggestions-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transition: left 0.5s ease;
}

.suggestions-menu:hover::before {
    left: 100%;
}

.suggestions-menu:hover {
    transform: translateY(-4px);
    border-color: var(--secondary-hover-color);
    background-color: var(--secondary-color);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.suggestions-menu:active {
    transform: translateY(-2px);
    transition: transform 0.1s ease;
}

.suggestion-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-color);
    transition: color 0.3s ease;
    flex: 1;
}

.suggestion-icon {
    font-size: 18px;
    color: var(--subheading-color);
    transition: all 0.3s ease;
    opacity: 0.7;
    margin-left: 12px;
}

.suggestions-menu:hover .suggestion-icon {
    transform: translateX(4px);
    opacity: 1;
    color: var(--text-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .suggestions {
        height: auto;
        max-height: none;
        padding: 16px;
    }

    .suggestions-container {
        max-width: 100%;
    }

    .suggestions-row {
        flex-direction: column;
        gap: 12px;
    }

    .suggestions-menu {
        min-height: 50px;
        padding: 11px 15px;
        border-radius: 10px;
    }

    .suggestion-text {
        font-size: 15px;
    }

    .suggestion-icon {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .suggestions {
        padding: 12px;
    }

    .suggestions-row {
        gap: 10px;
    }

    .suggestions-menu {
        min-height: 60px;
        padding: 14px 18px;
        border-radius: 10px;
    }

    .suggestion-text {
        font-size: 14px;
    }

    .suggestion-icon {
        font-size: 14px;
        margin-left: 8px;
    }
}

/* Enhanced hover effects for larger screens */
@media (min-width: 769px) {
    .suggestions-menu:hover {
        transform: translateY(-6px) scale(1.02);
    }

    .suggestions-menu:hover .suggestion-text {
        background: linear-gradient(45deg, var(--text-color), var(--subheading-color));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .suggestions-container {
        margin-top: 120px;
    }
}

/* Focus states for accessibility */
.suggestions-menu:focus {
    outline: 2px solid var(--secondary-hover-color);
    outline-offset: 2px;
}

.suggestions-menu:focus:not(:focus-visible) {
    outline: none;
}

.manage-google-connect-win {
    width: 100%;
    height: 100%;
}

.manage-google-connect-win .connection-with-google-status {
    width: 97%;
    margin-left: 1.5%;
    margin-top: 10px;
    height: 130px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 12px;
    padding-left: 14px;
}

.manage-google-connect-win .g-connect-notice {
    width: 97%;
    margin-left: 1.5%;
    height: 100%;
    padding: 12px;
}

.scene {
    position: relative;
    inset: 0;
    display: grid;
    place-items: center;
    isolation: isolate;
}

/* Main orb container with subtle breathing */
.orb {
    position: relative;
    width: var(--size);
    height: var(--size);
    border-radius: var(--react-border);
    transform: translateZ(0) scale(var(--react-scale));
    transition: border-radius .3s ease;
    filter: saturate(var(--react-sat)) hue-rotate(var(--react-hue));
    animation: breath var(--breath) ease-in-out infinite;
    will-change: transform, filter, border-radius;
}

/* Gradient core: calm, layered gradients + swirl */
.orb__core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(120% 120% at 30% 30%, rgba(var(--white), .12), rgba(255, 255, 255, 0) 50%),
        radial-gradient(80% 80% at 70% 70%, rgba(var(--violet), .25), rgba(0, 0, 0, 0) 70%),
        radial-gradient(70% 70% at 40% 65%, rgba(var(--orange), .25), rgba(0, 0, 0, 0) 70%),
        conic-gradient(from 0deg,
            rgba(var(--orange), .5),
            rgba(var(--violet), .45),
            rgba(var(--white), .35),
            rgba(var(--orange), .5));
    box-shadow:
        inset 0 0 30px rgba(255, 255, 255, .06),
        inset 0 0 60px rgba(0, 0, 0, .25);
    overflow: hidden;
    /* Gentle swirl + parallax drift */
    animation:
        swirl calc(var(--spin) * 1.2) linear infinite,
        drift 22s ease-in-out infinite alternate;
    transform-origin: 50% 50%;
}

/* Soft ambient glow that reacts to sound */
.orb__glow {
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient(70% 70% at 50% 40%,
            rgba(255, 255, 255, calc(.20 + .30 * var(--react-glow))),
            rgba(255, 255, 255, 0));
    filter:
        blur(18px) drop-shadow(0 0 calc(8px + 14px * var(--react-halo)) rgba(255, 140, 40, .20)) drop-shadow(0 0 calc(12px + 16px * var(--react-halo)) rgba(110, 100, 255, .18));
    pointer-events: none;
    transition: filter .25s ease, opacity .25s ease;
}

/* Thin luminous rim with rotating glints */
.orb__rim {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 65%) content-box,
        conic-gradient(from 0deg,
            rgba(255, 255, 255, .0) 0%,
            rgba(255, 255, 255, .35) 6%,
            rgba(255, 255, 255, .0) 10%,
            rgba(255, 255, 255, .0) 40%,
            rgba(255, 255, 255, .25) 46%,
            rgba(255, 255, 255, .0) 52%,
            rgba(255, 255, 255, .0) 100%);
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent 62%, black 64%);
    mask: radial-gradient(circle at 50% 50%, transparent 62%, black 64%);
    animation: rimRotate var(--rim-rotate) linear infinite;
    opacity: .75;
}

/* Very subtle inner grain for depth */
.orb__grain {
    position: absolute;
    inset: -50%;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .02) 0 2px, transparent 3px),
        radial-gradient(circle at 80% 70%, rgba(0, 0, 0, .03) 0 2px, transparent 3px);
    background-size: 120px 120px, 160px 160px;
    mix-blend-mode: soft-light;
    filter: blur(0.3px) contrast(1.03);
    animation: grainDrift 40s linear infinite;
    pointer-events: none;
}

/* Optional legacy rings, refined */
.rings {
    position: absolute;
    width: calc(var(--size) * 1.05);
    height: calc(var(--size) * 1.05);
    display: grid;
    place-items: center;
    pointer-events: none;
}

.ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--react-border);
    mix-blend-mode: screen;
    animation: ringRotate var(--spin) linear infinite;
    filter: blur(0.2px);
    transition: border-radius .3s ease;
}

.ring-1 {
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 64%, rgba(var(--orange), .28) 69%, rgba(var(--orange), .0) 72%);
    animation-duration: calc(var(--spin) * .8);
}

.ring-2 {
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 64%, rgba(var(--violet), .24) 70%, rgba(var(--violet), .0) 73%);
    animation-direction: reverse;
}

.ring-3 {
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 66%, rgba(var(--white), .20) 70%, rgba(var(--white), .0) 73%);
    animation-duration: calc(var(--spin) * 1.15);
}

/* Keyframes */
@keyframes breath {

    0%,
    100% {
        transform: scale(calc(var(--react-scale) * 1.000));
    }

    50% {
        transform: scale(calc(var(--react-scale) * 1.015));
    }
}

@keyframes swirl {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(var(--react-rotate));
    }
}

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

    100% {
        background-position: 4% 6%;
    }
}

@keyframes rimRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes ringRotate {
    0% {
        transform: rotate(0deg) scale(1);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes grainDrift {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-5%, -6%);
    }
}

/* Accessibility: if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {

    .orb,
    .orb__core,
    .orb__glow,
    .orb__rim,
    .rings .ring {
        animation: none !important;
    }
}


.voice-assist {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 400px;
    height: 480px;
    border-top-left-radius: 20px;
    border: 1px solid var(--border-color);
    background-color: var(--disabled-color);
    z-index: 99999999;

    /* GPU-friendly animation setup */
    transform: translateY(100%) translateZ(0);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.voice-assist.open {
    transform: translateY(0) translateZ(0);
    opacity: 1;
}

.voice-assist .head {
    position: relative;
    top: 11px;
    cursor: pointer;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 20px;
    padding-left: 16px;
    padding-bottom: 10px;
    will-change: transform;
    transform: translateZ(0);
}

.voice-assist .head span {
    position: absolute;
    right: 10px;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.voice-assist .head h2 {
    font-size: 21px;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.voice-assist .content-view {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Responsive adjustments */
@media screen and (max-width: 700px) {
    .voice-assist {
        width: 100%;
        height: 100%;
        border-top-left-radius: 0;
    }
}

.header-title-con {
    margin-top: 22%;
    will-change: transform;
    transform: translateZ(0);
}

@media screen and (max-width: 800px) {
    .header-title-con {
        margin-top: 30%;
    }
}

.library-window {
    position: fixed;
    background-color: var(--darker-background, #1a1a1a);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4);
    z-index: 9999999;
    user-select: none !important;
    overflow: hidden;

    /* Desktop styles — match data-window sizing */
    width: min(960px, 94vw);
    height: min(680px, 88vh);
    top: 50%;
    left: 50%;

    /* Initial hidden state — identical to data-window */
    display: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96) translateZ(0);
    transform-origin: center center;

    /* Animation matching app-windows.css */
    transition: opacity 0.24s ease, transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Desktop open state */
.library-window.library-window-open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) translateZ(0);
}

.library-window .head {
    width: 100%;
    padding: 0 10px 0 22px;
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    flex-shrink: 0;
}

.library-window .head h3,
.library-window .head p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.library-window .head span {
    width: 36px;
    height: 36px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.14s ease;
}

.library-window .head span:hover {
    background: var(--secondary-color, rgba(255, 255, 255, 0.06));
}

.library-window .content-view {
    width: 100%;
    height: calc(100% - 56px);
    overflow: hidden;
}

.library-window .content-cont {
    width: 100%;
    display: flex;
    height: 100%;
    overflow: hidden;
}

.library-window .content-view .options {
    width: 180px;
    flex-shrink: 0;
    height: 100%;
    border-right: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    padding: 10px 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.library-window .content-view .options .options-l {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    border-radius: 10px;
    transition: background-color 0.14s ease;
    min-width: 0;
}

.library-window .content-view .options .options-l:hover {
    background-color: var(--secondary-color, rgba(255, 255, 255, 0.04));
}

.library-window .content-view .options .options-l.active {
    background-color: var(--accent-color, #3b82f6);
    color: #fff;
}

.library-window .content-view .options .options-l.active span,
.library-window .content-view .options .options-l.active p {
    color: #fff;
}

.library-window .content-view .options .options-l p {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-color);
    margin: 0;
}

.library-window .content-view .options .options-l span {
    font-size: 18px;
    color: var(--subheading-color, #98a2b3);
}

.library-window .lib-contents {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Scroll container only — the inner .lib-grid (ui-polish.css) does the layout. */
.library-window .lib-itms-con {
    display: block;
    width: 100%;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Mobile view */
@media screen and (max-width: 768px) {
    .library-window {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        transform: translateY(100%) translateZ(0) !important;
        transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    }

    .library-window.library-window-open {
        transform: translateY(0) translateZ(0) !important;
    }

    .library-window .head {
        padding: 0 12px 0 18px;
        height: 52px;
    }

    .library-window .content-cont {
        flex-direction: column;
    }

    .library-window .content-view .options {
        width: 100%;
        height: auto;
        flex-shrink: 0;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
        padding: 8px 10px;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .library-window .content-view .options .options-l {
        flex-shrink: 0;
        height: 34px;
        padding: 0 12px;
        border-radius: 8px;
        gap: 6px;
    }

    .library-window .content-view .options .options-l p {
        font-size: 13px;
        white-space: nowrap;
    }

    .library-window .lib-contents {
        width: 100%;
    }
}

.lib-itms-search {
    width: calc(100% - 18px);
    height: 44px;
    background-color: var(--chat-area-background);
    border-radius: 7px;
    margin: 8px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    position: relative;
    display: flex;
    align-items: center;
    display: none;
    z-index: 9;
}

.lib-itms-search input {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    background-color: transparent;
    color: var(--text-color);
    padding: 8px 50px 8px 12px;
    /* Added right padding for icons */
    padding-right: 80px;
    /* Extra space when both icons are visible */
}

.search-icon {
    position: absolute;
    right: 12px;
    color: var(--text-color, #666);
    font-size: 20px;
    pointer-events: none;
    opacity: 0.6;
}

.clear-icon {
    position: absolute;
    right: 40px;
    color: var(--text-color, #666);
    font-size: 18px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    padding: 2px;
    border-radius: 50%;
}

.clear-icon:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.1);
}

/* Hide default search input clear button */
.lib-itms-search input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.library-window .lib-itms-con svg {
    width: 200px;
    height: auto;
}

.library-window .lib-itms-con .lib-images-l {
    width: 100%;
    height: 100%;
    background-color: var(--nav-bar-color);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Internal structure for image + text + buttons */
.lib-images-l .image-container {
    width: 100%;
    /* Square image area */
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.lib-images-l .image-container img {
    width: 100%;
    object-fit: cover;
}

.lib-images-l .image-container svg {
    width: 100%;
    padding: 50px;
}

.lib-images-l .content-area {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.lib-images-l .text-content {
    flex-grow: 1;
    margin-bottom: 10px;
    height: 75px;
    width: 100%;
    padding: 6px;
    background-color: var(--highlight-background);
    border-radius: 12px;
    overflow: hidden;
}

.lib-images-l .text-content p {
    font-size: 14px;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

@supports (line-clamp: 3) {
    .lib-images-l .text-content p {
        line-clamp: 3;
        box-orient: vertical;
    }
}

.lib-images-l .button-area {
    margin-top: 1px;

    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.lib-images-l .button-area .ot-actions {
    margin-top: 5px;

    will-change: transform, opacity;
    transform: translateZ(0);
}

.lib-images-l .button-area .ot-actions .lib-imgs-rmbn {
    background-color: rgb(231, 119, 79);
    will-change: background-color, transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.lib-images-l .button-area .ot-actions .lib-imgs-rmbn:hover {
    background-color: rgb(224, 106, 62);
}

.lib-images-l .button-area button {
    width: 100%;
    outline: none;
    border-radius: 8px;
    border: 1px solid #ffffff81;
    background-color: var(--light-dark-background);
    padding: 2px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;

    /* GPU prep */
    will-change: transform, background-color, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.lib-images-l .button-area button:hover {
    background-color: var(--subheading-color);
}

.lib-images-l .button-area button:active {
    transform: scale(0.99) translateZ(0);
}

.lib-images-l .button-area button span {
    font-size: 18px;

    will-change: transform, opacity;
    transform: translateZ(0);
}


/* Responsive adjustments */
@media (max-width: 480px) {
    .library-window .lib-itms-con {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }

    .library-window .lib-itms-con .lib-images-l {
        min-height: 220px;
    }
}

@media screen and (max-width: 600px) {
    .lib-contents {
        padding-bottom: 60px;
    }

    .lib-images-l .button-area button span {
        font-size: 16px;
    }
}

@media (min-width: 768px) {
    .library-window .lib-itms-con {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 18px;
    }

    .library-window .lib-itms-con .lib-images-l {
        min-height: 260px;
    }
}

@media (min-width: 1024px) {
    .library-window .lib-itms-con {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
    }

    .library-window .lib-itms-con .lib-images-l {
        min-height: 280px;
    }
}

@media (min-width: 1400px) {
    .library-window .lib-itms-con {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 22px;
    }

    .library-window .lib-itms-con .lib-images-l {
        min-height: 300px;
    }
}

/* Apply to the whole document or specific scrollable containers */
html,
body,
* {
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
    -ms-overflow-style: none;
    /* IE/Edge Legacy */
}

/* Optional: if you want a super thin scrollbar instead of full hide */
.thin-scroll::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

.thin-scroll::-webkit-scrollbar-thumb {
    background: rgba(150, 150, 150, 0.4);
    border-radius: 2px;
}

.icon-close {
    border-radius: 20px;
    padding: 6px;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.icon-close:hover {
    background-color: #ffffff33;
    transform: scale(1.1);
}

/* Optional ripple effect */
.ripple {
    position: relative;
    overflow: hidden;
}




.overlay-blurred {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    opacity: 1;
    display: none;
    transition: opacity 0.3s ease;
}

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

#overlay-blurred-0001344 {
    z-index: 9999;
}

#overlay-blurred-0001345 {
    z-index: 99999;
}

#overlay-blurred-0001346 {
    z-index: 99999;
}

.mini-window-windows {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 500px;
    overflow-y: hidden;
    overflow-x: hidden;
    transform: translate(-50%, -50%);
    z-index: 999999;
    background-color: var(--darker-background);
    border: 1px solid #ffffff24;
    border-radius: 20px;
    user-select: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
    display: block;
}

@media screen and (max-width: 410px) {
    .mini-window-windows {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

.mini-window-windows .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    height: 54px;
    padding-left: 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--light-dark-background);
    color: var(--text-color);
    font-weight: 500;
    font-size: 16px;
}

.mini-window-windows .mini-window-lists {
    height: calc(100% - 108px);
    overflow: hidden;
    overflow-y: auto;
    padding: 6px;
    padding-top: 10px;
}

.mini-window-windows .mini-window-lists .mini-window-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
    will-change: transform, background-color;
    transform: translateZ(0);
    backface-visibility: hidden;
    background-color: var(--chat-area-background);
    width: 100%;
    min-height: 70px;
    border: 1px solid #ffffff2a;
}

.mini-window-windows .mini-window-lists .mini-window-item:hover {
    background-color: var(--light-dark-background);
}

.mini-window-windows .mini-window-lists .mini-window-item img {
    width: 49px;
    height: 49px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
    border: 1px solid var(--border-color)
}

.mini-window-windows .mini-window-lists .mini-window-item .char-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-window-windows .mini-window-lists .mini-window-item .char-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    margin-right: 10px;
    gap: 10px;
}

.mini-window-windows .mini-window-lists .mini-window-item .char-actions .lock {
    font-size: 22px;
    margin-top: -2px;
}

.mini-window-windows .mini-window-lists .mini-window-item .char-actions span {
    color: var(--text-color);
    font-size: 22px;
    cursor: pointer;
    padding: 6px;
    transition: background-color 0.25s ease;
    will-change: background-color;
    border-radius: 50%;
    backface-visibility: hidden;
    background-color: transparent;
}

.mini-window-windows .mini-window-lists .mini-window-item .char-actions span:hover {
    background-color: #ffffff1f;
}

.mini-window-windows .min-window-bottom-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    padding-bottom: 12px;
    height: 54px;
    border-top: 1px solid #ffffff25;
    background: transparent;
    gap: 10px;
}

.mini-window-windows .min-window-bottom-actions button {
    background-color: transparent;
    border: 1px solid #ffffff2a;
    width: 50%;
    padding: 6px;
    border-radius: 8px;
    color: var(--text-color);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background-color 0.25s ease;
    will-change: background-color;
    backface-visibility: hidden;
}

.mini-window-windows .min-window-bottom-actions button:hover {
    background-color: #ffffff1f;
}

.mini-window-windows .dl-colored-action {
    background-color: var(--accent-soft, rgba(99, 102, 241, 0.15));
    border: 1px solid var(--accent-ring, rgba(99, 102, 241, 0.3));
    width: auto;
    min-width: 160px;
    max-width: 260px;
    padding: 9px 20px;
    border-radius: 10px;
    color: var(--accent-contrast, #fff);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
    will-change: background-color;
    backface-visibility: hidden;
}

.mini-window-windows .dl-colored-action:hover {
    background-color: var(--accent-soft, rgba(99, 102, 241, 0.28));
    border-color: var(--accent, rgba(99, 102, 241, 0.6));
    transform: translateY(-1px);
}

.mini-window-windows .dl-colored-action:active {
    transform: translateY(0);
}

.mini-window-windows .min-window-bottom-actions .add {
    width: 69%;
}

.mini-window-windows .min-window-bottom-actions .close {
    width: 29%;
    background-color: var(--accent-soft, rgba(99, 102, 241, 0.15));
    border-color: var(--accent-ring, rgba(99, 102, 241, 0.3));
}

.mini-window-windows .min-window-bottom-actions .close:hover {
    background-color: var(--accent-soft, rgba(99, 102, 241, 0.28));
}

#character_edits_con img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #ffffff2a;
    margin-top: 20px;
}

#characters_lists,
#character_edit,
#character_add,
#character_memory_window {
    display: none;
}

#character_adds_con img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #ffffff2a;
    margin-top: 20px;
}


.plan-view-stg {
    position: relative;
    padding: 16px 50px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    /* letter-spacing: 3px; */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    pointer-events: none;
    isolation: isolate;
    transition: transform 0.3s ease;
}

/* Common Text Styling */
.plan-view-stg span.text-content {
    position: relative;
    z-index: 2;
}

/* =========================================
       2. PAID VERSIONS (Pro & Premium) Shared Logic
       ========================================= */

/* Only Pro and Premium get the fancy background logic */
.plan-view-stg:not(.free) {
    background: rgba(20, 20, 20, 0.6) !important;
    backdrop-filter: blur(10px);
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 1),
        0 0 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* The "Photon Stream" Border (Only for paid) */
.plan-view-stg:not(.free)::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -2;
    background: conic-gradient(transparent,
            var(--glow-primary),
            transparent 30%);
    animation: rotate-border 4s linear infinite;
}

/* The Mask (Only for paid) */
.plan-view-stg:not(.free)::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 8px;
    background: #0f0f0f;
    z-index: -1;
}

/* Metallic Text (Only for paid) */
.plan-view-stg:not(.free) span.text-content {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to bottom,
            var(--text-light),
            var(--text-dark));
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
}

/* The Sheen Animation (Only for paid) */
.plan-view-stg:not(.free) .sheen-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.05) 40%,
            var(--sparkle-color) 50%,
            rgba(255, 255, 255, 0.05) 60%,
            transparent);
    transform: skewX(-25deg);
    animation: sheen-anim 3s infinite ease-in-out;
}


/* =========================================
       3. SPECIFIC VARIANTS
       ========================================= */

/* --- FREE (Clean & Simple) --- */
.plan-view-stg.free {
    background-color: transparent;
    /* Simple White Border */
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Simple White Text */
    color: #ffffff;
    opacity: 0.7;
    /* Slightly dimmed to look inactive compared to premium */
}

/* --- PRO (Silver / Platinum) --- */
.plan-view-stg.pro {
    --glow-primary: #00e5ff;
    --text-light: #ffffff;
    --text-dark: #7f8c8d;
    --sparkle-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.2);
}

.plan-view-stg.pro::before {
    background: conic-gradient(transparent,
            #ffffff,
            transparent 20%,
            transparent 80%,
            #a0a0a0,
            transparent);
}

/* --- PREMIUM (Gold / Luxury) --- */
.plan-view-stg.premium {
    --glow-primary: #FFD700;
    --text-light: #fffacd;
    --text-dark: #b8860b;
    --sparkle-color: rgba(255, 215, 0, 0.9);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

.plan-view-stg.premium::before {
    background: conic-gradient(transparent,
            #ffeb3b,
            #b8860b 20%,
            transparent 50%);
}

/* =========================================
       4. Animations
       ========================================= */
@keyframes rotate-border {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes sheen-anim {
    0% {
        left: -150%;
    }

    50% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

/* ═══════════════════════════════════════════════════════
   Claude-style Inline Tool Blocks & Thinking Blocks
   ═══════════════════════════════════════════════════════ */

/* --- Inline Tool Block --- */
.tool-block {
    margin: 10px 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: all 0.25s ease;
    animation: toolBlockIn 0.3s ease;
}

@keyframes toolBlockIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

.tool-block .tool-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    color: #9f9f9f;
    user-select: none;
    -webkit-user-select: none;
}

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

.tool-block .tool-icon {
    font-size: 16px;
    flex-shrink: 0;
    color: #7a7a7a;
}

.tool-block .tool-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: #9f9f9f;
}

.tool-block .tool-check {
    font-size: 15px;
    color: #4caf50;
    flex-shrink: 0;
}

.tool-block .tool-chevron {
    font-size: 18px;
    flex-shrink: 0;
    color: #666;
    transition: transform 0.2s ease;
}

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

/* Tool spinner for loading state */
.tool-block.active .tool-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(150, 150, 150, 0.2);
    border-top-color: #9f9f9f;
    border-radius: 50%;
    animation: toolSpin 0.6s linear infinite;
    flex-shrink: 0;
}

.tool-block.active .tool-label {
    background: linear-gradient(90deg, #9f9f9f 0%, #d0d0d0 50%, #9f9f9f 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerTool 1.8s ease-in-out infinite;
}

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

@keyframes shimmerTool {

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

    50% {
        background-position: -200% center;
    }
}

/* Expandable detail area */
.tool-block .tool-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 14px;
}

.tool-block.expanded .tool-detail {
    max-height: 500px;
    padding: 0 14px 12px;
    overflow-y: auto;
}

/* Search query display */
.tool-block .tool-query {
    font-size: 12px;
    color: #777;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-bottom: 8px;
    font-style: italic;
}

/* Search result count */
.tool-block .tool-result-count {
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
    text-align: right;
}

/* Search result cards (like Claude Image 2) */
.tool-block .result-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin: 4px 0;
    font-size: 13px;
    cursor: default;
    transition: background 0.15s ease;
}

.tool-block .result-card:hover {
    background: rgba(255, 255, 255, 0.06);
}

.tool-block .result-favicon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.05);
}

.tool-block .result-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #c0c0c0;
}

.tool-block .result-domain {
    font-size: 11px;
    color: #777;
    flex-shrink: 0;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* --- Thinking/Reasoning Block --- */
.thinking-block {
    margin: 10px 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: all 0.25s ease;
    animation: toolBlockIn 0.3s ease;
}

.thinking-block .thinking-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: #888;
    user-select: none;
    -webkit-user-select: none;
}

.thinking-block .thinking-header:hover {
    background: rgba(255, 255, 255, 0.02);
}

.thinking-block .thinking-icon {
    font-size: 15px;
    flex-shrink: 0;
}

.thinking-block .thinking-label {
    flex: 1;
    font-size: 13px;
    color: #888;
}

.thinking-block.active .thinking-label {
    background: linear-gradient(90deg, #888 0%, #bbb 50%, #888 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerTool 1.8s ease-in-out infinite;
}

.thinking-block .thinking-chevron {
    font-size: 18px;
    flex-shrink: 0;
    color: #555;
    transition: transform 0.2s ease;
}

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

.thinking-block .thinking-content-legacy {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 14px;
    font-size: 13px;
    color: #888;
    line-height: 1.6;
}

.thinking-block.expanded .thinking-content-legacy {
    max-height: 2000px;
    padding: 0 14px 12px;
    overflow-y: auto;
}

.thinking-block .thinking-content-legacy strong {
    color: #a7a7a7;
}


/* --- Streaming text segments --- */
.streaming-segment {
    min-height: 0;
}


/* Keep old loading-step animation for backward compat */
.loading-step {
    animation: toolSpin 0.5s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



.img-labs-ai-tuning {
    width: 400px;
    height: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    background-color: #181818;
    border-radius: 30px;
    display: none;
}

.img-labs-ai-tuning .img-labs-tuning-header {
    width: 100%;
    padding: 10px;
    padding-left: 20px;
}

/* ═══════════════════════════════════════════════════
   DELPHOS INLINE STREAM COMPONENTS — Compact Style
   ═══════════════════════════════════════════════════ */

.streaming-segment {
    display: block;
    width: 100%;
}

/* ── Thinking block — compact collapsible pill ──── */
.thinking-block {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    margin: 4px 0 6px 0;
    animation: blockFadeIn 0.2s ease;
}

.thinking-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    cursor: pointer;
    user-select: none;
    width: fit-content;
    border-radius: 20px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.15);
    transition: background 0.18s, border-color 0.18s;
}

.thinking-header:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.28);
}

.thinking-icon {
    font-size: 13px;
    opacity: 0.8;
}

.thinking-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(180, 160, 255, 0.9);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.thinking-toggle {
    font-size: 14px;
    color: rgba(160, 140, 220, 0.65);
    transition: transform 0.25s;
    line-height: 1;
    margin-left: 2px;
}

.thinking-block.collapsed .thinking-toggle {
    transform: rotate(-90deg);
}

/* Expanded content */
.thinking-content {
    margin-top: 6px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: rgba(185, 175, 220, 0.7);
    line-height: 1.65;
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.1);
    border-radius: 10px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s,
        margin 0.25s,
        padding 0.25s;
}

.thinking-block.collapsed .thinking-content {
    max-height: 0 !important;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ── Tool row — single inline line ─────────────── */
.tool-block {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0 5px 10px;
    margin: 3px 0;
    border-left: 2px solid rgba(124, 58, 237, 0.3);
    animation: blockFadeIn 0.2s ease;
    position: relative;
}

.tool-block.done {
    border-left-color: rgba(34, 197, 94, 0.45);
}

.tool-header {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
}

/* Tiny spinner */
.tool-spinner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(124, 58, 237, 0.25);
    border-top-color: #9f7aea;
    animation: toolSpin 0.65s linear infinite;
    flex-shrink: 0;
}

.tool-block.done .tool-spinner {
    display: none;
}

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

.tool-label {
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(200, 190, 240, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.tool-query {
    font-weight: 400;
    color: rgba(160, 150, 210, 0.55);
    font-size: 12px;
    font-style: italic;
}

.tool-status-icon {
    font-size: 13px;
    color: #4ade80;
    flex-shrink: 0;
}

.tool-status-icon.hide {
    display: none;
}

/* Search results — shown inline below the row on click */
.tool-results {
    display: none;
}

.tool-block.results-open .tool-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    padding: 3px 0;
    max-height: 140px;
    overflow-y: auto;
    position: absolute;
    left: 12px;
    top: 100%;
    background: rgba(20, 15, 35, 0.96);
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 8px;
    z-index: 10;
    min-width: 280px;
    max-width: 420px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.tool-result-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    text-decoration: none;
    color: rgba(200, 195, 230, 0.8);
    font-size: 11.5px;
    transition: background 0.12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.tool-result-favicon {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
    opacity: 0.7;
}

.tool-result-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── AI Image Grid ─────────────────────────────── */
.ai-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px;
    margin: 10px 0;
}

.ai-grid-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    transition: transform 0.2s, opacity 0.2s;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-grid-img:hover {
    transform: scale(1.03);
}

/* ── YouTube Video Embed ─────────────────────── */
.ai-video-embed {
    margin: 12px 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: #000;
    aspect-ratio: 16/9;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.ai-video-embed iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

/* ── Mermaid Diagrams ─────────────────────────── */
.mermaid-diagram {
    margin: 12px 0;
    padding: 14px;
    background: rgba(12, 8, 25, 0.85);
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 12px;
    overflow-x: auto;
    text-align: center;
}

.mermaid-diagram svg {
    max-width: 100%;
    height: auto;
}

/* ── Shared fade-in ──────────────────────────── */
@keyframes blockFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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


/* Streaming text segment */
.streaming-segment {
    display: block;
    width: 100%;
}

/* ── Thinking block ───────────────────────────────── */
.thinking-block {
    margin: 8px 0 12px 0;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.18);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: blockFadeIn 0.3s ease;
}

.thinking-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.thinking-header:hover {
    background: rgba(124, 58, 237, 0.08);
}

.thinking-icon {
    font-size: 15px;
}

.thinking-label {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: rgba(180, 160, 255, 0.85);
    letter-spacing: 0.01em;
}

.thinking-toggle {
    font-size: 18px;
    color: rgba(160, 140, 220, 0.7);
    transition: transform 0.3s;
}

.thinking-block.collapsed .thinking-toggle {
    transform: rotate(0deg);
}

/* ── Thinking content: VISIBLE by default, HIDDEN when collapsed ── */
.thinking-content {
    padding: 10px 14px 14px 14px;
    font-size: 13px;
    color: rgba(210, 200, 240, 0.85);
    line-height: 1.7;
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        padding 0.35s ease;
    opacity: 1;
}

.thinking-block.collapsed .thinking-content {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
}

.thinking-content code.inline-code {
    background: rgba(124, 58, 237, 0.12);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    color: rgba(200, 180, 255, 0.9);
}

/* ── Tool block ───────────────────────────────────── */
.tool-block {
    margin: 8px 0 12px 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s;
    animation: blockFadeIn 0.3s ease;
}

.tool-block.done {
    border-color: rgba(34, 197, 94, 0.2);
    background: rgba(34, 197, 94, 0.03);
}

.tool-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

.tool-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(124, 58, 237, 0.3);
    border-top-color: #7c3aed;
    animation: toolSpin 0.7s linear infinite;
    flex-shrink: 0;
}

.tool-block.done .tool-spinner {
    display: none;
}

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

.tool-label {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: rgba(220, 210, 255, 0.85);
}

.tool-query {
    font-weight: 400;
    color: rgba(180, 170, 220, 0.6);
    font-size: 12px;
}

.tool-status-icon {
    font-size: 16px;
    color: #22c55e;
}

.tool-status-icon.hide {
    display: none;
}

/* Tool results (search links) */
.tool-results {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
    max-height: 180px;
    overflow-y: auto;
}

.tool-block.results-open .tool-results {
    display: flex;
}

.tool-result-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    text-decoration: none;
    color: rgba(200, 195, 230, 0.8);
    font-size: 12px;
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-result-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.tool-result-favicon {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
    opacity: 0.75;
}

.tool-result-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── AI Image Grid ────────────────────────────────── */
.ai-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    margin: 12px 0;
    border-radius: 12px;
    overflow: hidden;
}

.ai-grid-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    transition: transform 0.2s, opacity 0.2s;
    cursor: pointer;
}

.ai-grid-img:hover {
    transform: scale(1.03);
    opacity: 0.9;
}


/* ── YouTube Video Embed (legacy kept for any direct usage) ──────────────────────────── */
.ai-video-embed {
    margin: 14px 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #000;
    aspect-ratio: 16/9;
    width: 100%;
    max-width: 680px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.ai-video-embed iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

/* ── Video Main Card (clickable thumbnail for main video result) ── */
.video-sources {
    margin: 12px 0;
}

.video-main-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.45);
    max-width: 520px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.video-main-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
    border-color: var(--accent-ring, rgba(124, 58, 237, 0.35));
}

.video-main-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.video-main-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.video-main-card:hover .video-main-thumb {
    transform: scale(1.04);
    filter: brightness(0.75);
}

.video-main-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 56px;
    height: 56px;
    font-size: 56px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.65);
    pointer-events: none;
    transition: transform 0.22s ease, color 0.22s ease;
    filter: drop-shadow(0 0 12px var(--accent-soft, rgba(124, 58, 237, 0.5)));
}

.video-main-card:hover .video-main-play {
    transform: scale(1.12);
    color: #fff;
    filter: drop-shadow(0 0 20px var(--accent-ring, rgba(124, 58, 237, 0.8)));
}

.video-main-label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    font-size: 13px;
    color: rgba(200, 190, 235, 0.75);
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.video-main-label-icon {
    font-size: 16px;
    color: var(--accent, rgba(124, 58, 237, 0.85));
}

/* ── YouTube Video Modal ────────────────────────────────── */
.yt-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.28s ease, backdrop-filter 0.28s ease;
}

.yt-modal-backdrop.yt-modal-visible {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
}

.yt-modal-panel {
    background: linear-gradient(145deg, rgba(14, 10, 26, 0.98) 0%, rgba(8, 6, 18, 0.98) 100%);
    border: 1px solid var(--accent-ring, rgba(124, 58, 237, 0.4));
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.04);
    width: min(90vw, 820px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.92) translateY(20px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.yt-modal-backdrop.yt-modal-visible .yt-modal-panel {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.yt-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
    background: linear-gradient(90deg, var(--accent-soft, rgba(124, 58, 237, 0.14)) 0%, transparent 100%);
}

.yt-modal-title {
    font-size: 18px;
    color: var(--accent, #7c3aed);
    flex-shrink: 0;
}

.yt-modal-title-text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: rgba(220, 210, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yt-modal-close {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(200, 195, 230, 0.7);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.yt-modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.35);
}

.yt-modal-close .material-symbols-rounded {
    font-size: 18px;
}

.yt-modal-body {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    flex-shrink: 0;
}

.yt-modal-body iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ── Mobile: full-height bottom sheet ─────────────── */
@media (max-width: 600px) {
    .yt-modal-backdrop {
        align-items: flex-end;
    }

    .yt-modal-panel {
        width: 100%;
        height: 100dvh;
        /* fill full viewport height */
        max-height: 100dvh;
        border-radius: 0;
        /* no rounded corners on mobile — full edge-to-edge */
        border: none;
        /* no border on mobile — clean full-bleed look */
        transform: translateY(100%);
        /* slide in from fully off-screen bottom */
        opacity: 0;
    }

    .yt-modal-backdrop.yt-modal-visible .yt-modal-panel {
        transform: translateY(0);
        opacity: 1;
    }

    /* Video body fills all remaining vertical space on mobile */
    .yt-modal-body {
        aspect-ratio: unset;
        flex: 1;
        /* take all leftover height after the header */
        height: 0;
        /* needed with flex:1 so aspect-ratio doesn't interfere */
    }
}


/* ── Mermaid Diagrams ─────────────────────────────── */
.mermaid-diagram {
    margin: 14px 0;
    padding: 16px;
    background: rgba(15, 10, 30, 0.8);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 14px;
    overflow-x: auto;
    text-align: center;
}

.mermaid-diagram svg {
    max-width: 100%;
    height: auto;
}

/* ── Block animation ──────────────────────────────── */
@keyframes blockFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* Stream UI Final Overrides */
.chat-list .message.incoming {
    margin-top: 1.25rem;
}

.chat-list .message.incoming .message-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.chat-list .message.incoming .avatar {
    display: none !important;
}

.chat-list .message.incoming .message-actions {
    margin-left: 0;
    margin-top: 0.45rem;
}

.chat-list .message .message-actions {
    margin-left: calc(40px + 0.85rem);
    margin-top: 0.45rem;
}

.stream-shell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    contain: layout style;
}

.stream-loader {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    color: var(--placeholder-color);
    font-size: 14px;
}

.chat-list .message.loading .stream-loader {
    display: flex;
}

.stream-loader-spinner {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}

.stream-status {
    display: none;
    min-height: 1.25rem;
    align-items: center;
    margin-top: 8px;
}

.stream-status.visible {
    display: inline-flex;
}

.stream-body {
    min-width: 0;
}

.streaming-segment,
.streaming-preview {
    width: 100%;
}

.streaming-preview {
    display: none;
    white-space: pre-wrap;
    word-break: break-word;
    color: rgba(226, 232, 240, 0.92);
    line-height: 1.78;
    text-wrap: pretty;
}

.streaming-preview.visible {
    display: block;
    animation: previewFadeIn 120ms ease-out;
}

/* Word-group chunks: each 2-3 word group fades in smoothly */
.word-group-chunk {
    opacity: 0;
    animation: wordGroupIn 160ms ease-out forwards;
    display: inline;
    white-space: pre-wrap;
}

@keyframes wordGroupIn {
    from {
        opacity: 0;
        transform: translateY(2px);
    }

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

.streaming-preview::after {
    content: "";
    display: inline-block;
    width: 0.6ch;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -0.12em;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(167, 139, 250, 0.65));
    box-shadow: 0 0 14px rgba(167, 139, 250, 0.28);
    animation: streamCaretPulse 0.9s ease-in-out infinite;
}

.streaming-preview:not(.visible)::after,
.streaming-preview:empty::after {
    display: none;
}

.streaming-segment> :first-child,
.streaming-preview> :first-child,
.stream-body> :first-child {
    margin-top: 0;
}

.streaming-segment> :last-child,
.stream-body> :last-child {
    margin-bottom: 0;
}

/* ── Smooth stream appending (Claude/ChatGPT-style) ─────────────
   Frozen blocks fade + rise gently into place as they settle. The
   live tail is NOT per-child animated (it re-renders each frame, which
   would re-trigger and flicker); instead it eases opacity smoothly. */
.frozen-segment {
    animation: streamRise 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.streaming-segment {
    transition: opacity 0.18s ease;
    opacity: 1;
    /* Isolate the tail's per-tick re-render so it can't reflow the whole
       message above it — keeps the append smooth and jump-free. */
    contain: layout style;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@keyframes streamRise {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

@media (prefers-reduced-motion: reduce) {
    .frozen-segment {
        animation: none;
    }
}

.thinking-block {
    margin: 0.2rem 0 0.45rem;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(88, 28, 135, 0.16), rgba(15, 23, 42, 0.18));
    border: 1px solid rgba(167, 139, 250, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
}

.thinking-header {
    padding: 0.72rem 0.9rem;
    gap: 0.6rem;
}

.thinking-icon {
    font-size: 16px;
    color: rgba(196, 181, 253, 0.9);
}

.thinking-label {
    color: rgba(226, 232, 240, 0.88);
    font-size: 12.75px;
    letter-spacing: 0.01em;
}

.thinking-content {
    padding: 0 0.9rem 0.9rem;
    color: rgba(203, 213, 225, 0.8);
    background: transparent;
    border: 0;
    max-height: 360px;
}

.tool-block {
    margin: 0.35rem 0 0.6rem;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.64), rgba(15, 23, 42, 0.34));
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.tool-block.loading {
    border-color: rgba(167, 139, 250, 0.2);
}

.tool-block.done {
    border-color: rgba(74, 222, 128, 0.18);
    background: linear-gradient(180deg, rgba(22, 101, 52, 0.12), rgba(15, 23, 42, 0.3));
}

.tool-header {
    width: 100%;
    padding: 0.78rem 0.95rem;
    gap: 0.7rem;
}

.tool-block.has-results .tool-header {
    cursor: pointer;
}

.tool-label-wrap {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tool-label {
    max-width: none;
    color: rgba(241, 245, 249, 0.92);
    font-size: 12.75px;
    line-height: 1.35;
}

.tool-query {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(148, 163, 184, 0.9);
}

.tool-spinner {
    width: 14px;
    height: 14px;
    border-width: 2px;
    border-color: rgba(167, 139, 250, 0.18);
    border-top-color: rgba(196, 181, 253, 0.95);
}

.tool-results-meta,
.tool-status-icon,
.tool-toggle {
    flex-shrink: 0;
}

.tool-results-meta {
    font-size: 11px;
    color: rgba(148, 163, 184, 0.82);
}

.tool-toggle {
    font-size: 16px;
    color: rgba(148, 163, 184, 0.86);
    transition: transform 0.2s ease, color 0.2s ease;
}

.tool-block.results-open .tool-toggle {
    transform: rotate(180deg);
    color: rgba(226, 232, 240, 0.95);
}

.tool-results {
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    padding: 0.35rem;
    background: rgba(2, 6, 23, 0.28);
}

.tool-block.results-open .tool-results {
    display: grid;
    gap: 0.3rem;
}

.tool-result-item {
    padding: 0.62rem 0.75rem;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid transparent;
    white-space: normal;
    line-height: 1.35;
}

.tool-result-item:hover {
    background: rgba(30, 41, 59, 0.74);
    border-color: rgba(167, 139, 250, 0.16);
}

.tool-result-favicon {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    opacity: 0.92;
}

.tool-result-title {
    color: rgba(226, 232, 240, 0.92);
}

.shimmer-text {
    color: rgba(226, 232, 240, 0.42);
    background: linear-gradient(110deg, rgba(148, 163, 184, 0.45) 30%, rgba(255, 255, 255, 0.98) 48%, rgba(167, 139, 250, 0.92) 52%, rgba(148, 163, 184, 0.45) 70%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 1.75s linear infinite;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

@keyframes previewFadeIn {
    from {
        opacity: 0;
        transform: translateY(2px);
    }

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

@keyframes streamCaretPulse {

    0%,
    100% {
        opacity: 0.35;
    }

    50% {
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TOOL-BLOCK SYSTEM — flat / borderless / Claude-style
   Single muted grey line + monochrome icon. Click to expand into a
   quiet result list. Overrides ALL earlier .tool-block duplicates.
   ═══════════════════════════════════════════════════════════════ */

.tool-block {
    display: block !important;
    margin: 10px 0 !important;
    padding: 0 !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    animation: none !important;
    position: relative;
    overflow: visible;
}

/* The single muted line */
.tool-block .tool-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    padding: 3px 0;
    background: none;
    border: none;
    color: var(--subheading-color, #9b9b9b);
    user-select: none;
    border-radius: 6px;
    transition: color 0.18s ease;
}

.tool-block.has-results .tool-header {
    cursor: pointer;
}

.tool-block.has-results .tool-header:hover {
    color: var(--text-color);
}

.tool-block.has-results .tool-header:hover .tool-icon {
    opacity: 0.9;
}

/* Monochrome icon (material glyph); spins subtly while loading */
.tool-block .tool-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.72;
}

.tool-block.loading .tool-icon {
    animation: toolIconSpin 1.1s linear infinite;
    opacity: 0.85;
}

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

/* The label text — muted grey, silver shimmer while loading */
.tool-block .tool-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--subheading-color, #9b9b9b);
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tool-block .tool-label .tool-query,
.tool-block .tool-label .tool-count {
    color: var(--subheading-color, #8a8a8a);
    opacity: 0.7;
    font-weight: 400;
}

/* Chevron — small, muted, rotates on open */
.tool-block .tool-toggle {
    font-size: 18px;
    color: var(--subheading-color, #9b9b9b);
    opacity: 0.6;
    flex-shrink: 0;
    transition: transform 0.22s ease, opacity 0.18s ease;
}

.tool-block.has-results .tool-header:hover .tool-toggle {
    opacity: 0.9;
}

.tool-block.results-open .tool-toggle {
    transform: rotate(180deg);
}

.tool-block .hide {
    display: none !important;
}

/* Results — hairline-framed quiet panel, collapsed by default */
.tool-block .tool-results {
    display: none;
    position: static;
    margin: 8px 0 2px;
    padding: 4px;
    background: none;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.09));
    border-radius: 12px;
    max-height: 360px;
    overflow-y: auto;
    box-shadow: none;
    min-width: 0;
    max-width: none;
    width: auto;
}

.tool-block.results-open .tool-results {
    display: block;
    position: static;
    left: auto;
    top: auto;
    inset: auto;
    min-width: 0;
    max-width: none;
    width: auto;
    z-index: auto;
    background: transparent;
    box-shadow: none;
    animation: toolResultsIn 0.22s ease;
}

@keyframes toolResultsIn {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

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

.tool-block .results-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tool-block .results-grid {
    display: grid;
    gap: 8px;
    padding: 4px;
}

/* ── WEB results — quiet rows ────────────────────────────── */
.web-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.14s ease;
}

.web-result:hover {
    background: rgba(148, 163, 184, 0.08);
}

.web-result .tool-result-favicon {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
    opacity: 0.9;
}

.web-result .web-result-text {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex: 1;
    justify-content: space-between;
}

.web-result .tool-result-title {
    font-size: 13.5px;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.web-result .tool-result-domain {
    font-size: 12px;
    color: var(--subheading-color, #8a8a8a);
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── VIDEO results (thumbnail grid → click to play) ──────── */
.video-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.video-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

.video-result .video-thumb-wrap {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: rgba(0, 0, 0, 0.35);
}

.video-result .video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.video-result:hover .video-thumb {
    transform: scale(1.04);
}

.video-result .video-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.video-result .video-duration {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 10.5px;
    padding: 1px 5px;
    border-radius: 4px;
}

.video-result .video-title {
    font-size: 12.5px;
    color: var(--text-color);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-result .video-channel {
    font-size: 11px;
    color: var(--subheading-color, #8a8a8a);
}

/* video-result.playing no longer used — videos open in yt-modal */

/* ── SHOPPING results — quiet rows ───────────────────────── */
.shop-result {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 0.14s ease;
}

.shop-result:hover {
    background: rgba(148, 163, 184, 0.07);
}

.shop-img {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
    padding: 3px;
}

.shop-img-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(148, 163, 184, 0.1);
    color: var(--subheading-color);
}

.shop-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.shop-name {
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shop-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
}

.shop-rating {
    color: var(--subheading-color);
}

.shop-reviews {
    color: var(--subheading-color);
    opacity: 0.7;
}

.shop-badge {
    font-size: 10.5px;
    font-weight: 500;
    padding: 1px 8px;
    border-radius: 5px;
    background: rgba(148, 163, 184, 0.14);
    color: var(--subheading-color);
}

.shop-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.shop-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.shop-mrp {
    font-size: 12px;
    color: var(--subheading-color);
    opacity: 0.65;
    text-decoration: line-through;
}

.shop-buy {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 7px;
    text-decoration: none;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    color: var(--text-color);
    transition: background 0.14s ease;
}

.shop-buy:hover {
    background: rgba(148, 163, 184, 0.12);
}

/* ── PLACES results — quiet rows ─────────────────────────── */
.place-result {
    display: flex;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 9px;
    transition: background 0.14s ease;
}

.place-result:hover {
    background: rgba(148, 163, 184, 0.07);
}

.place-pin {
    font-size: 19px;
    color: var(--subheading-color);
    opacity: 0.8;
    flex-shrink: 0;
}

.place-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.place-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
}

.place-addr {
    font-size: 12px;
    color: var(--subheading-color);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.place-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
    font-size: 12px;
}

.place-rating {
    color: var(--subheading-color);
}

.place-map {
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.85;
    text-decoration: none;
}

.place-map:hover {
    text-decoration: underline;
}

/* ── IMAGE results ───────────────────────────────────────── */
.img-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}

.img-result {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1;
    background: rgba(0, 0, 0, 0.25);
}

.img-result img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.img-result:hover img {
    transform: scale(1.05);
}

/* Shimmer label while executing (silver-gray sweep, subtle) */
.tool-block .tool-label.shimmer-text {
    background: linear-gradient(110deg,
            var(--subheading-color, #8a8a8a) 30%,
            rgba(255, 255, 255, 0.92) 50%,
            var(--subheading-color, #8a8a8a) 70%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 2s linear infinite;
    font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGE-STREAM POLISH  (authoritative — clean chat layout)
   ═══════════════════════════════════════════════════════════════ */

/* Outgoing user bubble */
.chat-list .message.outgoing {
    margin-top: 26px !important;
}

.chat-list .message.outgoing .text {
    line-height: 1.55;
}

/* Incoming AI row — full-width, no avatar column needed */
.chat-list .message.incoming .message-content {
    display: block !important;
    width: 100%;
}

.chat-list .message.incoming .message-actions {
    margin-left: 0 !important;
    margin-top: 0.45rem;
    display: flex;
    gap: 5px;
    align-items: center;
}

.chat-list .message.incoming .text {
    line-height: 1.62;
}

/* Stream shell — vertical stacking of thinking/tool/text blocks */
.stream-shell {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

/* Thinking block — clean pill header + collapsible content */
.thinking-block {
    margin: 4px 0 8px !important;
    border-radius: 14px !important;
    background: rgba(88, 28, 135, 0.09) !important;
    border: 1px solid rgba(167, 139, 250, 0.18) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    animation: blockFadeIn 0.25s ease !important;
    width: 100%;
}

.thinking-header {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 9px 14px !important;
    cursor: pointer;
    user-select: none;
    background: transparent;
    transition: background 0.18s;
    border-radius: 0;
    border: none;
    width: auto !important;
    width: 100% !important;
}

.thinking-header:hover {
    background: rgba(167, 139, 250, 0.07) !important;
    border-color: transparent !important;
}

.thinking-icon {
    font-size: 15px;
    color: rgba(196, 181, 253, 0.9);
}

.thinking-label {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: rgba(226, 232, 240, 0.88);
    letter-spacing: 0.01em;
    -webkit-text-fill-color: unset !important;
    background: none !important;
    animation: none !important;
}

.thinking-toggle {
    font-size: 18px;
    color: rgba(160, 140, 220, 0.7);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.thinking-block.collapsed .thinking-toggle {
    transform: rotate(-90deg) !important;
}

.thinking-content {
    padding: 0 14px 12px !important;
    font-size: 13px;
    color: rgba(203, 213, 225, 0.8);
    line-height: 1.7;
    max-height: 380px;
    overflow-y: auto;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.28s ease,
        padding 0.28s ease !important;
    opacity: 1;
    background: transparent !important;
    border: 0 !important;
}

.thinking-block.collapsed .thinking-content {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
}

/* Tool block — clean Claude-like flat inline row */
.tool-block {
    display: block !important;
    margin: 2px 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    animation: blockFadeIn 0.25s ease !important;
    position: relative;
    overflow: visible;
    width: 100%;
}

.tool-block .tool-header {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: auto;
    max-width: 100%;
    padding: 1px 0 !important;
    padding-left: 0 !important;
    background: none !important;
    border: none !important;
    color: var(--subheading-color, #9b9b9b);
    user-select: none;
    cursor: default;
    transition: color 0.18s ease;
    line-height: 1.4;
    margin-left: -32px !important;
}

.tool-block.has-results .tool-header {
    cursor: pointer;
}

.tool-block.has-results .tool-header:hover {
    color: var(--text-color);
}

/* Icon: fixed 18x18 square so rotate() stays circular */
.tool-block .tool-icon {
    font-size: 15px !important;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.7;
    transform-origin: 50% 50%;
}

/* loading: swap wobbly non-round icon to a clean circular progress spinner */
.tool-block.loading .tool-icon {
    content: "progress_activity" !important;
    animation: toolIconSpin 1s linear infinite;
    opacity: 0.85;
}

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

.tool-block .tool-label {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4;
    color: var(--subheading-color, #9b9b9b) !important;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: none;
    -webkit-text-fill-color: unset !important;
    background: none !important;
}

.tool-block .tool-label.shimmer-text {
    background: linear-gradient(110deg,
            var(--subheading-color, #8a8a8a) 30%,
            rgba(255, 255, 255, 0.92) 50%,
            var(--subheading-color, #8a8a8a) 70%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: shimmer 2s linear infinite !important;
    font-weight: 400 !important;
}

.tool-block .tool-label .tool-query {
    display: inline !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-style: normal !important;
    color: var(--subheading-color, #9b9b9b) !important;
    opacity: 0.7 !important;
    box-shadow: none !important;
}

.tool-block .tool-label .tool-count {
    color: var(--subheading-color, #8a8a8a);
    opacity: 0.65;
    font-weight: 400;
}

.tool-block .tool-toggle {
    font-size: 15px;
    color: var(--subheading-color, #9b9b9b);
    opacity: 0.55;
    flex-shrink: 0;
    transition: transform 0.22s ease, opacity 0.18s ease;
}

.tool-block.results-open .tool-toggle {
    transform: rotate(180deg);
    opacity: 0.9;
}

.tool-block .hide {
    display: none !important;
}

/* Tool results panel */
.tool-block .tool-results {
    display: none;
    position: static !important;
    margin: 4px 0 2px !important;
    padding: 4px !important;
    background: none !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.09)) !important;
    border-radius: 12px !important;
    max-height: 340px;
    overflow-y: auto;
    box-shadow: none !important;
    min-width: 0;
    width: auto;
}

.tool-block.results-open .tool-results {
    display: block;
    animation: toolResultsIn 0.2s ease;
}

/* Gentle vertical rhythm in AI output */
.message-content .text>p {
    margin: 0 0 0.7em;
}

.message-content .text>p:last-child {
    margin-bottom: 0;
}

.message-content .text>h1,
.message-content .text>h2,
.message-content .text>h3 {
    margin: 0.9em 0 0.45em;
    line-height: 1.3;
}

.message-content .text>ul,
.message-content .text>ol {
    margin: 0.4em 0 0.7em;
}

.message-content .text li {
    margin: 0.2em 0;
}

/* Sources button */
.source-button {
    margin-top: 12px;
    padding: 6px 16px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-color);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
}

.source-button:hover {
    background: rgba(167, 139, 250, 0.16);
    border-color: rgba(167, 139, 250, 0.4);
}

.source-button:active {
    transform: scale(0.97);
}

/* Stream status */
.stream-status {
    margin: 2px 0 6px;
}

.stream-status:not(.visible) {
    display: none;
}


/* Inline video embed */
.ai-video-embed {
    margin: 14px 0;
}

/* ═══════════════════════════════════════════════════════
   AI CHART WRAPPER — premium dark card
   ═══════════════════════════════════════════════════════ */

.ai-chart-wrapper {
    margin: 14px 0;
    background: linear-gradient(160deg, rgba(15, 10, 30, 0.9), rgba(10, 15, 35, 0.95));
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    animation: blockFadeIn 0.3s ease;
}

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

.ai-chart-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
}

.ai-chart-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.07);
    border: none;
    border-radius: 8px;
    padding: 5px;
    cursor: pointer;
    color: rgba(148, 163, 184, 0.85);
    transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
    line-height: 1;
}

.ai-chart-copy-btn:hover {
    background: rgba(124, 58, 237, 0.22);
    color: #c4b5fd;
    transform: scale(1.08);
}

.ai-chart-copy-btn:active {
    transform: scale(0.95);
}

.ai-chart-copy-btn .material-symbols-rounded {
    font-size: 16px;
}

.ai-chart-canvas-area {
    padding: 16px;
}

/* Shimmer placeholder shown while chart JSON is streaming */
.ai-chart-shimmer {
    margin: 14px 0;
    background: linear-gradient(160deg, rgba(15, 10, 30, 0.9), rgba(10, 15, 35, 0.95));
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    animation: blockFadeIn 0.3s ease;
}

.ai-chart-shimmer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-chart-shimmer-label-bar {
    height: 10px;
    width: 60px;
    border-radius: 6px;
    background: linear-gradient(90deg,
            rgba(124, 58, 237, 0.12) 0%,
            rgba(167, 139, 250, 0.28) 45%,
            rgba(124, 58, 237, 0.12) 100%);
    background-size: 200% 100%;
    animation: chartShimmer 1.5s ease-in-out infinite;
}

.ai-chart-shimmer-body {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-chart-shimmer-bar {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg,
            rgba(124, 58, 237, 0.08) 0%,
            rgba(167, 139, 250, 0.2) 45%,
            rgba(124, 58, 237, 0.08) 100%);
    background-size: 200% 100%;
    animation: chartShimmer 1.5s ease-in-out infinite;
}

.ai-chart-shimmer-bar:nth-child(2) {
    animation-delay: 0.1s;
    width: 85%;
}

.ai-chart-shimmer-bar:nth-child(3) {
    animation-delay: 0.2s;
    width: 70%;
}

.ai-chart-shimmer-bar:nth-child(4) {
    animation-delay: 0.3s;
    width: 92%;
}

.ai-chart-shimmer-bar:nth-child(5) {
    animation-delay: 0.4s;
    width: 60%;
}

.ai-chart-shimmer-bar:nth-child(6) {
    animation-delay: 0.5s;
    width: 78%;
}

.ai-chart-shimmer-canvas-area {
    height: 220px;
    margin: 0 16px 16px;
    border-radius: 10px;
    background: linear-gradient(90deg,
            rgba(124, 58, 237, 0.06) 0%,
            rgba(167, 139, 250, 0.14) 45%,
            rgba(124, 58, 237, 0.06) 100%);
    background-size: 200% 100%;
    animation: chartShimmer 1.8s ease-in-out infinite;
}

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

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

/* ══════════════════════════════════════════════════════════════════════════
   GOOGLE CONNECTIONS PANEL (per-service enable/disable)
   ══════════════════════════════════════════════════════════════════════════ */
.gconn-panel {
    padding: 4px 2px;
}

.gconn-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.gconn-status-dot {
    font-size: 20px;
    line-height: 1;
}

.gconn-status-dot.ok {
    color: #33cc33;
}

.gconn-status-dot.off {
    color: #cc3333;
}

.gconn-status-text {
    font-weight: 600;
    color: var(--text-color);
}

.gconn-lead {
    font-size: 12.5px;
    color: var(--subheading-color, #8a8a8a);
    line-height: 1.5;
    margin: 0 0 14px;
}

.gconn-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gconn-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    background: var(--secondary-color, rgba(255, 255, 255, 0.02));
}

.gconn-ico {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent, #b7795c) 16%, transparent);
    color: var(--accent, #b7795c);
    font-size: 20px;
}

.gconn-text {
    flex: 1;
    min-width: 0;
}

.gconn-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.gconn-desc {
    font-size: 12px;
    color: var(--subheading-color, #8a8a8a);
}

.gconn-btn {
    flex: 0 0 auto;
    padding: 7px 16px;
    border-radius: 9px;
    border: 1px solid var(--accent, #b7795c);
    background: var(--accent, #b7795c);
    color: var(--accent-contrast, #fff);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, opacity 0.15s ease;
}

.gconn-btn:hover {
    filter: brightness(1.06);
}

.gconn-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* An enabled service shows a subtle "Disable" (ghost) button. */
.gconn-btn.on {
    background: transparent;
    color: var(--text-color);
    border-color: var(--border-color, rgba(255, 255, 255, 0.18));
}

.gconn-disconnect {
    width: 100%;
    margin-top: 16px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
    background: transparent;
    color: #e06666;
    font-weight: 600;
    cursor: pointer;
}

.gconn-disconnect:hover {
    background: rgba(224, 102, 102, 0.08);
}

.gconn-legal {
    font-size: 11.5px;
    color: var(--subheading-color, #8a8a8a);
    margin-top: 14px;
    text-align: center;
}

.gconn-legal a {
    color: var(--accent, #b7795c);
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPED ROTATING GREETING (empty/new chat)
   ══════════════════════════════════════════════════════════════════════════ */
.delphos-greet {
    font-size: 2rem;
    font-weight: 500;
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    letter-spacing: -0.01em;
    margin: 0;
    min-height: 1.2em;
}

.delphos-greet .greet-typed {
    white-space: pre;
}

.delphos-greet .greet-caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 3px;
    border-radius: 1px;
    background: var(--accent, #b7795c);
    animation: greet-blink 1.05s step-end infinite;
}

@keyframes greet-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@media screen and (max-width: 600px) {
    .delphos-greet {
        font-size: 1.5rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   "+" MENU — Claude-style accessories (shortcut / chevron / check)
   ══════════════════════════════════════════════════════════════════════════ */
#attach-file-button .attach-file-selections.plus-menu .plus-menu-item p {
    flex: 1;
}

#attach-file-button .attach-file-selections.plus-menu .plus-menu-item .pm-accessory {
    margin-left: auto;
    display: flex;
    align-items: center;
    color: var(--subheading-color, #8a8a8a);
    font-size: 18px;
}

#attach-file-button .attach-file-selections.plus-menu .plus-menu-item .pm-shortcut {
    font-size: 11.5px;
    letter-spacing: 0.02em;
    opacity: 0.75;
}

#attach-file-button .attach-file-selections.plus-menu .plus-menu-item .pm-chev {
    opacity: 0.55;
}

#attach-file-button .attach-file-selections.plus-menu .plus-menu-item .pm-check {
    opacity: 0;
    color: var(--accent, #b7795c);
    transition: opacity 0.15s ease;
}

#attach-file-button .attach-file-selections.plus-menu .plus-menu-item.pm-on .pm-check {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   CONNECTORS PAGE — per-service Google tiles
   ══════════════════════════════════════════════════════════════════════════ */
.connectors-group-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--subheading-color, #8a8a8a);
    margin: 14px 2px 8px;
}

.google-connectors {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gc-loading {
    font-size: 13px;
    color: var(--subheading-color, #8a8a8a);
    padding: 14px;
    text-align: center;
}

.gc-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    background: var(--secondary-color, rgba(255, 255, 255, 0.02));
    animation: mcpIn 0.24s var(--ui-ease, ease);
}

.gc-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.gc-ico {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 9px;
    object-fit: contain;
    background: #fff;
    padding: 6px;
    box-sizing: border-box;
}

.gc-ico-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent, #b7795c) 16%, transparent);
    color: var(--accent, #b7795c);
    font-size: 20px;
    padding: 0;
}

.gc-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gc-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.gc-desc {
    font-size: 12px;
    color: var(--subheading-color, #8a8a8a);
}

.gc-btn {
    flex: 0 0 auto;
    padding: 7px 18px;
    border-radius: 9px;
    border: 1px solid var(--accent, #b7795c);
    background: var(--accent, #b7795c);
    color: var(--accent-contrast, #fff);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.12s ease, opacity 0.15s ease;
}

.gc-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.gc-btn.on {
    background: transparent;
    color: var(--text-color);
    border-color: var(--border-color, rgba(255, 255, 255, 0.18));
}

.gc-btn.busy {
    opacity: 0.6;
    cursor: default;
}

.gc-btn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

/* ── connector tile: extra states used by the GitHub connector ────────────────
   Added rather than restyled, so the Google tiles are byte-identical to before.
   A connector can now be: actionable (.gc-btn), unavailable (.gc-state), or
   connected-with-a-link (.gc-actions + .gc-link), and can carry fine print
   (.gc-note) — which the GitHub tile needs because "Connect" without naming the
   permissions it is about to request is not informed consent. */
.gc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.gc-link {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: var(--subheading-color, #8a8a8a);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.gc-link:hover {
    color: var(--text-color);
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.07));
}

.gc-link .material-symbols-rounded {
    font-size: 18px;
}

.gc-state {
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.06));
    color: var(--subheading-color, #8a8a8a);
    font-size: 12px;
    font-weight: 600;
}

.gc-note {
    margin: 8px 4px 0;
    color: var(--placeholder-color, #938d86);
    font-size: 11.5px;
    line-height: 1.55;
}

.gc-note code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.07));
    color: var(--text-color);
    font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 10.5px;
}

/* An avatar is a photo, not an icon: it should fill its box rather than sit on the
   white padded plate the Google product marks need. */
.gc-tile img.gc-ico {
    padding: 0;
    background: var(--secondary-hover-color, rgba(255, 255, 255, 0.07));
    object-fit: cover;
}