/* ════════════════════════════════════════════════════════════════════
   AGENT BAR — universal voice + text command surface.
   Pure liquid glass throughout (translucent white + heavy blur, no solid
   fills). Scoped to #agentBtn and the #agent* overlays so nothing bleeds.
   ════════════════════════════════════════════════════════════════════ */

/* ── the header circle (matches sound/theme/mind chrome) ───────────── */
#agentBtn.agent-circle {
  width: 34px !important; height: 34px !important; padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  position: relative !important; overflow: visible !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  cursor: pointer !important;
  transition: background .2s ease, border-color .2s ease !important;
}
#agentBtn.agent-circle:hover {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .40) !important;
}
#agentBtn[data-state="listening"].agent-circle {
  background: rgba(127, 233, 195, .14) !important;
  border-color: rgba(127, 233, 195, .55) !important;
}
#agentBtn .ico {
  position: relative !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  width: 26px !important; height: 26px !important;
  background: transparent !important; animation: none !important; transform: none !important;
}
#agentBtn:hover .ico { transform: none !important; }

/* ── symbol states ─────────────────────────────────────────────────── */
#agentBtn .ag-ring { opacity: 0; transform-box: fill-box; transform-origin: center; }
#agentBtn .ag-orbit { opacity: 0; transform-box: fill-box; transform-origin: 20px 20px; }
#agentBtn .ag-mic { transform-box: fill-box; transform-origin: center; animation: agMicBreathe 3.2s ease-in-out infinite; }

#agentBtn[data-state="listening"] .ag-ring { opacity: 1; animation: agRipple 2.2s ease-out infinite; }
#agentBtn[data-state="listening"] .ag-mic { animation: agMicPulse .9s ease-in-out infinite; }
#agentBtn[data-state="active"] .ag-orbit { opacity: 1; animation: agOrbit 2.4s linear infinite; }

@keyframes agMicBreathe { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes agMicPulse { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1.12); } }
@keyframes agRipple { 0% { transform: scale(.18); opacity: .85; } 70% { opacity: .15; } 100% { transform: scale(1); opacity: 0; } }
@keyframes agOrbit { to { transform: rotate(360deg); } }

/* tooltip — same recipe as the other circles */
#agentBtn .agent-tip {
  position: absolute !important; top: calc(100% + 6px) !important;
  left: 50% !important; transform: translateX(-50%) translateY(-4px) !important;
  white-space: nowrap !important; padding: 6px 10px !important; border-radius: 999px !important;
  background: rgba(8, 8, 12, .78) !important; border: 1px solid rgba(255, 255, 255, .18) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important; backdrop-filter: blur(20px) saturate(1.4) !important;
  color: #fff !important; font-family: var(--font-display) !important;
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em !important;
  opacity: 0 !important; pointer-events: none !important;
  transition: opacity .2s ease, transform .2s ease !important; z-index: 50 !important;
}
#agentBtn:hover .agent-tip,
#agentBtn:focus-visible .agent-tip {
  opacity: 1 !important; transform: translateX(-50%) translateY(0) !important;
}
/* …but never alongside the live missions panel — when something is live,
   hover shows the panel instead and the tip stays hidden. */
#agentBtn.ab-panel-open .agent-tip { opacity: 0 !important; }
/* mission-count badge */
#agentBtn .agent-badge {
  position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: #1D9E75; color: #fff; font-family: var(--font-display);
  font-size: 9px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35);
}

/* ── shared glass surfaces ─────────────────────────────────────────── */
.ab-glass {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .20);
  -webkit-backdrop-filter: blur(40px) saturate(1.7); backdrop-filter: blur(40px) saturate(1.7);
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .18);
  color: #fff; font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif;
}

/* every agent surface renders upright — never italic */
#agentBtn, #agentVoice, #agentText, #agentConfirm, #agentMissions, #agentNotifs,
#agentVoice *, #agentText *, #agentConfirm *, #agentMissions *, #agentNotifs * { font-style: normal !important; }

/* ── overlays: right-anchored below the button (JS sets top/left/width to
   match the MY COINS + MY ACCOUNT pills) — never centre-stage. A full-screen
   transparent layer still catches outside-clicks for dismiss. ─────────── */
#agentVoice, #agentText, #agentConfirm {
  position: fixed; inset: 0; z-index: 100060;
  background: transparent; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
#agentVoice.on, #agentText.on, #agentConfirm.on { opacity: 1; pointer-events: auto; }
.av-card, .at-card, .ac-card { position: absolute; box-sizing: border-box; }

#agentVoice .av-card {
  border-radius: 22px; padding: 22px 20px 18px; text-align: center;
  transform: translateY(8px); transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
