/* sarvam-theme.css — Sarvam AI Dashboard Theme Override */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* ============================================================
   CSS Variables
   ============================================================ */
:root {
    --sarvam-bg-body: #F7F5F3;
    --sarvam-bg-surface: #FFFFFF;
    --sarvam-bg-elevated: #F2EFEC;
    --sarvam-text-main: #1A1A1A;
    --sarvam-text-secondary: #5C5C5C;
    --sarvam-text-tertiary: #9A9A9A;
    --sarvam-border: #E6E3DF;
    --sarvam-border-subtle: #EEEBE7;
    --sarvam-accent: #2D6A4F;
    --sarvam-radius-card: 18px;
    --sarvam-radius-pill: 9999px;
    --sarvam-shadow-sm: 0px 2px 8px rgba(0, 0, 0, 0.05);
    --sarvam-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06);
    --sarvam-shadow-lg: 0px 8px 32px rgba(0, 0, 0, 0.08);
    --sarvam-font-heading: "Outfit", sans-serif;
    --sarvam-font-body: 'DM Sans', 'Outfit', sans-serif;
}

/* ============================================================
   GLOBAL BASE STYLES
   NOTE: We do NOT apply font-family to `i` or `div`/`span` globally
   because icon fonts (Boxicons) render via inherited font glyphs
   and would break if the font is overridden on their container.
   ============================================================ */
body,
p,
a,
li,
ul,
ol,
input,
textarea,
select,
button,
label,
td,
th,
caption,
.chatbox,
.chat-input,
.sidebar,
.card-content,
.settings-body,
.history-item,
.model-option,
#model-display {
    font-family: var(--sarvam-font-body) !important;
}


body,
.chatbot,
.show-chatbot {
    background: var(--sarvam-bg-body) !important;
    color: var(--sarvam-text-main) !important;
}

/* Headings get Serif treatment */
h1,
h2,
h3,
h4,
.Greet-tag,
.chatbot header h2,
.settings-header h3,
.confirm-modal-header h3,
.settings-modal-content h3,
.card-content h3 {
    font-family: var(--sarvam-font-heading) !important;
    font-weight: 500 !important;
}

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader {
    background: var(--sarvam-bg-body) !important;
    color: var(--sarvam-text-main) !important;
}

/* ============================================================
   HEADER
   ============================================================ */
.chatbot header {
    background: var(--sarvam-bg-body) !important;
    border-bottom: 1px solid var(--sarvam-border) !important;
    box-shadow: none !important;
}

.chatbot header h2 {
    color: var(--sarvam-text-main) !important;
    font-size: 1.2rem;
}

.chatbot header i,
.bx-menu,
.right-heder-bar i {
    color: var(--sarvam-text-main) !important;
}

.Try-Speectra {
    background: var(--sarvam-bg-surface) !important;
    border: 1px solid var(--sarvam-border) !important;
    border-radius: var(--sarvam-radius-pill) !important;
    box-shadow: var(--sarvam-shadow-sm) !important;
}

.Try-Speectra span,
.Try-Speectra i {
    color: var(--sarvam-text-main) !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    background: var(--sarvam-bg-surface) !important;
    border-right: 1px solid var(--sarvam-border) !important;
    box-shadow: var(--sarvam-shadow) !important;
}

.sidebar i,
.sidebar .logo_name,
.sidebar li a .links_name {
    color: var(--sarvam-text-main) !important;
}

/* Navigation links */
.sidebar li a {
    background: transparent !important;
    border-radius: var(--sarvam-radius-pill) !important;
    transition: background 0.2s ease !important;
}

.sidebar li a:hover {
    background: var(--sarvam-bg-elevated) !important;
}

.sidebar li a:hover .links_name,
.sidebar li a:hover i {
    color: var(--sarvam-text-main) !important;
}

/* Sidebar search */
.sidebar input {
    background: var(--sarvam-bg-elevated) !important;
    color: var(--sarvam-text-main) !important;
    border-radius: var(--sarvam-radius-pill) !important;
}

.sidebar .bx-search {
    background: transparent !important;
    color: var(--sarvam-text-secondary) !important;
}

.sidebar.open .bx-search:hover {
    background: transparent !important;
    color: var(--sarvam-text-main) !important;
}

/* History items */
.history-item {
    color: var(--sarvam-text-secondary) !important;
    border-radius: var(--sarvam-radius-pill) !important;
}

