As a graphic designer and color palette expert, enhance my SFDA Copilot design with a more sophisticated and cohesive color scheme while improving the visual elements.
Key Improvements:
1. Enhanced Color Palette
Introduced a complete spectrum for primary and secondary colors (50-900 shades)
Added complementary accent colors for better visual hierarchy
Improved semantic colors with better contrast ratios
Created a refined neutral gray scale
2. Modern Visual Effects
Added gradient meshes and glassmorphism effects
Enhanced shadows with multiple depths and colored variants
Implemented smooth animations with custom timing functions
Added hover states with ripple effects
3. Better Typography & Spacing
Introduced a consistent spacing scale
Added a typography scale for better hierarchy
Improved readability with better line heights
4. Accessibility Improvements
Better color contrast ratios
Clear focus states
Reduced motion options
Semantic color naming
5. Modern UI Patterns
Glassmorphic cards and modals
Gradient buttons with hover effects
Custom styled scrollbars
Animated skeleton loaders
Give the complete full code do not use " the rest of the code , etc"
Do not refactor the code too much try to keep its functionality 
here is the code 
```/* =================================
   SFDA Copilot - Refactored Styles
   ================================= */

:root {
    /* Colors */
    --primary-color: #007BFF; /* Modern Blue */
    --secondary-color: #6C757D; /* Neutral Gray */
    --accent-color-light-teal: #28A745; /* Fresh Green (Success) */

    --text-color-light: #FFFFFF;
    --text-color-light-secondary: #E0E0E0;
    --text-color-light-muted: #B0B0B0;
    --text-color-dark: #343A40; /* Dark Charcoal */
    --text-color-dark-muted: #6A737D; /* Muted Gray */

    --background-light: #F8F9FA; /* Very Light Gray */
    --background-light-alt: #E9ECEF; /* Slightly Darker Light Gray */
    --background-dark-accent: rgba(0, 0, 0, 0.05);
    --background-dark-accent-strong: rgba(0, 123, 255, 0.9); /* For select dropdown (using new primary) */

    --border-color-light: #DEE2E6; /* Light Gray */
    --border-color-medium: #ADB5BD; /* Medium Gray */
    --border-color-dark: #495057;
    --border-color-modal: rgba(173, 181, 189, 0.3); /* Muted border for auth modal */

    --alpha-white-10: rgba(255, 255, 255, 0.1);
    --alpha-white-15: rgba(255, 255, 255, 0.15);
    --alpha-white-20: rgba(255, 255, 255, 0.2);
    --alpha-white-25: rgba(255, 255, 255, 0.25);
    --alpha-white-30: rgba(255, 255, 255, 0.3);
    --alpha-white-40: rgba(255, 255, 255, 0.4);
    --alpha-white-60: rgba(255, 255, 255, 0.6);
    --alpha-white-70: rgba(255, 255, 255, 0.7);
    --alpha-white-80: rgba(255, 255, 255, 0.8);
    --alpha-white-85: rgba(255, 255, 255, 0.85);
    --alpha-white-90: rgba(255, 255, 255, 0.9);
    --alpha-white-95: rgba(255, 255, 255, 0.95);

    --alpha-black-05: rgba(0, 0, 0, 0.05);
    --alpha-black-06: rgba(0, 0, 0, 0.06);
    --alpha-black-07: rgba(0, 0, 0, 0.07);
    --alpha-black-08: rgba(0, 0, 0, 0.08);
    --alpha-black-10: rgba(0, 0, 0, 0.1);
    --alpha-black-15: rgba(0, 0, 0, 0.15);
    --alpha-black-20: rgba(0, 0, 0, 0.2);
    --alpha-black-40: rgba(0, 0, 0, 0.4);

    --color-success: #28A745; /* New accent green */
    --color-success-hover: #218838; /* Darker shade of success green */
    --color-error: #DC3545;
    --color-warning: #FFC107;
    --color-warning-background: rgba(255, 243, 205, 0.8);
    --color-warning-focus-shadow: rgba(255, 193, 7, 0.4);
    --color-secondary-hover: #5A6268; /* Darker shade of new secondary gray */
    --alpha-primary-color-25: rgba(0, 123, 255, 0.25); /* Using new primary blue */

    /* Fonts */
    --font-family-primary: 'Inter', system-ui, sans-serif;
    --font-family-monospace: monospace;

    /* Sizing & Spacing */
    --border-radius-small: 4px;
    --border-radius-base: 8px;
    --border-radius-large: 12px;
    --border-radius-message: 18px;

    /* Transitions & Animations */
    --transition-duration-short: 0.2s;
    --transition-duration-medium: 0.3s;
    --transition-duration-long: 0.6s;

    /* Shadows */
    --shadow-sm: 0 2px 5px var(--alpha-black-10);
    --shadow-md: 0 4px 12px var(--alpha-black-08);
    --shadow-lg: 0 6px 15px var(--alpha-black-15);
    --shadow-xl: 0 8px 32px 0 rgba(31, 38, 135, 0.15); /* Specific shadow for modal */
    --shadow-chat-input: 0 -5px 15px var(--alpha-black-05);
    --shadow-chat-bubble: 0 3px 8px var(--alpha-black-06);
    --shadow-user-bubble: 0 4px 10px rgba(30, 95, 140, 0.15);
    --shadow-landing-hero: 0 8px 32px rgba(31, 38, 135, 0.1);
    --shadow-gateway-content: 0 10px 25px rgba(0, 0, 0, 0.08);
    --shadow-primary-button-hover: 0 4px 12px rgba(46, 139, 87, 0.2);
}

/* --- Global Styles --- */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: var(--font-family-primary);
    color: var(--text-color-dark);
    background-color: var(--background-light);
}

.container-fluid,
.row {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* --- Mobile Header (Bootstrap Navbar Override) --- */
.navbar.d-lg-none { /* Specific to mobile view */
    background-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.navbar.d-lg-none .navbar-brand {
    color: var(--text-color-light);
    font-weight: 600;
}

.navbar.d-lg-none .navbar-toggler {
    border-color: var(--alpha-white-20);
}

.navbar.d-lg-none .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Sidebar & Offcanvas --- */
.sidebar,
.offcanvas.offcanvas-start {
    height: 100%;
    padding: 20px;
    overflow-y: auto;
    color: var(--text-color-light);
    background-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.offcanvas.offcanvas-start .offcanvas-header {
    border-bottom: 1px solid var(--alpha-white-20);
}

/* Ensures padding consistency if offcanvas-body also has .sidebar class */
.offcanvas.offcanvas-start .offcanvas-body.sidebar {
    padding: 20px;
}

/* --- Sidebar Header --- */
.sidebar-header {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color-dark);
    opacity: 0; /* Initial state for animation */
    animation: headerFadeIn var(--transition-duration-long) ease-out forwards;
}

.sidebar-header h3 {
    margin-bottom: 8px;
    font-size: 1.3rem;
    font-weight: 600;
}

.sidebar-header h3 i {
    font-size: 1.2rem;
    color: var(--alpha-white-80);
}

/* Overrides Bootstrap's default text-muted for this context */
.sidebar-header .text-muted {
    font-size: 1rem;
    font-weight: 500;
    color: var(--accent-color-light-teal); /* Removed !important by increasing specificity */
    letter-spacing: 0.5px;
}

/* Overriding potential Bootstrap margins */
.sidebar-header .auth-status-container {
    margin-top: 15px; /* Removed !important by increasing specificity */
    padding: 8px 12px;
    background-color: var(--background-dark-accent);
    border-radius: 6px;
}

.sidebar-header .auth-status-container .small {
    color: var(--text-color-light-secondary);
}

/* --- FAQ Section (Sidebar) --- */
.faq-section {
    view-transition-name: faq-section; /* For Page Transitions API */
}

.faq-section h4 {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--alpha-white-15);
    font-size: 1.1rem;
    color: var(--text-color-light-secondary);
}

.faq-section h4 i {
    margin-right: 8px;
    font-size: 1rem;
    color: var(--text-color-light-muted);
}

.faq-section .nav-pills {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-section .nav-link {
    padding: 8px 12px;
    margin-bottom: 5px; /* Replaces gap for older browsers, complements flex gap */
    font-size: 0.9rem;
    color: var(--text-color-light);
    text-align: left;
    background-color: var(--alpha-white-30);
    border: 1px solid var(--alpha-white-20);
    border-radius: var(--border-radius-base);
    opacity: 0; /* Initial state for scroll animation */
    transform-style: preserve-3d;
    will-change: transform, opacity, background-color;
    transition: background-color var(--transition-duration-short),
                transform var(--transition-duration-short),
                box-shadow var(--transition-duration-short);
    animation: faqItemFadeIn linear forwards; /* Needs to be applied directly for timeline */
    animation-timeline: faq-scroll-timeline; /* Experimental scroll-driven animation */
    animation-range: entry 20% cover 50%; /* Experimental scroll-driven animation */
}

.faq-section .nav-link:hover,
.faq-section .nav-link:focus {
    cursor: pointer;
    background-color: var(--alpha-white-25);
    box-shadow: var(--shadow-lg);
    transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) scale(1.05);
}

.faq-section .nav-link.active {
    color: var(--text-color-light);
    background-color: var(--secondary-color);
    font-weight: 600;
    transform: none; /* Reset transform for active state */
    box-shadow: 0 0 0 3px var(--accent-color-light-teal), var(--shadow-lg);
    border: 1px solid var(--accent-color-light-teal);
}

/* !important retained for disabled state to ensure override */
.faq-button:disabled {
    background-color: var(--alpha-white-10) !important;
    color: var(--text-color-light-muted) !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed;
}

/* --- Category Selector (Common Styles for Selects) --- */
.styled-select-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-color-light-secondary); /* Default for sidebar */
}

.styled-select {
    padding: 10px 15px;
    color: var(--text-color-light); /* Default for sidebar */
    background-color: var(--alpha-white-15); /* Default for sidebar */
    border: 1px solid var(--alpha-white-25); /* Default for sidebar */
    border-radius: var(--border-radius-base);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); /* Default white arrow */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: background-color var(--transition-duration-medium),
                border-color var(--transition-duration-medium),
                box-shadow var(--transition-duration-medium);
}
.styled-select:hover {
    background-color: var(--alpha-white-25); /* Default for sidebar */
    border-color: var(--alpha-white-40); /* Default for sidebar */
}
.styled-select:focus {
    outline: none;
    background-color: var(--alpha-white-25); /* Default for sidebar */
    border-color: var(--text-color-light); /* Default for sidebar */
    box-shadow: 0 0 0 0.2rem var(--alpha-white-30); /* Default for sidebar */
}
.styled-select option { /* Styling for native dropdown options */
    color: var(--text-color-light); /* Ensure contrast if select is dark */
    background-color: var(--primary-color); /* Match select background if possible */
}

/* Sidebar Specific Category Selector */
.sidebar .category-selector {
    margin-bottom: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--alpha-white-15);
}
/* .sidebar .category-selector label uses .styled-select-label */
/* .sidebar .category-selector .form-select uses .styled-select */

/* --- Custom Select Dropdown (JavaScript Driven) --- */
.custom-select-wrapper {
    position: relative;
}
.custom-select-wrapper .original-select { /* Hidden original select for accessibility/fallback */
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}
.custom-select-wrapper .custom-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    color: var(--text-color-light);
    background-color: var(--alpha-white-15);
    border: 1px solid var(--alpha-white-25);
    border-radius: var(--border-radius-base);
    cursor: pointer;
    user-select: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background-color var(--transition-duration-medium),
                border-color var(--transition-duration-medium),
                box-shadow var(--transition-duration-medium);
}
.custom-select-wrapper .custom-select-trigger:hover {
    background-color: var(--alpha-white-25);
    border-color: var(--alpha-white-40);
}
.custom-select-wrapper .custom-select-trigger:focus,
.custom-select-wrapper .custom-select-trigger.open {
    outline: none;
    background-color: var(--alpha-white-25);
    border-color: var(--text-color-light);
    box-shadow: 0 0 0 0.2rem var(--alpha-white-30);
}
.custom-select-wrapper .custom-select-trigger .selected-value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.custom-select-wrapper .custom-select-trigger .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--text-color-light);
    transition: transform var(--transition-duration-medium);
}
.custom-select-wrapper .custom-select-trigger.open .arrow {
    transform: rotate(180deg);
}
.custom-select-wrapper .custom-select-options {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
    background-color: var(--background-dark-accent-strong);
    border: 1px solid var(--alpha-white-20);
    border-radius: var(--border-radius-base);
    opacity: 0;
    visibility: hidden;
    transform-origin: top center;
    transform: scaleY(0.95) translateY(-10px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 5px 15px var(--alpha-black-10);
    transition: opacity var(--transition-duration-short),
                transform var(--transition-duration-short),
                visibility 0s var(--transition-duration-short); /* Delay visibility change */
}
.custom-select-wrapper .custom-select-options.open {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1) translateY(0);
    transition: opacity var(--transition-duration-short),
                transform var(--transition-duration-short),
                visibility 0s 0s;
}
.custom-select-wrapper .custom-select-options div {
    padding: 10px 15px;
    color: var(--text-color-light);
    cursor: pointer;
    transition: background-color var(--transition-duration-short);
}
.custom-select-wrapper .custom-select-options div:hover {
    background-color: var(--alpha-white-15);
}
.custom-select-wrapper .custom-select-options > div.selected {
    display: none; /* Hide already selected option from dropdown list */
}

/* --- Chat Area --- */
.chat-area,
.chat-container { /* .chat-area might be the outer wrapper, .chat-container the direct parent of messages/input */
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
}
.chat-container { /* Inner container with padding */
    padding: 20px;
}
.messages {
    flex-grow: 1;
    margin-bottom: 20px;
    padding-right: 10px; /* For scrollbar spacing */
    overflow-y: auto;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory; /* Experimental: ensures messages snap into view */
}
.message {
    max-width: 85%;
    margin-bottom: 15px;
    scroll-snap-align: start; /* Experimental: part of scroll-snap */
    opacity: 0; /* Initial state for animation */
    animation: fadeIn var(--transition-duration-medium) ease-out forwards;
    transition: transform var(--transition-duration-medium); /* For potential future effects */
}
.user-message {
    margin-left: auto;
}
.chatbot-message {
    margin-right: auto;
}
.message-bubble {
    position: relative;
    padding: 15px;
    max-width: 100%; /* Bubble can take full width of .message */
    word-wrap: break-word; /* Ensure long words break */
    border-radius: var(--border-radius-message);
    box-shadow: var(--shadow-chat-bubble);
    transition: box-shadow var(--transition-duration-medium);
}
.user-message .message-bubble {
    color: var(--text-color-light);
    background-color: var(--secondary-color);
    border-bottom-right-radius: var(--border-radius-small);
    box-shadow: var(--shadow-user-bubble); /* Specific shadow for user */
}
.chatbot-message .message-bubble {
    background-color: var(--background-light);
    border: 1px solid var(--border-color-light);
    border-bottom-left-radius: var(--border-radius-small);
}
.message-content {
    overflow: hidden; /* For potential text expansion effects */
    transition: max-height var(--transition-duration-medium);
}
.message-list {
    padding-left: 20px; /* Indent lists within messages */
}
.message-code { /* For inline or block code snippets */
    margin: 5px 0;
    padding: 10px;
    overflow-x: auto;
    font-family: var(--font-family-monospace);
    background-color: var(--alpha-black-05);
    border-radius: var(--border-radius-small);
}
.message-small { max-width: 60%; }
.message-medium { max-width: 75%; }
.message-large { max-width: 90%; }

.avatar {
    display: flex;
    align-items: center;
    /* margin-bottom: 5px; if avatar is above bubble text */
}
.avatar img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
}
.timestamp {
    margin-top: 5px;
    font-size: 0.75rem;
    color: var(--text-color-dark-muted);
    text-align: right;
}
.user-message .timestamp {
    color: var(--alpha-white-70);
}

/* --- Input Area --- */
.input-area {
    padding: 20px;
    background: linear-gradient(to bottom, var(--background-light), var(--background-light-alt));
    border-top: 1px solid var(--border-color-light);
    border-radius: 0 0 var(--border-radius-large) var(--border-radius-large); /* Assuming rounded corners for chat container */
    box-shadow: var(--shadow-chat-input);
    transition: box-shadow var(--transition-duration-medium);
}
.input-area .input-group {
    box-shadow: 0 4px 10px var(--alpha-black-07);
    transition: box-shadow var(--transition-duration-medium);
}
#query-input {
    padding: 12px 20px;
    font-size: 0.95rem;
    border: 1px solid var(--border-color-medium);
    border-radius: var(--border-radius-large) 0 0 var(--border-radius-large);
    transition: border-color var(--transition-duration-medium),
                box-shadow var(--transition-duration-medium);
}
#query-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem var(--alpha-primary-color-25); /* Using new variable */
}
#send-button {
    padding: 12px 24px;
    color: var(--text-color-light);
    font-weight: 500;
    background-color: var(--primary-color);
    border: none;
    border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
    will-change: transform, box-shadow; /* Hint for hover animation */
    transition: background-color var(--transition-duration-short),
                transform var(--transition-duration-short),
                box-shadow var(--transition-duration-short);
}
#send-button:hover:not(:disabled) {
    background-color: var(--secondary-color);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px) scale(1.03);
}
.input-label { /* Generic label style if used within input-area */
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-color);
}
/* Category selector specific to input area */
.input-area .category-selector {
    margin-bottom: 15px;
}
.input-area .category-selector label { /* Overrides .styled-select-label for this context */
    display: block;
    margin-bottom: 5px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-color-dark); /* Dark text for light background */
}
.input-area .category-selector .form-select { /* Uses .styled-select but with overrides */
    padding: 6px 10px;
    font-size: 0.9rem;
    color: var(--text-color-dark);
    background-color: var(--background-light);
    border: 1px solid var(--border-color-medium);
    border-radius: var(--border-radius-small);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3csvg%3e"); /* Dark arrow */
}
.input-area .category-selector .form-select:hover {
    border-color: var(--primary-color);
}
.input-area .category-selector .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem var(--alpha-primary-color-25);
}
.input-area .category-selector .form-select option {
    color: var(--text-color-dark);
    background-color: var(--background-light);
}

/* --- Toast Notification --- */
.toast-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    padding: 10px 20px;
    color: var(--text-color-light);
    border-radius: var(--border-radius-small);
    box-shadow: 0 4px 12px var(--alpha-black-15);
    opacity: 1;
    transition: opacity var(--transition-duration-medium);
}
.toast-notification.hidden {
    opacity: 0;
    pointer-events: none;
}
.toast-notification.success {
    background-color: var(--color-success);
}
.toast-notification.error {
    background-color: var(--color-error);
}

/* --- Auth Modal --- */
#authModal .modal-dialog {
    transition: transform var(--transition-duration-medium);
}
#authModal .modal-content {
    overflow: hidden; /* For border-radius to affect children */
    background: linear-gradient(135deg, rgba(46,139,87,0.75), rgba(30,95,140,0.75));
    border: 1px solid var(--border-color-modal); /* Using new variable */
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-xl); /* Specific shadow */
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}
#authModal .modal-header {
    color: var(--text-color-light);
    background-color: rgba(30, 95, 140, 0.85); /* Specific color */
    border-bottom: none;
}
#authModal .modal-header .btn-close-white { /* Specific Bootstrap class */
    filter: brightness(1.2);
}
#authModal .modal-body {
    padding: 0; /* Tabs will handle inner padding */
}
#authModal .nav-tabs {
    border-bottom: none; /* Remove default Bootstrap border */
}
#authModal .nav-tabs .nav-link {
    margin-bottom: -1px; /* To align with tab-content border if one existed */
    color: var(--alpha-white-80);
    background-color: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0; /* Override Bootstrap's default nav-link radius */
    transition: color var(--transition-duration-medium),
                border-bottom-color var(--transition-duration-medium);
}
#authModal .nav-tabs .nav-link:hover {
    color: var(--text-color-light);
    border-bottom-color: var(--alpha-white-60);
}
#authModal .nav-tabs .nav-link.active {
    color: var(--text-color-light);
    font-weight: 600;
    border-bottom-color: var(--text-color-light);
}
#authModal .tab-content {
    padding: 1.5rem;
}
#authModal .tab-pane {
    opacity: 1;
    transition: opacity var(--transition-duration-short);
}
#authModal .tab-pane:not(.active) {
    position: absolute; /* Take out of flow for fade effect */
    width: calc(100% - 3rem); /* Match tab-content padding */
    opacity: 0;
    pointer-events: none;
}
#authModal .form-floating { /* Bootstrap class */
    position: relative; /* Already default, but for emphasis */
}
#authModal .form-floating > .form-control {
    padding: 1.625rem 0.75rem 0.625rem 0.75rem; /* Bootstrap's default with adjustments */
    color: var(--text-color-dark); /* Ensures typed text is dark */
    background-color: var(--alpha-white-95);
    border: 1px solid var(--alpha-black-20);
}
#authModal .form-floating > .form-control::placeholder { /* Style placeholder text */
    color: var(--text-color-dark-muted);
    opacity: 1; /* Ensure placeholder is visible */
}
#authModal .form-floating > label {
    padding: 0.8rem 0.75rem; /* Adjust to match form-control changes */
    color: var(--text-color-dark); /* Initial label color (when not floated) */
    opacity: 1;
    font-weight: 600;
    transition: opacity var(--transition-duration-short),
                transform var(--transition-duration-short),
                color var(--transition-duration-short);
}

/* MODIFICATION: Change floating label color */
#authModal .form-floating > .form-control:focus ~ label,
#authModal .form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: 1;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    color: var(--text-color-dark-muted); /* Floated label will be dark (muted) */
    font-weight: 500;
}

#authModal .form-control:focus {
    background-color: var(--alpha-white-90);
    border-color: var(--text-color-light); /* Focus border color can remain light or match label */
    box-shadow: 0 0 0 0.25rem var(--alpha-white-30);
    color: var(--text-color-dark);
}

#authModal .form-control.is-invalid {
    background-color: var(--color-warning-background);
    border-color: var(--color-warning);
    color: var(--text-color-dark);
}
#authModal .form-control.is-invalid:focus {
    box-shadow: 0 0 0 0.25rem var(--color-warning-focus-shadow);
    color: var(--text-color-dark);
}
#authModal .invalid-feedback {
    display: inline-block; /* To allow background and padding */
    margin-top: 4px;
    padding: 2px 5px;
    font-weight: 600;
    color: var(--color-warning);
    background-color: var(--alpha-black-40);
    border-radius: 3px;
}
#authModal .form-text {
    font-size: 0.8rem;
    color: var(--alpha-white-85);
}
#authModal .btn-lg { /* Bootstrap class */
    padding: 0.75rem 1.25rem;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px var(--alpha-black-10);
    transition: transform var(--transition-duration-short),
                box-shadow var(--transition-duration-short);
}
#authModal .btn-lg:hover {
    box-shadow: 0 6px 15px var(--alpha-black-20);
    transform: translateY(-2px);
}
#authModal .btn-primary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
#authModal .btn-primary:hover {
    background-color: var(--color-secondary-hover); /* Using new variable */
    border-color: var(--color-secondary-hover); /* Using new variable */
}
#authModal .btn-success {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
#authModal .btn-success:hover {
    background-color: var(--color-success-hover); /* Using new variable */
    border-color: var(--color-success-hover); /* Using new variable */
}
#authModal .btn .spinner-border { /* For loading spinners in buttons */
    color: var(--text-color-light);
}
#authModal .btn-outline-secondary .spinner-border {
    color: var(--primary-color); /* Spinner color for outline buttons */
}

/* --- Skeleton Loader --- */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    border-radius: var(--border-radius-small);
    animation: shimmer 1.5s infinite linear;
}
.skeleton-message-container {
    display: flex;
    align-items: flex-start;
    width: 80%;
    margin-bottom: 15px;
    padding: 15px;
    background-color: var(--background-light);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-message);
    border-bottom-left-radius: var(--border-radius-small); /* Match chatbot bubble */
    box-shadow: var(--shadow-chat-bubble);
}
.skeleton-avatar {
    flex-shrink: 0; /* Prevent avatar from shrinking */
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border-radius: 50%;
}
.skeleton-content {
    flex: 1; /* Take remaining space */
}
.skeleton-line {
    width: 100%;
    height: 14px;
    margin-bottom: 10px;
}
.skeleton-line:last-child {
    margin-bottom: 0;
}
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 90%; }

/* --- Animations Keyframes --- */
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes headerFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes faqItemFadeIn { /* Used with scroll-timeline */
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { /* General purpose fade in */
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Scroll Timeline (Experimental) --- */
/* Note: @scroll-timeline is an experimental technology.
   It requires browser flags in Chromium-based browsers.
   Standard CSS Scroll-driven Animations API is emerging. */
@scroll-timeline faq-scroll-timeline {
    source: selector(#sidebarContentRegular); /* Assuming this ID exists on the scrollable sidebar content */
    orientation: block;
    /* time-range: 0.1s 0.9s; /* Example time range if needed, not typically used with scroll-timeline like this */
}

/* --- Landing Page Styles --- */
.landing-page {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.landing-hero,
.gateway-content { /* Common base for these main blocks */
    padding: 3rem 2rem; /* Adjusted padding */
    border-radius: 1rem;
    text-align: center; /* Ensure text is centered within these blocks */
}

/* Unauthenticated Hero Specifics */
.landing-hero {
    background: var(--alpha-white-90);
    border: 1px solid var(--alpha-white-20);
    box-shadow: var(--shadow-landing-hero);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.hero-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem; /* Space between icon and text */
    margin-bottom: 1rem; /* Adjusted margin */
}

.hero-icon {
    font-size: 3rem; /* Larger icon, adjust as needed */
    color: var(--primary-color);
    line-height: 1; /* Ensure icon aligns well with text */
}

.landing-hero h1 { /* Targets h1 specifically within .landing-hero */
    color: #2c3e50;
    font-weight: 700; /* fw-bold in HTML handles this, but explicit for clarity */
    margin-bottom: 0; /* Remove bottom margin as wrapper handles spacing */
    line-height: 1.2; /* Adjust line height for larger font size */
}
/* .landing-hero .bi-shield-shaded is now .hero-icon */


/* Authenticated Gateway Specifics */
.gateway-content {
    background: var(--background-light); /* Solid white background for a classic card */
    border: 1px solid var(--border-color-light); /* Standard light border */
    box-shadow: var(--shadow-gateway-content); /* Refined shadow for more definition */
    /* Removed backdrop-filter for a solid card appearance */
}

.gateway-content h1 {
    color: #2c3e50;
    font-weight: 700; /* Keep consistent with hero */
}

.gateway-image {
    color: var(--primary-color);
    opacity: 0.9;
    transition: transform var(--transition-duration-medium) ease;
}
.gateway-image:hover {
    transform: scale(1.05);
}
.gateway-content .btn-success { /* Specific styling for landing page button */
    padding: 1rem 2rem;
    font-weight: 600;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transition: background-color var(--transition-duration-medium) ease,
                border-color var(--transition-duration-medium) ease,
                transform var(--transition-duration-medium) ease,
                box-shadow var(--transition-duration-medium) ease;
}
.gateway-content .btn-success:hover {
    background-color: var(--color-success-hover); /* Slightly lighter green */
    border-color: var(--color-success-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-button-hover); /* var(--primary-color) with alpha */
}```