/* ============================================================
   AI CHAT DEMO — styles
   Loads AFTER dbr-demo.css and reuses its .dbr-* shell, tokens,
   phone frame, bubbles and buttons. One demo design system, one
   place to change it. Only the pieces this demo adds live here:
   the wider setup form, the TCPA consent row, and the loading bar.
   ============================================================ */

/* Setup form is wider here — six fields instead of four. */
.dbr .cd-setup { max-width: 560px; }
.cd-field-row {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ---------- Consent (TCPA — wording is legal text, do not edit casually) ---------- */
.cd-consent {
  display: grid; grid-template-columns: auto 1fr; gap: 11px;
  align-items: start; margin-top: 4px;
}
.cd-consent input[type="checkbox"] {
  width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--dbr-gold); cursor: pointer; flex: none;
}
.cd-consent label {
  font-size: 0.78rem; line-height: 1.55;
  color: var(--dbr-mint-60); cursor: pointer;
  text-transform: none; letter-spacing: 0; font-family: inherit;
}

/* ---------- Loading bar ---------- */
/* Shown while we read their site and build the agent. It reports real
   stages, so it never looks stalled even when a slow site takes 20s. */
.cd-loading {
  margin-top: 26px; padding: 22px;
  border: 1px solid var(--dbr-mint-12); border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  animation: dbr-in .4s ease-out;
}
.cd-loading-head {
  display: flex; align-items: center; gap: 11px; margin-bottom: 16px;
}
.cd-spinner {
  width: 17px; height: 17px; flex: none; border-radius: 50%;
  border: 2px solid var(--dbr-mint-12);
  border-top-color: var(--dbr-gold);
  animation: cd-spin .8s linear infinite;
}
@keyframes cd-spin { to { transform: rotate(360deg); } }
.cd-loading-head strong { font-size: 0.98rem; font-weight: 600; }

