/* Custom CSS variables for dynamic theming */
:root {
    /* These will be dynamically set by JavaScript based on light/dark colors */
    --primary: 59 130 246; /* Default blue-500 */
    --background: 255 255 255;
    --foreground: 15 23 42;
    --muted: 248 250 252;
    --muted-foreground: 100 116 139;
    --border: 226 232 240;
    --accent: 16 185 129;
}

/* Dynamic color classes */
.bg-dynamic-background { background-color: rgb(var(--background)); }
.bg-dynamic-muted { background-color: rgb(var(--muted)); }
.bg-dynamic-primary { background-color: rgb(var(--primary)); }
.bg-dynamic-accent { background-color: rgb(var(--accent)); }
.text-dynamic-foreground { color: rgb(var(--foreground)); }
.text-dynamic-muted-foreground { color: rgb(var(--muted-foreground)); }
.text-dynamic-primary { color: rgb(var(--primary)); }
.text-dynamic-accent { color: rgb(var(--accent)); }
.border-dynamic-border { border-color: rgb(var(--border)); }
.border-dynamic-primary { border-color: rgb(var(--primary)); }

/* Dynamic color opacity variants for pills */
.bg-dynamic-primary\/10 { background-color: rgb(var(--primary) / 0.1); }
.bg-dynamic-primary\/20 { background-color: rgb(var(--primary) / 0.2); }
.border-dynamic-primary\/20 { border-color: rgb(var(--primary) / 0.2); }
.border-dynamic-primary\/30 { border-color: rgb(var(--primary) / 0.3); }

/* Custom animations */
@keyframes slideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Mention highlighting */
.mention {
    background-color: rgb(var(--primary) / 0.1);
    color: rgb(var(--primary));
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgb(var(--border));
    border-radius: 2px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--muted-foreground));
}

/* Focus styles */
.focus-ring:focus {
    outline: 2px solid rgb(var(--primary));
    outline-offset: 2px;
}

/* Viewer mode specific styles */
.viewer-mode .prompt-input {
    cursor: default;
}

.viewer-mode .prompt-input:focus {
    outline: none;
}