/* ============================================================================
   AbiiApp App Shell (E0.3) — the floating glass dock + mobile top bar behavior.
   A frosted, floating dock with five evenly spaced slots and a raised brand
   Create button. Token driven (abii-tokens.css), light/dark/auto automatic.
   Mobile only: hidden at >= 992px where the desktop top nav remains.
   Hardened against theme CSS: every property the theme could leak into the
   dock (anchor styles, line-height, box-sizing) is reset explicitly.
   ========================================================================== */

/* App-wide type: Plus Jakarta Sans per the Stitch design system, previously only
   applied inside abii-auth.css's own screens -- the logged-in shell (feed, etc.)
   was still rendering in whatever stock WoWonder's body font-family happened to
   be. This is the one place that actually reaches every logged-in screen. */
body.abii-has-dock { font-family: var(--abii-font); }

/* Page background: stock style.css sets body's background from WoWonder's own
   admin-configurable --body-bg variable, not from the Stitch-matched --abii-bg
   token -- so the page rendered whatever gray the admin panel happened to have
   configured instead of the design's actual near-white. Same specificity fix
   as the font-family rule above (class beats the stock bare `body` selector). */
body.abii-has-dock { background: var(--abii-bg); }

/* ---- Floating glass dock ---- */
.abii-dock,
.abii-dock * { box-sizing: border-box; }

.abii-dock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 1050;                      /* above the legacy toolbar (1040) */
  display: none;                      /* shown on mobile only */
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 28px);
  max-width: 400px;
  height: 64px;
  padding: 0 8px;
  margin: 0;
  border-radius: 32px;
  background: color-mix(in srgb, var(--abii-surface) 82%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--abii-line) 70%, transparent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .08);
  animation: abii-dock-in .45s var(--abii-ease);
}
@keyframes abii-dock-in {
  from { transform: translate(-50%, 90px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .abii-dock { background: var(--abii-surface); border-color: var(--abii-line); }
}
body.night-mode .abii-dock {
  /* was a bespoke #16181C — near-identical to --abii-surface-2, switched to the token so the
     dock's frosted panel comes from the same single source of truth as every other surface */
  background: color-mix(in srgb, var(--abii-surface-2) 86%, transparent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .6), inset 0 0 0 .5px rgba(255, 255, 255, .06);
}

@media (max-width: 991px) {
  .abii-dock { display: flex; }
  body.abii-has-dock { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  /* The dock is the single navigation surface on mobile. Retire every legacy
     floating / corner widget so nothing peeks out from behind the dock.
     - tag_create_dropup: old floating "+" create button (bottom-right)
     - chat-container / chat-opacity / chat_main: desktop chat side-rail + popups
     - tag_chat_side_btn: the small round chat launcher at the rail corner
     Chat lives in the dock's Messages tab; create lives in the dock's + button. */
  body.abii-has-dock .tag_create_dropup,
  body.abii-has-dock .chat-container,
  body.abii-has-dock .chat-opacity,
  body.abii-has-dock .chat_main,
  body.abii-has-dock .tag_chat_side_btn { display: none !important; }

  /* Neutralize WoWonder's icon strip (.tag_hdr_right): keep it in the DOM so its
     dropdown menus (account, notifications) can still open, but give it no visual
     footprint. Our own top-right avatar (.abii-account) and the dock replace it. */
  body.abii-has-dock .tag_hdr_right {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }
  body.abii-has-dock .tag_hdr_right .tag_hdr_droptoggle,
  body.abii-has-dock .tag_hdr_right .tag_hdr_user_droptoggle { display: none !important; }
  body.abii-has-dock .tag_hdr_right .dropdown-menu { pointer-events: auto !important; }

  /* Header search is redundant with the dock's Search tab */
  body.abii-has-dock .search-container { display: none !important; }

  /* Mobile-first: remove the heavy top header bar entirely. The dock plus a unified
     top app bar (.abii-topbar: menu, wordmark, avatar) replace it, like X / Instagram.
     loggedin-header (which holds the account + notification menus) is outside <nav>,
     so those menus keep working. */
  body.abii-has-dock nav.navbar { display: none !important; }
  body.abii-has-dock { padding-top: calc(64px + env(safe-area-inset-top)) !important; }
}

/* ---- Top app bar: one unified fixed bar (Stitch TopAppBar), not two independently
   floating corner buttons. Transparent by default; gains a blurred surface background
   and hairline once the page scrolls past 20px (JS toggles .abii-topbar--scrolled,
   container.phtml). ---- */
.abii-topbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1052;
  display: none;                      /* mobile only */
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 64px;
  padding: calc(env(safe-area-inset-top)) 16px 0;
  background: transparent;
  transition: background var(--abii-t-med) var(--abii-ease), backdrop-filter var(--abii-t-med) var(--abii-ease), box-shadow var(--abii-t-med) var(--abii-ease);
}
@media (max-width: 991px) { .abii-topbar { display: flex; } }
.abii-topbar--scrolled {
  background: color-mix(in srgb, var(--abii-surface) 80%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--abii-line);
}
.abii-topbar__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Top-right account avatar (X-style). Real photo if the user has one; otherwise a
   clean person glyph like Instagram/X, never WoWonder's gray default image. Plain
   icon-only treatment per Stitch -- no button background/shadow of its own, the
   bar behind it provides the surface. */
.abii-account {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: var(--abii-surface-2);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--abii-t-fast) var(--abii-ease);
}
.abii-account:active { transform: scale(.92); }
.abii-account.active { box-shadow: 0 0 0 2px var(--abii-brand); }
.abii-account img { width: 100%; height: 100%; object-fit: cover; }
.abii-account__glyph { display: flex; align-items: center; justify-content: center; }
.abii-account__glyph svg { width: 22px; height: 22px; color: var(--abii-muted); }

/* Top-left menu button (opens the nav sidebar). Brand-colored icon, no background,
   matching Stitch's plain `text-primary` menu glyph. */
.abii-menu {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--abii-brand) !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--abii-t-fast) var(--abii-ease);
}
.abii-menu:active { transform: scale(.92); }
.abii-menu svg { width: 24px; height: 24px; }

