/* ==========================================================================
   Findle — mobile layer
   --------------------------------------------------------------------------
   This file is loaded last, so it owns the layout below 768px. Keep mobile
   rules here rather than adding another @media block to style.css: the reason
   this file used to need !important on almost every line was that four
   separate blocks were each redefining .topbar, .content-area and the product
   card, and the last one to load quietly won.

   Sections:
     1.  Viewport & scroll container
     2.  Topbar (brand, account controls)
     3.  Search field
     4.  Search tabs
     5.  Content area & bottom chat clearance
     6.  Product grid — 3 columns
     7.  Workbench drawers
     8.  Modals & settings
     9.  Auth pages
     10. Alerts master / detail
     11. Small phones (<= 480px)
     12. Landscape phones
     13. Dark mode
   ========================================================================== */

@media (max-width: 768px) {

    /* 1. Viewport & scroll container
       ------------------------------------------------------------------ */

    /* 100vh on a phone includes the space behind the browser chrome, which
       cuts off the bottom of a body that cannot scroll. dvh tracks the chrome
       as it hides and reveals. */
    @supports (height: 100dvh) {

        body,
        .app-container {
            height: 100dvh;
        }
    }

    /* Nothing below should be able to push the page sideways. */
    .app-container,
    .main-content {
        max-width: 100%;
        overflow-x: hidden;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
        /* Momentum scrolling; .main-content is the real scroll container. */
        -webkit-overflow-scrolling: touch;
    }


    /* 2. Topbar
       ------------------------------------------------------------------
       Two rows: brand + account on the first, the search field on the
       second. Pinning is handled by .app-header, which wraps this and the
       tabs row so both stay on screen while results scroll. */
    .topbar {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        height: auto;
        min-height: 0;
        padding: 10px 12px;
        background: #ffffff;
    }

    .topbar-brand {
        order: 1;
        flex: none;
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .topbar-brand img {
        width: 40px;
        height: 40px;
    }

    .topbar-brand span {
        font-size: 1.1rem;
        white-space: nowrap;
    }

    /* The sign-in / avatar cluster sits opposite the brand. */
    .right-controls {
        order: 2;
        display: flex;
        flex: 1;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .topbar-auth-btn {
        padding: 8px 14px;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .right-controls .icon-btn {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    /* Anchored to the viewport edge, the desktop offsets would push it
       off-screen. Vertical placement is inherited: top: calc(100% + 8px)
       clears the two-row header on its own. */
    .profile-dropdown {
        right: 12px;
        left: auto;
        width: auto;
        min-width: 220px;
        max-width: calc(100vw - 24px);
    }


    /* 3. Search field
       ------------------------------------------------------------------ */
    .topbar-search-container {
        order: 3;
        display: flex;
        width: 100%;
        flex: none;
        margin: 0;
    }

    .search-input-wrapper {
        width: 100%;
        border-radius: 14px;
        padding: 2px 8px;
    }

    .topbar-search-input {
        /* 16px keeps iOS from zooming the page when the field takes focus. */
        font-size: 16px;
        min-height: 44px;
        padding: 8px 0;
        min-width: 0;
    }

    /* 44px is the smallest reliably tappable target. */
    .search-plus-btn,
    .search-icon-btn {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .search-options-dropdown {
        left: 0;
        right: 0;
        width: auto;
    }


    /* 4. Search tabs
       ------------------------------------------------------------------
       Centred, and still able to scroll horizontally if the labels ever grow
       past the viewport (longer translations, a fourth tab). */
    .topbar-search-tabs-container {
        display: flex;
        /* `safe` is what makes this combination work: centre while the row
           fits, fall back to flex-start when it overflows, so the first tab
           can never end up scrolled off the left edge and unreachable. */
        justify-content: safe center;
        padding: 0 12px;
        min-height: 40px;
        height: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Hide the scrollbar but keep the scrolling. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .topbar-search-tabs-container::-webkit-scrollbar {
        display: none;
    }

    .topbar-search-tabs {
        justify-content: center;
        gap: 14px;
        width: max-content;
        align-items: center;
    }

    .search-tab {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 9px 6px;
        font-size: 0.85rem;
        flex-shrink: 0;
        white-space: nowrap;
    }


    /* 5. Content area & bottom chat clearance
       ------------------------------------------------------------------
       .bottom-chat-container is fixed to the bottom of the viewport, so the
       content has to reserve room for it or the last row of results sits
       underneath. This pairing is the whole reason both values live here. */
    .content-area {
        padding: 12px;
        padding-bottom: 150px;
        width: 100%;
        align-items: stretch;
    }

    .bottom-chat-container {
        width: calc(100% - 20px);
        max-width: 100%;
        bottom: 10px;
        /* Clear the home indicator on gesture-nav phones. */
        bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .chat-input-wrapper {
        padding: 6px 10px;
        gap: 8px;
        border-radius: 16px;
    }

    #chat-bottom-input {
        font-size: 16px;
        max-height: 120px;
    }

    .chat-plus-btn,
    .chat-send-btn,
    .chat-clear-btn {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
    }

    .ai-welcome-title {
        font-size: 1.6rem;
        margin-bottom: 20px;
        padding: 0 12px;
    }

    .chat-container {
        width: 100%;
        max-width: 100%;
        padding-top: 5px;
    }

    .message {
        max-width: 95%;
    }

    .message-content {
        padding: 14px;
        font-size: 0.95rem;
    }


    /* 6. Product grid — 3 columns
       ------------------------------------------------------------------
       Three across is deliberate and stays at every phone width; the type
       and image scale down instead of the column count. */
    .products-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        margin-top: 1rem;
        padding: 0;
    }

    .product-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: none;
        height: 100%;
        min-height: 180px;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        overflow: hidden;
    }

    .product-img {
        height: 84px;
        min-height: 84px;
        padding: 5px;
        flex-shrink: 0;
    }

    .product-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .product-info {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
        padding: 6px;
    }

    .product-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.72rem;
        line-height: 1.25;
        /* Two clamped lines, so every card in a row ends at the same place. */
        height: 2.5em;
        margin-bottom: 4px;
    }

    .product-price {
        font-size: 0.8rem;
        font-weight: 700;
        /* Pinned to the bottom so prices line up across the row. */
        margin-top: auto;
    }

    .product-old-price {
        font-size: 0.62rem;
    }

    .product-discount-tag {
        font-size: 0.6rem;
        padding: 1px 3px;
    }

    /* Stars do not survive a 108px column; the rating stays in the detail view. */
    .product-rating {
        display: none;
    }

    .product-who-by {
        font-size: 0.6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* 7. Workbench drawers (monitoring, notifications)
       ------------------------------------------------------------------
       The full-screen geometry and the oversized close button stay in
       style.css; only the inner spacing is adjusted here. */
    .workbench-header {
        padding: 14px 16px;
    }

    .workbench-content {
        padding: 16px;
    }


    /* 8. Modals & settings
       ------------------------------------------------------------------ */
    .modal-box {
        width: calc(100% - 24px);
        max-width: 100%;
        padding: 1.5rem 1.25rem;
    }

    /* The settings dialog is a 800x500 two-pane layout on desktop. At phone
       width the 200px nav rail leaves no room for the panel beside it, so the
       rail becomes a scrolling row of chips above the content. */
    .settings-modal {
        width: calc(100% - 24px);
        max-width: 100%;
        height: auto;
        max-height: 85vh;
        /* .modal-box above re-adds padding; this dialog draws its own panes
           edge to edge. */
        padding: 0;
    }

    .settings-container {
        flex-direction: column;
        overflow: hidden;
    }

    .settings-sidebar {
        width: 100%;
        display: flex;
        gap: 4px;
        padding: 8px;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

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

    .settings-nav-item {
        flex-shrink: 0;
        padding: 8px 12px;
        font-size: 0.85rem;
        border-radius: 10px;
        white-space: nowrap;
    }

    .settings-content {
        padding: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Label above control, so neither gets crushed. */
    .setting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .setting-control {
        width: 100%;
        /* The desktop rule indents the control away from its label; stacked,
           that indent just pushes it past the panel edge. */
        margin-left: 0;
    }

    .settings-footer {
        padding: 12px 16px;
    }

    .settings-select {
        width: 100%;
        font-size: 16px;
    }

    .alert-modal-box {
        width: calc(100% - 24px);
        max-width: 100%;
    }


    /* 9. Auth pages
       ------------------------------------------------------------------ */
    .auth-container {
        padding: 1rem;
        min-height: 100vh;
        align-items: center;
    }

    .auth-box {
        width: 100%;
        max-width: 100%;
        padding: 1.5rem 1.25rem;
    }

    .auth-box h2 {
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
    }

    .auth-form input,
    .auth-form button,
    .google-login-btn {
        width: 100%;
        /* 16px again, to stop iOS zooming on focus. */
        font-size: 16px;
        padding: 14px 12px;
    }

    .google-login-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-sizing: border-box;
    }


    /* 10. Alerts master / detail
       ------------------------------------------------------------------
       One pane at a time. ai_interaction.js toggles .mobile-detail-active on
       the container when a row is opened, and clears it on back. */
    .content-area:has(.alerts-page-container) {
        padding: 0;
        /* .content-area already has flex: 1 inside .main-content, which has a
           definite height, so it fills whatever the pinned .app-header leaves.
           The old calc(100vh - 120px) guessed a header height and stopped
           matching it the moment the header changed. */
        min-height: 0;
    }

    .alerts-page-container {
        display: block;
        position: relative;
        height: 100%;
    }

    .alerts-sidebar {
        display: flex;
        width: 100%;
        height: 100%;
        max-height: none;
        border-right: none;
        border-bottom: none;
    }

    .alert-detail-view {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;
        z-index: 20;
    }

    .alerts-page-container.mobile-detail-active .alerts-sidebar {
        display: none;
    }

    .alerts-page-container.mobile-detail-active .alert-detail-view {
        display: flex;
    }

    .mobile-back-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0;
        background: transparent;
        border: none;
        font-family: 'Outfit', sans-serif;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--primary);
        cursor: pointer;
    }

    /* Sticky inside .alert-detail-content-wrapper, whose 1.25rem padding is
       cancelled and re-applied so the header can span the full width. */
    .mobile-sticky-header {
        display: block;
        position: sticky;
        top: 0;
        z-index: 50;
        background: #ffffff;
        margin: -1.25rem -1.25rem 1rem -1.25rem;
        padding: 1.25rem 1.25rem 0.75rem 1.25rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
}


/* 11. Small phones
   ====================================================================== */
@media (max-width: 480px) {
    .topbar {
        padding: 8px 10px;
    }

    .topbar-brand img {
        width: 36px;
        height: 36px;
    }

    .topbar-brand span {
        font-size: 1rem;
    }

    .topbar-auth-btn {
        padding: 7px 12px;
        font-size: 0.8rem;
    }

    .content-area {
        padding: 10px;
        padding-bottom: 145px;
    }

    .products-grid {
        gap: 6px;
    }

    .product-img {
        height: 74px;
        min-height: 74px;
    }

    .product-title {
        font-size: 0.68rem;
    }

    .product-price {
        font-size: 0.75rem;
    }

    .ai-welcome-title {
        font-size: 1.35rem;
    }

    .message {
        max-width: 100%;
    }
}


/* 12. Landscape phones
   ======================================================================
   Short viewport: the two-row topbar plus the bottom chat bar leave almost
   nothing for content, so trim both. */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
    .topbar {
        padding: 6px 12px;
    }

    .topbar-search-input {
        min-height: 38px;
    }

    .content-area {
        padding-bottom: 120px;
    }

    .settings-modal {
        max-height: 92vh;
    }
}


/* 13. Dark mode
   ====================================================================== */
@media (max-width: 768px) {
    body.dark-mode {
        background-color: #0f172a;
    }

    body.dark-mode .app-header,
    body.dark-mode .topbar {
        background: #0f172a;
    }

    body.dark-mode .topbar {
        border-bottom: 1px solid #1e293b;
    }

    body.dark-mode .search-input-wrapper {
        background: #1e293b;
        border-color: #334155;
    }

    body.dark-mode .topbar-search-tabs-container {
        background: #0f172a;
        border-bottom: 1px solid #1e293b;
    }

    body.dark-mode .product-card {
        background: #1e293b;
        border-color: #334155;
    }

    body.dark-mode .product-img {
        background: #0f172a;
    }

    body.dark-mode .product-info {
        background: #1e293b;
    }

    body.dark-mode .settings-sidebar {
        background: #0f172a;
        border-bottom-color: #1e293b;
    }

    body.dark-mode .mobile-actions-popover {
        background: #1e293b;
        border-color: #334155;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    }

    body.dark-mode .popover-item {
        color: #f1f5f9;
    }

    body.dark-mode .popover-item i {
        color: #94a3b8;
    }

    body.dark-mode .popover-item:active {
        background: rgba(255, 255, 255, 0.05);
    }

    body.dark-mode .active-tag {
        background: rgba(148, 163, 184, 0.15);
        border-color: rgba(148, 163, 184, 0.3);
        color: #f1f5f9;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    body.dark-mode .active-tag i {
        color: #94a3b8;
    }

    body.dark-mode .active-tag i.fa-xmark {
        color: #f1f5f9;
        opacity: 0.8;
    }

    body.dark-mode .mobile-plus-btn.active {
        background: #f1f5f9;
        color: #0f172a;
    }

    body.dark-mode .mobile-sticky-header {
        background: #0f172a;
        border-bottom-color: #1e293b;
    }

    body.dark-mode .mobile-back-btn {
        color: #f1f5f9;
    }

    body.dark-mode .alert-detail-view {
        background: #0f172a;
    }

    body.dark-mode .search-plus-btn,
    body.dark-mode .search-icon-btn {
        color: #94a3b8;
    }

    body.dark-mode .search-plus-btn:active,
    body.dark-mode .search-icon-btn:active {
        background: rgba(255, 255, 255, 0.1);
    }
}