.history-item:hover {
    background: var(--sarvam-bg-elevated) !important;
    color: var(--sarvam-text-main) !important;
}

.history-item.active {
    background: var(--sarvam-bg-elevated) !important;
    border: 1px solid var(--sarvam-border) !important;
    color: var(--sarvam-text-main) !important;
}

.history-container::-webkit-scrollbar-thumb {
    background: var(--sarvam-border) !important;
}

/* Profile section */
.sidebar li.profile {
    background: var(--sarvam-bg-elevated) !important;
    border: 1px solid var(--sarvam-border) !important;
    border-radius: 16px !important;
}

.sidebar li.profile:hover {
    background: var(--sarvam-border-subtle) !important;
    border-color: var(--sarvam-border) !important;
    box-shadow: none !important;
}

.sidebar li.profile .name {
    color: var(--sarvam-text-main) !important;
}

.sidebar li.profile .job {
    color: var(--sarvam-text-secondary) !important;
}

#logout {
    color: var(--sarvam-text-secondary) !important;
}

#logout:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #e53935 !important;
}

/* ============================================================
   WELCOME / GREETING
   ============================================================ */
.Greet-tag {
    font-size: 2.8rem !important;
    font-weight: 400 !important;
    color: var(--sarvam-text-main) !important;
    line-height: 1.2;
}

#Hello-txt {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--sarvam-text-main) !important;
    background-clip: unset !important;
    color: var(--sarvam-text-main) !important;
}

/* ============================================================
   SUGGESTION CARDS
   ============================================================ */
.suggestion-card {
    background: var(--sarvam-bg-surface) !important;
    border: 1px solid var(--sarvam-border) !important;
    border-radius: var(--sarvam-radius-card) !important;
    box-shadow: var(--sarvam-shadow-sm) !important;
    backdrop-filter: none !important;
    transition: all 0.25s ease !important;
}

.suggestion-card:hover {
    background: var(--sarvam-bg-surface) !important;
    border-color: #C8C3BC !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--sarvam-shadow) !important;
}

.card-content h3 {
    color: var(--sarvam-text-main) !important;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.3;
}

.card-content p {
    color: var(--sarvam-text-secondary) !important;
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Card icon gradients */
.card-icon {
    border-radius: var(--sarvam-radius-pill) !important;
    border: none !important;
}

.card-icon i {
    color: #333 !important;
}

.suggestion-card#sugg .card-icon {
    background: linear-gradient(140deg, #A5C887, #E3F1D8) !important;
}

.suggestion-card#sugg2 .card-icon {
    background: linear-gradient(140deg, #A7C0F1, #D2DFF9) !important;
}

.suggestion-card#sugg3 .card-icon {
    background: linear-gradient(140deg, #FAB999, #FEE3D2) !important;
}

.suggestion-card#sugg4 .card-icon {
    background: linear-gradient(140deg, #EBA18C, #FDE7E2) !important;
}

.suggestion-card#sugg5 .card-icon {
    background: linear-gradient(140deg, #D7B4F3, #F3E8FD) !important;
}

.suggestion-card#sugg6 .card-icon {
    background: linear-gradient(140deg, #F4D35E, #FCF3D8) !important;
}

/* ============================================================
   CHAT INPUT
   ============================================================ */
.chat-input-container {
    background: var(--sarvam-bg-body) !important;
}

.chat-input {
    background: var(--sarvam-bg-surface) !important;
    border: 1px solid var(--sarvam-border) !important;
    border-radius: 28px !important;
    box-shadow: var(--sarvam-shadow) !important;
}

/* Remove the animating gradient border */
.chat-input::before {
    display: none !important;
}

.chat-input.active::before {
    display: none !important;
}

.chat-input textarea {
    color: var(--sarvam-text-main) !important;
    font-size: 0.95rem !important;
    background: transparent !important;
}

.chat-input textarea::placeholder {
    color: var(--sarvam-text-tertiary) !important;
}

/* Input bar icon buttons — use sarvam vars so they auto-adapt */
.icon-btn,
.mic-btn {
    color: var(--sarvam-text-secondary) !important;
    background: var(--sarvam-bg-elevated) !important;
    border-radius: 50% !important;
}

.icon-btn:hover,
.mic-btn:hover {
    background: var(--sarvam-border) !important;
    color: var(--sarvam-text-main) !important;
}

/* Plus icon btn specifically */
#plus-btn {
    color: var(--sarvam-text-secondary) !important;
    background: var(--sarvam-bg-elevated) !important;
    border-radius: 50% !important;
}