/* Wordmark: home feed only, matching the reference design; other pages already show
   a page title via the sub-page bar instead. Stitch's display-lg type: 32px/40px,
   800 weight, tight tracking. */
.abii-wordmark {
  display: flex;
  align-items: center;
  font-size: 32px;
  line-height: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--abii-brand) !important;
}

/* The dock and top bar are position:fixed with z-index 1050-1052 so they float above
   normal scrolled content — but that also puts them above Bootstrap's modals (z-index
   ~1050), so a full-screen modal like the post composer would show these floating on
   top of its own header. Bootstrap adds .modal-open to <body> for every modal it
   shows; hide our shell chrome for the duration so any current or future modal takes
   the full screen cleanly. */
body.modal-open .abii-dock,
body.modal-open .abii-topbar,
body.no_scroll .abii-dock,
body.no_scroll .abii-topbar { display: none !important; }

/* Any subpage with its own back+title header (.abii-subpage-bar, used by the
   comments page, story creator, close friends picker, and any future subpage
   built the same way) already provides its own back navigation, so the
   global top bar is always redundant there and would otherwise float on
   top of that header. One general rule instead of listing pages by name. */
body:has(.abii-subpage-bar) .abii-topbar,
body:has(.abii-subpage-bar__back) .abii-topbar { display: none !important; }
/* Retire the legacy fixed bottom toolbar everywhere the dock exists */
body.abii-has-dock .tag_sec_toolbar { display: none !important; }

