/* --- Base & Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@800&display=swap');
body { font-family: 'Inter', sans-serif; transition: background-color 0.3s, color 0.3s; }

/* --- Glassmorphism Card Effect --- */
.glass-card { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0, 0, 0, 0.05); }
.dark .glass-card { background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); }

/* --- Vertical Tab Navigation --- */
.v-tab-button { transition: all 0.2s ease-in-out; transform: scale(1); }
.v-tab-button:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.05); transform: scale(1.05); }
.dark .v-tab-button:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.1); }
.v-tab-button.active { background-color: #2563eb; color: white; box-shadow: 0 4px 14px 0 rgb(37 99 235 / 39%); }
.dark .v-tab-button.active { background: linear-gradient(45deg, #22d3ee, #0ea5e9); color: #020617; box-shadow: 0 4px 14px 0 rgb(34 211 238 / 39%); }
.tab-content { display: none; } 
.tab-content.active { display: block; }

/* --- Refined Sub-Tabs --- */
.sub-tab-button { transition: all 0.3s ease; padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 500;}
.sub-tab-button:hover { background-color: #eff6ff; }
.dark .sub-tab-button:hover { background-color: rgba(51, 65, 85, 0.7); color: #fff; }
.sub-tab-button.active { background-color: #2563eb; color: white; }
.dark .sub-tab-button.active { background-color: #22d3ee; color: #020617; }
.sub-tab-content { display: none; } 
.sub-tab-content.active { display: block; }

/* --- Refined Data Table --- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 1rem; text-align: left; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.dark .data-table th, .dark .data-table td { border-bottom-color: rgba(255, 255, 255, 0.1); }
.data-table th { background-color: #f9fafb; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.dark .data-table th { background-color: rgba(255, 255, 255, 0.05); }
.data-table tbody tr { transition: background-color 0.2s ease; }
.data-table tbody tr:hover { background-color: #f8fafc; }
.dark .data-table tbody tr:hover { background-color: rgba(51, 65, 85, 0.5); }

/* --- Typing Indicator Animation --- */
@keyframes typing-dot {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}
.typing-indicator span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
    animation: typing-dot 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

/* --- AI FAB Animation & Spinner --- */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.ai-fab-spinning, .animate-spin {
    animation: spin 1s linear infinite;
}

/* --- AI FAB Desktop Visibility --- */
/* This rule hides the FAB on large screens ONLY when the chat panel is expanded. */
@media (min-width: 1024px) { /* 1024px is tailwind's 'lg' breakpoint */
    body:has(#ai-chat-panel[data-collapsed="false"]) #ai-fab {
        display: none;
    }
}

/* --- Model Popover Styles --- */
#model-popover.popover-visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Style for the buttons in the model list */
.model-option-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease-in-out;
}

.model-option-btn:hover {
    background-color: rgba(71, 85, 105, 0.05); /* slate-400/5 */
}

html.dark .model-option-btn:hover {
    background-color: rgba(255, 255, 255, 0.05); /* white/5 */
}

/* Style for the *selected* model button */
.model-option-btn.selected {
    background-color: rgb(239 246 255); /* blue-50 */
    color: rgb(37 99 235); /* blue-700 */
    font-weight: 600;
}

html.dark .model-option-btn.selected {
    background-color: rgb(30 58 138); /* blue-900 */
    color: rgb(191 219 254); /* blue-200 */
}

/* Checkmark icon on the selected item */
.model-option-btn .fa-check {
    display: none;
}

.model-option-btn.selected .fa-check {
    display: block;
}

/* --- Current Model Display --- */
/* Show the display text when the settings button is hovered or focused */
#model-settings-btn:hover + #current-model-display,
#model-settings-btn:focus + #current-model-display {
    display: block;
    opacity: 1;
}

/* --- NEW: Citation Link Styles --- */
.citation-link {
    color: #2563eb; /* Tailwind blue-600 */
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.citation-link:hover {
    color: #1d4ed8; /* Tailwind blue-700 */
    text-decoration-style: solid;
}

/* Dark mode styles */
.dark .citation-link {
    color: #60a5fa; /* Tailwind blue-400 */
}

.dark .citation-link:hover {
    color: #93c5fd; /* Tailwind blue-300 */
}