/* ── platform/os-ios.css — iOS / iPadOS overrides ───────────────────────
   Applied when body.os-ios is present (set by getOS() in state.js).

   Covers:
   - Safe area insets (notch / Dynamic Island / home indicator)
   - 100vh preference (100dvh has a cold-start bug in iOS PWA)
   - WebKit rendering tweaks
   - Chat screen rounded-left card edge on panel slide
   - Messages scroll behind status bar with mask fade
   - Composer extends into home bar zone
   - Touch selection/callout suppression
────────────────────────────────────────────────────────────────────────── */

/* ── Viewport height — 100dvh is broken on iOS PWA cold start ── */
body.os-ios html,
body.os-ios body {
  height: 100vh;
}

/* ── Base font size — 16px on iOS ────────────────────────────── */
/* Slightly larger than the 15px base for better readability on
   Retina screens. Also ensures no input auto-zoom (iOS requires
   ≥16px computed font-size on inputs to suppress zoom). */
body.os-ios {
  font-size: 16px;
}

/* ── WebKit font smoothing ───────────────────────────────────── */
body.os-ios {
  -webkit-font-smoothing: antialiased;
}

/* ── Safe-area top spacer ────────────────────────────────────── */
body.os-ios .safe-top {
  height: env(safe-area-inset-top, 0px);
}


/* ── Messages — scroll behind status bar with mask fade ──────── */
/* body.os-ios #messages {
  padding-top: calc(env(safe-area-inset-top, 0px) + 3.5rem);
  margin-top: calc(-1 * env(safe-area-inset-top, 0px));
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0px,
      black env(safe-area-inset-top, 0px));
  mask-image: linear-gradient(to bottom,
      transparent 0px,
      black env(safe-area-inset-top, 0px));
} */

body.os-ios #messages-spacer {
  max-height: calc(100% - env(safe-area-inset-top, 0px) - 4rem);
}














/* ── Profile bubble — home indicator clearance ───────────────── */
/* body.os-ios #profile-bub-wrap {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) - 0.75rem);
} */

/* ── Connection banner — push below status bar ───────────────── */
body.os-ios #conn-inner {
  padding-top: calc(env(safe-area-inset-top, 0px) - 0.75rem);
}

/* ── SW update overlay — push below status bar ───────────────── */
body.os-ios #sw-overlay {
  padding-top: calc(env(safe-area-inset-top, 0px) + 1.25rem);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
}

/* ── Touch: suppress callout and selection on messages ───────── */
body.os-ios #messages,
body.os-ios #messages * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ── Hide scrollbar (iOS hides it anyway, explicit for clarity) ─ */
body.os-ios ::-webkit-scrollbar {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════
   iOS in BROWSER mode (body.os-ios.display-browser)
   ══════════════════════════════════════════════════════════════════
   When running in Safari browser (not installed PWA), we switch from
   100vh to 100dvh so the app shell tracks the visible viewport as
   Safari's toolbar shows/hides. This fixes all 3 Safari tab styles:

   - Bottom compact bar:  dvh = full screen minus compact pill
   - Bottom expanded bar: dvh = full screen minus tall toolbar
   - Top bar:             dvh = full screen minus top toolbar

   We keep env(safe-area-inset-top) for the hardware notch/status bar,
   but we must also push content below the browser's top bar when it
   is in top position. We do this by adding a minimum top inset:
   the notch inset OR 0 — the dvh already accounts for the top bar
   height since it starts measurement below the browser chrome.

   The topbar absolute positioning also needs to respect this: since
   dvh starts below the browser chrome, top:0 correctly lands at the
   top of the visible area. The status bar notch inset still applies.
   ══════════════════════════════════════════════════════════════════ */

/* Let dvh from display-browser.css take effect — override the 100vh */
body.os-ios.display-browser html,
body.os-ios.display-browser body {
  height: 100dvh;
}

/* Topbar: sits at top of dvh viewport which is already below browser chrome.
   Still apply hardware notch inset (Dynamic Island etc). */
body.os-ios.display-browser #chat-topbar {
  top: env(safe-area-inset-top, 0px);
}

/* Messages: pad for hardware notch only — browser chrome handled by dvh */
/* body.os-ios.display-browser #messages {
  padding-top: calc(env(safe-area-inset-top, 0px) + 3.5rem);
  margin-top: calc(-1 * env(safe-area-inset-top, 0px));
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0px,
      black env(safe-area-inset-top, 0px));
  mask-image: linear-gradient(to bottom,
      transparent 0px,
      black env(safe-area-inset-top, 0px));
} */

body.os-ios.display-browser #messages-spacer {
  max-height: calc(100% - env(safe-area-inset-top, 0px) - 4rem);
}

/* Composer: dvh already accounts for browser bottom toolbar height.
   Still add home indicator inset for devices with home bar. */
/* body.os-ios.display-browser #composer-wrap {
  padding-bottom: env(safe-area-inset-bottom, 0px);
} */

/* ── Profile bubble — home indicator clearance (browser mode) ── */
/* body.os-ios.display-browser #profile-bub-wrap {
  padding-bottom: env(safe-area-inset-bottom, 0px);
} */

/* Safe-top spacer: hardware notch only */
body.os-ios.display-browser .safe-top {
  height: env(safe-area-inset-top, 0px);
}




body.os-ios {
  /* ── Type scale ────────────────────────────────────────────────
     Base: 15px. All rem values derive from this.
     xs   → labels, badges, timestamps, hints
     sm   → secondary text, descriptions, status
     base → body copy, bubble text, inputs
     md   → author names, section labels
     lg   → card titles, name headings
     xl   → large headings (user card name)
  ──────────────────────────────────────────────────────────────── */
  --text-xs: 0.7rem;
  /* 10.5px — timestamps, badges, micro labels  */
  --text-sm: 0.8rem;
  /* 12px   — descriptions, hints, status text  */
  --text-base: 0.933rem;
  /* 14px   — bubble text, inputs, body copy    */
  --text-md: 1rem;
  /* 15px   — author names, section labels      */
  --text-lg: 1.133rem;
  /* 17px   — card titles                       */
  --text-xl: 1.333rem;
  /* 20px   — user card name heading            */

  /* ── Radius scale ──────────────────────────────────────────────
     sm   → small chips, tags, status badges
     md   → buttons, inputs, small cards
     lg   → message composer, profile bubble
     xl   → bottom sheets, cards
     full → avatars, blobs, circular elements
  ──────────────────────────────────────────────────────────────── */
  --radius-sm: 0.4rem;
  /* 6px  */
  --radius-md: 0.667rem;
  /* 10px */
  --radius-lg: 1.333rem;
  /* 20px */
  --radius-xl: 1.667rem;
  /* 25px */
  --radius-full: 9999px;

  /* ── Spacing scale ─────────────────────────────────────────────
     Used for padding and gap. Derived from a 4px base unit.
  ──────────────────────────────────────────────────────────────── */
  --sp-1: 0.267rem;
  /* 4px  */
  --sp-2: 0.533rem;
  /* 8px  */
  --sp-3: 0.8rem;
  /* 12px */
  --sp-4: 1.067rem;
  /* 16px */
  --sp-5: 1.333rem;
  /* 20px */
  --sp-6: 1.6rem;
  /* 24px */
}