/* uplift-footer.css — SHARED floating edge-glass status footer.
 *
 * Uplift port P1 — ported from mocks/uplift-chrome-ceremonies-mock.html (.base),
 * per STARFORGE_UI_UPLIFT_DESIGN_LOCK_2026_07_03.md §3e (Director-locked pattern):
 *   • The bar FLOATS over content as a fixed overlay — out of layout flow, the
 *     window never gains a scroll row; content extends beneath it.
 *   • COLLAPSED (default): near-fully transparent middle (pointer-events: none);
 *     ONLY the edges stay translucent glass — Thermal chip far-left, Eva chip
 *     far-right. Content is never obscured.
 *   • Hover/tap within ~80px of the bottom REVEALS the frosted full bar: status
 *     cells + Vey liaison chip + Eva chip — still floating.
 *   • Attention semantics tint/glow the edge chips while collapsed (Eva breathes
 *     red while a seal call is pending — seal attention is HERS, never the top
 *     strip's).
 *   • Reduced motion = instant swaps (every transition/animation lives inside
 *     the no-preference gate).
 *
 * Vocabulary: consumes uplift-foundation.css (--u-* easings; the chips carry
 * .u-frost in markup) + tokens.css vars. All new classes namespaced .uf-* /
 * .uf__* (zero-collision rule). Markup is built by src/upliftFooter.js.
 */

