/* SRE chat, IBM Carbon Design System. Tokens come from carbon.css (loaded first); nothing here is a raw
   colour except the UI Shell header, which Carbon keeps Gray 100 in every theme. Theme: White, the same
   as the demo console and the control plane; <html data-carbon-theme="g100"> when dark: the system
   setting, or the viewer's choice from the header's theme button (localStorage sre-theme; index.html
   applies it before paint). Rules followed: one theme per view, Blue 60 once (the primary action), sharp
   corners (radius only on tags and the AI label), 4px grid through the spacing tokens, borders not
   shadows, IBM Plex Sans for UI and Plex Mono for data, Carbon icons only. */

/* ---- theme-scoped component tokens carbon.css does not carry (Carbon tag + notification colours) ---- */
:root, [data-carbon-theme="white"], [data-carbon-theme="g10"] {
  --tag-green-bg: var(--cds-green-20);  --tag-green-fg: var(--cds-green-70);
  --tag-red-bg:   var(--cds-red-20);    --tag-red-fg:   var(--cds-red-70);
  --tag-blue-bg:  var(--cds-blue-20);   --tag-blue-fg:  var(--cds-blue-70);
  --tag-gray-bg:  var(--cds-gray-20);   --tag-gray-fg:  var(--cds-gray-80);
  --tag-warm-bg:  var(--cds-yellow-10); --tag-warm-fg:  var(--cds-yellow-70);
  --notification-info-bg:  var(--cds-blue-10);
  --notification-error-bg: var(--cds-red-10);
  --ai-border: var(--cds-blue-60);
}
[data-carbon-theme="g90"], [data-carbon-theme="g100"] {
  --tag-green-bg: var(--cds-green-80);  --tag-green-fg: var(--cds-green-30);
  --tag-red-bg:   var(--cds-red-80);    --tag-red-fg:   var(--cds-red-40);
  --tag-blue-bg:  var(--cds-blue-70);   --tag-blue-fg:  var(--cds-blue-20);
  --tag-gray-bg:  var(--cds-gray-70);   --tag-gray-fg:  var(--cds-gray-10);
  --tag-warm-bg:  var(--cds-yellow-80); --tag-warm-fg:  var(--cds-yellow-20);
  --notification-info-bg:  var(--cds-gray-90);
  --notification-error-bg: var(--cds-gray-90);
  --ai-border: var(--cds-blue-40);
  --cds-background-hover: rgba(141,141,141,0.16);
  --cds-layer-hover-01: #333333;
  --cds-layer-accent-01: #393939;
  --cds-border-strong-01: #8d8d8d;
  --cds-text-on-color: #ffffff;
  /* Carbon g100 status colours (carbon.css keeps the light values) */
  --cds-text-error: var(--cds-red-40);
  --cds-support-error: var(--cds-red-50);
  --cds-support-success: var(--cds-green-40);
  --cds-support-info: var(--cds-blue-50);
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
[hidden] { display: none !important; }
body {
  margin: 0; display: flex; flex-direction: column;
  font-size: var(--cds-body-01-size); line-height: var(--cds-body-01-lh); letter-spacing: 0.16px;
}
h1, h2, p { margin: 0; }
button { font: inherit; }

/* productive type styles used in the markup */
.cds-label       { font-size: var(--cds-label-01-size); line-height: var(--cds-label-01-lh); letter-spacing: 0.32px; color: var(--cds-text-secondary); margin: 0 0 var(--cds-spacing-03); }
.cds-body-01     { font-size: var(--cds-body-01-size); line-height: var(--cds-body-01-lh); letter-spacing: 0.16px; }
.cds-body-02     { font-size: var(--cds-body-02-size); line-height: var(--cds-body-02-lh); letter-spacing: 0; }
.cds-heading-02  { font-size: var(--cds-heading-02-size); line-height: var(--cds-heading-02-lh); font-weight: 600; letter-spacing: 0; }
.cds-heading-04  { font-size: var(--cds-heading-04-size); line-height: var(--cds-heading-04-lh); font-weight: 400; letter-spacing: 0; margin-bottom: var(--cds-spacing-05); }
.text-secondary  { color: var(--cds-text-secondary); }
.mono            { font-family: var(--cds-font-mono); font-size: var(--cds-code-01-size); line-height: var(--cds-code-01-lh); letter-spacing: 0.32px; }
.muted           { color: var(--cds-text-secondary); }

/* ---- UI Shell header: 48px, Gray 100 in every theme; #theme sits outside #who so the sign-in page has it ---- */
.cds-header {
  height: 3rem; flex: none; display: flex; align-items: center;
  background: #161616; color: #f4f4f4; border-bottom: 1px solid #393939;
}
.cds-header__name {
  display: flex; align-items: center; height: 100%; padding: 0 var(--cds-spacing-07) 0 var(--cds-spacing-05);
  color: #f4f4f4; text-decoration: none; border: 2px solid transparent;
  font-size: var(--cds-body-01-size); line-height: 1.125rem; letter-spacing: 0.1px; font-weight: 600; white-space: nowrap;
}
.cds-header__name:hover { color: #f4f4f4; border-bottom-color: transparent; }
.cds-header__name:focus-visible { outline: none; border-color: #ffffff; }
.cds-header__name .prefix { font-weight: 400; margin-right: var(--cds-spacing-02); }
.cds-header__sub { color: #c6c6c6; font-size: var(--cds-label-01-size); line-height: var(--cds-label-01-lh); letter-spacing: 0.32px; }
.cds-header__global { margin-left: auto; display: flex; align-items: stretch; height: 100%; }
#theme { height: 100%; }
#who[hidden] + #theme { margin-left: auto; }   /* sign-in page: the theme button alone on the right */
.cds-header__global .user { align-self: center; font-weight: 600; padding: 0 var(--cds-spacing-03); }
.cds-header__global .tags { align-self: center; display: flex; gap: var(--cds-spacing-02); margin-right: var(--cds-spacing-03); }
.cds-header__global .tags span {
  display: inline-flex; align-items: center; height: 1.5rem; padding: 0 var(--cds-spacing-03); border-radius: var(--cds-radius-pill);
  background: #393939; color: #f4f4f4; font-size: var(--cds-label-01-size); line-height: var(--cds-label-01-lh); letter-spacing: 0.32px;
}
/* header actions: Carbon HeaderGlobalAction geometry (48px tall, no radius, hover one layer up) */
.cds-header__action {
  display: inline-flex; align-items: center; gap: var(--cds-spacing-03); height: 100%; padding: 0 var(--cds-spacing-05);
  background: transparent; color: #f4f4f4; border: 2px solid transparent; cursor: pointer;
  font-size: var(--cds-body-01-size); letter-spacing: 0.16px; transition: background var(--cds-duration-fast-02) var(--cds-motion-standard);
}
.cds-header__action:hover { background: #353535; }
.cds-header__action:active { background: #4c4c4c; }
.cds-header__action[aria-expanded="true"] { background: #393939; }
.cds-header__action:focus-visible { outline: none; border-color: #ffffff; }
.cds-header__action svg { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: none; }

/* ---- buttons: square, left-aligned label, 48px default (lg), 32px sm ---- */
.cds-btn {
  display: inline-flex; align-items: center; min-height: 3rem; max-width: 20rem; padding: 0 3.9375rem 0 0.9375rem;
  border: 1px solid transparent; border-radius: 0; cursor: pointer; text-decoration: none; vertical-align: top;
  font-size: var(--cds-body-01-size); line-height: 1.125rem; letter-spacing: 0.16px;
  transition: background var(--cds-duration-fast-01) var(--cds-motion-standard), border-color var(--cds-duration-fast-01) var(--cds-motion-standard);
}
.cds-btn--sm { min-height: 2rem; padding-right: 3.9375rem; }
.cds-btn--primary { background: var(--cds-button-primary); color: var(--cds-text-on-color); }
.cds-btn--primary:hover { background: var(--cds-button-primary-hover); color: var(--cds-text-on-color); }
.cds-btn--primary:active { background: var(--cds-button-primary-active); }
.cds-btn--tertiary { background: transparent; color: var(--cds-button-tertiary); border-color: var(--cds-button-tertiary); padding-right: 0.9375rem; }
.cds-btn--tertiary:hover { background: var(--cds-button-tertiary-hover); border-color: var(--cds-button-tertiary-hover); color: var(--cds-text-on-color); }
.cds-btn--tertiary:active { background: var(--cds-button-primary-active); }
.cds-btn--ghost { background: transparent; color: var(--cds-link-primary); padding-right: 0.9375rem; }
.cds-btn--ghost:hover { background: var(--cds-background-hover); color: var(--cds-link-primary-hover); }
.cds-btn--ghost:active { background: var(--cds-background-active); }
.cds-btn:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; box-shadow: inset 0 0 0 1px var(--cds-focus), inset 0 0 0 2px var(--cds-focus-inset); }
.cds-btn:disabled { background: var(--cds-layer-accent-01); border-color: var(--cds-layer-accent-01); color: var(--cds-text-disabled); cursor: not-allowed; }
a.cds-btn:hover { border-bottom-color: transparent; }

/* ---- tiles and tags ---- */
.cds-tile { background: var(--cds-layer-01); padding: var(--cds-spacing-05); }
.cds-tag {
  display: inline-flex; align-items: center; height: 1.5rem; padding: 0 var(--cds-spacing-03); border-radius: var(--cds-radius-pill);
  font-size: var(--cds-label-01-size); line-height: var(--cds-label-01-lh); letter-spacing: 0.32px; white-space: nowrap; max-width: 100%;
  background: var(--tag-gray-bg); color: var(--tag-gray-fg);
}
.cds-tag--green { background: var(--tag-green-bg); color: var(--tag-green-fg); }
.cds-tag--red   { background: var(--tag-red-bg);   color: var(--tag-red-fg); }
.cds-tag--blue  { background: var(--tag-blue-bg);  color: var(--tag-blue-fg); }
.cds-tag--gray  { background: var(--tag-gray-bg);  color: var(--tag-gray-fg); }
.cds-tag--warm  { background: var(--tag-warm-bg);  color: var(--tag-warm-fg); }
.badge { margin-right: var(--cds-spacing-03); }
/* Carbon AI label: the one place a pill with a blue stroke is allowed; marks the model's turns */
.cds-ai-label {
  display: inline-flex; align-items: center; height: 1.25rem; padding: 0 var(--cds-spacing-02); border-radius: var(--cds-radius-pill);
  border: 1px solid var(--ai-border); color: var(--ai-border); font-size: var(--cds-label-01-size); line-height: var(--cds-label-01-lh); font-weight: 600; letter-spacing: 0.32px;
}

/* ---- sign-in (shown only without a session) ---- */
.signin { flex: 1; padding: var(--cds-spacing-09) var(--cds-spacing-05); }
.signin-tile { max-width: 40rem; margin: 0 auto; padding: var(--cds-spacing-07); }
.signin-tile .cds-body-02 { margin-bottom: var(--cds-spacing-07); }

/* ---- workbench: chat left, trace right ---- */
.app { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(22.5rem, 2fr); gap: var(--cds-spacing-05); padding: var(--cds-spacing-05); }
.chat, .trace { display: flex; flex-direction: column; min-height: 0; padding: 0; }

.messages { flex: 1; overflow: auto; padding: var(--cds-spacing-05); display: flex; flex-direction: column; gap: var(--cds-spacing-05); }
.msg { max-width: 85%; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--cds-layer-02); padding: var(--cds-spacing-04) var(--cds-spacing-05); border-radius: var(--cds-radius-sm); }
.msg.assistant { align-self: flex-start; padding-left: var(--cds-spacing-05); border-left: 2px solid var(--cds-border-subtle-01); }
.msg.assistant::before { content: "AI"; display: inline-flex; align-items: center; height: 1.25rem; padding: 0 var(--cds-spacing-02); margin-bottom: var(--cds-spacing-02); border-radius: var(--cds-radius-pill); border: 1px solid var(--ai-border); color: var(--ai-border); font-size: var(--cds-label-01-size); line-height: var(--cds-label-01-lh); font-weight: 600; letter-spacing: 0.32px; }
.msg.assistant.error { border-left-color: var(--cds-support-error); }
.msg.assistant.blocked { border-left-color: var(--cds-support-error); }
.msg.system.blocked { align-self: flex-start; color: var(--cds-text-error); font-size: var(--cds-label-01-size); line-height: var(--cds-label-01-lh); padding-left: var(--cds-spacing-05); }
.msg p { margin: 0 0 var(--cds-spacing-03); font-size: inherit; line-height: inherit; }
.msg p:last-child { margin: 0; }
.msg ul { margin: var(--cds-spacing-02) 0 var(--cds-spacing-03) 1.125rem; padding: 0; }
.msg code { font-family: var(--cds-font-mono); font-size: var(--cds-code-01-size); background: var(--cds-layer-accent-01); padding: 0 var(--cds-spacing-02); }
.msg .cursor { display: inline-block; width: 0.5rem; height: 1em; background: var(--cds-text-secondary); vertical-align: -0.125rem; animation: blink 1s steps(2) infinite; }
@keyframes blink { to { opacity: 0; } }

.chips { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-03); padding: 0 var(--cds-spacing-05) var(--cds-spacing-03); }
.chips .cds-btn { max-width: none; }
.composer { display: flex; gap: var(--cds-spacing-03); padding: var(--cds-spacing-05); border-top: 1px solid var(--cds-border-subtle-00); align-items: flex-end; }
.cds-text-area {
  flex: 1; resize: none; max-height: 8.75rem; padding: 0.6875rem var(--cds-spacing-05);
  font: inherit; font-size: var(--cds-body-01-size); line-height: var(--cds-body-01-lh); letter-spacing: 0.16px;
  background: var(--cds-field-02); color: var(--cds-text-primary); border: none; border-bottom: 1px solid var(--cds-border-strong-01); border-radius: 0;
}
.cds-text-area::placeholder { color: var(--cds-text-placeholder); }
.cds-text-area:hover { background: var(--cds-field-hover-01); }
.cds-text-area:focus { outline: 2px solid var(--cds-focus); outline-offset: -2px; background: var(--cds-field-02); }
.composer .cds-btn { min-height: 2.625rem; padding-right: 0.9375rem; }

/* ---- trace panel: one card per tool call, a structured list with a status bar ---- */
.chat-actions { display: flex; gap: var(--cds-spacing-02); }
.msg.system { align-self: stretch; max-width: none; color: var(--cds-text-secondary); font-size: var(--cds-label-01-size); line-height: var(--cds-label-01-lh); letter-spacing: 0.32px; padding: var(--cds-spacing-02) 0; border-top: 1px solid var(--cds-border-subtle-00); }
.msg.system.error { color: var(--cds-text-error); }
.chat-head, .trace-head { display: flex; align-items: center; justify-content: space-between; padding: var(--cds-spacing-03) var(--cds-spacing-03) var(--cds-spacing-03) var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle-00); }
.cards { flex: 1; overflow: auto; padding: var(--cds-spacing-05); display: flex; flex-direction: column; gap: var(--cds-spacing-04); }
.tcard { background: var(--cds-layer-02); border-left: 3px solid var(--cds-border-strong-01); padding: var(--cds-spacing-04) var(--cds-spacing-05); }
.tcard.ok { border-left-color: var(--cds-support-success); }
.tcard.fail { border-left-color: var(--cds-support-error); }
.tcard.pending { border-left-color: var(--cds-support-warning); }
.tcard .title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cds-spacing-03); font-weight: 600; margin-bottom: var(--cds-spacing-03); }
.tcard .title .t { font-family: var(--cds-font-mono); font-size: var(--cds-code-01-size); color: var(--cds-text-secondary); font-weight: 400; white-space: nowrap; }
.row { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--cds-spacing-03); padding: var(--cds-spacing-03) 0; border-top: 1px solid var(--cds-border-subtle-00); }
.row .k { color: var(--cds-text-secondary); font-size: var(--cds-label-01-size); line-height: var(--cds-label-01-lh); letter-spacing: 0.32px; padding-top: var(--cds-spacing-02); }
.row .v { min-width: 0; }
.row .v div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .v .big { white-space: normal; }
.reason { color: var(--cds-text-primary); white-space: normal !important; }
.tcard.fail .reason { color: var(--cds-text-error); }

/* ---- access panel (why 200 or 403): a Carbon data table ---- */
.access { margin: var(--cds-spacing-05) var(--cds-spacing-05) 0; }
.access-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--cds-spacing-05); margin-bottom: var(--cds-spacing-04); }
.access-head p { margin-top: var(--cds-spacing-02); max-width: 56rem; }
.access .err { color: var(--cds-text-error); }
.cds-table { width: 100%; border-collapse: collapse; font-size: var(--cds-body-01-size); line-height: var(--cds-body-01-lh); letter-spacing: 0.16px; }
.cds-table th { background: var(--cds-layer-accent-01); color: var(--cds-text-primary); text-align: left; font-weight: 600; padding: 0 var(--cds-spacing-05); height: 3rem; vertical-align: middle; }
.cds-table th .sub { display: block; font-weight: 400; font-family: var(--cds-font-mono); font-size: var(--cds-code-01-size); line-height: var(--cds-code-01-lh); color: var(--cds-text-secondary); }
.cds-table td { padding: 0 var(--cds-spacing-05); height: 3rem; border-top: 1px solid var(--cds-border-subtle-00); background: var(--cds-layer-02); vertical-align: middle; }
.cds-table tbody tr:hover td { background: var(--cds-layer-hover-01); }
.cds-table tr.asked td { background: var(--notification-info-bg); }
.cds-table td .mono { display: block; }
.cds-table td .tool { color: var(--cds-text-secondary); font-size: var(--cds-label-01-size); line-height: var(--cds-label-01-lh); }
.cds-table .by { display: block; font-family: var(--cds-font-mono); font-size: var(--cds-code-01-size); line-height: var(--cds-code-01-lh); color: var(--cds-text-secondary); margin-top: var(--cds-spacing-01); }
.access details { margin-top: var(--cds-spacing-04); }
.access summary { cursor: pointer; color: var(--cds-link-primary); }
.access summary:hover { color: var(--cds-link-primary-hover); }
.access pre { font-family: var(--cds-font-mono); font-size: var(--cds-code-01-size); line-height: var(--cds-code-01-lh); background: var(--cds-layer-02); padding: var(--cds-spacing-04) var(--cds-spacing-05); margin: var(--cds-spacing-03) 0 0; overflow: auto; white-space: pre; }