#agentVoice.on .av-card { transform: none; }
/* Fluid liquid-glass orb: an SVG blob whose outline is recomputed every
   frame (JS), morphing from a soft circle at rest into a blooming flower as
   you speak. Multi-colour gradient fill, soft blur + glow = diffused glass. */
/* The orb is a dense liquid-glass FLOWER: ~360 translucent petals across 13
   counter-rotating rings, a soft multi-colour heart, and a colour field that
   blooms outward through the petals with the voice (--i, set per frame). */
#agentVoice .av-orb { width: 132px; height: 132px; margin: 0 auto 16px; position: relative; --i: 0; }
#agentVoice .af-field {
  position: absolute; left: 50%; top: 50%; width: 168px; height: 168px; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%) scale(calc(.34 + var(--i) * .9));
  background: radial-gradient(circle at 50% 50%, rgba(255,238,170,.95) 0%, rgba(127,233,195,.8) 16%, rgba(143,183,255,.66) 30%, rgba(175,169,236,.6) 42%, rgba(237,147,177,.5) 52%, transparent 64%);
  filter: blur(8px) saturate(calc(1.15 + var(--i) * .9)); opacity: calc(.42 + var(--i) * .55); mix-blend-mode: screen;
}
#agentVoice .af-flower, #agentVoice .af-flower .lw, #agentVoice .af-flower .pw { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#agentVoice .af-flower .lw, #agentVoice .af-flower .pw { left: 0; top: 0; }
#agentVoice .af-flower .pb { position: absolute; left: 0; top: 0; transform: translateY(calc(-1 * (var(--rb) + var(--i) * var(--rg)))); }
#agentVoice .af-flower .p {
  position: absolute; left: calc(var(--pw) / -2); bottom: 0; width: var(--pw); height: var(--ph); transform-origin: 50% 100%;
  border-radius: 50% 50% 50% 50% / 84% 84% 16% 16%;
  background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: inset 0 1px 3px rgba(255,255,255,.3), inset 0 -3px 6px rgba(0,0,0,.16);
  animation-name: afSway; animation-timing-function: ease-in-out; animation-iteration-count: infinite; will-change: transform;
}
@keyframes afSway { 0%, 100% { transform: rotate(-3.5deg) scale(.985); } 50% { transform: rotate(3.5deg) scale(1.02); } }
@keyframes afSpin { to { transform: rotate(360deg); } }
#agentVoice .af-center {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%) scale(calc(1 + var(--i) * .35));
  background: radial-gradient(circle at 40% 36%, #fff6d8 0%, #ffd27a 14%, #7fe9c3 30%, #8fb7ff 44%, #af9cf4 56%, #ed93b1 66%, transparent 78%);
  filter: blur(3px) saturate(1.45); opacity: calc(.8 + var(--i) * .2); mix-blend-mode: screen;
}
#agentVoice .av-h { font: 700 18px/1.3 var(--font-display); margin: 0 0 6px; }
#agentVoice .av-sub { font: 500 12.5px/1.5 var(--font-display); color: rgba(255, 255, 255, .65); margin: 0 0 16px; }
#agentVoice .av-transcript {
  min-height: 46px; max-height: 52vh; overflow-y: auto; text-align: left; cursor: text; outline: none;
  font: 500 15px/1.55 var(--font-display); color: #fff;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; word-break: break-word;
}
#agentVoice .av-transcript:focus { border-color: rgba(127, 233, 195, .45); }
#agentVoice .av-transcript.empty::before { content: 'Listening… tap any word to fix it, then keep talking.'; color: rgba(255, 255, 255, .4); }
/* live (not-yet-final) words sit INSIDE the box, faint, right after the committed text */
#agentVoice .av-interim { color: rgba(255, 255, 255, .5); }
#agentVoice .av-actions { display: flex; gap: 10px; justify-content: center; }

/* ── TEXT command bar ──────────────────────────────────────────────── */
#agentText .at-card { border-radius: 18px; padding: 14px 14px 12px; }
#agentText .at-row { display: flex; align-items: center; gap: 10px; }
#agentText .at-glyph { font-size: 17px; opacity: .7; }
#agentText .at-input {
  flex: 1; background: transparent; border: none; outline: none; color: #fff;
  font: 500 16px/1.4 var(--font-display); padding: 8px 2px;
}
#agentText .at-input::placeholder { color: rgba(255, 255, 255, .42); }
#agentText .at-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#agentText .at-chip {
  font: 500 12px/1 var(--font-display); color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px; padding: 7px 11px; cursor: pointer; transition: background .15s ease;
}
#agentText .at-chip:hover { background: rgba(255, 255, 255, .14); }

