:root {
  --bg:            #111;
  --bg-panel:      #1a1a1a;
  --bg-panel-head: #202020;
  --border:        #2e2e2e;
  --text:          #ddd;
  --text-muted:    #777;
  --accent:        #4af;
  --green:         #4c4;
  --yellow:        #fa0;
  --red:           #f44;
  --grey:          #555;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.dashboard {
  display: grid;
  grid-template-rows: 40px 1fr auto;
  grid-template-columns: 280px 1fr;
  height: 100vh;
  overflow: hidden;
  font-family: monospace;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
}

/* sidebar hidden → viewer fills full width */
.dashboard.sidebar-hidden .sidebar { display: none; }
.dashboard.sidebar-hidden .viewer  { grid-column: 1 / -1; }

/* fullscreen (F key) → only viewer visible */
.dashboard.fullscreen .sidebar,
.dashboard.fullscreen .logs { display: none; }
.dashboard.fullscreen .viewer {
  grid-column: 1 / -1;
  grid-row: 2 / -1;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.top-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  background: #161616;
  border-bottom: 1px solid var(--border);
}

.top-bar-left { display: flex; gap: 4px; }

.top-bar-title {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.05em;
}

.panel-toggle {
  padding: 4px 10px;
  background: #252525;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: monospace;
  font-size: 11px;
  transition: background 150ms;
}
.panel-toggle.active {
  background: #1c3a56;
  border-color: var(--accent);
  color: var(--accent);
}
.panel-toggle:hover { filter: brightness(1.3); }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.sidebar {
  grid-column: 1;
  grid-row: 2;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--bg-panel);
}

/* ── Panel sections (config, status) ─────────────────────────────────────── */

.panel-section { border-bottom: 1px solid var(--border); }

.panel-heading {
  padding: 6px 10px;
  background: var(--bg-panel-head);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.panel-body { padding: 10px; }

.panel-section.collapsed .panel-body { display: none; }

/* ── Config form ─────────────────────────────────────────────────────────── */

.field-group { margin-bottom: 9px; }

.field-group label {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.field-group input {
  width: 100%;
  padding: 5px 7px;
  background: #1e1e1e;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-family: monospace;
  font-size: 12px;
}
.field-group input:focus {
  outline: none;
  border-color: var(--accent);
}

.field-error {
  display: block;
  font-size: 10px;
  color: var(--red);
  margin-top: 2px;
  min-height: 13px;
}

.btn-row {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.btn {
  padding: 5px 11px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-family: monospace;
  font-size: 11px;
  transition: filter 150ms;
}
.btn:hover { filter: brightness(1.3); }
.btn-primary { background: #1a4070; color: #cde; }
.btn-success { background: #1a4a1a; color: #cec; }
.btn-danger  { background: #4a1a1a; color: #ecc; }

.save-feedback {
  font-size: 11px;
  margin-top: 6px;
  min-height: 15px;
  color: var(--green);
}

/* ── Status panel ────────────────────────────────────────────────────────── */

.status-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-size: 12px;
}

.status-label {
  color: var(--text-muted);
  width: 66px;
  flex-shrink: 0;
  font-size: 11px;
}

#scenarioText { word-break: break-all; font-size: 11px; }

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--grey);
  flex-shrink: 0;
}
.dot.green  { background: var(--green);  box-shadow: 0 0 5px var(--green); }
.dot.yellow { background: var(--yellow); box-shadow: 0 0 5px var(--yellow); }
.dot.red    { background: var(--red);    box-shadow: 0 0 5px var(--red); }

.error-msg {
  font-size: 10px;
  color: var(--red);
  margin-top: 4px;
  word-break: break-all;
  min-height: 14px;
}

/* ── Viewer ──────────────────────────────────────────────────────────────── */

.viewer {
  grid-column: 2;
  grid-row: 2;
  background: #000;
  overflow: hidden;
}

#viewerFrame {
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Logs drawer ─────────────────────────────────────────────────────────── */

.logs {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  overflow: hidden;
  height: 220px;
  transition: height 200ms ease;
}

.logs.collapsed { height: 32px; }

.logs-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  background: var(--bg-panel-head);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  height: 32px;
}

.logs-title {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

.badge {
  background: var(--red);
  color: #fff;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 8px;
  display: none;
  flex-shrink: 0;
}
.badge.visible { display: inline-block; }

.logs-last {
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  display: none;
}
.logs.collapsed .logs-last { display: block; }

.log-filters { display: flex; gap: 3px; margin-left: auto; }

.filter-btn {
  padding: 2px 5px;
  background: #252525;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: monospace;
  font-size: 10px;
}
.filter-btn.active { color: var(--text); border-color: #555; }

.btn-sm {
  padding: 2px 7px;
  background: #252525;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: monospace;
  font-size: 10px;
  flex-shrink: 0;
}
.btn-sm:hover, .filter-btn:hover { filter: brightness(1.4); }

.log-list {
  flex: 1;
  overflow-y: auto;
  padding: 2px 0;
}

.log-row {
  display: flex;
  gap: 6px;
  padding: 1px 8px;
  line-height: 1.55;
  white-space: nowrap;
}
.log-row:hover { background: #1d1d1d; }
.log-row.hidden { display: none; }

.log-time  { color: var(--text-muted); flex-shrink: 0; width: 62px; }
.log-level { flex-shrink: 0; width: 28px; font-weight: bold; }
.log-level.dbg { color: #666; }
.log-level.inf { color: var(--accent); }
.log-level.wrn { color: var(--yellow); }
.log-level.err { color: var(--red); }
.log-level.ftl { color: var(--red); }
.log-src   { color: var(--text-muted); flex-shrink: 0; width: 150px; overflow: hidden; text-overflow: ellipsis; }
.log-msg   { color: var(--text); white-space: pre-wrap; word-break: break-word; }