/* World Game — chatbot widget + download/QR section */

/* ---------- Download / QR section ---------- */
.download-band { background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--pink-400) 20%, var(--bg)) 0%, var(--bg) 55%); }
.dl-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1.5rem,3vw,3rem); align-items:center; }
.dl-copy h2 { font-size: var(--text-h2); }
.dl-copy p { color: var(--text-soft); font-size: var(--text-lead); margin:.6rem 0 1.2rem; max-width: 46ch; }
.dl-badges { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }

.play-badge { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; background:#000; color:#fff;
  padding:.6rem 1.1rem; border-radius:14px; border:1px solid rgba(255,255,255,.18); box-shadow:var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur); }
.play-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.play-badge svg { width:26px; height:26px; flex:none; }
.play-badge .pb-txt { line-height:1.1; text-align:left; }
.play-badge .pb-txt small { display:block; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; opacity:.8; }
.play-badge .pb-txt b { font-family:var(--font-display); font-weight:600; font-size:1.15rem; }

.qr-card { justify-self:center; background:#fff; border-radius:var(--radius-lg); padding:1.2rem; box-shadow:var(--shadow-lg); text-align:center; width:min(280px,80vw); }
.qr-card .qr { width:200px; height:200px; margin:0 auto; }
.qr-card .qr svg { border-radius:8px; }
.qr-card p { color:#3A2E39; font-weight:800; margin-top:.7rem; font-size:.9rem; }
.qr-card small { color:#6b5b68; }

/* ---------- Chatbot ---------- */
.chat-launcher { position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 90; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:600; font-size:1rem;
  color:#fff; background:linear-gradient(135deg,var(--pink-400),var(--pink-600)); padding:.8rem 1.2rem; border-radius:999px; box-shadow:var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur); }
.chat-launcher:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.chat-panel { position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 95; width: min(380px, calc(100vw - 2.2rem)); height: min(560px, calc(100dvh - 2.2rem));
  background: var(--bg-elev); border:1px solid var(--surface-ring); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  display:flex; flex-direction:column; overflow:hidden; opacity:0; transform: translateY(16px) scale(.98); pointer-events:none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.chat-panel.show { opacity:1; transform:none; pointer-events:auto; }

.chat-head { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1rem; color:#fff;
  background:linear-gradient(135deg,var(--pink-500),var(--pink-600)); }
.chat-title { display:flex; align-items:center; gap:.6rem; }
.chat-ava { width:38px; height:38px; display:grid; place-items:center; background:rgba(255,255,255,.2); border-radius:999px; font-size:1.2rem; }
.chat-title strong { font-family:var(--font-display); font-weight:600; display:block; }
.chat-title small { opacity:.85; font-size:.75rem; }
.chat-close { background:rgba(255,255,255,.18); border:none; color:#fff; width:34px; height:34px; border-radius:999px; cursor:pointer; font-size:1rem; }

.chat-msgs { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; background:var(--bg-sunk); }
.chat-msg { max-width:82%; padding:.65rem .85rem; border-radius:16px; font-size:.92rem; line-height:1.45; word-wrap:break-word; }
.chat-msg a { color:var(--accent-strong); font-weight:800; }
.chat-bot { align-self:flex-start; background:var(--bg-elev); border:1px solid var(--surface-ring); border-bottom-left-radius:5px; }
.chat-user { align-self:flex-end; background:linear-gradient(135deg,var(--pink-400),var(--pink-500)); color:#fff; border-bottom-right-radius:5px; }
.chat-bot a { color:var(--accent-strong); }

.chat-quick { display:flex; flex-wrap:wrap; gap:.4rem; }
.chat-chip { border:1px solid var(--accent); color:var(--accent-strong); background:transparent; border-radius:999px; padding:.4rem .7rem;
  font-weight:800; font-size:.8rem; cursor:pointer; transition: background var(--dur-fast); }
.chat-chip:hover { background:color-mix(in srgb,var(--accent) 12%,transparent); }

.chat-typing { display:flex; gap:.25rem; }
.chat-typing span { width:7px; height:7px; border-radius:999px; background:var(--text-soft); opacity:.5; animation: chatdot 1s infinite; }
.chat-typing span:nth-child(2){ animation-delay:.15s } .chat-typing span:nth-child(3){ animation-delay:.3s }
@keyframes chatdot { 0%,60%,100%{ transform:translateY(0); opacity:.4 } 30%{ transform:translateY(-4px); opacity:1 } }

.chat-input { display:flex; gap:.5rem; padding:.7rem; border-top:1px solid var(--surface-ring); background:var(--bg-elev); }
.chat-input input { flex:1; padding:.7rem .9rem; border-radius:999px; border:1px solid var(--surface-ring); background:var(--bg); color:var(--text); font:inherit; }
.chat-input input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.chat-input button { width:44px; height:44px; border:none; border-radius:999px; cursor:pointer; font-size:1.1rem;
  color:#fff; background:linear-gradient(135deg,var(--pink-500),var(--pink-600)); }

@media (prefers-reduced-motion: reduce) { .chat-typing span { animation:none } }

/* ---------- responsive ---------- */
@media (max-width: 900px) { .dl-grid { grid-template-columns:1fr; } .qr-card { justify-self:start; } }
@media (max-width: 520px) {
  .chat-launcher span { display:none; }         /* icon-only bubble on phones */
  .chat-launcher { padding:.85rem; }
  .chat-panel { left:.6rem; right:.6rem; bottom:.6rem; width:auto; height:min(72dvh, 560px); }
  .cart-fab { bottom:1.1rem; }                  /* keep cart clear of chat (chat is left) */
}