/* Mobile Devices - Now triggers at 855px to accommodate more LLMs */
@media (max-width: 855px) {

    /* Push content to bottom on mobile */
    body {
        align-items: flex-end;
        padding-bottom: 15vh;
        /* Lift up from bottom for standard mobile */
        overflow-x: hidden;
        /* Prevent horizontal scroll */
    }

    /* Extremely Small Devices (iPhone SE, S8+, etc.) */
    @media (max-width: 380px),
    (max-height: 700px) {
        body {
            padding-bottom: 3vh;
            /* Closer to bottom for small screens */
        }

        .btn-signup-large {
            width: 100%;
        }


        /* Extra compact footer for tiny screens */
        .site-footer {
            padding: 1.5rem 1rem 1rem;
            margin-top: 2rem;
        }

        .footer-content {
            gap: 1.5rem;
        }

        .footer-logo .brand-text {
            font-size: 1rem;
        }

        .social-link {
            width: 36px;
            height: 36px;
        }
    }

    /* Container and Heading handled by Clamp variables now */

    h1 {
        white-space: normal;
        /* Keep wrap logic */
    }

    /* Mobile LLM Dropdown Logic */
    .llm-tabs-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        /* Gear left, Active right? Or Gear next to active */
        position: relative;
        /* For dropdown positioning if needed, or flow */
        background: rgba(30, 41, 59, 0.6);
        /* Slightly darker for dropdown feel */
        transition: all 0.3s ease;
    }

    .llm-mobile-toggle {
        display: flex;
        /* Show gear on mobile */
        order: 2;
        /* Move to right */
        z-index: 10;
        /* Ensure clickable */
        padding: 0.5rem;
        /* Ensure touch target */
    }

    /* Default Mobile State: Hide non-active tabs */
    .llm-tab:not(.active) {
        display: none;
    }

    /* Make active tab visible and styled appropriately */
    .llm-tab.active {
        display: flex;
        order: 1;
        /* Before gear */
        background: transparent;
        /* Cleaner look next to gear? Or keep pill */
        color: var(--accent-orange);
        flex: 1;
        /* Take available space? Or just sit there */
        justify-content: flex-start;
        /* Align left */
        padding-left: 0.5rem;
    }

    /* Expanded State - Show All */
    .llm-tabs-container.expanded {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        border-radius: 1rem;
        padding: 1rem;
    }

    .llm-tabs-container.expanded .llm-mobile-toggle {
        align-self: flex-end;
        /* Move gear/close to corner? */
        margin-bottom: 0.5rem;
        color: var(--accent-orange);
        /* Highlight when open */
    }

    .llm-tabs-container.expanded .llm-tab {
        display: flex;
        /* Show all */
        order: unset;
        /* Reset order */
        justify-content: flex-start;
        /* Align text left */
        padding-left: 1rem;
        background: rgba(255, 255, 255, 0.05);
        /* List item BG */
    }

    .llm-tabs-container.expanded .llm-tab.active {
        background: var(--accent-orange);
        color: var(--bg-color);
    }

    .input-area {
        padding: 1rem;
        /* Ensure symmetrical padding */
    }
}

