/* HF Capital Lattice — brand overlay for Chainlit 2.x.
   Colors live in public/theme.json (HSL custom properties, light + warm-dark).
   This file loads the brand fonts, applies them, removes the upstream
   watermark, and adds mobile polish. Light ground #eef2f1 / ink #013026;
   warm-dark ground #141413 / cream #ECEAE4; accent mint #05c48e (both modes). */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
/* Tabler icon webfont — the query rail (public/query-rail.js) uses `ti ti-*`
   glyphs, and Chainlit ships no icon font of its own, so load one here. */
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.31.0/dist/tabler-icons.min.css');

:root {
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
}

html, body, button, input, textarea, select, .MuiTypography-root {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

code, pre, kbd, samp, .font-mono {
  font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
}

/* Remove the "Built with Chainlit" watermark. Permitted under Chainlit's
   Apache-2.0 licence. Element is <div class="watermark"> in this version. */
.watermark,
a[href*="chainlit.io"] {
  display: none !important;
}

/* Mobile: full-width composer + stacked starter cards. */
@media (max-width: 640px) {
  #starter-prompts,
  [class*="starter"] {
    width: 100% !important;
  }
}

/* ---- Chain-of-thought "look-up" steps (data-step-type="tool") -----------
   Each Lattice look-up renders as a Chainlit step: a small avatar icon plus a
   "Used {tool}" accordion bar, expandable to the raw result (truncated in
   app.py). For a non-technical reader we swap the repeated app-favicon avatar
   (the backend falls steps back to /favicon) for one quiet lookup glyph, and
   dim the "Used …" label so the steps recede behind the answer. */

:root {
  --lattice-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
}

/* Dim the "Using…/Used {tool}" bar so look-ups sit quietly under the answer. */
[data-step-type="tool"] button[id^="step-"] {
  color: hsl(var(--muted-foreground) / 0.6) !important;
  font-weight: 400 !important;
}

/* Swap the repeated favicon avatar for one subtle, theme-aware lookup glyph. */
[data-step-type="tool"] .ai-message > :first-child > * {
  display: none !important;
}
[data-step-type="tool"] .ai-message > :first-child {
  width: 1.05rem !important;
  height: 1.05rem !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  background: hsl(var(--muted-foreground) / 0.75) !important;
  -webkit-mask: var(--lattice-step-icon) center / contain no-repeat;
  mask: var(--lattice-step-icon) center / contain no-repeat;
}

/* Collapse consecutive look-up steps to a single updating line.
   Any tool step that is immediately followed by another is hidden (display: none
   removes it from layout), so the next step lands at the same position — the
   effect is a single line that rewrites in place rather than a growing stack.
   Works across turns because an answer message breaks the adjacency. */
[data-step-type="tool"]:has(+ [data-step-type="tool"]) {
  display: none !important;
}

/* ---- Smooth streaming overlay (public/stream-smooth.js) -------------------
   While a message streams, the JS hides Chainlit's live markdown node
   (.cl-smooth-hidden) and reveals the text one character at a time in a node it
   owns, then swaps back to the formatted markdown when streaming ends. */
.cl-smooth-hidden { display: none !important; }
.cl-smooth-cursor {
  display: inline-block;
  width: 0.5ch;
  height: 1.05em;
  margin-left: 1px;
  background: currentColor;
  opacity: 0.5;
  vertical-align: text-bottom;
  animation: cl-smooth-blink 1s steps(1) infinite;
}
@keyframes cl-smooth-blink { 50% { opacity: 0; } }

/* ---- Suggested-queries left rail (public/query-rail.js) -------------------
   The rail is appended to <body> (outside React) and fixed to the left edge;
   #app is padded to make room. Themed with Chainlit's HSL custom properties so
   it tracks light and warm-dark mode. Hidden until the chat app is present
   (body.cl-rail-on) so it never shows on the login screen. */
.cl-rail { display: none; }
body.cl-rail-on .cl-rail {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 244px;
  z-index: 20;
  background: hsl(var(--card, var(--background)));
  border-right: 1px solid hsl(var(--border) / 0.6);
  overflow-y: auto;
  overflow-x: hidden;
}
body.cl-rail-on.cl-rail-collapsed .cl-rail { width: 52px; }
body.cl-rail-on #app {
  box-sizing: border-box;
  padding-left: 244px;
  transition: padding-left 0.16s ease;
}
body.cl-rail-on.cl-rail-collapsed #app { padding-left: 52px; }

.cl-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 8px;
}
.cl-rail-collapsed .cl-rail-head { justify-content: center; }
.cl-rail-title { color: hsl(var(--muted-foreground) / 0.75); font-size: 11px; }
.cl-rail-collapsed .cl-rail-title { display: none; }

.cl-rail-toggle,
.cl-rail-group,
.cl-rail-q {
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: inherit;
}
.cl-rail-toggle {
  color: hsl(var(--muted-foreground) / 0.7);
  padding: 4px;
  border-radius: 6px;
  line-height: 1;
}
.cl-rail-toggle:hover { background: hsl(var(--muted-foreground) / 0.12); }

.cl-rail-list { display: flex; flex-direction: column; padding: 2px 6px 14px; gap: 1px; }
.cl-rail-group {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 9px 8px;
  border-radius: 8px;
  color: hsl(var(--foreground) / 0.82);
  font-size: 13px;
}
.cl-rail-group:hover { background: hsl(var(--muted-foreground) / 0.1); }
.cl-rail-group.active { color: hsl(var(--foreground)); }
.cl-rail-group > .ti:first-child {
  font-size: 18px;
  color: hsl(var(--muted-foreground) / 0.85);
  flex: 0 0 auto;
}
.cl-rail-group.active > .ti:first-child { color: hsl(var(--primary)); }
.cl-rail-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-rail-caret { font-size: 15px; color: hsl(var(--muted-foreground) / 0.5); flex: 0 0 auto; }
.cl-rail-collapsed .cl-rail-label,
.cl-rail-collapsed .cl-rail-caret { display: none; }
.cl-rail-collapsed .cl-rail-group { justify-content: center; padding: 9px 0; }

.cl-rail-queries { display: flex; flex-direction: column; gap: 6px; padding: 4px 6px 8px 10px; }
.cl-rail-collapsed .cl-rail-queries { display: none; }
.cl-rail-q {
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
  color: hsl(var(--foreground) / 0.8);
  background: hsl(var(--muted-foreground) / 0.06);
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: 8px;
  padding: 7px 9px;
}
.cl-rail-q:hover {
  background: hsl(var(--primary) / 0.14);
  border-color: hsl(var(--primary) / 0.4);
  color: hsl(var(--foreground));
}

/* Narrow screens: force the compact icon strip. */
@media (max-width: 760px) {
  body.cl-rail-on .cl-rail { width: 52px; }
  body.cl-rail-on #app { padding-left: 52px; }
  body.cl-rail-on .cl-rail-title,
  body.cl-rail-on .cl-rail-label,
  body.cl-rail-on .cl-rail-caret,
  body.cl-rail-on .cl-rail-queries { display: none; }
  body.cl-rail-on .cl-rail-group { justify-content: center; padding: 9px 0; }
}