/* Scene "api" — request/response console with an endpoint list from the spec */
.api { position: absolute; inset: 0; display: grid; grid-template-columns: 36% minmax(0, 1fr); font-family: var(--f-mono); }
.api-side { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; border-right: 1px solid var(--line); background: rgba(5, 10, 28, 0.45); overflow: hidden; }
.api-spec { align-self: flex-start; margin-bottom: 8px; padding: 3px 8px; border-radius: 6px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint); border: 1px solid rgba(87, 242, 176, 0.4); background: rgba(87, 242, 176, 0.06); }
.api-ep { display: flex; align-items: center; gap: 7px; padding: 6px 7px; border-radius: 7px; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; transition: background 0.3s, color 0.3s; }
.api-ep.is-on { background: rgba(var(--accent-rgb), 0.16); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.api-p { overflow: hidden; text-overflow: ellipsis; }
.api-m { flex: none; display: inline-block; min-width: 38px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; }
.api-m-get { color: var(--mint); }
.api-m-post { color: var(--amber); }
.api-m-put, .api-m-patch { color: var(--violet); }
.api-m-delete { color: var(--rose); }
.api-m-query { color: var(--cyan); }
.api-main { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 12px 14px; gap: 8px; overflow: hidden; }
.api-host { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--dim); }
.api-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.api-req, .api-res { margin: 0; font: inherit; font-size: 11.2px; line-height: 1.6; white-space: pre; overflow: hidden; color: #c8d2f0; }
.api-req { flex: none; min-height: 58px; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(5, 10, 28, 0.6); }
.api-res { flex: 1; min-height: 0; padding: 2px 2px 0; }
.api-hk { color: var(--dim); }
.api-k { color: #8fb0ff; }
.api-s { color: var(--mint); }
.api-n { color: var(--amber); }
.api-b { color: var(--violet); }
.api-caret { display: inline-block; width: 7px; height: 13px; vertical-align: -2px; background: var(--cyan); animation: blink 1s steps(1) infinite; }
.api-reshead { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 10.5px; opacity: 0; transform: translateY(4px); transition: opacity 0.35s var(--ease), transform 0.45s var(--ease); }
.api-reshead.is-on { opacity: 1; transform: none; }
.api-status { padding: 2px 8px; border-radius: 6px; font-weight: 600; color: var(--mint); background: rgba(87, 242, 176, 0.1); border: 1px solid rgba(87, 242, 176, 0.4); }
.api-status[data-ok="false"] { color: var(--rose); background: rgba(255, 111, 134, 0.1); border-color: rgba(255, 111, 134, 0.4); }
.api-ms { color: var(--muted); }
.api-ms::before { content: "⏱ "; filter: grayscale(1); }
.api-ms:empty::before { content: ""; }
.api-main.is-sending .api-host .api-dot { animation: api-ping 0.6s ease-in-out infinite; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
@keyframes api-ping { 50% { transform: scale(1.8); opacity: 0.5; } }
.api-tags { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); min-height: 32px; }
.api-tags .scn-tag { transition: all 0.4s var(--ease); }
@media (max-width: 560px) {
  .api { grid-template-columns: minmax(0, 1fr); }
  .api-side { display: none; }
  .api-req, .api-res { font-size: 10.2px; }
}