/* ==================== CSS VARIABLE DEFINITIONS PER THEME ==================== */

.light-theme {
    --primary: #222222;
    --primary-hover: #000000;
    --accent: #ffffff;
    --bg: #111111;
    --bg-dark: #000000;
    --text: #ffffff;
    --text-inverse: #222;
    --user-bg: #ffffff;
    --bot-bg: #ddd;
}

.blue-theme {
    --primary: #64ffda;
    --primary-hover: #4dd0ba;
    --accent: #64ffda;
    --bg: #1976d2;
    --bg-dark: #0d47a1;
    --text: #ffffff;
    --text-inverse: #0d47a1;
    --user-bg: #64ffda;
    --bot-bg: #1565C0;
}

.midnight-theme {
    --primary: #4F46E5;
    --primary-hover: #2563EB;
    --accent: #2563EB;
    --bg: #1E293B;
    --bg-dark: #0F172A;
    --text: #E5E7EB;
    --text-inverse: #ffffff;
    --user-bg: #2563EB;
    --bot-bg: #1E293B;
}

.cyberpunk-theme {
    --primary: #00E5FF;
    --primary-hover: #FF4081;
    --accent: #FF4081;
    --bg: #1A1A2E;
    --bg-dark: #1A1A2E;
    --text: #1A1A2E;
    --text-inverse: #1A1A2E;
    --user-bg: #FF4081;
    --bot-bg: #00E5FF;
}

.arctic-theme {
    --primary: #64B5F6;
    --primary-hover: #42A5F5;
    --accent: #64B5F6;
    --bg: #E3F2FD;
    --bg-dark: #E3F2FD;
    --text: #1E3A5F;
    --text-inverse: #1E3A5F;
    --user-bg: #64B5F6;
    --bot-bg: #E3F2FD;
}

.terminal-theme {
    --primary: #00FF41;
    --primary-hover: #008F11;
    --accent: #00FF41;
    --bg: #0D1B0D;
    --bg-dark: #0D1B0D;
    --text: #00FF41;
    --text-inverse: #0D1B0D;
    --user-bg: #00FF41;
    --bot-bg: #008F11;
}

.sunset-theme {
    --primary: #FF8C42;
    --primary-hover: #D7263D;
    --accent: #FF8C42;
    --bg: #2C1E3D;
    --bg-dark: #2C1E3D;
    --text: #FDE68A;
    --text-inverse: #2C1E3D;
    --user-bg: #FF8C42;
    --bot-bg: #D7263D;
}

.konami-theme {
    --primary: #FF3131;
    --primary-hover: #FFD700;
    --accent: #FFD700;
    --bg: #111;
    --bg-dark: #0D1B2A;
    --text: #FFD700;
    --text-inverse: #ffffff;
    --user-bg: #FF3131;
    --bot-bg: #0D1B2A;
}

.galaxy-theme {
    --primary: #667eea;
    --primary-hover: #764ba2;
    --accent: #f093fb;
    --bg: #1a1a2e;
    --bg-dark: #16213e;
    --text: #ffffff;
    --text-inverse: #ffffff;
    --user-bg: #667eea;
    --bot-bg: #f093fb;
}

.golden-theme {
    --primary: #D4AF37;
    --primary-hover: #F4A460;
    --accent: #D4AF37;
    --bg: #5D4037;
    --bg-dark: #3E2723;
    --text: #F4A460;
    --text-inverse: #3E2723;
    --user-bg: #F4A460;
    --bot-bg: #D4AF37;
}

.cherry-theme {
    --primary: #FF69B4;
    --primary-hover: #FFB7C5;
    --accent: #FF69B4;
    --bg: #FFE4EC;
    --bg-dark: #FFDAE5;
    --text: #8B2E3B;
    --text-inverse: #5D1F27;
    --user-bg: #FFB7C5;
    --bot-bg: #FFDAE5;
}

/* ==================== SHARED THEME STYLES (all themes) ==================== */

[class*="-theme"] .user-message {
    background-color: var(--user-bg);
    color: var(--text-inverse);
    border-color: var(--accent);
}

