/* Operator brand touches on top of public/theme.json (blue #1d2b4d, red #e30427) */

:root {
  --brand-blue: #1d2b4d;
  --brand-red: #e30427;
}

/* Inter everywhere (Chainlit sets --font-sans, but form controls fall back to the UA font) */
html, body, button, input, textarea, select { font-family: var(--font-sans); }

/* header: flat, same background as the page, no separator line; logo a bit larger */
#header { border-bottom: 0; background: hsl(var(--background)); }
#header img[alt="logo"], #header a img { height: 34px; width: auto; }
/* sidebar header icons (collapse, search, new chat): Chainlit ships three different icon sizes/weights -> normalise */
[data-sidebar="header"] button svg, #header > div:first-child button svg { width: 20px !important; height: 20px !important; color: hsl(var(--muted-foreground)); }
[data-sidebar="header"] button, #header > div:first-child button { width: 34px; height: 34px; }
/* sidebar: same background as the page, no divider */
[data-sidebar="sidebar"] { border-right: 0 !important; }
.peer[data-state="expanded"] > div > div { border-right: 0 !important; }

/* user messages: left to the theme (light blue-grey bubble via --accent, dark blue text) */

/* result tables */
.markdown-body table, .prose table { border-collapse: collapse; font-size: 0.85rem; }
.markdown-body th, .prose th { background: hsl(var(--secondary)); color: var(--brand-blue); font-weight: 600; }
.markdown-body td, .markdown-body th, .prose td, .prose th { border: 1px solid hsl(var(--border)); padding: 4px 8px; }
.markdown-body tr:nth-child(even) td, .prose tr:nth-child(even) td { background: hsl(var(--muted) / 0.5); }

/* links & details */
.markdown-body a, .prose a { color: var(--brand-blue); text-decoration: underline; }
.dark .markdown-body a, .dark .prose a { color: #9db9f0; }
details > summary { cursor: pointer; color: hsl(var(--muted-foreground)); font-size: 0.85rem; }

/* send button in brand blue */
button[type="submit"], #chat-submit { background: var(--brand-blue) !important; color: #fff !important; }
button[type="submit"]:hover, #chat-submit:hover { background: #2a3d6d !important; }

/* code blocks (SQL) */
pre, code { font-size: 0.8rem; }

/* language switch (public/lang.js) */
#lang-switch { display: inline-flex; align-items: stretch; gap: 0; margin: 0 6px; border: 1px solid hsl(var(--border)); border-radius: 8px; overflow: hidden; height: 32px; }
#lang-switch .lang-btn { border: 0; border-right: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--muted-foreground)); font-size: 13px; font-weight: 500;
  padding: 0 10px; cursor: pointer; line-height: 30px; }
#lang-switch .lang-btn:last-child { border-right: 0; }
#lang-switch .lang-btn:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
#lang-switch .lang-btn.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 600; }
#readme-button, #theme-toggle { border: 1px solid hsl(var(--border)) !important; border-radius: 8px !important; height: 32px !important; }
#theme-toggle { width: 32px !important; }

/* running step title: Chainlit's shimmer fades from --muted to --foreground (invisible on white) -> solid brand blue + soft pulse */
.loading-shimmer {
  background: none !important;
  -webkit-text-fill-color: var(--brand-blue) !important;
  color: var(--brand-blue) !important;
  animation: op-pulse 1.6s ease-in-out infinite !important;
}
@keyframes op-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.dark .loading-shimmer, [data-theme="dark"] .loading-shimmer {
  -webkit-text-fill-color: #c9d0de !important; color: #c9d0de !important;
}

/* icons (our brand-blue SVGs) inside primary (blue) buttons, e.g. the selected starter category pill -> white */
button.bg-primary img, .bg-primary > img, [class*="bg-primary"] img { filter: brightness(0) invert(1); }

/* full width: Chainlit caps the chat/composer/readme column at min(60rem,100vw) via inline style -> lift the cap */
div[style*="60rem"], div[style*="48rem"] { max-width: 100% !important; }
#element-view { max-width: 100% !important; }
/* charts use the whole message width */
.inline-plotly, .inline-plotly > div, .js-plotly-plot, .plot-container, .svg-container { width: 100% !important; }

/* Chainlit wraps inline charts in a fit-content container capped at 600px; with an autosized figure that collapses to 0 width */
.inline-plotly-container { max-width: 100% !important; width: 100% !important; }

/* evidence side panel: compact typography (Chainlit renders element names/markdown headings large) */
#side-view-content h1, #side-view-content h2, #side-view-content h3, #side-view-content .text-2xl, #side-view-content .text-xl,
#side-view-content .text-lg { font-size: 0.95rem !important; font-weight: 600 !important; margin: 0.6rem 0 0.3rem !important; }
#side-view-content h4 { font-size: 0.85rem !important; font-weight: 700 !important; color: var(--brand-blue); margin: 0.9rem 0 0.25rem !important;
  text-transform: uppercase; letter-spacing: 0.04em; }
