/* ===== Global Variables ===== */
:root {
    --nav-bar-width: 80px; /* Slightly wider for balance */
    --char-panel-width: 0px;
    --settings-panel-width: 0px;
    --drawer-content-panel-width: 0px;
    --authors-note-panel-width: 0px;
    --expression-image-width: 0px;
    --cfgConfig-panel-width: 0px;
    --logprobsViewer-panel-width: 0px;
    --stcdxcodex: 0px;
    --avatar-base-width: 90px; /* Larger base for prominence */
    --avatar-base-height: 90px;
    --big-avatar-width-factor: 2.2; /* Cinematic impact */
    --big-avatar-height-factor: 3.2;
    --big-avatar-border-factor: 2.5; /* Thicker border for emphasis */
    --gold-color: rgba(212, 175, 55, 0.95); /* Richer gold */
    --serene-color: rgba(173, 216, 230, 0.25); /* Softer blue */
    --luxury-color: rgba(55, 40, 40, 0.98); /* Muted red for elegance */
    --spiritual-color: rgba(100, 80, 120, 0.9); /* Mystical purple */
    --background-gradient: radial-gradient(circle at center, rgba(10, 10, 10, 0.98), rgba(0, 0, 0, 0.98)); /* Deeper gradient */
    --shadow-soft: 0 0 30px var(--SmartThemeShadowColor); /* Red accent */
    --shadow-strong: 0 0 60px rgba(0, 0, 0, 0.98); /* Stronger shadow */
    --transition-duration: 0.6s; /* Smoother transitions */
    --border-radius: 28px; /* Softer corners */
    --font-family: 'Noto Serif JP', 'Nanum Myeongjo', 'Hiragino Mincho Pro', serif; /* Asian-inspired fonts */
    --text-color: rgba(240, 240, 240, 0.98); /* Brighter white */
    --accent-color: rgba(150, 120, 90, 0.9); /* Earthy tone */
    --spiritual-gradient: linear-gradient(145deg, rgba(100, 80, 120, 0.4), rgba(50, 40, 60, 0.3)); /* Mystical gradient */
    --ios-blur: blur(50px); /* Stronger blur */
    --glass-effect: rgba(255, 255, 255, 0.08); /* Pronounced glass effect */
    --cinematic-gradient: linear-gradient(145deg, rgba(20, 20, 20, 0.95), rgba(5, 5, 5, 0.95)); /* Deeper gradient */
    --text-shadow: 0 3px 6px rgba(0, 0, 0, 0.6); /* Stronger text shadow */
    --scrollbar-width: 10px; /* Wider scrollbar */
    --scrollbar-thumb-color: var(--SmartThemeShadowColor); /* Red accent */
    --scrollbar-track-color: rgba(0, 0, 0, 0.4); /* Darker track */
    --hover-glow: 0 0 40px var(--SmartThemeShadowColor); /* Red accent */
    --pulse-animation: pulse 2.5s infinite ease-in-out; /* Slower pulse */
    --hover-scale: 1.08; /* Larger scale for hover */
    --hover-transition: all var(--transition-duration) ease; /* Smoother hover */
    --gradient-border: linear-gradient(145deg, var(--SmartThemeShadowColor), var(--accent-color)); /* Red accent */
    --fade-in-animation: fadeIn 0.6s ease-in-out; /* Longer fade-in */
    --serene-gradient: linear-gradient(145deg, rgba(173, 216, 230, 0.15), rgba(100, 80, 120, 0.15)); /* Enhanced gradient */
    --lotus-gradient: radial-gradient(circle, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08)); /* Lotus-inspired */
    --mandala-gradient: radial-gradient(circle, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)); /* Mandala-inspired */
    --golden-light-gradient: linear-gradient(145deg, var(--SmartThemeShadowColor), rgba(212, 175, 55, 0.08)); /* Red accent */
    --buddhist-glow: radial-gradient(circle, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08) 60%); /* Buddhist-inspired */
    --zen-garden-gradient: linear-gradient(145deg, rgba(50, 50, 50, 0.15), rgba(30, 30, 30, 0.08)); /* Zen-inspired */
    --silk-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)); /* Silk-inspired */
    --mystic-fog-gradient: radial-gradient(circle, rgba(100, 80, 120, 0.15), rgba(50, 40, 60, 0.08)); /* Mystic fog */
    --wuxia-smoke: radial-gradient(circle, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02) 80%); /* Wuxia-inspired smoke effect */
    --tao-water-ripple: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05) 70%); /* Tao-inspired ripple effect */
    --bamboo-texture: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 2px, transparent 2px, transparent 4px); /* Bamboo-inspired texture */
    --ink-wash-effect: radial-gradient(circle, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1) 60%); /* Ink wash painting effect */
    --calligraphy-stroke: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05)); /* Calligraphy stroke effect */
    --lotus-petal: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05) 70%); /* Lotus petal effect */
    --spiritual-aura: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05) 60%); /* Spiritual aura effect */
    --koi-pond-effect: radial-gradient(circle, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02) 70%); /* Koi pond ripple effect */
    --sakura-petals: radial-gradient(circle, rgba(255, 183, 197, 0.1), rgba(255, 183, 197, 0.05) 70%); /* Sakura petals effect */
}

