/* AI Guest Chat demo — builds on the Maria demo's brand layer
   (/maria-demo/maria-demo.css: section titles, cards, buttons, caps grid,
   bottom CTA). Only what the chat page adds lives here. */

.cd-try-card { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }

.cd-live {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs18); font-weight: 700; color: var(--dark-blue-color);
}
.cd-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #18c37e; box-shadow: 0 0 0 6px rgba(24, 195, 126, 0.18); }

.cd-hint { font-size: var(--fs16); color: var(--dark-grey-color); max-width: 620px; }

.cd-asks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; }
.cd-ask {
  font: inherit; font-size: var(--fs16); color: var(--dark-blue-color);
  background: var(--light-grey-color); border: 0; border-radius: 999px;
  padding: 10px 18px; cursor: pointer; transition: background 0.15s;
}
.cd-ask:hover { background: var(--sub-grey-color); }
.cd-ask.copied { background: #d9f6ea; }

.cd-note { font-size: 14px; color: var(--mid-grey-color); max-width: 620px; }


.cd-stack { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
.cd-stack span {
  font-size: var(--fs16); font-weight: 700; color: var(--white-color);
  background: var(--gradient-pill); border-radius: 999px; padding: 8px 16px;
}

/* The live chat, inline (loader v3), beside the suggestions. */
.cd-try { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 40px; margin-top: 8px; }
.cd-chat {
  flex: 0 1 440px; width: 440px; max-width: 100%; height: 700px; border-radius: 22px; overflow: hidden;
  background: var(--white-color); box-shadow: 0 18px 48px rgba(51, 63, 120, 0.16);
}
.cd-side { flex: 1 1 360px; max-width: 520px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; text-align: left; padding-top: 12px; }
.cd-side .cd-asks { justify-content: flex-start; }
@media (max-width: 900px) { .cd-side { align-items: center; text-align: center; padding-top: 0; } .cd-side .cd-asks { justify-content: center; } }
@media (max-width: 640px) { .cd-chat { height: 620px; } }