/* Mobile adjustments */
@media (max-width: 855px) {
    h1 {
        font-size: 2rem;
        white-space: normal;
        /* Allow wrapping on mobile */
    }

    .nav-logo img {
        height: 24px !important;
    }

    /* Specific 450px rule requested by user */
    @media (max-width: 450px) {

        .nav-logo img,
        .footer-logo img {
            height: 30px !important;
        }
    }

    /* Shrink navbar logo at very small widths */
    @media (max-width: 400px) {
        .nav-logo {
            font-size: 0.9rem;
            /* Reduced from 1.1rem */
        }

        .nav-logo svg {
            width: 18px;
            /* Reduced from 24px */
            height: 18px;
        }

        /* Shrink user profile section to match */
        .user-name {
            font-size: 0.8rem;
            /* Reduced from 0.95rem */
            max-width: 80px;
            /* Reduced from 120px */
        }

        .user-avatar {
            width: 30px;
            /* Reduced from 36px */
            height: 30px;
            font-size: 0.85rem;
            /* Reduced from 1rem */
        }

        .btn-logout {
            width: 18px;
            /* Reduced from 20px */
            height: 18px;
        }

        .btn-logout svg {
            width: 16px;
            height: 16px;
        }

        .browser-address-bar {
            font-size: 0.65rem;
            padding: 4px 8px;
        }
    }

    /* Tutorial Section Mobile Width */
    .tutorial-section {
        width: 100%;
        max-width: 95%;
        margin: 4rem auto;
        padding: 1rem;
        gap: 1.5rem;
    }

    /* Footer Responsive Styles for Mobile */
    .site-footer {
        width: 95vw;
        /* Wider on mobile */
        padding: 2rem 1.5rem 1.5rem;
        /* Reduced padding */
        margin-top: 4rem;
        /* Less top margin */
        border-radius: 20px;
        /* Smaller radius */
    }

    .footer-content {
        grid-template-columns: 1fr;
        /* Single column on mobile */
        gap: 2rem;
        /* Reduced gap */
    }

    .footer-brand {
        text-align: center;
        /* Center on mobile */
        align-items: center;
    }

    .footer-logo img {
        height: 28px !important;
    }

    .footer-logo .brand-text {
        font-size: 1.2rem;
        /* Smaller on mobile */
    }

    .footer-tagline {
        max-width: 100%;
        /* Full width on mobile */
        text-align: center;
    }

    .footer-socials {
        justify-content: center;
        /* Center social icons */
    }

    .footer-links-group {
        align-items: center;
        /* Center links */
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        /* Stack vertically */
        gap: 0.5rem;
        text-align: center;
    }
}

/* Tablet/Desktop */
@media (min-width: 856px) {
    h1 {
        white-space: normal;
        /* Allow wrap on tablets/laptops */
    }

    /* Slightly downwards for laptops (Default for >640px) */
    body {
        align-items: flex-end;
        padding-bottom: 10vh;
        /* Lowered further per request */
        overflow-x: hidden;
        /* Prevent horizontal scroll */
    }
}

/* Tablet Specific - Lift Upwards (iPad Portrait/Smaller Tablets) */
@media (min-width: 856px) and (max-width: 1023px) {
    body {
        padding-bottom: 25vh;
        /* Higher up than laptops */
    }
}

/* Large Desktop - Prevent Wrap */
@media (min-width: 1024px) {
    h1 {
        white-space: nowrap;
    }
}

/* Tablet / Smaller Laptop Adjustments for Tutorial Section */
@media (max-width: 1023px) {
    .tutorial-section {
        width: 90%;
        margin: 5rem auto;
    }

    /* Footer Tablet Styles */
    .site-footer {
        width: 85vw;
        padding: 3rem 2rem 2rem;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        /* 2 columns on tablet */
        gap: 3rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
        /* Span full width */
    }
}

/* Small Laptops / Height Constrained Screens */
@media (min-width: 856px) and (max-height: 850px) {
    body {
        align-items: center;
        /* Center instead of flex-end */
        padding-bottom: 0.5rem;
        /* Further reduced from 2rem */
        padding-top: 60px;
        /* Further reduced top padding */
    }

    .container {
        gap: 1rem;
        /* Further reduced from 1.25rem */
    }

    h1 {
        font-size: 1.85rem;
        /* Slightly smaller heading */
    }

    .input-area {
        min-height: 100px;
        padding: 0.75rem;
    }

    .prompt-style-selector {
        margin-top: 0.25rem;
    }

    .product-footer {
        margin-top: 2rem;
        /* Further reduced from 3rem */
    }

    .site-footer {
        margin-top: 4rem;
        /* Reduced from 8rem (128px) */
        padding-top: 2rem;
        /* Reduced from 4rem (64px) */
        padding-bottom: 1rem;
        /* Reduced from 2rem */
        margin-bottom: 1rem;
        /* Reduced from 2rem */
    }
}

