:root {
    /* Palette: Calm & Serene, Nature-themed */
    --color-bg: #FAFAF8;
    /* Soft Cream */
    --color-text: #2C3E30;
    /* Dark Forest Green for text */
    --color-primary: #4A6C58;
    /* Muted Green */
    --color-primary-hover: #3A5545;
    --color-secondary: #D8E2DC;
    /* Pale Sage */
    --color-accent: #E8B49C;
    /* Soft Terracotta (warmth) */
    --color-surface: #FFFFFF;
    --border-radius: 12px;
    --font-main: 'Outfit', sans-serif;
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100vh;
    /* Fixed height for body */
    overflow: hidden;
    /* Prevent body scroll, delegate to wrapper */
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}

/* Auth State Toggling */
body.logged-in .guest-link {
    display: none !important;
}

body:not(.logged-in) .auth-link {
    display: none !important;
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 3%;
    /* Slightly reduced padding */
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* Full border instead of bottom */
    position: fixed;
    /* Fixed so it stays on top of scroll wrapper */
    top: 10px;
    width: calc(100% - 40px);
    /* Full width minus margins */
    left: 20px;
    right: 20px;
    z-index: 100;
    margin: 0;
    /* Handled by positioning */
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.scroll-wrapper {
    flex: 1;
    overflow-y: auto;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 2;
    /* Masking Magic: Hide content at the top (behind navbar) */
    /* Transparent from 0 to 80px, then fades to black (visible) at 100px */
    mask-image: linear-gradient(to bottom, transparent 0px, transparent 80px, black 120px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, transparent 80px, black 120px);
    padding-top: 100px;
    /* Space for the navbar */
    display: flex;
    flex-direction: column;
}

.logo {
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--color-primary);
    letter-spacing: -0.5px;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

/* Buttons */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    padding: 0.6rem 1.4rem;
    border-radius: 2rem;
    font-weight: 500;
    transition: transform 0.1s, background-color 0.2s, box-shadow 0.2s;
    border: 1px solid transparent;
    cursor: pointer;
    opacity: 1 !important;
    position: relative;
    z-index: 2;
}

.nav-toggle {
    display: none;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 108, 88, 0.2);
}

.btn-secondary {
    background-color: var(--color-surface);
    color: var(--color-text);
    padding: 0.6rem 1.4rem;
    border-radius: 2rem;
    font-weight: 500;
    border: 1px solid #E0E0E0;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-secondary:hover {
    border-color: #D0D0D0;
    background-color: #FAFAFA;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.btn-text {
    color: var(--color-text);
    font-weight: 500;
}

.btn-text:hover {
    opacity: 0.7;
}

/* Layout */
main {
    flex: 1;
    padding: 2rem 2%;
    /* Reduced side padding */
    max-width: 100%;
    /* Allow full width */
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 2;
    /* above background */
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 6rem 0 4rem 0;
    /* More top padding for breathing room */
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
    /* Dark green text */
}

.hero p {
    font-size: 1.3rem;
    opacity: 0.9;
    margin-bottom: 2.5rem;
    color: var(--color-text);
}

.fullscreen-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('/static/img/hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    opacity: 0.35;
    /* Subtle background */
    pointer-events: none;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Cards */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
    align-items: flex-start;
}

.card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: transform 0.2s;
    position: relative;
    z-index: 5;
    /* Ensure layering */
}

/* .card:hover {
    transform: translateY(-5px);
} */

.card h3 {
    margin-bottom: 0;
    /* Changed from 1rem to allow tight collapse */
    color: var(--color-primary);
    font-size: 1.2rem;
}

/* USP Card Interactions (Front Page) */
.usp-card-wrapper {
    position: relative;
    /* Height must be sufficient for the collapsed card content */
    /* This might need adjustment based on content length, or we set a min-height */
    height: 200px;
}

.usp-card {
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #fff;
    /* Ensure it covers content behind it */
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.usp-header {
    display: flex;
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
    flex: 1;
    /* Take up available vertical space */
    /* Space for indicator when closed */
}

.usp-header h3 {
    flex: 1;
    text-align: center;
    margin: 0;
}

.usp-icon {
    font-size: 1.2rem;
    color: var(--color-primary);
    font-weight: 300;
    transition: transform 0.3s ease;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
}

.usp-card p {
    max-height: 0;
    opacity: 0;
    margin: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Hover State - Desktop Only */
@media (min-width: 769px) {

    /* Ensure the wrapper also pops up in z-index stack so it overrides subsequent elements */
    .usp-card-wrapper:hover {
        z-index: 50;
    }

    .usp-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        position: absolute;
        top: 0;
        left: 0;
        height: auto;
        /* Allow expansion */
        z-index: 100;
    }

    .usp-card:hover p {
        max-height: 500px;
        opacity: 1;
        margin-top: 1rem;
    }
}

/* Footer Styling (ensure it is below main content) */


/* Mobile State - Standard Accordion */
@media (max-width: 768px) {
    .usp-card-wrapper {
        height: auto;
        /* Allow natural flow */
        margin-bottom: 1rem;
    }

    .usp-card:hover {
        /* No absolute positioning on mobile */
        transform: none;
        box-shadow: none;
    }

    .usp-card:hover p {
        max-height: 500px;
        opacity: 1;
        margin-top: 1rem;
    }
}


.usp-card:hover .usp-icon {
    transform: rotate(180deg);
}

/* Forms */

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
}

