:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e222b;
  --text: #e6e8ec;
  --muted: #9aa3b2;
  --accent: #35b7f2;
  --accent-2: #2a6df0;
  --border: #262b36;
  --user: #223250;
  --tool: #1b2a1f;

  /* Fluid brand */
  --brand-cyan: #2cc5f6;
  --brand-blue: #5b8bf5;
  --brand-violet: #8155e6;
  --brand-magenta: #a62dc7;
  --brand-grad: linear-gradient(135deg, var(--brand-cyan), var(--brand-blue), var(--brand-violet), var(--brand-magenta));
  --brand-splash: linear-gradient(215deg, #2cc5f6 0%, #5b8bf5 34%, #8155e6 68%, #a62dc7 100%);
  --font-brand: "Futura", "Avenir Next", "Century Gothic", "Nunito Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  max-width: 820px;
  margin: 0 auto;
  height: 100dvh;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

/* ── Splash ─────────────────────────────────────────────── */
.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-splash);
  color: #fff;
  transition: opacity 0.55s ease;
}
.splash.hidden {
  opacity: 0;
  pointer-events: none;
}
.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  animation: rise 0.7s ease both;
}
.wavemark--lg {
  width: 88px;
  height: 88px;
  transform-origin: center;
  animation: pulse 1.7s ease-in-out infinite;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes pulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.86); }
}

/* ── Login ──────────────────────────────────────────────── */
.login {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--brand-splash);
}
.login.hidden { display: none; }
.login-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 340px;
  padding: 30px 26px 24px;
  border-radius: 16px;
  background: rgba(16, 18, 24, 0.72);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  color: #fff;
}
.login-card .wavemark--md { align-self: center; color: #fff; }

/* Stacked lockup. ARC is three letters, so set beside FLUID it read about half
   its width and hung off the right. Stacking also makes the lockup independent
   of how many letters the second word has, so a rename can't unbalance it.
   The negative right margin cancels the trailing space letter-spacing leaves
   after the final letter, so the line centres true under FLUID. */
/* Compound selector on purpose: .wordmark is defined further down this file with
   align-items:baseline and gap:8px, and at equal specificity the later rule wins.
   .wordmark.login-wordmark outranks it regardless of order. */
.wordmark.login-wordmark {
  align-self: center;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}
.login-wordmark .wm-sub {
  font-size: 11px;
  letter-spacing: 2.5px;
  margin-right: -2.5px;
  opacity: 0.84;
}
.login-card input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  padding: 11px 13px;
}
.login-card input::placeholder { color: rgba(255, 255, 255, 0.6); }
.login-card input:focus { outline: none; border-color: #fff; }
.login-card #loginSubmit {
  margin-top: 6px;
  background: #fff;
  color: #17324f;
  border: none;
  font-weight: 700;
  padding: 11px;
}
.login-card #loginSubmit:hover { filter: brightness(0.95); }
.login-error { min-height: 18px; margin: 2px 0 0; font-size: 13px; color: #ffd0d0; text-align: center; }

/* ── Login: single sign-on ──────────────────────────────── */
/* The card is a form-less flex column now, so the password fields keep their own. */
.login-card #loginForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sso-list { display: flex; flex-direction: column; gap: 8px; }
.sso-list.hidden { display: none; }

/* Primary way in: solid white, same weight as the old password button. */
.sso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 11px 13px;
  border: none;
  border-radius: 10px;
  background: #fff;
  color: #17324f;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.sso-btn:hover { filter: brightness(0.95); }
.sso-btn:active { transform: translateY(1px); }
.sso-btn:disabled { opacity: 0.65; cursor: default; }
.sso-btn svg { width: 16px; height: 16px; flex: none; opacity: 0.75; }

/* Quiet text link that reveals the password fallback. */
.login-link {
  align-self: center;
  padding: 4px 6px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.login-link:hover { color: #fff; }
.login-link.hidden { display: none; }

.password-area { display: flex; flex-direction: column; gap: 12px; }
.password-area.hidden { display: none; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}
.login-divider.hidden { display: none; }

/* With SSO present the password button steps back to an outline. */
.login-card.has-sso #loginSubmit {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-weight: 600;
}
.login-card.has-sso #loginSubmit:hover { background: rgba(255, 255, 255, 0.2); filter: none; }

/* A returned SSO error can be a whole sentence, so give it room to wrap. */
.login-notice {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(180, 30, 50, 0.28);
  border: 1px solid rgba(255, 160, 170, 0.45);
  color: #ffe2e5;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}
.login-notice.hidden { display: none; }

.tenant-meta { font-size: 12px; color: var(--muted); }

/* Operator-only controls: the integration itself (importing APIs, exposed
   operations, the tool-load gauge). A customer's admin never sees these. */
body:not(.is-operator) .operator-only { display: none !important; }

/* ── Brand wordmark + mark ──────────────────────────────── */
.wavemark { width: 30px; height: 30px; display: block; }
.wavemark--md { width: 54px; height: 54px; }

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-brand);
  text-transform: uppercase;
  color: #fff;
}
.wm-fluid { font-weight: 800; letter-spacing: 3px; font-size: 18px; }
.wm-sub { font-weight: 400; letter-spacing: 4px; font-size: 13px; opacity: 0.92; }

/* In the header the lockup stays on one line. COGNITION is long enough to balance
   FLUID on its own, so it wants LESS tracking, not more — widely spaced capitals
   read as stretched at this length and push the brand into the controls. Smaller
   than FLUID and near-full opacity keeps the hierarchy without shouting. The
   negative right margin cancels the trailing space letter-spacing leaves after
   the final letter, so the lockup measures true. */
header .wm-sub {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.5px;
  margin-right: -1.5px;
  opacity: 0.9;
}

.wordmark--lg {
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.wordmark--lg .wm-fluid { font-size: 46px; letter-spacing: 7px; }
.wordmark--lg .wm-sub { font-size: 21px; letter-spacing: 9px; }

/* ── Header ─────────────────────────────────────────────── */
header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand-grad);
}
.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  color: #fff;
}

