/* Vera custom UI tweaks.
 *
 * Body/message text enlarged ~1.2x for readability. Headings are pinned to rem
 * sizes so they do NOT scale with the larger base (h1 in particular is kept at
 * its prior size). Tune the 1.2em below if a different scale is wanted. */
.message-content {
  font-size: 1.2em;
  line-height: 1.55;
}

.message-content h1 {
  font-size: 2rem;
}

.message-content h2 {
  font-size: 1.6rem;
}

.message-content h3 {
  font-size: 1.35rem;
}

/* Message composer (the chat input box).
 *
 * Chainlit renders the input as #message-composer. In light mode it uses
 * bg-accent, which in theme.json shares the page's tone, so on the white
 * background it would vanish. Give it a defined outline (border + soft shadow)
 * and more breathing room so it reads as a distinct, elevated field. The id
 * selector outranks Chainlit's utility classes, so no !important is needed. */
#message-composer {
  padding: 1rem 1.25rem;
  min-height: 7rem;
  border: 1px solid hsl(0 0% 85%);
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.06), 0 6px 16px hsl(0 0% 0% / 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Teal focus ring + a touch more lift while typing. */
#message-composer:focus-within {
  border-color: hsl(var(--primary));
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.06), 0 8px 22px hsl(0 0% 0% / 0.08);
}

/* Roomier text-entry area inside the composer. */
#chat-input {
  min-height: 2.75rem;
  font-size: 1.05rem;
  line-height: 1.5;
}

/* Dark mode keeps its own card fill; just tune the border and drop the
 * light-mode shadow (Chainlit toggles dark via a .dark ancestor class). */
.dark #message-composer {
  border-color: hsl(0 0% 30%);
  box-shadow: none;
}

.dark #message-composer:focus-within {
  border-color: hsl(var(--primary));
  box-shadow: none;
}