/* ── CONFIRM (cost gate) ───────────────────────────────────────────── */
#agentConfirm .ac-card { border-radius: 20px; padding: 20px 18px 16px; }
#agentConfirm .ac-h { font: 700 17px/1.3 var(--font-display); margin: 0 0 8px; }
#agentConfirm .ac-prompt {
  font: 500 14px/1.55 var(--font-display); color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; max-height: 140px; overflow: auto;
}
/* Cost is no longer shown pre-flight (the heuristic estimate was misleading);
   the meta row now carries only the hedged "Likely steps" hint, and is omitted
   entirely when there are no detected steps. */
#agentConfirm .ac-meta { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; flex-wrap: wrap; }
#agentConfirm .ac-skills { font: 500 12px/1.4 var(--font-display); color: rgba(255, 255, 255, .6); }
/* Spending limit — light-beam slider, the same mechanism the Command Center
   and chat agent-mode use (.cc-budget-pop__slider / __scale come from
   workspace-command-center.css, loaded globally). Wrapped in a soft glass
   well so it reads as one deliberate control inside the confirm card. */
#agentConfirm .ac-limit {
  margin: 0 0 16px; padding: 13px 14px 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
}
#agentConfirm .ac-limit-h { font: 700 12.5px/1 var(--font-display); color: rgba(255, 255, 255, .92); margin: 0 0 6px; }
#agentConfirm .ac-limit-note { font: 500 11px/1.5 var(--font-display); color: rgba(255, 255, 255, .55); margin: 0 0 10px; }
#agentConfirm .ac-limit .cc-budget-pop__scale { font: 500 10px/1 var(--font-display); color: rgba(255, 255, 255, .5); margin-top: 3px; }
#agentConfirm .ac-limit-read { margin-top: 8px; font: 600 11.5px/1.4 var(--font-display); color: rgba(255, 255, 255, .8); }
#agentConfirm .ac-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* shared buttons */
.ab-btn {
  font: 600 13px/1 var(--font-display); color: #fff; cursor: pointer; text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px -8px rgba(0, 0, 0, .45);
  border-radius: 12px; padding: 11px 18px; transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.ab-btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .42); }
.ab-btn:active { transform: scale(.97); }
.ab-btn.ab-primary { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .42); }
.ab-btn.ab-primary:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .55); }

/* ── NOTIFICATIONS (bottom-right glass stack) ──────────────────────── */
#agentNotifs {
  position: fixed; right: 18px; bottom: 18px; z-index: 100055;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none;
}
#agentNotifs .an-toast {
  pointer-events: auto; max-width: 320px; border-radius: 16px; padding: 13px 15px;
  cursor: pointer; transform: translateY(8px); opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
#agentNotifs .an-toast.on { opacity: 1; transform: none; }
#agentNotifs .an-h { font: 700 13px/1.3 var(--font-display); margin-bottom: 3px; display: flex; align-items: center; gap: 7px; }
#agentNotifs .an-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
#agentNotifs .an-dot.done { background: #1D9E75; }
#agentNotifs .an-dot.ask { background: #FFC775; }
#agentNotifs .an-dot.fail { background: #E24B4A; }
#agentNotifs .an-p { font: 500 12px/1.45 var(--font-display); color: rgba(255, 255, 255, .8); }
#agentNotifs .an-cta { font: 600 11px/1 var(--font-display); color: #7FE9C3; margin-top: 7px; }

/* ── MISSIONS panel (hover dropdown under the button) ──────────────── */
#agentMissions {
  position: fixed; z-index: 100045; width: 300px; border-radius: 18px; padding: 12px;
  transform: translateY(-6px); opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#agentMissions.on { opacity: 1; transform: none; pointer-events: auto; }
#agentMissions .am-h { font: 700 11px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin: 2px 4px 10px; }
#agentMissions .am-empty { font: 500 12.5px/1.5 var(--font-display); color: rgba(255, 255, 255, .5); padding: 8px 6px 12px; text-align: center; }
#agentMissions .am-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 11px; cursor: pointer;
  transition: background .14s ease;
}
#agentMissions .am-row:hover { background: rgba(255, 255, 255, .08); }
#agentMissions .am-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
#agentMissions .am-dot.run { background: #7FE9C3; animation: agMicPulse 1s ease-in-out infinite; }
#agentMissions .am-dot.done { background: #1D9E75; }
#agentMissions .am-dot.fail { background: #E24B4A; }
#agentMissions .am-dot.idle { background: rgba(255, 255, 255, .4); }
#agentMissions .am-title { flex: 1; font: 500 13px/1.35 var(--font-display); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#agentMissions .am-status { font: 500 11px/1 var(--font-display); color: rgba(255, 255, 255, .5); flex: none; }