style.css

/* ==========================================================================
   ArgenVolt Design System - Refined CSS Overrides
   Theme: Copper, Earth, Wood, and Electricity (Premium Dark Tech)
   Guidelines: taste-skill compliant (contrast, typography, spacing, tactile states)
   ========================================================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;600;700&display=swap');

:root {
    /* Color Palette (Locked Accent & Neutral Base) */
    --cream: #fbf6e8;          /* Warm cream high-contrast text */
    --walnut: #5a3a22;         /* Earthy medium brown for borders */
    --bark: #3a2516;           /* Dark wood accent */
    --ink: #120d09;            /* Deep black/brown input background */
    --copper: #c98a3c;         /* Premium metal accent */
    --rust: #8a4a2b;           /* Burnt orange secondary accent */
    --sun: #e6a85c;            /* Bright copper highlight text */
    --text-muted: #b89f88;     /* Subdued helper text */
    
    /* Gradio Native Theme Variables Override */
    --body-background-fill: #15100c !important;
    --background-fill-primary: #15100c !important;
    --background-fill-secondary: #1a140f !important;
    --panel-background-fill: #1a140f !important;
    --panel-border-color: #5a3a22 !important;
    
    --block-background-fill: #1a140f !important;
    --block-border-color: #5a3a22 !important;
    --block-border-width: 1px !important;
    --block-label-text-color: #fbf6e8 !important;
    --block-label-background-fill: #3a2516 !important;
    --block-title-text-color: #e6a85c !important;
    
    --body-text-color: #fbf6e8 !important;
    --body-text-color-subdued: #b89f88 !important;
    
    --input-background-fill: #120d09 !important;
    --input-background-fill-focus: #15100c !important;
    --input-border-color: #5a3a22 !important;
    --input-border-color-focus: #e6a85c !important;
    --input-text-color: #fbf6e8 !important;
    --input-placeholder-color: #8a6a48 !important;
    
    --button-primary-background-fill: linear-gradient(135deg, #8a4a2b, #5a3a22) !important;
    --button-primary-background-fill-hover: linear-gradient(135deg, #c98a3c, #8a4a2b) !important;
    --button-primary-text-color: #fbf6e8 !important;
    --button-primary-border-color: #c98a3c !important;
    
    --button-secondary-background-fill: #3a2516 !important;
    --button-secondary-text-color: #fbf6e8 !important;
    --button-secondary-border-color: #5a3a22 !important;
    
    --border-color-primary: #5a3a22 !important;
    --border-color-accent: #c98a3c !important;
    --color-accent: #c98a3c !important;
    --slider-color: #c98a3c !important;
    
    /* Chatbot native theme overrides */
    --user-message-background-fill: var(--rust) !important;
    --bot-message-background-fill: #261f17 !important;
    --user-message-text-color: var(--cream) !important;
    --bot-message-text-color: var(--cream) !important;
    --chatbot-background-fill: #1a140f !important;
    --chatbot-border-color: var(--walnut) !important;
}

/* 1. Base App Container */
body, 
.gradio-container, 
#root, 
.app {
    background: radial-gradient(circle at 50% 0%, #2a2118, #15100c) !important;
    color: var(--cream) !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
    line-height: 1.6;
}

.gradio-container {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 30px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: 100vh !important;
}

/* Force dark mode canvas background */
.gradio-container > div {
    background: transparent !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #15100c;
}
::-webkit-scrollbar-thumb {
    background: var(--walnut);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--copper);
}

/* 2. Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: var(--sun) !important;
    letter-spacing: -0.02em !important;
}

h1 {
    font-size: 2.3rem !important;
}

/* 3. Tabs Navigation */
.tabs {
    background: transparent !important;
    border: none !important;
}

.tab-nav {
    border-bottom: 2px solid var(--walnut) !important;
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    background: transparent !important;
}

/* Custom Tab Items - Inactive State */
.gradio-container [class*="tab-nav"] button,
.gradio-container button[class*="tab-nav-item"],
.gradio-container .tabs button,
.tab-nav button,
button.tab-nav-item {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--cream) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 8px 8px 0 0 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    opacity: 0.6 !important; /* Clean visual contrast hierarchy */
}

/* Hover State */
.tab-nav button:hover,
.tabs .tab-nav button:hover,
button.tab-nav-item:hover,
.gradio-container [class*="tab-nav"] button:hover {
    color: var(--sun) !important;
    background-color: rgba(251, 246, 232, 0.05) !important;
    opacity: 1.0 !important;
}