#side-view-content h5 { font-size: 0.8rem !important; font-weight: 600 !important; margin: 0.7rem 0 0.2rem !important; color: #4a5570; }
#side-view-content p, #side-view-content li, #side-view-content td, #side-view-content th { font-size: 0.8rem !important; line-height: 1.4; }
#side-view-content pre, #side-view-content code { font-size: 0.72rem !important; }
#side-view-content table { font-size: 0.75rem !important; }
#side-view-title { font-size: 0.95rem !important; font-weight: 600; }

/* ---- user card at the bottom of the sidebar (public/lang.js): click -> dropdown (Profile / Admin / Log out) ---- */
body:has(.peer[data-state="expanded"] [data-sidebar="sidebar"]) #user-nav-button { display: none; }
#user-card { margin-top: auto; padding: 10px 10px 14px; font-size: 13px; position: relative; }
#user-card .uc-row { display: flex; align-items: center; gap: 12px; min-width: 0; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#user-card .uc-row:hover, #user-card .uc-row[aria-expanded="true"] { background: hsl(var(--sidebar-accent)); }
#user-card .uc-avatar { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: hsl(var(--primary));
  color: hsl(var(--primary-foreground)); font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; }
#user-card .uc-text { min-width: 0; line-height: 1.35; flex: 1; }
#user-card .uc-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#user-card .uc-pos { color: hsl(var(--muted-foreground)); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#user-card .uc-caret { color: hsl(var(--muted-foreground)); display: inline-flex; }
#user-card .uc-menu { position: absolute; left: 10px; right: 10px; bottom: calc(100% - 6px); background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border)); border-radius: 10px; padding: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); z-index: 50; }
#user-card .uc-item { display: block; width: 100%; text-align: left; padding: 7px 10px; font-size: 13px; border: 0; border-radius: 7px; background: transparent;
  color: inherit; cursor: pointer; }
#user-card .uc-item:hover { background: hsl(var(--accent)); }
#user-card .uc-logout:hover { color: #e30427; }

/* ---- profile modal (public/lang.js) ---- */
#profile-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); }
#profile-modal .pm-backdrop { position: absolute; inset: 0; background: rgba(10, 16, 30, 0.45); }
#profile-modal .pm-card { position: relative; width: min(480px, calc(100vw - 32px)); background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border-radius: 12px; padding: 28px 30px 24px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); }
#profile-modal .pm-close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; font-size: 22px; line-height: 1;
  color: hsl(var(--muted-foreground)); cursor: pointer; }
#profile-modal .pm-close:hover { color: hsl(var(--foreground)); }
#profile-modal .pm-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
#profile-modal .pm-avatar { width: 56px; height: 56px; border-radius: 50%; background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  font-weight: 600; font-size: 20px; display: flex; align-items: center; justify-content: center; flex: 0 0 56px; }
#profile-modal .pm-name { font-size: 18px; font-weight: 700; }
#profile-modal .pm-sub { font-size: 13px; color: hsl(var(--muted-foreground)); }
#profile-modal .pm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#profile-modal .pm-table td { padding: 9px 0; border-top: 1px solid hsl(var(--border)); }
#profile-modal .pm-table td:first-child { color: hsl(var(--muted-foreground)); width: 42%; padding-right: 8px; }
#profile-modal .pm-hint { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 18px; }
/* composer: flat filled box, no outline, text clear of the rounded corner */
/* geometry: text starts 26 px from the top and left edge (18 box + 8 textarea/icon inset), icons sit 26 px from the left too */
#message-composer { border: 0 !important; box-shadow: none !important; padding: 18px 18px 14px !important; }
#chat-input { padding-left: 8px !important; padding-right: 8px !important; }

/* ---- result tables (cl.Dataframe): compact cells, numeric columns right-aligned (class set by lang.js) ---- */
.dataframe table { font-size: 0.85rem; }
.dataframe th, .dataframe td { padding: 6px 10px !important; height: auto !important; white-space: nowrap; }
.dataframe td { max-width: 28rem; overflow: hidden; text-overflow: ellipsis; }
.dataframe th.num, .dataframe td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dataframe th.num > div { justify-content: flex-end; }
.dataframe th { color: var(--brand-blue); font-weight: 600; }

/* ---- starter cards (public/lang.js splits "Title | subtext") ---- */
button.starter-card { height: auto !important; width: 280px; max-width: 100%; padding: 12px 14px !important; border-radius: 12px !important;
  align-items: flex-start; white-space: normal; text-align: left; }
button.starter-card > div { align-items: flex-start; gap: 10px; }
button.starter-card img { width: 22px; height: 22px; margin-top: 1px; flex: 0 0 22px; }
button.starter-card p { white-space: normal; overflow: visible; }
button.starter-card .st-title { display: block; font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); line-height: 1.3; }
button.starter-card .st-sub { display: block; font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 3px; line-height: 1.4; }
div:has(> button.starter-card) { gap: 10px !important; }