#plus-btn:hover {
    background: var(--sarvam-border) !important;
    color: var(--sarvam-text-main) !important;
}


/* Send button — icon color must contrast with the button background.
   In Dark mode: button bg = white (#F0F0F0 text used as bg via index.css),
   icon must be DARK to be visible.
   In Light mode: button bg = dark (#1A1A1A), icon must be WHITE. */
#send-button {
    /* Dark mode: white bg button → dark icon */
    color: #1C1C1E !important;
}

body.white-mode #send-button {
    /* Light mode: dark bg button → white icon */
    color: #FFFFFF !important;
}

#send-button:hover {
    opacity: 0.85;
}

/* File preview */
.file-preview {
    background: var(--sarvam-bg-elevated) !important;
    border: 1px solid var(--sarvam-border) !important;
    color: var(--sarvam-text-main) !important;
    backdrop-filter: none !important;
}

#file-name {
    color: var(--sarvam-text-main) !important;
}

.cancel-file {
    color: var(--sarvam-text-secondary) !important;
}

/* Input actions menu */
.input-actions-menu {
    background: var(--sarvam-bg-surface) !important;
    border: 1px solid var(--sarvam-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--sarvam-shadow-lg) !important;
}

.menu-item span,
.menu-icon-btn span,
.menu-item i {
    color: var(--sarvam-text-main) !important;
}

.menu-item:hover {
    background: var(--sarvam-bg-elevated) !important;
}

/* Model selector */
.model-select-wrapper {
    background: var(--sarvam-bg-elevated) !important;
    color: var(--sarvam-text-main) !important;
    border: 1px solid var(--sarvam-border) !important;
    border-radius: var(--sarvam-radius-pill) !important;
}

.model-select-trigger {
    color: var(--sarvam-text-main) !important;
}

.model-select-trigger i {
    color: var(--sarvam-text-secondary) !important;
}

#model-display {
    color: var(--sarvam-text-main) !important;
    font-size: 0.8rem !important;
}

.model-options {
    background: var(--sarvam-bg-surface) !important;
    border: 1px solid var(--sarvam-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--sarvam-shadow-lg) !important;
}

.model-option {
    color: var(--sarvam-text-main) !important;
}

.model-option:hover {
    background: var(--sarvam-bg-elevated) !important;
    color: var(--sarvam-text-main) !important;
}

.model-option.selected {
    background: var(--sarvam-bg-elevated) !important;
    color: var(--sarvam-text-main) !important;
}

/* ============================================================
   CHAT MESSAGES
   ============================================================ */
.chatbox .chat p {
    font-family: var(--sarvam-font-body) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    border-radius: 18px !important;
}

/* INCOMING (AI) messages */
.chatbox .incoming p {
    /* background: var(--sarvam-bg-surface) !important; */
    color: var(--sarvam-text-main) !important;
    border: 1px solid var(--sarvam-border-subtle) !important;
    box-shadow: var(--sarvam-shadow-sm) !important;
    border-top-left-radius: 6px !important;
}

/* OUTGOING (user) messages */
.chatbox .outgoing p {
    background: var(--sarvam-bg-elevated) !important;
    color: var(--sarvam-text-main) !important;
    border: 1px solid var(--sarvam-border) !important;
    border-top-right-radius: 6px !important;
}

.chatbox .outgoing span {
    background: var(--sarvam-text-main) !important;
    color: #fff !important;
}

/* Bold text in responses — remove gradient fill */
.chat-content p b,
.chatbox .incoming p b,
.chatbox p b {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--sarvam-text-main) !important;
    background-clip: unset !important;
    color: var(--sarvam-text-main) !important;
    font-weight: 700 !important;
}

/* Bold head labels */
.Bold-head {
    color: var(--sarvam-text-main) !important;
}

/* Typing cursor */
.typing-cursor::after {
    color: var(--sarvam-text-secondary) !important;
    animation: blink 0.8s step-end infinite !important;
}

/* ============================================================
   CODE BLOCKS — Catppuccin Mocha (always dark, both modes)
   .code-block-wrapper styles are in index.css — no overrides needed.
   ============================================================ */
