styles.css

:root {

  /* Text colors */
  --primarytext-color: #0f0e09;
  --secondarytext-color: #696966;

  /* Primary colors - Blue theme */
  --primary-dark: #1e3a8a;        /* Deep blue */
  --primary-light: #3b82f6;       /* Medium blue */
  
  /* Secondary colors - Blue shades */
  --secondary-dark: #1d4ed8;      /* Darker blue */
  --secondary-light: #60a5fa;     /* Light blue */

  /* Chat colors */
  --user_message: #bfdbfe;        /* Light blue bubble for user */
  --ai_message: #14b8a6;          /* Medium teal for AI */
  --chathistory_area: #f3f4f6;    /* Very light grey for chat history */
  
  /* Text, Chat, UI */
  --Send: #3b82f6;                /* Send button - medium blue (lighter than clear) */
  --clear: #1e40af;               /* Clear button - darker blue */
  --Send-hover: #2563eb;          /* Send button hover */
  --clear-hover: #1d4ed8;         /* Clear button hover */
  --text_areabackground: #f3f4f6; /* Very light grey for text areas */


  /* Border thickness variables */
  --border-thin: 1px;
  --border-medium: 2px;
  
  /* Semantic border variables */
  --border-default: 1px;
  --border-focus: 2px;
  --border-hover: 3px;
  
  /* Component-specific borders */
  --button-border: 2px;
  --input-border: 1px;
  --card-border: 1px;
}

/* Import Oswald font - Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

/* HIDE the HTML components that create scrollbars */
#component-1, #component-2 {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
}

/* Specific text elements - ENSURE VISIBILITY */
body, p, span, div, h1, h2, h3, h4, h5, h6, label, a {
    color: var(--primarytext-color) !important;
}

/* All Gradio text elements - OVERRIDE GRADIO DEFAULTS */
.gradio-container,
.gradio-container *:not(textarea):not(input):not(button) {
    color: var(--primarytext-color) !important;
}

