/* ==========================================================================
   Chat card — an AI chat drawn in HTML: the use-case accordions, promo blocks, the home slider, the /manage AI
   bento (site/src/components/ChatCard.astro). One component: typing on or off is a mode, the
   answer is the slot (a table of rows, a bold lead line, paragraphs, source lines, a stats table), the frame
   around it (a green card on /manage and /ai) belongs to the page, never to the chat.

   Sizing is driven by .chat-card-wrap (container-type: inline-size); every inner dimension is em/cqi so the
   whole card scales from one font-size. Modifiers:
     .chat-card-wrap--fill  the chat fills its parent's width, height from its own proportions (303 × 455)
     .chat-card--lg         the larger type of live /manage (4.55cqi, the field a step under the text)
   Colours are tokens (were literals copied from birch-mcp.html). The Webflow embeds (ai-promo,
   birch-mcp-usecases, home-slides) still run their own forked copies until those pages move.
   ========================================================================== */

/* ─────────────────────────────────────────
   CHAT CARD
───────────────────────────────────────── */

/* Wrapper owns the sizing — enables container queries for the card */
.chat-card-wrap {
  height: min(70vh, 45rem); /* 45rem = 720px */
  width: auto;
  aspect-ratio: 400 / 600;
  container-type: inline-size;
}

.chat-card {
  --color-text-link: var(--color-accent-indigo); /* the chat is white on any page: the light link, not the dark page's */
  width: 100%;
  height: 100%;
  background: var(--color-bg-white);
  border-radius: 1.5em;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font);
  font-size: clamp(0.5625rem, 1.125vw, 1.125rem); /* fallback */
  font-size: 4.095cqi;                            /* 16.2px @ 395px card width — 10% down from 4.55 */
  font-weight: 500;
  color: var(--color-text-inverted);
  -webkit-font-smoothing: antialiased;
}