input,
select,
textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    background: var(--color-surface);
}

input:focus {
    outline: 2px solid var(--color-secondary);
    border-color: transparent;
}

.error-chip {
    background-color: #F8D7DA;
    color: #842029;
    /* Darker red for better contrast */
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    /* Bolder text */
    display: none;
    border: 1px solid #f5c2c7;
    text-align: center;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15);
    /* Soft red glow */
}

.success-chip {
    background-color: #D1E7DD;
    color: #0F5132;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    display: none;
    border: 1px solid #BADBCC;
    text-align: center;
    box-shadow: 0 2px 8px rgba(25, 135, 84, 0.15);
}

/* Chat Interface */
/* Chat Interface */
.chat-container {
    display: flex;
    height: 85vh;
    /* Increase height slightly */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    box-shadow: var(--shadow-soft);
    margin: 2rem auto;
    width: 96%;
    max-width: 1800px;
    /* Allow it to be very wide */
    position: relative;
    z-index: 5;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.sidebar {
    width: 280px;
    background: rgba(244, 246, 244, 0.9);
    /* Slight contrast */
    padding: 1.5rem;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    overflow-y: auto;
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.messages {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
}

.input-area {
    padding: 1.5rem;
    border-top: 1px solid #EAEAEA;
    background: var(--color-surface);
}

.message {
    margin-bottom: 1.5rem;
    max-width: 80%;
}

.message.user {
    margin-left: auto;
    background: var(--color-secondary);
    padding: 1rem;
    border-radius: 12px 12px 0 12px;
}

.message.ai {
    margin-right: auto;
    /* No bg for AI, just text or markdown */
}

/* Footer */
footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    margin: 0 20px 2rem 20px;
    /* Side and bottom margins */
    margin-top: auto;
    /* Sticky footer push */
    border-radius: var(--border-radius);
    color: var(--color-text);
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 0;
    /* Below main (z-index 2) so cards pop over */
}

.footer-links {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

/* Loading Spinner */
.spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Spinner variant for buttons with dark text */
.spinner-dark {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: var(--color-text);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .navbar {
        width: calc(100% - 20px);
        left: 10px;
        right: 10px;
        padding: 0.8rem 1rem;
    }

    .nav-links {
        gap: 0.8rem;
    }

    .nav-links a.btn-text {
        font-size: 0.9rem;
    }

    /* Hide less important nav items on very small screens if needed, 
       but for now we keep them or stack them if needed. 
       Usually hamburger menu is better but let's just adjust spacing first.
    */

    .chat-container {
        height: calc(100vh - 80px);
        /* Adjust for navbar */
        margin: 1rem auto;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        border: none;
        flex-direction: column;
        /* Stack if needed, but we use absolute sidebar */
        position: relative;
        overflow: hidden;
    }

    /* Sidebar Drawer */
    .sidebar {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 80%;
        /* Width of drawer */
        max-width: 300px;
        z-index: 20;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        background: #F4F6F4;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Overlay when sidebar is open */
    .sidebar-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 15;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .sidebar.open+.sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .chat-main {
        width: 100%;
        height: 100%;
    }

    .messages {
        padding: 1rem;
    }

    .message {
        max-width: 90%;
    }

    /* Mobile Menu Toggle */
    .mobile-menu-btn {
        display: block !important;
        /* Force show */
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.5rem;
        color: var(--color-primary);
        z-index: 10;
    }


    .nav-toggle {
        display: block !important;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 101;
    }

    .hamburger {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--color-primary);
        position: relative;
        transition: all 0.3s;
    }

    .hamburger::before,
    .hamburger::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background: var(--color-primary);
        left: 0;
        transition: all 0.3s;
    }

    .hamburger::before {
        top: -6px;
    }

    .hamburger::after {
        bottom: -6px;
    }

    /* Active State for Hamburger */
    .nav-toggle.active .hamburger {
        background: transparent;
    }

    .nav-toggle.active .hamburger::before {
        transform: rotate(45deg);
        top: 0;
    }

    .nav-toggle.active .hamburger::after {
        transform: rotate(-45deg);
        bottom: 0;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        padding: 1rem;
        border-radius: 0 0 20px 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-top: none;
        gap: 1rem;
        text-align: center;
    }

    .nav-links.nav-open {
        display: flex;
    }

    .nav-links a.btn-text {
        font-size: 1rem;
        padding: 0.5rem;
        display: block;
    }

    /* Ensure buttons stretch full width */
    .nav-links a.btn-primary,
    .nav-links a.btn-secondary {
        width: 100%;
        text-align: center;
        display: block;
    }

    .chat-header-mobile {
        display: flex !important;
        /* Force show */
        align-items: center;
        padding: 0.5rem 1rem;
        background: rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        justify-content: space-between;
    }
}

.mobile-menu-btn {
    display: none;
}

.chat-header-mobile {
    display: none;
}