/* "Normal Screens" / Large Desktop - Restore original center position */
@media (min-width: 1441px) {
    body {
        align-items: center;
        /* Back to center/upwards */
        padding-bottom: 0;
        /* Removing the laptop offset */
        overflow-x: hidden;
        /* Prevent horizontal scroll */
    }
}

/* Mobile adjustments for small screens (< 855px) - Matches main mobile breakpoint */
@media (max-width: 855px) {




    /* Fix Send Button overflow */
    .input-toolbar {
        flex-wrap: nowrap;
        /* Prevent wrapping */
        gap: 0.5rem;
    }

    /* Make send button slightly smaller if needed, but flex-shrink should handle it */
    #generate-btn {
        flex-shrink: 0;
    }
}

/* 3-Dot Menu Feature (< 600px) */
@media (max-width: 600px) {

    /* Style Options Container: Collapse to one item + menu */
    #style-options-container,
    #demo-style-options-container {
        position: relative;
        flex-wrap: wrap;
        /* Allow expanding */
        gap: 0.25rem;
        /* Reduced gap as requested */
    }

    .info-section {
        padding: 1rem;
    }

    .premium-graph-card {
        padding: 1rem;
    }

    .metrics-section {
        padding: 0px;
    }

    /* By default hide inactive chips */
    #style-options-container .style-btn:not(.active),
    #demo-style-options-container .style-btn:not(.active) {
        display: none;
    }

    /* Reveal the active one */
    #style-options-container .style-btn.active,
    #demo-style-options-container .style-btn.active {
        display: flex;
        order: -1;
        /* Ensure it's first */
    }

    /* Force toolbar centering on mobile if requested */
    .input-toolbar {
        justify-content: center !important;
        gap: 0.5rem;
    }

    /* Show the kebab menu button */
    .style-menu-toggle {
        display: flex !important;
        /* Force show */
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--text-secondary);
        width: 32px;
        /* Slightly larger for touch */
        height: 32px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        margin-left: 0.25rem;
        z-index: 101;
    }

    /* Detached Dropdown Menu */
    .style-dropdown-menu {
        position: absolute;
        bottom: 100%;
        left: 0;
        margin-bottom: 0.75rem;
        /* Increased spacing from bar */
        background: var(--panel-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 0.75rem;
        /* More padding inside menu */
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        /* Increased gap between buttons */
        min-width: 200px;
        /* Slightly wider */
        box-shadow: 0 10px 40px -5px rgba(0, 0, 0, 0.5);
        z-index: 200;

        /* Animation states */
        opacity: 0;
        transform: translateY(10px) scale(0.98);
        transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
    }

    .style-dropdown-menu.show {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .style-dropdown-menu .style-btn {
        display: flex !important;
        /* Force show */
        width: 100%;
        justify-content: flex-start;
        background: transparent;
        border: 1px solid transparent;
        color: var(--text-secondary);
        padding: 0.75rem 1rem;
        /* Larger touch target / "bigger" feeling */
        border-radius: 6px;
        /* Less border radius as requested */
        font-size: 0.95rem;
        /* Slightly larger text */
        font-weight: 500;
        transition: all 0.2s ease;
        text-align: left;
    }

    .style-dropdown-menu .style-btn:hover {
        background: rgba(255, 255, 255, 0.03);
        color: var(--text-heading);
    }

    .style-dropdown-menu .style-btn.active {
        background: transparent;
        /* No block background */
        color: var(--accent-orange);
        font-weight: 600;
        border-color: transparent;
        /* Minimal left accent or glow could be added, but user asked for "minimal selected effect" */
        /* Let's use a subtle text shadow or just the color change as requested "minimal" */
        box-shadow: none;
        position: relative;
    }

    /* Optional: Tiny dot indicator for active state */
    .style-dropdown-menu .style-btn.active::after {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        background-color: var(--accent-orange);
        border-radius: 50%;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        box-shadow: 0 0 8px var(--accent-orange);
    }

    /* --- Comparison Section (Ultra Responsive) --- */
    .comparison-section {
        margin: 4rem 0;
        width: 95vw;
        padding: 0 1rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .comparison-container {
        padding: 1.5rem !important;
        /* Fix leaning caused by 4rem padding on small screens */
        gap: 2.5rem;
    }

    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        width: 100%;
        justify-items: center;
        /* Center cards */
    }

    .comparison-card {
        height: auto;
        min-height: 380px;
    }

    /* Correct Fossil Selector to input-toolbar */
    .input-toolbar {
        padding: 12px 0;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }

    #demo-prompt-input {
        text-align: left;
        width: 100%;
        font-size: 1rem;
    }

    .btn-primary-small {
        width: 100%;
        justify-content: center;
        padding: 14px;
        font-size: 1rem;
    }

    /* --- Steps Section (Ultra Responsive) --- */
    .how-it-works-section {
        width: 95vw;
        margin-top: 6rem;
        gap: 3rem;
    }

    .steps-container {
        flex-direction: column;
        align-items: center;
        gap: 4rem;
    }

    .step-card {
        width: 75%;
        padding: 2.5rem 1.5rem;
    }

    .step-connector {
        width: 2px;
        height: 40px;
        flex: 0 0 auto;
        margin: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, var(--accent-orange) 50%, rgba(255, 255, 255, 0.1) 100%);
    }

    /* --- Bento Grid Stacking (Ultra Responsive) --- */
    .bento-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .bento-item {
        width: 100% !important;
        height: auto !important;
        min-height: 320px;
    }

    .span-2-2,
    .span-1-2,
    .span-2-1 {
        grid-column: unset !important;
        grid-row: unset !important;
    }

    .landscape {
        flex-direction: column !important;
        gap: 2rem;
    }

    .visual-side {
        width: 100% !important;
        height: 180px;
    }

    /* --- Tutorial Section (Ultra Responsive) --- */
    .tutorial-heading {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
        margin-top: 2rem;
    }

    .browser-frame {
        border-radius: 12px;
    }

    .tutorial-section .video-container {
        height: auto !important;
        padding-top: 0 !important;
    }

    /* Mobile Landscape Optimization */
    @media (max-height: 500px) and (orientation: landscape) {
        .tutorial-section .video-container {
            padding-top: 0 !important;
            height: auto !important;
            max-height: 70vh;
        }
    }

    /* --- CTA (Ultra Responsive) --- */
    .cta-card {
        padding: 4rem 1.5rem;
        text-align: center;
    }

    .cta-title {
        font-size: clamp(2rem, 10vw, 2rem);
    }

    .cta-actions {
        flex-direction: column;
        gap: 1rem;
    }

    .btn-signup-large {
        width: 85%;
    }
}

/* Tablet / Large Mobile Breakpoint (600px - 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
    .comparison-section {
        width: 95vw;
    }

    .comparison-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .bento-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .span-2-2 {
        grid-column: span 2 !important;
    }

    .span-1-2 {
        grid-row: span 2 !important;
    }
}

/* Specific iPad/Tablet Portrait Optimization */
@media (max-width: 1024px) and (orientation: portrait) {
    .steps-container {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
        margin-top: 2rem;
    }

    .step-card {
        width: 80%;
        max-width: 500px;
        min-height: auto;
    }

    /* Rotate connector to vertical */
    .step-connector {
        width: 2px;
        height: 50px;
        flex: 0 0 auto;
        margin: 0;
        background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.1) 0%,
                var(--accent-orange) 50%,
                rgba(255, 255, 255, 0.1) 100%);
    }
}

/* Ensure Stacking for Comparison Grid on Portrait Tablets */
@media (max-width: 1024px) and (orientation: portrait) {
    .comparison-grid {
        grid-template-columns: 1fr !important;
    }
}