/* ═══════════════════════════════════════════════════════════════
   Mr. Jhole — phone refinements for the logged-in app.
   Every rule lives inside a max-width query, so desktop is untouched.
   Loaded after all page CSS via <x-nav-left>.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  html, body { overflow-x: clip; }
  .app, .main { max-width: 100vw; }

  /* Comfortable tap targets (≥ 40px) on the controls people actually press */
  .topbar button, .topbar a.back-btn, .back-btn, .bar-btn, .topbar-share-btn,
  .filter-pill, .type-filter-btn, .cat-pill, .view-btn, .tab-item,
  .btn-primary, .btn-msg, .btn-book, .open-modal, .le-btn { min-height: 40px; }
  .back-btn, .bar-btn, .topbar-share-btn, .view-btn { min-width: 40px; }

  /* Top bars: never push past the screen edge */
  .topbar { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .topbar-title, .bar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { gap: 8px !important; flex-shrink: 0; }
  .topbar input[type="search"], .topbar input[type="text"] { min-width: 0; }
  .btn-mark-all { white-space: nowrap; padding: 0 12px; min-height: 40px; }
  .btn-mark-all span { display: none; }              /* icon only; label returns on tablet+ */
  .mob-msg { flex: 0 0 auto; }

  /* Profile tabs: scroll sideways, spaced, never clipped */
  .tab-bar { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 4px; }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-item { flex: 0 0 auto !important; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px !important; white-space: nowrap; }

  /* Pasal detail: seller row keeps name readable, button stays on the row */
  .seller-profile-link { min-width: 0; flex: 1 1 auto; }
  .seller-card, .seller-section { gap: 10px; }
  .seller-card .btn-msg, .seller-section .btn-msg { flex: 0 0 auto; padding: 0 16px; }
  .seller-name, .seller-handle, .seller-info, .seller-meta { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .seller-profile-link > div { min-width: 0; }

  /* Guff: sidebar must equal the viewport (it was 10px too wide) */
  .guff-sidebar, .guff-sidebar .sidebar-header, .guff-sidebar .room-list-label, .guff-sidebar .room-search-wrap { width: 100%; max-width: 100%; box-sizing: border-box; }
  .guff-container { overflow-x: clip; }

  /* Vault: coin art shouldn't sit on top of the text */
  .vault-coin-art { opacity: .3; right: 12px !important; bottom: 56px !important; }

  /* Long words / prices never break layouts */
  h1, h2, h3, .card-title, .post-title { overflow-wrap: anywhere; }
}

@media (max-width: 380px) {
  .topbar-title, .bar-title { font-size: 1rem; }
  .cta-row .btn, .compose-action-btn { font-size: .85rem; }
}

/* Dark mode: Addresses tip card was left light */
[data-theme="dark"] .why-banner { background: #0A1B3A !important; border: 1px solid rgba(255,255,255,.10) !important; }
[data-theme="dark"] .why-banner-title, [data-theme="dark"] .why-banner h3, [data-theme="dark"] .why-banner h4 { color: #F5F7FC !important; }
[data-theme="dark"] .why-banner-body, [data-theme="dark"] .why-banner p, [data-theme="dark"] .why-banner span { color: #B4C1DC !important; }

@media (max-width: 640px) {
  /* Pad hit areas to 44px without changing the visual size of icon buttons */
  /* (pc-share, pc-save, fcard-*, tl-img-save are already absolutely positioned; the rest need an anchor) */
  .tl-act, .room-leave-btn, .grs-filter { position: relative; }
  .pc-share::after, .pc-save::after, .fcard-share::after, .fcard-heart::after, .tl-img-save::after, .tl-act::after, .room-leave-btn::after, .grs-filter::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  .pfm-pill, .pz-view-btn, .guff-m-intro-btn, .sidebar-view-all-btn { min-height: 40px; }
  .mobile-nav-item { min-height: 48px; }
  .tl-act { gap: 4px; padding: 6px 8px; }
}

/* Legibility: micro labels never below 11px on phones */
@media (max-width: 640px) {
  .pc-badge, .pasal-status-chip, .pc-cat, .offer-appt-badge, .dist-pill, .tl-badge, .pc-neg, .offer-views, .offer-status-chip,
  .tl-cond-tag, .locked-feat-hint, .locked-feat-soon, .rate-tag, .trend-label, .hc-eyebrow, .sh-tag, .notif-date-group,
  .le-tag, .coming-soon-badge, .radar-hero-badge, .room-list-label, .room-last-time, .room-last-msg, .offer-biz { font-size: 11px !important; }
}
@media (max-width: 640px) {
  .seller-card { display: flex; align-items: center; gap: 10px; }
  .seller-card .seller-profile-link { flex: 1 1 0; min-width: 0; }
  .seller-msg-btn { flex: 0 0 auto; white-space: nowrap; }
}