/* FOOM Playground — terminal panel (src/ui/playground). */

.pg { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--ink); }

/* ---------- header ---------- */
.pg-head { flex: none; padding: 8px 10px 0; background: var(--surface); box-shadow: inset 0 calc(-1 * var(--px)) 0 0 var(--ink); position: relative; z-index: 1; }
.pg-head__top { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.pg-lamp { width: 8px; height: 8px; flex: none; background: var(--crt-1); box-shadow: 0 0 0 var(--px) var(--ink); }
.pg-lamp.is-gen { background: var(--phos); animation: blink .5s steps(1) infinite; }
.pg-lamp.is-prefill { background: var(--amber); animation: blink .2s steps(1) infinite; }
.pg-lamp.is-think { background: var(--violet); animation: blink .8s steps(1) infinite; }
.pg-name { flex: 1; min-width: 0; color: var(--phos); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 6px rgba(79, 226, 127, .35); }
.pg-tier { flex: none; font-family: var(--font-small); font-size: var(--fs-small); color: var(--muted); text-transform: uppercase; }
.pg-toggle { flex: none; padding: 4px 6px; font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; color: var(--muted); background: var(--n2);
  box-shadow: 0 0 0 var(--px) var(--ink); }
.pg-toggle.is-on { color: var(--umber); background: var(--lav); }
.pg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 8px 0 6px; }
.pg-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; padding: 4px 6px; background: var(--ink); min-width: 0; }
.pg-stat__k { font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; color: var(--dim); white-space: nowrap; }
.pg-stat__v { font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; color: var(--n9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.pg-stat:first-child .pg-stat__v { color: var(--phos); }
.pg--prefill .pg-stat--pp { background: var(--gold-0); }
.pg--prefill .pg-stat--pp .pg-stat__v, .pg--prefill .pg-stat--pp .pg-stat__k { color: var(--gold-hi); }
.pg-ctxbar { height: 2px; margin: 0 -10px; background: var(--n2); }
.pg-ctxbar__fill { height: 100%; width: 0; background: var(--cyan); transition: width .2s steps(3); }

/* ---------- transcript ---------- */
.pg-transcript {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 10px 16px; overscroll-behavior: contain; touch-action: pan-y;
  background:
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(0, 0, 0, .18) 3px 4px),
    radial-gradient(120% 80% at 50% 0%, rgba(31, 161, 82, .07), transparent 70%), var(--ink);
  user-select: text; -webkit-user-select: text;
}
.pg-sys { margin: 8px 0 12px; text-align: center; font-family: var(--font-small); font-size: var(--fs-small); color: var(--dim); text-transform: uppercase; }
.pg-turn { margin: 0 0 18px; }
.pg-turn + .pg-turn, .pg-sys + .pg-turn { padding-top: 12px; box-shadow: inset 0 var(--px) 0 0 var(--n1); }
.pg-chips { display: flex; gap: 6px; margin-bottom: 6px; }
.pg-chip { padding: 3px 5px; font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; text-transform: uppercase; }
.pg-chip--glimpse { color: var(--n9); background: var(--mag-0); box-shadow: 2px 0 0 #2de6e8, -2px 0 0 #ff1f5a; animation: glimpse 2.4s steps(1) infinite; }
@keyframes glimpse { 0%, 92%, 100% { translate: 0 0; } 94% { translate: 2px 0; } 96% { translate: -2px 0; } }
.pg-chip--secret { color: var(--umber); background: var(--gold); }
.pg-turn.is-glimpse .pg-answer { color: var(--lav); }
.pg-prompt { display: flex; gap: 8px; align-items: baseline; }
.pg-prompt__who { flex: none; padding: 3px 4px; font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; color: var(--ink); background: var(--n6); text-transform: uppercase; }
.pg-prompt__mic { flex: none; padding: 3px 4px; font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; color: var(--ink); background: var(--phos); }
.pg-turn.is-user .pg-prompt__who { background: var(--gold); color: var(--umber); }
.pg-prompt__text { min-width: 0; color: var(--cream); line-height: var(--lh-prose); white-space: pre-wrap; word-break: break-word; }
.pg-prefill { height: 2px; margin: 6px 0 8px; background: var(--n1); }
.pg-prefill__fill { height: 100%; width: 0; background: var(--amber); }
.pg-prefill.is-done { opacity: .35; }
.pg-answer { color: var(--n8); line-height: var(--lh-prose); }
.pg-prose { white-space: pre-wrap; word-break: break-word; margin: 0 0 8px; }
.pg-tag { color: var(--violet); font-family: var(--font-small); font-size: var(--fs-small); text-transform: uppercase; }
.pg-cursor { display: inline-block; width: 8px; height: 14px; margin-left: 1px; vertical-align: -2px; background: var(--phos); animation: blink .6s steps(1) infinite; }

/* token boundaries (the "show tokens" toggle) */
.pg--tokens .tk { background: rgba(141, 107, 224, .26); box-shadow: inset -1px 0 0 rgba(11, 12, 20, .9); }
.pg--tokens .tk--b { background: rgba(45, 230, 232, .18); }

/* thinking */
.pg-think { margin: 0 0 10px; box-shadow: inset var(--px) 0 0 0 var(--violet-1); padding-left: 10px; }
.pg-think__head { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; color: var(--violet); padding: 4px 0 6px; }
.pg-think__head::after { content: ''; width: 0; height: 0; border: 4px solid transparent; border-left-color: currentColor; border-right: 0; }
.pg-think.is-open .pg-think__head::after { transform: rotate(90deg); }
.pg-think.is-live .pg-think__head::after { content: '…'; border: 0; width: auto; height: auto; transform: none; animation: blink .8s steps(1) infinite; }
.pg-think__body { display: none; white-space: pre-wrap; word-break: break-word; color: var(--n5); }
.pg-think.is-open .pg-think__body { display: block; }

/* code */
.pg-code { position: relative; margin: 2px 0 10px; padding: 18px 10px 10px; background: #0d1120; color: var(--n8); white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--font); font-size: var(--fs); line-height: 20px; box-shadow: 0 0 0 var(--px) var(--n2); tab-size: 2; }
.pg-code code { font: inherit; }
.pg-code__lang { position: absolute; right: 6px; top: 4px; font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; color: var(--dim); text-transform: uppercase; }
.hl-kw { color: var(--mag); } .hl-str { color: var(--gold); } .hl-com { color: var(--muted); } .hl-num { color: var(--orange); }
.hl-fn { color: var(--cyan); } .hl-op { color: var(--muted); }

/* agent tool calls */
.pg-tool { margin: 2px 0 10px; padding: 6px 8px; background: #0a1a14; box-shadow: 0 0 0 var(--px) var(--crt-0); }
.pg-call { display: flex; gap: 8px; align-items: baseline; color: var(--ice); }
.pg-call + .pg-call, .pg-res + .pg-call { margin-top: 4px; }
.pg-call__st { flex: none; width: 10px; color: var(--dim); }
.pg-call__st.is-ok { color: var(--phos); }
.pg-call__st.is-bad { color: var(--hot); }
.pg-call__body { flex: 1; min-width: 0; word-break: break-word; }
.pg-call__dur { flex: none; font-family: var(--font-small); font-size: var(--fs-small); color: var(--dim); }
.pg-res { padding-left: 18px; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
.pg-tool .pg-pending { display: block; color: var(--ice); white-space: pre-wrap; }

/* logs ([seed …], [arm.0] …) */
.pg-log { margin: 2px 0 10px; color: var(--n6); }
.pg-logline { white-space: pre-wrap; word-break: break-word; }
.pg-log__tag { color: var(--teal); }
.pg-log .pg-pending { display: block; white-space: pre-wrap; }

/* media */
.pg-media { display: inline-grid; gap: 4px; margin: 2px 0 10px; padding: 4px; background: var(--n1); box-shadow: 0 0 0 var(--px) var(--n2); }
.pg-media__canvas { display: block; width: 240px; height: 168px; image-rendering: pixelated; }
.pg-media__label { font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; color: var(--muted); text-transform: uppercase; padding: 2px 2px 0; }
.pg-wave { display: block; width: 192px; height: 40px; image-rendering: pixelated; }
.pg-badge { display: inline-block; margin: 2px 0 8px; padding: 4px 6px; font-family: var(--font-small); font-size: var(--fs-small); line-height: 1;
  color: var(--ink); background: var(--cyan); text-transform: uppercase; }
.pg-badge--robot { background: var(--orange); }

/* footer + feedback */
.pg-meta { font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(14px * var(--text-scale, 1)); color: var(--dim); text-transform: uppercase; min-height: calc(14px * var(--text-scale, 1)); }
.pg-turn.is-done { cursor: pointer; }
.pg-turn.is-done:hover .pg-meta { color: var(--text); }
.pg-fb { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--font-small); font-size: var(--fs-small); text-transform: uppercase; }
.pg-fb__q { color: var(--muted); }
.pg-fb__btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; line-height: 1; background: var(--n2); color: var(--n8);
  box-shadow: 0 0 0 var(--px) var(--ink), 0 calc(2 * var(--px)) 0 0 var(--ink); }
.pg-fb__btn:active { translate: 0 var(--px); box-shadow: 0 0 0 var(--px) var(--ink); }
.pg-fb__ok { color: var(--phos); }

/* ---------- input ---------- */
.pg-input { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--surface); box-shadow: inset 0 var(--px) 0 0 var(--n3); }
.pg-input__caret { color: var(--phos); }
.pg-input__field { flex: 1; min-width: 0; height: 36px; padding: 0 8px; border: 0; background: var(--ink); color: var(--n9); font-family: var(--font-prose); font-size: 16px;
  box-shadow: inset 0 var(--px) 0 0 #000; caret-color: var(--phos); }
.pg-input__field::placeholder { color: var(--muted); }
.pg-input__field:focus { outline: none; box-shadow: inset 0 var(--px) 0 0 #000, 0 0 0 var(--px) var(--crt-1); }
.pg-input__send { flex: none; min-height: 36px; margin: 0 var(--px); }