/* mobile_polish.css — small, phone-only presentation overrides.
   =========================================================================
   Loaded AFTER styles.css (login) and user_homepage.css (home) so these
   same-specificity rules win by source order. Every rule lives inside a
   phone/tablet media query (or relies on env(safe-area-inset-*), which is 0
   on desktop), so the desktop experience is byte-for-byte unchanged.

   Kept as its own module rather than growing the large shared stylesheets,
   per the frontend size-ceiling guard (scripts/check_frontend_size_ceiling.py).
   ========================================================================= */

/* ---- Login: refined action button (phones only, matches styles.css bp) ---- */
@media (max-width: 767.98px) {
  /* Replace the heavy red halo with a tight contact + soft ambient shadow so
     the button reads as "raised", not "red bloom". */
  .mobile-app-login__submit {
    box-shadow: 0 6px 14px -4px rgba(var(--brand-red-rgb), .38),
                0 2px 5px rgba(var(--token-color-ink-deep-rgb, 15, 23, 42), .10);
  }
  .mobile-app-login__submit:active {
    box-shadow: 0 3px 8px -3px rgba(var(--brand-red-rgb), .34),
                0 1px 3px rgba(var(--token-color-ink-deep-rgb, 15, 23, 42), .10);
  }
}

/* ---- Home / MR23: mobile app shell (phones + tablets, matches user_homepage.css bp) ---- */
@media (max-width: 991.98px) {
  /* Topbar menu / new-chat buttons: give them a defined surface + border so
     they read as tappable controls even before the CDN icon glyph paints
     (previously the near-transparent fill looked like empty circles). */
  .user-home-mobile-topbar-btn {
    border: 1px solid var(--uh-border-strong, var(--uh-border));
    background: var(--uh-surface-soft);
    box-shadow: 0 1px 2px rgba(var(--token-color-ink-deep-rgb, 15, 23, 42), .06);
    transition: background .18s ease, border-color .18s ease, transform .12s ease;
  }
  .user-home-mobile-topbar-btn:hover,
  .user-home-mobile-topbar-btn:focus-visible {
    border-color: color-mix(in srgb, var(--uh-accent) 40%, var(--uh-border-strong, var(--uh-border)));
  }

  /* Chat composer: clear the iOS home-indicator inset so it never tucks under
     the bottom bar on notched phones. */
  .control-tower-panel-embed--ai .ai-chat-panel.is-control-tower .ai-chat-form {
    padding-bottom: max(.75rem, env(safe-area-inset-bottom, 0px));
  }

  /* ---- Home People & Pulse drawer: readable stat cards ------------------
     The rail becomes a ~330px slide-in drawer on phones/tablets, but the
     summary stats kept the desktop two-column grid with badges forced into
     `repeat(3, …)`. At drawer width each badge column collapsed to ~53px and
     labels snapped mid-word ("Centu ry", "Strea k 30"). The single-column
     overrides in user_homepage.css never applied because the desktop
     `.…--comms.has-total` selectors outrank a bare `.people-pulse-summary-grid`.
     These rules match that specificity (and load after user_homepage.css, so
     they win by source order) to stack the four cards full-width. */
  .people-pulse-summary-grid--comms.has-total {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Single column ⇒ drop the vertical dividers and give every card except the
     last a hairline bottom divider, so the stack still reads as separated. */
  .people-pulse-summary-grid--comms.has-total > *:nth-child(odd) {
    border-right: 0;
  }
  .people-pulse-summary-grid--comms.has-total > *:nth-child(3) {
    border-bottom: 1px solid var(--uh-border);
  }
  .people-pulse-summary-grid--comms.has-total .user-home-section--growth {
    border-left: 0;
  }
  /* Badges now span the full drawer width (~100px per column), enough for the
     labels to wrap between words instead of mid-character. */
  .people-pulse-summary-grid--comms.has-total .people-pulse-badges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Belt-and-suspenders: never split a badge label mid-character — wrap
     between words and only break a word that genuinely can't fit alone. */
  .people-pulse-badge-title {
    overflow-wrap: break-word;
    hyphens: none;
  }
}