/* What the person sees of the agent (agentui.js): the chip and the switch in the header, the pulse on
   whatever the agent changed, the log, and the banner for a session that is gone. Everything is under
   .agent- so it cannot touch the rest of the page. The violet is the agent's alone: the page's blue
   (--accent) already means "selected", "yours". */

:root { --agent: #b59cff; }

.agent-ui {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; font-size: 12px; font-weight: 400; line-height: 1.3;
}
.agent-ui [hidden], .agent-banner[hidden] { display: none !important; }
.agent-ui .link { padding: 0; white-space: nowrap; cursor: pointer; }
.agent-ui .link:disabled { opacity: .4; cursor: default; }
.agent-ui .link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* The link to the service: a dot, and words only when it is not fine. */
.agent-link { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.agent-link.warn { background: var(--warn); }
.agent-ui[data-status="reconnecting"] .agent-link { background: var(--warn); animation: agent-pulse 1.2s ease-in-out infinite; }
.agent-ui[data-status="gone"] .agent-link { background: #ff6b6b; }
.agent-link-text { flex: none; color: var(--warn); white-space: nowrap; }
.agent-ui[data-status="gone"] .agent-link-text { color: #ff6b6b; }

/* What the agent is doing. The text gives way before the buttons do. */
.agent-chip {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 240px;
  padding: 1px 9px; border: 1px solid var(--agent); border-radius: 10px;
  background: rgba(181, 156, 255, .12); color: var(--text);
}
.agent-chip.paused { border-color: var(--warn); background: rgba(224, 163, 62, .12); color: var(--warn); }
.agent-chip.error { border-color: #ff6b6b; background: rgba(255, 107, 107, .12); }
.agent-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-spin {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid rgba(181, 156, 255, .35); border-top-color: var(--agent);
  animation: agent-spin .8s linear infinite;
}
.agent-pause[aria-pressed="true"] { color: var(--warn); }

/* The log: under the header, over the panel. */
.agent-log {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  width: min(380px, calc(100vw - 24px)); max-height: 60vh; overflow-y: auto;
  padding: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}
.agent-log-head {
  padding: 2px 4px 6px; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
}
.agent-entry {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline;
  padding: 4px; border-top: 1px solid var(--line);
}
.agent-entry-time { color: var(--dim); font-variant-numeric: tabular-nums; }
.agent-entry-body { min-width: 0; overflow-wrap: anywhere; }
.agent-entry-tool { color: var(--agent); font-weight: 600; }
.agent-entry-summary { color: var(--text); }
.agent-entry-error { display: block; color: #ff6b6b; }
.agent-entry-action { color: var(--dim); white-space: nowrap; }
.agent-entry.undone .agent-entry-body { opacity: .5; text-decoration: line-through; }

/* The session is gone: over everything, until the page is reloaded. */
.agent-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 14px; background: #3a1d1d; border-bottom: 1px solid #ff6b6b;
  color: var(--text); font-size: 13px; text-align: center;
}
.agent-banner-btn { padding: 3px 12px; font-size: 12px; }

/* The pulse on a control or a row the agent changed (agentui.js flash()). An inset shadow as wide as the
   box tints the row without replacing the background it has, and the outline ring needs no layout room. */
.agent-flash { animation: agent-flash 1.2s ease-out; }
@keyframes agent-flash {
  0%   { box-shadow: 0 0 0 2px var(--agent), inset 0 0 0 999px rgba(181, 156, 255, .30); }
  100% { box-shadow: 0 0 0 2px rgba(181, 156, 255, 0), inset 0 0 0 999px rgba(181, 156, 255, 0); }
}
@keyframes agent-spin { to { transform: rotate(360deg); } }
@keyframes agent-pulse { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .agent-flash { animation: none; box-shadow: 0 0 0 2px var(--agent); }
  .agent-spin, .agent-ui[data-status="reconnecting"] .agent-link { animation: none; }
}