/* ---- event stream panel: topic select + the last N events of a Kafka topic ---- */
.stream-controls { display: flex; align-items: flex-end; gap: var(--cds-spacing-03); flex: none; }
.stream-controls .cds-label { margin: 0 0 var(--cds-spacing-02); }
.cds-select {
  height: 2.5rem; min-width: 10rem; padding: 0 var(--cds-spacing-09) 0 var(--cds-spacing-05); border: none; border-bottom: 1px solid var(--cds-border-strong-01);
  border-radius: 0; background: var(--cds-field-01); color: var(--cds-text-primary); font-family: inherit; font-size: var(--cds-body-01-size);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238d8d8d'><path d='M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z'/></svg>");
  background-repeat: no-repeat; background-position: right var(--cds-spacing-05) center; background-size: 1rem;
}
.cds-select:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.stream .cds-table td { height: auto; padding-top: var(--cds-spacing-03); padding-bottom: var(--cds-spacing-03); vertical-align: top; }
.stream .cds-table td.ts, .stream .cds-table td.ref { font-family: var(--cds-font-mono); font-size: var(--cds-code-01-size); line-height: var(--cds-code-01-lh); white-space: nowrap; color: var(--cds-text-secondary); }
.stream .cds-table td.kind { font-family: var(--cds-font-mono); font-size: var(--cds-code-01-size); white-space: nowrap; }
.stream .cds-table tr.fail td.kind { color: var(--cds-text-error); }
.stream .cds-table td.sum { width: 45%; }
.stream .cds-table td.sum summary { cursor: pointer; list-style: none; }
.stream .cds-table td.sum summary::-webkit-details-marker { display: none; }
.stream .cds-table td.sum summary:hover { color: var(--cds-link-primary); }
.stream .cds-table td.sum pre { max-height: 15rem; margin-top: var(--cds-spacing-03); white-space: pre-wrap; word-break: break-all; }
.stream-wrap { max-height: 24rem; overflow: auto; }
.stream-foot { margin-top: var(--cds-spacing-03); }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); padding: var(--cds-spacing-03); }
  .chat { min-height: 60vh; }
  .msg { max-width: 95%; }
  .cds-header__sub, .cds-header__action span { display: none; }
  .access-head, .stream-controls { flex-wrap: wrap; }
}