.uf {
  --uf-crit: #ff6b6b;
  --uf-line: rgba(150, 160, 220, .16);
  position: fixed; left: 16px; right: 16px; bottom: 10px;
  /* Above the hub surfaces + their in-view overlays (workshop modals z60,
   * oversight pops z46); BELOW the entered-stage takeover (#sfes z1200) and the
   * shared Eva side panel (.sf-evapanel z1300). Entered-stage keeps its own turn
   * footer until P4 decides its floating-bar treatment. */
  z-index: 1150;
  pointer-events: none;
  font: 13px/1.45 var(--sans, system-ui, sans-serif);
  color: var(--ink, #e8eaff);
}
.uf[hidden] { display: none; }

/* ── collapsed edge layer — two small glass chips, nothing between them ───── */
.uf__edges { display: flex; align-items: flex-end; justify-content: space-between; }
.uf-chip {
  display: inline-flex; align-items: center; gap: 7px; pointer-events: auto;
  border-radius: 999px; padding: 4px 12px; position: relative;
  font: 600 10px var(--mono, monospace); letter-spacing: .08em; color: var(--ink2, #aeb4d8);
}
.uf-chip__v { color: var(--cyan, #36d6e0); font-variant-numeric: tabular-nums; }
button.uf-chip { cursor: pointer; appearance: none; }
.uf-chip--eva { font: 600 10.5px var(--sans, system-ui); color: var(--ink, #e8eaff); padding: 3px 12px 3px 4px; }

/* Eva orb (matches .sf-evabtn__orb — one Eva, one look) */
.uf-orb {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 32%, #cdd0ff, #8b8bff 55%, #5a5ad6);
  box-shadow: 0 0 10px rgba(139, 139, 255, .55);
}

/* CSS-drawn thermal gauge glyph — cyan nominal; tints amber/red as thermal climbs */
.uf-gtherm { width: 13px; height: 13px; border-radius: 50%; flex: none; border: 2px solid rgba(54, 214, 224, .45); position: relative; }
.uf-gtherm::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--cyan, #36d6e0); box-shadow: 0 0 7px rgba(54, 214, 224, .7); }
.uf-chip--therm.warm .uf-gtherm { border-color: rgba(255, 178, 77, .5); }
.uf-chip--therm.warm .uf-gtherm::after { background: var(--heat, #ffb24d); box-shadow: 0 0 7px rgba(255, 178, 77, .7); }
.uf-chip--therm.warm .uf-chip__v { color: var(--heat, #ffb24d); }
.uf-chip--therm.hot .uf-gtherm { border-color: rgba(255, 107, 107, .55); }
.uf-chip--therm.hot .uf-gtherm::after { background: var(--uf-crit); box-shadow: 0 0 8px rgba(255, 107, 107, .8); }
.uf-chip--therm.hot .uf-chip__v { color: var(--uf-crit); }
.uf-chip--therm.hot { border-color: rgba(255, 107, 107, .5); }

/* attention badge dot + red glow — Eva carries the seal call (chrome never does) */
.uf-bd {
  position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--uf-crit); box-shadow: 0 0 8px rgba(255, 107, 107, .85); display: none;
}
.attn .uf-bd { display: block; }
.uf-chip--eva.attn, .uf-cast--eva.attn { border-color: rgba(255, 107, 107, .5); box-shadow: 0 0 16px -4px var(--uf-crit); }

/* ── revealed full bar — floating frost, overlays the edge chips while open ── */
.uf__full {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px; padding: 5px 10px;
  pointer-events: auto; opacity: 0; visibility: hidden;
}
.uf.open .uf__full { opacity: 1; visibility: visible; }
.uf.open .uf__edges { opacity: 0; visibility: hidden; }

.uf__cells { flex: 1; display: flex; align-items: center; min-width: 0; }
.uf-cell { flex: 1; text-align: center; border-left: 1px solid var(--uf-line); min-width: 0; }
.uf-cell:first-child { border-left: 0; }
.uf-cell__n { font: 600 17px var(--u-font-hud, var(--sans, system-ui)); font-variant-numeric: tabular-nums; }
.uf-cell__n.h { color: var(--heat, #ffb24d); }
.uf-cell__n.c { color: var(--uf-crit); }
.uf-cell__n.cy { color: var(--cyan, #36d6e0); }
.uf-cell__l { font: 600 8px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3, #6b7099); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* cast chips — Vey liaison + Eva ambient, right end of the full bar */
.uf__cast { display: flex; align-items: center; gap: 7px; flex: none; padding-left: 12px; border-left: 1px solid var(--uf-line); }
.uf-cast {
  display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 2px 10px 2px 3px;
  font: 600 10.5px var(--sans, system-ui); color: var(--ink, #e8eaff); cursor: pointer;
  border: 1px solid var(--uf-line); background: rgba(10, 14, 30, .45); position: relative; appearance: none;
}
.uf-cast small { font: 600 7.5px var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3, #6b7099); }
.uf-tok {
  width: 22px; height: 22px; border-radius: 50%; flex: none; overflow: hidden;
  border: 1.5px solid var(--violet-line, rgba(139, 139, 255, .22)); background: #0a0e1e;
  display: grid; place-items: center;
}
.uf-tok img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uf-cast .uf-orb { width: 20px; height: 20px; }

/* ── motion — ALL of it inside the gate; reduced motion = instant swaps ────── */
@media (prefers-reduced-motion: no-preference) {
  .uf__full, .uf__edges {
    transition: opacity .32s var(--u-ease-calm, cubic-bezier(.4, 0, .2, 1)),
                visibility .32s var(--u-ease-calm, cubic-bezier(.4, 0, .2, 1));
  }
  /* Eva's seal attention breathes red (edge chip + full-bar chip) */
  .uf-chip--eva.attn, .uf-cast--eva.attn { animation: uf-evaglow 2.4s ease-in-out infinite; }
  @keyframes uf-evaglow {
    0%, 100% { box-shadow: 0 0 18px -4px var(--uf-crit); }
    50% { box-shadow: 0 0 5px -2px var(--uf-crit); }
  }
  /* thermal running hot pulses too — same idiom, amber-red */
  .uf-chip--therm.hot { animation: uf-thermglow 2.4s ease-in-out infinite; }
  @keyframes uf-thermglow {
    0%, 100% { box-shadow: 0 0 16px -4px var(--uf-crit); }
    50% { box-shadow: 0 0 4px -2px var(--uf-crit); }
  }
}