/* Agent Mode shell (AGUI-003). One stylesheet for the dashboard and the editor.
   Regions are `[data-agent-region]`; the server's agent_state decides which are
   locked or focused — nothing here animates without an event. */
:root { --agent-accent: var(--lime, #c3f53b); --agent-scrim: rgba(6, 8, 12, .42); }
.agent-announcement, .agent-lock-reason {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
[data-agent-region] { position: relative; }
[data-agent-region].agent-locked {
  opacity: .55; filter: blur(2px); pointer-events: none; user-select: none;
  transition: opacity .18s ease, filter .18s ease;
}
[data-agent-region].agent-locked::after {
  content: attr(data-agent-reason); position: absolute; top: 10px; left: 10px; z-index: 3;
  padding: 4px 8px; border-radius: 8px; font: 600 11px/1.2 system-ui, sans-serif;
  color: #0a0e16; background: var(--agent-accent); filter: none; pointer-events: none;
  max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-agent-region].agent-focus {
  z-index: 61; box-shadow: 0 0 0 2px var(--agent-accent), 0 18px 48px rgba(0, 0, 0, .35);
  border-radius: 12px;
}
.agent-scrim { position: fixed; inset: 0; z-index: 60; background: var(--agent-scrim); pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.agent-scrim.on { opacity: 1; }
.agent-step-label {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 62;
  padding: 8px 14px; border-radius: 999px; background: #12151c; color: #f2f5ec;
  border: 1px solid rgba(255, 255, 255, .14); font: 600 13px/1.2 system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); display: none; pointer-events: none; max-width: min(720px, 92vw);
}
.agent-step-label.on { display: inline-flex; gap: 10px; align-items: center; }
.agent-step-label .idx { color: var(--agent-accent); font-variant-numeric: tabular-nums; }
.agent-step-label .sweep { width: 8px; height: 8px; border-radius: 50%; background: var(--agent-accent); animation: agent-sweep 1.1s ease-in-out infinite; }
@keyframes agent-sweep { 0%, 100% { transform: scale(.6); opacity: .5 } 50% { transform: scale(1); opacity: 1 } }
.agent-reveal { outline: 2px solid var(--agent-accent); outline-offset: 2px; animation: agent-reveal 1.2s ease-out 1; }
@keyframes agent-reveal { from { box-shadow: 0 0 0 10px rgba(195, 245, 59, .35) } to { box-shadow: 0 0 0 0 rgba(195, 245, 59, 0) } }
@media (prefers-reduced-motion: reduce) {
  .agent-step-label .sweep { animation: none; }
  .agent-scrim, [data-agent-region].agent-locked { transition: none !important; }
  .agent-reveal { animation: none; }
}