/* Settings > Control Surface — layout only (Phase 0b C3.2).
   Components (.card/.btn/.pill/.badge) + tokens come from omni-ui.css / shell.css.
   This file adds ONLY layout for the panel; the only literals below are the
   canonical design-token values used as var() fallbacks in the viewer-card
   block, which can mount outside the shell. */

/* min(360px,100%) so a single column can shrink below 360px on a narrow phone
   instead of forcing a track wider than the viewport (no horizontal body
   scroll). Desktop renders identically: the track stays 360px until <360px. */
.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: var(--space-5); align-items: start; }
.cs-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); }

/* The card-head adds its own padding/border; the form + list sit below it. */
.cs-form { display: flex; flex-direction: column; gap: var(--space-3); }
.cs-field { display: flex; flex-direction: column; gap: var(--space-1); }
.cs-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.cs-input {
  width: 100%; padding: 8px var(--space-3); font: inherit; color: var(--text);
  background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.cs-input:focus-visible { border-color: var(--border-accent); }
.cs-input[readonly] { color: var(--text-dim); }

.cs-scopes { border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.cs-scopes legend { padding: 0 var(--space-1); }
.cs-check { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; font-size: 12px; }
.cs-check input { margin-top: 2px; accent-color: var(--accent); }
.cs-check span span { display: block; }
.cs-hint { font-size: 11px; }

.cs-actions { display: flex; gap: var(--space-2); }
.cs-err { margin: 0; font-size: 12px; }

/* Reveal-once block (token / secret). */
.cs-reveal { border: 1px solid var(--border-accent); border-radius: var(--r); padding: var(--space-3); background: var(--accent-wash); display: flex; flex-direction: column; gap: var(--space-2); }
.cs-note { margin: 0; font-size: 12px; color: var(--text-dim); }
.cs-copyrow { display: flex; gap: var(--space-2); }
.cs-copyrow .cs-input { flex: 1; }

/* Lists of tokens / webhooks. */
.cs-list { display: flex; flex-direction: column; gap: var(--space-2); }
.cs-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-inset); }
.cs-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.cs-row-title { font-weight: 600; word-break: break-all; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cs-row-meta { font-size: 11px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cs-row-actions { flex: none; }
.cs-empty, .cs-loading { padding: var(--space-4); text-align: center; font-size: 12px; }

/* Viewer chat-history card (Phase 2) — the popover mounted by chat-actions.js
   decorateRow, rendered by viewer-card.js (window.PyreViewerCard). */
.viewer-card { position: fixed; z-index: 60; width: 320px; max-height: 60vh; overflow: auto;
  background: var(--surface-2, #2a2422); border: 1px solid var(--border, rgba(255,255,255,.14));
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: 12px; }
.viewer-card .vc-head { display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-bottom: 1px solid var(--border, rgba(255,255,255,.14)); }
.viewer-card .vc-body { padding: 8px 10px; }
.viewer-card .vc-empty { opacity: .6; padding: 6px 0; }
.viewer-card .vc-summary { opacity: .7; margin-bottom: 4px; }
.viewer-card .vc-filter { width: 100%; margin: 6px 0; }
.viewer-card .vc-row { padding: 2px 0; }
.viewer-card .vc-when { opacity: .5; margin-right: 6px; font-size: 11px; }
.viewer-card .vc-imported { margin-right: 6px; font-size: 10px; padding: 0 4px; border-radius: 6px;
  background: rgba(255,255,255,.10); opacity: .75; }
.viewer-card .vc-row--deleted span { text-decoration: line-through; opacity: .55; }
.viewer-card .vc-row--mod em { font-style: normal; color: var(--danger, #f0505f); }
.viewer-card .vc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.viewer-card .vc-chip { padding: 1px 6px; border-radius: 10px; background: rgba(255,255,255,.08); font-size: 11px; }
.viewer-card .vc-chip--muted { opacity: .55; }
.viewer-card .vc-chip--sub { background: rgba(255,157,77,.25); }
.viewer-card .vc-chip--vip { background: rgba(255,209,102,.25); }
.viewer-card .vc-chip--danger { background: rgba(240,80,95,.3); }
.viewer-card .vc-archive { margin-top: 8px; border-top: 1px solid var(--border, rgba(255,255,255,.14)); padding-top: 6px; }
.viewer-card .vc-access-ended { border-left: 2px solid var(--warn, #ffd166); padding-left: 6px; opacity: .9; }