/* Self-hosted Inter (variable woff2) — replaces the render-blocking Google
   Fonts request. One file per subset covers every weight (100–900); only the
   subsets whose unicode-range matches the page's text are downloaded, so
   Spanish content fetches the ~48KB latin file alone. Served same-origin with
   a 1-year immutable cache (see vercel.json), so there's no third-party DNS/TLS
   on the critical path. font-display: swap paints text immediately with the
   system fallback, then swaps to Inter once it loads. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --nopal-950: #052e16;
  --nopal-900: #064e3b;
  --nopal-700: #15803d;
  --nopal-logo: #067a52;
  --nopal-600: #16a34a;
  --nopal-500: #22c55e;
  --nopal-200: #bbf7d0;
  --nopal-100: #dcfce7;
  --cream: #f8fff9;
  --white: #ffffff;
  --ink: #102016;
  --muted: #607066;
  --line: rgba(21, 128, 61, 0.16);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* Paint the gradient on the root so it always covers the entire canvas — the
   full scrollable area, not just the body box. This keeps the background
   uniform even when out-of-flow content (e.g. the hidden beta-info popover)
   extends the document below the body, which previously left a mismatched
   flat band at the bottom. background-color is a solid fallback for any
   region the gradient can't reach (e.g. mobile overscroll). */
html {
  min-height: 100%;
  background-color: #f7fff8;
  background-image:
    radial-gradient(circle at top left, rgba(187, 247, 208, 0.76), transparent 34rem),
    linear-gradient(135deg, #f7fff8 0%, #ecfdf3 48%, #ffffff 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
}

.page-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  /* Symmetric vertical breathing room: the top of the title sits the same
     distance from the top of the page as the chat card sits from the bottom.
     The title's top padding lives here (not on .hero) so it stays a fixed
     44px across breakpoints, matching the 44px below the card. */
  padding: 41px 0 44px;
}

.hero {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  min-height: auto;
  padding: 0 16px 15px;
  text-align: center;
  overflow: hidden;
}

.ambient {
  position: absolute;
  border-radius: 999px;
  filter: blur(8px);
  opacity: 0.44;
  pointer-events: none;
}

.ambient-one {
  width: 220px;
  height: 220px;
  top: 7%;
  left: 8%;
  background: var(--nopal-200);
}

.ambient-two {
  width: 150px;
  height: 150px;
  right: 11%;
  bottom: 18%;
  background: rgba(34, 197, 94, 0.28);
}

h1 {
  z-index: 1;
  margin: 0;
  color: var(--ink);
  font-size: clamp(3.1rem, 10vw, 7.8rem);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 0.88;
}

.brand-name {
  color: var(--ink);
}

.brand-name span:last-child {
  color: var(--nopal-logo);
}

.logo-orb {
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(176px, 36vw, 330px);
  transform: translateY(6px);
}

.logo-orb img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 28px rgba(6, 78, 59, 0.14));
}

.hero-copy {
  z-index: 1;
  display: grid;
  gap: 6px;
  max-width: 720px;
}

