/* ==========================================================================
   ELLAIN UNIFIED STYLESHEET
   This file controls the entire visual language of the application, including
   light/dark modes, custom animations, Dash overrides, and the Glass UI.
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL CSS VARIABLES (LIGHT MODE DEFAULTS)
   These variables act as the foundation for the app's color palette, spacing,
   and effects. By using variables, we can easily flip the theme to dark mode.
   ========================================================================== */
:root {
    /* Semantic Colors - Used for branding and primary actions */
    --primary: #2563eb;       /* Modern Indigo: Main buttons and highlights */
    --primary-hover: #1d4ed8; /* Slightly darker indigo for button hover states */
    --secondary: #64748b;     /* Slate Grey: Muted text and secondary buttons */
    --accent: #0ea5e9;        /* Sky Blue: Used for active states and data visualization */
    
    /* Structural Colors - Used for backgrounds and borders */
    --bg-app: #f8f9fa;        /* Light grey background for the overall app body */
    --bg-panel: #ffffff;      /* Pure white for standard cards/panels */
    --bg-input: #ffffff;      /* Pure white for text inputs */
    --text-main: #0f172a;     /* Near-black for primary readability */
    --text-muted: #64748b;    /* Slate grey for secondary info */
    --border: #e2e8f0;        /* Light grey for subtle dividers */
    
    /* Legacy Aliases - Kept for backwards compatibility with older components */
    --bg-main: var(--bg-app);
    --surface: var(--bg-panel);
    --card: oklch(0.85 0.1 220); 

    /* Physical Effects - Standardized shadows and border radii */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --radius: 12px;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Glassmorphism Defaults - Baseline variables used by the Glass Engine */
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    --blur: 15px; /* Defines how intensely the background is blurred */
}

/* ==========================================================================
   2. DARK MODE CSS VARIABLES
   When the user toggles dark mode, Dash attaches [data-theme="dark"] to the 
   body. These variables instantly override the light mode defaults above.
   ========================================================================== */
[data-theme="dark"] {
    --bg-app: #0f172a;        /* Deep Slate: Replaces light grey app background */
    --bg-panel: #1e293b;      /* Lighter Slate: Replaces pure white cards */
    --bg-input: #334155;      /* Dark input fields */
    --bg-card-mid: #475569;   /* Mid-tone slate for nested/contrasting cards */
    
    --text-main: #f1f5f9;     /* Off-white: Ensures high contrast reading */
    --text-muted: #94a3b8;    /* Lighter slate for muted text */
    --text-placeholder: #cbd5e1; /* Visible placeholder text inside dark inputs */
    
    --border: #334155;        /* Darker borders to blend with dark backgrounds */
    
    --accent: #22d3ee;        /* Neon Cyan: High visibility for data vis */
    --primary: #22d3ee;       /* Cyan replaces Indigo to pop against dark slate */
}


/* ==========================================================================
   3. THE GLASSMORPHISM ENGINE
   This section handles the frosted glass aesthetic. It is completely isolated
   and only activates if the body tag has data-glass="true" (triggered by your 
   theme switch callback) or if the specific utility classes are used.
   ========================================================================== */

/* Light Mode Glass Variables - Only sets panel variables; body gradient is in Section 4 */
body[data-glass="true"] {
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(240, 248, 255, 0.3) 100%);
}

/* Dark Mode Glass Variables - Only sets panel variables; body gradient is in Section 4 */
body[data-theme="dark"][data-glass="true"] {
    --glass-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.55) 0%, rgba(30, 41, 59, 0.35) 100%);
    --glass-border: rgba(255, 255, 255, 0.08); /* Fainter white borders for dark mode */
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* Background Animation Logic */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Core Glass Panel Utility - Replaces standard rigid dbc.Cards */
.glass-panel {
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(var(--blur)) !important;
    -webkit-backdrop-filter: blur(var(--blur)) !important; /* Safari Support */
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 16px !important;
    color: var(--text-main) !important;
}

/* Glass Inputs - Replaces standard solid white form inputs */
.glass-input {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(4px) !important;
    transition: var(--transition);
}
.glass-input:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
    outline: none;
}

/* Nested Glass Cards - Specific overrides for cards INSIDE other glass cards */
.glass-inner-card {
    background-color: rgba(248, 249, 250, 0.8);
    transition: all 0.3s ease;
}
body[data-glass="true"] .glass-inner-card {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) inset, 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
body[data-theme="dark"][data-glass="true"] .glass-inner-card {
    background: rgba(15, 23, 42, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) inset !important;
}

/* Headers for Nested Glass Cards */
body[data-glass="true"] .glass-card-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body[data-theme="dark"][data-glass="true"] .glass-card-header {
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}


