/* ============================================================
   AGENT STUDIO — the big "window in a window" opened from the
   agent marketplace: per-agent live workspace (pipeline, visual
   simulation, character, stats, terminal) over the dimmed site.
   Built by js/agent-studio.js. --ags-hue comes from the card.
   ============================================================ */

.ags-lock { overflow: hidden; }

.ags-backdrop {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: rgba(5, 6, 8, 0.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-ui);
}
.ags-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- the window ---------- */
.ags-win {
  --ags-accent: hsl(var(--ags-hue, 78) 85% 62%);
  --ags-accent-dim: hsl(var(--ags-hue, 78) 60% 50% / 0.16);
  width: min(1520px, 100%);
  height: min(880px, 100%);
  min-width: 0; min-height: 0;
  max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column;
  background:
    radial-gradient(90% 40% at 50% 0%, hsl(var(--ags-hue, 78) 45% 16% / 0.35), transparent 70%),
    #101418;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-card-lg);
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    var(--inset-highlight);
  transform: translateY(14px) scale(0.985);
  transition: transform var(--dur-med) var(--ease-pop);
  outline: none;
}
.ags-backdrop.is-open .ags-win { transform: none; }

/* ---------- header: window chrome ---------- */
.ags-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bg-white-5);
  flex: none;
  min-width: 0;
}
.ags-ico {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-card);
  background: var(--ags-accent-dim);
  color: var(--ags-accent);
  box-shadow: var(--inset-highlight);
}
.ags-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 4; }
.ags-idbox { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ags-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; letter-spacing: var(--ls-display); text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ags-tag {
  font-size: 11.5px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ags-status {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px; padding: 4px 9px; flex: none;
  border-radius: var(--radius-badge);
  background: var(--accent-08);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
}
.ags-status i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: ags-blink 1.5s var(--ease-ui) infinite;
}
.ags-status.is-boot { color: var(--text-muted); background: var(--bg-white-5); }
.ags-status.is-boot i { background: var(--text-faint); animation: none; }
@keyframes ags-blink { 50% { opacity: 0.25; } }
.ags-uptime {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--text-faint);
  flex: none;
}
.ags-headbtns { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }

.ags-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: var(--radius-btn);
  background: var(--bg-elevated); color: var(--text-primary);
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-ui), transform var(--dur-fast) var(--ease-pop);
}
.ags-btn:hover { background: #2B2F34; }
.ags-btn:active { transform: scale(0.96); }
.ags-btn:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.ags-btn-lime { background: var(--accent); color: var(--accent-text-on); font-weight: 600; }
.ags-btn-lime:hover { background: var(--accent); filter: brightness(1.06); }

.ags-x {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-btn);
  color: var(--text-muted); font-size: 14px;
  transition: background-color var(--dur-fast) var(--ease-ui), color var(--dur-fast) var(--ease-ui);
}
.ags-x:hover { background: var(--bg-white-10); color: var(--text-primary); }
.ags-x:focus-visible { outline: none; box-shadow: var(--ring-accent); }