pre {
    background-color: #1e1e2e !important;
    color: #cdd6f4 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    font-size: 0.875rem !important;
    line-height: 1.8 !important;
    /* border: 1px solid #313244 !important; */
    box-shadow: none !important;
}

.code-container {
    background-color: #1e1e2e !important;
    border-radius: 12px !important;
    border: 1px solid #313244 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    margin: 12px 0 !important;
}

.progem-lan {
    color: #6c7086 !important;
    font-size: 0.75rem !important;
    padding: 8px 14px !important;
    background: #181825 !important;
    border-bottom: 1px solid #313244 !important;
    display: block !important;
    letter-spacing: 0.5px !important;
}


/* ============================================================
   ACTION BUTTONS (under AI message)
   ============================================================ */
.action-btn {
    background: var(--sarvam-bg-elevated) !important;
    border: 1px solid var(--sarvam-border) !important;
    color: var(--sarvam-text-secondary) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.action-btn i {
    color: var(--sarvam-text-secondary) !important;
}

.action-btn:hover {
    background: var(--sarvam-border) !important;
    color: var(--sarvam-text-main) !important;
    border-color: var(--sarvam-border) !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

.action-btn:hover i {
    color: var(--sarvam-text-main) !important;
}

.action-btn.copied {
    background: #D1FAE5 !important;
    border-color: #6EE7B7 !important;
    color: #065F46 !important;
}

.action-btn.copied i {
    color: #065F46 !important;
}

/* User message action buttons */
.user-chat-actions .action-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    color: rgba(0, 0, 0, 0.45) !important;
}

.user-chat-actions .action-btn i {
    color: rgba(0, 0, 0, 0.45) !important;
}

.user-chat-actions .action-btn:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: var(--sarvam-text-main) !important;
}

/* ============================================================
   SOURCE ITEMS (web search)
   ============================================================ */
.source-item {
    background: var(--sarvam-bg-surface) !important;
    border: 1px solid var(--sarvam-border) !important;
    border-radius: 12px !important;
    color: var(--sarvam-text-main) !important;
    transition: all 0.2s ease !important;
}

.source-item:hover {
    background: var(--sarvam-bg-elevated) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--sarvam-shadow-sm) !important;
}

.source-title {
    color: var(--sarvam-text-main) !important;
    font-size: 12px;
}

.source-domain {
    color: var(--sarvam-text-tertiary) !important;
}

.sources-scroll-container::-webkit-scrollbar-thumb {
    background-color: var(--sarvam-border) !important;
}

/* ============================================================
   THINKING / SPEECH BUBBLE (rgba background style)
   ============================================================ */
.chat.incoming p[style*="background: rgba(103, 58, 183, 0.2)"] {
    background: var(--sarvam-bg-elevated) !important;
    border: 1px solid var(--sarvam-border) !important;
    color: var(--sarvam-text-secondary) !important;
    border-left: 3px solid #A7C0F1 !important;
}

.chat.incoming p[style*="background: rgba(103, 58, 183, 0.2)"] i {
    color: var(--sarvam-text-secondary) !important;
}

/* ============================================================
   TRANSLATION RESULTS
   ============================================================ */
.translation-result {
    background: var(--sarvam-bg-surface) !important;
    border: 1px solid var(--sarvam-border) !important;
    border-left: 3px solid #A7C0F1 !important;
    backdrop-filter: none !important;
}

.translation-header {
    border-bottom: 1px solid var(--sarvam-border) !important;
}

.translation-header i {
    color: #A7C0F1 !important;
}

.translation-header span {
    color: var(--sarvam-text-main) !important;
}

.translation-content {
    color: var(--sarvam-text-main) !important;
    font-family: var(--sarvam-font-body) !important;
    font-weight: 400 !important;
}

/* ============================================================
   MARKDOWN TABLE
   ============================================================ */
.md-table {
    box-shadow: 0 0 0 1px var(--sarvam-border) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.md-table th,
.md-table td {
    border: 1px solid var(--sarvam-border) !important;
    color: var(--sarvam-text-main) !important;
}

.md-table th {
    background: var(--sarvam-bg-elevated) !important;
    color: var(--sarvam-text-main) !important;
    font-weight: 600 !important;
}

.md-table tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02) !important;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast {
    background: var(--sarvam-bg-surface) !important;
    color: var(--sarvam-text-main) !important;
    border: 1px solid var(--sarvam-border) !important;
    box-shadow: var(--sarvam-shadow-lg) !important;
    backdrop-filter: none !important;
}