/* ===== Base Styles ===== */
body {
    display: flex;
    background-color: #000;
    background-image: var(--background-gradient), var(--lotus-gradient), var(--mandala-gradient), var(--zen-garden-gradient), var(--silk-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--bamboo-texture), var(--ink-wash-effect), var(--calligraphy-stroke), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals); /* Added koi pond and sakura effects */
    color: var(--text-color);
    font-family: var(--font-family);
    line-height: 1.8;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-shadow: var(--text-shadow);
    animation: var(--fade-in-animation);
}

/* Custom Scrollbar */
body::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: var(--border-radius);
}

body::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track-color);
}

/* ===== Avatar Styles ===== */
body.charListGrid .flexFlowColumn .avatar:not(.add_avatar):not(.avatar_collage) {
    width: calc(var(--avatar-base-width) * var(--big-avatar-width-factor));
    height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor));
    max-width: 160px;
    box-shadow: var(--shadow-soft);
    border-radius: var(--border-radius);
    border: 6px solid var(--SmartThemeShadowColor);
    background-color: var(--glass-effect);
    background-image: var(--spiritual-gradient), var(--serene-gradient), var(--golden-light-gradient), var(--buddhist-glow), var(--mystic-fog-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals); /* Added koi pond and sakura effects */
    transition: var(--hover-transition);
}

body.charListGrid .flexFlowColumn .avatar:not(.add_avatar):not(.avatar_collage):hover {
    transform: scale(var(--hover-scale));
    box-shadow: var(--hover-glow);
    border-color: var(--accent-color);
    background-image: var(--spiritual-gradient), var(--serene-gradient), var(--golden-light-gradient), var(--buddhist-glow), var(--mystic-fog-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals); /* Added koi pond and sakura effects */
}

/* ===== Panel Width Adjustments ===== */
body:has(#right-nav-panel.openDrawer):not(#rm_ch_create_block) {
    --char-panel-width: 800px; /* Slightly wider for better spacing */
}