.cd-bar {
  height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.cd-bar span {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--dbr-gold), var(--dbr-saffron));
  transition: width .6s ease;
}
.cd-steps { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.cd-steps li {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.86rem; color: var(--dbr-mint-35);
  transition: color .3s;
}
.cd-steps li::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--dbr-mint-12);
  transition: background .3s, border-color .3s;
}
.cd-steps li[data-state="active"] { color: var(--dbr-powder); }
.cd-steps li[data-state="active"]::before {
  border-color: var(--dbr-gold);
  background: radial-gradient(circle, var(--dbr-gold) 0 40%, transparent 41%);
}
.cd-steps li[data-state="done"] { color: var(--dbr-mint-60); }
.cd-steps li[data-state="done"]::before {
  border-color: var(--dbr-gold);
  background: var(--dbr-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23172B36' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* ---------- "We couldn't read your site" notice ---------- */
.cd-thin-note {
  margin: 14px 0 0; padding: 12px 15px;
  border: 1px solid rgba(255, 153, 50, 0.3);
  background: rgba(255, 153, 50, 0.07);
  border-radius: 12px; font-size: 0.84rem; line-height: 1.55; color: #FFB765;
}

.cd-avatar-img {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, var(--dbr-exped), var(--dbr-noir));
  border: 1px solid var(--dbr-gold-25);
  color: var(--dbr-gold); display: grid; place-items: center;
  font-weight: 700; font-size: 0.92rem;
}

/* ============================================================
   THE PHONE
   Holds the visitor's own website with our AI chat on top of it.
   Every part is drawn here in CSS/SVG — no vendor artwork.
   ============================================================ */
.cd-phone {
  --cd-bezel: 12px;
  position: relative;
  width: 100%; max-width: 372px; margin: 0 auto;
  aspect-ratio: 372 / 760;
  padding: var(--cd-bezel);
  border-radius: 46px;
  background: linear-gradient(160deg, #2b3b45, #0b1720 55%, #16262f);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1.5px rgba(217, 232, 226, 0.12);
}
/* Side buttons */
.cd-phone::before, .cd-phone::after {
  content: ""; position: absolute; left: -2px; width: 3px;
  border-radius: 3px; background: rgba(217, 232, 226, 0.18);
}
.cd-phone::before { top: 132px; height: 34px; }
.cd-phone::after  { top: 182px; height: 58px; }

.cd-phone-island {
  position: absolute; top: calc(var(--cd-bezel) + 9px); left: 50%;
  transform: translateX(-50%);
  width: 96px; height: 26px; border-radius: 999px;
  background: #05090c; z-index: 6; pointer-events: none;
}

.cd-phone-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 34px; overflow: hidden;
  background: #0E1D26;
  display: flex; flex-direction: column;
  /* Starts the website below the status bar instead of under it. Absolutely
     positioned children (panel, bubble, nudge) still measure from the very
     top, because their containing block is the padding box. */
  padding-top: 44px;
}

/* ---------- status bar ---------- */
.cd-status {
  /* Above the chat panel too — on a real phone the status bar is always the
     top layer, and letting the site show through beside it looks broken. */
  position: absolute; inset: 0 0 auto 0; height: 44px; z-index: 9;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px 0 26px;
  color: #fff; pointer-events: none;
  /* Solid, not a fade. A translucent bar over an unknown website turns the
     clock to mush against whatever logo happens to sit behind it. */
  background: #0B1720;
}
.cd-status-time {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em;
}
.cd-status-icons { display: inline-flex; align-items: center; gap: 5px; }
.cd-status-icons svg { fill: currentColor; }

/* ---------- their website ---------- */
.cd-site {
  flex: 1; width: 100%; border: 0; background: #fff;
  /* The phone is ~348px of screen; sites treat that as mobile, which is
     exactly the view we want to show. */
}

/* ---------- placeholder (before a run, or when framing is refused) ---------- */
.cd-screen-placeholder {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 40px 30px; text-align: center;
  background: linear-gradient(170deg, #12242e, var(--dbr-noir-deep));
}
.cd-ph-icon {
  width: 54px; height: 54px; border-radius: 18px;
  border: 1px solid var(--dbr-mint-12);
  background: rgba(255, 255, 255, 0.03);
  display: grid; place-items: center; color: var(--dbr-mint-35);
}
.cd-ph-icon svg { width: 25px; height: 25px; }
.cd-screen-placeholder p {
  margin: 0; font-size: 0.9rem; line-height: 1.6;
  color: var(--dbr-mint-35); max-width: 26ch;
}

/* ---------- nudge ---------- */
.cd-nudge {
  position: absolute; z-index: 4;
  right: 16px; bottom: 84px; left: 16px;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 14px; border-radius: 16px;
  background: #fff; color: #172B36;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  animation: dbr-in .45s ease-out;
}
.cd-nudge p { margin: 0; font-size: 0.8rem; line-height: 1.5; flex: 1; }
.cd-nudge-dot {
  width: 30px; height: 30px; border-radius: 50%; flex: none; margin-top: 1px;
  background: linear-gradient(140deg, var(--dbr-gold), var(--dbr-saffron));
}
.cd-nudge-close {
  flex: none; border: 0; background: none; cursor: pointer;
  color: #8a9aa3; font-size: 1.15rem; line-height: 1; padding: 0 2px;
}
.cd-nudge-close:hover { color: #172B36; }

/* ---------- the bubble ---------- */
.cd-bubble {
  position: absolute; z-index: 5; right: 16px; bottom: 18px;
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(140deg, var(--dbr-gold), var(--dbr-saffron));
  color: var(--dbr-noir);
  display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
  transition: transform .2s, filter .2s;
}
.cd-bubble:hover { transform: scale(1.07); }
.cd-bubble svg { width: 24px; height: 24px; }
/* While the chat is open the bubble becomes its close button, exactly like a
   real website widget. It never leaves the screen. */
.cd-bubble .cd-bubble-close { display: none; }
.cd-bubble.is-open .cd-bubble-chat { display: none; }
.cd-bubble.is-open .cd-bubble-close { display: block; }
.cd-bubble-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: #E5484D; color: #fff;
  font-size: 0.68rem; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--dbr-noir-deep);
}

/* ---------- the chat panel ---------- */
.cd-panel {
  /* A floating card, NOT a full takeover. The visitor must keep seeing their
     own site around it — that is the whole point of the phone. Insets leave
     a strip of the site at the top and room for the bubble at the bottom. */
  position: absolute; z-index: 7;
  /* Top inset clears the status bar AND leaves a slice of their own header
     showing, which is what makes it read as "on my site". */
  inset: 74px 10px 80px 10px;
  display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  background: var(--dbr-noir-deep);
  border: 1px solid rgba(217, 232, 226, 0.16);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  animation: cd-slide-up .32s cubic-bezier(.2, .8, .3, 1);
}
@keyframes cd-slide-up {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.cd-panel-bar {
  display: flex; align-items: center; gap: 11px; flex: none;
  padding: 13px 14px; border-bottom: 1px solid var(--dbr-mint-12);
  background: rgba(255, 255, 255, 0.04);
}
.cd-panel-min {
  margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--dbr-mint-12); background: none; cursor: pointer;
  color: var(--dbr-mint-60); display: grid; place-items: center;
  transition: color .2s, border-color .2s;
}
.cd-panel-min:hover { color: var(--dbr-gold); border-color: var(--dbr-gold); }
.cd-panel-min svg { width: 15px; height: 15px; }

/* ---------- the card is light ----------
   A real website chat widget is a light card sitting on the page, and it has
   to read as a separate object from the dark site around it. Everything below
   overrides the dark .dbr-* defaults, scoped to inside the panel only, so the
   DBR demo's own styling is untouched. */
.cd-panel {
  --cd-ink: #172B36;
  --cd-ink-soft: #63757F;
  --cd-line: #E4EBE9;
  --cd-surface: #F1F5F4;
  background: #FFFFFF;
  border-color: rgba(23, 43, 54, 0.1);
}
.cd-panel-bar {
  background: #FFFFFF;
  border-bottom: 1px solid var(--cd-line);
}
.cd-panel-bar strong { color: var(--cd-ink); }
.cd-panel-bar .dbr-phone-meta span { color: var(--cd-ink-soft); }
.cd-panel-min { border-color: var(--cd-line); color: var(--cd-ink-soft); }
.cd-panel-min:hover { color: var(--cd-ink); border-color: var(--cd-ink-soft); }

.cd-panel .dbr-thread {
  background: #FFFFFF;
  scrollbar-color: #CFDAD6 transparent;
}
.cd-panel .dbr-thread::-webkit-scrollbar-thumb { background: #CFDAD6; }

.cd-panel .dbr-bubble--agent {
  background: var(--cd-surface);
  border-color: transparent;
  color: var(--cd-ink);
}
.cd-panel .dbr-bubble--visitor {
  background: var(--cd-ink);
  color: #FFFFFF;
}
.cd-panel .dbr-time { color: #9AA8AF; }
.cd-panel .dbr-typing i { background: #B4C2C8; }

.cd-panel .dbr-idle p { color: var(--cd-ink-soft); }
.cd-panel .dbr-idle-icon {
  border-color: var(--cd-line);
  background: var(--cd-surface);
  color: var(--cd-ink-soft);
}

.cd-panel .dbr-compose {
  background: #FFFFFF;
  border-top: 1px solid var(--cd-line);
}
.cd-panel .dbr-compose input {
  background: var(--cd-surface);
  border-color: var(--cd-line);
  color: var(--cd-ink);
}
.cd-panel .dbr-compose input::placeholder { color: #9AA8AF; }
.cd-panel .dbr-compose input:focus { border-color: var(--dbr-saffron); }

/* A centred aside in the thread — explains, never pretends to be the agent. */
.cd-sysnote {
  align-self: center; margin: 2px 0; padding: 8px 14px;
  max-width: 90%; text-align: center;
  border-radius: 12px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  font-size: 0.76rem; line-height: 1.5; color: var(--cd-ink-soft);
}

/* The thread fills whatever the phone gives it — no fixed heights here,
   otherwise the compose bar gets pushed off the bottom of the screen. */
.cd-panel .dbr-thread {
  flex: 1; min-height: 0; max-height: none;
}
.cd-panel .dbr-compose { flex: none; }

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  .cd-phone { max-width: 340px; margin-top: 34px; }
}