/*
 * "See it work" stories (assets/ask-demo.js), shared by /ai-for-sitefinity and
 * /conversational-web-management. Without JavaScript every story shows in its
 * final state; .demo-js turns on the animation states.
 */
.demo-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.demo-tab { padding: 0.6rem 1.1rem; border-radius: 9999px; border: 1px solid rgba(212,208,207,0.8); background: #fff; font-size: 0.875rem; font-weight: 700; color: #5f5e5e; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.demo-tab:hover { border-color: #e8833a; color: #1b1b1c; }
.demo-tab[aria-selected="true"] { background: #1b1b1c; border-color: #1b1b1c; color: #fff; }
.demo-tab:focus-visible, .demo-replay:focus-visible, .demo-pause:focus-visible { outline: 2px solid #974800; outline-offset: 2px; }
.demo-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: start; }
.demo-story + .demo-story { margin-top: 4rem; }
.demo-kicker { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #0061a5; margin-bottom: 0.875rem; }
.demo-headline { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 900; line-height: 1.15; letter-spacing: -0.02em; color: #1b1b1c; margin-bottom: 0.875rem; }
.demo-setup { font-size: 1.0625rem; line-height: 1.6; color: #5f5e5e; margin-bottom: 1.5rem; }
.demo-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #1b1b1c; margin-bottom: 0.625rem; }
.demo-tag { padding: 0.15rem 0.5rem; border-radius: 0.25rem; background: #e8833a; color: #1b1b1c; font-size: 0.625rem; letter-spacing: 0.1em; }
.demo-tag-know { background: #d1e4ff; color: #001d36; }
.demo-situation { font-size: 0.9375rem; line-height: 1.65; color: #2b2b2b; }
.demo-chat { background: #fff; border: 1px solid rgba(212,208,207,0.7); border-radius: 1rem; box-shadow: 0 18px 48px rgba(27,27,28,0.08); overflow: hidden; }
.demo-chat-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(212,208,207,0.6); background: #f6f3f2; font-size: 0.75rem; font-weight: 700; color: #5f5e5e; }
.demo-chat-head .demo-recreated { font-weight: 500; font-style: italic; color: #5f5e5e; white-space: nowrap; }
.demo-chat-body { padding: 1.25rem; display: grid; gap: 1.25rem; }
.demo-msg { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.demo-avatar { width: 2.25rem; height: 2.25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 800; }
.demo-avatar-you { background: #eae7e6; color: #1b1b1c; }
.demo-avatar-ai { background: #e8833a; color: #1b1b1c; }
.demo-prompt { background: #f6f3f2; border-radius: 0 0.75rem 0.75rem 0.75rem; padding: 0.875rem 1rem; font-size: 0.9375rem; line-height: 1.55; color: #1b1b1c; font-weight: 500; }
.demo-reply { position: relative; font-size: 0.9375rem; line-height: 1.6; color: #2b2b2b; }
.demo-reply p + p { margin-top: 0.625rem; }
.demo-dots { position: absolute; top: 0.6rem; left: 0; display: flex; gap: 0.3rem; opacity: 0; transition: opacity 0.25s; }
.demo-dots span { width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: #e8833a; }
.demo-dots.is-on span { animation: demo-pulse 0.9s infinite ease-in-out; }
.demo-dots span:nth-child(2) { animation-delay: 0.15s; }
.demo-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes demo-pulse { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.demo-results { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 1rem; align-items: stretch; }
.demo-results-label { grid-column: 1 / -1; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #0061a5; }
.demo-stat { background: #fff; border: 1px solid rgba(212,208,207,0.6); border-radius: 0.75rem; padding: 1rem 1.125rem; }
.demo-stat-value { display: block; font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; color: #974800; font-variant-numeric: tabular-nums; }
.demo-stat-caption { display: block; margin-top: 0.35rem; font-size: 0.8125rem; line-height: 1.4; color: #5f5e5e; }
.demo-takeaway { display: flex; align-items: center; font-size: 1rem; line-height: 1.5; font-weight: 700; color: #1b1b1c; padding: 0 0.5rem; }
.demo-replay { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; font-weight: 700; color: #5f5e5e; background: none; border: 0; padding: 0.35rem 0; cursor: pointer; }
.demo-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.demo-controls .demo-tabs { margin-bottom: 0; }
.demo-pause { padding: 0.6rem 1rem; border-radius: 9999px; border: 1px solid rgba(212,208,207,0.8); background: none; font-size: 0.8125rem; font-weight: 700; color: #5f5e5e; cursor: pointer; }
.demo-pause:hover { color: #1b1b1c; border-color: #974800; }
.demo-replay:hover { color: #974800; }
.demo-replay .material-symbols-outlined { font-size: 1.1rem; }
.demo-controls[hidden], .demo-story[hidden], .demo-replay[hidden], .demo-pause[hidden] { display: none; }
/* Animation states, only once ask-demo.js has taken over (no JS: everything shows) */
.demo-js .demo-story + .demo-story { margin-top: 0; }
.demo-js .demo-fx { opacity: 0; transition: opacity 0.35s ease; }
.demo-js .demo-fx.is-on { opacity: 1; }
.demo-js .demo-ch, .demo-js .demo-wd { opacity: 0; }
.demo-js .demo-ch.is-on, .demo-js .demo-wd.is-on { opacity: 1; }
.demo-js .demo-wd { transition: opacity 0.25s ease; }
.demo-js .demo-dots.is-on { opacity: 1; }
@media (max-width: 1023.98px) {
  .demo-story { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .demo-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .demo-takeaway { grid-column: 1 / -1; padding: 0; }
}
@media (max-width: 639.98px) {
  .demo-results { grid-template-columns: minmax(0, 1fr); }
  .demo-chat-head { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
}
/* Story with a mock web page (/conversational-web-management): intro across
   the top, the chat on the left, the page changing on the right. */
.demo-story-page .demo-intro { grid-column: 1 / -1; }
.demo-story-page .demo-intro .demo-setup { margin-bottom: 0; max-width: 46rem; }
.demo-page { background: #fff; border: 1px solid rgba(212,208,207,0.7); border-radius: 1rem; box-shadow: 0 18px 48px rgba(27,27,28,0.08); overflow: hidden; }
.demo-page-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; background: #f6f3f2; border-bottom: 1px solid rgba(212,208,207,0.6); }
.demo-page-dots { display: flex; gap: 0.3rem; }
.demo-page-dots i { width: 0.55rem; height: 0.55rem; border-radius: 9999px; background: #d4d0cf; }
.demo-page-path { flex: 1; min-width: 0; padding: 0.25rem 0.75rem; border-radius: 9999px; background: #fff; font-size: 0.75rem; color: #5f5e5e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-page-status { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.demo-status-draft { display: none; color: #5f5e5e; }
.demo-status-live { color: #1b6b3a; }
.demo-js .demo-page:not(.is-live) .demo-status-draft { display: inline; }
.demo-js .demo-page:not(.is-live) .demo-status-live { display: none; }
.demo-site { padding: 1.25rem 1.5rem 1.5rem; font-size: 0.875rem; line-height: 1.5; color: #2b2b2b; }
.demo-site-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 0.75rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(212,208,207,0.6); }
.demo-site-logo { font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8125rem; color: #3b2a1e; }
.demo-site-nav { display: flex; gap: 0.875rem; font-size: 0.75rem; color: #5f5e5e; }
.demo-site-h { font-size: 1.125rem; font-weight: 800; color: #1b1b1c; margin-bottom: 0.5rem; line-height: 1.25; }
.demo-site p + p { margin-top: 0.5rem; }
.demo-site-card { border: 1px solid rgba(212,208,207,0.7); border-radius: 0.625rem; padding: 0.875rem 1rem; margin-top: 0.75rem; }
.demo-site-price { font-size: 1.5rem; font-weight: 900; color: #1b1b1c; }
.demo-site-meta { font-size: 0.75rem; color: #5f5e5e; }
.demo-site-tag { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 9999px; background: #f6e3d3; color: #5a2c00; font-size: 0.6875rem; font-weight: 700; }
.demo-site-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
.demo-site-row span { display: block; padding: 0.875rem 0.5rem; border-radius: 0.5rem; background: #f6f3f2; text-align: center; font-size: 0.75rem; font-weight: 700; color: #3b2a1e; }
.demo-site-button { display: inline-block; margin-top: 0.875rem; padding: 0.45rem 1rem; border-radius: 9999px; background: #3b2a1e; color: #fff; font-size: 0.75rem; font-weight: 700; }
.demo-page-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; border-top: 1px solid rgba(212,208,207,0.6); background: #fbfaf9; }
.demo-approve { display: inline-block; padding: 0.5rem 1rem; border-radius: 9999px; background: #1b1b1c; color: #fff; font-size: 0.75rem; font-weight: 700; transition: transform 0.15s, background 0.2s; }
.demo-approve.is-on { background: #1b6b3a; }
.demo-version { font-size: 0.75rem; color: #5f5e5e; }
/* A change: the old text struck through, the new text marked. That is the
   final state everywhere; .demo-js holds the "before" until the change plays. */
.demo-old { text-decoration: line-through; text-decoration-thickness: 2px; color: #6f6b6a; }
.demo-new { background: #ffe2c6; color: #1b1b1c; border-radius: 0.25rem; padding: 0 0.15rem; }
div.demo-new, p.demo-new { display: block; padding: 0.15rem 0.35rem; }
.demo-js [data-demo-change] .demo-old { text-decoration: none; color: inherit; transition: color 0.3s; }
.demo-js [data-demo-change] .demo-new { opacity: 0; background: transparent; transition: opacity 0.35s, background 1.2s; }
.demo-js [data-demo-change].is-on .demo-old { text-decoration: line-through; text-decoration-thickness: 2px; color: #6f6b6a; }
.demo-js [data-demo-change].is-on .demo-new { opacity: 1; background: #ffe2c6; animation: demo-flash 1.2s ease-out; }
@keyframes demo-flash { 0% { background: #ffb877; } 100% { background: #ffe2c6; } }
.demo-js .demo-approve.is-on { animation: demo-press 0.3s ease-out; }
@keyframes demo-press { 50% { transform: scale(0.94); } }
/* equalize() can give a card extra height; let its body take it. */
.demo-chat, .demo-page { display: flex; flex-direction: column; }
.demo-chat-body, .demo-site { flex: 1 1 auto; }
.demo-chat-body { align-content: start; }
@media (max-width: 1023.98px) {
  .demo-story-page .demo-intro { grid-column: auto; }
}
@media (max-width: 639.98px) {
  .demo-site { padding: 1rem; }
  .demo-site-nav { display: none; }
}
.demo-settling, .demo-settling * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .demo-js .demo-fx, .demo-js .demo-wd, .demo-tab, .demo-dots { transition: none; }
  .demo-dots.is-on span { animation: none; }
  .demo-js [data-demo-change] .demo-old, .demo-js [data-demo-change] .demo-new, .demo-approve { transition: none; animation: none; }
}
@media print {
  .demo-js .demo-fx, .demo-js .demo-ch, .demo-js .demo-wd, .demo-js [data-demo-change] .demo-new { opacity: 1; }
  .demo-js [data-demo-change] .demo-old { text-decoration: line-through; color: #6f6b6a; }
  .demo-js [data-demo-change] .demo-new { background: #ffe2c6; }
  .demo-js .demo-page .demo-status-draft { display: none; }
  .demo-js .demo-page .demo-status-live { display: inline; }
  .demo-controls, .demo-replay, .demo-dots { display: none; }
  .demo-story[hidden] { display: grid; }
  .demo-story + .demo-story { margin-top: 3rem; }
}