/* ===========================================================================
   TradyBay Mobile / App-feel foundations
   ---------------------------------------------------------------------------
   Loaded on the guest, customer and trader layouts (admin excluded — desktop-
   focused tool). Everything is under @media (max-width: 991.98px) or narrower
   so desktop behaviour is unchanged.

   Design goals:
   - 14px paragraph, 1.55 line-height (readable, matches app conventions)
   - 44px minimum tap targets (Apple HIG)
   - No horizontal scroll anywhere
   - Safe-area insets for notched iPhones
   - Full-width single-column forms on mobile
   - Sticky top header + native-feeling bottom nav on panels
   - Consistent off-canvas menu (Bootstrap 5 offcanvas)
   =========================================================================== */

/* ---------- Safe-area + viewport basics (all screen sizes) ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; -webkit-tap-highlight-color: rgba(0,0,0,0); }
img, svg, video { max-width: 100%; height: auto; }

/* ---------- Everything below is mobile-only (<= 991.98px) ---------- */
@media (max-width: 991.98px) {

    /* Typography scale */
    body,
    body p,
    body li,
    body td,
    body th,
    body label,
    body span:not(.badge):not(.tprop-chip):not(.pv-chip):not(.cust-icon-dot):not(.tb-accent):not(.tb-eyebrow),
    body input,
    body textarea,
    body select {
        font-size: 14px;
        line-height: 1.55;
    }
    body h1 { font-size: 24px; line-height: 1.25; }
    body h2 { font-size: 20px; line-height: 1.28; }
    body h3 { font-size: 18px; line-height: 1.3; }
    body h4 { font-size: 16px; line-height: 1.35; }
    body h5, body h6 { font-size: 15px; }

    /* Container padding tighten so content edge-to-edge feels app-like */
    .container,
    .container-fluid {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Any grid row inside forms/cards: collapse to single column when it was
       col-sm-6 pairs on desktop. Rely on Bootstrap's own breakpoints for the
       heavier grids; this only rescues stray sm/md-2 columns that never wrap. */
    .row.g-mobile-stack > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

    /* ------- Tap-target minimums (Apple HIG: 44x44) ------- */
    .btn,
    button:not(.btn-close):not(.navbar-toggler),
    .nav-link,
    a.dropdown-item,
    .pagination .page-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .btn-sm { min-height: 38px; }
    .btn-lg { min-height: 50px; }

    /* Form inputs — 16px so iOS doesn't zoom on focus, comfortable padding */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="search"],
    select,
    textarea,
    .form-control {
        font-size: 16px !important;  /* prevents iOS auto-zoom on focus */
        min-height: 44px;
        padding: 10px 14px;
        border-radius: 10px;
    }
    textarea, .form-control[rows] { min-height: 88px; }

    /* Buttons: rounded, generous padding, full-width by default when placed
       as a bare .btn without any sizing/utility class */
    .btn {
        border-radius: 10px;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 600;
    }

    /* Cards + form containers get slightly less padding to fit a phone width */
    .card,
    .card-body {
        border-radius: 12px;
    }
    .card-body { padding: 14px; }

    /* Kill Bootstrap 4's default "col-sm-2 label + col-sm-10 input" side-by-side
       so labels sit above inputs (app convention). */
    .form-group.row > label { margin-bottom: 4px; padding-right: 0; }
    .form-group { margin-bottom: 14px; }

    /* Table -> stacked "card row" fallback. Add class .mobile-cards to any
       admin/list table wrapper (.table-responsive) that should become cards on
       phones instead of overflowing horizontally. Uses data-label attributes
       on each td for the visible label. */
    .mobile-cards table,
    .mobile-cards thead,
    .mobile-cards tbody,
    .mobile-cards tr,
    .mobile-cards td { display: block; width: 100%; }
    .mobile-cards thead { display: none; }
    .mobile-cards tr {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 12px 14px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    .mobile-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px dashed #f0f2f7;
    }
    .mobile-cards td:last-child { border-bottom: 0; }
    .mobile-cards td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #6b7280;
        font-size: 12.5px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        margin-right: 10px;
    }

    /* ------- Sticky top header helper ------- */
    .app-topbar {
        position: sticky;
        top: 0;
        z-index: 1030;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 52px;
    }
    .app-topbar h1,
    .app-topbar .app-topbar-title {
        font-size: 17px !important;
        font-weight: 800;
        margin: 0;
        flex: 1;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .app-topbar .app-topbar-btn {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #f3f4f6;
        color: #0b1220;
        border-radius: 50%;
        border: 0;
        font-size: 18px;
        text-decoration: none;
    }

    /* Existing project cards: kill unnecessary paddings, tighten spacings */
    .dashboard { padding-top: 6px; }
    .MarginTop { margin-top: 0 !important; }
    .rightsection,
    .dashboardrightsec { padding: 0 !important; }
    .mobile-dashboard { padding: 0 !important; }

    /* Modals: fill the phone, no cramped edges */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100%;
    }
    .modal-dialog-centered { min-height: calc(100vh - 40px); align-items: flex-end; }
    .modal-content { border-radius: 16px 16px 0 0; }
    .modal-header { padding: 14px 16px; border-radius: 16px 16px 0 0; }
    .modal-body { padding: 16px; }
    .modal-footer { padding: 12px 16px; }
    .modal-footer .btn { flex: 1; }

    /* Bottom nav (customer/trader panels) - fixed 5-tab bar */
    .app-bottomnav {
        position: fixed;
        left: 0; right: 0;
        bottom: 0;
        z-index: 1040;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
    }
    .app-bottomnav-item {
        flex: 1;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        color: #6b7280;
        font-size: 11px;
        font-weight: 600;
        text-decoration: none;
        border-radius: 8px;
        position: relative;
    }
    .app-bottomnav-item i { font-size: 20px; line-height: 1; }
    .app-bottomnav-item.active,
    .app-bottomnav-item:hover { color: var(--tb-primary, #1E40AF); }
    .app-bottomnav-item .app-bottomnav-dot {
        position: absolute;
        top: 6px;
        right: calc(50% - 14px);
        width: 8px; height: 8px;
        border-radius: 50%;
        background: var(--tb-accent, #f97316);
    }
    body.has-bottomnav { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

    /* No-op — offcanvas rules moved outside the @media block below */

    /* Simple app-header hamburger button (used in mobile bars) */
    .app-hamburger {
        width: 40px; height: 40px;
        display: inline-flex; align-items: center; justify-content: center;
        background: transparent; color: inherit; border: 0;
        font-size: 22px; border-radius: 8px;
    }

    /* Big lists (my-projects, jobs, transactions) — tighten */
    .card + .card { margin-top: 12px; }

    /* Pagination */
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
    }
    .pagination .page-item .page-link {
        min-width: 40px;
        min-height: 40px;
        padding: 8px 12px;
        border-radius: 8px;
        margin: 0;
    }

    /* Small-margin utility used across account pages */
    .acct-page .container { padding-left: 12px; padding-right: 12px; }

    /* Footer squeeze */
    footer.main-footer { padding: 32px 0 20px !important; }

    /* Kill unnecessary preloader glitch on slow phones */
    #preloader { display: none; }
    body.loading { opacity: 1 !important; }
}

/* ---------- Mobile burger toggle (guest navbar) ---------- */
/* Compact icon-only button; replaces old "MENU" text label. */
.navbar-toggle.tb-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--tb-primary, #1E40AF);
    color: #fff;
    border-radius: 10px;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}
.navbar-toggle.tb-burger:hover,
.navbar-toggle.tb-burger:focus {
    background: #163a9c;
    color: #fff;
    text-decoration: none;
    outline: none;
}
.navbar-toggle.tb-burger i { font-size: 20px; line-height: 1; }

/* ---------- Off-canvas menu (custom, BS4 doesn't ship offcanvas) ---------- */
/* Available at all viewport sizes but only meaningfully triggered on mobile.
   Panel slides in from left; backdrop dims the page; ESC + backdrop click close. */
.offcanvas.app-offcanvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: 82% !important;
    max-width: 320px !important;
    background: #fff !important;
    z-index: 1055 !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s ease, visibility 0s linear 0.28s !important;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    visibility: hidden !important;
    pointer-events: none;
}
.offcanvas.app-offcanvas.is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    transition: transform 0.28s ease, visibility 0s linear 0s !important;
    pointer-events: auto;
}
.app-offcanvas-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.5) !important;
    z-index: 1054 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s !important;
    pointer-events: none !important;
}
.app-offcanvas-backdrop.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.2s ease, visibility 0s linear 0s !important;
    pointer-events: auto !important;
}
body.app-offcanvas-open { overflow: hidden; }
.offcanvas.app-offcanvas .offcanvas-header {
    padding: 16px;
    background: var(--tb-primary, #1E40AF);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
}
.offcanvas.app-offcanvas .offcanvas-header h5 {
    color: #fff;
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}
.offcanvas.app-offcanvas .app-offcanvas-close {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.offcanvas.app-offcanvas .offcanvas-body { padding: 6px 0; flex: 1; }
.offcanvas.app-offcanvas .offcanvas-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}
.offcanvas.app-offcanvas .offcanvas-nav li a,
.offcanvas.app-offcanvas .offcanvas-nav li form button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    color: #0b1220 !important;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    min-height: 48px;
    cursor: pointer;
}
.offcanvas.app-offcanvas .offcanvas-nav li a i,
.offcanvas.app-offcanvas .offcanvas-nav li form button i {
    width: 22px; text-align: center; color: var(--tb-primary, #1E40AF); font-size: 16px;
}
.offcanvas.app-offcanvas .offcanvas-nav li a:hover,
.offcanvas.app-offcanvas .offcanvas-nav li a.active,
.offcanvas.app-offcanvas .offcanvas-nav li form button:hover {
    background: #f3f6ff;
    color: var(--tb-primary, #1E40AF) !important;
}
.offcanvas.app-offcanvas .offcanvas-nav .offcanvas-nav-section {
    padding: 14px 18px 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #94a3b8;
    list-style: none;
}
.offcanvas.app-offcanvas .offcanvas-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}
.offcanvas.app-offcanvas .offcanvas-user .offcanvas-user-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--tb-primary, #1E40AF);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    overflow: hidden;
    flex-shrink: 0;
}
.offcanvas.app-offcanvas .offcanvas-user .offcanvas-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.offcanvas.app-offcanvas .offcanvas-user-name { font-weight: 800; color: #0b1220; font-size: 15px; }
.offcanvas.app-offcanvas .offcanvas-user-role { font-size: 12px; color: #6b7280; margin-top: 2px; }
/* On big screens the offcanvas simply doesn't show — desktop keeps its normal
   navbar. Trigger buttons are hidden by their own d-lg-none. */

/* ---------- Small phones (<= 575px) — extra polish ---------- */
@media (max-width: 575.98px) {
    body h1 { font-size: 22px; }
    body h2 { font-size: 18px; }
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
    .card-body { padding: 12px; }
    /* dashCards on admin lists become a scrollable strip */
    .dashCard { min-width: 220px; }
}

/* ---------- Landscape orientation on phones ---------- */
@media (max-width: 991.98px) and (orientation: landscape) {
    .app-bottomnav { padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)); }
    .app-bottomnav-item { font-size: 10px; }
    .app-bottomnav-item i { font-size: 18px; }
}

