As a graphic designer expert and color platter genrator expert how would you enhance the color scheme and the graphic in this code ```/* =================================

   SFDA Copilot - Refactored Styles

   ================================= */



:root {

    /* Colors */

    --primary-color: #2E8B57; /* SFDA Green */

    --secondary-color: #1E5F8C; /* Dark Blue/Green */

    --accent-color-light-teal: #A8DADC;



    --text-color-light: #fff;

    --text-color-light-secondary: #e9ecef;

    --text-color-light-muted: #adb5bd;

    --text-color-dark: #333;

    --text-color-dark-muted: #6c757d;



    --background-light: #fff;

    --background-light-alt: #F8F9FA;

    --background-dark-accent: rgba(0, 0, 0, 0.1);

    --background-dark-accent-strong: rgba(33, 99, 61, 0.9); /* For select dropdown */



    --border-color-light: #EAEAEA;

    --border-color-medium: #ced4da;

    --border-color-dark: #495057;

    --border-color-modal: rgba(209, 213, 219, 0.3); /* Specific 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;

    --color-success-hover: #21633d; /* Darken(var(--primary-color), 10%) */

    --color-error: #dc3545;

    --color-warning: #FFC107; /* Bootstrap yellow */

    --color-warning-background: rgba(255, 243, 205, 0.8); /* For auth modal invalid input */

    --color-warning-focus-shadow: rgba(255, 193, 7, 0.4);

    --color-secondary-hover: #164666; /* Darken(var(--secondary-color), 10%) */

    --alpha-primary-color-25: rgba(46, 139, 87, 0.25); /* For focus shadow */



    /* Fonts */

    --font-family-primary: 'Segoe UI', Tahoma, Geneva, Verdana, 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); /* Removed !important by increasing specificity */

    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 */

}```