/* ============================================================
   Knowledge Base — custom Chainlit theme polish
   Loaded via [UI] custom_css = "/public/custom.css"
   ============================================================ */

/* Remove the "Built with Chainlit" watermark for a cleaner, product-like feel */
.watermark {
  display: none !important;
}

/* --- Overall rhythm: give the conversation more room to breathe --- */
#message-composer,
.step,
[data-step-type] {
  font-size: 0.95rem;
}

/* Softer, roomier message layout */
.message,
[class*="message-content"] {
  line-height: 1.65;
}

/* User messages -> subtle bubble, right aligned feel like a modern chat app */
.user-message,
[data-author][class*="user"] .message-content {
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
}

/* --- Chat input composer: pill-style, prominent --- */
#message-composer {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#message-composer:focus-within {
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15);
}

/* --- Steps / chain-of-thought: quieter, card-like --- */
.step {
  border-radius: calc(var(--radius) - 0.25rem);
}

/* --- Source side elements & inline references --- */
.element-link,
a[class*="source"] {
  font-weight: 600;
  color: hsl(var(--primary));
  text-decoration: none;
}
.element-link:hover {
  text-decoration: underline;
}

/* --- Starter cards on the welcome screen: crisper hover --- */
[class*="starter"] {
  border-radius: var(--radius) !important;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
[class*="starter"]:hover {
  transform: translateY(-1px);
  border-color: hsl(var(--primary)) !important;
  background: hsl(var(--accent)) !important;
}

/* --- Code blocks: match theme surfaces --- */
pre code,
.markdown-body pre {
  border-radius: calc(var(--radius) - 0.35rem);
}

/* --- Tighten the top header, feels less "framework", more "app" --- */
header {
  backdrop-filter: saturate(1.1);
}