/* ---------- tabs ---------- */
.ags-tabs {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--bg-white-5);
  flex: none;
}
.ags-tab {
  height: 30px; padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-ui), background-color var(--dur-fast) var(--ease-ui);
}
.ags-tab:hover { color: var(--text-primary); }
.ags-tab.is-on { background: #fff; color: #1A1A1A; }
.ags-tab:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.ags-note {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- body ---------- */
.ags-body { flex: 1; min-height: 0; padding: 10px 14px; }

/* ----- live view: pipeline / visual / side, terminal across ----- */
.ags-live {
  height: 100%;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 282px;
  grid-template-rows: minmax(0, 1fr) 188px;
  gap: 10px;
}

.ags-pane-h {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.ags-pipe, .ags-visual, .ags-side > .ags-card, .ags-term {
  background: var(--bg-terminal);
  border: 1px solid var(--bg-white-5);
  border-radius: var(--radius-card);
  box-shadow: var(--inset-highlight-soft);
}
.ags-pipe { padding: 12px; overflow-y: auto; }

/* pipeline stages */
.ags-stages { list-style: none; display: grid; gap: 6px; counter-reset: ags; }
.ags-stage {
  counter-increment: ags;
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  background: var(--bg-white-5);
  transition: background-color var(--dur-med) var(--ease-ui);
}
.ags-stage-name {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--dur-med) var(--ease-ui);
}
.ags-stage-name::before {
  content: counter(ags);
  display: grid; place-items: center;
  width: 15px; height: 15px; flex: none;
  border-radius: 4px;
  background: var(--bg-white-10);
  font-size: 9px;
  color: var(--text-faint);
  transition: background-color var(--dur-med) var(--ease-ui), color var(--dur-med) var(--ease-ui);
}
.ags-stage-desc {
  max-height: 0; overflow: hidden;
  margin: 0 0 0 23px;
  font-size: 11px; line-height: 1.45;
  color: var(--text-muted);
  transition: max-height var(--dur-med) var(--ease-ui), margin var(--dur-med) var(--ease-ui);
}
.ags-stage.is-on { background: var(--ags-accent-dim); }
.ags-stage.is-on .ags-stage-name { color: var(--ags-accent); }
.ags-stage.is-on .ags-stage-name::before { background: var(--ags-accent); color: #10130A; }
.ags-stage.is-on .ags-stage-desc { max-height: 72px; margin-top: 5px; }

/* visual pane */
.ags-visual { display: flex; flex-direction: column; overflow: hidden; }
.ags-vishead {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px 8px;
  flex: none;
}
.ags-vistitle {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint);
}
.ags-visbadge {
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 7px; border-radius: var(--radius-badge);
  background: var(--bg-white-5); color: var(--text-muted);
  letter-spacing: 0.05em;
}
.ags-visbadge.is-live { background: var(--accent-20); color: var(--accent); }
.ags-stage-view { flex: 1; min-height: 0; position: relative; padding: 0 12px 12px; }

/* chart renderer */
.ags-chart { position: absolute; inset: 0 12px 12px; }
.ags-chart canvas { width: 100%; height: 100%; display: block; }
.ags-chart-chip {
  position: absolute; top: 8px; left: 10px;
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-mono);
  pointer-events: none;
}
.ags-chart-pair { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-primary); }
.ags-chart-px { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.ags-chart-chg { font-size: 11px; color: var(--accent); }
.ags-chart-chg.is-down { color: var(--red-down); }

/* feed renderer */
.ags-feed {
  position: absolute; inset: 0 12px 12px;
  display: flex; flex-direction: column; gap: 5px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
.ags-frow {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--bg-white-5);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary);
  animation: ags-drop var(--dur-med) var(--ease-pop);
}
@keyframes ags-drop { from { opacity: 0; transform: translateY(-7px); } }
.ags-frow.is-hot { background: var(--ags-accent-dim); }
.ags-ftag {
  padding: 1px 6px; flex: none;
  border-radius: var(--radius-badge);
  background: var(--bg-white-10); color: var(--text-muted);
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.ags-frow.is-hot .ags-ftag { background: var(--ags-accent); color: #10130A; }
.ags-ftext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ags-fval { margin-left: auto; flex: none; color: var(--text-primary); }
.ags-fval.is-good { color: var(--accent); }
.ags-fval.is-bad { color: var(--red-down); }

/* build renderer */
.ags-build {
  position: absolute; inset: 0 12px 12px;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 42px;
  gap: 8px;
}
.ags-tree {
  list-style: none;
  padding: 9px; overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-white-5);
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-muted);
  display: flex; flex-direction: column; gap: 5px;
}
.ags-tree li { display: flex; gap: 6px; align-items: center; animation: ags-drop var(--dur-med) var(--ease-pop); }
.ags-tree li b { color: var(--accent); font-weight: 400; }
.ags-code {
  margin: 0; padding: 9px 11px; overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-white-5);
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.65;
  color: var(--text-secondary);
  white-space: pre-wrap; word-break: break-word;
}
.ags-code .tok { color: var(--ags-accent); }
.ags-buildbar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-white-5);
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.ags-buildbar .ags-bstep { flex: none; transition: color var(--dur-fast) var(--ease-ui); }
.ags-buildbar .ags-bstep.is-done { color: var(--accent); }
.ags-btrack {
  flex: 1; height: 4px; border-radius: var(--radius-pill);
  background: var(--bg-white-10); overflow: hidden;
}
.ags-bfill {
  display: block; height: 100%; width: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: width 0.5s var(--ease-glide);
}

/* social renderer */
.ags-social {
  position: absolute; inset: 0 12px 12px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 7px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, #000 86%, transparent);
  mask-image: linear-gradient(to top, #000 86%, transparent);
}
.ags-bub {
  max-width: 78%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 12px; line-height: 1.45;
  animation: ags-drop var(--dur-med) var(--ease-pop);
}
.ags-bub-in {
  align-self: flex-start;
  background: var(--bg-elevated); color: var(--text-secondary);
  border-bottom-left-radius: 4px;
}
.ags-bub-out {
  align-self: flex-end;
  background: var(--ags-accent-dim); color: var(--text-primary);
  border-bottom-right-radius: 4px;
}
.ags-bub-meta {
  display: block; margin-top: 4px;
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--text-faint); letter-spacing: 0.05em;
}
.ags-bub-meta b { color: var(--ags-accent); font-weight: 400; }

