/* The MCP console. Light navy / dark navy / white -- a clean enterprise-console palette:
   white panes, a dark-navy header band, light-navy for secondary surfaces
   and accents. */
:root {
  --white: #ffffff;
  --bg: #f4f7fc;
  --bg-panel: #ffffff;
  --bg-panel-alt: #eef2fb;
  --border: #d7e0f0;
  --text: #16233f;
  --text-dim: #5b6b8c;
  --accent: #2451a4;
  --accent-dim: #dbe6f9;
  --navy-dark: #101a33;
  --topbar-text: #f3f6fc;
  --topbar-text-dim: #a9b8d6;
  --good: #16a34a;
  --bad: #dc2626;
  --warn: #b45309;
  --mono: "JetBrains Mono", monospace;
  --sans: "Inter", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--sans);
}

.app { display: flex; flex-direction: column; height: 100vh; }

/* ── Topbar: the one dark-navy band on the page ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; border-bottom: 1px solid var(--navy-dark);
  background: var(--navy-dark);
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.logo-icon { color: var(--topbar-text); font-family: var(--mono); font-weight: 600; }
.logo-text { font-weight: 600; color: var(--topbar-text); }
.logo-sub { color: var(--topbar-text-dim); font-size: 12.5px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--bad);
  display: inline-block;
}
.status-dot.ok { background: var(--good); }
.status-label { font-size: 12.5px; color: var(--topbar-text-dim); }

/* ── The two panes: request and response ── */
.panes {
  flex: 1; display: grid;
  grid-template-columns: 1.15fr 0.85fr 1fr;
  gap: 1px; background: var(--border);
  overflow: hidden; min-height: 0;
}
.pane {
  background: var(--bg-panel); display: flex; flex-direction: column;
  min-width: 0; min-height: 0; overflow: hidden;
}
.pane-title { font-weight: 600; font-size: 13.5px; }

/* ── Responsive: stack panes on a narrow viewport ── */
@media (max-width: 980px) {
  .panes { grid-template-columns: 1fr; grid-auto-rows: min-content; overflow: auto; }
  .pane { max-height: 60vh; }
  .chat-pane { max-height: none; min-height: 60vh; }
}