[class*="-theme"] .bot-message {
    background-color: var(--bot-bg);
    color: var(--text);
    border-color: var(--accent);
}

[class*="-theme"] .sidebar {
    border-left-color: var(--accent);
    color: var(--text);
}

[class*="-theme"] .chat-input-container {
    background: var(--bg);
    color: var(--text);
    border-color: var(--accent);
}

[class*="-theme"] .button {
    background-color: var(--primary);
    color: var(--text-inverse);
    border-color: var(--accent);
}

[class*="-theme"] .button:hover {
    background-color: var(--primary-hover);
}

[class*="-theme"] .site-title {
    color: var(--accent) !important;
}

[class*="-theme"] .menu-label {
    color: var(--p) !important;
}

[class*="-theme"] .menu-list a {
    color: var(--primary);
}

[class*="-theme"] .menu-list a:hover {
    background-color: var(--primary);
    color: var(--text-inverse);
}

[class*="-theme"] .icon-button [class*="-theme"] .slash-button {
    color: var(--text-inverse);
    /* removed background-color so per-theme hovers can work */
}

[class*="-theme"] .icon-button:hover,
[class*="-theme"] .slash-button:hover {
    background-color: var(--primary-hover);
    /* this stays as fallback but per-theme rules below will override it */
}

[class*="-theme"] #word-counter {
    color: var(--accent);
}

[class*="-theme"] .tools-popup {
    background-color: var(--bg);
    color: var(--text);
}

[class*="-theme"] .tool-option:hover {
    background-color: var(--primary);
    color: var(--text-inverse);
}

[class*="-theme"] .send-btn {
    background: var(--primary);
    color: var(--text-inverse);
}

