/* Live demos (Reply page). Uses the product-page tokens from product.css
   (--lime, --ink, --paper, --white, --muted, --dark, --world-deep), so it
   must load after product.css. */

.live-demo{padding:120px 0;background:var(--paper)}
.live-demo .section-head .eyebrow{color:var(--ink);opacity:.72}

.demo-shell{background:var(--dark);color:var(--white);border-radius:28px;padding:34px;box-shadow:0 10px 0 var(--world-deep),0 35px 70px #13200f22}

/* ---- Step 1: choose an industry ---- */
.demo-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.demo-selector[hidden],#demo-active[hidden]{display:none}
.demo-option{display:flex;flex-direction:column;gap:10px;min-height:190px;padding:26px;text-align:left;font:inherit;color:var(--white);cursor:pointer;background:#fcfcf80d;border:1px solid #fcfcf826;border-radius:20px;transition:transform .22s,border-color .22s,background .22s}
.demo-option:hover,.demo-option:focus-visible{transform:translateY(-3px);border-color:var(--lime);background:#fcfcf814}
.demo-option:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.demo-option-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.demo-option-title{font-size:28px;letter-spacing:-.03em;line-height:1}
.demo-option-desc{font-size:14px;line-height:1.5;color:#fcfcf8ab}

/* ---- Step 2: the demo ---- */
.demo-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:9px 16px;font:inherit;font-size:12px;font-weight:700;color:var(--white);cursor:pointer;background:transparent;border:1px solid #fcfcf838;border-radius:99px;transition:border-color .2s,color .2s}
.demo-back:hover,.demo-back:focus-visible{border-color:var(--lime);color:var(--lime)}
/* F&B sub-types: smaller pills directly under the "choose another business" button */
.demo-sub{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.demo-sub[hidden]{display:none}
.demo-sub-btn{padding:7px 14px;font:inherit;font-size:12px;font-weight:700;color:#fcfcf8c4;cursor:pointer;background:transparent;border:1px solid #fcfcf83a;border-radius:99px;transition:border-color .2s,color .2s,background .2s}
.demo-sub-btn:hover{border-color:var(--lime);color:var(--white)}
.demo-sub-btn[aria-pressed=true]{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.demo-sub-btn:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
#demo-panel{min-height:340px;padding:24px;background:#fcfcf808;border:1px solid #fcfcf826;border-radius:20px}

/* Chat (F&B / Clinic / Car workshop) */
.demo-chat{display:flex;flex-direction:column;gap:16px}
.demo-chat-log{display:flex;flex-direction:column;gap:10px;min-height:200px;max-height:400px;overflow-y:auto;padding-right:4px}
.demo-chat-hint{padding-top:18px;font-size:13px;color:#fcfcf88f}
.demo-typing-dots{display:flex;gap:5px;padding-bottom:14px}
.demo-typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--lime);opacity:.3;animation:demoTypingPulse 1.2s ease-in-out infinite}
.demo-typing-dots span:nth-child(2){animation-delay:.2s}
.demo-typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes demoTypingPulse{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.demo-bubble{max-width:75%;padding:11px 16px;font-size:15px;line-height:1.45;white-space:pre-wrap}
.demo-bubble-user{align-self:flex-end;background:var(--lime);color:var(--ink);border-radius:18px 18px 4px 18px}
.demo-bubble-assistant{align-self:flex-start;background:#fcfcf812;color:var(--white);border:1px solid #fcfcf826;border-radius:18px 18px 18px 4px}
.demo-bubble.demo-loading{color:#fcfcf88f}

.demo-chips{display:flex;flex-wrap:wrap;gap:8px}
.demo-chip{padding:9px 14px;font:inherit;font-size:12px;text-align:left;color:#fcfcf8c4;cursor:pointer;background:transparent;border:1px solid #fcfcf83a;border-radius:99px;transition:border-color .2s,color .2s}
.demo-chip:hover,.demo-chip:focus-visible{border-color:var(--lime);color:var(--white)}

.demo-input-row{display:flex;gap:8px}
.demo-input{flex:1;min-width:0;padding:13px 18px;font:inherit;font-size:15px;color:var(--white);background:#0000004d;border:1px solid #fcfcf83a;border-radius:99px}
.demo-input::placeholder{color:#fcfcf880}
.demo-input:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.demo-send-btn{display:inline-flex;align-items:center;padding:0 24px;font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;background:var(--lime);border:0;border-radius:99px;transition:transform .2s,filter .2s}
.demo-send-btn:hover,.demo-send-btn:focus-visible{filter:brightness(.92)}

@media (prefers-reduced-motion:reduce){.demo-typing-dots span{animation:none;opacity:.6}.demo-option{transition:none}}
@media (max-width:800px){
  .live-demo{padding:80px 0}
  .demo-selector{grid-template-columns:1fr}
  .demo-option{min-height:0}
}
@media (max-width:640px){
  .demo-shell{padding:18px;border-radius:22px}
  #demo-panel{padding:16px}
  .demo-bubble{max-width:92%}
  .demo-input-row{flex-direction:column}
  .demo-send-btn{justify-content:center;min-height:46px}
}