body:has(#right-nav-panel.openDrawer),
body:has(#rm_ch_create_block:is([style*="display: block; opacity: 1;"])) {
    --char-panel-width: 440px; /* Adjusted for balance */
}

body:has(.stcdx--root.stcdx--codex.draggable.stcdx--active),
.stcdx--root.stcdx--active {
    --stcdxcodex: 480px; /* Wider for better readability */
}

body:has(#right-nav-panel.closedDrawer) {
    --char-panel-width: 0px;
}

body:has(#left-nav-panel.openDrawer) {
    --settings-panel-width: 440px; /* Consistent with other panels */
}

body:has(.drawer-content.openDrawer) {
    --drawer-content-panel-width: calc(100vw - var(--nav-bar-width) - var(--settings-panel-width) - var(--char-panel-width) - var(--authors-note-panel-width));
}

body:has(#expression-image:not([src=""])) {
    --expression-image-width: 34vw; /* Slightly larger for impact */
}

body:has(#expression-image:not([src=""])).waifuMode,
body:has(.zoomed_avatar.draggable).waifuMode,
body:not(:has(.zoomed_avatar.draggable)) {
    --expression-image-width: 0px;
}

body:has(#floatingPrompt:is([style*="display: flex; opacity: 1;"])) {
    --authors-note-panel-width: 460px; /* Wider for better readability */
}

body:has(#floatingPrompt.maximized),
body:has(#cfgConfig.maximized),
body:has(#logprobsViewer.maximized) {
    --authors-note-panel-width: 0px;
    --cfgConfig-panel-width: 0px;
    --expression-image-width: 0px;
}

/* ===== Main Content Area ===== */
#sheld {
    left: calc(var(--nav-bar-width) + var(--char-panel-width) + var(--cfgConfig-panel-width));
    width: calc(100vw - var(--nav-bar-width) - var(--cfgConfig-panel-width) - var(--expression-image-width) - var(--authors-note-panel-width) - var(--char-panel-width) - var(--settings-panel-width) - var(--stcdxcodex));
    height: 100vh;
    background: var(--cinematic-gradient), var(--lotus-gradient), var(--mandala-gradient), var(--zen-garden-gradient), var(--silk-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--bamboo-texture), var(--ink-wash-effect), var(--calligraphy-stroke), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals); /* Added koi pond and sakura effects */
    backdrop-filter: var(--ios-blur);
    -webkit-backdrop-filter: var(--ios-blur);
    padding: 36px;
    overflow-y: auto;
    z-index: 10;
    position: fixed;
    transition: var(--hover-transition);
}

#sheld:hover {
    box-shadow: var(--hover-glow);
}

#chat,
#form_sheld {
    width: calc(100vw - var(--nav-bar-width) - var(--cfgConfig-panel-width) - var(--char-panel-width) - var(--expression-image-width) - var(--authors-note-panel-width) - var(--settings-panel-width) - var(--stcdxcodex));
    padding: 36px;
}

/* ===== Panels ===== */
#cfgConfig,
#right-nav-panel {
    width: var(--cfgConfig-panel-width);
    height: 100vh;
    background: var(--cinematic-gradient), var(--serene-gradient), var(--golden-light-gradient), var(--zen-garden-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals); /* Added koi pond and sakura effects */
    box-shadow: var(--shadow-strong);
    z-index: 40;
    position: fixed;
    top: 0;
    backdrop-filter: var(--ios-blur);
    -webkit-backdrop-filter: var(--ios-blur);
    transition: var(--hover-transition);
}

#right-nav-panel {
    width: var(--char-panel-width);
    z-index: 20;
    left: var(--nav-bar-width);
}

#cfgConfig:hover,
#right-nav-panel:hover {
    box-shadow: var(--hover-glow);
}

#top-settings-holder {
    width: var(--nav-bar-width);
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.98);
    background-image: var(--serene-gradient), var(--golden-light-gradient), var(--zen-garden-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals);
    box-shadow: var(--shadow-strong);
    backdrop-filter: var(--ios-blur);
    -webkit-backdrop-filter: var(--ios-blur);
    border-right: 6px solid var(--SmartThemeShadowColor);
    padding: 36px 12px;
    gap: 24px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: fixed;
    z-index: 50; /* Ensure this is appropriate */
    top: 0;
    left: 0;
    transition: var(--hover-transition);
    display: flex;
    overflow: visible; /* Prevent clipping */
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

#top-settings-holder:hover {
    box-shadow: var(--hover-glow);
    background-image: var(--serene-gradient), var(--golden-light-gradient), var(--zen-garden-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals), var(--mystic-fog-gradient);
    transform: scaleX(1.02) translateZ(0); /* Force GPU rendering */
}

#top-settings-holder .settings-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--border-radius);
    background-color: rgba(0, 0, 0, 0.3);
    transition: var(--hover-transition);
    cursor: pointer;
    width: 100%;
    justify-content: center;
    position: relative; /* Ensure proper stacking */
    z-index: 1; /* Ensure items appear above the parent */
}

#top-settings-holder .settings-item:hover {
    background-color: rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
    box-shadow: var(--hover-glow);
}

/* ===== Drawer Content ===== */
.drawer-content {
    width: var(--drawer-content-panel-width);
    left: calc(var(--nav-bar-width) + var(--char-panel-width));
    padding: 52px;
    background: var(--cinematic-gradient), var(--lotus-gradient), var(--mandala-gradient), var(--zen-garden-gradient), var(--silk-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--bamboo-texture), var(--ink-wash-effect), var(--calligraphy-stroke), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals); /* Added koi pond and sakura effects */
    z-index: 30;
    position: fixed;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    backdrop-filter: var(--ios-blur);
    -webkit-backdrop-filter: var(--ios-blur);
    transition: var(--hover-transition);
}

