/* floating-hub.css — unified bottom-right launcher.
   Replaces the individually-positioned floating widgets (Aria chat, Journey
   pill, Admin FAB) with ONE speed-dial FAB that fans out a menu, so nothing
   overlaps in the corner. Aurora Glass palette (monochrome + glass). */

/* How far the corner widgets sit above the bottom edge.

   This is a variable rather than a hard-coded `bottom` so a page with its own
   bottom-edge control can push the corner up **without** having to out-specify
   or out-order this file. Hard-coding it caused a real bug: the History
   selection bar's `body.history-bulk-open #fhub { bottom: … }` had higher
   specificity, but this stylesheet is linked from the footer partial — i.e.
   AFTER the page's inline <style> — and `#fhub` here still won the ≤480px
   media rule, so the bar sat on top of the launcher.

   Raise `--fhub-bottom` on <body> (scoped to whatever state class you toggle)
   and every corner widget moves together. See docs/FLOATING_WIDGETS.md. */
:root {
  --fhub-bottom: 82px; /* clear the sticky-bottom-nav (~70px) */
}

#fhub {
  position: fixed;
  right: 16px;
  bottom: var(--fhub-bottom);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  pointer-events: none; /* let clicks fall through the gaps; children re-enable */
}
#fhub * { box-sizing: border-box; }
#fhub > * { pointer-events: auto; }
/* When the hub is closed (or disabled — the FAB is display:none below), nothing in
   the corner may be clickable: the menu still sits there invisibly at opacity:0 and
   would otherwise act as a ghost launcher over the page beneath it (the reported
   "no toggle but still opens on click" bug). The id here beats `#fhub > *` above;
   the open state (`#fhub.is-open .fhub-menu`) re-enables clicks. */
#fhub:not(.is-open) .fhub-menu,
#fhub:not(.is-open) .fhub-menu .fhub-item { pointer-events: none; }

/* ── Fan-out menu ───────────────────────────────────────────── */
.fhub-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .18s ease, transform .2s cubic-bezier(.34,1.4,.5,1);
}
#fhub.is-open .fhub-menu { opacity: 1; transform: none; pointer-events: auto; }

.fhub-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px 8px 8px;
  border-radius: 999px;
  border: 1px solid rgba(91, 91, 91, 0.32);
  background: var(--veil-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.fhub-item[hidden] { display: none; }
.fhub-item:hover {
  transform: translateX(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}
.fhub-item:active { transform: translateX(-3px) scale(0.98); }

.fhub-item-ico {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  color: var(--ink);
  background: linear-gradient(135deg, #828282, #919191);
}
.fhub-item--journey .fhub-item-ico { background: linear-gradient(135deg, #828282, #a44604); }
.fhub-item--admin   .fhub-item-ico { background: linear-gradient(135deg, #b4b4b4, #e3e3e3); }

.fhub-item-text { line-height: 1.15; text-align: left; font-size: 0.86rem; font-weight: 700; }
.fhub-item-sub  { display: block; font-size: 0.68rem; font-weight: 500; color: var(--ink-muted); margin-top: 1px; }

/* ── FAB ────────────────────────────────────────────────────── */
/* Temporarily hidden — floating hub disabled for now */
.fhub-fab { display: none !important; }
.fhub-fab {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: linear-gradient(135deg, #828282, #919191);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  transition: transform .18s ease, box-shadow .18s ease, background .25s ease;
}
.fhub-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16); }
.fhub-fab:active { transform: scale(0.96); }
.fhub-fab i { transition: transform .28s cubic-bezier(.34,1.4,.5,1); }
#fhub.is-open .fhub-fab { background: linear-gradient(135deg, #b3b3b3, #bdbdbd); }
#fhub.is-open .fhub-fab i { transform: rotate(135deg); }

/* Attention dot */
.fhub-dot {
  position: absolute; top: 3px; right: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #b40a27; border: 2px solid var(--line-soft);
  display: none;
}
#fhub.has-alert .fhub-dot { display: block; }

/* ── Take over the legacy standalone launchers once the hub is live ── */
body.fhub-ready #sa-launcher { display: none !important; }
body.fhub-ready .journey-pill { display: none !important; }
/* There is no legacy admin FAB to take over any more: the character page's
   `.ig-admin-fab` was removed so the owner's "Add a new image / video" button
   (`.cpm-fab`) is the page's only floating control. Admins reach the moderation
   sheet from "Admin actions" in the profile's ⋮ menu (and from this hub's Admin
   item, once `.fhub-fab` is un-hidden above). */

/* The Aria & Journey panels still open from their own containers; nudge them
   to the same corner as the hub so they rise cleanly above the FAB. */
body.fhub-ready #journey-widget { bottom: var(--fhub-bottom); right: 16px; }
body.fhub-ready #sa-widget { bottom: var(--fhub-bottom); right: 16px; }

/* Hide the whole hub on the active chat screen — the chat UI owns the corner. */
body.chat-active #fhub { display: none !important; }

@media (max-width: 480px) {
  :root { --fhub-bottom: 78px; }
  #fhub { right: 12px; }
  body.fhub-ready #journey-widget,
  body.fhub-ready #sa-widget { right: 12px; }
}
