/* ===========================================================
   Meridian — the control surface, applied to the platform chrome.

   Loaded AFTER indie.css, and additive on purpose: the whole customization is
   this file plus one <link> in indie.chat.html / admin.html, so pulling an
   upstream indie.css is a straight copy with nothing to re-apply.

   The seven app documents in app-templates/ are authored in this same language
   (black and white carry structure, red is only ever exception, everything is
   squared off, micro-labels are uppercase monospace). Without this file the
   chrome around them would still be indie.chat's rounded terracotta editorial
   design, and the seam between the sidebar and an open app would show.
   =========================================================== */

:root {
  /* Squared off. indie.css routes most corners through these two. */
  --rad:    0;
  --rad-lg: 0;

  /* A colder, flatter canvas: the apps sit on #f4f4f4. */
  --canvas:    #f4f4f4;
  --surface:   #ffffff;
  --surface-2: #f4f4f4;
  --surface-3: #ebebeb;

  --ink:   #0a0a0a;
  --ink-2: #5a5a5a;
  --ink-3: #767676;   /* 4.5:1 on white — indie.css's #88888d is not */
  --ink-4: #a3a3a3;

  --line:        #dcdcdc;
  --line-2:      #c9c9c9;
  --line-strong: #0a0a0a;

  /* Two tones only. The accent family itself comes from the branding record
     (PUT /api/branding sets --terra and its shades from one hex), so the red
     stays configurable; what this file removes is the THIRD hue. "Live" and
     "active" become black — emphasis without a second signal colour competing
     with red for "look here". */
  --green:      #0a0a0a;
  --green-wash: #efefef;
  --green-line: #dcdcdc;
  --maroon:     #a5170a;
  --gold:       #767676;

  /* Neutral grotesque + a real monospace. Both stacks are local, which also
     means the chrome no longer depends on Google Fonts being reachable. */
  --sans: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* indie.css sets ~110 radii literally rather than through --rad. Rather than
   chase each one, flatten them here and let SVG keep its own geometry. */
body :not(svg):not(svg *) { border-radius: 0 !important; }

/* Hairlines and micro-labels, matched to the apps. */
.mono { letter-spacing: 0.12em; font-weight: 700; }
.conv-head { letter-spacing: 0.12em; font-weight: 700; }

/* The app rail reads as a numbered index, the way the app spines do. */
.apps-list { counter-reset: mrdn-app; }
.apps-list .app-tab .conv-title::before {
  counter-increment: mrdn-app;
  content: counter(mrdn-app, decimal-leading-zero);
  font: 700 9px var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink-4);
  margin-right: 7px;
  flex: none;
}
.apps-list .app-tab.active .conv-title::before { color: var(--terra); }

/* An open app is framed, not floated: no shadow between the chrome and a
   surface that already draws its own black border. */
.appws-frame { border: 0; }
.appws-stage .topbar { border-bottom: 1px solid var(--line-strong); }

/* -----------------------------------------------------------
   Upstream e38eeb7 (resizable panes, confirm-before-destroy, docked-agent
   switcher, expandable tool calls, topbar title fix).

   That CSS is token-driven throughout, so it inherits this file's palette and
   squared corners for free. Only the two cases below escape the tokens.
   ----------------------------------------------------------- */

/* indie.css hardcodes the danger-button hover as #732c1f, its terracotta
   brown, so a delete button rests on our red (--maroon) and then hovers to a
   warm brown that belongs to the palette this file replaces. Keep the hover on
   the one signal colour: same hue, pressed darker. */
.btn.danger:hover { background: #7d1208; border-color: #7d1208; }

/* The new topbar kind label ("AGENT" / "APP" / "CHAT") is a monospace
   micro-label, the same class of thing as .mono and .conv-head above, but it
   is not carrying .mono so it arrives at upstream's lighter tracking and
   regular weight. Match the others or it reads as a different typographic
   system two pixels from them. */
.topbar-title .tt-kind { letter-spacing: 0.12em; font-weight: 700; }

/* -----------------------------------------------------------
   Agent engine picker (Settings). The gateway serves several models, so the
   list needs a capability marker and a one-line character note per route.
   These classes are ours, not upstream's, which is why they live here: an
   upstream sync copies indie.css wholesale and would drop them.
   ----------------------------------------------------------- */

/* The list is now three lines per option, so let the label stack instead of
   fighting the flex row indie.css sets on .agent-be-opt. */
.agent-be-opt > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }

/* Capability marker. Black by default, because in this palette emphasis is
   weight and red is reserved for the exception, and CHAT ONLY genuinely is
   one: pick it and every agent turn comes back empty. */
.agent-be-cap {
  flex: none;
  font-size: 9px; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--line-2); padding: 1px 5px;
}
.agent-be-cap.warn { color: var(--maroon); border-color: var(--maroon); }

/* The note explains the trade-off (speed, reasoning handling) and must not
   compete with the model name for attention. */
.agent-be-note { flex: 1 1 100%; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }

.agent-be-warn {
  margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--maroon); border-left-width: 3px;
  font-size: 12px; line-height: 1.5; color: var(--maroon);
}