/* ============================================================
   Astra AI — Mobile Responsive Styles
   Covers: main app (index.html) + signup/login (signup.html)
   Breakpoints: ≤768px (tablet/phone), ≤480px (phone), ≤380px (small phone)
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   1. MAIN APP — CHAT PAGE (index.html)
────────────────────────────────────────────────────────── */

/* ── Default: hide mobile-only elements on desktop ── */
.mobile-header {
    display: none;
}

.menu-toggle {
    display: none;
}

@media (max-width: 768px) {

    /* ── Unlock body so fixed sidebar isn't clipped ── */
    body {
        overflow: hidden;
        /* keep this — we DON'T want page scroll on chat page */
    }

    /* Layout */
    .app-container {
        flex-direction: column;
    }

    /* ── Sidebar: full-screen slide-in drawer ── */
    .sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        width: 280px;
        height: 100%;
        z-index: 200;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5);
    }

    .sidebar.open {
        left: 0;
    }

    /* ── Mobile header ── */
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        background: var(--bg-sidebar);
        flex-shrink: 0;
        z-index: 10;
    }

    .menu-toggle {
        display: flex;
        font-size: 24px;
        color: var(--text-primary);
        padding: 4px;
    }

    /* ── Welcome screen ── */
    .welcome-screen {
        padding: 20px 16px 16px;
    }

    .welcome-greeting {
        font-size: 20px;
        line-height: 1.3;
    }

    .welcome-subtext {
        font-size: 15px;
        margin-bottom: 16px;
    }

    /* ── Explore + Rankings row: stack vertically ── */
    .explore-tab-row {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .explore-tab-btn,
    .rankings-tab-btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Quick action chips: scrollable row ── */
    .quick-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 8px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .quick-actions::-webkit-scrollbar {
        display: none;
    }

    .quick-action-btn {
        flex-shrink: 0;
        font-size: 12px;
        padding: 8px 14px;
        white-space: nowrap;
    }

    /* ── Astrologer slider ── */
    .astrologer-slider {
        width: 100%;
    }

    /* ── Chat messages ── */
    .chat-messages {
        padding: 16px 12px;
        gap: 14px;
    }

    .message {
        max-width: 92%;
    }

    .message-content {
        padding: 10px 14px;
        font-size: 13.5px;
    }

    /* ── Input area ── */
    .input-area {
        padding: 8px 12px 14px;
    }

    .input-wrapper {
        padding: 5px 5px 5px 8px;
        border-radius: 20px;
    }

    .chat-input {
        font-size: 14px;
        padding: 8px 0;
    }

    /* Attach menu — wider, bottom-left ── */
    .attach-menu {
        left: 8px;
        width: calc(100vw - 16px);
        max-width: 300px;
    }

    /* ── AI Rankings / Recommend modals ── */
    .ai-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .ai-modal {
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0;
        max-height: 85vh;
        overflow-y: auto;
    }

    .ai-modal-tabs {
        overflow-x: auto;
        gap: 4px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .ai-modal-tabs::-webkit-scrollbar {
        display: none;
    }

    .ai-modal-tab {
        font-size: 12px;
        padding: 8px 12px;
        flex-shrink: 0;
    }

    /* ── Explore Astrologers modal ── */
    .explore-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .explore-modal {
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0;
        height: 90vh;
        max-height: 90vh;
    }

    .explore-modal-header {
        padding: 16px 16px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .explore-modal-header-right {
        gap: 6px;
    }

    .explore-rankings-redirect {
        font-size: 11px;
        padding: 6px 10px;
    }

    .explore-filter-tabs {
        padding: 0 12px;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .explore-filter-tabs::-webkit-scrollbar {
        display: none;
    }

    .explore-filter-tab {
        flex-shrink: 0;
        font-size: 12px;
        padding: 6px 14px;
    }

    .explore-modal-body {
        padding: 12px;
        grid-template-columns: 1fr;
        /* single col on mobile */
    }

    /* Explore new cards: single column */
    .enc-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* ── Settings panel ── */
    .settings-panel {
        width: 100%;
        height: 90vh;
        border-radius: 24px 24px 0 0;
    }

    .settings-layout {
        flex-direction: column;
    }

    .settings-nav {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding-bottom: 8px;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 4px;
        scrollbar-width: none;
    }

    .settings-nav::-webkit-scrollbar {
        display: none;
    }

    .settings-title {
        display: none;
    }

    .settings-nav-item {
        flex-shrink: 0;
        padding: 8px 12px;
        font-size: 12px;
        border-radius: 8px;
    }

    .settings-nav-footer {
        display: none;
        /* moved to content area on mobile */
    }

    .settings-content {
        overflow-y: auto;
        max-height: calc(90vh - 120px);
    }

    .setting-row {
        flex-direction: column;
        gap: 8px;
    }

    .setting-control {
        width: 100%;
    }

    .setting-control select,
    .setting-control input,
    .setting-control button {
        width: 100%;
    }

    /* ── Sidebar overlay ── */
    .sidebar-overlay {
        display: block !important;
        pointer-events: none;
        z-index: 150;
        /* keep it non-blocking when inactive */
    }

    .sidebar-overlay.active {
        pointer-events: auto;
        /* only block taps when the overlay is visible */
    }
}

/* ──────────────────────────────────────────────────────────
   2. PHONE-SPECIFIC (≤480px)
────────────────────────────────────────────────────────── */

@media (max-width: 480px) {

    /* Welcome */
    .welcome-greeting {
        font-size: 18px;
    }

    .welcome-subtext {
        font-size: 14px;
    }

    /* Astrologer slider cards: slightly narrower */
    .astrologer-slider-track .slider-card {
        width: 200px;
    }

    /* Messages fill width */
    .message {
        max-width: 96%;
    }

    /* Input shrink */
    .mic-btn {
        display: none;
    }

    /* save space on very small screens */

    /* AI modal full */
    .ai-modal {
        max-height: 90vh;
    }

    /* Explore modal header: hide rankings redirect label */
    .explore-rankings-redirect {
        display: none;
    }

    /* Modals bottom sheet */
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }
}

/* ──────────────────────────────────────────────────────────
   3. SIGNUP / LOGIN PAGE (signup.html)
────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* Stack vertically — hide the decorative left panel */
    .signup-split {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }

    /* Collapse left branding panel to a slim banner */
    .signup-left {
        min-height: 180px;
        max-height: 220px;
        flex: none;
    }

    /* Push the sun higher so it doesn't collide with branding */
    .sun-shafts-wrap {
        top: 25%;
    }

    .brand-name {
        font-size: 28px;
        letter-spacing: 6px;
    }

    .brand-tagline {
        display: none;
    }

    .brand-stars span {
        font-size: 8px;
    }

    .left-branding {
        padding: 0 20px 16px;
        margin-top: auto;
    }

    /* Right panel fills rest */
    .signup-right {
        width: 100%;
        min-width: unset;
        flex: 1;
        overflow-y: auto;
        border-left: none;
        border-top: 1px solid rgba(140, 120, 200, 0.08);
    }

    /* Form panel: scroll-friendly */
    .form-panel {
        position: relative;
        /* not absolute — allow natural scroll */
        inset: unset;
        padding: 28px 24px 40px;
        overflow-y: visible;
        min-height: unset;
    }

    /* Inputs and form */
    .form-heading {
        font-size: 22px;
    }

    .form-subheading {
        font-size: 12px;
    }

    .signup-right .form-group input {
        padding: 12px 14px;
        font-size: 15px;
        /* bigger tap target */
    }

    .signup-right .auth-submit-btn {
        padding: 15px;
        font-size: 15px;
    }

    /* OTP inputs: slightly smaller */
    .otp-input {
        width: 42px;
        height: 50px;
        font-size: 20px;
    }

    /* Drawer: full-screen over panel */
    .card-drawer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 85vh;
        z-index: 200;
        border-radius: 24px 24px 0 0;
    }

    /* Scroll hint: slightly smaller */
    .drawer-scroll-hint {
        margin-top: 16px;
    }

    .hint-inner {
        padding: 8px 18px;
    }

    .hint-text {
        font-size: 10px;
    }

    /* Drawer cards: comfortable width */
    .dcard {
        padding: 14px;
    }

    .dcard-name {
        font-size: 13px;
    }

    .dcard-features li {
        font-size: 10px;
    }
}