.drawer-content:hover {
    box-shadow: var(--hover-glow);
}

/* ===== Expression Holder ===== */
#expression-holder {
    right: calc(var(--settings-panel-width) + var(--authors-note-panel-width) + var(--stcdxcodex));
    left: unset;
    justify-content: right;
    position: fixed;
    top: 0;
    z-index: 40;
}

.zoomed_avatar {
    width: var(--expression-image-width);
    right: calc(var(--settings-panel-width) + var(--authors-note-panel-width) + var(--stcdxcodex));
    z-index: 30;
    box-shadow: var(--shadow-soft);
    position: fixed;
    top: 0;
    transition: var(--hover-transition);
}

.zoomed_avatar:hover {
    box-shadow: var(--hover-glow);
}

/* ===== STCDX Codex ===== */
.stcdx--root {
    right: calc(var(--settings-panel-width) + var(--authors-note-panel-width));
    width: var(--stcdxcodex);
    background-color: rgba(0, 0, 0, 0.98);
    background-image: var(--serene-gradient), var(--golden-light-gradient), var(--zen-garden-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals); /* Added koi pond and sakura effects */
    z-index: 50;
    box-shadow: var(--shadow-strong);
    position: fixed;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    backdrop-filter: var(--ios-blur);
    -webkit-backdrop-filter: var(--ios-blur);
    transition: var(--hover-transition);
}

.stcdx--root:hover {
    box-shadow: var(--hover-glow);
}

/* ===== Buttons and Interactive Elements ===== */
button, .button-like {
    background-color: var(--SmartThemeShadowColor);
    border: none;
    border-radius: var(--border-radius);
    padding: 14px 28px;
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--hover-transition);
    background-image: var(--golden-light-gradient), var(--zen-garden-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals); /* Added koi pond and sakura effects */
}

button:hover, .button-like:hover {
    background-color: var(--accent-color);
    transform: scale(var(--hover-scale));
    box-shadow: var(--hover-glow);
}

button:focus, .button-like:focus {
    outline: 3px solid var(--SmartThemeShadowColor);
    outline-offset: 3px;
}

/* ===== Focus States for Accessibility ===== */
a:focus, button:focus, input:focus, textarea:focus {
    outline: 3px solid var(--SmartThemeShadowColor);
    outline-offset: 3px;
}

/* ===== Animations ===== */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

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

@keyframes wuxia-smoke {
    0% { opacity: 0; transform: translateY(0); }
    50% { opacity: 0.5; transform: translateY(-10px); }
    100% { opacity: 0; transform: translateY(-20px); }
}

.animated-pulse {
    animation: var(--pulse-animation);
}

.wuxia-smoke-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--wuxia-smoke);
    animation: wuxia-smoke 5s infinite ease-in-out;
    pointer-events: none;
}

/* ===== Text Hover Effects ===== */
a, .link-like {
    color: var(--SmartThemeShadowColor);
    text-decoration: none;
    transition: var(--hover-transition);
}

a:hover, .link-like:hover {
    color: var(--accent-color);
    text-shadow: var(--hover-glow);
}

/* ===== Input Fields ===== */
input, textarea {
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--SmartThemeShadowColor);
    border-radius: var(--border-radius);
    padding: 14px;
    color: var(--text-color);
    font-family: var(--font-family);
    transition: var(--hover-transition);
    background-image: var(--zen-garden-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals); /* Added koi pond and sakura effects */
}

input:hover, textarea:hover {
    border-color: var(--accent-color);
    box-shadow: var(--hover-glow);
}

input:focus, textarea:focus {
    border-color: var(--SmartThemeShadowColor);
    box-shadow: var(--hover-glow);
    outline: none;
}

/* ===== Dropdowns ===== */
select {
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--SmartThemeShadowColor);
    border-radius: var(--border-radius);
    padding: 14px;
    color: var(--text-color);
    font-family: var(--font-family);
    transition: var(--hover-transition);
    background-image: var(--zen-garden-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals); /* Added koi pond and sakura effects */
}

select:hover {
    border-color: var(--accent-color);
    box-shadow: var(--hover-glow);
}

