/* ===================================================
   RESPONSIVE.CSS - Comprehensive Mobile Styles
   =================================================== */

/* ===== LARGE TABLETS (max-width: 1200px) ===== */
@media (max-width: 1200px) {
    .col-xl-3 {
        width: 33.333%;
    }
    
    .container {
        max-width: 95%;
    }
}

/* ===== TABLETS (max-width: 992px) ===== */
@media (max-width: 992px) {
    .col-xl-3 {
        width: 50%;
    }
    
    /* Tool Detail Page */
    .container.mb-6.pb-5 .row.g-5>.col-lg-4 {
        margin-top: 1.5rem !important;
    }
    .container.mb-6.pb-5 .col-lg-4 .sticky-top {
        position: relative !important;
        top: 0 !important;
    }
    .tool-hero-compact {
        padding-top: 55px !important;
    }
    
    /* Homepage Featured Section */
    .display-1, .display-2, .display-3, .display-4 {
        font-size: 2.5rem !important;
    }
    
    h2[style*="font-size: 4rem"] {
        font-size: 2.5rem !important;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== SMALL TABLETS / LARGE PHONES (max-width: 768px) ===== */
@media (max-width: 768px) {
    /* === NAVBAR === */
    .navbar-island {
        width: 92%;
        padding: 0.6rem 1rem;
        top: 0.75rem;
    }
    
    .main.row {
        width: 100%;
    }
    
    /* Hide desktop nav items */
    .navbar-nav-modern {
        display: none !important;
    }
    
    /* === HOMEPAGE HERO === */
    .hero-title-serif, .display-1 {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
    }
    
    section[style*="min-height: 100vh"] {
        min-height: 85vh !important;
        padding: 120px 0 60px 0 !important;
        background-position: center bottom !important; /* Better image alignment */
    }
    
    .lead {
        font-size: 1.1rem !important;
        line-height: 1.5;
        padding: 0 1rem;
    }
    
    .search-wrapper-v4 {
        flex-direction: row; /* Keep row but smaller */
        padding: 6px;
        align-items: center;
    }
    
    .search-input-v4 {
        margin-bottom: 0;
        font-size: 0.9rem;
        padding-left: 0.5rem;
    }
    
    .search-icon-v4 {
        padding-left: 0.5rem;
    }
    
    .search-btn-v4 {
        width: auto;
        padding: 8px 16px;
        font-size: 0.9rem;
    }
    
    .chip-container-v4 {
        flex-wrap: wrap !important;
        justify-content: center;
        gap: 8px;
    }
    
    .chip-v4 {
        font-size: 0.75rem;
        padding: 6px 12px;
    }
    
    /* === HOMEPAGE SECTIONS === */
    h2[style*="font-size: 4rem"] {
        font-size: 1.8rem !important;
    }
    
    .col-lg-6 {
        width: 100% !important;
    }
    
    .card-body.p-5 {
        padding: 1.5rem !important;
    }
    
    .tool-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Stats Section */
    .display-4.fw-bold.text-gradient-primary {
        font-size: 2rem !important;
    }
    
    .d-flex.gap-3.justify-content-center {
        flex-direction: column;
        gap: 1rem !important;
    }
    
    /* === CHAT INTERFACE === */
    .chat-layout-wrapper {
        height: 100dvh; /* Use dynamic viewport height */
    }

    .chat-sidebar {
        position: fixed !important;
        left: -100%;
        top: 0;
        height: 100%;
        z-index: 1050;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        width: 85% !important;
        max-width: 300px;
        box-shadow: 10px 0 30px rgba(0,0,0,0.1);
    }
    
    .chat-sidebar.open {
        transform: translateX(100%);
        left: -100%; /* Keep base position, transform handles movement */
    }
    
    /* Overlay for sidebar */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        backdrop-filter: blur(4px);
        z-index: 1040;
    }
    .sidebar-overlay.active { display: block; }
    
    .chat-main {
        margin-left: 0 !important;
        border-radius: 0 !important;
        width: 100%;
        height: 100%;
    }
    
    /* Chat Input Area Mobile Fixes */
    .chat-input-wrapper {
        padding: 10px !important;
        background: white; /* Ensure visibility */
    }

    .chat-input-container {
        border-radius: 24px;
        padding: 8px 12px;
        flex-wrap: nowrap;
        gap: 8px;
        min-height: 56px;
    }
    
    .chat-input-container input {
        width: 100%; /* Let it take available space */
        min-width: 0; /* Prevent overflow */
        font-size: 16px; /* No zoom */
    }
    
    /* Hide model name on mobile, show icon only or simplify */
    .btn-model-trigger {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
    .btn-model-trigger span {
        display: none; /* Hide text label "Llama 4..." */
    }
    .btn-model-trigger::after {
        display: none; /* Hide dropdown arrow if tight */
    }
    
    /* Adjust Input Tools (+ button) */
    .input-tools {
        margin-right: -4px;
    }
    
    /* Send button positioning */
    .send-btn {
        width: 36px;
        height: 36px;
        min-width: 36px; /* Stop shrinking */
    }
    
    .prompt-chips-container {
        padding: 0 1rem 1rem 1rem;
        overflow-x: auto;
        flex-wrap: nowrap; /* Horizontal scroll for chips */
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        mask-image: linear-gradient(to right, black 90%, transparent 100%);
    }
    
    .prompt-chip {
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* === TOOLS GALLERY === */
    .filter-sidebar {
        position: fixed !important;
        left: -100%;
        top: 0;
        width: 280px;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
        background: white;
    }
    
    .filter-sidebar.open {
        left: 0;
    }
    
    .tool-card {
        padding: 1rem !important;
    }
    
    /* === AUTH PAGES === */
    .auth-container {
        padding: 1rem !important;
    }
    
    .auth-card {
        margin: 1rem;
        border-radius: 16px !important;
    }
    
    .auth-card .row {
        flex-direction: column;
    }
    
    .auth-left-panel, .auth-right-panel {
        width: 100% !important;
        padding: 2rem !important;
    }
    
    .auth-left-panel {
        display: none !important; /* Hide decorative panel on mobile */
    }
    
    /* === SUBSCRIPTION PAGE === */
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
    
    .pricing-card {
        padding: 1.5rem !important;
    }
    
    /* === LEGAL PAGES (Privacy, Terms) === */
    .privacy-nav, .terms-nav {
        position: static !important;
        margin-bottom: 2rem;
    }
    
    .privacy-content, .terms-content {
        padding: 1rem !important;
    }
    
    .privacy-section, .terms-section {
        padding: 1.5rem !important;
    }
    
    /* === FOOTER === */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }
    
    .footer-section {
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
    }
    
    /* === CTA BUTTONS === */
    .cta-buttons .btn {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
    }
    
    /* === TEAM/ABOUT === */
    .team-card {
        padding: 2rem;
    }
    .team-avatar {
        width: 120px;
        height: 120px;
    }
}

/* ===== MOBILE PHONES (max-width: 576px) ===== */
@media (max-width: 576px) {
    /* === NAVBAR === */
    .navbar-container {
        padding: 0.75rem 1rem;
    }
    .navbar-brand-modern {
        font-size: 1.25rem;
    }
    .navbar-logo-modern {
        height: 32px;
    }
    .user-info-modern {
        display: none;
    }
    .user-avatar-modern {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    
    /* === HOMEPAGE === */
    .hero-title-serif, .display-1 {
        font-size: 2rem !important;
        text-align: center !important;
    }
    
    .lead {
        font-size: 1rem !important;
        text-align: center;
    }
    
    /* === CHAT === */
    .welcome-screen h1 {
        font-size: 1.75rem !important;
    }
    
    .welcome-screen .subtitle {
        font-size: 1rem !important;
    }
    
    .guest-stack-container {
        padding: 1rem !important;
    }
    
    .glass-demo-card {
        padding: 1rem !important;
    }
    
    /* Stack Builder Results */
    .timeline-step {
        padding-left: 2rem !important;
    }
    
    .modern-tool-card {
        padding: 0.75rem !important;
    }
    
    /* === GENERAL === */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .btn {
        font-size: 0.85rem !important;
        padding: 0.5rem 1rem !important;
    }
    
    .badge {
        font-size: 0.65rem !important;
        padding: 0.3rem 0.6rem;
    }
    
    /* Cards */
    .card {
        border-radius: 12px !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    /* Forms */
    .form-control, .form-select {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
}

/* ===== VERY SMALL PHONES (max-width: 480px) ===== */
@media (max-width: 480px) {
    .navbar-brand .navbar-logo {
        height: 35px !important;
    }
    
    /* Homepage hero */
    .display-1 {
        font-size: 1.75rem !important;
    }
    
    section[style*="min-height: 100vh"] {
        padding: 80px 1rem 40px 1rem !important;
    }
    
    /* Tool cards */
    .row.g-4 {
        gap: 1rem !important;
    }
    
    .col-md-6, .col-lg-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Hide publisher CTA on mobile */
    .publisher-cta-wrapper {
        display: none !important;
    }
    
    /* Tool Detail */
    .tool-hero-compact {
        padding-top: 50px !important;
    }
    .tool-hero-compact h1.display-3 {
        font-size: 1.5rem !important;
    }
    .tool-hero-compact .lead {
        font-size: 0.85rem !important;
    }
    
    /* Glass cards on tool detail */
    .container.mb-6.pb-5 .glass-card {
        border-radius: 12px !important;
        padding: 1rem !important;
    }
    .container.mb-6.pb-5 .col-lg-4 .glass-card img.rounded-4 {
        width: 48px !important;
        height: 48px !important;
    }
    
    /* Filter chips */
    .filter-chip {
        padding: 0.25rem 0.75rem !important;
        font-size: 0.7rem !important;
    }
    
    /* Subscription pricing */
    .pricing-card .display-4 {
        font-size: 2rem !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .contact-hero,
    .social-links,
    .faq-section,
    .navbar-island,
    footer {
        display: none;
    }
    
    .contact-form-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}