/* scripting section — section_scripting: a coding-agent terminal
   (.agt-) where the agent writes the integration itself. Dark window; the
   transcript reads as an agent session: ❯ user prompt, ✳ thinking,
   ⏺ tool calls with ⎿ results, mono throughout. */

.agt-term {
  max-width: 720px; border-radius: 14px; overflow: hidden;
  background: #23231F; color: #D9D7CF;
  box-shadow: 0 1px 2px rgba(38,38,34,.06), 0 14px 40px rgba(38,38,34,.16);
}
.agt-term-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: #2C2C27;
  font: 400 11.5px var(--mono); color: #8F8D84;
}
.agt-dots { display: flex; gap: 6px; margin-right: 2px; }
.agt-dots i { width: 9px; height: 9px; border-radius: 50%; }
.agt-dots i:nth-child(1) { background: #FF5F57; }
.agt-dots i:nth-child(2) { background: #FEBC2E; }
.agt-dots i:nth-child(3) { background: #28C840; }
.agt-log { display: grid; gap: 12px; padding: 18px 18px 16px; }

.agt-item {
  position: relative; padding-left: 24px;
  font: 400 12.5px/1.65 var(--mono); color: #B9B7AE;
  /* grid items: don't let unbreakable tokens (URLs) or the <pre> below
     force the terminal wider than the viewport */
  min-width: 0; overflow-wrap: anywhere;
}
.agt-glyph { position: absolute; left: 0; top: 0; }
.agt-glyph-u { color: #7BC4A0; }
.agt-glyph-t { color: #7BC4A0; font-size: 11px; }
.agt-glyph-b { color: #7BC4A0; font-size: 11px; }
.agt-u { color: #F1EFE8; font-weight: 500; }
.agt-th { font-style: italic; color: #77756C; }
.agt-t .agt-fn { color: #A8C7E8; }
.agt-s { color: #C9B98A; }
.agt-r { color: #8F8D84; padding-left: 14px; margin-top: 2px; }
.agt-elbow { margin-right: 8px; color: #55544B; }
.agt-ok { color: #7BC4A0; font-weight: 500; }
.agt-b { color: #E4E2DA; }

/* expandable tool calls — keyboard-operable <details> disclosures,
   Claude Code's ctrl+o pattern made clickable */
.agt-x summary { display: block; list-style: none; cursor: pointer; }
.agt-x summary::-webkit-details-marker { display: none; }
.agt-x summary:focus-visible { outline: 1px solid #7BC4A0; outline-offset: 3px; border-radius: 4px; }
.agt-xhint::after { content: " · expand"; color: #55544B; transition: color .15s; }
.agt-x[open] .agt-xhint::after { content: " · collapse"; }
.agt-x summary:hover .agt-xhint::after { color: #B9B7AE; }
.agt-detail {
  margin: 8px 0 2px 14px; padding: 8px 12px;
  border-left: 1px solid #33332D;
  font: 400 11.5px/1.8 var(--mono); color: #8F8D84;
  white-space: pre-wrap;
}
.agt-detail .agt-k { color: #A8C7E8; }

/* thinking line — the sparkle pulses only while the line is "live" during
   playback (JS adds .agt-live); a settled transcript shows it static. */
.agt-glyph-p { color: #7BC4A0; }
.agt-th.agt-live .agt-glyph-p { animation: agt-pulse 1.4s ease-in-out infinite; }
.agt-verb { font-style: italic; }
.agt-elapsed { color: #55544B; font-style: normal; }
@keyframes agt-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .agt-th.agt-live .agt-glyph-p { animation: none; }
}

/* the written file, shown inline under its Write call */
.agt-code {
  margin: 8px 0 2px 14px; padding: 10px 12px;
  background: #1D1D1A; border: 1px solid #33332D; border-radius: 8px;
  font: 400 11.5px/1.7 var(--mono); color: #B9B7AE;
  white-space: pre; overflow-x: auto;
}
.agt-code .agt-k { color: #A8C7E8; }
.agt-code .agt-n { color: #C9B98A; }

.agt-term-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; border-top: 1px solid #33332D;
  font: 400 11px var(--mono); color: #77756C;
}
.agt-replay {
  margin-left: auto;
  font: 500 11.5px var(--mono);
  background: transparent; border: 1px solid #4A4942; color: #B9B7AE;
  border-radius: 7px; padding: 4px 12px; cursor: pointer; flex: none;
}
.agt-replay:hover { background: transparent; border-color: #7BC4A0; color: #7BC4A0; }

/* scroll-in stagger — armed by JS only, so no-JS renders everything */
.agt-armed .agt-item {
  opacity: 0; transform: translateY(12px);
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
.agt-armed .agt-item.agt-in { opacity: 1; transform: none; }
.agt-reset .agt-item { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .agt-armed .agt-item { opacity: 1; transform: none; transition: none; }
  .agt-replay { display: none; }
}