/* ══ PANELIST VIEW (the per-model layout primitive) ══
 *
 * One component: orb + name + status + bounded response + Challenge
 * button + Agent Settings. Used identically inside the Moderator
 * workspace (as each model's tab) and — eventually — inside Stage
 * Focus mode on external monitors. No per-context modifiers; the
 * surrounding workspace decides what frames it, not the component.
 *
 * Class naming: the existing `.orb-*` classes stay because they're
 * referenced by index.html and js/app.js (typewriter, canvas wiring).
 * New structural pieces use `.panelist-view__*` (BEM-flavored). The
 * `panelist-view` class on the wrapper names the component for
 * readability; it does NOT exist as a hook for modifier classes.
 */

.orb-panel {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  position: relative;
}

.orb-model-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 8vw, 5rem);
  letter-spacing: 0.2em;
  margin-bottom: 0.25rem;
  opacity: 0.9;
}

.orb-model-tag {
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 2rem;         /* was 3rem — some of the gap now lives above the orb as breathing room */
}

.orb-container {
  position: relative;
  width: 240px;
  height: 240px;
  margin-top: 1rem;            /* NEW — breathing room above the orb */
  margin-bottom: 2.5rem;       /* was 2rem — breathing room below the orb */
}

canvas.orb-canvas {
  width: 240px;
  height: 240px;
  border-radius: 50%;
}

.orb-status {
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
  height: 1rem;
}

/* ── Bounded scrollable response region ──
 * max-height bounds the response so it can't grow tall enough to push
 * the orb off-screen. overflow-y: auto means long responses scroll
 * internally inside the box; typeText() in js/app.js keeps the caret
 * in view by setting scrollTop = scrollHeight after each char.
 * The .orb-panel layout above is otherwise untouched from main.
 */
.orb-response {
  max-width: 600px;
  width: 100%;
  text-align: center;
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  line-height: 1.8;
  color: #ccc;
  font-weight: 300;
  min-height: 4rem;
  max-height: 35vh;
  overflow-y: auto;
  padding: 0 0.5rem;           /* tiny inset so scrollbar (when present) doesn't hug text */
}

/* Static section label above the response area. Per-model brand color
 * via inline style="color:var(--<model>)" in the panel HTML, falling
 * back to muted gray. Replaces the previous .orb-response.empty::after
 * placeholder ("Awaiting question from moderator...") which was a
 * misnamed state label. The header is always visible regardless of
 * whether the response area is empty or filled. */
.orb-transcript-label {
  font-size: 0.55rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.orb-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  vertical-align: text-bottom;
  animation: blink 0.7s steps(1) infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Agent Settings / Stats section ──
 * Container for agent metadata. Today it holds only the System Prompt
 * field; tomorrow it can absorb response time, token count, and
 * per-model connectivity status without restructuring HTML.
 *
 * Visual treatment: muted, clearly subordinate to the response above.
 */
.panelist-view__settings {
  width: min(500px, 90vw);
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #1a1a1a;    /* soft hairline separating response-zone from meta-zone */
}

.panelist-view__settings-label {
  font-size: 0.55rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #666;                      /* more muted than the in-field label — this is a section heading */
  margin-bottom: 1rem;
}

.panelist-view__settings-field {
  margin-bottom: 0.75rem;
}

/* ── Audio toggle (per-model) ──
 * Lives at the top of the Agent Settings section. Filled speaker
 * icon when audio is ON; slashed speaker when OFF. State held in
 * js/audio-state.js (volatile — resets on refresh).
 */
.audio-toggle-row { display: flex; align-items: center; gap: 0.5rem; }

.audio-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, opacity 0.15s;
}
.audio-toggle.on  { color: var(--text); border-color: #2a2a2a; }
.audio-toggle.off { color: var(--muted); opacity: 0.5; }
.audio-toggle:hover { border-color: #3a3a3a; }
.audio-toggle .audio-icon { fill: currentColor; }
.audio-toggle.on  .audio-icon-off { display: none; }
.audio-toggle.off .audio-icon-on  { display: none; }

.orb-prompt-label {
  font-size: 0.55rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.orb-prompt-input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: #888;
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  line-height: 1.6;
  padding: 0.75rem 1rem;
  outline: none;
  resize: none;
  transition: color 0.2s;
}
.orb-prompt-input:focus { color: #ccc; border-color: #333; }

/* Challenge button now sits between the response and the Agent
 * Settings section — it's an action on the response, not a setting. */
.challenge-btn {
  margin-top: 1.5rem;          /* was 2rem — response already has its own bottom breathing space */
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 0.6rem 1.2rem;
  background: transparent;
  border: 1px solid;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s, background 0.2s;
  pointer-events: none;
}
.challenge-btn.visible { opacity: 1; pointer-events: all; }
.challenge-btn:hover { background: rgba(255,255,255,0.05); }

.fade-in { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }