/* Docked phone tab bar (user picked it over the floating pill, 2026-10-29); loads after aiq-phone.css and overrides its pill.
   Attio-flat instead of the floating pill: full width, hairline on top, frosted, no shadow, content ends above it. */
@media (max-width: 767px) {
  html.aiq-phone #aiq-ptabs { left: 0; right: 0; bottom: 0; height: calc(56px + env(safe-area-inset-bottom));
    padding: 0 4px env(safe-area-inset-bottom); border-radius: 0; box-shadow: none; border: 0; border-top: 1px solid var(--ph-line); }
  html.aiq-phone[data-theme="dark"] #aiq-ptabs { box-shadow: none; border: 0; border-top: 1px solid var(--ph-line); }
  html.aiq-phone #aiq-ptabs a { border-radius: 0; gap: 3px; font-size: 10px; white-space: nowrap; }
  html.aiq-phone #aiq-ptabs a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  html.aiq-phone #aiq-ptabs a i { font-size: 20px; }
  html.aiq-phone .app-shell > main { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
  html.aiq-phone #aiq-toast, html.aiq-phone .aiq-toast { bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
  html.aiq-phone .ws-dock { bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
  html.aiq-phone .ph-pop-card { left: 8px; right: 8px; bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* tab-bar pop-ups (Explore, Financials, Markets views): the frosted card was ~86% see-through, so the page's rows showed
     through its bottom edge like a fade, and a fixed 64vh cut long lists mid-row (user, 2026-10-29). Near-opaque card; it
     grows to the room between the top bar and the dock, and only scrolls when the list is longer than that. */
  html.aiq-phone .ph-pop-card { background: rgba(255,255,255,.97); max-height: calc(100dvh - 64px - env(safe-area-inset-bottom) - 64px);
    padding-bottom: 8px; }
  html.aiq-phone[data-theme="dark"] .ph-pop-card { background: rgba(41,41,41,.97); }
}