select:focus {
    border-color: var(--SmartThemeShadowColor);
    box-shadow: var(--hover-glow);
    outline: none;
}

/* ===== Hide Top-Bar Element ===== */
#top-bar {
    display: none !important; /* Ensures the top-bar is completely hidden */
}

/* ===== New Animations ===== */
@keyframes sakura-fall {
    0% { transform: translateY(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

.sakura-petals-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--sakura-petals);
    animation: sakura-fall 10s infinite linear;
    pointer-events: none;
}

@keyframes ripple {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.2; }
    100% { transform: scale(1); opacity: 0.5; }
}

.koi-pond-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--koi-pond-effect);
    animation: ripple 5s infinite ease-in-out;
    pointer-events: none;
}

/* ===== Checkbox Styles ===== */
input[type="checkbox"] {
    appearance: none; /* Remove default styling */
    width: 20px;
    height: 20px;
    border: 2px solid var(--SmartThemeShadowColor);
    border-radius: var(--border-radius);
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: var(--hover-transition);
    position: relative;
}

input[type="checkbox"]:hover {
    border-color: var(--accent-color);
    box-shadow: var(--hover-glow);
}

input[type="checkbox"]:checked {
    background-color: var(--SmartThemeShadowColor);
    border-color: var(--SmartThemeShadowColor);
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    background-color: var(--text-color);
    border-radius: 2px;
    transform: translate(-50%, -50%);
}

input[type="checkbox"]:focus {
    outline: 3px solid var(--SmartThemeShadowColor);
    outline-offset: 3px;
}

/* ===== Enhanced Dropdown Styles ===== */
select {
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid var(--SmartThemeShadowColor);
    border-radius: var(--border-radius);
    padding: 14px 36px 14px 14px; /* Added more padding for the dropdown arrow */
    color: var(--text-color);
    font-family: var(--font-family);
    transition: var(--hover-transition);
    background-image: var(--golden-light-gradient), var(--zen-garden-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals);
    appearance: none; /* Remove default arrow */
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    position: relative;
}

/* Custom dropdown arrow */
select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e"),
                      var(--golden-light-gradient), var(--zen-garden-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals);
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
}

select:hover {
    border-color: var(--accent-color);
    box-shadow: var(--hover-glow);
    background-color: rgba(0, 0, 0, 0.9);
}

select:focus {
    border-color: var(--SmartThemeShadowColor);
    box-shadow: var(--hover-glow);
    outline: none;
}

/* Dropdown options styling */
select option {
    background-color: rgba(0, 0, 0, 0.9);
    color: var(--text-color);
    font-family: var(--font-family);
    padding: 10px;
    border-radius: var(--border-radius);
    transition: var(--hover-transition);
}

select option:hover {
    background-color: var(--accent-color);
    color: var(--luxury-color);
}

select option:checked {
    background-color: var(--SmartThemeShadowColor);
    color: var(--text-color);
}

/* Dropdown container for additional styling */
.dropdown-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 300px;
}

/* Dropdown hover effect */
.dropdown-container:hover select {
    transform: scale(1.02);
    box-shadow: var(--hover-glow);
}

#send_but {
    background-color: transparent; /* Transparent background for elegance */
    border: none;
    border-radius: 50%; /* Circular shape for a refined look */
    width: 56px; /* Slightly larger for prominence */
    height: 56px;
    padding: 14px; /* Padding for the icon */
    cursor: pointer;
    transition: var(--hover-transition);
    box-shadow: var(--shadow-soft); /* Subtle shadow for depth */
    position: relative;
    overflow: hidden; /* Ensures animations stay within the button */
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--golden-light-gradient), var(--zen-garden-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals); /* Rich, layered gradients */
    backdrop-filter: var(--ios-blur); /* Glass-like effect */
    -webkit-backdrop-filter: var(--ios-blur);
}

/* Paper plane icon styling */
#send_but::before {
    content: '';
    width: 28px; /* Icon size */
    height: 28px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>'); /* Paper plane SVG */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); /* Subtle shadow for the icon */
    transition: var(--hover-transition);
    z-index: 1; /* Ensure icon is above other effects */
}

/* Hover effect */
#send_but:hover {
    transform: scale(var(--hover-scale));
    box-shadow: var(--hover-glow);
    background-color: var(--glass-effect); /* Subtle glass effect on hover */
    background-image: var(--golden-light-gradient), var(--zen-garden-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals); /* Enhanced gradients */
}

