/* ============================================================================
   hysocial-glass.css — iOS "Liquid Glass" optimization layer for hySocial.

   Loaded LAST in <head> (after each page's inline <style>) so it refines the
   existing component CSS through the shared glass tokens + small, targeted,
   theme-token-based polish. No hardcoded brand colors — everything derives from
   tokens.css / the active theme. Device-tuned for the iPhone 16 & 17 families
   and the Pixel 9 Pro Fold, with safe-area + reduced-motion/transparency a11y.

   Why this works app-wide with almost no per-page edits: hySocial components
   consume var(--glass-bg / -bg-heavy / -border / -radius / -shadow, <fallback>)
   but those tokens are not defined globally — so defining them here cascades
   the upgraded material into every card, bar, compose box and popup at once.
   ============================================================================ */

/* ── 1. Liquid-glass material tokens (cascade into every var(--glass-*)) ───── */
:root{
  --glass-blur: 20px;
  --glass-saturate: 175%;

  /* rgba fallback first, color-mix (theme-adaptive) override second */
  --glass-bg: rgba(8,22,16,.60);
  --glass-bg: color-mix(in srgb, var(--bg-surface, #001a0d) 66%, transparent);

  --glass-bg-heavy: rgba(0,11,6,.82);
  --glass-bg-heavy: color-mix(in srgb, var(--bg-deep, #000b06) 80%, transparent);

  --glass-bg-card: rgba(0,18,10,.66);
  --glass-bg-card: color-mix(in srgb, var(--bg-card, #00120a) 70%, transparent);

  --glass-border: rgba(255,255,255,.14);
  --glass-border: color-mix(in srgb, #fff 14%, transparent);

  --glass-radius: 22px;

  /* layered depth + bright specular top edge + hairline ring = the liquid look */
  --glass-shadow:
    0 10px 34px rgba(0,0,0,.36),
    0 2px 10px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 0 0 .5px rgba(255,255,255,.06);

  --glass-spring: cubic-bezier(0.34,1.56,0.64,1); /* overshoot spring — matches iOS spring physics */

  /* Smooth, fluid padding / gap / gutter scale (grows gently with viewport) */
  --hg-pad: clamp(14px, 3.4vw, 20px);
  --hg-gap: clamp(10px, 2.6vw, 16px);
  --hg-gutter: clamp(12px, 4vw, 22px);
}

/* ── 2. Universal liquid-glass surface treatment ──────────────────────────── */
.glass-card,
.hs-compose,
.hs-post,
.hs-event,
.hs-reaction-picker,
.hs-share-menu{
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* Feed surfaces: continuous radius + smooth padding + layered depth */
.hs-compose,
.hs-post{
  border-radius: var(--glass-radius);
  padding: var(--hg-pad);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.hs-post{ margin-bottom: var(--hg-gap); transition: transform .25s var(--glass-spring), border-color .2s ease; }
.hs-post:hover{ border-color: var(--accent-glow, rgba(0,255,163,.3)); }
.hs-post:active{ transform: scale(.992); }

.glass-card{
  border-radius: clamp(16px, 3.6vw, 22px);
  padding: clamp(16px, 4vw, 22px);
  box-shadow: var(--glass-shadow);
}

/* Floating popups read as thicker glass chips */
.hs-reaction-picker,
.hs-share-menu{
  border-radius: 18px;
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-border);
}

/* ── 3. Floating glass docks (iOS 26 tab bars float as pills) ──────────────── */
@media (max-width: 900px){
  .hy-tabbar,
  nav#hs-mobile-tabs.hs-tabbar{
    left: 50%; right: auto;
    transform: translateX(-50%);
    width: min(680px, calc(100% - 2 * var(--hg-gutter)));
    bottom: calc(8px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
    padding: 6px 8px;
    border-radius: 30px;
    background: var(--glass-bg-heavy);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
  }
  /* keep the round CTA puck visually centered in the floated dock */
  .hy-tabbar-cta .hy-tabbar-fab{ margin-top: -18px; }
}

/* ── 4. Pills, buttons, inputs — soft, springy liquid chips ────────────────── */
.hs-tab,
.hs-filter-pill,
.hs-visibility-select,
.hs-post-btn,
.hs-react-btn,
.hs-compose-btn,
.btn,
.text-input,
.select-input,
.lg-btn{
  transition: transform .14s var(--glass-spring),
              background .18s ease, border-color .18s ease, box-shadow .2s ease;
}
.hs-post-btn:active,
.btn:active,
.hs-tab:active,
.hs-filter-pill:active,
.hs-compose-btn:active{ transform: scale(.95); }

.hs-filter-pill{ border-radius: var(--radius-full, 9999px); }

/* Primary actions get a soft accent glow + top specular */
.hs-post-btn,
.btn-primary{
  box-shadow: 0 6px 18px var(--accent-glow, rgba(0,255,163,.3)),
              inset 0 1px 0 rgba(255,255,255,.25);
}

/* ── 5. Poll / event glass cards ──────────────────────────────────────────── */
.hs-poll-opt{ border-radius: 16px; }
.hs-event{
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}
.hs-ev-rsvp{ border-radius: var(--radius-full, 9999px); }

/* ── 6. Profile surfaces (dedicated page + in-app "Me" tab) ────────────────── */
.hs-topbar{
  background: var(--glass-bg-heavy);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.hs-tabs button{ border-radius: var(--radius-full, 9999px); transition: all .2s var(--glass-spring); }
.profile-cover,
.hs-profile-cover{ border-radius: clamp(16px, 4vw, 22px); box-shadow: var(--glass-shadow); }
.live-page-area{ border-radius: var(--glass-radius); }

/* ── 7. Smooth feed gutters on phones + keep the compose toolbar from clipping */
@media (max-width: 768px){
  .hs-feed-scroll{
    padding-left: var(--hg-gutter);
    padding-right: var(--hg-gutter);
  }
}
@media (max-width: 430px){
  /* tight phones (iPhone 16/17 base): shrink the composer icon row so the
     Post button never clips off the right edge */
  .hs-compose-actions{ gap: 2px; }
  .hs-compose-btn{ padding: 5px; }
}

/* ── 8. iPhone 16/17 — large-phone (Plus / Pro Max) breathing room ────────── */
/* Plus & Pro Max report ~430–440px logical width in portrait. */
@media (min-width: 428px) and (max-width: 600px){
  :root{ --hg-pad: 20px; --hg-gutter: 20px; }
  .hs-post-name{ font-size: 15px; }
}

/* ── 9. Pixel 9 Pro Fold ──────────────────────────────────────────────────── */
/* Inner (unfolded) display is wide & nearly square but not desktop-wide. Drop
   the cramped 3rd rail and center a roomy 2-pane (nav + feed) so the feed is
   readable instead of squeezed between two sidebars. Also covers small tablets
   / iPad portrait. */
@media (min-width: 700px) and (max-width: 1024px){
  .hs-right{ display: none; }
  .hs-feed-scroll{ max-width: 680px; margin-left: auto; margin-right: auto; }
}
/* Book posture: the hinge splits the viewport L|R — keep content in one column,
   off the fold line. */
@media (horizontal-viewport-segments: 2){
  .hs-feed-scroll{ max-width: 560px; }
  .hy-tabbar,
  nav#hs-mobile-tabs.hs-tabbar{ width: min(420px, calc(100% - 48px)); }
}

/* ── 10. Accessibility: honor reduced transparency / motion ───────────────── */
@media (prefers-reduced-transparency: reduce){
  .glass-card,.hs-compose,.hs-post,.hs-event,.hs-topbar,
  .hy-tabbar,nav#hs-mobile-tabs.hs-tabbar,.hs-reaction-picker,.hs-share-menu{
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--bg-surface, #001a0d);
  }
}
@media (prefers-reduced-motion: reduce){
  .hs-post,.hs-post-btn,.btn,.hs-tab,.hs-filter-pill,.hs-compose-btn,
  .hs-tabs button{ transition: none !important; }
}


/* ── Glass v2 — Premium specular + motion polish (2026-07-19) ───────────────
   Additive refinements only. No backdrop-filter animation (re-compositing
   cost). Animates only box-shadow / opacity / transform / color.
   Token-based only: no hardcoded brand colors.
   ─────────────────────────────────────────────────────────────────────── */

/* Post card: deeper layered shadow + convex specular top + bottom depth rim */
.hs-post {
  box-shadow:
    0 8px 32px rgba(0,0,0,.25),
    0 2px 8px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.1);
}

/* Compose box: softer layered depth + top specular */
.hs-compose {
  box-shadow:
    0 8px 32px rgba(0,0,0,.2),
    0 2px 8px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* Search bar: subtle lift */
.hs-search {
  box-shadow:
    0 2px 10px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* Reaction picker + share menu: elevated sheet — thicker glass shadow */
.hs-reaction-picker,
.hs-share-menu {
  box-shadow:
    0 12px 40px rgba(0,0,0,.45),
    0 4px 12px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* Notification card: gentle elevation */
.hs-notif {
  box-shadow:
    0 4px 16px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition: box-shadow .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.hs-notif:hover {
  box-shadow:
    0 8px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.07);
  transform: translateY(-1px);
}

/* Story close button: backdrop pill */
.hs-story-close {
  box-shadow:
    0 2px 10px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* FAB: richer default glow (desktop/tablet) */
.hs-fab {
  box-shadow:
    0 6px 28px color-mix(in srgb, var(--accent) 38%, transparent),
    0 2px 6px rgba(0,0,0,.25),
    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:hover {
  box-shadow:
    0 8px 36px color-mix(in srgb, var(--accent) 50%, transparent),
    0 2px 8px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.25);
  transform: scale(1.04);
}

/* Reduced-motion guard for glass v2 additions */
@media (prefers-reduced-motion: reduce) {
  .hs-post,.hs-compose,.hs-notif,.hs-fab {
    transition: none !important;
    animation: none !important;
  }
}
