/* ── Hide Chainlit branding ────────────────────────────────────────────────── */
a[href*="chainlit"],
a[href*="Chainlit"],
[class*="watermark"],
[class*="Watermark"],
[class*="built-with"],
[class*="builtWith"],
[class*="BuiltWith"],
[class*="poweredBy"],
[class*="powered-by"],
footer a[target="_blank"],
footer a {
  display: none !important;
}
img[alt="Chainlit"],
img[alt="chainlit"],
svg[aria-label="Chainlit"],
svg[aria-label="chainlit"] {
  display: none !important;
}
/* Hide any footer that only contains the branding link */
footer:empty,
footer:has(a[href*="chainlit"]) {
  display: none !important;
}

/* ── Sembo brand palette ───────────────────────────────────────────────────── */
:root {
  --sembo-blue: #0057b8;
  --sembo-teal: #00a9a5;
  --sembo-light: #e8f4fd;
  --sembo-dark: #0a1628;
  --sembo-mid: #1a2e4a;
}

/* Dark theme overrides */
[data-theme="dark"] {
  --background: var(--sembo-dark) !important;
  --card: var(--sembo-mid) !important;
}

/* ── Header accent ─────────────────────────────────────────────────────────── */
header {
  border-bottom: 2px solid var(--sembo-teal) !important;
}

/* ── Chat profile pills — active state ────────────────────────────────────── */
[class*="ChatProfile"][aria-selected="true"],
[class*="chat-profile"][aria-selected="true"] {
  background: var(--sembo-blue) !important;
  color: #fff !important;
}

/* ── Send button ───────────────────────────────────────────────────────────── */
button[type="submit"],
[class*="submit"] {
  background: var(--sembo-blue) !important;
}
button[type="submit"]:hover,
[class*="submit"]:hover {
  background: var(--sembo-teal) !important;
}

/* ── Agent step / tool call chips ──────────────────────────────────────────── */
[class*="step"],
[class*="Step"] {
  border-left: 3px solid var(--sembo-teal) !important;
  /* Prevent message content from overlapping the step border line */
  padding-left: 12px !important;
  box-sizing: border-box;
}

/* Keep step header icon/avatar from clipping into the border */
[class*="step"] > *:first-child,
[class*="Step"] > *:first-child {
  margin-left: 0 !important;
}

/* ── Thinking / loading animation alignment ────────────────────────────────── */
/* The loader sits inside a flex row — ensure it stays vertically centred
   and doesn't overflow the step container */
[class*="thinking"],
[class*="Thinking"],
[class*="loader"],
[class*="Loader"],
[class*="loading"],
[class*="Loading"] {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Animated dots / spinner that sometimes drifts down */
[class*="thinking"] svg,
[class*="loader"] svg,
[class*="loading"] svg {
  vertical-align: middle !important;
}

/* ── Inline file attachment chips ─────────────────────────────────────────── */
[class*="element"][class*="inline"] {
  border: 1px solid var(--sembo-teal) !important;
  border-radius: 6px;
}

/* ── Starter buttons ───────────────────────────────────────────────────────── */
[class*="starter"],
[class*="Starter"] {
  border: 1px solid var(--sembo-blue) !important;
}
[class*="starter"]:hover,
[class*="Starter"]:hover {
  background: var(--sembo-light) !important;
  color: var(--sembo-dark) !important;
}

/* ── Sidebar (Agent Activity panel) ───────────────────────────────────────── */
aside,
[class*="sidebar"],
[class*="Sidebar"] {
  border-left: 1px solid var(--sembo-teal) !important;
}


/* ── Context bar (system messages from "Context" author) ──────────────────── */
[data-author="Context"] {
  background: rgba(0, 169, 165, 0.06) !important;
  border: 1px solid rgba(0, 169, 165, 0.25) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 0.82em !important;
  opacity: 0.9;
}
[data-author="Context"] p {
  margin: 0 !important;
}

/* ── Usage footer line ─────────────────────────────────────────────────────── */
p em {
  color: #8899aa;
  font-size: 0.78em;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sembo-teal); border-radius: 3px; }