/*
 * The agent panel. Dark on purpose: it is instrumentation sitting beside a
 * website, not part of it, and the demo works better when nobody mistakes the
 * two.
 */

/* The panel's width lives on :root, not on .ap.
   body { padding-right: var(--ap-w) } is what stops the panel covering the page,
   and a custom property declared on .ap is not in scope on body — so the
   declaration was invalid, the padding computed to 0, and the panel sat on top
   of the results grid instead of beside it. Custom properties inherit down, not
   sideways. */
:root { --ap-w: 400px; }

.ap {
  --ap-bg:     oklch(0.19 0.012 260);
  --ap-lift:   oklch(0.235 0.014 260);
  --ap-card:   oklch(0.27 0.016 260);
  --ap-line:   oklch(0.34 0.016 260);
  --ap-text:   oklch(0.95 0.008 260);
  --ap-body:   oklch(0.78 0.012 260);
  --ap-faint:  oklch(0.60 0.014 260);
  --ap-accent: #E8412A;
  --ap-ok:     #7DD37D;
  --ap-warn:   #E8B93A;
  --ap-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  position: fixed;
  inset: 0 0 0 auto;
  width: var(--ap-w);
  max-width: 100vw;
  z-index: 900;
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--site-sans, system-ui, sans-serif);
}
.ap--open { transform: translateX(0); }

/* The page makes room rather than being covered. Watching the results grid
 * reflow under the agent's search is half the demo. */
@media (min-width: 1100px) {
  body { transition: padding-right 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
  body.has-agent-panel { padding-right: var(--ap-w); }
}

.ap__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ap-bg);
  color: var(--ap-text);
  border-left: 1px solid var(--ap-line);
  box-shadow: -24px 0 60px -30px rgb(0 0 0 / 0.5);
}

/* --- the reopen tab --- */
.ap__tab {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ap-bg);
  color: var(--ap-text);
  border: 1px solid var(--ap-line);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  padding: 18px 9px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.ap__tab:hover { background: var(--ap-lift); }
.ap--open .ap__tab { opacity: 0; pointer-events: none; }
.ap__tab-text {
  display: block;
  writing-mode: vertical-rl;
  font-family: var(--ap-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- header --- */
.ap__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--ap-line);
}
.ap__eyebrow {
  margin: 0 0 3px;
  font-family: var(--ap-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ap-accent);
}
.ap__title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.ap__icon {
  background: none; border: 0; color: var(--ap-faint);
  cursor: pointer; padding: 4px; border-radius: 6px; line-height: 0;
}
.ap__icon:hover { color: var(--ap-text); background: var(--ap-lift); }

