/**
 * MOBILE APP SHELL — shared design system for every purpose-built
 * mobile screen (dashboard home, browse, QR, and beyond). Deliberately
 * its own dark palette (premium near-black + brand yellow) rather than
 * the site's light --color-* tokens — the "native app" register,
 * distinct from the cinematic desktop site. Only active below 768px;
 * each page hides its own desktop content at this width instead.
 *
 * Page-specific pieces (browse's search bar and listing cards, the
 * dashboard's quick-action grid, etc.) stay in each page's own
 * <style> block — this file is only the shell pieces genuinely shared
 * across all of them.
 */
:root {
    --msh-bg: #0A0A0C;
    --msh-card: #17171C;
    --msh-card-2: #1E1E24;
    --msh-border: rgba(255,212,0,0.22);
    --msh-yellow: #FFD400;
    --msh-text: #FFFFFF;
    --msh-muted: #8B8B93;
    --msh-radius: 20px;
    --msh-radius-sm: 14px;
}
.mshell { display: none; }

@media (max-width: 767px) {
    body { background: var(--msh-bg); }
    .sh-header { display: none !important; }
    .mshell { display: block; background: var(--msh-bg); min-height: 100vh; padding: 0 0 96px; }

    .mshell-header {
        position: sticky; top: 0; z-index: 40; background: var(--msh-bg);
        display: flex; justify-content: space-between; align-items: flex-start;
        padding: 18px 20px 14px; border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .mshell-header.mshell-header-simple { align-items: center; }
    .mshell-back-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--msh-card); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }
    .mshell-back-btn svg { width: 18px; height: 18px; color: var(--msh-text); }
    .mshell-header-title { font-size: 1.05rem; font-weight: 800; color: var(--msh-text); }

    .mshell-greeting { font-size: 1.3rem; font-weight: 800; color: var(--msh-text); display: flex; align-items: center; gap: 6px; }
    .mshell-subgreeting { font-size: 0.82rem; color: var(--msh-muted); margin-top: 2px; }
    .mshell-bell { position: relative; width: 42px; height: 42px; border-radius: 50%; background: var(--msh-card); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .mshell-bell svg { width: 19px; height: 19px; color: var(--msh-text); }
    .mshell-bell .mshell-bell-dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--msh-yellow); border: 1.5px solid var(--msh-bg); }

    .mshell-section { padding: 20px 20px 4px; }
    .mshell-section-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--msh-muted); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
    .mshell-section-title .mshell-count { background: var(--msh-yellow); color: #0A0A0C; font-size: 0.68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }

    .mshell-attn-list { display: flex; flex-direction: column; gap: 10px; }
    .mshell-attn-card {
        display: flex; align-items: center; gap: 12px; background: var(--msh-card);
        border: 1px solid rgba(255,255,255,0.06); border-radius: var(--msh-radius-sm);
        padding: 14px; cursor: pointer; text-decoration: none;
    }
    .mshell-attn-card:active { background: var(--msh-card-2); }
    .mshell-attn-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .mshell-attn-icon svg { width: 20px; height: 20px; }
    .mshell-attn-icon.tone-red { background: rgba(225,29,46,0.16); color: #FF6B7A; }
    .mshell-attn-icon.tone-purple { background: rgba(168,85,247,0.16); color: #C084FC; }
    .mshell-attn-icon.tone-green { background: rgba(22,163,74,0.16); color: #4ADE80; }
    .mshell-attn-icon.tone-gold { background: rgba(255,212,0,0.16); color: var(--msh-yellow); }
    .mshell-attn-body { flex: 1; min-width: 0; }
    .mshell-attn-title { font-size: 0.86rem; font-weight: 700; color: var(--msh-text); line-height: 1.3; }
    .mshell-attn-time { font-size: 0.72rem; color: var(--msh-muted); margin-top: 3px; }
    .mshell-attn-empty { text-align: center; padding: 36px 20px; color: var(--msh-muted); font-size: 0.86rem; }
    .mshell-attn-empty .emoji { font-size: 1.8rem; display: block; margin-bottom: 8px; }

    .mshell-stats-row { display: flex; background: var(--msh-card); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--msh-radius-sm); overflow: hidden; }
    .mshell-stat { flex: 1; text-align: center; padding: 16px 8px; border-right: 1px solid rgba(255,255,255,0.06); }
    .mshell-stat:last-child { border-right: none; }
    .mshell-stat-value { font-size: 1.3rem; font-weight: 800; color: var(--msh-text); }
    .mshell-stat-label { font-size: 0.68rem; color: var(--msh-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.03em; }

    .mshell-bottomnav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: #101013; border-top: 1px solid rgba(255,255,255,0.08);
        display: flex; align-items: center; justify-content: space-around;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    }
    .mshell-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--msh-muted); text-decoration: none; font-size: 0.62rem; font-weight: 700; flex: 1; padding: 4px 0; background: none; border: none; }
    .mshell-nav-item svg { width: 21px; height: 21px; }
    .mshell-nav-item.active { color: var(--msh-yellow); }
    .mshell-nav-fab {
        width: 46px; height: 46px; border-radius: 50%; background: var(--msh-yellow); color: #0A0A0C;
        display: flex; align-items: center; justify-content: center; margin-top: -26px;
        border: 4px solid var(--msh-bg); box-shadow: 0 4px 14px rgba(255,212,0,0.35);
    }
    .mshell-nav-fab svg { width: 22px; height: 22px; }

    .mshell-skel { background: linear-gradient(90deg, var(--msh-card) 0%, var(--msh-card-2) 50%, var(--msh-card) 100%); background-size: 200% 100%; animation: mshell-shimmer 1.4s ease-in-out infinite; border-radius: var(--msh-radius-sm); }
    @keyframes mshell-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    .mshell-btn-primary {
        display: block; width: 100%; text-align: center; background: var(--msh-yellow); color: #0A0A0C;
        font-weight: 800; font-size: 0.92rem; padding: 15px; border-radius: 999px; border: none;
        text-decoration: none;
    }
    .mshell-btn-outline {
        display: block; width: 100%; text-align: center; background: transparent; color: var(--msh-text);
        font-weight: 700; font-size: 0.9rem; padding: 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.15);
        text-decoration: none;
    }

    /* Listing card grid — shared by browse, saved listings, and any
       future screen that shows a grid of listings, so this doesn't
       get redefined slightly differently each time. */
    .mshell-listings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 20px; }
    .mshell-listing-card { background: var(--msh-card); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--msh-radius-sm); overflow: hidden; text-decoration: none; display: block; position: relative; }
    .mshell-listing-card:active { background: var(--msh-card-2); }
    .mshell-listing-img-wrap { position: relative; aspect-ratio: 4/3; background: var(--msh-card-2); }
    .mshell-listing-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .mshell-listing-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--msh-muted); }
    .mshell-listing-placeholder svg { width: 30%; height: 30%; }
    .mshell-listing-live-badge { position: absolute; top: 8px; left: 8px; background: rgba(22,163,74,0.9); color: #fff; font-size: 0.62rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
    .mshell-listing-save { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(10,10,12,0.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; border: none; }
    .mshell-listing-save svg { width: 14px; height: 14px; color: #fff; }
    .mshell-listing-save.saved svg { color: var(--msh-yellow); }
    .mshell-listing-body { padding: 10px 12px 12px; }
    .mshell-listing-price { font-size: 0.98rem; font-weight: 800; color: var(--msh-text); }
    .mshell-listing-title { font-size: 0.76rem; color: var(--msh-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mshell-listing-loc { font-size: 0.7rem; color: var(--msh-muted); margin-top: 4px; display: flex; align-items: center; gap: 3px; }
    .mshell-listing-loc svg { width: 11px; height: 11px; flex-shrink: 0; }

    /* Small unread indicator dot, shared by Messages and Notifications */
    .msg-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--msh-yellow); flex-shrink: 0; }
    .mshell-attn-card.unread { border-color: rgba(255,212,0,0.3); }
}