/* === Galaxy gradient overrides === */
.galaxy-theme .user-message {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.galaxy-theme .bot-message {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.galaxy-theme .button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.galaxy-theme .button:hover {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.galaxy-theme .chat-input-container {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.galaxy-theme .menu-list a:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.galaxy-theme .site-title {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Konami unique colors */
.konami-theme .bot-message {
    color: #00FFFF;
}

.konami-theme .menu-list a {
    color: #00FFFF;
}

/* Cyberpunk - restore cyan text on dark bg elements, white on pink user msg */
.cyberpunk-theme .sidebar,
.cyberpunk-theme .chat-input-container,
.cyberpunk-theme .tools-popup {
    color: #00E5FF;
}

.cyberpunk-theme #word-counter {
    color: #FF4081;
}

.cyberpunk-theme .user-message {
    color: #ffffff;
}

/* Arctic - darker chat input container for readability */
.arctic-theme .chat-input-container {
    background: #5B9BD5;
    color: #ffffff;
}

/* Midnight - menu-label more readable */
.midnight-theme .menu-label {
    color: #93C5FD !important;
}

/* Golden - bot message darker text */
.golden-theme .bot-message {
    color: #3E2723;
}

/* Cherry - dark chat input container */
.cherry-theme .chat-input-container {
    background: #C2185B;
    color: #ffffff;
    border-color: #FF69B4;
}

/* Light theme - buttons keep white text on dark button bg */
.light-theme .button,
.light-theme .icon-button,
.light-theme .slash-button {
    color: #ffffff;
}

/* Light theme - sidebar menu links white, input border white */
.light-theme .menu-list a {
    color: #ffffff;
}

.light-theme .chat-input-container {
    border-color: #ffffff;
}

/* ==================== TEXTAREA INHERIT (all themes) ==================== */
[class*="-theme"] #user-input {
    background: transparent;
    color: inherit;
}

/* ==================== BASE STYLES ==================== */

.sidebar {
    padding: 15px;
    border-radius: 10px;
    border-left: 5px solid transparent;
}

.chat-input-container {
    background: #444;
    border-radius: 25px;
    padding: 15px;
    border: 2px solid transparent;
}

.user-message,
.bot-message {
    border-radius: 15px;
    padding: 10px;
    border: 2px solid transparent;
}


.site-title {
    font-weight: bold;
}

.menu-label {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
}

.menu-list a {
    display: block;
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s, transform 0.2s ease-in-out;
}

.menu-list a:hover {
    transform: scale(1.05);
}

.theme-container {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 12px;
    border-radius: 5px;
    z-index: 10;
    display: flex;
    align-items: center;
}

.theme-container label {
    color: white;
    font-size: 14px;
    margin-right: 5px;
}

#theme-select {
    background: #333;
    color: white;
    border: 1px solid white;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 14px;
}

#konami-option {
    display: block;
}

/* ==================== ACTIVE THREAD STYLES ==================== */

body:not([class*="-theme"] ) .active-thread .thread-link {
    background: linear-gradient(135deg, #43ed8d, #38ecb0);
    color: #fff;
    font-weight: 600;
    transform: translateX(3px);
}

/* All themes - active thread uses primary color */
[class*="-theme"] .active-thread .thread-link {
    background-color: var(--primary);
    color: var(--text-inverse);
    font-weight: 600;
    transform: translateX(3px);
    border-color: var(--accent);
}

/* Galaxy - gradient override */
.galaxy-theme .active-thread .thread-link {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
}

/* Cyberpunk - accent pop */
.cyberpunk-theme .active-thread .thread-link {
    background-color: #FF4081;
    color: #ffffff;
}

/* Konami - gold highlight */
.konami-theme .active-thread .thread-link {
    background-color: #FFD700;
    color: #111;
}

/* Cherry - readable contrast */
.cherry-theme .active-thread .thread-link {
    background-color: #FF69B4;
    color: #5D1F27;
}

/* Arctic - darker blue for visibility */
.arctic-theme .active-thread .thread-link {
    background-color: #42A5F5;
    color: #ffffff;
}

/* Golden - warm brown text for contrast */
.golden-theme .active-thread .thread-link {
    background-color: #D4AF37;
    color: #3E2723;
}

/* ==================== THREAD LINK BASE (button reset) ==================== */

.thread-link {
    background: none;
    border: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s, transform 0.2s ease-in-out;
}

.thread-link:hover {
    transform: scale(1.05);
}

/* Theme hover support for buttons */
[class*="-theme"] .menu-list .thread-link {
    color: var(--primary);
}

[class*="-theme"] .menu-list .thread-link:hover {
    background-color: var(--primary);
    color: var(--text-inverse);
}

/* Light theme - active thread needs contrast fix */
.light-theme .active-thread .thread-link {
    background-color: #222222 !important;
    color: #ffffff !important;
}

body.blue-theme .icon-button:hover {
    background: rgba(100, 255, 218, 0.15) !important;
    color: #64ffda !important;
}

body.midnight-theme .icon-button:hover {
    background: rgba(79, 70, 229, 0.2) !important;
    color: #818CF8 !important;
}

body.cyberpunk-theme .icon-button:hover {
    background: rgba(0, 229, 255, 0.15) !important;
    color: #00E5FF !important;
}

body.arctic-theme .icon-button:hover {
    background: rgba(100, 181, 246, 0.2) !important;
    color: #1E3A5F !important;
}

body.terminal-theme .icon-button:hover {
    background: rgba(0, 255, 65, 0.15) !important;
    color: #00FF41 !important;
}

body.sunset-theme .icon-button:hover {
    background: rgba(255, 140, 66, 0.2) !important;
    color: #FF8C42 !important;
}

body.konami-theme .icon-button:hover {
    background: rgba(255, 215, 0, 0.15) !important;
    color: #FFD700 !important;
}

body.galaxy-theme .icon-button:hover {
    background: rgba(102, 126, 234, 0.2) !important;
    color: #f093fb !important;
}

body.golden-theme .icon-button:hover {
    background: rgba(212, 175, 55, 0.2) !important;
    color: #D4AF37 !important;
}

body.cherry-theme .icon-button:hover {
    background: rgba(255, 105, 180, 0.15) !important;
    color: #FF69B4 !important;
}

body.light-theme .icon-button:hover {
    background: rgba(0, 0, 0, 0.15) !important;
    color: #000000 !important;
}