/* ---- branding (public/lang.js): header = Operator only, left; welcome screen = Operator x customer, larger ---- */
#cobrand-h { display: inline-flex; align-items: center; margin-left: 10px; }
#cobrand-h img { height: 20px; width: auto; display: block; }
#cobrand-w { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 18px; }
#cobrand-w img { height: 38px; width: auto; max-width: 260px; display: block; }
#cobrand-w .cb-x { color: hsl(var(--muted-foreground)); font-size: 20px; line-height: 1; }
#cobrand-w .cb-name { font-weight: 650; font-size: 19px; color: hsl(var(--foreground)); }

/* ---- internal docs overlay (public/lang.js, admins only) ---- */
#internal-docs-button { border: 1px solid hsl(var(--border)); border-radius: 8px; height: 32px; padding: 0 12px;
  background: transparent; color: var(--brand-red); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; margin-left: 6px; }
#internal-docs-button:hover { background: hsl(var(--accent)); }
#internal-docs { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
#internal-docs .idoc-backdrop { position: absolute; inset: 0; background: rgba(10, 16, 30, 0.5); }
#internal-docs .idoc-panel { position: relative; width: min(1100px, 94vw); height: 90vh; background: hsl(var(--background));
  border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); }
#internal-docs .idoc-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 14px;
  border-bottom: 1px solid hsl(var(--border)); }
#internal-docs .idoc-tabs { display: flex; gap: 4px; }
#internal-docs .idoc-tabs button { border: 0; background: transparent; color: hsl(var(--muted-foreground)); font: inherit;
  font-size: 13.5px; font-weight: 500; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
#internal-docs .idoc-tabs button:hover { background: hsl(var(--accent)); }
#internal-docs .idoc-tabs button.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 600; }
#internal-docs .idoc-close { border: 0; background: transparent; color: hsl(var(--muted-foreground)); font-size: 16px;
  cursor: pointer; padding: 6px 10px; border-radius: 8px; }
#internal-docs .idoc-close:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
#internal-docs .idoc-frame { flex: 1; border: 0; width: 100%; background: #fff; }

/* ---- readme dialog: same narrow width as the internal-docs overlay ---- */
div[role="dialog"]:has(.prose.flex-grow) { max-width: min(1100px, 94vw) !important; width: min(1100px, 94vw) !important; }
div[role="dialog"] .prose.flex-grow { max-width: 72ch; margin: 0 auto; }

/* readme dialog: the top disclaimer blockquote as a highlighted notice box */
div[role="dialog"] .prose.flex-grow blockquote { border-left: 4px solid var(--brand-red); background: hsl(var(--secondary));
  border-radius: 0 10px 10px 0; padding: 10px 18px; font-style: normal; }
div[role="dialog"] .prose.flex-grow blockquote li { margin: 6px 0; }
div[role="dialog"] .prose.flex-grow blockquote p { margin: 0; }

/* dark theme: the brand-navy icon SVGs (starters, category pills) disappear on dark ground -> render them white;
   EXCEPT on the selected category pill, whose bg-primary is light in dark mode -> keep them dark there */
.dark img[src*="/public/icons/"] { filter: brightness(0) invert(1); }
.dark button.bg-primary img, .dark [class*="bg-primary"] img { filter: none; }

/* profile modal: self-service password change (details/summary below the hint) */
#profile-modal .pm-pw { margin-top: 16px; border-top: 1px solid hsl(var(--border)); padding-top: 10px; font-size: 13px; }
#profile-modal .pm-pw summary { cursor: pointer; font-weight: 600; color: #1d2b4d; list-style: none; }
#profile-modal .pm-pw summary::before { content: "›"; display: inline-block; margin-right: 6px; transition: transform .15s; }
#profile-modal .pm-pw[open] summary::before { transform: rotate(90deg); }
#profile-modal .pm-pw label { display: block; margin-top: 10px; font-size: 12px; color: hsl(var(--muted-foreground)); }
#profile-modal .pm-pw input { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid #c3cbda; border-radius: 8px; font: inherit; font-size: 13px; color: #1d2b4d; background: #fff; }
#profile-modal .pm-pw input:focus { outline: none; border-color: #1d2b4d; box-shadow: 0 0 0 3px rgba(29,43,77,.14); }
#profile-modal .pw-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
#profile-modal .pw-save { padding: 7px 14px; border-radius: 8px; border: 1px solid #1d2b4d; background: #1d2b4d; color: #fff; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
#profile-modal .pw-save:hover { background: #2a3d6d; }
#profile-modal .pw-out { font-size: 12px; }
#profile-modal .pw-out.ok { color: #1a9c5b; } #profile-modal .pw-out.bad { color: #e30427; }

/* HenrIQ product pill (header, login) — mirrors .product on the landing page */
.hq-pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: #1d2b4d;
  padding: 5px 12px 5px 6px; border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--muted) / .6);
  line-height: 1; white-space: nowrap; user-select: none;
}
.hq-pill svg { width: 22px; height: 22px; display: block; }
#cobrand-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 6px; }
#hq-pill-w { font-size: 15px; padding: 7px 15px 7px 8px; }
#hq-pill-w svg { width: 26px; height: 26px; }
#hq-pill-login { margin: 0 auto 14px; font-size: 15px; padding: 7px 15px 7px 8px; }
#hq-pill-login svg { width: 26px; height: 26px; }
.dark .hq-pill { color: #fff; }