/* Quiet, dark chrome so the two frames carry the screen. Harborline navy and teal. */
:root {
  --split: 35; /* the portal's share, in percent; app.js sets it */
  --divider: 12px;
  --head: 48px;

  --chrome: #0a1628;
  --chrome-line: #1b2b44;
  --text: #eef3f9;
  --text-muted: #a9b7ca;
  --seg-bg: #14243b;
  --seg-hover: #1f3352;
  --seg-on-bg: #ffffff;
  --seg-on-text: #0b2545;
  --grip: #5f7594;
  --accent: #2bb3b5;
  --focus: #7fdcde;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: 140ms ease;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--chrome);
  color: var(--text);
  font: 15px/1.4 var(--font);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* ---------- Layout ---------- */

.split { display: flex; flex: 1 1 0; min-width: 0; min-height: 0; }

.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pane-left { flex: 0 0 calc(var(--split) * 1% - var(--divider) / 2); }
.pane-right { flex: 1 1 0; }
.pane-body { position: relative; display: flex; flex: 1 1 0; min-width: 0; min-height: 0; }

.frame {
  display: block;
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  background: #fff;
}

/* ---------- Pane headers ---------- */

.pane-head {
  display: flex;
  flex: 0 0 var(--head);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 14px;
  border-bottom: 1px solid var(--chrome-line);
  background: var(--chrome);
}

.pane-title {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- Segmented control (right pane tabs, and the narrow switcher) ---------- */

.segmented {
  display: inline-flex;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  padding: 3px;
  border-radius: 10px;
  background: var(--seg-bg);
}

.segment {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 34px;
  padding: 4px 16px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font: 600 15px/1.15 var(--font);
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease);
}
.segment:hover { background: var(--seg-hover); color: var(--text); }
.segment[aria-selected="true"] {
  background: var(--seg-on-bg);
  color: var(--seg-on-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
  cursor: default;
}
.segment:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Divider ---------- */

.divider {
  position: relative;
  z-index: 2;
  flex: 0 0 var(--divider);
  border-inline: 1px solid var(--chrome-line);
  background: var(--chrome);
  cursor: col-resize;
  touch-action: none;
}
/* A wider, invisible grab area that reaches over the frames' edges. */
.divider::before {
  content: "";
  position: absolute;
  inset: 0 -6px;
}
/* The grip: a pill in the middle, lit on hover, drag and focus. */
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 56px;
  border-radius: 999px;
  background: var(--grip);
  transform: translate(-50%, -50%);
  transition: background-color var(--ease), height var(--ease);
}
.divider:hover, body.dragging .divider { background: #12223a; }
.divider:hover::after, .divider:focus-visible::after, body.dragging .divider::after {
  height: 88px;
  background: var(--accent);
}
.divider:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* While dragging, the frames would swallow pointer events and stall the drag. */
body.dragging { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.dragging .frame { pointer-events: none; }

/* ---------- Agent Manager sign-in cover ---------- */

/* Over the Agent Manager pane when the console has gone to its sign-in page,
   which refuses to load inside a frame. */
.sign-in {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow: auto;
  background: #eef2f6;
  color: #13233a;
}
.sign-in-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  padding: 36px 28px 32px;
  border: 1px solid #dbe3ec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgb(11 37 69 / 0.12);
  text-align: center;
}
.sign-in-icon {
  width: 52px;
  height: 52px;
  padding: 12px;
  border-radius: 999px;
  background: #e3f3f3;
  color: #0b6e70;
}
.sign-in-title { margin: 4px 0 0; color: #0b2545; font: 700 22px/1.25 var(--font); }
.sign-in-hint { margin: 0; color: #56657a; font: 16px/1.45 var(--font); }
.sign-in-button {
  min-height: 48px;
  margin-top: 8px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: #0b6e70;
  color: #fff;
  font: 600 16px/1.2 var(--font);
  cursor: pointer;
  transition: background-color var(--ease);
}
.sign-in-button:hover { background: #095a5c; }
.sign-in-button:focus-visible { outline: 3px solid #0b2545; outline-offset: 3px; }

/* ---------- Narrow screens: one pane at a time ---------- */

.switcher { display: none; }

@media (max-width: 899.98px) {
  .switcher {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--chrome-line);
  }
  .switcher .segmented { display: flex; width: 100%; max-width: 560px; }
  .switcher .segment { flex: 1 1 0; padding: 4px 8px; font-size: 14px; }

  .pane-head, .divider { display: none; }
  .pane-left, .pane-right { flex: 1 1 auto; }
  .split[data-view="left"] .pane-right,
  .split[data-view="right"] .pane-left { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}