/* ============================================================================
   Phase 3 — Per-page mobile polish
   ============================================================================
   Each block targets an existing class namespace and only kicks in on mobile.
   HTML is untouched; existing name/id/class/data hooks are preserved as
   required by the redesign-no-functional-break memory rule.
   ============================================================================ */

@media (max-width: 991.98px) {

    /* -------- Customer + trader dashboards -------- */
    /* Welcome hero: tight vertical rhythm, sensible sizes */
    .dash-welcome { padding: 4px 2px 8px; }
    .dash-welcome h1 { font-size: 22px !important; margin-bottom: 4px; }
    .dash-welcome p { font-size: 13.5px; margin: 0; }
    /* Stat grid 2x2 on phone instead of horizontal 4-across */
    .dash-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px !important;
    }
    .dash-stat {
        padding: 12px 10px !important;
        min-height: 70px;
    }
    .dash-stat-value { font-size: 22px !important; }
    .dash-stat-label { font-size: 11px !important; }
    /* Right-rail promo card sits nicely between grid + main content on mobile */
    .dash-promo-mobile { margin-bottom: 12px; }
    .dash-promo { padding: 16px !important; }
    .dash-promo-copy h3 { font-size: 16px; margin-bottom: 4px; }
    .dash-promo-copy p { font-size: 13px; margin-bottom: 10px; }
    .dash-promo-btn { padding: 9px 16px !important; font-size: 13.5px !important; }
    /* Section headers */
    .dash-section-head { margin-bottom: 10px !important; }
    .dash-section-head h2 { font-size: 17px !important; margin: 0; }
    .dash-section-head .dash-section-link { font-size: 12.5px; }
    .dash-section { margin-bottom: 18px; }
    /* Right rail collapses under the main column on tablet+phone */
    .dash-grid {
        display: block !important;
    }
    .dash-rail { margin-top: 12px; }
    .dash-rail-card { padding: 14px !important; }
    /* Project cards inside dashboard */
    .proj-card { padding: 14px !important; margin-bottom: 10px; }
    .proj-card-title { font-size: 15px !important; }
    .proj-card-sub { font-size: 12px !important; margin-top: 4px; }
    .proj-card-actions { flex-wrap: wrap; gap: 6px !important; }
    .proj-card-actions .btn { flex: 1; min-width: 130px; }
    /* Guide banner (video links) */
    .dash-guide-banner { padding: 10px 12px !important; }
    .dash-guide-banner i { font-size: 18px; }
    .dash-guide-links .guide-video-button { font-size: 13px !important; padding: 4px 8px; }

    /* -------- Chat / Inbox — real mobile chat app experience --------
       The desktop shows list + chat side by side. On mobile we split them:
       - Inbox list page (has .inbox-v2-chat--empty)  -> show only the list.
       - Chat show page (has real .inbox-v2-chat)     -> hide the list, chat
         takes the whole viewport with a sticky header, scrollable messages,
         and a fixed composer that sits just above the bottom nav.
       Detection is done purely with :has() on the shell (falls back to the
       explicit sibling rules for browsers without :has). */
    .inbox-v2-container { padding: 0 !important; }
    .inbox-v2 { border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; background: #f5f7fb; }
    .inbox-v2-shell {
        display: block !important;
        min-height: calc(100vh - 60px);
        grid-template-columns: none !important;
    }

    /* --- Inbox LIST page (empty chat pane means no conversation opened) --- */
    .inbox-v2-shell:has(.inbox-v2-chat--empty) .inbox-v2-list {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        max-width: 100% !important;
        border-right: 0 !important;
        background: #fff;
    }
    .inbox-v2-shell:has(.inbox-v2-chat--empty) .inbox-v2-chat--empty { display: none !important; }
    .inbox-v2-list-head { padding: 14px 16px; }
    .inbox-v2-list-title { font-size: 18px; font-weight: 800; }
    .inbox-v2-search { padding: 0 12px 10px; }
    .inbox-v2-search input { min-height: 44px; font-size: 16px; border-radius: 12px; }
    .inbox-v2-conv-list { max-height: none; padding: 0 8px 20px; }
    .inbox-v2-conv {
        padding: 12px 12px !important;
        border-radius: 12px;
        margin: 2px 0;
    }
    .inbox-v2-conv:hover, .inbox-v2-conv.is-active { background: #eff4ff !important; }
    .inbox-v2-conv-avatar { width: 44px !important; height: 44px !important; font-size: 15px; }
    .inbox-v2-conv-name { font-size: 15px; font-weight: 700; }
    .inbox-v2-conv-time { font-size: 12px; color: #94a3b8; }
    .inbox-v2-conv-snippet { font-size: 13px; color: #64748b; }

    /* --- Chat SHOW page (real .inbox-v2-chat, without --empty) --- */
    /* Hide the conversation list — we go full-screen chat, phone-style. */
    .inbox-v2-shell:has(.inbox-v2-chat:not(.inbox-v2-chat--empty)) .inbox-v2-list {
        display: none !important;
    }
    .inbox-v2-chat:not(.inbox-v2-chat--empty) {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1030;
        background: #f5f7fb;
        height: 100vh;
        height: 100dvh;
    }
    /* Sticky chat header — back arrow, avatar, name, actions */
    .inbox-v2-chat-head {
        position: sticky !important;
        top: 0;
        z-index: 5;
        display: flex !important;
        align-items: center;
        gap: 10px !important;
        padding: 10px 12px !important;
        padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
        background: var(--tb-primary, #1E40AF) !important;
        color: #fff !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
        flex-shrink: 0;
    }
    .inbox-v2-chat-back {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255,255,255,0.15);
        color: #fff !important;
        font-size: 18px;
        flex-shrink: 0;
    }
    .inbox-v2-chat-back:hover { background: rgba(255,255,255,0.25); color: #fff; }
    .inbox-v2-chat-avatar {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
        background: rgba(255,255,255,0.18) !important;
        color: #fff !important;
        flex-shrink: 0;
    }
    .inbox-v2-chat-avatar-initials { color: #fff !important; }
    .inbox-v2-chat-meta { flex: 1; min-width: 0; }
    .inbox-v2-chat-name {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #fff !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .inbox-v2-chat-sub {
        font-size: 12px !important;
        color: rgba(255,255,255,0.85) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .inbox-v2-chat-sub i, .inbox-v2-chat-sub .fa-star { color: #fbbf24 !important; }
    .inbox-v2-chat-actions { display: flex; gap: 4px; flex-shrink: 0; }
    .inbox-v2-chat-actions .inbox-v2-icon-btn {
        width: 40px; height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255,255,255,0.15);
        color: #fff !important;
        font-size: 15px;
        border: 0;
    }
    /* Hide the email/call action buttons on mobile to save space — profile still shown */
    .inbox-v2-chat-actions .inbox-v2-icon-btn[title="Email"],
    .inbox-v2-chat-actions .inbox-v2-icon-btn[title="Call"] { display: none; }

    /* Job bar — thin strip below header */
    .inbox-v2-jobbar {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 8px 12px !important;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        flex-shrink: 0;
        font-size: 12px;
    }
    .inbox-v2-jobbar-info { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: center; }
    .inbox-v2-jobbar-label {
        background: #eff4ff;
        color: #1E40AF;
        font-size: 10px;
        font-weight: 800;
        padding: 3px 6px;
        border-radius: 4px;
        flex-shrink: 0;
    }
    .inbox-v2-jobbar-title { font-size: 13px !important; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .inbox-v2-jobbar-sub { font-size: 11px !important; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .inbox-v2-jobbar-btn {
        font-size: 11px !important;
        padding: 6px 10px !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Scrollable messages area — flex-1 fills space between header and composer */
    .inbox-v2-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 12px !important;
        background: #f5f7fb;
        min-height: 0;
    }
    .inbox-v2-daysep { text-align: center; margin: 10px 0; }
    .inbox-v2-daysep span {
        display: inline-block;
        background: rgba(15,23,42,0.06);
        color: #64748b;
        font-size: 11px;
        padding: 4px 10px;
        border-radius: 10px;
    }
    /* Chat message bubbles — WhatsApp-style */
    .chat-msg { margin-bottom: 8px !important; }
    .chat-msg-bubble {
        max-width: 78% !important;
        padding: 8px 12px !important;
        border-radius: 14px !important;
        font-size: 14px;
        line-height: 1.4;
        word-wrap: break-word;
    }
    .chat-msg--in .chat-msg-bubble {
        background: #fff !important;
        color: #0b1220 !important;
        border-top-left-radius: 4px !important;
        box-shadow: 0 1px 2px rgba(15,23,42,0.06);
    }
    .chat-msg--out .chat-msg-bubble {
        background: var(--tb-primary, #1E40AF) !important;
        color: #fff !important;
        border-top-right-radius: 4px !important;
    }
    .chat-msg-time { font-size: 10.5px !important; color: #94a3b8 !important; }
    .chat-msg-avatar { width: 30px !important; height: 30px !important; font-size: 11px; flex-shrink: 0; }

    /* Composer — fixed at bottom, above the bottom nav */
    .inbox-v2-composer-wrap {
        position: sticky !important;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        padding: 8px 10px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 5;
        flex-shrink: 0;
    }
    .inbox-v2-composer {
        display: flex !important;
        align-items: center;
        gap: 8px;
    }
    .inbox-v2-attach {
        width: 40px; height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #f5f7fb;
        color: #64748b;
        border-radius: 50%;
        font-size: 17px;
        cursor: pointer;
        flex-shrink: 0;
    }
    .inbox-v2-input {
        flex: 1 !important;
        min-height: 42px;
        font-size: 16px !important;
        border-radius: 21px !important;
        padding: 8px 16px !important;
        background: #f5f7fb;
        border: 1px solid #e5e7eb !important;
    }
    .inbox-v2-input:focus { outline: none; border-color: var(--tb-primary, #1E40AF) !important; background: #fff; }
    .inbox-v2-send {
        width: 42px; height: 42px;
        border-radius: 50%;
        background: var(--tb-primary, #1E40AF);
        color: #fff;
        border: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        flex-shrink: 0;
    }
    .inbox-v2-attach-preview {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        margin-bottom: 6px;
        background: #eff4ff;
        border-radius: 8px;
        font-size: 12px;
    }

    /* When chat is full-screen, hide the app top navbar + bottom nav so the
       chat truly owns the viewport (like WhatsApp). Both customer and trader
       use .cust-mobile-header for their mobile header wrapper. */
    body:has(.inbox-v2-chat:not(.inbox-v2-chat--empty)) .cust-mobile-header,
    body:has(.inbox-v2-chat:not(.inbox-v2-chat--empty)) .mobile-header,
    body:has(.inbox-v2-chat:not(.inbox-v2-chat--empty)) .app-bottomnav { display: none !important; }
    body:has(.inbox-v2-chat:not(.inbox-v2-chat--empty)) { padding-bottom: 0 !important; }

    /* -------- Wizard (post-a-job, register, new-property) -------- */
    .wiz-panel { padding: 12px 4px 20px; }
    .wiz-title { font-size: 22px !important; margin-bottom: 4px !important; }
    .wiz-sub { font-size: 13.5px !important; margin-bottom: 14px !important; }
    .wiz-card { padding: 14px !important; border-radius: 12px !important; margin-bottom: 12px; }
    /* Two-column grid becomes single */
    .wiz-grid2 {
        display: block !important;
    }
    .wiz-grid2 > * { margin-bottom: 12px; }
    /* Single/multi trade toggle */
    .wiz-toggle {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .wiz-toggle-btn { padding: 12px 8px !important; font-size: 13px !important; text-align: center; }
    /* Stepper — horizontal scroll instead of cramping */
    .wiz-steps,
    .wiz-topbar-stepper {
        overflow-x: auto;
        scrollbar-width: none;
        white-space: nowrap;
        padding-bottom: 4px;
    }
    .wiz-steps::-webkit-scrollbar,
    .wiz-topbar-stepper::-webkit-scrollbar { display: none; }
    .wiz-step { flex: 0 0 auto; }
    /* Sticky Continue button at bottom for one-thumb use */
    .wiz-actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
        margin: 12px -14px 0;
        border-top: 1px solid #e5e7eb;
        display: flex !important;
        gap: 8px;
        z-index: 10;
    }
    .wiz-actions .wiz-btn { flex: 1; min-height: 46px; font-size: 14.5px; }

    /* -------- Trader browse-jobs (Leaflet map + filters) -------- */
    /* Sidebar filter column becomes a drawer via existing .jo-backdrop; on
       mobile just make sure it doesn't force the layout wider. */
    .jo-filter-col { padding: 0 !important; }
    .jo-list-col { padding: 0 !important; }
    .jo-page-head { flex-direction: column; align-items: flex-start !important; gap: 8px; }
    .jo-page-title { font-size: 20px !important; margin-bottom: 2px !important; }
    .jo-page-sub { font-size: 13px !important; }
    .jo-page-count { align-self: flex-start; }
    /* Map on trader jobs: cap height so list stays visible */
    #joMap, .jo-map { max-height: 220px !important; min-height: 200px !important; }
    /* Job cards */
    .jo-job-card,
    .jo-card { padding: 12px !important; margin-bottom: 10px !important; }
    .jo-job-card h3 { font-size: 15px !important; margin-bottom: 4px; }
    .jo-address { font-size: 12px !important; }
    .jo-apply-btn { min-height: 44px; }

    /* -------- Trader profile (public) -------- */
    .tprof-hero { padding: 20px 16px !important; }
    .tprof-hero-main { flex-direction: column; gap: 14px !important; }
    .tprof-hero-side { align-items: flex-start !important; min-width: 0 !important; }
    .tprof-rate { font-size: 22px !important; }
    .tprof-rate span { font-size: 12.5px !important; }
    .tprof-hero-actions { width: 100%; }
    .tprof-hero-actions .tprof-btn { flex: 1; }
    .tprof-grid { display: block !important; }
    .tprof-side { margin-top: 12px; }
    .tprof-card { padding: 14px !important; margin-bottom: 12px !important; }

    /* -------- Financial dashboard -------- */
    .fin-hero {
        padding: 18px 16px !important;
        flex-direction: column !important;
        gap: 12px;
    }
    .fin-hero-title { font-size: 17px !important; margin-bottom: 4px; }
    .fin-hero-amount { font-size: 34px !important; }
    .fin-hero-sub { font-size: 13px !important; }
    .fin-hero-actions { flex-wrap: wrap; gap: 8px !important; }
    .fin-hero-actions .fin-hero-btn { flex: 1; min-width: 140px; padding: 10px 14px; }
    .fin-hero-visual { display: none; } /* orbs pattern eats space on tiny screens */
    /* Metric grid */
    .fin-metrics {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px !important;
        margin-top: 12px;
    }
    .fin-metric { padding: 12px !important; }
    .fin-metric-value { font-size: 22px !important; }
    .fin-metric-label { font-size: 12.5px !important; }
    .fin-metric-sub { display: none; } /* keep tiles compact on phone */
    .fin-metrics + .fin-metrics-note,
    .fin-metrics + p { font-size: 12px !important; }

    /* -------- Job details -------- */
    .jobd-head { padding: 12px 2px 8px; }
    .jobd-title { font-size: 20px !important; margin-bottom: 4px !important; }
    .jobd-sub { font-size: 12.5px !important; }
    .jobd-crumb { font-size: 12px !important; margin-bottom: 8px; }
    .jobd-status.proj-badge { font-size: 11px !important; padding: 4px 10px !important; }
    /* Pill tabs scroll horizontally */
    .jobd-tabs {
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        margin-bottom: 12px;
    }
    .jobd-tabs::-webkit-scrollbar { display: none; }
    .jobd-tabs .nav-item { flex: 0 0 auto; }
    .jobd-tabs .nav-link { padding: 8px 16px !important; font-size: 13.5px !important; }
    /* Rail card collapses under main content */
    .jobd-rail-card { padding: 14px !important; margin-top: 12px; }
    .jobd-btn--block { width: 100%; }
    /* Judgement panel on rail */
    .judgement-panel { padding: 14px !important; }
    .judgement-panel-verdict { font-size: 15px !important; }
    /* Dispute banner: stack icon + text + button */
    .dispute-alert { flex-wrap: wrap; padding: 12px 14px !important; }
    .dispute-alert-body { flex: 1 1 100%; }
    .dispute-alert-btn { width: 100%; margin-top: 8px; justify-content: center; }

    /* -------- Property view (customer) -------- */
    .pv-header { padding: 16px 14px !important; }
    .pv-header-info h1.pv-name { font-size: 20px !important; margin-bottom: 4px; }
    .pv-location { font-size: 13px !important; }
    .pv-chips { gap: 6px !important; }
    .pv-chip { font-size: 12px !important; padding: 4px 10px !important; }
    .pv-header-actions { flex-wrap: wrap; gap: 6px !important; margin-top: 10px; width: 100%; }
    .pv-header-actions .pv-btn { flex: 1; min-height: 42px; }
    .pv-grid-2col { display: block !important; }
    .pv-main .pv-card,
    .pv-side .pv-card { padding: 14px !important; margin-bottom: 12px; }
    .pv-section-head { font-size: 11px !important; }

    /* -------- Trader account / settings pages -------- */
    .acct-head { padding: 12px 4px 4px; }
    .acct-head h1 { font-size: 20px !important; margin-bottom: 4px; }
    .acct-head-sub { font-size: 13px !important; margin-bottom: 12px; }
    .tacc-page .container { padding-left: 12px; padding-right: 12px; }
    /* Trader account 2-col field grid → single */
    .tacc-grid { display: block !important; }
    .tacc-row { padding: 10px 12px !important; }
    .tacc-label { font-size: 12.5px !important; }
    .tacc-value { font-size: 14px !important; }
    .tacc-input .form-control { min-height: 44px; }

    /* -------- Customer account edit page -------- */
    .myacct-identity { padding: 16px !important; }
    .myacct-identity-name { font-size: 17px !important; }
    .myacct-identity-meta { font-size: 12.5px !important; }

    /* -------- Financial transactions (customer) list rows -------- */
    .txn-page { padding: 6px 0 0; }
    .txn-head { flex-wrap: wrap; gap: 8px !important; margin-bottom: 10px !important; }
    .txn-title { font-size: 20px !important; margin-bottom: 2px; }
    .txn-count { font-size: 12.5px !important; }
    .txn-totals { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .txn-total { padding: 10px 12px !important; }
    .txn-total-label { font-size: 11.5px !important; }
    .txn-total-value { font-size: 17px !important; }
    .txn-filters { flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .txn-filter { flex: 1 1 45%; }
    .txn-filter-actions { flex: 1 1 100%; display: flex; gap: 6px; }
    .txn-filter-actions .txn-btn { flex: 1; }
    .txn-row { padding: 10px 12px !important; }
    .txn-row-type { font-size: 12.5px !important; }
    .txn-row-desc { font-size: 13px !important; }
    .txn-row-amount { font-size: 15px !important; }
    .txn-row-date { font-size: 11.5px !important; }

    /* -------- Send-proposal (trader) -------- */
    .tprop-page { padding-top: 8px; }
    .tprop-head { flex-direction: column; align-items: stretch !important; gap: 10px; }
    .tprop-head-title { font-size: 18px !important; margin-bottom: 4px; }
    .tprop-head-meta { flex-wrap: wrap; gap: 6px; }
    .tprop-head-code, .tprop-chip { font-size: 12px !important; padding: 3px 8px !important; }
    .tprop-credits { align-self: flex-start; padding: 8px 12px !important; font-size: 13px; }
    .tprop-warning { padding: 12px !important; }
    /* Payment-type toggle stack */
    .tprop-toggle { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px !important; }
    .tprop-toggle-opt { padding: 12px 10px !important; font-size: 13px !important; }
    .tprop-toggle-text strong { font-size: 13px !important; }
    .tprop-toggle-text small { display: none; } /* hide sub-text to keep both tiles readable */
    /* Amount input row */
    .tprop-amount input,
    .tprop-amount select { min-height: 44px; font-size: 16px; }
    /* Sticky submit at bottom */
    .tprop-actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
        margin: 12px -14px 0;
        border-top: 1px solid #e5e7eb;
        display: flex !important;
        gap: 8px;
        z-index: 10;
    }
    .tprop-actions .btn { flex: 1; min-height: 46px; }

    /* -------- Notifications page -------- */
    .notif-page-wrap { padding: 0 !important; }
    .notif-item { padding: 12px 14px !important; }
    .notif-item-body { font-size: 13.5px !important; }
    .notif-item-time { font-size: 11.5px !important; }

    /* -------- Marketing homepage -------- */
    /* Hero */
    .tb-hero { padding: 28px 0 0 !important; overflow: hidden; }
    /* Row inside hero: stack image below text with image flush to bottom */
    .tb-hero > .container > .row { align-items: flex-end !important; }
    .tb-hero .container { padding-left: 18px; padding-right: 18px; }
    .tb-hero .tb-eyebrow {
        font-size: 12px !important;
        letter-spacing: 0.08em;
        margin-bottom: 12px;
    }
    /* Heading: bump for real hero impact on mobile */
    .tb-hero-headline,
    .tb-hero h1 {
        font-size: 40px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.02em !important;
        margin: 0 0 14px !important;
        font-weight: 800 !important;
    }
    /* Force every child of the headline (accent span, br) to inherit size so
       the global "body span { font-size: 14px }" rule can never shrink parts
       of the heading again. */
    .tb-hero-headline > *,
    .tb-hero h1 > *,
    .tb-hero-headline .tb-accent,
    .tb-hero h1 .tb-accent {
        font-size: inherit !important;
        line-height: inherit !important;
        letter-spacing: inherit !important;
        font-weight: inherit !important;
    }
    .tb-hero-headline br { display: block; }
    .tb-hero-sub,
    .tb-hero p {
        font-size: 15px !important;
        line-height: 1.55 !important;
        margin-bottom: 20px !important;
    }
    /* Search input: bigger tap targets, comfortable spacing */
    .tb-hero-search { margin-bottom: 14px !important; }
    .tb-hero-search .tb-search-field { padding: 6px 14px !important; }
    .tb-hero-search input { font-size: 15px !important; min-height: 44px; }
    .tb-hero-search button {
        min-height: 48px;
        font-size: 15px !important;
        padding: 12px 18px !important;
    }
    /* Trust chips: readable + tighter row spacing */
    .tb-hero-chips {
        gap: 6px 14px !important;
        font-size: 12.5px !important;
        margin-top: 4px !important;
    }
    /* Hero visual: shrink image, tuck floating badges so they don't overflow.
       Image aligns flush to the bottom of the hero — no whitespace before the
       stats strip. */
    .tb-hero-visual {
        margin-top: 28px !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center;
        align-items: flex-end !important;
    }
    .tb-hero-visual .tb-hero-image {
        max-width: 260px !important;
        margin: 0 auto !important;
        display: block;
    }
    .tb-hero-visual .tb-hero-image > img {
        display: block;
        margin-bottom: 0;
        vertical-align: bottom;
    }
    .tb-hero-visual .tb-hero-badge { padding: 8px 12px !important; }
    .tb-hero-visual .tb-hero-badge i {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }
    .tb-hero-visual .tb-hero-badge strong { font-size: 12.5px !important; }
    .tb-hero-visual .tb-hero-badge span { font-size: 10.5px !important; }
    .tb-hero-visual .tb-hero-badge-tl { top: 0 !important; left: 4px !important; }
    .tb-hero-visual .tb-hero-badge-br { bottom: 8% !important; right: 4px !important; }
    /* Legacy hooks (kept for any old markup) */
    .tb-hero-actions { flex-wrap: wrap; gap: 8px !important; }
    .tb-hero-actions .btn { flex: 1; min-width: 140px; }
    /* Stats strip 2x2 (compact) */
    .tb-stats { padding: 28px 0 !important; }
    .tb-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px 12px !important;
    }
    .tb-stat { padding: 6px 4px; }
    .tb-stat .tb-stat-num {
        font-size: 22px !important;
        margin-bottom: 2px !important;
    }
    .tb-stat .tb-stat-label {
        font-size: 10.5px !important;
        letter-spacing: 0.05em !important;
        line-height: 1.3 !important;
    }
    /* Steps stack single-col with orange numbers */
    .tb-steps { grid-template-columns: 1fr !important; gap: 12px !important; }
    .tb-step { padding: 16px !important; }
    /* Services — horizontal swipeable carousel on mobile.
       Grid → flex row with scroll-snap. ~1.6 cards visible so users know
       to swipe. Native scrollbar hidden for a clean look. */
    .tb-services-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 12px !important;
        padding: 4px 16px 16px !important;
        margin: 0 -16px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tb-services-grid::-webkit-scrollbar { display: none; }
    .tb-service-card {
        flex: 0 0 62% !important;
        max-width: 220px !important;
        scroll-snap-align: start;
        padding: 0 !important;
        text-align: left;
    }
    .tb-service-card .tb-service-body { padding: 12px 14px 14px !important; }
    .tb-service-card h4 { font-size: 14px !important; margin: 0 0 4px !important; }
    .tb-service-card p { font-size: 12px !important; }
    /* Trade chip cloud — compact pills wrapping tightly, left-aligned on mobile */
    .tb-chip-cloud {
        gap: 6px !important;
        justify-content: flex-start !important;
        padding: 0 4px;
    }
    .tb-chip {
        font-size: 11.5px !important;
        padding: 5px 11px !important;
        border-radius: 999px !important;
        line-height: 1.4 !important;
    }
    /* Bento cards single-col */
    .tb-bento { grid-template-columns: 1fr !important; gap: 12px !important; }
    .tb-bento-card { padding: 20px 16px !important; }
    .tb-bento-card.tb-bento-lg { grid-row: auto !important; }
    /* Testimonials marquee slower on mobile so cards are readable */
    .tb-marquee-track { animation-duration: 50s !important; }
    /* Final CTA */
    .tb-final { padding: 40px 0 !important; }
    .tb-final-copy { padding: 24px 16px !important; }
    .tb-final-form { padding: 24px 16px !important; }

    /* -------- Auth pages (login, register) -------- */
    .tb-auth {
        min-height: auto !important;
        padding: 24px 0;
    }
    .tb-auth-card {
        border-radius: 14px !important;
        margin: 0 !important;
    }
    .tb-auth-form-side,
    .tb-auth-brand-side { padding: 22px 20px !important; }
    /* Blue right panel hides on very small screens - keep card compact */
    .tb-auth-brand-side { display: none; }
    .tb-auth-title,
    .tb-auth-form-side h1 { font-size: 22px !important; }
    .tb-auth-sub { font-size: 13px !important; margin-bottom: 16px; }
    .tb-auth-form-side .form-control { min-height: 46px; font-size: 16px; }
    .tb-auth-form-side .btn { min-height: 48px; font-size: 14.5px; }

    /* -------- Footer -------- */
    footer.main-footer .footer-newsletter {
        padding: 20px !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    footer.main-footer .footer-links {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }
    footer.main-footer .footer-brand { text-align: left; }
    footer.main-footer .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* Tiny phones — one more pass */
@media (max-width: 380px) {
    .dash-stats { grid-template-columns: 1fr !important; }
    .fin-metrics { grid-template-columns: 1fr !important; }
    /* Stats stays 2×2 and services stays a swipe carousel even on tiny phones —
       the previous 1-col overrides are gone by design. */
    .tb-stat .tb-stat-num { font-size: 20px !important; }
    .tb-stat .tb-stat-label { font-size: 10px !important; }
    .tb-service-card { flex: 0 0 70% !important; }
    body h1 { font-size: 20px; }
    .tb-hero-headline,
    .tb-hero h1 { font-size: 34px !important; line-height: 1.1 !important; }
    .tb-hero-headline > *,
    .tb-hero h1 > * { font-size: inherit !important; line-height: inherit !important; }
    .tb-hero-sub,
    .tb-hero p { font-size: 14.5px !important; }
    .tb-hero-visual .tb-hero-image { max-width: 220px !important; }
}