@media (max-width: 480px) {

    /* Make left panel even slimmer */
    .signup-left {
        min-height: 140px;
        max-height: 170px;
    }

    .sun-shafts-wrap {
        top: 20%;
    }

    .brand-name {
        font-size: 24px;
        letter-spacing: 4px;
    }

    /* Form padding */
    .form-panel {
        padding: 20px 16px 32px;
    }

    .form-logo-icon {
        display: none;
    }

    /* save vertical space */
    .form-heading {
        font-size: 20px;
    }

    /* OTP: squeeze to fit 6 inputs on narrow screen */
    .otp-inputs {
        gap: 6px;
    }

    .otp-input {
        width: 38px;
        height: 46px;
        font-size: 18px;
        border-radius: 8px;
    }

    /* Social buttons: stack */
    .social-buttons {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .social-btn {
        padding: 10px;
        font-size: 12px;
    }

    /* Drawer cards closer together */
    .drawer-cards-row {
        gap: 8px;
    }

    .dcard {
        padding: 12px;
        border-radius: 12px;
    }
}

/* ──────────────────────────────────────────────────────────
   4. VERY SMALL PHONES (≤380px — e.g. iPhone SE)
────────────────────────────────────────────────────────── */

@media (max-width: 380px) {
    .welcome-greeting {
        font-size: 16px;
    }

    .quick-action-btn {
        font-size: 11px;
        padding: 7px 12px;
    }

    .form-panel {
        padding: 16px 12px 28px;
    }

    .form-heading {
        font-size: 18px;
    }

    .signup-right .form-group input {
        font-size: 14px;
        padding: 11px 12px;
    }

    .otp-input {
        width: 34px;
        height: 42px;
        font-size: 16px;
    }

    .message-content {
        padding: 9px 12px;
        font-size: 13px;
    }
}

/* ──────────────────────────────────────────────────────────
   5. LANDSCAPE PHONE (short viewport)
────────────────────────────────────────────────────────── */

@media (max-height: 500px) and (max-width: 900px) {
    .signup-left {
        min-height: 80px;
        max-height: 80px;
    }

    .brand-name {
        font-size: 20px;
        letter-spacing: 4px;
    }

    .left-branding {
        padding: 0 16px 12px;
    }

    .form-panel {
        padding: 16px 20px 20px;
    }

    .form-heading {
        font-size: 18px;
    }

    .form-logo-icon {
        display: none;
    }
}

/* ──────────────────────────────────────────────────────────
   7. SIGNUP PAGE OVERFLOW FIX
   signup-animations.css sets html,body { overflow: hidden }
   which breaks mobile scroll — override it here.
────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    html,
    body {
        height: auto;
        overflow: auto;
        overflow-x: hidden;
    }

    /* Card drawer on mobile is fixed-positioned (see above),
     so it needs a backdrop overlay */
    .card-drawer.drawer-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: -1;
        backdrop-filter: blur(2px);
    }
}


/* ──────────────────────────────────────────────────────────
   6. TOUCH IMPROVEMENTS (all mobile)
────────────────────────────────────────────────────────── */

@media (hover: none) and (pointer: coarse) {


    /* Larger tap targets */
    .quick-action-btn,
    .explore-tab-btn,
    .rankings-tab-btn,
    .menu-toggle,
    .send-btn,
    .attach-btn,
    .auth-tab,
    .dcard-cta-pill {
        min-height: 44px;
    }

    /* Remove hover-only transforms that feel janky on touch */
    .dcard:hover {
        transform: none;
    }

    .quick-action-btn:hover {
        transform: none;
    }

    /* Active state for touch feedback */
    .dcard:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    .quick-action-btn:active {
        transform: scale(0.97);
    }

    .auth-submit-btn:active {
        transform: scale(0.99);
    }

    /* ── Sidebar tap targets: no delay, reliable touch ── */
    .new-chat-btn,
    .astrologer-mini-card,
    .astrologer-sidebar-header,
    .astrologer-see-all,
    .chat-history-item,
    .upgrade-btn,
    .sidebar-footer-btn,
    .theme-toggle,
    .user-avatar,
    .menu-toggle {
        touch-action: manipulation;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(212, 165, 116, 0.15);
    }
}