/* chrome.css — SHARED page-level chrome (rework 2026-07-04): the header CAPSULE
 * (.sf-caps) + the right SIDE PANEL (.sf-side) + two floating EDGE CHIPS (.sf-fchip).
 * Replaces styles/uplift-footer.css's bottom bar. The panel's OPEN geometry matches
 * the old .sf-evapanel exactly (top:62 right:0 bottom:14 width:300) so "dimensions +
 * positioning don't change"; PEEK is the same anchor, narrower + more translucent —
 * the ported footer reveal effect. Mounted on document.body (chrome.js). */

/* ── raised capsule around the header right-cluster ── */
.sf-caps {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--panel-line, rgba(150,160,220,.16));
  background: linear-gradient(180deg, rgba(22,28,52,.62), rgba(12,16,32,.62));
  box-shadow: 0 2px 9px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .18s, box-shadow .18s;
}
.sf-caps:hover {
  border-color: var(--violet-line, rgba(139,139,255,.34));
  box-shadow: 0 3px 15px rgba(0,0,0,.46), 0 0 16px rgba(139,139,255,.2), inset 0 1px 0 rgba(255,255,255,.07);
}

/* ── right side panel — hidden → peek → open ── */
.sf-side {
  position: fixed; top: 62px; right: 0; bottom: 14px; width: 300px; z-index: 1300;
  border: 1px solid var(--panel-line, rgba(150,160,220,.14)); border-right: 0;
  border-radius: 16px 0 0 16px;
  background: rgba(8,11,24,.94); backdrop-filter: blur(14px);
  padding: 16px 18px; display: flex; flex-direction: column;
  box-shadow: -20px 0 50px rgba(0,0,0,.5);
  transform: translateX(108%);
  transition: transform .32s cubic-bezier(.4,0,.2,1), width .26s ease, background .26s ease, backdrop-filter .26s ease;
}
.sf-side[data-state="hidden"] { transform: translateX(108%); pointer-events: none; }
.sf-side[data-state="peek"]   { transform: translateX(0); width: 238px; background: rgba(8,11,24,.62); backdrop-filter: blur(8px); }
.sf-side[data-state="open"]   { transform: translateX(0); width: 300px; }
.sf-side.attn { border-color: var(--violet-line, rgba(139,139,255,.4)); box-shadow: -20px 0 50px rgba(0,0,0,.5), 0 0 24px rgba(139,139,255,.22); }