/* ============================================================
   FOLLOW UP LINKS
   ============================================================ */
.follow-up {
    color: var(--sarvam-text-secondary) !important;
}

/* ============================================================
   MODALS (Settings & Confirm)
   ============================================================ */
.settings-modal,
.confirm-modal {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(4px) !important;
}

.settings-modal-content,
.confirm-modal-content {
    background: var(--sarvam-bg-surface) !important;
    border: 1px solid var(--sarvam-border) !important;
    border-radius: var(--sarvam-radius-card) !important;
    box-shadow: var(--sarvam-shadow-lg) !important;
}

.settings-header,
.confirm-modal-header {
    background: var(--sarvam-bg-body) !important;
    border-bottom: 1px solid var(--sarvam-border) !important;
    padding: 18px 22px !important;
}

.settings-header h3,
.confirm-modal-header h3,
.settings-header i,
.confirm-modal-header i {
    color: var(--sarvam-text-main) !important;
}


.settings-sidebar {
    border-right: 1px solid var(--sarvam-border) !important;
    background: var(--sarvam-bg-body) !important;
}

.settings-tab-btn {
    color: var(--sarvam-text-secondary) !important;
    background: none !important;
    border-radius: 10px !important;
}

.settings-tab-btn.active {
    background: var(--sarvam-bg-elevated) !important;
    color: var(--sarvam-text-main) !important;
    border-radius: 10px !important;
}

.settings-tab-btn:hover {
    background: var(--sarvam-bg-elevated) !important;
    color: var(--sarvam-text-main) !important;
}

.settings-body {
    background: var(--sarvam-bg-body) !important;
    color: var(--sarvam-text-main) !important;
    padding: 24px !important;
}

.form-group label {
    color: var(--sarvam-text-secondary) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.form-group input[type="text"],
.form-group input,
.form-group select {
    background: var(--sarvam-bg-elevated) !important;
    border: 1px solid var(--sarvam-border) !important;
    color: var(--sarvam-text-main) !important;
    border-radius: 10px !important;
}

.form-group input::placeholder {
    color: var(--sarvam-text-tertiary) !important;
}


.custom-select-trigger,
.custom-options {
    background: var(--sarvam-bg-surface) !important;
    border: 1px solid var(--sarvam-border) !important;
    color: var(--sarvam-text-main) !important;
}

.custom-option:hover {
    background: var(--sarvam-bg-elevated) !important;
    color: var(--sarvam-text-main) !important;
}

.custom-option.selected {
    background: var(--sarvam-bg-elevated) !important;
}

.settings-hint {
    color: var(--sarvam-text-tertiary) !important;
}

.save-btn {
    background: var(--sarvam-text-main) !important;
    color: var(--sarvam-bg-body) !important;
    border-radius: var(--sarvam-radius-pill) !important;
    border: none !important;
    padding: 10px 24px !important;
    font-family: var(--sarvam-font-body) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: opacity 0.2s !important;
}

.save-btn:hover {
    opacity: 0.8 !important;
}

.secondary-btn {
    background: var(--sarvam-bg-elevated) !important;
    color: var(--sarvam-text-main) !important;
    border: 1px solid var(--sarvam-border) !important;
    border-radius: var(--sarvam-radius-pill) !important;
}

.confirm-btn-cancel {
    background: var(--sarvam-bg-elevated) !important;
    color: var(--sarvam-text-main) !important;
    border: 1px solid var(--sarvam-border) !important;
    border-radius: var(--sarvam-radius-pill) !important;
}

.confirm-btn-delete {
    border-radius: var(--sarvam-radius-pill) !important;
}

/* ============================================================
   SEARCH SIDE PANEL
   ============================================================ */
.search-side-panel {
    background: var(--sarvam-bg-surface) !important;
    border-left: 1px solid var(--sarvam-border) !important;
    box-shadow: var(--sarvam-shadow-lg) !important;
}

.panel-header {
    background: var(--sarvam-bg-body) !important;
    border-bottom: 1px solid var(--sarvam-border) !important;
    color: var(--sarvam-text-main) !important;
}

.panel-header h3 {
    color: var(--sarvam-text-main) !important;
}

#close-side-panel {
    color: var(--sarvam-text-secondary) !important;
    background: none !important;
    border: none !important;
}

