/* GEN-EXP-001 · Live Work inside Genesis Messenger — calm, real-change motion only.
   Visibility hardening: Live Work is a Genesis-wide surface, independent of any
   selected conversation. It sits at the top of the Messenger body so current
   staff work is the FIRST thing visible during execution.
   VISUAL RESTORATION: styled exclusively from the verified Messenger token
   contract (genesis-messenger.css · Apple-neutral dark, SF typography, Apple
   blue accent, system status colors). No foreign palettes. */

/* --- Live Work bar container (body level, always present) ---
   COMPOSITION RESTORATION (023b target): the era's live surface was a COMPACT
   FIXED OVERLAY on the right (see 023b genesis-messenger-live-activity.css:
   `position:fixed; right:24px; top:~158px; width:min(420px,…)`), floating over
   the conversation — NOT a full-width slab pushing Messenger below the fold.
   The conversation-first hierarchy is restored by returning Live Work to that
   treatment; the bar itself reserves only the toggle row. */
.gm-live-work-bar { position: absolute; right: 24px; top: 170px; width: min(420px, 60vw); z-index: 45; padding: 0; margin: 0; }
.gm-live-work-bar:not([hidden]) { pointer-events: none; }
.gm-live-work-bar > * { pointer-events: auto; }
.gm-live-work-announce {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Card --- */
.gm-live-work {
  margin: 4px 0 0;
  background: color-mix(in srgb, var(--gm-raised, #2c2c2e) 94%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--gm-border-subtle, rgba(255,255,255,.09));
  border-radius: 14px;
  box-shadow: var(--gm-shadow, 0 18px 48px rgba(0,0,0,.5));
  padding: 14px 16px;
}
.gm-live-work--changed { animation: gmLiveWorkPulse 0.9s ease-out 1; }
@keyframes gmLiveWorkPulse {
  0% { box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.4); }
  100% { box-shadow: 0 0 0 4px rgba(10, 132, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .gm-live-work--changed { animation: none; }
}

/* --- Head row: kicker + big state + time --- */
.gm-live-work-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gm-live-work-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gm-muted, #8e8e93); }
.gm-live-work-time { margin-left: auto; font-size: 13px; color: var(--gm-muted, #8e8e93); font-variant-numeric: tabular-nums; }

/* State: large, unmistakable — not a tiny pill */
.gm-live-work-state {
  font-size: 20px; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 16px; border-radius: var(--gm-radius-sm, 12px);
  border: 2px solid var(--gm-border, #3a3a3c); background: var(--gm-raised, #2c2c2e);
  color: var(--gm-text, #f5f5f7);
}
.gm-live-work-state--ACTIVE, .gm-live-work-state--QUEUED { border-color: var(--gm-accent, #0a84ff); color: var(--gm-accent-strong, #6db2ff); background: var(--gm-accent-soft, rgba(10,132,255,.15)); }
.gm-live-work-state--BLOCKED { border-color: var(--gm-danger, #ff453a); color: var(--gm-danger, #ff453a); background: var(--gm-danger-soft, rgba(255,69,58,.13)); }
.gm-live-work-state--COMPLETED, .gm-live-work-state--VERIFIED, .gm-live-work-state--ACCEPTED, .gm-live-work-state--DEPLOYED { border-color: var(--gm-success, #30d158); color: var(--gm-success, #30d158); background: var(--gm-success-soft, rgba(48,209,88,.14)); }

/* --- Who --- */
.gm-live-work-who { margin: 10px 0 2px; }
.gm-live-work-who strong { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }
.gm-live-work-role { color: var(--gm-muted, #8e8e93); font-size: 15px; margin-left: 10px; }

/* --- Current action: the plain-language sentence, large --- */
.gm-live-work-what { margin: 6px 0; font-size: 18px; line-height: 1.45; color: var(--gm-text, #f5f5f7); }
.gm-live-work-handoff {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--gm-secondary, #c7c7cc); border: 1px solid var(--gm-border, #3a3a3c);
  border-radius: 6px; padding: 1px 8px; margin-right: 10px;
}

/* --- Compact scoreboard (STATE | % | ETA, then bar, then action) ---
   Low-character primary copy; full-meaning strings ride along sr-only. */
.gm-live-work-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.gm-live-work-scoreboard {
  display: flex; align-items: baseline; gap: 16px; margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.gm-live-work-scorestate {
  font-size: 20px; font-weight: 650; letter-spacing: 0.06em;
  color: var(--gm-text, #f5f5f7);
}
.gm-live-work-scorepct {
  font-size: 20px; font-weight: 650; color: var(--gm-accent-strong, #6db2ff);
}
.gm-live-work-scorepct--unknown { color: var(--gm-muted, #8e8e93); font-weight: 700; font-size: 16px; }
.gm-live-work-scoreeta {
  margin-left: auto; font-size: 15px; font-weight: 650; color: var(--gm-muted, #8e8e93);
  font-variant-numeric: tabular-nums;
}
.gm-live-work-progressbar {
  height: 14px; border-radius: var(--gm-radius-pill, 999px); overflow: hidden;
  border: 1px solid var(--gm-border, #3a3a3c); background: var(--gm-inset, #141416);
  margin: 0 0 10px;
}
.gm-live-work-progressbar--indeterminate { opacity: 0.55; }
.gm-live-work-progressfill {
  height: 100%; border-radius: var(--gm-radius-pill, 999px); background: var(--gm-accent, #0a84ff);
  transition: width 0.6s ease-out; /* fires only when a real event changes the value */
}
@media (prefers-reduced-motion: reduce) {
  .gm-live-work-progressfill { transition: none; }
}

/* --- Narrow: STATE + % first, ETA wraps beneath, bar keeps full width --- */
@media (max-width: 720px) {
  .gm-live-work-scoreboard { flex-wrap: wrap; row-gap: 2px; }
  .gm-live-work-scoreeta { flex-basis: 100%; margin-left: 0; }
}

/* --- BLOCKED: impossible to miss, distinct from ACTIVE --- */
.gm-live-work-blocked {
  margin: 10px 0 2px; font-size: 16px; line-height: 1.45; color: var(--gm-text, #f5f5f7);
  border: 2px solid var(--gm-danger, #ff453a); border-radius: var(--gm-radius-sm, 12px);
  padding: 10px 14px; background: var(--gm-danger-soft, rgba(255,69,58,.13));
}
.gm-live-work-blocked strong, .gm-live-work-blocked b { color: var(--gm-danger, #ff453a); }
.gm-live-work-owner { color: var(--gm-muted, #8e8e93); }

/* --- Next handoff --- */
.gm-live-work-next { margin: 8px 0 0; font-size: 16px; color: var(--gm-text, #f5f5f7); }
.gm-live-work-next span {
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  margin-right: 8px; color: var(--gm-success, #30d158); font-weight: 700;
}

/* --- Empty / quiet states --- */
.gm-live-work-empty { margin: 0; font-size: 15px; color: var(--gm-muted, #8e8e93); }

/* --- Secondary trail --- */
.gm-live-work-details { margin-top: 12px; }
.gm-live-work-details summary {
  cursor: pointer; font-size: 14px; color: var(--gm-muted, #8e8e93);
  border-radius: 6px; padding: 4px 8px; display: inline-block;
}
.gm-live-work-details summary:hover { color: var(--gm-text, #f5f5f7); }
.gm-live-work-details summary:focus-visible { outline: 3px solid var(--gm-accent, #0a84ff); outline-offset: 2px; }
.gm-live-work-trail { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.gm-live-work-trail-item { display: flex; gap: 8px; align-items: baseline; font-size: 14px; flex-wrap: wrap; }
.gm-live-work-trail-item time { color: var(--gm-muted, #8e8e93); font-size: 12px; font-variant-numeric: tabular-nums; }
.gm-live-work-trail .gm-live-work-state { font-size: 11px; font-weight: 700; padding: 0 8px; border-width: 1px; }

/* --- Toggle button: reachable, visible focus --- */
.gm-live-work-toggle { margin-bottom: 8px; }
.gm-live-work-toggle:focus-visible { outline: 3px solid var(--gm-accent, #0a84ff); outline-offset: 3px; }

/* --- Narrow viewport: the overlay rejoins the flow and keeps hierarchy readable --- */
@media (max-width: 980px) {
  .gm-live-work-bar { position: static; width: auto; padding: 8px 14px 0; }
  .gm-live-work-bar:not([hidden]) { pointer-events: auto; }
  .gm-live-work { padding: 12px 14px; }
  .gm-live-work-state { font-size: 17px; }
  .gm-live-work-what { font-size: 16px; }
  .gm-live-work-who strong { font-size: 17px; }
}