/* Chat widget — plain CSS, no build step. Clean and plain by brief; fancy styling is
   explicitly out of scope. Everything is namespaced under .rag so the widget can be
   embedded in a client page without colliding with their styles. */

.rag {
  --rag-border: #d8dce2;
  --rag-muted: #5b6472;
  --rag-bg: #fff;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #111;
  border: 1px solid var(--rag-border);
  border-radius: 10px;
  background: var(--rag-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rag-log {
  padding: 14px;
  min-height: 220px;
  max-height: 460px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rag-msg {
  padding: 9px 12px;
  border-radius: 10px;
  max-width: 85%;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.rag-you {
  align-self: flex-end;
  background: #1f6feb;
  color: #fff;
}

.rag-bot {
  align-self: flex-start;
  background: #f2f4f7;
}

.rag-pending {
  color: var(--rag-muted);
}

/* The three non-answer states are visually DISTINCT from each other and from an answer —
   the widget must never let an outage read as "not in my documents" (see mapping.js). */
.rag-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rag-muted);
  margin-bottom: 3px;
}

.rag-fallback {
  background: #fff8e6;
  border: 1px solid #f0d999;
}

/* SOMETHING IS WRONG — we could not get an answer. Dashed = broken/incomplete. */
.rag-unavailable,
.rag-error {
  background: #f4f5f7;
  border: 1px dashed #c2c8d0;
}

.rag-declined {
  background: #fdf0f0;
  border: 1px solid #e9c2c2;
}

/* NOTHING IS WRONG — the system is working and deliberately gated. These MUST NOT share
   the dashed "broken" treatment above: at capacity is the demo working as designed, and a
   visual that reads as breakage is a false breakage claim made in CSS rather than in copy
   (see the honest-plumbing house pattern — the guarantee is carried by the whole surface,
   not just the words). Calm/informational blue, solid border.
   Without these rules both states silently inherit the plain .rag-bot bubble — they were
   unstyled until the headless render check showed it. */
.rag-rate_limited,
.rag-at_capacity {
  background: #eef4fd;
  border: 1px solid #c5d9f5;
}

/* The citation is the flagship demo moment — it must be legible on camera, not a footnote
   nobody can read in a Loom recording. */
.rag-cite {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid #dfe3e8;
  font-size: 12.5px;
  font-weight: 600;
  color: #2f6b3a;
}

.rag-bar {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--rag-border);
}

.rag-input,
.rag-email {
  flex: 1;
  padding: 9px 11px;
  border: 1px solid var(--rag-border);
  border-radius: 7px;
  font: inherit;
  min-width: 0;
}

.rag-send,
.rag-submit {
  padding: 9px 15px;
  border: 0;
  border-radius: 7px;
  background: #1f6feb;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.rag-send:disabled {
  opacity: 0.55;
  cursor: default;
}

.rag-foot {
  display: flex;
  justify-content: flex-end;
  padding: 0 10px 10px;
}

.rag-reset {
  border: 1px solid var(--rag-border);
  background: none;
  color: var(--rag-muted);
  border-radius: 6px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

/* The handoff form flows as part of the conversation, NOT as a bordered card competing
   with the input bar below it. Left border = "this belongs to the bot's last message"
   (it always follows a non-answer bubble), so the visitor reads one thread, not two boxes. */
.rag-handoff {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 85%;
  margin-left: 2px;
  padding: 2px 0 2px 12px;
  border-left: 3px solid #d3dae3;
}

.rag-handoff .rag-text {
  flex-basis: 100%;
  font-size: 13.5px;
  color: var(--rag-muted);
  margin-bottom: 2px;
}

.rag-recorded {
  align-self: flex-start;
  padding: 9px 12px;
  border-radius: 10px;
  background: #edf7ee;
  border: 1px solid #bcdcc0;
  font-size: 14px;
}