/*
 * hysocial-mobile.css — shared mobile / PWA utilities for every hySocial surface.
 *
 * Provides: safe-area inset helpers (Dynamic Island / notch / home indicator),
 * 100dvh helpers, the standard bottom tab-bar (.hy-tabbar / .hy-tabbar-item),
 * foldable support for the Pixel 9 Pro Fold (viewport-segment media features),
 * iPad regular/split-view breakpoints, momentum scrolling, and 44px tap targets.
 *
 * Token-based only — pairs with /css/tokens.css. No hardcoded brand colors;
 * the rgba()/#fff values present are neutral fallbacks for var() chains
 * (matching the existing hySocial glass pattern) and never the brand accent.
 */

:root {
  --hy-tabbar-h: 56px;                 /* tab-bar content height (excludes safe inset) */
  --hy-tap: var(--touch-target, 44px); /* minimum tap target */
}

/* ── Safe-area inset helpers ──────────────────────────────────────────── */
/* Lean on tokens.css (--safe-*) which already wrap env(safe-area-inset-*). */
.hy-safe-top    { padding-top:    var(--safe-top,    env(safe-area-inset-top,    0px)); }
.hy-safe-bottom { padding-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px)); }
.hy-safe-left   { padding-left:   var(--safe-left,   env(safe-area-inset-left,   0px)); }
.hy-safe-right  { padding-right:  var(--safe-right,  env(safe-area-inset-right,  0px)); }
.hy-safe-x {
  padding-left:  var(--safe-left,  env(safe-area-inset-left,  0px));
  padding-right: var(--safe-right, env(safe-area-inset-right, 0px));
}
.hy-safe-y {
  padding-top:    var(--safe-top,    env(safe-area-inset-top,    0px));
  padding-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
}
.hy-safe {
  padding:
    var(--safe-top,    env(safe-area-inset-top,    0px))
    var(--safe-right,  env(safe-area-inset-right,  0px))
    var(--safe-bottom, env(safe-area-inset-bottom, 0px))
    var(--safe-left,   env(safe-area-inset-left,   0px));
}
/* margin variants for fixed/sticky chrome */
.hy-safe-mt { margin-top:    var(--safe-top,    env(safe-area-inset-top,    0px)); }
.hy-safe-mb { margin-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px)); }

/* ── Full-height helpers: 100dvh with vh fallback ─────────────────────── */
.hy-vh    { height:     100vh; height:     100dvh; }
.hy-minvh { min-height: 100vh; min-height: 100dvh; }
.hy-maxvh { max-height: 100vh; max-height: 100dvh; }
/* app shell: fills the dynamic viewport and clears the status bar / island */
.hy-app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: var(--safe-top, env(safe-area-inset-top, 0px));
}

/* ── Momentum / overscroll for scroll regions ─────────────────────────── */
.hy-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
.hy-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.hy-scroll-x::-webkit-scrollbar { display: none; }