/* ============================================================
   IMAGE MODAL
   ============================================================ */
.image-modal {
    background: rgba(0, 0, 0, 0.85) !important;
}













/* ── Theme Picker / Mode Segment Base Styles ── */
.theme-picker {
    display: flex;
    gap: 14px;
    margin-top: 6px;
}

.mode-segment {
    display: flex;
    margin-top: 8px;
    width: fit-content;
    background: rgba(128, 128, 128, 0.12);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 9999px;
    padding: 4px;
    gap: 4px;
}

.mode-seg-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 22px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    color: var(--sarvam-text-secondary);
}

.mode-seg-btn i {
    font-size: 1.05rem;
}

/* Dark button active state */
.mode-seg-btn[data-mode="dark"].selected {
    background: #1C1C2E;
    color: #C0BEFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Light button active state */
.mode-seg-btn[data-mode="light"].selected {
    background: #FFFFFF;
    color: #D97706;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mode-seg-btn:hover:not(.selected) {
    background: var(--sarvam-bg-surface);
    color: var(--sarvam-text-main);
}


.theme-card {
    flex: 1;
    border: 2px solid var(--sarvam-border);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
    background: var(--sarvam-bg-elevated);
}

.theme-card:hover {
    border-color: var(--sarvam-text-secondary);
    box-shadow: var(--sarvam-shadow);
}

.theme-card.selected {
    border-color: #4ade80;
    box-shadow: 0 0 0 1px #4ade8060;
}

.theme-card-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #4ade80;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.theme-card.selected .theme-card-check {
    display: flex;
}

.theme-card-check i {
    font-size: 13px !important;
    color: #fff !important;
}