/* Hover effect for the icon */
#send_but:hover::before {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); /* Enhanced shadow on hover */
    transform: translateY(-2px) rotate(-10deg); /* Slight upward movement and rotation */
}

/* Click animation */
#send_but:active {
    transform: scale(0.95); /* Slight shrink on click */
    box-shadow: 0 0 20px var(--SmartThemeShadowColor); /* Stronger glow on click */
}

/* Ripple effect for click feedback */
#send_but::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 70%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
    pointer-events: none;
    z-index: 0; /* Ensure ripple is behind the icon */
}

#send_but:active::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Sakura petals falling effect on hover */
#send_but:hover .sakura-petals-effect {
    opacity: 1;
}

.sakura-petals-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--sakura-petals);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 2; /* Ensure petals are above the button */
}

/* Koi pond ripple effect on hover */
#send_but:hover .koi-pond-effect {
    opacity: 1;
}

.koi-pond-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--koi-pond-effect);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 1; /* Ensure ripple is behind the icon */
}

/* Disabled state */
#send_but:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: none;
}

#send_but:disabled::before {
    filter: grayscale(100%); /* Desaturate the icon when disabled */
}

#send_but:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Optional: Add a subtle pulse animation for attention */
#send_but.pulse {
    animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Flying animation for the icon */
@keyframes fly {
    0% { transform: translateY(-2px) rotate(-10deg); }
    50% { transform: translateY(-4px) rotate(-15deg); }
    100% { transform: translateY(-2px) rotate(-10deg); }
}

/* ===== Base Styles for #mes_stop (Stop Button) ===== */
#mes_stop {
    background-color: transparent; /* Transparent background for elegance */
    border: none;
    border-radius: 50%; /* Circular shape for consistency */
    width: 56px; /* Optimal size for clickable icons */
    height: 56px;
    padding: 14px; /* Padding for the icon */
    cursor: pointer;
    transition: var(--hover-transition);
    box-shadow: var(--shadow-soft); /* Subtle shadow for depth */
    position: relative;
    overflow: hidden; /* Ensures animations stay within the button */
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--golden-light-gradient), var(--zen-garden-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals); /* Rich, layered gradients */
    backdrop-filter: var(--ios-blur); /* Glass-like effect */
    -webkit-backdrop-filter: var(--ios-blur);
}

/* Square icon styling (stop playback) */
#mes_stop i {
    font-size: 24px; /* Icon size */
    color: var(--text-color); /* Use text color for the icon */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); /* Subtle shadow for the icon */
    transition: var(--hover-transition);
    z-index: 1; /* Ensure icon is above other effects */
}

/* Remove the circle around the square */
#mes_stop i::before {
    content: '\f04d'; /* Unicode for fa-stop (square) */
    font-family: 'Font Awesome 6 Free'; /* Ensure FontAwesome is loaded */
    font-weight: 900; /* Required for solid icons */
}

/* Hover effect for stop button */
#mes_stop:hover {
    transform: scale(var(--hover-scale));
    box-shadow: var(--hover-glow);
    background-color: var(--glass-effect); /* Subtle glass effect on hover */
    background-image: var(--golden-light-gradient), var(--zen-garden-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals); /* Enhanced gradients */
}

#mes_stop:hover i {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); /* Enhanced shadow on hover */
    transform: scale(1.1); /* Slight scale-up for emphasis */
}

/* Click animation for stop button */
#mes_stop:active {
    transform: scale(0.95); /* Slight shrink on click */
    box-shadow: 0 0 20px var(--SmartThemeShadowColor); /* Stronger glow on click */
}

/* Ripple effect for click feedback */
#mes_stop::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 70%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
    pointer-events: none;
    z-index: 0; /* Ensure ripple is behind the icon */
}

#mes_stop:active::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* ===== Waiting State Animation ===== */
#mes_stop.waiting i {
    animation: pulse 1.5s infinite ease-in-out; /* Pulsing animation for waiting state */
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Disabled state for stop button */
#mes_stop:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: none;
}

#mes_stop:disabled i {
    filter: grayscale(100%); /* Desaturate the icon when disabled */
}