/* ── Minimum 44×44 tap targets ────────────────────────────────────────── */
.hy-tap-target {
  min-width: var(--hy-tap);
  min-height: var(--hy-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Standard bottom tab-bar ──────────────────────────────────────────── */
.hy-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky, 200);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 2px;
  /* sit above the home indicator */
  padding-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
  padding-left:   var(--safe-left,   env(safe-area-inset-left,   0px));
  padding-right:  var(--safe-right,  env(safe-area-inset-right,  0px));
  background: var(--glass-bg-heavy, var(--glass-bg, rgba(0, 14, 8, 0.88)));
  -webkit-backdrop-filter: saturate(180%) blur(40px);
  backdrop-filter: saturate(180%) blur(40px);
  border-top: 0.5px solid var(--glass-border, var(--border, rgba(255, 255, 255, 0.1)));
  font-family: var(--font-ios, -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif);
}
.hy-tabbar-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--hy-tabbar-h);
  min-width: var(--hy-tap);
  padding: 6px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--muted, rgba(200, 255, 240, 0.6));
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast, 150ms ease),
              transform var(--transition-fast, 150ms ease);
  position: relative;
}
.hy-tabbar-item iconify-icon { font-size: 24px; display: block; }
.hy-tabbar-item span { white-space: nowrap; }
.hy-tabbar-item:active { transform: scale(0.92); }
.hy-tabbar-item.active,
.hy-tabbar-item[aria-current="page"] { color: var(--accent, #00ffa3); }
.hy-tabbar-item:focus-visible {
  outline: 2px solid var(--accent, #00ffa3);
  outline-offset: -2px;
  border-radius: var(--radius-md, 10px);
}

/* Center call-to-action ("+") — a raised accent puck */
.hy-tabbar-cta { flex: 0 0 auto; color: var(--muted, rgba(200, 255, 240, 0.6)); }
.hy-tabbar-cta .hy-tabbar-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hy-tap);
  height: var(--hy-tap);
  margin-top: -14px;
  border-radius: var(--radius-full, 9999px);
  background: var(--accent, #00ffa3);
  color: var(--bg-deep, #001a0d);
  box-shadow: var(--shadow-glow, 0 0 20px rgba(0, 255, 163, 0.35));
}
.hy-tabbar-cta .hy-tabbar-fab iconify-icon { font-size: 26px; }

/* Notification badge on a tab */
.hy-tabbar-badge {
  position: absolute;
  top: 4px;
  left: calc(50% + 6px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full, 9999px);
  background: var(--danger, #ff4d6d);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
.hy-tabbar-badge[hidden] { display: none; }

/* Keep page content clear of the fixed bar */
.hy-has-tabbar {
  padding-bottom: calc(var(--hy-tabbar-h) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
}

/* ── Foldables — Pixel 9 Pro Fold (hinge / viewport-segment aware) ─────── */
/* Book posture: the hinge splits the viewport left | right -> two columns. */
@media (horizontal-viewport-segments: 2) {
  .hy-fold-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px; /* gutter approximates the physical hinge */
  }
  .hy-two-pane {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: var(--space-lg, 16px);
  }
  /* group the tabs centrally so they don't straddle the hinge */
  .hy-tabbar { justify-content: center; gap: 24px; }
}
/* Laptop / flex posture: the hinge splits the viewport top | bottom. */
@media (vertical-viewport-segments: 2) {
  .hy-fold-2row { display: grid; grid-template-rows: 1fr 1fr; }
  /* safe-area bottom inset already docks the bar to the lower segment */
}
/* Legacy dual-screen spec fallback (older foldable/dual-screen browsers). */
@media (spanning: single-fold-vertical) {
  .hy-fold-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: env(fold-width, 24px);
  }
}

/* ── iPad / tablet — regular width gets two panes ─────────────────────── */
@media (min-width: 768px) {
  .hy-two-pane {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: var(--space-lg, 16px);
  }
  /* float the tab-bar into a centered pill on wide screens */
  .hy-tabbar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: 600px;
    border-radius: var(--radius-xl, 20px) var(--radius-xl, 20px) 0 0;
    border-left: 0.5px solid var(--glass-border, var(--border, rgba(255, 255, 255, 0.1)));
    border-right: 0.5px solid var(--glass-border, var(--border, rgba(255, 255, 255, 0.1)));
  }
}
/* Split-view / Slide-over narrow (iPad multitasking) -> phone layout.
   Width queries above stop matching when the app pane is narrow, so the
   single-column phone layout applies automatically; this is the explicit guard. */
@media (max-width: 767px) {
  .hy-two-pane { display: block; }
}
/* ── Desktop: hide the mobile bar where a persistent sidebar already exists. */
@media (min-width: 1024px) {
  .hy-tabbar.hy-tabbar--mobile-only { display: none; }
}


/* ════════════════════════════════════════════════════════════════════════════
   hySocial mobile polish — iOS Liquid Glass UX pass (2026-07-19)
   ════════════════════════════════════════════════════════════════════════════
   All rules use CSS custom properties from tokens.css only — no hardcoded
   brand colors. Touch targets ≥ 44px per iOS HIG. Spring physics via
   cubic-bezier(0.34,1.56,0.64,1) (overshoot spring) throughout.
   Sections:
     §A Touch-target enforcement
     §B Bottom tab bar — spring pip animation
     §C FAB — premium glow + spring press
     §D Safe-area improvements
     §E Scroll containers — iOS physics
     §F Post card mobile — glass depth + spring press
     §G Reaction row — spring bounce keyframe
     §H Link preview — stacked mobile layout
     §I Compose box — focus glow + 16px no-zoom
     §J Notification items — roomier mobile layout
   ════════════════════════════════════════════════════════════════════════════ */


/* ── §A Touch-target enforcement (iOS HIG ≥ 44 px) ──────────────────────── */
@media (max-width: 768px) {
  .hs-post-avatar      { min-width: 44px; min-height: 44px; }
  .hs-compose-btn      { min-width: 44px; min-height: 44px; }
  /* post action-menu trigger — tall enough to hit easily */
  .hs-post-menu        { min-width: 44px; min-height: 44px; font-size: 24px; }
  /* story chip — wide tap zone even on smallest iPhones */
  .hs-story-card       { min-width: 72px; }
  /* comment-box send button */
  .hs-comment-input button { min-width: 44px; min-height: 44px; }
  /* post-bottom row buttons */
  .hs-pb-rm            { min-width: 44px; min-height: 44px; }
  /* chip pills — smaller than buttons but still comfortable */
  .hs-chip             { min-height: 40px; padding: 8px 14px; font-size: 12px; }
  /* event RSVP */
  .hs-ev-rsvp          { min-height: 44px; }
  /* follow / unfollow button */
  .hs-follow-btn       { min-height: 40px; padding: 8px 16px; }
  /* reaction row buttons — reinforce ≥ 48px so they are easy to tap */
  .hs-react-btn        { min-height: 48px; }
  /* filter / category pills */
  .hs-filter-pill      { min-height: 40px; }
  /* "see more" inline expander */
  .hs-see-more         { min-height: 44px; display: flex; align-items: center; }
}


/* ── §B Bottom tab bar — spring pip on active icon ───────────────────────── */
/* Tab icon subtle scale + glow when active */
@media (max-width: 768px) {
  /* smooth default transition for tab icon */
  .hs-tab iconify-icon {
    transition:
      transform .15s cubic-bezier(.2,.9,.3,1),
      color .2s ease,
      filter .2s ease;
    display: block;
  }

  /* press-down compression */
  .hs-tab:active iconify-icon {
    transform: scale(.82);
    transition: transform .08s ease-in;
  }

  /* active tab: spring-expand + accent glow */
  .hs-tab.active iconify-icon,
  .hs-tab[aria-current="page"] iconify-icon {
    transform: scale(1.08);
    filter: drop-shadow(
      0 0 8px color-mix(in srgb, var(--accent) 50%, transparent)
    );
    transition:
      transform .3s cubic-bezier(.34,1.56,.64,1),
      filter .25s ease;
  }

  /* active tab indicator pill (slides in from zero width) */
  .hs-tab.active::before,
  .hs-tab[aria-current="page"]::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
    animation: hs-tab-pip-in .3s cubic-bezier(.34,1.56,.64,1);
  }
}
@keyframes hs-tab-pip-in {
  from { width: 0;    opacity: 0; }
  to   { width: 24px; opacity: 1; }
}


/* ── §C FAB — premium glow + spring press ───────────────────────────────── */
@media (max-width: 768px) {
  .hs-fab {
    box-shadow:
      0 4px 24px color-mix(in srgb, var(--accent) 40%, transparent),
      0 1px 4px rgba(0,0,0,.3),
      inset 0 1px 0 rgba(255,255,255,.2);
    transition:
      transform .2s cubic-bezier(.34,1.56,.64,1),
      box-shadow .2s ease;
  }
  .hs-fab:active {
    transform: scale(.88);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 25%, transparent);
    transition: transform .1s ease-in, box-shadow .1s ease-in;
  }
}


/* ── §D Safe-area improvements — all fixed surfaces ─────────────────────── */
@media (max-width: 768px) {
  /* story close button clears Dynamic Island / notch */
  .hs-story-close {
    top: max(env(safe-area-inset-top, 8px), 14px);
  }

  /* "new posts" refresh pill clears Dynamic Island */
  .hs-new-posts-pill {
    top: calc(env(safe-area-inset-top, 0px) + 56px);
  }

  /* toast container clears Dynamic Island */
  .hs-toast-container {
    top: calc(env(safe-area-inset-top, 0px) + 60px);
  }

  /* emoji picker: cap height so it stays above the software keyboard */
  .hs-emoji-picker {
    max-height: min(300px, 40vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ── §E Scroll containers — iOS momentum physics ────────────────────────── */
@media (max-width: 768px) {
  /* main feed */
  .hs-feed-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
  }

  /* horizontal story strip */
  .hs-stories {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .hs-stories::-webkit-scrollbar { display: none; }

  /* friends / suggestions horizontal rail */
  .hs-friends-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .hs-friends-grid::-webkit-scrollbar { display: none; }
}


/* ── §F Post card mobile — glass depth + spring press ───────────────────── */
@media (max-width: 768px) {
  .hs-post {
    border-radius: 22px;
    box-shadow:
      0 8px 24px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.09),
      inset 0 -1px 0 rgba(0,0,0,.1);
  }
  .hs-post:active {
    transform: scale(.99);
    transition: transform .12s ease-in;
  }
}


/* ── §G Reaction row — spring bounce keyframe ───────────────────────────── */
@media (max-width: 768px) {
  .hs-react-btn:active {
    animation: hs-react-spring .35s cubic-bezier(.17,.89,.32,1.28);
  }
}
@keyframes hs-react-spring {
  0%   { transform: scale(1); }
  20%  { transform: scale(.84); }
  55%  { transform: scale(1.14); }
  80%  { transform: scale(.98); }
  100% { transform: scale(1); }
}


/* ── §H Link preview — stacked, clean mobile layout ─────────────────────── */
@media (max-width: 768px) {
  .hs-link-preview {
    border-radius: 16px;
  }
  .hs-link-preview-img {
    min-height: 140px;
    border-radius: 12px 12px 0 0;
  }
  .hs-link-preview-title {
    font-size: 14px;
    font-weight: 700;
  }
}


/* ── §I Compose box — focus glow + 16px no-iOS-zoom ─────────────────────── */
@media (max-width: 768px) {
  .hs-compose {
    border-radius: 22px;
  }
  .hs-compose:focus-within {
    border-color: var(--accent);
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent),
      0 10px 30px rgba(0,0,0,.3),
      inset 0 1px 0 rgba(255,255,255,.1);
    transition: border-color .25s ease, box-shadow .25s ease;
  }
  /* 16px minimum prevents iOS from auto-zooming on textarea focus */
  .hs-compose textarea,
  .hs-compose input[type="text"],
  .hs-compose input[type="search"] {
    font-size: 16px;
  }
}


/* ── §J Notification items — roomier on mobile ───────────────────────────── */
@media (max-width: 768px) {
  .hs-notif {
    padding: 14px 12px;
    border-radius: 18px;
    min-height: 64px;
  }
  .hs-notif-icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
    flex-shrink: 0;
  }
  .hs-notif-text {
    font-size: 14px;
    line-height: 1.4;
  }
  .hs-notif-time {
    font-size: 11px;
  }
}


/* ── §K Misc — touch-action: manipulation on all interactive hySocial chrome */
/* Eliminates the 300ms tap delay on iOS without relying on a JS library.    */
@media (max-width: 768px) {
  .hs-post-btn,
  .hs-react-btn,
  .hs-follow-btn,
  .hs-fab,
  .hs-tab,
  .hs-filter-pill,
  .hs-story-card,
  .hs-compose-btn,
  .hs-chip,
  .hs-ev-rsvp,
  .hs-notif,
  .hs-see-more {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}