/* Title header with transparent background */
.title-header {
    background-color: transparent;
    padding: 10px 20px;
    margin: 0 !important;
    border-bottom: var(--border-focus) solid var(--primary-dark);
    text-align: left;
    flex-shrink: 0 !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.title-header h1 {
    font-size: 1.5rem;
    font-weight: 600 !important;
    color: var(--primarytext-color) !important;
    margin: 0;
    padding: 0;
}

/* More aggressive Gradio overrides - keep current background */
.gradio-container, 
.gradio-container *,
[data-testid="block-container"],
.contain {
    background-color: rgb(240, 236, 230) !important;
    font-family: "Oswald", sans-serif !important;
}

/* Chat container - target all possible selectors */
[data-testid="chatbot"], 
.chatbot,
.gradio-chatbot,
#main-chatbot,
[role="log"] {
    background-color: var(--chathistory_area) !important;
    border: var(--border-default) solid var(--primary-dark) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Text input - target all possible selectors */
[data-testid="textbox"] textarea,
.gradio-textbox textarea,
textarea {
    background-color: var(--text_areabackground) !important;
    border: var(--input-border) solid var(--secondary-dark) !important;
    border-radius: 6px !important;
    color: var(--primarytext-color) !important;
    font-family: "Oswald", sans-serif !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Buttons - target all possible selectors */
[data-testid="button"],
.gradio-button,
button.send-button,
button.clear-button {
    border-radius: 6px !important;
    font-family: "Oswald", sans-serif !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    color: var(--primarytext-color) !important;
}

/* Send button specific */
button.send-button,
[data-testid="button"]:nth-of-type(1) {
    background-color: var(--Send) !important;
    color: var(--primarytext-color) !important;
    border: var(--button-border) solid var(--secondary-dark) !important;
}

/* Clear button specific */
button.clear-button,
[data-testid="button"]:nth-of-type(2) {
    background-color: var(--clear) !important;
    color: var(--primarytext-color) !important;
    border: var(--button-border) solid var(--secondary-dark) !important;
}

/* Background area behind everything */
.gradio-container {
    background-color: rgb(240, 236, 230) !important;
    font-family: "Oswald", sans-serif !important;
    color: var(--primarytext-color) !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Target Gradio's internal structure */
.gradio-container > div {
    height: 95% !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Main container wrapper */
.main-container {
    padding-bottom: 50px !important;
}

/* Chat history container/box */
#main-chatbot {
    border: var(--border-default) solid var(--primary-dark);
    background-color: var(--chathistory_area);
    border-radius: 6px !important;
    padding: 15px !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    margin: 15px 20px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: var(--primarytext-color) !important;
}

/* Gradio-specific chat container selectors */
.gradio-container .gradio-chatbot {
    background-color: var(--chathistory_area) !important;
    border: var(--border-default) solid var(--primary-dark) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.gradio-container .gradio-chatbot > div {
    background-color: var(--chathistory_area) !important;
}

.gradio-container .gradio-chatbot .message {
    background-color: transparent !important;
}

/* User message text box */
.message.user {
    border: 1pt solid var(--secondary-dark);
    background-color: var(--user_message);
}

/* User message markdown styling */
.message.user .markdown,
.message.user .markdown * {
    background-color: var(--user_message) !important;
    color: var(--primarytext-color) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    border: var(--border-default) solid var(--primary-dark) !important;
    max-width: 70%;
    margin-left: auto;
    margin-right: 0;
    word-wrap: break-word;
    font-weight: 400 !important;
    margin-bottom: 10px !important;
}

/* AI message text box */
.message.bot {
    border: 1pt solid var(--secondary-dark);
    background-color: var(--ai_message);
}

/* AI message markdown styling */
.message.bot .markdown,
.message.bot .markdown * {
    background-color: var(--ai_message) !important;
    color: var(--primarytext-color) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    border: var(--border-default) solid var(--secondary-dark) !important;
    max-width: 70%;
    margin-left: 0;
    margin-right: auto;
    word-wrap: break-word;
    font-weight: 400 !important;
    margin-bottom: 10px !important;
}

/* Chat message text content - CRITICAL FIX */
.message.user .markdown p,
.message.user .markdown span,
.message.user .markdown div,
.message.bot .markdown p,
.message.bot .markdown span,
.message.bot .markdown div {
    color: var(--primarytext-color) !important;
}

/* Input textbox */
.input-textbox {
    border: var(--border-default) solid var(--primary-dark);
    background-color: var(--text_areabackground);
}

/* Input textbox textarea styling */
.input-textbox textarea {
    background-color: var(--text_areabackground) !important;
    border: var(--input-border) solid var(--secondary-dark) !important;
    border-radius: 6px !important;
    color: var(--primarytext-color) !important;
    font-family: "Oswald", sans-serif !important;
    padding: 10px !important;
    resize: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* More specific Gradio textarea selectors */
.gradio-container textarea {
    background-color: var(--text_areabackground) !important;
    border: var(--input-border) solid var(--secondary-dark) !important;
    border-radius: 6px !important;
    color: var(--primarytext-color) !important;
    font-family: "Oswald", sans-serif !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.gradio-container .gradio-textbox textarea {
    background-color: var(--text_areabackground) !important;
    border: var(--input-border) solid var(--secondary-dark) !important;
    border-radius: 6px !important;
    color: var(--primarytext-color) !important;
    font-family: "Oswald", sans-serif !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.gradio-container .gradio-textbox {
    background-color: transparent !important;
    border: none !important;
}

/* Input textbox focus state */
.input-textbox textarea:focus {
    border-color: var(--secondary-light) !important;
    box-shadow: 0 0 0 var(--border-focus) rgba(96, 165, 250, 0.2) !important;
}

/* General textarea styling */
textarea {
    border: var(--border-default) solid var(--primary-dark);
    background-color: var(--text_areabackground);
    background-color: var(--text_areabackground) !important;
    border: var(--input-border) solid var(--secondary-dark) !important;
    border-radius: 6px !important;
    color: var(--primarytext-color) !important;
    font-family: "Oswald", sans-serif !important;
    padding: 10px !important;
    resize: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* General textarea focus state */
textarea:focus {
    border-color: var(--secondary-light) !important;
    box-shadow: 0 0 0 var(--border-focus) rgba(96, 165, 250, 0.2) !important;
}

/* Input text - ENSURE VISIBILITY */
textarea, input {
    color: var(--primarytext-color) !important;
}

/* Input placeholder text */
textarea::placeholder,
input::placeholder {
    color: var(--secondarytext-color) !important;
}

/* Send button */
.send-button {
    border: 1pt solid var(--secondary-dark);
    background-color: var(--Send);
    border: var(--button-border) solid var(--secondary-dark) !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    margin-bottom: 5px !important;
    width: 100% !important;
    background-color: var(--Send) !important;
    color: var(--primarytext-color) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Gradio-specific button selectors */
.gradio-container button.send-button {
    background-color: var(--Send) !important;
    color: var(--primarytext-color) !important;
    border: var(--button-border) solid var(--secondary-dark) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    font-family: "Oswald", sans-serif !important;
}

/* Send button hover */
.send-button:hover {
    background-color: var(--Send-hover);
    background-color: var(--Send-hover) !important;
    border-color: var(--secondary-dark) !important;
}

/* Clear button */
.clear-button {
    border: 1pt solid var(--secondary-dark);
    background-color: var(--clear);
    border: var(--button-border) solid var(--secondary-dark) !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    margin-bottom: 5px !important;
    width: 100% !important;
    background-color: var(--clear) !important;
    color: var(--primarytext-color) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Gradio-specific clear button selector */
.gradio-container button.clear-button {
    background-color: var(--clear) !important;
    color: var(--primarytext-color) !important;
    border: var(--button-border) solid var(--secondary-dark) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    font-family: "Oswald", sans-serif !important;
}

/* Clear button hover */
.clear-button:hover {
    background-color: var(--clear-hover);
    background-color: var(--clear-hover) !important;
    border-color: var(--secondary-dark) !important;
}

/* Button text - ENSURE VISIBILITY */
button, .gradio-button {
    color: var(--primarytext-color) !important;
}


/* Input controls container */
.input-controls {
    padding: 15px 20px !important;
    background-color: transparent !important;
    flex-shrink: 0 !important;
    width: 100% !important;
}

/* Button column container */
.button-column {
    margin-left: 10px !important;
    min-width: 80px !important;
}

/* Gradio footer styling */
footer.svelte-czcr5b {
    display: flex !important;
    visibility: visible !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: transparent !important;
    backdrop-filter: blur(5px) !important;
    border-top: var(--border-default) solid #59524f !important;
    padding: 8px 16px !important;
    z-index: 1000 !important;
    height: auto !important;
    min-height: 40px !important;
}

/* Footer buttons styling */
footer.svelte-czcr5b button {
    background-color: transparent !important;
    color: var(--secondarytext-color) !important;
    border: none !important;
    font-family: "Oswald", sans-serif !important;
    font-size: 12px !important;
}

/* Footer divider styling */
footer.svelte-czcr5b .divider {
    color: var(--secondarytext-color) !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .message.bot .markdown,
    .message.user .markdown {
        max-width: 85%;
    }
    
    .input-controls {
        padding: 10px !important;
    }
}

/* Dark mode variables pulled from HTML when testing the app */
/* This is meant to address the issue of Mimir not applying dark mode correctly */
/* and ensure consistency regardless of user system settings */
:root .dark {
    --body-background-fill: var(--text_areabackground);
    --body-text-color: var(--primarytext-color);
    --color-accent-soft: var(--primary-light);
    --background-fill-primary: var(--chathistory_area);
    --background-fill-secondary: var(--text_areabackground);
    --border-color-accent: var(--primary-dark);
    --border-color-primary: var(--primary-dark);
    --link-text-color-active: var(--secondary-light);
    --link-text-color: var(--secondary-light);
    --link-text-color-hover: var(--secondary-dark);
    --link-text-color-visited: var(--secondary-dark);
    --body-text-color-subdued: var(--secondarytext-color);
    --accordion-text-color: var(--primarytext-color);
    --table-text-color: var(--primarytext-color);
    --shadow-spread: 1px;
    --block-background-fill: var(--chathistory_area);
    --block-border-color: var(--primary-dark);
    --block_border_width: 1.5px;
    --block-info-text-color: var(--secondarytext-color);
    --block-label-background-fill: var(--text_areabackground);
    --block-label-border-color: var(--primary-dark);
    --block_label_border_width: 1.5px;
    --block-label-text-color: var(--primarytext-color);
    --block_shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --block_title_background_fill: transparent;
    --block_title_border_color: var(--primary-dark);
    --block_title_border_width: 1.5px;
    --block-title-text-color: var(--primarytext-color);
    --panel-background-fill: var(--text_areabackground);
    --panel-border-color: var(--primary-dark);
    --panel_border_width: 1.5px;
    --border-color-accent-subdued: var(--secondary-dark);
    --code-background-fill: var(--primary-light);
    --checkbox-background-color: var(--text_areabackground);
    --checkbox-background-color-focus: var(--text_areabackground);
    --checkbox-background-color-hover: var(--text_areabackground);
    --checkbox-background-color-selected: var(--primary-light);
    --checkbox-border-color: var(--primary-dark);
    --checkbox-border-color-focus: var(--secondary-light);
    --checkbox-border-color-hover: var(--secondary-dark);
    --checkbox-border-color-selected: var(--secondary-light);
    --checkbox-border-width: 1.5px;
    --checkbox-label-background-fill: var(--text_areabackground);
    --checkbox-label-background-fill-hover: var(--text_areabackground);
    --checkbox-label-background-fill-selected: var(--primary-light);
    --checkbox-label-border-color: var(--primary-dark);
    --checkbox-label-border-color-hover: var(--secondary-dark);
    --checkbox-label-border-color-selected: var(--secondary-light);
    --checkbox-label-border-width: 1.5px;
    --checkbox-label-text-color: var(--primarytext-color);
    --checkbox-label-text-color-selected: var(--primarytext-color);
    --error-background-fill: var(--text_areabackground);
    --error-border-color: #ef4444;
    --error_border_width: 1.5px;
    --error-text-color: #ef4444;
    --error-icon-color: #ef4444;
    --input-background-fill: var(--text_areabackground);
    --input_background_fill_focus: var(--text_areabackground);
    --input-background-fill-hover: var(--text_areabackground);
    --input-border-color: var(--secondary-dark);
    --input-border-color-focus: var(--secondary-light);
    --input-border-color-hover: var(--secondary-dark);
    --input_border_width: 1.5px;
    --input-placeholder-color: var(--secondarytext-color);
    --input_shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --input-shadow-focus: 0 0 0 var(--shadow-spread) rgba(96, 165, 250, 0.2), var(--shadow-inset);
    --loader_color: var(--secondary-light);
    --slider_color: var(--secondary-light);
    --stat-background-fill: linear-gradient(to right, var(--primary-light), var(--primary-dark));
    --table-border-color: var(--primary-dark);
    --table-even-background-fill: var(--text_areabackground);
    --table-odd-background-fill: var(--chathistory_area);
    --table-row-focus: var(--secondary-light);
    --button-border-width: 1.5px;
    --button-cancel-background-fill: var(--clear);
    --button-cancel-background-fill-hover: var(--clear-hover);
    --button-cancel-border-color: var(--secondary-dark);
    --button-cancel-border-color-hover: var(--secondary-dark);
    --button-cancel-text-color: var(--primarytext-color);
    --button-cancel-text-color-hover: var(--primarytext-color);
    --button-primary-background-fill: var(--Send);
    --button-primary-background-fill-hover: var(--Send-hover);
    --button-primary-border-color: var(--secondary-dark);
    --button-primary-border-color-hover: var(--secondary-dark);
    --button-primary-text-color: var(--primarytext-color);
    --button-primary-text-color-hover: var(--primarytext-color);
    --button_primary_shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --button-primary-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.1);
    --button-primary-shadow-active: 0 2px 4px rgba(0, 0, 0, 0.1);
    --button-secondary-background-fill: var(--clear);
    --button-secondary-background-fill-hover: var(--clear-hover);
    --button-secondary-border-color: var(--secondary-dark);
    --button-secondary-border-color-hover: var(--secondary-dark);
    --button-secondary-text-color: var(--primarytext-color);
    --button-secondary-text-color-hover: var(--primarytext-color);
    --button_secondary_shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --button-secondary-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.1);
    --button-secondary-shadow-active: 0 2px 4px rgba(0, 0, 0, 0.1);
    --name: origin;
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    --primary-950: #172554;
    --secondary-50: #f0f9ff;
    --secondary-100: #e0f2fe;
    --secondary-200: #bae6fd;
    --secondary-300: #7dd3fc;
    --secondary-400: #38bdf8;
    --secondary-500: #0ea5e9;
    --secondary-600: #0284c7;
    --secondary-700: #0369a1;
    --secondary-800: #075985;
    --secondary-900: #0c4a6e;
    --secondary-950: #082f49;
    --neutral-50: #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #0b0f19;
    --spacing-xxs: 1px;
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 6px;
    --spacing-lg: 8px;
    --spacing-xl: 10px;
    --spacing-xxl: 16px;
    --radius-xxs: 1px;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-xxl: 22px;
    --text-xxs: 9px;
    --text-xs: 10px;
    --text-sm: 12px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 22px;
    --text-xxl: 26px;
    --font: 'Oswald', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    --body-text-size: var(--text-md);
    --body-text-weight: 400;
    --embed-radius: var(--radius-sm);
    --color-accent: var(--secondary-light);
    --shadow-drop: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-drop-lg: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-inset: 0 2px 4px rgba(0, 0, 0, 0.1) inset;
    --block-border-width: 1.5px;
    --block-info-text-size: var(--text-sm);
    --block-info-text-weight: 400;
    --block-label-border-width: 1.5px;
    --block-label-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --block-label-margin: 0;
    --block-label-padding: var(--spacing-sm) var(--spacing-lg);
    --block-label-radius: calc(var(--radius-sm) - 1px) 0 calc(var(--radius-sm) - 1px) 0;
    --block-label-right-radius: 0 calc(var(--radius-sm) - 1px) 0 calc(var(--radius-sm) - 1px);
    --block-label-text-size: var(--text-sm);
    --block-label-text-weight: 400;
    --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
    --block-radius: var(--radius-sm);
    --block-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --block-title-background-fill: transparent;
    --block-title-border-color: var(--primary-dark);
    --block-title-border-width: 1.5px;
    --block-title-padding: 0;
    --block-title-radius: var(--radius-sm);
    --block-title-text-size: var(--text-md);
    --block-title-text-weight: 400;
    --container-radius: var(--radius-sm);
    --form-gap-width: 1.5px;
    --layout-gap: var(--spacing-xxl);
    --panel-border-width: 1.5px;
    --section-header-text-size: var(--text-md);
    --section-header-text-weight: 400;
    --chatbot-text-size: var(--text-lg);
    --checkbox-border-radius: var(--radius-sm);
    --checkbox-label-gap: var(--spacing-lg);
    --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
    --checkbox-label-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --checkbox-label-text-size: var(--text-md);
    --checkbox-label-text-weight: 400;
    --checkbox-check: url(data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230f0e09' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e);
    --radio-circle: url(data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230f0e09' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e);
    --checkbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --error-border-width: 1.5px;
    --input-background-fill-focus: var(--text_areabackground);
    --input-border-width: 1.5px;
    --input-padding: var(--spacing-xl);
    --input-radius: var(--radius-sm);
    --input-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --input-text-size: var(--text-md);
    --input-text-weight: 400;
    --loader-color: var(--secondary-light);
    --prose-text-size: var(--text-md);
    --prose-text-weight: 400;
    --prose-header-text-weight: 600;
    --slider-color: var(--secondary-light);
    --table-radius: var(--radius-sm);
    --button-transform-hover: none;
    --button-transform-active: none;
    --button-transition: none;
    --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
    --button-large-radius: var(--radius-md);
    --button-large-text-size: var(--text-lg);
    --button-large-text-weight: 600;
    --button-primary-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --button-secondary-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --button-small-padding: var(--spacing-sm) calc(1.5 * var(--spacing-sm));
    --button-small-radius: var(--radius-md);
    --button-small-text-size: var(--text-sm);
    --button-small-text-weight: 400;
    --button-medium-padding: var(--spacing-md) calc(2 * var(--spacing-md));
    --button-medium-radius: var(--radius-md);
    --button-medium-text-size: var(--text-md);
    --button-medium-text-weight: 600;
}

/* Force text color on all elements - FIX FOR WHITE TEXT */
* {
    color: var(--primarytext-color) !important;
    font-family: "Oswald", sans-serif !important;
}

@media (prefers-color-scheme: dark) {
    body {
        background: var(--text_areabackground);
        color: var(--primarytext-color);
    }
}

body {
    background: var(--text_areabackground);
    color: var(--primarytext-color);
    font-family: "Oswald", sans-serif;
}

/* Loading Animation CSS using your theme colors */
.thinking-indicator {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    margin: 5px 0;
    background-color: transparent;
}

.dots-container {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

.dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--primary-light);
    animation: pulse 1.5s infinite ease-in-out;
    display: inline-block;
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.3s; }
.dot:nth-child(3) { animation-delay: 0.6s; }

@keyframes pulse {
    0%, 70%, 100% {
        transform: scale(0.8);
        opacity: 0.4;
    }
    35% {
        transform: scale(1.2);
        opacity: 1;
    }
}