/* --- tool strip --- */
.ap__tools { padding: 14px 18px; border-bottom: 1px solid var(--ap-line); background: var(--ap-lift); }
.ap__tools-head { margin: 0 0 9px; font-size: 12px; color: var(--ap-body); }
.ap__tools-head strong { color: var(--ap-text); }
.ap__native {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 20px;
  font-family: var(--ap-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  background: oklch(0.30 0.02 260); color: var(--ap-faint); cursor: help;
  border: 1px solid var(--ap-line);
}
.ap__native.is-on { color: var(--ap-ok); border-color: color-mix(in oklch, var(--ap-ok), transparent 65%); }
.ap__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ap__chip {
  font-family: var(--ap-mono); font-size: 10.5px;
  padding: 3px 7px; border-radius: 4px;
  background: var(--ap-card); color: var(--ap-body);
  border: 1px solid transparent; cursor: help;
}
.ap__chip.is-firing {
  animation: ap-fire 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ap-fire {
  0%   { background: var(--ap-accent); color: #fff; border-color: var(--ap-accent); }
  100% { background: var(--ap-card); color: var(--ap-body); border-color: transparent; }
}

/* --- transcript --- */
.ap__log {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin; scrollbar-color: var(--ap-line) transparent;
}
/* Flex children shrink by default, and the tool rows are by far the tallest
   thing in here — so they were the ones getting crushed, to a two-pixel sliver
   with all the trace detail inside it. The log scrolls; nothing in it should
   ever be compressed to fit. */
.ap__log > * { flex: 0 0 auto; }

.ap__msg { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ap__msg--user {
  align-self: flex-end; max-width: 88%;
  background: var(--ap-card); color: var(--ap-text);
  padding: 9px 13px; border-radius: 14px 14px 3px 14px;
}
.ap__msg--assistant { color: var(--ap-body); }

.ap__note {
  margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--ap-faint);
  border-left: 2px solid var(--ap-line); padding: 2px 0 2px 10px;
}
.ap__note strong { color: var(--ap-body); }
.ap__note.is-bad  { color: #F09A8C; border-left-color: var(--ap-accent); }
.ap__note.is-ok   { color: var(--ap-ok); border-left-color: var(--ap-ok); }
.ap__note.is-warn { color: var(--ap-warn); border-left-color: var(--ap-warn); }

/* --- round-trip marker ---
   Tool use is more than one call to the model. Numbering the rounds is the
   clearest way to show that, and it is the thing people most often miss. */
.ap__turn {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--ap-mono); font-size: 9.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ap-faint);
}
.ap__turn::after {
  content: ""; flex: 1; height: 1px; background: var(--ap-line);
}
.ap__turn-n {
  color: var(--ap-accent); border: 1px solid color-mix(in oklch, var(--ap-accent), transparent 60%);
  border-radius: 20px; padding: 2px 8px;
}
.ap__turn-d { color: var(--ap-faint); text-transform: none; letter-spacing: 0.02em; }

/* --- a tool call --- */
.ap__tool {
  background: var(--ap-lift);
  border: 1px solid var(--ap-line);
  border-left: 2px solid color-mix(in oklch, var(--ap-accent), transparent 45%);
  border-radius: 8px;
  font-family: var(--ap-mono);
  overflow: hidden;
}
.ap__tool.is-bad { border-left-color: #F09A8C; }
.ap__tool > summary {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 11px; cursor: pointer; font-size: 11.5px;
  list-style: none;
}
.ap__tool > summary::-webkit-details-marker { display: none; }
.ap__tool > summary:hover { background: var(--ap-card); }
.ap__tool-n {
  flex: none; display: grid; place-items: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--ap-accent); color: #fff;
  font-size: 9.5px; font-weight: 600;
}
.ap__tool > summary code { color: var(--ap-text); }
.ap__tool-kind {
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 20px;
  background: oklch(0.30 0.02 260); color: var(--ap-faint);
}
.ap__tool-kind.is-write {
  color: #F5C6BC;
  background: color-mix(in oklch, var(--ap-accent), transparent 78%);
}
.ap__tool-state { margin-left: auto; color: var(--ap-faint); font-size: 10px; }
.ap__tool-state.is-bad { color: #F09A8C; }
.ap__tool-body { padding: 0 11px 11px; border-top: 1px solid var(--ap-line); }

/* The one-line human reading of the result, above the raw JSON. Most people
   want this and nothing else; the JSON is for when they want to check it. */
.ap__tool-sum {
  margin: 10px 0 0; padding: 7px 9px; border-radius: 6px;
  background: color-mix(in oklch, var(--ap-ok), transparent 88%);
  color: #BFE6BF; font-size: 11px; line-height: 1.5;
  font-family: var(--site-sans, system-ui, sans-serif);
}
.ap__tool-label {
  margin: 10px 0 5px; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ap-faint);
}
.ap__tool-page {
  margin: 0; font-size: 10.5px; line-height: 1.5; color: #E4C58A;
}
/* Bounded and internally scrollable. A search result can run to forty lines of
   JSON, and three of those in a row pushes the actual conversation off screen —
   which defeats the point of showing the trace next to it. */
.ap__tool-body pre {
  margin: 0; padding: 9px 10px; border-radius: 6px;
  background: oklch(0.15 0.01 260); color: var(--ap-body);
  font-size: 10.5px; line-height: 1.5;
  max-height: 170px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  scrollbar-width: thin; scrollbar-color: var(--ap-line) transparent;
}

/* --- what the model is sent --- */
.ap__wire { margin-top: 11px; }
.ap__wire > summary {
  cursor: pointer; font-size: 11px; color: var(--ap-faint);
  text-decoration: underline; text-underline-offset: 3px;
}
.ap__wire > summary:hover { color: var(--ap-text); }
.ap__wire-note { margin: 9px 0; font-size: 11px; line-height: 1.5; color: var(--ap-body); }
.ap__wire pre {
  margin: 0; padding: 9px 10px; border-radius: 6px;
  background: oklch(0.15 0.01 260); color: var(--ap-body);
  font-family: var(--ap-mono); font-size: 10px; line-height: 1.5;
  max-height: 300px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}

.ap__foot-actions { display: flex; gap: 12px; }

/* --- suggestions --- */
.ap__suggest { display: flex; flex-direction: column; gap: 6px; }
.ap__suggest button {
  text-align: left; font: inherit; font-size: 12.5px;
  background: var(--ap-lift); color: var(--ap-body);
  border: 1px solid var(--ap-line); border-radius: 8px;
  padding: 9px 12px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ap__suggest button:hover {
  background: var(--ap-card); color: var(--ap-text);
  border-color: color-mix(in oklch, var(--ap-accent), transparent 55%);
}

/* --- passcode gate --- */
.ap__gate { padding: 16px 18px; border-top: 1px solid var(--ap-line); background: var(--ap-lift); }
.ap__gate-title { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.ap__gate-note { margin: 0 0 11px; font-size: 11.5px; color: var(--ap-faint); line-height: 1.5; }
.ap__gate form { display: flex; gap: 7px; }
.ap__gate input {
  flex: 1; font: inherit; font-size: 13px;
  background: var(--ap-bg); color: var(--ap-text);
  border: 1px solid var(--ap-line); border-radius: 8px; padding: 9px 11px;
}
.ap__gate-error { margin: 9px 0 0; font-size: 11.5px; color: #F09A8C; }

/* --- composer --- */
.ap__composer {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 12px 18px; border-top: 1px solid var(--ap-line);
}
.ap__composer textarea {
  flex: 1; font: inherit; font-size: 13.5px; line-height: 1.5; resize: none;
  background: var(--ap-lift); color: var(--ap-text);
  border: 1px solid var(--ap-line); border-radius: 10px;
  padding: 10px 12px; max-height: 140px;
}
.ap__composer textarea::placeholder { color: var(--ap-faint); }
.ap__send {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border: 0; border-radius: 10px;
  background: var(--ap-accent); color: #fff; cursor: pointer;
  transition: opacity 0.15s ease;
}
.ap__gate .ap__send { width: auto; padding: 0 15px; font-size: 13px; font-weight: 600; }
.ap__send:hover { opacity: 0.88; }
.ap__send:disabled { opacity: 0.4; cursor: default; }

/* --- footer --- */
.ap__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 18px 12px;
  font-family: var(--ap-mono); font-size: 10px; color: var(--ap-faint);
}
.ap__link {
  background: none; border: 0; color: var(--ap-faint);
  font: inherit; cursor: pointer; text-decoration: underline; padding: 0;
}
.ap__link:hover { color: var(--ap-text); }

.ap :where(button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--ap-accent); outline-offset: 2px;
}

@media (max-width: 520px) {
  :root { --ap-w: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  .ap, body, .ap__chip.is-firing { transition: none; animation: none; }
}

/* An author `display` beats the UA's [hidden] rule, so `el.hidden = true` does
   nothing to anything styled display:flex — which is most of this panel.
   Caught with the composer sitting visible underneath the passcode gate. */
.ap [hidden] { display: none !important; }