/* The BOT pages inside the site shell (#/forms): the forms iframe host, and the used-link /
   log-in-first screens. Colours come ONLY from bot-palette.css (--bp-*). While one of these
   views is on screen the shell chrome (appbar, bottom nav, page) adopts the same palette, so
   the page reads as one surface with no orange left. */

body:has(.forms-view) {
  --ink: var(--bp-bg);
  --ink-2: var(--bp-sf2);
  --surface: var(--bp-sf);
  --surface-2: var(--bp-sf2);
  --text: var(--bp-tx);
  --text-2: var(--bp-tx2);
  --line: var(--bp-ln);
  --glow: var(--bp-acct);
  --glow-deep: var(--bp-pri);
  --glow-ink: var(--bp-pri-ink);
  --mint: var(--bp-mint);
  --rose: var(--bp-rose);
}

/* no second frame: the iframe is just the page, sized between the appbar and the bottom nav,
   and its own sticky Confirm / Continue button is always on screen */
.view:has(.forms-view) { padding-bottom: 0; }
.forms-view { display: flex; flex-direction: column; }
.forms-embed {
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 0;
  margin-inline: calc(var(--pad-page) * -1);
}
.forms-embed.light { background: transparent; }
.forms-frame {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  height: calc(100dvh - var(--bp-chrome, 138px) - env(safe-area-inset-bottom, 0px));
  min-height: 420px;
  opacity: 0;
  transition: opacity 0.25s;
}
.forms-embed.ready .forms-frame { opacity: 1; }
@media (min-width: 1000px) {
  .forms-view { max-width: 680px; margin-inline: auto; width: 100%; }
  .forms-frame { height: calc(100dvh - 120px); }
}

/* one state-card pattern (used link, log in first) — same look as the forms' expired / success card */
.forms-view .bot-state {
  margin: 4.5vh auto 0;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
  background: var(--bp-sf);
  border: 1px solid var(--bp-ln);
  border-radius: 22px;
  padding: 2rem 1.35rem 1.5rem;
  box-shadow: var(--bp-shadow);
}
.forms-view .bot-state-icon {
  width: 4.2rem;
  height: 4.2rem;
  margin: 0 auto 0.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bp-store) 20%, transparent);
  color: var(--bp-acct);
}
.forms-view .bot-state .card-title { font-size: 1.3rem; font-weight: 800; line-height: 1.35; }
.forms-view .bot-state .card-sub { color: var(--bp-tx2); font-size: 0.92rem; line-height: 1.65; }
.forms-view .bot-state .btn {
  min-height: 3.25rem;
  border-radius: 14px;
  font-weight: 700;
  box-shadow: none;
  text-decoration: none;
}
/* ONE primary style (palette primary); WhatsApp green only on "open WhatsApp"; the rest are quiet */
.forms-view .bot-state .btn-glow { background: var(--bp-pri); color: var(--bp-pri-ink); }
.forms-view .bot-state .btn-whatsapp { background: var(--bp-wa); color: var(--bp-wa-ink); }
.forms-view .bot-state .btn-quiet { background: transparent; color: var(--bp-tx); border: 1.5px solid var(--bp-ln); }
.forms-view .empty .empty-ic { color: var(--bp-acct); }