/* Active / Selected State */
.tab-nav button.selected,
.tabs .tab-nav button.selected,
button.tab-nav-item.selected,
.gradio-container [class*="tab-nav"] button.selected,
.gradio-container [class*="tab-nav"] button[class*="selected"],
.gradio-container button[class*="tab-nav-item"][class*="selected"] {
    color: var(--sun) !important;
    background-color: rgba(251, 246, 232, 0.08) !important;
    border-bottom: 3px solid var(--sun) !important;
    opacity: 1.0 !important;
}

/* 4. Form Layouts & Cards */
.gradio-container div[class*="form"],
.gradio-container div[class*="block"],
.gradio-container div[class*="padded"],
.gradio-container div[class*="box"],
.gradio-container .form,
.gradio-container .block,
.gradio-container .box {
    background-color: #1a140f !important;
    background: #1a140f !important;
    border: 1px solid var(--walnut) !important;
    border-radius: 12px !important; /* Shape consistency lock */
    color: var(--cream) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Form Labels & Titles */
.gradio-container label span,
.gradio-container .block-label,
.gradio-container [class*="block-label"],
.gradio-container .block-title,
.gradio-container [class*="block-title"],
.gradio-container legend,
.gradio-container [class*="info"],
.gradio-container .info,
.gradio-container .markdown-text h1,
.gradio-container .markdown-text h2,
.gradio-container .markdown-text h3 {
    color: var(--sun) !important;
    font-weight: 600 !important;
}

/* Descriptive help texts */
.gradio-container [class*="info"] span,
.gradio-container .info span,
.gradio-container p[class*="info"],
.gradio-container div[class*="info"],
.gradio-container .markdown-text p,
.gradio-container .prose p,
.gradio-container [class*="prose"] p {
    color: var(--cream) !important;
    font-weight: normal !important;
    opacity: 0.9 !important;
}

/* 5. Inputs, Dropdowns & Sliders */
.gradio-container input, 
.gradio-container select, 
.gradio-container textarea, 
.gradio-container input[type="number"], 
.gradio-container input[type="text"],
.gradio-container [class*="input"],
.gradio-container select[class*="select"] {
    background-color: var(--ink) !important;
    background: var(--ink) !important;
    color: var(--cream) !important;
    border: 1.5px solid var(--walnut) !important;
    border-radius: 8px !important; /* Shape consistency lock */
    padding: 10px 14px !important;
    font-size: 14.5px !important;
    transition: all 0.2s ease !important;
}

.gradio-container input:focus, 
.gradio-container select:focus, 
.gradio-container textarea:focus {
    border-color: var(--sun) !important;
    box-shadow: 0 0 0 3px rgba(230, 168, 92, 0.2) !important;
    outline: none !important;
}

/* Dropdown list overrides */
.gradio-container ul.options,
.gradio-container .options,
.gradio-container ul[class*="options"],
.gradio-container [class*="dropdown"] ul,
.gradio-container [class*="dropdown-menu"] {
    background-color: var(--ink) !important;
    background: var(--ink) !important;
    border: 1.5px solid var(--walnut) !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

.gradio-container .option,
.gradio-container li.item,
.gradio-container ul.options li,
.gradio-container [class*="dropdown-item"],
.gradio-container [class*="select-option"] {
    background-color: var(--ink) !important;
    color: var(--cream) !important;
    padding: 10px 14px !important;
}

.gradio-container .option:hover,
.gradio-container li.item:hover,
.gradio-container ul.options li:hover,
.gradio-container [class*="dropdown-item"]:hover,
.gradio-container [class*="select-option"]:hover {
    background-color: var(--walnut) !important;
    color: var(--sun) !important;
}

/* Sliders */
.gradio-container input[type="range"] {
    accent-color: var(--sun) !important;
}

.gradio-container .slider-limits,
.gradio-container [class*="limits"],
.gradio-container span[class*="limits"],
.gradio-container .range-limits span {
    color: var(--sun) !important;
    font-weight: 600 !important;
    opacity: 0.95 !important;
}

.gradio-container [class*="range-value"],
.gradio-container span[class*="value"],
.gradio-container .slider-value {
    color: var(--sun) !important;
    font-weight: 700 !important;
}

/* 6. Primary Button with Tactile Feedback */
.gradio-container button.primary,
.gradio-container button[variant="primary"],
.gradio-container button.gr-button-primary,
.gradio-container button[class*="primary"],
.gradio-container button[class*="gr-button-primary"] {
    background: linear-gradient(135deg, var(--rust), var(--walnut)) !important;
    color: var(--cream) !important; /* Strict high-contrast rule */
    border: 1.5px solid var(--copper) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.04em !important;
    padding: 12px 24px !important;
    border-radius: 8px !important; /* Shape consistency lock */
    box-shadow: 0 4px 12px rgba(58, 37, 22, 0.3) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.gradio-container button.primary:hover,
.gradio-container button[class*="primary"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(230, 168, 92, 0.25) !important;
    background: linear-gradient(135deg, var(--copper), var(--rust)) !important;
    color: #ffffff !important;
    border-color: var(--sun) !important;
}

.gradio-container button.primary:active,
.gradio-container button[class*="primary"]:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* 7. Chatbot interface */
.gradio-container .chatbot,
.gradio-container [class*="chatbot"],
.gradio-container [data-testid="chatbot"] {
    background-color: #1a140f !important;
    background: #1a140f !important;
    border: 1.5px solid var(--walnut) !important;
    border-radius: 12px !important;
    height: 750px !important;
}

/* Chat bubble common styling */
.gradio-container .chatbot .message,
.gradio-container [class*="chatbot"] [class*="message"] {
    border: 1.5px solid var(--walnut) !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    padding: 12px 16px !important;
}

/* User Bubble (Burnt Orange/Rust) */
.gradio-container .chatbot .user,
.gradio-container [class*="chatbot"] [class*="user"],
.gradio-container [data-testid="user-message"],
.gradio-container .chatbot .message.user,
.gradio-container [class*="chatbot"] [class*="message"][class*="user"] {
    background-color: var(--rust) !important;
    background: var(--rust) !important;
    color: var(--cream) !important;
    border-radius: 12px 12px 0 12px !important;
    border-color: var(--rust) !important;
}

.gradio-container .chatbot .user *,
.gradio-container [class*="chatbot"] [class*="user"] *,
.gradio-container [data-testid="user-message"] *,
.gradio-container .chatbot .message.user *,
.gradio-container [class*="chatbot"] [class*="message"][class*="user"] * {
    color: var(--cream) !important;
}

/* Bot Bubble (Dark Wood/Bark) */
.gradio-container .chatbot .bot,
.gradio-container [class*="chatbot"] [class*="bot"],
.gradio-container [data-testid="bot-message"],
.gradio-container .chatbot .message.bot,
.gradio-container [class*="chatbot"] [class*="message"][class*="bot"] {
    background-color: #261f17 !important;
    background: #261f17 !important;
    color: var(--cream) !important;
    border-radius: 12px 12px 12px 0 !important;
    border-color: var(--walnut) !important;
}

.gradio-container .chatbot .bot *,
.gradio-container [class*="chatbot"] [class*="bot"] *,
.gradio-container [data-testid="bot-message"] *,
.gradio-container .chatbot .message.bot *,
.gradio-container [class*="chatbot"] [class*="message"][class*="bot"] * {
    color: var(--cream) !important;
}

/* Chat bubble action buttons (copy, delete, share) visibility */
.gradio-container .chatbot [class*="message-actions"],
.gradio-container [class*="chatbot"] [class*="actions"],
.gradio-container .chatbot button.action,
.gradio-container [class*="chatbot"] button.action,
.gradio-container button.copy-button {
    background-color: #3a2516 !important;
    background: #3a2516 !important;
    border: 1px solid var(--walnut) !important;
    border-radius: 4px !important;
    color: var(--cream) !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
    opacity: 0.95 !important;
    transition: all 0.2s ease !important;
}

.gradio-container .chatbot button.action:hover,
.gradio-container [class*="chatbot"] button.action:hover,
.gradio-container button.copy-button:hover {
    background-color: var(--rust) !important;
    color: var(--sun) !important;
}

.gradio-container .chatbot button.action svg,
.gradio-container [class*="chatbot"] button.action svg,
.gradio-container button.copy-button svg {
    fill: var(--cream) !important;
    stroke: var(--cream) !important;
}

/* Suggestion cards / Examples at bottom of Chat */
.gradio-container .samples button,
.gradio-container [class*="samples"] button,
.gradio-container button[class*="sample"],
.gradio-container button[class*="example"],
.gradio-container div[class*="sample"] button {
    background-color: #261f17 !important;
    background: #261f17 !important;
    color: var(--sun) !important;
    border: 1.5px solid var(--walnut) !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    padding: 10px 14px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    opacity: 1.0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    text-align: left !important;
}

.gradio-container .samples button:hover,
.gradio-container button[class*="sample"]:hover,
.gradio-container button[class*="example"]:hover {
    background-color: var(--walnut) !important;
    color: var(--cream) !important;
    border-color: var(--copper) !important;
    transform: translateY(-1px) !important;
}

/* Accordion overrides if any */
.gradio-container .accordion,
.gradio-container [class*="accordion"] {
    border: 1px solid var(--walnut) !important;
    background-color: #1a140f !important;
}

/* Custom styling for HTML prose outputs inside Gradio HTML boxes to override default Svelte styles */
.gradio-container [class*="html"] p:not([style]),
.gradio-container [class*="html"] ul:not([style]),
.gradio-container [class*="html"] li:not([style]),
.gradio-container [class*="html"] span:not([style]),
.gradio-container [class*="html"] b:not([style]),
.gradio-container [class*="html"] div:not([style]),
.gradio-container .prose p:not([style]),
.gradio-container .prose ul:not([style]),
.gradio-container .prose li:not([style]),
.gradio-container .prose span:not([style]),
.gradio-container .prose b:not([style]),
.gradio-container .prose div:not([style]) {
    color: var(--cream) !important;
}

.gradio-container [class*="html"] h3,
.gradio-container [class*="html"] h4,
.gradio-container .prose h3,
.gradio-container .prose h4 {
    color: var(--sun) !important;
}

/* 9. Sidebar Navigation Layout Styling */
#sidebar-panel {
    border-right: 1.5px solid var(--walnut) !important;
    padding-right: 25px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

#content-panel {
    padding-left: 25px !important;
}

/* Nav Button overrides for Sidebar navigation */
.gradio-container button.nav-btn {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 14px 18px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-bottom: 4px !important;
    border-width: 1.5px !important;
}

.gradio-container button.nav-btn.secondary {
    background: #1d1712 !important;
    border-color: #3e2818 !important;
    color: var(--text-muted) !important;
    opacity: 0.85 !important;
    box-shadow: none !important;
}

.gradio-container button.nav-btn.secondary:hover {
    background: #2a2019 !important;
    border-color: var(--copper) !important;
    color: var(--cream) !important;
    opacity: 1.0 !important;
    transform: translateX(3px) !important; /* Micro-motion pull */
}

.gradio-container button.nav-btn.primary {
    background: linear-gradient(135deg, #9d5a37, #5a3a22) !important;
    border-color: var(--copper) !important;
    color: var(--cream) !important;
    box-shadow: 0 4px 12px rgba(201, 138, 60, 0.15) !important;
    position: relative !important;
}

/* Active indicator accent for primary button in sidebar */
.gradio-container button.nav-btn.primary::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 20% !important;
    height: 60% !important;
    width: 4px !important;
    background-color: var(--sun) !important;
    border-radius: 0 4px 4px 0 !important;
}

/* 10. Chatbot Code Blocks (Contrast Fix) */
.gradio-container pre,
.gradio-container code,
.gradio-container .chatbot .message pre,
.gradio-container .chatbot .message code,
.gradio-container [class*="chatbot"] pre,
.gradio-container [class*="chatbot"] code {
    background-color: #120d09 !important;
    background: #120d09 !important;
    color: #fbf6e8 !important;
    border: 1px solid var(--walnut) !important;
    border-radius: 6px !important;
    font-family: 'Courier New', Courier, monospace !important;
}

.gradio-container pre,
.gradio-container .chatbot .message pre,
.gradio-container [class*="chatbot"] pre {
    padding: 12px !important;
    margin: 8px 0 !important;
    overflow-x: auto !important;
}

.gradio-container code,
.gradio-container .chatbot .message code,
.gradio-container [class*="chatbot"] code {
    padding: 2px 5px !important;
}

/* Ensure that all nested elements inside pre (like code or highlight.js span tags) also have high-contrast text color */
.gradio-container pre *,
.gradio-container .chatbot .message pre *,
.gradio-container [class*="chatbot"] pre * {
    color: #fbf6e8 !important;
}