:root {
  /* Dark mode color tokens */
  --text-primary: #e6eef8; /* main text on dark bg */
  --text-secondary: #9aa6b2; /* secondary, subtle text */
  --container-bg: #0f1724; /* chat container background */
  --page-bg-start: #071025; /* page gradient start */
  --page-bg-end: #0b1530; /* page gradient end */
  --border-color: rgba(255, 255, 255, 0.04); /* subtle light border on dark */
  --user-message-bg: #9aa6b2; /* brighter user bubble (blue) */
  --user-message-text: #ffffff;
  --bot-message-bg: #1f3252; /* slightly lighter than container */
  --bot-message-text: #f7fbff;
  /* brighter bot message styling for higher contrast */
  --bot-message-border: rgba(255, 255, 255, 0.06);
  --bot-message-shadow: 0 8px 24px rgba(2, 6, 23, 0.6);
  --bot-message-bg: #1f3252; /* brighter bubble against the dark container */
  --input-bg: #0b1220;
  --icon-bg: transparent; /* accent for header icon */
  --shadow-color: rgba(0, 0, 0, 0.6);
  --focus-ring: #0f1724;
  --prompt-background: #0f1724;
  /* Mobile-tunable chat height; change this to adjust chat height on small screens */
  --mobile-chat-height: 50vh;
  /* Height reserved for the chat input area so it can be kept visible */
  --input-height: 80px;
  /* Breakpoint reference values (for documentation and easy edits).
     Note: CSS custom properties cannot be used inside media queries in
     current browsers, so update the media query values below to match
     these numbers when you change them. */
  --bp-tablet: 900px;
  --bp-mobile: 600px;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  /* Removed overflow: hidden to allow scrolling */
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, var(--page-bg-start), var(--page-bg-end));
  color: var(--text-primary);
  padding: 0; /* we'll control outer spacing with the grid */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}