/* /embeddemo — the website-embed demo (a public page): the real embedded chat, framed as a business's
   own site would frame it (see docs/embedd.md). */

/* No horizontal scroll on mobile. `clip` stops sideways scrolling without making a scroll
   container (so the sticky site header still sticks). */
html { overflow-x: clip; }

.embeddemo-intro { max-width: 720px; margin: 0 auto; padding: 32px 20px 8px; }
.embeddemo-intro h1 { margin: 0 0 12px; }
.embeddemo-lede { font-size: 1.05rem; line-height: 1.6; color: var(--ag-label, #1c1c1e); }

.embeddemo-stage { display: flex; justify-content: center; padding: 16px 16px 12px; }

/* Under the chat, like the landing page's phone caption — a touch larger, so the reader knows the
   example above is a real working Taskriz embed, not a mockup. */
.embeddemo-caption {
  max-width: 560px; margin: 4px auto 56px; padding: 0 20px; text-align: center;
  font-size: 1.05rem; line-height: 1.5; color: var(--ag-secondaryLabel, #6c6c70);
}

/* The real embedded chat, framed as the inline snippet frames it on a business's website. */
.embeddemo-frame {
  display: block; width: 100%; max-width: 760px; height: min(820px, 82vh);
  border: 1px solid var(--ag-separator, #e5e5ea); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14); background: #fff;
}

/* On a phone the chat gets the visible screen below the sticky top bar (52px, plus a little room), and never less
   than 480px — so once you scroll to it, the conversation has room and the input and Send sit at the bottom. (An
   iframe has no height of its own, so it can't just fill a flex space.) */
@media (max-width: 640px) {
  .embeddemo-intro { padding: 16px 20px 2px; }
  .embeddemo-intro h1 { font-size: 1.7rem; margin-bottom: 8px; }
  .embeddemo-lede { font-size: 0.98rem; line-height: 1.45; }
  .embeddemo-stage { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
  .embeddemo-frame { height: calc(100svh - 72px); min-height: 480px; max-height: none; max-width: none; border-radius: 14px; }
}

@media (prefers-color-scheme: dark) {
  .embeddemo-frame { border-color: #3a3a3c; background: #000; }
}

/* Under the caption: where to set up your own (the Website Chat page). */
.embeddemo-caption.embeddemo-next { margin-top: -40px; }
.embeddemo-next a { font-weight: 600; color: var(--ag-blue, #007aff); text-decoration: none; }