/* ==========================================================================
   4. BASE HTML OVERRIDES
   Core typography and layout structure for the Dash application.
   ========================================================================== */

/* ==========================================================================
   ANIMATED BACKGROUND GRADIENT
   This sits at the bottom layer (on the body) behind the glassmorphism panels.
   ========================================================================== */

/* 1. THE MOVEMENT (KEYFRAMES)
 * This moves the oversized gradient back and forth to create a flowing effect.
 */
@keyframes animatedGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body {
    /* LIGHT MODE PALETTE 
     * Replace these 5 HEX codes with your palette from Adobe Color.
     * The '-45deg' sets the angle of the gradient.
     */
    background: linear-gradient(-45deg, #FF9A9E, #FECFEF, #A1C4FD, #C2E9FB, #E0C3FC);
    
    /* BACKGROUND SIZE 
     * Stretched to 400% so it extends beyond the screen. This is required 
     * for the panning animation to work.
     */
    background-size: 400% 400%;
    
    /* RATE OF CHANGE (SPEED)
     * Change '15s' to make the animation faster (e.g., 10s) or slower (e.g., 30s).
     */
    animation: animatedGradient 15s ease infinite;
    
    /* Ensure it covers the full viewport */
    min-height: 100vh;
    margin: 0;
    
    /* Core body properties */
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body[data-theme="dark"] {
    /* DARK MODE PALETTE 
     * Replace these 5 HEX codes with your dark-themed Adobe Color palette.
     */
    background: linear-gradient(-45deg, #0F2027, #203A43, #2C5364, #1F1C2C, #928DAB);
    
    /* Keeps the same size and animation speed as light mode */
    background-size: 400% 400%;
    animation: animatedGradient 15s ease infinite;
}

h1, h2, h3, h4, h5, h6 { color: var(--text-main) !important; }
label, .text-muted { color: var(--text-muted) !important; }

/* Sticky Sidebar Utility - Keeps the left/right columns visible while scrolling middle */
.sidebar-sticky {
    position: sticky;
    top: 24px;
    height: calc(100vh - 48px);
    overflow-y: auto;
}


/* ==========================================================================
   5. BUTTONS & INPUTS
   Custom styling for Dash Bootstrap buttons and form controls to make them
   look modern and reactive.
   ========================================================================== */

/* Standard Modern Button */
.btn-modern {
    background-color: var(--primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.btn-modern:hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Secondary Modern Button (Outlined/White) */
.btn-secondary-modern {
    background-color: white;
    color: #0f172a;
    border: 1px solid #e2e8f0;
}
.btn-secondary-modern:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

/* The RGB Glowing Button (Used for "Run Simulation") */
.btn-glow {
    position: relative;
    z-index: 0;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    font-weight: 600;
    transition: background-color 0.3s ease;
}
.btn-glow:hover {
    background-color: #0f172a !important;
    color: #ffffff !important;
}
.btn-glow::before {
    content: "";
    background: linear-gradient(45deg, #FF0080, #00CCFF, #FF0080);
    position: absolute;
    top: -2px; left: -2px;
    background-size: 600%;
    z-index: -1;
    width: calc(100% + 4px); height: calc(100% + 4px);
    filter: blur(8px);
    animation: glowing 20s linear infinite;
    transition: opacity 0.3s ease-in-out;
    border-radius: inherit;
    opacity: 0; /* Changes to 1 on hover */
}
.btn-glow:hover::before { opacity: 1; }
@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* ==========================================================================
   Global Glassmorphism Button Styles
   All buttons inherit the transparent glass aesthetic by default.
   ========================================================================== */
.btn,
button,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    transition: all 0.3s ease;
}

.btn:hover,
button:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-light:hover,
.btn-dark:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover {
    background: linear-gradient(45deg, rgba(255, 0, 128, 0.2), rgba(0, 204, 255, 0.2), rgba(255, 0, 128, 0.2)) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 10px rgba(0, 204, 255, 0.3);
    transform: translateY(-1px);
}

/* Dark Mode Overrides for Specific Buttons */
[data-theme="dark"] #open-draw-btn {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #0f172a !important; /* Force dark text for contrast against cyan */
}
[data-theme="dark"] #open-draw-btn:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* Standard Inputs & Dropdowns */
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 10px 12px;
    box-shadow: none;
    transition: var(--transition);
    background-color: var(--bg-input) !important;
    color: var(--text-main) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1); /* Subtle cyan glow ring */
}

/* Dash Core Components (Dropdowns) */
.Select-menu-outer, .Select-menu {
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
}
.Select-option {
    background-color: var(--bg-panel) !important;
    color: var(--text-main) !important;
}
.Select-option:hover {
    background-color: var(--bg-input) !important;
}


/* ==========================================================================
   6. DASH COMPONENT OVERRIDES
   Ensuring Modals, Tabs, and DataTables respect the Theme Variables.
   ========================================================================== */

/* Standard Cards */
.card {
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
}

/* Modals */
.modal-content, .modal-header, .modal-footer {
    background-color: var(--bg-panel) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}

/* Navigation Tabs */
.nav-tabs { border-bottom: 1px solid var(--border) !important; }
.nav-tabs .nav-link {
    color: var(--text-muted) !important;
    border: 1px solid transparent !important;
}
.nav-tabs .nav-link:hover {
    border-color: var(--border) !important;
    color: var(--text-main) !important;
}
.nav-tabs .nav-link.active {
    background-color: var(--bg-panel) !important;
    border-color: var(--border) var(--border) var(--bg-panel) !important;
    color: var(--accent) !important;
}

/* Dash DataTables (Non-Glass Defaults) */
.dash-table-container { background-color: transparent !important; }


/* ==========================================================================
   7. ELLAIN SPECIFIC UI
   Custom styling for the fragment gallery, tooltips, and molecule viewers.
   ========================================================================== */

/* The Gallery Container */
#fragment-gallery-container { padding: 10px; }

/* Individual Fragment Cards */
.fragment-card {
    display: flex;
    flex-direction: column;
    padding: 12px;
    margin: 5px;
    box-sizing: border-box;
    transition: var(--transition);
    border: 1px solid transparent;
    background-color: white !important;
    color: black !important;
}
.fragment-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--accent);
}
.fragment-card img { max-width: 100%; height: auto; }
.fragment-card div { word-break: break-word; overflow-wrap: anywhere; }

