/* SHELA MOBILE EMERGENCY — 2026-04-21
   Target: iPhone 14 (390px), iPhone SE (375px), all small phones.
   `html` prefix bumps specificity so we beat dynamically-injected
   <style> tags from other patches that run later in the document.
*/

/* ═══════════════════════════════════════════════════════════════
   TIER 1 — tablet & small laptop (<= 767px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Header / auth bar shrink so right-side buttons fit ─────── */
  html #shela-auth-bar {
    padding: 0 6px !important;
    gap: 4px !important;
  }
  html #shela-auth-bar .shela-logo {
    font-size: 13px !important;
    gap: 4px !important;
  }
  html #shela-auth-bar .bar-right {
    gap: 4px !important;
  }
  html #shela-auth-bar .bar-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  /* ── Domains header button: tighter ─────────────────────────── */
  html #shela-domains-header-btn {
    padding: 4px 7px !important;
    font-size: 11px !important;
  }

  /* ── Model bar: anchor further right, icon-only toggles ─────── */
  html #shela-model-bar {
    left: 80px !important;
    gap: 3px !important;
  }
  html .shela-model-toggle {
    padding: 3px 6px !important;
    font-size: 11px !important;
  }
  html .shela-model-toggle .toggle-label {
    display: none !important;
  }
  html .shela-model-toggle .toggle-chevron {
    margin-left: 0 !important;
  }

  /* ── Model dropdown: constrain to viewport ──────────────────── */
  html .shela-model-dropdown {
    min-width: 240px !important;
    max-width: calc(100vw - 24px) !important;
    left: 0 !important;
  }

  /* ── Welcome brain: shrink from 160px → 88px ────────────────── */
  html .size-16.shela-glow img {
    width: 88px !important;
  }

  /* ── Welcome title: tighter size + proper wrap ──────────────── */
  html .text-2xl.font-bold.tracking-tight {
    font-size: 22px !important;
    line-height: 1.3 !important;
    padding: 0 20px !important;
    text-align: center !important;
    letter-spacing: -0.01em !important;
  }

  /* ── Suggestion cards: SINGLE column, full-width, readable ──── */
  html .shela-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    max-height: 48vh !important;
    padding: 0 12px !important;
    overflow-y: auto !important;
  }
  html .shela-cards-grid > .shela-card-new:last-child {
    grid-column: auto !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
  html .shela-cards-grid .shela-card-new button {
    min-height: 56px !important;
    padding: 12px 14px !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }
  /* Allow card labels to wrap instead of ellipsis clipping.
     Targets: label div (nth-child 1 inside text column) + desc (nth-child 2). */
  html .shela-cards-grid .shela-card-new button > div > div:first-child {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  html .shela-cards-grid .shela-card-new button > div > div:nth-child(2) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
  }

  /* ── Jump-to-latest pill: above input, z below cards ────────── */
  html #shela-jump-latest {
    bottom: 150px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    z-index: 50 !important;
  }

  /* ── Laptop FAB: above input + safe-area aware ──────────────── */
  html #shela-mobile-computer-fab {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
  }

  /* ── Prevent iOS zoom on textarea focus (<16px triggers zoom) ─ */
  html textarea[placeholder*="Ask anything"] {
    font-size: 16px !important;
  }

  /* ── Disclaimer: smaller + tighter on mobile ────────────────── */
  html #shela-disclaimer {
    font-size: 9px !important;
    padding: 2px 8px 4px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TIER 2 — phones (<= 500px) — iPhone 14 (390), SE (375)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 500px) {

  html .size-16.shela-glow img {
    width: 72px !important;
  }

  html .text-2xl.font-bold.tracking-tight {
    font-size: 20px !important;
    padding: 0 16px !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
  }

  html .text-muted-foreground.text-sm {
    font-size: 12px !important;
    line-height: 1.45 !important;
    padding: 0 16px !important;
  }

  html .shela-cards-grid {
    padding: 0 12px !important;
    gap: 8px !important;
  }

  /* Hide "Shela" wordmark, keep purple dot visible */
  html #shela-auth-bar {
    padding: 0 4px !important;
  }
  html #shela-auth-bar .shela-logo {
    font-size: 0 !important;
    gap: 0 !important;
  }
  html #shela-auth-bar .shela-logo .dot {
    width: 10px !important;
    height: 10px !important;
  }
  html #shela-auth-bar .bar-btn {
    padding: 4px 7px !important;
    font-size: 10px !important;
  }

  /* Model bar: snuggle right next to logo dot */
  html #shela-model-bar {
    left: 28px !important;
    gap: 2px !important;
  }
  html .shela-model-toggle {
    padding: 3px 5px !important;
    font-size: 11px !important;
  }
  html .shela-model-toggle .toggle-chevron {
    display: none !important;
  }

  /* Ambient orbs: dim & shrink so they don't dominate 390px */
  html .shela-orb-1 { width: 200px !important; height: 200px !important; }
  html .shela-orb-2 { width: 180px !important; height: 180px !important; }
  html .shela-orb-3 { width: 140px !important; height: 140px !important; }

  html #shela-jump-latest {
    bottom: 138px !important;
  }

  html #shela-mobile-computer-fab {
    bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TIER 3 — tiny phones / iPhone SE portrait (<= 380px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  html .text-2xl.font-bold.tracking-tight {
    font-size: 18px !important;
  }
  html .size-16.shela-glow img {
    width: 64px !important;
  }
  html #shela-auth-bar .bar-btn {
    padding: 3px 5px !important;
    font-size: 10px !important;
  }
  html #shela-model-bar {
    left: 22px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SHORT VIEWPORT — iPhone SE is only 667px tall
   ═══════════════════════════════════════════════════════════════ */
@media (max-height: 700px) and (max-width: 767px) {
  html .size-16.shela-glow img {
    width: 56px !important;
  }
  html .shela-cards-grid {
    max-height: 38vh !important;
  }
  html .text-2xl.font-bold.tracking-tight {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }
}