/* responsive.css — breakpoints. Must stay last in the cascade.
   Phones get an iOS layout: tabs in a bottom tab bar, 44pt touch targets,
   16px inputs (smaller ones make iOS zoom on focus), and room for the notch
   and home indicator (index.html sets viewport-fit=cover). */

@media (max-width: 760px) {
  .page { padding: 18px 16px 32px; }
  .main { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

  /* Top bar: brand, theme, account. The tabs move to the bottom. */
  .nav { padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); height: calc(var(--nav-h) + env(safe-area-inset-top)); gap: 4px; }
  .nav-tabs, .nav-user-name { display: none; }
  .nav .icon-btn { width: 44px; height: 44px; }
  .nav-user-trigger { padding: 7px; }
  .nav-home-btn { padding: 7px; margin-left: -7px; }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 4px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--border);
  }
  .tabbar-tab {
    flex: 1; position: relative; min-height: 50px; padding: 4px 0 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: none; background: none; cursor: pointer; color: var(--label-3);
    font-size: 10.5px; font-weight: 600; letter-spacing: 0;
  }
  .tabbar-tab svg { width: 25px; height: 25px; }
  .tabbar-tab.is-active { color: var(--accent); }
  .tabbar-tab:active svg { transform: scale(.9); }
  .tabbar-tab .badge { position: absolute; top: 3px; left: calc(50% + 5px); }

  .large-title { font-size: 30px; }
  .head-actions .btn span { display: none; }
  .head-actions .btn { width: 44px; height: 44px; padding: 0; }
  .card { border-radius: var(--r-lg); }
  .section-title { margin-top: 26px; }

  /* Rows: no sticky hover on touch; a press tint instead. */
  .row { min-height: 60px; }
  .row:hover { background: none; }
  .row:active:not(.row--static) { background: var(--surface-2); }
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn svg { width: 20px; height: 20px; }
  .btn { min-height: 44px; }
  .btn--sm { min-height: 36px; }
  .btn:active { opacity: .85; }

  /* Player: one column, big thumb-sized actions. */
  .back { min-height: 44px; margin: -10px 0 4px -4px; padding-right: 12px; }
  .player-head { gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
  .player-id { flex: 1 1 calc(100% - 78px); }   /* the name gets the row; Pause wraps under it */
  .player-head .btn--sm { min-height: 44px; padding: 0 14px; margin: -8px 0 -6px 64px; }
  .player-name { font-size: 24px; }
  .player-head .muted { font-size: 14px; }
  .compose { padding: 16px 14px 14px; }
  .compose-head { flex-wrap: wrap; }
  .seg button { min-height: 40px; padding: 4px 16px; font-size: 14px; }
  .bubble, .linkcard, .bubble-edit { max-width: 92%; width: auto; }
  .linkcard, .bubble-edit { width: 92%; }
  .linkcard { min-height: 60px; }
  .compose-actions { gap: 8px; }
  .compose-actions .spacer { display: none; }
  .compose-actions .btn { flex: 1; min-height: 50px; font-size: 16px; }
  .compose-actions [data-sent] { flex-basis: 100%; order: 1; }   /* the main action: full width, last, nearest the thumb */
  .compose-actions > .muted { flex-basis: 100%; }
  .compose--add .btn { width: 100%; min-height: 50px; }
  .hist-link { min-height: 32px; }

  .search input, .field textarea { font-size: 16px; }
  .search--page { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top) + 8px); z-index: 5; }
  .search--page input { min-height: 44px; box-shadow: 0 0 0 8px var(--bg); }

  .toast { bottom: calc(70px + env(safe-area-inset-bottom)); }

  /* Sheets rise from the bottom edge, like iOS. */
  .overlay { align-items: flex-end; padding: 0; }
  .sheet, .sheet--sm, .sheet--lg { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .sheet-head { padding: 12px 16px; min-height: 52px; }
  .link-btn { min-height: 44px; min-width: 44px; padding: 0 4px; }
  .sheet-body { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .chip-pick span { padding: 9px 16px; font-size: 15px; }
}

@media (max-width: 400px) {
  .row { padding: 10px 12px; }
  .row + .row::before { left: 64px; }
  .tally span { display: none; }
  .tally b { font-size: 16px; }
  .ring { width: 42px; height: 42px; }
}