.controls { display: flex; align-items: center; gap: 8px; }
.controls label { color: var(--muted); font-size: 13px; }

select, button, input {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

button { cursor: pointer; }
button:hover { border-color: var(--accent); }
#send {
  background: var(--brand-grad);
  border: none;
  color: #fff;
  font-weight: 600;
}
#send:hover { filter: brightness(1.08); }
#send:disabled { opacity: 0.5; cursor: default; filter: none; }

main {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.msg { display: flex; flex-direction: column; gap: 4px; max-width: 88%; }
.msg .who { font-size: 12px; color: var(--muted); }
.msg .bubble {
  padding: 10px 13px;
  border-radius: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.user .bubble {
  background: linear-gradient(135deg, #244a86, #2f2f7a);
  border-color: transparent;
}
.msg.assistant { align-self: flex-start; }

.tools { align-self: flex-start; max-width: 88%; }
.tool-event {
  font-size: 12.5px;
  color: var(--muted);
  background: var(--tool);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
}
.tool-event code { color: #9fd6a6; }
.tool-event.error code { color: #ff9a9a; }

.chart-box {
  width: min(560px, 78vw);
  height: 300px;
  margin-top: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 8px;
}
.chart-error { margin-top: 8px; font-size: 13px; color: var(--muted); }
.chart-note { margin-top: 6px; font-size: 12px; color: #f2d98c; max-width: min(560px, 78vw); }
.stat-tile {
  margin-top: 10px;
  min-width: 170px;
  padding: 16px 20px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
.stat-value {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.3px;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.05;
}
.stat-label { font-size: 12.5px; color: var(--muted); }

.msg-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chat-img {
  max-height: 130px;
  max-width: 180px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  object-fit: cover;
}
.chat-img:hover { border-color: var(--brand-cyan); }

.empty { color: var(--muted); text-align: center; margin-top: 24px; }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.chip {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--text);
  font-size: 13.5px;
}
.chip:hover {
  border-color: var(--brand-cyan);
  background: var(--panel);
  box-shadow: 0 0 0 1px rgba(44, 197, 246, 0.25);
}

.confirm {
  align-self: flex-start;
  max-width: 88%;
  border: 1px solid #6b5a1f;
  background: #241f12;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.confirm-title { font-size: 13.5px; color: #f2d98c; }
.confirm-action { display: flex; flex-direction: column; gap: 4px; }
.confirm-action code { color: #ffd479; font-size: 13px; }
.confirm-args {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 6px 8px;
  overflow-x: auto;
  white-space: pre;
}
.confirm-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.confirm-btns button { padding: 7px 16px; }
.confirm-btns .primary { background: var(--brand-grad); border: none; color: #fff; font-weight: 600; }
.confirm-result { align-self: flex-end; font-size: 13px; font-weight: 600; }
.confirm-result.ok { color: #8fe0a0; }
.confirm-result.no { color: #ff9a9a; }

form#composer {
  display: flex;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}
#input { flex: 1; }
#input:focus { outline: none; border-color: var(--brand-cyan); }

/* ── Admin modal ────────────────────────────────────────── */
#adminBtn.hidden,
#admin.hidden,
#specMeta.hidden,
#importFields.hidden,
.conn-form.hidden,
.conn-ops.hidden,
.conn-chips.hidden,
.conn-reports.hidden { display: none; }
#adminBtn {
  background: var(--brand-grad);
  border: none;
  color: #fff;
  font-weight: 600;
}
#adminBtn:hover { filter: brightness(1.08); }

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}
.modal-card {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px 22px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h2 { margin: 0; font-size: 17px; }
.icon-btn { background: transparent; border: none; color: var(--muted); font-size: 16px; padding: 4px 8px; }
.icon-btn:hover { color: var(--text); }

.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.field span { font-size: 12.5px; }
.field input, .field select { color: var(--text); }
.field.hidden { display: none; }
.section-note { font-size: 12px; margin: -4px 0 8px; }
.conn-desc { font-size: 12px; margin: 2px 0 4px; }
.cond-editor { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.cond-row { align-items: center; }
.cond-row input, .cond-row select { min-width: 0; }
.cond-row [data-cf="op"] { flex: 0 0 90px; }
.src-details summary { cursor: pointer; user-select: none; }
.src-details summary:hover { color: var(--text); }
.src-details > :not(summary) { margin-top: 4px; word-break: break-word; line-height: 1.5; }

.tool-meter { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; line-height: 1.5; padding: 9px 12px; border-radius: 8px; margin: 8px 0 4px; border: 1px solid transparent; }
.tool-meter:empty { display: none; }
.tool-meter .tm-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; position: relative; top: 2px; }
.tool-meter .tm-text { flex: 1; min-width: 0; }
.tool-meter code { background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 4px; white-space: nowrap; font-size: 12px; }
.tm-green { background: rgba(46,160,90,0.12); border-color: rgba(46,160,90,0.4); }
.tm-green .tm-dot { background: #2ea05a; }
.tm-yellow { background: rgba(200,160,40,0.12); border-color: rgba(200,160,40,0.45); }
.tm-yellow .tm-dot { background: #e0a020; }
.tm-red { background: rgba(200,60,60,0.14); border-color: rgba(200,60,60,0.5); }
.tm-red .tm-dot { background: #d64545; }

.audit-log { max-height: 320px; overflow: auto; border: 1px solid var(--panel-2); border-radius: 8px; }
.audit-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.audit-table th, .audit-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--panel-2); vertical-align: top; }
.audit-table th { position: sticky; top: 0; background: var(--panel-2); font-weight: 600; }
.audit-ts { white-space: nowrap; }
.audit-detail { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.audit-status { padding: 1px 6px; border-radius: 6px; font-size: 11px; }
.audit-ok { background: rgba(46, 160, 90, 0.25); }
.audit-error { background: rgba(200, 60, 60, 0.28); }
.audit-denied { background: rgba(180, 140, 40, 0.28); }
.field .row { display: flex; gap: 8px; }
.field .row input { flex: 1; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.spec-meta {
  font-size: 12.5px;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 11px;
}
.spec-meta b { color: var(--text); }

.ops-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.muted { color: var(--muted); }
.ops-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}
.op {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 8px 11px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.op:last-child { border-bottom: none; }
.op input { margin-top: 3px; }
.op .verb {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--brand-blue);
  color: #fff;
  flex-shrink: 0;
}
.op .op-path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.op .op-summary { color: var(--muted); font-size: 12px; }

button.primary {
  background: var(--brand-grad);
  border: none;
  color: #fff;
  font-weight: 700;
  padding: 10px;
  margin-top: 6px;
}
button.primary:hover { filter: brightness(1.08); }
button.primary:disabled { opacity: 0.5; filter: none; cursor: default; }

.admin-status { min-height: 18px; margin: 2px 0 0; font-size: 13px; text-align: center; }
.admin-status.ok { color: #8fe0a0; }
.admin-status.err { color: #ff9a9a; }

.section-title { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.sep { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

.conn-list { display: flex; flex-direction: column; gap: 8px; }
.conn { border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.conn-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; }
.conn-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.conn-actions { display: flex; align-items: center; gap: 4px; }
.conn-actions button { font-size: 12.5px; padding: 5px 9px; }
.badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}
.conn-form { display: flex; flex-direction: column; gap: 10px; padding: 0 11px 12px; }
.conn-form small { color: var(--muted); font-size: 11.5px; }
.conn-form textarea {
  min-height: 60px;
  resize: vertical;
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
button.primary.small { padding: 8px; align-self: flex-start; padding-left: 18px; padding-right: 18px; }
.conn-ops { display: flex; flex-direction: column; gap: 8px; padding: 0 11px 12px; }
.conn-ops .ops-list { max-height: 220px; }
.conn-chips { display: flex; flex-direction: column; gap: 8px; padding: 0 11px 12px; }
.chips-editor { display: flex; flex-direction: column; gap: 6px; }
.chip-row { display: flex; align-items: center; gap: 6px; }
.chip-row .chip-label { flex: 0 0 40%; }
.chip-row .chip-text { flex: 1; }
.chip-row input[type="text"], .chip-row input:not([type]) { padding: 6px 8px; }
.chip-send { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.chips-actions { display: flex; gap: 8px; align-items: center; }

.conn-reports { display: flex; flex-direction: column; gap: 8px; padding: 0 11px 12px; }
.reports-list { display: flex; flex-direction: column; gap: 10px; }
.report-def {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}
.rep-params-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.rep-params { display: flex; flex-direction: column; gap: 5px; }
.rep-param { display: flex; align-items: center; gap: 6px; }
.rep-param .pp-key { flex: 0 0 22%; }
.rep-param .pp-label { flex: 1; }
.rep-param .pp-type { flex: 0 0 90px; }
.pp-req { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.rep-spec {
  min-height: 120px;
  resize: vertical;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  white-space: pre;
  overflow-x: auto;
}
.reports-actions { display: flex; gap: 8px; align-items: center; }