#mes_stop:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* ===== Chat Bubble Styles ===== */
body.bubblechat .mes {
    background-color: rgba(1, 1, 1, 0.98); /* Pure black for all messages */
    border: 2px solid var(--SmartThemeShadowColor);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-soft);
    backdrop-filter: var(--ios-blur);
    -webkit-backdrop-filter: var(--ios-blur);
    background-image: linear-gradient(145deg, rgba(10, 10, 10, 0.1), rgba(1, 1, 1, 0.1)), var(--zen-garden-gradient); /* Dark gradient */
    transition: var(--hover-transition);
    padding: 16px 24px;
    margin: 12px 0;
    position: relative;
}

/* User-specific chat bubble */
body.bubblechat .mes[is_user="true"] {
    background-color: rgba(10, 8, 6, 0.98); /* Slightly lighter black for user messages */
    border-color: rgba(50, 40, 30, 0.3); /* Very subtle border color */
    background-image: linear-gradient(145deg, rgba(30, 20, 10, 0.1), rgba(10, 8, 6, 0.1)), var(--zen-garden-gradient); /* Muted gradient */
}

/* Bot-specific chat bubble */
body.bubblechat .mes:not([is_user="true"]) {
    background-color: rgba(0, 0, 0, 0.98); /* Pure black for bot messages */
    border-color: var(--SmartThemeShadowColor);
    background-image: linear-gradient(145deg, rgba(5, 5, 5, 0.1), rgba(0, 0, 0, 0.1)); /* Extremely dark gradient */
}

/* Hover effects for chat bubbles */
body.bubblechat .mes:hover {
    box-shadow: var(--hover-glow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Ripple effect for chat bubbles */
body.bubblechat .mes::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%; /* Adjusted to prevent excessive height */
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 70%); /* Much more transparent */
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

body.bubblechat .mes:hover::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3; /* Much less visible */
}

/* Text styling inside chat bubbles */
body.bubblechat .mes .mes-text {
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: 1.1rem;
    line-height: 1.6;
    text-shadow: var(--text-shadow);
    position: relative;
    z-index: 2;
}

/* Timestamp styling */
body.bubblechat .mes .mes-timestamp {
    color: rgba(240, 240, 240, 0.7);
    font-size: 0.9rem;
    text-align: right;
    margin-top: 8px;
    text-shadow: var(--text-shadow);
}

/* No shadows mode */
body.noShadows * {
    text-shadow: none !important;
}

body.noShadows .mes {
    box-shadow: none !important;
}

/* Animations */
@keyframes ripple {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.2; }
    100% { transform: scale(1); opacity: 0.5; }
}

#send_textarea {
  min-height: calc(var(--bottomFormBlockSize) + 2px);
  height: calc(var(--bottomFormBlockSize) + 2px);
  max-height: 50vh;
  max-height: 100dvh;
  word-wrap: break-word;
  resize: vertical;
  display: block;
  background-color: rgba(0, 0, 0, 0.6); /* Darker background for contrast */
  border: 2px solid var(--SmartThemeShadowColor); /* Consistent border style */
  border-radius: var(--border-radius); /* Softer corners */
  box-shadow: var(--shadow-soft); /* Subtle shadow for depth */
  padding: 14px; /* Increased padding for better spacing */
  font-family: var(--font-family); /* Consistent font family */
  margin: 0;
  text-shadow: var(--text-shadow); /* Consistent text shadow */
  color: var(--text-color); /* Consistent text color */
  flex: 1;
  order: 3;
  field-sizing: content;
  backdrop-filter: var(--ios-blur); /* Glass-like effect */
  -webkit-backdrop-filter: var(--ios-blur);
  transition: var(--hover-transition); /* Smooth transitions */
  background-image: var(--zen-garden-gradient), var(--wuxia-smoke), var(--tao-water-ripple), var(--lotus-petal), var(--spiritual-aura), var(--koi-pond-effect), var(--sakura-petals); /* Layered gradients */
  outline: none; /* Remove default outline */
}

/* Hover effect */
#send_textarea:hover {
  border-color: var(--accent-color); /* Highlight border on hover */
  box-shadow: var(--hover-glow); /* Enhanced glow on hover */
  background-color: rgba(0, 0, 0, 0.7); /* Slightly lighter background */
}