/* Dark Mode Overrides for Gallery Cards */
[data-theme="dark"] .fragment-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--bg-card-mid) !important;
    backdrop-filter: blur(10px);
    color: var(--text-main) !important;
}
[data-theme="dark"] .fragment-card label { color: var(--text-main) !important; }

/* The Graph Hover Tooltip */
[data-theme="dark"] #floating-tooltip-container .card {
    background-color: rgba(30, 41, 59, 0.7) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-main) !important;
}

/* Molecule Input/Preview Overrides */
.force-white { background-color: white !important; color: black !important; }
[data-theme="dark"] #parent-mol-container {
    background-color: var(--bg-card-mid) !important;
    color: var(--text-main) !important;
    padding: 12px;
    border-radius: 8px;
}
[data-theme="dark"] #parent-mol-container label,
[data-theme="dark"] #parent-mol-container p,
[data-theme="dark"] #parent-mol-container strong {
    color: var(--text-main) !important;
}


/* ==========================================================================
   8. AI ASSISTANT STYLING
   Chat history, message bubbles, and the loading animation.
   ========================================================================== */
.ai-box {
    background-color: var(--bg-panel);
    border: 1px solid var(--border);
}
.chat-history {
    background-color: var(--bg-app);
    border: 1px solid var(--border);
}

/* Message Bubbles */
.user-msg {
    background-color: #3b82f6;
    color: white;
}
.bot-msg {
    background-color: var(--bg-input);
    color: var(--text-main);
}

/* Dark Mode Overrides for AI Inputs */
[data-theme="dark"] .ai-box input,
[data-theme="dark"] .ai-box textarea {
    color: var(--text-main) !important;
}
[data-theme="dark"] .ai-box input::placeholder,
[data-theme="dark"] .ai-box textarea::placeholder {
    color: var(--text-placeholder) !important;
    opacity: 1;
}

/* Jumping Dots Animation (When AI is 'Typing') */
.typing-indicator { 
    display: flex; 
    align-items: center; 
    gap: 4px; 
    padding: 8px; 
}
.typing-indicator .dot {
    width: 8px; 
    height: 8px; 
    border-radius: 50%;
    background-color: #64748b;
    animation: jump 1.4s infinite ease-in-out;
}
.typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes jump {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
}

/* Continuous Rainbow Shimmer for Text */
.text-glow {
    background: linear-gradient(45deg, #FF0080, #00CCFF, #FF0080);
    background-size: 600%;
    animation: glowing 30s linear infinite;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Animated Gradient Text (Cleavable Bonds Colors) */
.animated-gradient-text {
    background: linear-gradient(45deg, #FF0080, #00CCFF, #FF0080);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradient 3s linear infinite;
}
@keyframes textGradient {
    to { background-position: 200% center; }
}