/* flows renderer */
.ags-flows {
  position: absolute; inset: 0 12px 12px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.ags-flow { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.ags-flow-top { display: flex; justify-content: space-between; margin-bottom: 5px; }
.ags-flow-top b { color: var(--text-primary); font-weight: 500; }
.ags-flow-top .ags-fapy { color: var(--accent); }
.ags-flow-track {
  height: 10px; border-radius: var(--radius-pill);
  background: var(--bg-white-5); overflow: hidden;
}
.ags-flow-fill {
  display: block; height: 100%; width: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--ags-accent-dim), var(--ags-accent));
  transition: width 0.9s var(--ease-glide);
}

/* side column */
.ags-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.ags-side .ags-card { padding: 12px; flex: none; }
.ags-kv { display: grid; gap: 6px; }
.ags-kv-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 12px;
}
.ags-kv-row .k { color: var(--text-muted); flex: none; }
.ags-kv-row .v {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-primary); text-align: right;
  overflow-wrap: anywhere;
}
.ags-stats { display: grid; gap: 8px; }
.ags-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ags-stat .k { font-size: 11.5px; color: var(--text-muted); }
.ags-stat .v {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  color: var(--text-primary);
}
.ags-stat .v.is-good { color: var(--accent); }
.ags-real {
  padding: 9px 11px;
  border: 1px solid rgba(209, 254, 23, 0.16);
  border-radius: var(--radius-card);
  background: var(--accent-05);
  font-family: var(--font-mono); font-size: 10px; line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.ags-real b { color: var(--accent); font-weight: 400; }

/* terminal */
.ags-term {
  grid-column: 1 / -1;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ags-term-h {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 6px; flex: none;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint);
}
.ags-term-prompt { color: var(--accent); text-transform: none; letter-spacing: 0.02em; }
.ags-log {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 12px 10px;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7;
  color: var(--text-secondary);
}
.ags-line { animation: ags-drop var(--dur-fast) var(--ease-ui); }
.ags-line.ok { color: var(--accent); }
.ags-line.warn { color: var(--red-down); }
.ags-line.dim { color: var(--text-faint); }

/* ----- how it works view ----- */
/* the UA's [hidden] rule loses to any author `display` — restate it */
.ags-how[hidden] { display: none !important; }
.ags-how {
  height: 100%; overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 10px;
  align-content: start;
}
.ags-how-left {
  padding: 16px;
  background: var(--bg-terminal);
  border: 1px solid var(--bg-white-5);
  border-radius: var(--radius-card);
}
.ags-how-left h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: var(--ls-display); text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.ags-how-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.ags-how-steps { list-style: none; display: grid; gap: 10px; counter-reset: agshow; }
.ags-how-steps li {
  counter-increment: agshow;
  position: relative;
  padding: 11px 12px 11px 44px;
  border-radius: var(--radius-card);
  background: var(--bg-white-5);
}
.ags-how-steps li::before {
  content: counter(agshow);
  position: absolute; left: 12px; top: 12px;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--ags-accent-dim);
  color: var(--ags-accent);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.ags-how-steps b {
  display: block;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.ags-how-steps p { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }

.ags-how-right { display: flex; flex-direction: column; gap: 10px; }
.ags-how-right .ags-card {
  padding: 14px;
  background: var(--bg-terminal);
  border: 1px solid var(--bg-white-5);
  border-radius: var(--radius-card);
}
.ags-realnote { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.ags-realnote b { color: var(--accent); font-weight: 500; }
.ags-pre {
  margin: 0; padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-white-5);
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.65;
  color: var(--text-secondary);
  white-space: pre-wrap; word-break: break-word;
}
.ags-howbtns { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* ---------- footer ---------- */
.ags-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--bg-white-5);
  flex: none;
}
.ags-mem {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.05em; color: var(--text-faint);
}
.ags-mem b { color: var(--accent); font-weight: 400; }
.ags-footbtns { display: flex; gap: 6px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ags-live {
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr) 170px;
  }
  .ags-pipe { grid-row: 1 / 3; }
  .ags-side { grid-column: 2; grid-row: 2; flex-direction: row; }
  .ags-side .ags-card { flex: 1; }
  .ags-real { flex: 1; }
  .ags-how { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ags-backdrop { padding: 0; }
  .ags-win { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .ags-tag, .ags-uptime, .ags-note { display: none; }
  .ags-headbtns .ags-char,
  .ags-headbtns .ags-self { display: none; }
  .ags-live {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 240px auto auto 190px;
    overflow-y: auto;
  }
  .ags-pipe { grid-row: auto; max-height: 210px; }
  .ags-side { flex-direction: column; overflow: visible; }
  .ags-term { min-height: 190px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ags-backdrop, .ags-win { transition: none; }
  .ags-status i { animation: none; }
  .ags-frow, .ags-tree li, .ags-bub, .ags-line { animation: none; }
  .ags-bfill, .ags-flow-fill { transition: none; }
}