/* Body */
.chat-card__body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
  display: flex;
  flex-direction: column;
}
.chat-card__body::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* Feed — wraps all exchanges */
.chat-card__feed {
  padding: 1em 1em 0;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

/* Messages group */
.chat-card__messages {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5em;
}

/* User bubble */
.chat-card__bubble {
  background: var(--color-surface);
  border-radius: 1em 1em 0.25em 1em;
  padding: 0.6em 0.875em;
  max-width: 85%;
  font-weight: 500;
  line-height: 1.467;
  letter-spacing: 0.01em;
  color: var(--color-text-inverted);
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity var(--duration-reveal) var(--ease-reveal),
              transform var(--duration-reveal) var(--ease-reveal); /* the Reveal character */
}
.chat-card__bubble.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* AI response area — fades + floats in after send */
.chat-card__response {
  padding: 0;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity var(--duration-reveal) var(--ease-reveal),
              transform var(--duration-reveal) var(--ease-reveal); /* the Reveal character */
}
.chat-card__response.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Inner content — base text styles for AI responses */
.chat-card__response-content {
  color: var(--color-text-inverted);
  line-height: 1.467;
  letter-spacing: 0.01em;
  word-break: break-word;
}
/* The global variable-font reset declares * { font-weight: 600 }, which hits every
   node directly and flattens the answer to a single weight — the bold parts stop
   reading as bold. Restore the body weight here; the emphasised blocks below
   re-assert 600 with a higher-specificity selector. */
.chat-card__response-content,
.chat-card__response-content p,
.chat-card__response-content li,
.chat-card__response-content td,
.chat-card__response-content th { font-weight: 500; }
.chat-card__response-content p {
  margin: 0 0 0.4em;
}
.chat-card__response-content p:last-child { margin-bottom: 0; }
/* DemiBold, matching the mock — not the browser's heavier default bold */
.chat-card__response-content strong { font-weight: 600; }
/* "Used:" — which connectors Claude reached. A label line, then a row of
   marks followed by the names; both in body size and semibold, per the mock. */
.chat-card__used {
  margin: 0 0 0.533em;        /* 8px @ 15px */
  font-weight: 600;
}
.chat-card__used-row {
  display: flex;
  align-items: center;
  gap: 0.133em;               /* 2px @ 15px */
  margin: 0 0 1.067em;        /* 16px @ 15px — down to the answer body */
  font-weight: 600;
}
.chat-card__used-icon {
  flex: 0 0 auto;
  width: 1.267em;             /* 19px @ 15px */
  height: 1.267em;
  border-radius: 0.362em;
}
.chat-card__used-names { padding-left: 0.267em; }   /* 4px @ 15px */
.chat-card__response-content ul {
  margin: 0.25em 0;
  padding-left: 1.25em;
}
.chat-card__response-content li { margin-bottom: 0.2em; }

/* card 0 — the three source lines carry the answer, so they are set bold and
   without list markers; the plain sentence below them stays regular weight.
   Selectors are scoped to the response so they outrank the generic ul/li above. */
.chat-card__response-content .chat-card__lines {
  list-style: none;
  margin: 0 0 1.067em;
  padding: 0;
  font-weight: 600;
}
.chat-card__response-content .chat-card__lines li { margin: 0; font-weight: 600; }

/* card 2 — digest lines are prefixed with a middle dot, not a disc bullet */
.chat-card__response-content .chat-card__dots {
  list-style: none;
  margin: 0.25em 0 1.067em;
  padding: 0;
}
.chat-card__response-content .chat-card__dots li { margin: 0; }
.chat-card__response-content .chat-card__dots li::before { content: "·\00a0"; }

/* Rule-audit table — card 1 answers with a status breakdown, not a list */
.chat-card__stats {
  width: 100%;
  border-collapse: collapse;
  margin: 0.25em 0 0.6em;
}
.chat-card__stats th,
.chat-card__stats td {
  text-align: left;
  padding: 0.3em 0.5em;
}
.chat-card__stats th {
  font-size: 0.8em;           /* the header stays a step down, as in the mock */
  color: var(--color-text-grey-inverted); /* the chat is white: the secondary grey for light (Text/Grey read 3.2:1) */
}
/* the count column only ever holds two digits — keep it off the right edge */
.chat-card__stats th:last-child,
.chat-card__stats td:last-child { width: 22%; }
.chat-card__stats td:last-child { font-weight: 600; }
.chat-card__stats tbody tr:nth-child(odd) td { background: var(--color-surface); }
.chat-card__stats tbody tr td:first-child { border-radius: 0.4em 0 0 0.4em; }
.chat-card__stats tbody tr td:last-child  { border-radius: 0 0.4em 0.4em 0; }

/* "Review rule" link — card 0 only */
.chat-card__review-link {
  display: block;
  color: var(--color-text-link); /* a link on the white chat: Accent/Blue reads 4.2:1 there, Indigo 5.7 */
  line-height: 1.467;
  margin-top: 0.375em;
  cursor: pointer;
}

/* Input area */
.chat-card__input-area {
  flex-shrink: 0;
  padding: 1em;
  position: relative;
}
/* Fade gradient above input */
.chat-card__input-area::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: 2.5em;
  background: linear-gradient(to bottom, transparent, var(--color-bg-white));
  pointer-events: none;
}
.chat-card__input-wrap {
  position: relative;
  background: var(--color-bg-white);
  border: var(--border-hairline) solid var(--color-surface-muted);
  border-radius: 1em;
  padding: 0.9em 3.5em 0.9em 1.25em;
  display: flex;
  align-items: center;
  /* same size as the chat text — the input is not a step down */
  font-size: 1em;
  line-height: 1.4;
  min-height: 3em;
}
.chat-card__text-flow {
  flex: 1;
  min-width: 0;
  line-height: inherit;
}
.chat-card__placeholder {
  color: var(--color-text-grey-inverted);
  font-weight: 500 !important;
  pointer-events: none;
  user-select: none;
}
.chat-card__typed {
  color: var(--color-text-inverted);
  font-weight: 500;
  /* visibility toggled via inline style in JS — no display:none here */
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-card__cursor {
  display: inline-block;
  width: 0.1em;
  height: 1.1em;
  background: var(--color-bg);
  vertical-align: text-bottom;
  margin-left: 0.0625rem;
  opacity: 0;
}
.chat-card__cursor.is-blinking {
  animation: chat-card-blink 0.9s step-end infinite;
}
@keyframes chat-card-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
/* Send button — inside the textarea, absolute.
   bottom = (padding-top + line-height + padding-bottom - button-height) / 2
          = (0.9 + 1.4 + 0.9 - 2) / 2 = 0.6em  → centers in single-line input,
   stays pinned to bottom when input grows to multiple lines. */
.chat-card__send {
  position: absolute;
  right: 0.4375em;
  bottom: 0.6em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: none;
  background: var(--color-surface-muted);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: background var(--duration-hover) var(--ease-hover);
}
.chat-card__send.is-active {
  background: var(--color-bg);
  cursor: pointer;
}
.chat-card__send svg {
  width: 1em;
  height: 1em;
}

/* ─────────────────────────────────────────
   MODIFIERS
───────────────────────────────────────── */
/* fill: as wide as the parent (a card around it sets the frame), the height from the card's own proportions */
.chat-card-wrap--fill { width: 100%; height: auto; aspect-ratio: auto; }
.chat-card-wrap--fill .chat-card { height: auto; max-height: 100%; aspect-ratio: 303 / 455; }
/* lg: the live /manage type — 18 at a 395 card, the field a step under the text */
.chat-card--lg { font-size: 4.55cqi; }
.chat-card--lg .chat-card__input-wrap { font-size: 0.9375em; }

/* ─────────────────────────────────────────
   ANSWER: TABLE OF ROWS (the /manage «by platform» answer)
───────────────────────────────────────── */
.chat-card__lead { font-weight: 700; }
.chat-card__response-content p.chat-card__lead { font-weight: 700; }
.chat-card__table { width: 100%; margin-bottom: 0.625em; }
.chat-card__row { display: flex; align-items: center; border-radius: 0.75em; }
.chat-card__row:nth-child(even) { background: var(--color-surface); }
.chat-card__row span { flex: 1; overflow: hidden; padding: 0.5em 0.375em; font-size: 0.8125em; white-space: nowrap; text-overflow: ellipsis; }
.chat-card__row span:first-child { padding-left: 0.875em; }
.chat-card__row span:last-child { flex: 0 0 5em; }
.chat-card__row--head span { color: var(--color-text-grey-inverted); }

/* ─────────────────────────────────────────
   WINDOW HEAD AND ACTION (the /ai «Two ways» Birch AI card: the chat as a popover over the product)
───────────────────────────────────────── */
.chat-card__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 1.3em 0.5em;
}
.chat-card__head-title { font-size: 1.1em; font-weight: 600; }
.chat-card__head-icons { display: flex; gap: 0.6em; color: var(--color-text-grey-inverted); }
.chat-card__head-icons svg { width: 0.9em; height: 0.9em; display: block; }
/* an action under the answer: the yellow «Review and set live rule» pill */
.chat-card__action {
  display: inline-flex;
  align-items: center;
  margin-top: 0.75em;
  padding: 0.55em 0.95em;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: 0.93em;
  font-weight: 600;
}
.chat-card__muted { color: var(--color-text-grey-inverted); }

@media (prefers-reduced-motion: reduce) { .chat-card__bubble, .chat-card__response { transition: none; } }