/* Mini preview window */
.theme-card-preview {
    height: 80px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tp-header {
    height: 14px;
    flex-shrink: 0;
}

.tp-body {
    display: flex;
    flex: 1;
}

.tp-sidebar {
    width: 26px;
    flex-shrink: 0;
}

.tp-content {
    flex: 1;
    padding: 6px 6px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tp-msg {
    height: 8px;
    border-radius: 4px;
    width: 75%;
}

.tp-msg.tp-msg-out {
    width: 55%;
    align-self: flex-end;
}

.tp-msg.short {
    width: 45%;
}

/* --- Classic theme (original index.css) preview --- */
.classic-preview {
    background: #11101D;
}

.classic-preview .tp-header {
    background: #1a1838;
}

.classic-preview .tp-sidebar {
    background: #1a1838;
}

.classic-preview .tp-msg.tp-msg-in {
    background: rgba(255, 255, 255, 0.12);
}

.classic-preview .tp-msg.tp-msg-out {
    background: rgba(103, 58, 183, 0.5);
}

/* --- Sarvam theme (sarvam-theme.css) preview --- */
.sarvam-preview {
    background: #1C1C1E;
}

.sarvam-preview .tp-header {
    background: #28282C;
}

.sarvam-preview .tp-sidebar {
    background: #28282C;
}

.sarvam-preview .tp-msg.tp-msg-in {
    background: rgba(255, 255, 255, 0.1);
}

.sarvam-preview .tp-msg.tp-msg-out {
    background: rgba(110, 231, 183, 0.25);
}

/* --- Dark mode preview (generic) --- */
.mode-dark-preview {
    background: #1C1C1E;
}

.mode-dark-preview .tp-header {
    background: #28282C;
}

.mode-dark-preview .tp-sidebar {
    background: #232328;
}

.mode-dark-preview .tp-msg.tp-msg-in {
    background: rgba(255, 255, 255, 0.1);
}

.mode-dark-preview .tp-msg.tp-msg-out {
    background: rgba(255, 255, 255, 0.06);
}

/* --- Light mode preview (generic) --- */
.mode-light-preview {
    background: #F7F5F3;
}

.mode-light-preview .tp-header {
    background: #eeeae6;
}

.mode-light-preview .tp-sidebar {
    background: #FFFFFF;
}

.mode-light-preview .tp-msg.tp-msg-in {
    background: #FFFFFF;
}

.mode-light-preview .tp-msg.tp-msg-out {
    background: #EAE5DF;
}

/* Card label */

.theme-card-info {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.theme-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sarvam-text-main);
    display: block;
}

.theme-desc {
    font-size: 0.72rem;
    color: var(--sarvam-text-tertiary);
    display: block;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background-color: var(--sarvam-border) !important;
    border-radius: 10px !important;
}

/* ============================================================
   DARK/LIGHT MODE LOGIC
   
   The app uses body.white-mode for the light theme.
   Default state (no class) = DARK theme.
   body.white-mode = LIGHT theme (Sarvam style).
   ============================================================ */

/* ── DEFAULT STATE = DARK ── */
:root {
    --sarvam-bg-body: #1C1C1E;
    --sarvam-bg-surface: #28282C;
    --sarvam-bg-elevated: #323236;
    --sarvam-text-main: #F0F0F0;
    --sarvam-text-secondary: #A0A0A8;
    --sarvam-text-tertiary: #606068;
    --sarvam-border: #3C3C40;
    --sarvam-border-subtle: #303034;
    --sarvam-accent: #6EE7B7;
    --sarvam-radius-card: 18px;
    --sarvam-radius-pill: 9999px;
    --sarvam-shadow-sm: 0px 2px 8px rgba(0, 0, 0, 0.3);
    --sarvam-shadow: 0px 4px 20px rgba(0, 0, 0, 0.4);
    --sarvam-shadow-lg: 0px 8px 32px rgba(0, 0, 0, 0.5);
    --sarvam-font-heading: "Outfit", sans-serif;
    --sarvam-font-body: 'DM Sans', 'Outfit', sans-serif;
}

/* ── LIGHT MODE = body.white-mode ── */
body.white-mode {
    --sarvam-bg-body: #F7F5F3;
    --sarvam-bg-surface: #FFFFFF;
    --sarvam-bg-elevated: #F2EFEC;
    --sarvam-text-main: #1A1A1A;
    --sarvam-text-secondary: #5C5C5C;
    --sarvam-text-tertiary: #9A9A9A;
    --sarvam-border: #E6E3DF;
    --sarvam-border-subtle: #EEEBE7;
    --sarvam-accent: #2D6A4F;
    --sarvam-shadow-sm: 0px 2px 8px rgba(0, 0, 0, 0.05);
    --sarvam-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06);
    --sarvam-shadow-lg: 0px 8px 32px rgba(0, 0, 0, 0.08);
}

/* Neuter legacy white-mode rules that fight our vars */
.white-mode .chatbot header {
    background: unset !important;
}

.white-mode .chatbox .chat p {
    background: unset !important;
}

.white-mode .sidebar li a:hover {
    background: var(--sarvam-bg-elevated) !important;
}

.white-mode .sidebar.open li.profile {
    background: var(--sarvam-bg-elevated) !important;
}

.white-mode .chatbox .incoming p {
    background: var(--sarvam-bg-surface) !important;
    color: var(--sarvam-text-main) !important;
}

/* Loading/generating state — no card background while spinner is shown */
.chatbox .incoming p:has(#Loading_out_Icon),
.white-mode .chatbox .incoming p:has(#Loading_out_Icon) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.white-mode .chatbox .outgoing p {
    background: var(--sarvam-bg-elevated) !important;
    color: var(--sarvam-text-main) !important;
}


/* ============================================================
   SPECTRA MODE
   ============================================================ */
.spectra-image-1-container,
.spectra-image-2-container {
    border: 2px dashed var(--sarvam-border) !important;
    background: var(--sarvam-bg-elevated) !important;
    color: var(--sarvam-text-secondary) !important;
    border-radius: var(--sarvam-radius-card) !important;
}

/* ============================================================
   CHAT HISTORY DELETE BUTTON
   ============================================================ */
.delete-chat-btn {
    color: var(--sarvam-text-tertiary) !important;
}

.delete-chat-btn:hover {
    color: #e53935 !important;
}

/* ============================================================
   MIC RECORDING STATE
   ============================================================ */
.mic-btn.recording {
    background: #FECDD3 !important;
    color: #9F1239 !important;
}

/* ============================================================
   WEB SEARCH ACTIVE
   ============================================================ */
#web-search.active {
    background: #D1FAE5 !important;
    color: #065F46 !important;
    box-shadow: none !important;
}