.chat-demo {
  --chat-ink: #172733;
  --chat-muted: #5b6870;
  --chat-rule: rgba(23, 39, 51, .13);
  color: var(--chat-ink);
  width: 100%;
  max-width: 920px;
  min-height: 486px;
  margin-inline: auto;
  border: 1px solid rgba(23, 39, 51, .19);
  border-radius: 16px;
  background: #fffdf8;
  box-shadow: 0 18px 42px -30px rgba(23, 39, 51, .28);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  overflow: hidden;
}
.chat-demo *, .chat-demo *::before, .chat-demo *::after { box-sizing: border-box; }
.chat-demo :is(p, dl, dd) { margin: 0; }
.chat-demo button { font: inherit; }
.chat-demo svg { display: block; }
.chat-demo [hidden] { display: none !important; }
.chat-demo:focus-visible { outline: 2px solid var(--chat-ink); outline-offset: 5px; }
.chat-demo__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  padding: 9px 22px;
  border-bottom: 1px solid var(--chat-rule);
  background: #f5f2ea;
}
.chat-demo__title { display: flex; align-items: center; gap: 9px; font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; white-space: nowrap; }
.chat-demo__title svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.25; }
.chat-demo__header-meta { display: flex; align-items: center; gap: 17px; }
.chat-demo__phase { display: flex; align-items: center; gap: 6px; color: var(--chat-muted); font-size: 12px; white-space: nowrap; }
.chat-demo__phase i { width: 5px; height: 5px; border-radius: 50%; background: #8c969a; }
.chat-demo[data-chat-state="investigating"] .chat-demo__phase i { background: #b48535; }
.chat-demo[data-chat-state="awaiting-approval"] .chat-demo__phase { color: #75551b; }
.chat-demo[data-chat-state="awaiting-approval"] .chat-demo__phase i { background: #b48535; }
.chat-demo[data-chat-state="approved"] .chat-demo__phase { color: #32624f; }
.chat-demo[data-chat-state="approved"] .chat-demo__phase i { background: #32624f; }
.chat-demo__example { color: var(--chat-muted); font-size: 12px; white-space: nowrap; }
.chat-demo__conversation { max-width: 794px; margin-inline: auto; padding: 14px 28px 16px; }
.chat-demo__request { display: flex; align-items: baseline; gap: 11px; width: fit-content; max-width: calc(100% - 30px); margin: 0 0 12px auto; padding: 9px 15px; border-radius: 11px 11px 3px 11px; background: #eaece8; }
.chat-demo__sender { flex: 0 0 auto; color: #52605f; font-size: 12px; font-weight: 600; }
.chat-demo__request p { color: #172733; font-size: 16px; line-height: 1.4; }
.chat-demo__agent { max-width: 642px; }
.chat-demo__agent-label { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 14px; font-weight: 650; }
.chat-demo__agent-mark { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(23, 39, 51, .2); border-radius: 5px; }
.chat-demo__agent-mark svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.25; }
.chat-demo__investigation { display: flex; align-items: flex-start; gap: 8px; min-height: 26px; padding-left: 30px; color: #41535e; font-size: 14px; line-height: 1.4; }
.chat-demo__activity { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px; border: 1.4px solid #a7afb3; border-top-color: #172733; border-radius: 50%; }
.chat-demo[data-chat-state="investigating"] .chat-demo__activity { animation: chat-demo-spin 1s linear infinite; }
.chat-demo[data-chat-paused="true"] .chat-demo__activity { animation-play-state: paused; }
.chat-demo[data-chat-stage="5"] .chat-demo__activity, .chat-demo[data-chat-stage="6"] .chat-demo__activity { border: 0; border-radius: 0; width: 8px; height: 5px; margin-top: 6px; border-left: 1.7px solid #32624f; border-bottom: 1.7px solid #32624f; transform: rotate(-45deg); animation: none; }
.chat-demo[data-chat-stage="5"] .chat-demo__investigation, .chat-demo[data-chat-stage="6"] .chat-demo__investigation { color: #32624f; }
.chat-demo__records { margin-left: 30px; border-top: 1px solid var(--chat-rule); }
.chat-demo__record { display: grid; grid-template-columns: 17px minmax(0, 1fr) auto 10px; align-items: center; gap: 8px; min-height: 28px; border-bottom: 1px solid var(--chat-rule); }
.chat-demo__record-icon svg { width: 17px; height: 17px; stroke: #64727a; stroke-width: 1.1; }
.chat-demo__record-name { font-size: 14px; }
.chat-demo__record-name > span { margin-left: 7px; color: var(--chat-muted); font-size: 12px; white-space: nowrap; }
.chat-demo__record strong, .chat-demo__difference strong { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.chat-demo__record-check { color: #537365; font-size: 12px; }
.chat-demo__difference { display: flex; align-items: center; justify-content: space-between; min-height: 24px; margin-top: 5px; padding: 3px 18px 3px 9px; border-radius: 4px; background: rgba(216, 173, 85, .14); color: #70521c; }
.chat-demo__difference > span { font-size: 12px; }
.chat-demo__difference strong { font-size: 14px; }
.chat-demo__settlement { margin: 8px 0 0 30px; padding: 8px 12px; border: 1px solid rgba(23, 39, 51, .14); border-radius: 7px; background: #f6f6f0; }
.chat-demo__settlement-source { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #283e49; font-size: 12px; line-height: 1.4; }
.chat-demo__settlement-source > span:first-child > span { color: var(--chat-muted); }
.chat-demo__matched { color: #3e6355; font-size: 12px; white-space: nowrap; }
.chat-demo__matched > span { margin-right: 3px; }
.chat-demo__settlement-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 6px; }
.chat-demo__settlement-values > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-demo__settlement-values > div + div { border-left: 1px solid var(--chat-rule); padding-left: 12px; }
.chat-demo__settlement-values dt { color: var(--chat-muted); font-size: 12px; }
.chat-demo__settlement-values dd { padding-top: 1px; color: #172733; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.chat-demo__approval { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 50px; margin: 8px 0 0 30px; padding-top: 8px; border-top: 1px solid var(--chat-rule); }
.chat-demo__action-copy { font-size: 14px; line-height: 1.45; }
.chat-demo__approve { display: inline-flex; align-items: center; justify-content: center; gap: 14px; flex: 0 0 auto; min-height: 41px; padding: 10px 14px; border: 1px solid #172733; border-radius: 6px; background: #172733; color: #fffdf8; cursor: pointer; font-size: 14px; font-weight: 550; line-height: 1.3; white-space: nowrap; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.chat-demo__approve svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.4; }
.chat-demo__approve:hover { border-color: #354b59; background: #354b59; }
.chat-demo__approve:focus-visible { outline: 2px solid #b18330; outline-offset: 4px; }
.chat-demo__approved-copy strong { display: block; color: #32624f; font-size: 14px; font-weight: 650; }
.chat-demo__approved-copy strong > span { margin-right: 4px; }
.chat-demo__approved-copy > span { display: block; padding-top: 2px; color: var(--chat-muted); font-size: 12px; }
.chat-demo[data-chat-state="approved"] .chat-demo__approve { border-color: transparent; background: transparent; color: #172733; text-decoration: underline; text-decoration-color: #a7afb3; text-underline-offset: 4px; }
.chat-demo[data-chat-state="approved"] .chat-demo__approve:hover { background: #f0eee7; }
.chat-demo[data-chat-state="approved"] .chat-demo__approve svg { display: none; }
.chat-demo [data-chat-reveal] { visibility: hidden; opacity: 0; transform: translateY(3px); transition: opacity .28s ease, transform .28s ease; }
.chat-demo [data-chat-reveal].is-visible { visibility: visible; opacity: 1; transform: translateY(0); }
.chat-demo-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes chat-demo-spin { to { transform: rotate(360deg); } }
@media (max-width: 620px) {
  .chat-demo { min-height: 530px; border-radius: 12px; }
  .chat-demo__header { min-height: 45px; padding: 10px 16px; }
  .chat-demo__phase { display: none; }
  .chat-demo__example { font-size: 11px; }
  .chat-demo__conversation { padding: 14px 16px; }
  .chat-demo__request { gap: 9px; max-width: calc(100% - 12px); margin-bottom: 12px; padding: 8px 12px; }
  .chat-demo__agent { max-width: none; }
  .chat-demo__investigation { min-height: 40px; padding-left: 0; }
  .chat-demo__records, .chat-demo__settlement, .chat-demo__approval { margin-left: 0; }
  .chat-demo__record { gap: 7px; }
  .chat-demo__record-name > span { margin-left: 4px; }
  .chat-demo__settlement { padding: 8px 10px; }
  .chat-demo__settlement-source { gap: 8px; }
  .chat-demo__settlement-values { gap: 9px; }
  .chat-demo__settlement-values > div { display: block; }
  .chat-demo__settlement-values > div + div { padding-left: 9px; }
  .chat-demo__approval { gap: 12px; min-height: 62px; }
  .chat-demo__approve { gap: 7px; padding: 10px 11px; font-size: 14px; }
  .chat-demo__approve svg { display: none; }
}
@media (max-width: 390px) {
  .chat-demo__header { padding-inline: 12px; }
  .chat-demo__conversation { padding-inline: 12px; }
  .chat-demo__record-name { font-size: 13px; }
  .chat-demo__record-name > span { font-size: 11px; }
  .chat-demo__settlement-source { align-items: flex-start; gap: 5px; }
  .chat-demo__matched { max-width: 98px; text-align: right; white-space: normal; }
  .chat-demo__approval { gap: 9px; }
  .chat-demo__approve { max-width: 136px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-demo [data-chat-reveal], .chat-demo__approve { transition: none; transform: none; }
  .chat-demo__activity { animation: none !important; }
}
/* All future messages already reserve their space; no additional blank canvas is needed. */
.chat-demo{min-height:0}.chat-demo__conversation{padding-top:19px;padding-bottom:24px}.chat-demo__record{min-height:34px}.chat-demo__settlement{margin-top:12px;padding:11px 12px}.chat-demo__approval{margin-top:12px;padding-top:12px}.chat-demo__investigation{min-height:31px}.chat-demo__agent-label{margin-bottom:6px}
@media(min-width:901px) and (max-height:800px){.chat-demo__conversation{padding-top:13px;padding-bottom:17px}.chat-demo__record{min-height:29px}.chat-demo__settlement{padding:8px 12px;margin-top:8px}.chat-demo__approval{padding-top:8px;margin-top:8px}.chat-demo__investigation{min-height:26px}}
@media(max-width:620px){.chat-demo{min-height:0}.chat-demo__conversation{padding-top:13px;padding-bottom:17px}.chat-demo__record{min-height:28px}.chat-demo__settlement{padding:8px 10px;margin-top:8px}.chat-demo__investigation{min-height:40px}.chat-demo__approval{min-height:55px;gap:9px;margin-top:8px;padding-top:8px}.chat-demo__approve{font-size:13px;padding:10px;max-width:none;white-space:nowrap}.chat-demo__agent-label{margin-bottom:4px}.chat-demo__action-copy{font-size:13px}.chat-demo__settlement-source{font-size:11px}.chat-demo__matched{font-size:11px}.chat-demo__settlement-values dd{font-size:15px}}
@media(max-width:600px) and (max-height:760px){.chat-demo__header{min-height:39px;padding-block:7px}.chat-demo__conversation{padding-top:10px;padding-bottom:12px}.chat-demo__request{padding:7px 10px;margin-bottom:10px}.chat-demo__request p{font-size:15px}.chat-demo__record{min-height:26px}.chat-demo__settlement{padding:7px 9px}.chat-demo__approval{min-height:51px}.chat-demo__approve{font-size:12px;padding:10px 9px}}
@media(max-width:620px){.chat-demo__matched{max-width:none;white-space:nowrap}.chat-demo__settlement-source{align-items:center}}