/* CNCL Theme — Deep Navy + Blue Accent
   Overrides Chainlit's default dark theme to match the CNCL brand.
   Color palette derived from the CNCL app icon. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── CNCL Palette ──────────────────────────────────── */
  --cncl-bg: #080818;
  --cncl-surface: #0e0e24;
  --cncl-surface-2: #161638;
  --cncl-accent: #4a6cf7;
  --cncl-accent-dim: #3858d4;
  --cncl-accent-glow: rgba(74, 108, 247, .2);
  --cncl-text: #e8e8f0;
  --cncl-text-dim: #8888aa;
  --cncl-border: rgba(74, 108, 247, .12);
  --cncl-border-hover: rgba(74, 108, 247, .25);
}

/* ── Global ──────────────────────────────────────────── */
body,
html {
  font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
  background: var(--cncl-bg) !important;
}

* {
  font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
}

/* ── Sidebar ─────────────────────────────────────────── */
.MuiDrawer-paper,
[class*="sidebar"],
aside {
  background: var(--cncl-surface) !important;
  border-right: 1px solid var(--cncl-border) !important;
}

/* ── Header ──────────────────────────────────────────── */
header,
[class*="header"],
.MuiAppBar-root {
  background: var(--cncl-surface) !important;
  border-bottom: 1px solid var(--cncl-border) !important;
  backdrop-filter: blur(20px);
}

/* ── Main Content Area ───────────────────────────────── */
main,
[class*="main"],
.MuiBox-root {
  background: var(--cncl-bg) !important;
}

/* ── Message Bubbles ─────────────────────────────────── */
/* Assistant messages */
[class*="message"]:not([class*="user"]) {
  background: var(--cncl-surface) !important;
  border: 1px solid var(--cncl-border) !important;
  border-radius: 12px !important;
}

/* ── Input Area ──────────────────────────────────────── */
textarea,
[class*="composer"] textarea,
[class*="input"] textarea {
  background: var(--cncl-surface) !important;
  border: 1px solid var(--cncl-border) !important;
  border-radius: 12px !important;
  color: var(--cncl-text) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

textarea:focus,
[class*="composer"] textarea:focus {
  border-color: var(--cncl-accent) !important;
  box-shadow: 0 0 0 3px var(--cncl-accent-glow) !important;
  outline: none !important;
}

/* Input container/wrapper */
[class*="composer"],
[class*="inputContainer"] {
  background: var(--cncl-bg) !important;
  border-top: 1px solid var(--cncl-border) !important;
}

/* ── Buttons ─────────────────────────────────────────── */
button[class*="primary"],
button[class*="submit"],
[class*="composer"] button[type="submit"] {
  background: var(--cncl-accent) !important;
  border: none !important;
  border-radius: 10px !important;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s !important;
}

button[class*="primary"]:hover,
button[class*="submit"]:hover {
  background: var(--cncl-accent-dim) !important;
  box-shadow: 0 4px 16px var(--cncl-accent-glow) !important;
  transform: translateY(-1px) !important;
}

/* ── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--cncl-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--cncl-surface-2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cncl-accent);
}

/* ── Code Blocks ─────────────────────────────────────── */
pre,
code {
  background: var(--cncl-surface) !important;
  border: 1px solid var(--cncl-border) !important;
  border-radius: 8px !important;
}

code {
  border-radius: 4px !important;
  padding: 2px 6px !important;
}

/* ── Links ───────────────────────────────────────────── */
a {
  color: var(--cncl-accent) !important;
}

a:hover {
  color: #6b8cfa !important;
}

/* ── Markdown Content ────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--cncl-text) !important;
}

/* ── Thread List / History ───────────────────────────── */
[class*="thread"],
[class*="history"] {
  border-bottom: 1px solid var(--cncl-border) !important;
}

[class*="thread"]:hover,
[class*="history"]:hover {
  background: var(--cncl-surface) !important;
}

/* ── Tooltips & Popovers ────────────────────────────── */
.MuiTooltip-tooltip,
[class*="tooltip"],
[class*="popover"] {
  background: var(--cncl-surface-2) !important;
  border: 1px solid var(--cncl-border) !important;
  border-radius: 8px !important;
}

/* ── Loading / Spinner ───────────────────────────────── */
[class*="loading"] svg,
.MuiCircularProgress-root {
  color: var(--cncl-accent) !important;
}

/* ── Selection ───────────────────────────────────────── */
::selection {
  background: var(--cncl-accent-glow);
  color: white;
}

/* ── Welcome / Readme ────────────────────────────────── */
[class*="readme"],
[class*="welcome"] {
  background: transparent !important;
}

/* ── Hide Chainlit Branding ──────────────────────────── */

/* Watermark / "Powered by Chainlit" */
.watermark,
[class*="watermark"],
[class*="powered"],
a[href*="chainlit.io"],
a[href*="chainlit"] {
  display: none !important;
  visibility: hidden !important;
}

/* Override the "LLMs can make mistakes" disclaimer link if it contains Chainlit */
footer a[href*="chainlit"] {
  display: none !important;
}

/* Hide default Chainlit logo from header */
[class*="logo"] img[src*="chainlit"],
img[alt*="Chainlit"],
img[alt*="chainlit"] {
  display: none !important;
}