.sf-side__head { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-bottom: 13px; }
.sf-side__orb { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(circle at 35% 32%, #cdd0ff, #8b8bff 55%, #5a5ad6); box-shadow: 0 0 10px rgba(139,139,255,.6); }
.sf-side.attn .sf-side__orb { box-shadow: 0 0 14px rgba(139,139,255,.95); }
.sf-side__ttl { flex: 1; min-width: 0; font: 700 11px var(--sans, system-ui); color: var(--violet, #8b8bff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-side__x { border: 0; background: none; color: var(--ink3, #6b7099); font-size: 15px; cursor: pointer; line-height: 1; } .sf-side__x:hover { color: var(--ink, #eef0ff); }
.sf-side__body { flex: 1; min-height: 0; overflow-y: auto; }

.sf-side__msg { display: flex; gap: 11px; margin-top: 2px; }
.sf-side__mo { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(circle at 35% 32%, #cdd0ff, #8b8bff 55%, #5a5ad6); box-shadow: 0 0 18px rgba(139,139,255,.5); animation: sfSideBreathe 3.5s ease-in-out infinite; }
.sf-side__msg > span:last-child { font-size: 12.5px; line-height: 1.5; color: var(--ink2, #aeb4d8); }
.sf-side__grp { font: 600 8.5px var(--mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3, #6b7099); margin: 16px 0 8px; }
.sf-side__roles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sf-side__role { font: 600 8.5px var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2, #aeb4d8); border: 1px solid var(--panel-line, rgba(150,160,220,.14)); border-radius: 8px; padding: 7px 8px; display: flex; align-items: center; gap: 6px; }
.sf-side__role i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan, #36d6e0); }
.sf-side__feed { margin-top: 2px; }
.sf-side__meet { font-size: 12px; color: var(--ink2, #aeb4d8); line-height: 1.5; } .sf-side__meet b { color: var(--ink, #eef0ff); } .sf-side__hot { color: var(--heat, #ffb24d); }
.sf-side__cells { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sf-side__cell { border: 1px solid var(--panel-line, rgba(150,160,220,.14)); border-radius: 9px; padding: 8px 9px; }
.sf-side__cellv { font: 700 15px var(--sans, system-ui); color: var(--ink, #eef0ff); } .sf-side__cellv.cy { color: var(--cyan, #36d6e0); } .sf-side__cellv.h { color: var(--heat, #ffb24d); } .sf-side__cellv.c { color: var(--crit, #ff6b6b); }
.sf-side__celll { font: 600 8px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3, #6b7099); margin-top: 2px; }
.sf-side__quiet { color: var(--ink3, #6b7099); font-style: italic; font-size: 11.5px; }

/* ── floating edge chips — thermal bottom-LEFT, liaison bottom-RIGHT ── */
.sf-fchip {
  position: fixed; bottom: 16px; z-index: 1250;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--panel-line, rgba(150,160,220,.16)); background: rgba(10,14,30,.72);
  color: var(--ink2, #aeb4d8); font: 600 10px var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.42); transition: border-color .18s, color .18s, box-shadow .18s;
}
.sf-fchip:hover { border-color: var(--violet-line, rgba(139,139,255,.34)); color: var(--ink, #eef0ff); box-shadow: 0 6px 22px rgba(0,0,0,.5), 0 0 16px rgba(139,139,255,.2); }
.sf-fchip--therm { left: 16px; }
.sf-fchip--liaison { right: 16px; }
/* in-capsule variant (B1 2026-07-07): the chips ride the header capsule (the side-panel
   trigger section), not the screen edges — compact, in-flow, same content + handlers. */
.sf-fchip--cap { position: static; bottom: auto; left: auto; right: auto; padding: 4px 10px; box-shadow: none; }
.sf-fchip--cap.sf-fchip--liaison .sf-fchip__l { display: inline; }
.sf-fchip__g { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan, #36d6e0); box-shadow: 0 0 8px var(--cyan, #36d6e0); flex: 0 0 auto; }
/* THERMAL FLAME (B2 2026-07-08) — the glyph replaces the word. Its idle flicker/pulse is
   SCALED by --tv (live thermal 0..1): pace quickens, scale + glow grow; warm = amber;
   hot ≥90% = crit-red UNSTABLE jitter (running too hot, burning fuel). */
.sf-fchip__flame { width: 11px; height: 13px; flex: 0 0 auto; fill: var(--cyan, #36d6e0);
  filter: drop-shadow(0 0 calc(2px + var(--tv, 0) * 6px) currentColor); color: var(--cyan, #36d6e0);
  transform-origin: 50% 85%;
  animation: sfFlameIdle calc(2.8s - var(--tv, 0) * 2s) ease-in-out infinite; }
.sf-fchip--therm.warm .sf-fchip__flame { fill: var(--heat, #ffb24d); color: var(--heat, #ffb24d); }
.sf-fchip--therm.hot .sf-fchip__flame { fill: var(--crit, #ff6b6b); color: var(--crit, #ff6b6b);
  animation: sfFlameUnstable .5s steps(3, end) infinite; }
@keyframes sfFlameIdle {
  0%, 100% { transform: scale(1); opacity: .82; }
  50% { transform: scale(calc(1 + var(--tv, 0) * .28)); opacity: 1; } }
@keyframes sfFlameUnstable {
  0% { transform: scale(1.05) rotate(-4deg); }
  50% { transform: scale(1.22) rotate(4deg); opacity: 1; }
  100% { transform: scale(.94) rotate(-2deg); opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .sf-fchip__flame { animation: none !important; } }
.sf-fchip__v { font: 700 11px var(--sans, system-ui); color: var(--ink, #eef0ff); letter-spacing: 0; }
.sf-fchip__tok { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; } .sf-fchip__tok img { width: 100%; height: 100%; object-fit: cover; }
.sf-fchip__l small { opacity: .6; }

@keyframes sfSideBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes sfSidePulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .sf-side__mo, .sf-fchip--therm.hot .sf-fchip__g { animation: none; } }