/* Tabs: five equal slots, generous touch area */
.abii-dock a.abii-dock__tab {
  flex: 1 1 0;
  position: relative;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 26px;
  margin: 0;
  padding: 0;
  line-height: 1;
  text-decoration: none;
  color: var(--abii-muted);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--abii-t-fast) var(--abii-ease), transform var(--abii-t-fast) var(--abii-ease);
}
.abii-dock a.abii-dock__tab:hover,
.abii-dock a.abii-dock__tab:focus { color: var(--abii-muted); text-decoration: none; }
.abii-dock a.abii-dock__tab:active { transform: scale(.88); }
.abii-dock__tab svg { width: 25px; height: 25px; position: relative; z-index: 1; display: block; }
.abii-dock__tab .ic-fill { display: none; }

/* Active: solid brand-filled pill, white icon -- Stitch's bottom-nav active state
   (bg-primary-container text-on-primary-container), a solid fill rather than the
   soft tint used for the desktop left rail's active state. */
.abii-dock a.abii-dock__tab.active,
.abii-dock a.abii-dock__tab.active:hover { color: var(--abii-on-brand); }
.abii-dock__tab.active .ic-line { display: none; }
.abii-dock__tab.active .ic-fill { display: block; }
.abii-dock__tab.active::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 21px;
  background: var(--abii-brand);
  animation: abii-pill-in var(--abii-t-med) var(--abii-ease);
}
@keyframes abii-pill-in {
  from { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);  opacity: 1; }
}
/* On the home page, Tailwind's bg-primary-container utility on the tab itself
   already provides the active pill (Stitch's exact treatment) -- this custom
   pseudo-element pill would otherwise double up behind it. */
body.abii-tw .abii-dock__tab.active::before { display: none; }
/* The floating-pill .abii-dock rule above sets left:50% + transform:translateX(-50%)
   + max-width:400px to center a small pill. Tailwind's left-0/w-full classes on the
   home page override `left` and `width`, but nothing in them touches `transform` or
   `max-width` (different properties), so those two kept applying to the new
   full-width bar -- shifting it 50% of its own (now much larger) width off-screen
   to the left and clipping it to 400px. Reset explicitly. */
body.abii-tw .abii-dock {
  transform: none !important;
  max-width: none !important;
  border-radius: 0 !important;
  animation: none !important;
}

/* Account tab: user's avatar, opens the account menu */
.abii-dock__me .abii-dock__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  border: 2px solid transparent;
  transition: border-color var(--abii-t-fast) var(--abii-ease);
}
.abii-dock__me.active { color: var(--abii-brand); }
.abii-dock__me.active .abii-dock__avatar { border-color: var(--abii-brand); }
.abii-dock__me.active::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 21px;
  background: var(--abii-brand-soft);
}

/* Unread badge dot */
.abii-dock__tab .abii-badge-dot {
  position: absolute;
  top: 9px;
  left: calc(50% + 6px);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--abii-brand);
  border: 2px solid var(--abii-surface);
  z-index: 2;
}

/* ---- Mobile top bar: hide on scroll down, return on scroll up ----
   Applied by JS only when the theme header is actually fixed-positioned. */
@media (max-width: 991px) {
  nav.navbar.abii-topbar-anim {
    transition: transform .28s var(--abii-ease);
    will-change: transform;
  }
  nav.navbar.abii-topbar-hidden {
    transform: translateY(-110%);
  }
}

/* ---- Sub-page bar: back arrow + title, for drill-in screens (post detail today,
   reusable for settings sub-pages etc. later). The main nav is hidden on mobile app-wide
   (E0.3), so a drill-in screen needs its own way back. ---- */
.abii-subpage-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 40;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
  background: var(--abii-surface);
  border-bottom: 1px solid var(--abii-line);
}
@media (min-width: 992px) { .abii-subpage-bar { display: none; } }
.abii-subpage-bar__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--abii-ink);
  flex: 0 0 auto;
  transition: background var(--abii-t-fast) var(--abii-ease);
}
.abii-subpage-bar__back:active { background: var(--abii-surface-2); }
.abii-subpage-bar__title {
  font-weight: 700;
  font-size: 16px;
  color: var(--abii-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Story (single post) page: full width on mobile, no desktop sidebar clutter under a
   focused comments view. */
@media (max-width: 991px) {
  body[data-page="story"] .sidebar { display: none !important; }
}