/* Focus effect */
#send_textarea:focus {
  border-color: var(--SmartThemeShadowColor); /* Consistent focus border */
  box-shadow: var(--hover-glow); /* Stronger glow on focus */
  background-color: rgba(0, 0, 0, 0.8); /* Darker background for focus */
}

/* Progress bar styling */
#send_textarea {
  --progColor: rgba(212, 175, 55, 0.8); /* Gold color for progress */
  --progFlashColor: rgba(215, 136, 114, 0.8); /* Flash color */
  --progSuccessColor: rgba(81, 163, 81, 0.8); /* Success color */
  --progErrorColor: rgba(189, 54, 47, 0.8); /* Error color */
  --progAbortedColor: rgba(215, 136, 114, 0.8); /* Aborted color */
  --progWidth: 3px; /* Progress bar thickness */
  --progWidthClip: calc(var(--progWidth) + 2px); /* Clip adjustment */
  --prog: 0%; /* Initial progress */
  --progDone: 0; /* Progress completion */
  border-top: var(--progWidth) solid var(--progColor); /* Progress bar */
  clip-path: polygon(
    0% calc(var(--progDone) * var(--progWidthClip)),
    var(--prog) calc(var(--progDone) * var(--progWidthClip)),
    var(--prog) var(--progWidthClip),
    100% var(--progWidthClip),
    100% 100%,
    0% 100%
  );
  transition: clip-path 200ms, border-color 200ms, box-shadow 200ms; /* Smooth transitions */
}

/* Placeholder text styling */
#send_textarea::placeholder {
  color: rgba(240, 240, 240, 0.6); /* Lighter placeholder text */
  font-family: var(--font-family); /* Consistent font family */
  text-shadow: var(--text-shadow); /* Consistent text shadow */
}

/* Disabled state */
#send_textarea:disabled {
  opacity: 0.5; /* Reduced opacity */
  cursor: not-allowed; /* Disabled cursor */
  background-color: rgba(0, 0, 0, 0.3); /* Darker background */
  box-shadow: none; /* No shadow */
}

/* Base styles for #send_form */
#send_form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  margin: 0 auto 0 auto;
  border: 2px solid var(--SmartThemeBorderColor); /* Consistent border thickness */
  border-radius: 0 0 var(--border-radius) var(--border-radius); /* Consistent border radius */
  background-color: var(--SmartThemeBlurTintColor);
  backdrop-filter: blur(var(--SmartThemeBlurStrength));
  -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength)); /* Safari support */
  padding: 12px; /* Added padding for spacing */
  box-shadow: var(--shadow-soft); /* Consistent shadow */
  position: relative; /* Ensure proper stacking */
  z-index: 10; /* Ensure it appears above other elements */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smoother transitions */
}

/* Hover effect for #send_form (removed border and shadow changes) */
#send_form:hover {
  /* No changes to border or shadow on hover */
}

/* Focus effect for #send_form */
#send_form:focus-within {
  border-color: var(--accent-color); /* Keep focus border color */
  box-shadow: var(--hover-glow); /* Keep focus glow */
}

/* No blur mode */
body.no-blur #top-bar,
body.no-blur #send_form {
  background-color: var(--SmartThemeBlurTintColor) !important;
  backdrop-filter: none !important; /* Remove blur in no-blur mode */
  -webkit-backdrop-filter: none !important;
}

/* No shadows mode */
body.noShadows * {
  text-shadow: none !important;
}

body.noShadows #send_form {
  box-shadow: none !important; /* Remove shadow in no-shadow mode */
}

/* Ensure #send_form does not overlap #send_textarea */
#send_form {
  margin-top: -2px; /* Adjust to align with the textarea border */
  border-top: none; /* Remove top border to prevent overlap */
}

/* Add a subtle top border to #send_textarea to visually separate it */
#send_textarea {
  border: 2px solid var(--SmartThemeBorderColor); /* Consistent border */
  border-radius: var(--border-radius) var(--border-radius) 0 0; /* Rounded top corners */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smoother transitions */
}

/* Hover effect for #send_textarea (removed border and shadow changes) */
#send_textarea:hover {
  /* No changes to border or shadow on hover */
}

/* Focus effect for #send_textarea */
#send_textarea:focus {
  border-color: var(--accent-color); /* Keep focus border color */
  box-shadow: var(--hover-glow); /* Keep focus glow */
}