/* Superfície de atendimento: dimensões reservadas e motion só em opacity/transform. */
.liggo-demo {
  border: 1px solid #33465d; border-radius: 20px; overflow: hidden;
  background: #101c2e; box-shadow: 0 32px 80px -40px rgba(0, 0, 0, .65);
  min-width: 0; color: var(--white);
}
.liggo-demo__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; background: #17263c; border-bottom: 1px solid #33465d; }
.liggo-demo__bar .brand-logo { width: 112px; }
.liggo-demo__bar > p { font-size: .66rem; color: #afbdd0; letter-spacing: .035em; text-align: right; }
.liggo-demo__channels { display: flex; gap: 10px; padding: 14px 20px 0; }
.liggo-demo__channels span { padding: 5px 10px; border: 1px solid #344b64; border-radius: 6px; color: #afbdd0; font-size: .72rem; }
.liggo-demo__channels span:first-child { color: var(--cyan); background: #153249; border-color: #235a74; }
.liggo-demo__contact { padding: 16px 20px 12px; display: grid; gap: 5px; border-bottom: 1px solid #263a50; }
.liggo-demo__contact strong { font-family: var(--f-display); font-size: .85rem; font-weight: 500; }
.liggo-demo__contact p { font-size: .7rem; color: #b5c9dc; min-height: 2.8em; line-height: 1.4; }
.liggo-demo__thread {
  height: 360px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #3b526b transparent;
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
  background: radial-gradient(circle at 70% 0%, #16334b, transparent 70%);
}
.liggo-demo__message, .liggo-demo__event {
  flex: none; max-width: 91%; align-self: flex-start; display: grid; gap: 6px;
  padding: 12px 14px; border-radius: 3px 12px 12px 12px;
  background: #22334a; border: 1px solid #34485f; font-size: .82rem; line-height: 1.5;
}
.liggo-demo__message small, .liggo-demo__event small { font-size: .66rem; color: #b7c9dc; font-weight: 600; }
.liggo-demo__message--ai { align-self: flex-end; background: #103950; border-color: #235c76; border-radius: 12px 3px 12px 12px; }
.liggo-demo__message--ai small { color: #74e5ff; }
.liggo-demo__event { width: 100%; max-width: 100%; background: #15283a; border-radius: 10px; border-color: #326078; }
.liggo-demo__event--human { background: #163b3b; border-color: #396964; }
.liggo-demo__event--human small { color: #a2e5d5; }
.liggo-demo.is-ready [data-demo-step]:not(.is-visible) { display: none; }
.liggo-demo.is-ready .is-visible { animation: demo-message .5s var(--ease) both; }
@keyframes demo-message { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.liggo-demo__typing { padding: 10px 20px; display: flex; align-items: center; gap: 5px; height: 34px; color: #a8c5d7; font-size: .66rem; }
.liggo-demo__typing[hidden] { display: flex; visibility: hidden; }
.liggo-demo__typing i { width: 4px; height: 4px; background: currentColor; border-radius: 50%; }
.is-playing .liggo-demo__typing i { animation: demo-typing 1.3s ease-in-out infinite; }
.liggo-demo__typing i:nth-child(2) { animation-delay: .15s; }
.liggo-demo__typing i:nth-child(3) { animation-delay: .3s; }
.liggo-demo__typing span { margin-left: 5px; }
@keyframes demo-typing { 50% { opacity: .35; transform: translateY(-2px); } }
.liggo-demo__journey { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 12px 16px; border-top: 1px solid #263a50; }
.liggo-demo__journey span { border-top: 2px solid #3a4c60; padding-top: 8px; text-align: center; color: #a7bbcf; font-size: .58rem; line-height: 1.4; }
.liggo-demo__journey .is-active { border-color: var(--cyan); color: var(--white); }
.liggo-demo__journey .is-done { border-color: #3b899e; }
.liggo-demo__footer { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #17263c; }
.liggo-demo__footer p { color: #b1c1d4; font-size: .64rem; }
.liggo-demo__footer button { font-size: .66rem; text-decoration: underline; text-underline-offset: 3px; color: #8aeaff; flex: none; padding: 4px; }
@media (max-width: 600px) {
  .liggo-demo__thread { height: 340px; padding: 16px; }
  .liggo-demo__bar { padding: 16px; }
  .liggo-demo__journey { padding-inline: 12px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .liggo-demo [data-demo-step] { animation: none !important; }
  .liggo-demo__typing i { animation: none !important; }
}