.hero-copy p {
  margin: 0;
  color: var(--nopal-900);
  font-size: clamp(1.25rem, 3.8vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.hero-copy p:last-child {
  color: var(--muted);
  font-size: clamp(1rem, 2.4vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.countdown {
  z-index: 1;
  display: grid;
  gap: 14px;
  justify-items: center;
  width: 100%;
  max-width: 620px;
  margin: 12px 0;
}

.countdown-label {
  margin: 0;
  color: var(--nopal-900);
  font-size: clamp(0.85rem, 2.4vw, 1.05rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.countdown-date {
  margin: 13px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: clamp(0.78rem, 2vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 2vw, 16px);
  width: 100%;
}

.countdown-unit {
  display: grid;
  gap: 4px;
  padding: clamp(12px, 2.4vw, 20px) 6px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 36px rgba(6, 78, 59, 0.1);
  backdrop-filter: blur(12px);
}

.countdown-value {
  font-size: clamp(1.8rem, 7vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--nopal-logo);
  font-variant-numeric: tabular-nums;
}

.countdown-name {
  font-size: clamp(0.62rem, 1.8vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.chat-card {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(18px, 4vw, 28px);
  border: 1px solid var(--line);
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 24px 80px rgba(6, 78, 59, 0.12);
  backdrop-filter: blur(18px);
}

.chat-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

h2 {
  margin: 0;
  color: var(--nopal-950);
  font-size: clamp(1.45rem, 4vw, 2rem);
  letter-spacing: -0.04em;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--nopal-900);
  background: var(--cream);
  font-size: 0.82rem;
  font-weight: 700;
}

.status-pill span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nopal-500);
  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.14);
}

/* Beta status pill that opens a small "learning phase" panel on hover
   (desktop) or tap (mobile). */
.beta-info {
  position: relative;
  flex: 0 0 auto;
}

.beta-info-trigger {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}

.beta-info-trigger:hover,
.beta-info.is-open .beta-info-trigger {
  border-color: var(--nopal-500);
  background: var(--nopal-100);
}

.beta-info-trigger:focus-visible {
  outline: 2px solid var(--nopal-600);
  outline-offset: 2px;
}

.beta-info-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  width: min(340px, calc(100vw - 40px));
  /* Collapsed to zero height while closed so this absolutely-positioned panel
     adds nothing to the document's scrollable height. Otherwise the hidden
     popover (visibility: hidden still occupies layout) extended the page well
     below the chat card, leaving a large empty band at the bottom. Its real
     height is restored only when open, below. */
  max-height: 0;
  overflow-y: auto;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 22px 60px rgba(6, 78, 59, 0.18);
  color: var(--ink);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transform-origin: top right;
  /* Promote to its own compositor layer up front so the first open animates
     opacity/transform on an already-rasterized layer (shadow included) instead
     of repainting — keeps it smooth and avoids the initial lag. */
  will-change: opacity, transform;
  backface-visibility: hidden;
  transition:
    opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    max-height 220ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Invisible bridge across the gap so hovering from the pill to the panel
   keeps it open without flicker. */
.beta-info-popover::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.beta-info:hover .beta-info-popover,
.beta-info-trigger:focus-visible + .beta-info-popover,
.beta-info.is-open .beta-info-popover {
  opacity: 1;
  visibility: visible;
  max-height: min(70vh, 460px);
  transform: translateY(0);
}

.beta-info-title {
  margin: 0 0 10px;
  padding-right: 22px;
  color: var(--nopal-950);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.beta-info-popover p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

.beta-info-popover p:last-child {
  margin-bottom: 0;
}

.beta-info-popover strong {
  color: var(--nopal-900);
  font-weight: 700;
}

.beta-info-close {
  position: absolute;
  top: 10px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.beta-info-close:hover,
.beta-info-close:focus-visible {
  background: var(--nopal-100);
  color: var(--nopal-900);
}

.chat-log {
  display: grid;
  gap: 18px;
  align-content: start;
  min-height: 162px;
  max-height: 460px;
  overflow-y: auto;
  /* Pull the left edge into the card padding and pad it back the same amount,
     so a bot bubble can sit flush-left with the input below while its tail
     still has room to point outward without being clipped. */
  margin-left: -12px;
  padding: 8px 4px 16px 12px;
  scroll-behavior: smooth;
}

.message {
  width: fit-content;
  max-width: min(86%, 560px);
  padding: 13px 16px;
  border-radius: 20px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* User turns stay as a compact bubble on the right. */
.message-user {
  justify-self: end;
  color: var(--white);
  background: var(--nopal-logo);
  border-bottom-right-radius: 7px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Keep user bubble text white over the logo-green background (otherwise the
   shared .message-content rule below would force it to dark ink). */
.message-user .message-content {
  color: var(--white);
}

/* Assistant turns render as a full-width, document-style block — like
   ChatGPT / Claude / NotebookLM — so rich content can breathe, but with a
   small speech-bubble tail on the left so they read as incoming chat bubbles. */
.message-bot {
  position: relative;
  justify-self: stretch;
  max-width: 100%;
  margin-left: 0;
  padding: 16px 18px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 6px 22px rgba(6, 78, 59, 0.05);
}

/* Speech-bubble tail: ::before is the border-colored triangle sitting behind
   ::after (the white fill), so a 1px outline shows along the tail edges. */
.message-bot::before,
.message-bot::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.message-bot::before {
  left: -11px;
  top: 20px;
  border-width: 9px 11px 9px 0;
  border-color: transparent var(--line) transparent transparent;
}

.message-bot::after {
  left: -10px;
  top: 21px;
  border-width: 8px 10px 8px 0;
  border-color: transparent var(--white) transparent transparent;
}

/* Action row under an assistant reply: a square "copy" button and a circular
   "regenerate" button. */
.message-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.msg-action {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease,
    transform 160ms ease;
}

.msg-action-copy { border-radius: 8px; }
.msg-action-regen { border-radius: 50%; }

.msg-action svg { display: block; }

.msg-action:hover {
  background: var(--nopal-100);
  color: var(--nopal-900);
  border-color: var(--nopal-200);
}

.msg-action:active { transform: scale(0.92); }

.msg-action:focus-visible {
  outline: 2px solid var(--nopal-600);
  outline-offset: 2px;
}

.msg-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.msg-action.is-copied {
  color: var(--nopal-600);
  border-color: var(--nopal-200);
}

/* ---- Rich content typography (assistant replies) ---- */

.message-content {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ink);
  overflow-wrap: break-word;
}

.message-content > :first-child { margin-top: 0; }
.message-content > :last-child { margin-bottom: 0; }

.message-content p {
  margin: 0 0 0.85em;
}

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
  margin: 1.5em 0 0.55em;
  color: var(--nopal-950);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.message-content h1 { font-size: 1.5rem; }
.message-content h2 { font-size: 1.3rem; }
.message-content h3 { font-size: 1.15rem; }
.message-content h4 { font-size: 1.03rem; }
.message-content h5,
.message-content h6 { font-size: 0.95rem; color: var(--nopal-900); }

.message-content ul,
.message-content ol {
  margin: 0 0 0.85em;
  padding-left: 1.4em;
}

.message-content li {
  margin: 0.3em 0;
  line-height: 1.65;
}

.message-content li::marker {
  color: var(--nopal-600);
}

.message-content ul ul,
.message-content ul ol,
.message-content ol ul,
.message-content ol ol {
  margin: 0.3em 0 0.3em;
}

.message-content strong {
  font-weight: 700;
  color: var(--nopal-950);
}

.message-content a {
  color: var(--nopal-700);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.message-content a:hover { color: var(--nopal-600); }

.message-content blockquote {
  margin: 0 0 0.95em;
  padding: 0.15em 0 0.15em 1em;
  border-left: 3px solid var(--nopal-500);
  color: var(--muted);
}

.message-content blockquote > :last-child { margin-bottom: 0; }

.message-content .md-inline-code {
  padding: 0.12em 0.4em;
  border-radius: 6px;
  background: rgba(21, 128, 61, 0.1);
  color: var(--nopal-900);
  font-family: "SFMono-Regular", ui-monospace, "JetBrains Mono", "Menlo", "Consolas", monospace;
  font-size: 0.875em;
}

.message-content .md-codeblock {
  margin: 0 0 0.95em;
  padding: 14px 16px;
  border-radius: 14px;
  background: #0b1f17;
  color: #e7f3ec;
  overflow-x: auto;
  line-height: 1.6;
}

.message-content .md-codeblock code {
  font-family: "SFMono-Regular", ui-monospace, "JetBrains Mono", "Menlo", "Consolas", monospace;
  font-size: 0.875rem;
  white-space: pre;
}

.message-content .md-table-wrap {
  margin: 0 0 0.95em;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.message-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.message-content th,
.message-content td {
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.message-content thead th {
  background: var(--nopal-100);
  color: var(--nopal-950);
  font-weight: 700;
}

.message-content tbody tr:last-child td { border-bottom: 0; }

.message-content .md-left { text-align: left; }
.message-content .md-center { text-align: center; }
.message-content .md-right { text-align: right; }

/* Typing indicator — three dots shown while waiting for the first token. */
.typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
}

.typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nopal-500);
  opacity: 0.5;
  animation: nopal-typing 1.2s infinite ease-in-out both;
}

.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes nopal-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .typing span { animation: nopal-typing-fade 1.2s infinite ease-in-out both; }
  @keyframes nopal-typing-fade {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }
}

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
}

.chat-form input {
  min-width: 0;
  border: 0;
  padding: 0 12px;
  color: var(--ink);
  font: inherit;
  outline: 0;
}

.chat-form button {
  border: 0;
  border-radius: 999px;
  padding: 13px 20px;
  color: var(--white);
  background: var(--nopal-logo);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}

.chat-form button:hover { background: var(--nopal-600); transform: translateY(-1px); }
.chat-form button:disabled { cursor: not-allowed; opacity: 0.65; transform: none; }

.privacy-note {
  margin: 14px 8px 0;
  color: var(--muted);
  font-size: 0.65rem;
  text-align: center;
}

/* Terms & Conditions link in the disclaimer: a real link, but kept black
   (var(--ink)) instead of the green link color, so it reads as part of the
   note while still being clearly clickable. */
.privacy-note .terms-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.privacy-note .terms-link:hover,
.privacy-note .terms-link:focus-visible {
  color: var(--ink);
  text-decoration-thickness: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Legal / Terms & Conditions page ---- */

.legal-shell {
  width: min(880px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 64px;
  display: grid;
  gap: 28px;
}

.legal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.legal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  text-decoration: none;
  color: var(--ink);
}

.legal-brand-logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--nopal-900);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(12px);
  transition: border-color 180ms ease, background 180ms ease;
}

.legal-back:hover,
.legal-back:focus-visible {
  border-color: var(--nopal-500);
  background: var(--nopal-100);
}

/* The white "window" in the middle holding the full terms. */
.legal-card {
  padding: clamp(24px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 24px 80px rgba(6, 78, 59, 0.12);
  color: var(--ink);
}

.legal-eyebrow {
  margin: 0 0 8px;
  color: var(--nopal-logo);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal-card h1 {
  margin: 0 0 clamp(24px, 5vw, 56px) 0;
  color: var(--nopal-950);
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.legal-meta {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.legal-meta strong {
  color: var(--nopal-900);
  font-weight: 700;
}

.legal-card h2 {
  margin: 1.9em 0 0.6em;
  color: var(--nopal-950);
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.legal-card p {
  margin: 0 0 1em;
  color: var(--ink);
  font-size: 0.97rem;
  line-height: 1.72;
}

.legal-card strong {
  font-weight: 700;
  color: var(--nopal-950);
}

.legal-card a {
  color: var(--nopal-700);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-card a:hover { color: var(--nopal-600); }

.legal-card hr {
  margin: 1.8em 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.legal-foot {
  margin-top: 1.6em;
  color: var(--nopal-900);
  font-weight: 700;
}

@media (max-width: 620px) {
  .page-shell { width: min(100% - 20px, 1120px); }
  .chat-card { border-radius: 26px; }
  .chat-heading { flex-direction: column; align-items: flex-start; }
  .status-pill { align-self: flex-start; }
  .beta-info { align-self: flex-start; }
  .beta-info-popover { right: auto; left: 0; transform-origin: top left; }
  .chat-form { grid-template-columns: 1fr; border-radius: 24px; }
  .chat-form input { padding: 13px 12px; }
  .chat-form button { width: 100%; }
  .message-user { max-width: 90%; }
  .message-bot { padding: 14px 14px; }
  .message-content { font-size: 0.96rem; line-height: 1.68; }
  .message-content h1 { font-size: 1.34rem; }
  .message-content h2 { font-size: 1.2rem; }
  .message-content h3 { font-size: 1.08rem; }
  .message-content .md-codeblock { padding: 12px 13px; }
  .message-content .md-codeblock code { font-size: 0.82rem; }
}