/* Minimal utilitarian styles for an embed scaffold. Every rule here is a
   candidate for the developer to delete or replace with their own design. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --border: #e0e0e0;
  --text: #1a1a1a;
  --text-muted: #666666;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --surface: #1e1e1e;
    --border: #333333;
    --text: #f0f0f0;
    --text-muted: #9e9e9e;
    --primary: #3b82f6;
    --primary-hover: #60a5fa;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 1rem;
}

[hidden] { display: none !important; }
#app { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
#auth-bar { display: flex; gap: 0.5rem; align-items: center; }
#auth-error { color: #c2410c; font-size: 0.9rem; }
.agent-section { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.agent-section h2 { font-size: 1.05rem; }
label { font-weight: 600; font-size: 0.9rem; color: var(--text-muted); }
textarea { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-family: ui-monospace, monospace; font-size: 0.9rem; resize: vertical; min-height: 5rem; }
button { background: var(--primary); color: #fff; border: none; border-radius: var(--radius); padding: 0.4rem 1rem; font-size: 0.95rem; cursor: pointer; align-self: flex-start; }
button:hover:not(:disabled) { background: var(--primary-hover); }
button:disabled { opacity: 0.6; cursor: default; }
pre.output, pre.stream { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem; min-height: 2rem; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, monospace; font-size: 0.85rem; }
img.output { max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius); }
input.duration { width: 12rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 0.9rem; }
label.pipe-toggle { display: flex; align-items: center; gap: 0.4rem; }
label.pipe-toggle input { width: auto; }