/* Live order preview (chatdemo.js). Chat layout follows Discord's message rows; colours are the site's. */
.lchat{background:#0d1324;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px rgba(255,201,40,.06);text-align:left}
.lc-top{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);background:#0a0f1d;flex-wrap:wrap}
.lc-top b{font-size:14px}
.lc-sub{color:var(--mute);font-size:13px}
.lc-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.12em;color:#ff5d6c;background:rgba(255,93,108,.12);padding:5px 10px;border-radius:99px}
.lc-live i{width:7px;height:7px;border-radius:50%;background:#ff5d6c;animation:lcPulse 1.4s infinite}
@keyframes lcPulse{50%{opacity:.25}}
.lc-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:520px}
.lc-chat{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line)}
.lc-h{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.lc-h b{font-size:15px}
.lc-h small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
.lc-h em{font-style:normal;color:#5ee6a0}
.lc-off{margin-left:auto;font-size:12px;font-weight:700;color:var(--mute);border:1px solid var(--line);padding:6px 10px;border-radius:9px;white-space:nowrap}
.lc-av{width:38px;height:38px;border-radius:50%;flex:none;object-fit:cover;position:relative;display:block}
span.lc-av img{width:100%;height:100%;border-radius:50%;display:block}
span.lc-av.on::after{content:"";position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#5ee6a0;border:3px solid #0d1324}
.lc-msgs{flex:none;height:440px;overflow:hidden;padding:16px 20px 6px;display:flex;flex-direction:column;gap:14px;mask-image:linear-gradient(transparent,#000 40px)}
.lc-m{display:flex;gap:12px;align-items:flex-start;animation:lcIn .35s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes lcIn{from{opacity:0;transform:translateY(10px)}}
.lc-m>div{min-width:0}
.lc-n{display:block;font-size:14px;font-weight:700;margin-bottom:3px}
.lc-m.pro .lc-n{color:var(--sun)}
.lc-n time{font-size:11px;color:var(--mute);font-weight:500;margin-left:8px}
.lc-m p{font-size:15px;line-height:1.45;color:#dfe5f5}
.lc-chip{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-size:12px;font-weight:700;background:rgba(255,255,255,.06);border:1px solid var(--line);padding:5px 10px 5px 6px;border-radius:9px}
.lc-chip img{width:20px;height:20px}
.lc-dots{display:flex;gap:4px;padding:14px 4px}
.lc-dots i{width:7px;height:7px;border-radius:50%;background:var(--mute);animation:lcDot 1s infinite}
.lc-dots i:nth-child(2){animation-delay:.15s}.lc-dots i:nth-child(3){animation-delay:.3s}
@keyframes lcDot{30%{transform:translateY(-5px);opacity:1}0%,60%,100%{opacity:.4}}
.lc-m.sys{padding-left:50px}
.lc-game{display:flex;align-items:center;gap:12px;width:min(100%,360px);padding:10px 14px 10px 10px;border-radius:12px;background:linear-gradient(90deg,rgba(47,107,255,.18),rgba(47,107,255,.04));border-left:3px solid var(--blue2)}
.lc-game.l{background:linear-gradient(90deg,rgba(255,93,108,.16),rgba(255,93,108,.03));border-left-color:#ff5d6c}
.lc-game img{width:40px;height:40px;border-radius:8px}
.lc-game b{font-size:14px;display:block}
.lc-game.w b{color:var(--sky)}.lc-game.l b{color:#ff8c97}
.lc-game small{font-size:12px;color:var(--mute)}
.lc-game em{margin-left:auto;font-style:normal;font-weight:800;font-size:14px;white-space:nowrap}
.lc-game.w em{color:#5ee6a0}.lc-game.l em{color:#ff8c97}
.lc-promo{display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:14px;background:radial-gradient(circle at 20% 50%,rgba(255,201,40,.25),rgba(255,201,40,.04) 70%);border:1px solid rgba(255,201,40,.35);animation:lcGlow 1.6s ease-out}
.lc-promo img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(255,201,40,.6))}
.lc-promo small{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--sun)}
.lc-promo b{display:block;font-size:18px}
@keyframes lcGlow{0%{box-shadow:0 0 0 0 rgba(255,201,40,.6)}100%{box-shadow:0 0 0 18px rgba(255,201,40,0)}}
.lc-in{display:flex;align-items:center;margin:10px 16px 16px;padding:12px 12px 12px 16px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);min-height:48px;font-size:15px}
.lc-typed:empty::before{content:"Message Kai";color:var(--mute)}
.lc-caret{width:2px;height:18px;background:var(--sun);margin-left:2px;animation:lcPulse 1s steps(1) infinite}
.lc-send{margin-left:auto;width:32px;height:32px;border-radius:9px;background:var(--sun);color:#1a1300;display:grid;place-items:center}
.lc-send svg{width:16px;height:16px}
.lc-side{padding:20px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,rgba(255,201,40,.05),transparent 40%)}
.lc-rank{display:flex;align-items:center;gap:14px}
.lc-rank.pop .lc-emb{animation:lcPop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes lcPop{0%{transform:scale(.6);filter:brightness(2)}100%{transform:none}}
.lc-emb{width:86px;height:86px;object-fit:contain;filter:drop-shadow(0 8px 22px rgba(0,0,0,.6))}
.lc-rank small,.lc-stats small,.lc-lbl{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--mute)}
.lc-rn{display:block;font-size:24px;font-weight:800;margin:2px 0}
.lc-lp{color:var(--mute);font-size:14px}.lc-lp b{color:#fff}
.lc-bar{height:10px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.lc-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--sun2),var(--sun));box-shadow:0 0 14px rgba(255,201,40,.6);transition:width .9s cubic-bezier(.3,.9,.3,1)}
.lc-goal{display:flex;justify-content:space-between;font-size:13px;color:var(--mute);margin-top:-6px}
.lc-goal b{color:var(--sun)}
.lc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lc-stats div{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.lc-stats b{display:block;font-size:20px;margin-top:2px}
.lc-hist{display:flex;flex-direction:column;gap:8px;margin-top:-4px}
.lc-empty{font-size:13px;color:var(--mute)}
.lc-hr{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:10px;background:rgba(255,255,255,.04);animation:lcIn .35s both}
.lc-hr img{width:30px;height:30px;border-radius:7px}
.lc-hr span{font-weight:700;font-size:14px}
.lc-hr small{color:var(--mute);font-weight:500;font-size:12px;margin-left:8px}
.lc-hr em{margin-left:auto;font-style:normal;font-weight:800;font-size:14px}
.lc-hr.w em{color:#5ee6a0}.lc-hr.l em{color:#ff8c97}
.lc-hr.w{box-shadow:inset 3px 0 var(--blue2)}.lc-hr.l{box-shadow:inset 3px 0 #ff5d6c}

/* Section around it */
.lcsec{padding:90px 0 40px}
.lcsec .lc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:36px}
.lcsec .lc-head .sec-sub{max-width:420px}

@media(max-width:1000px){
  .lc-body{grid-template-columns:1fr;min-height:0}
  .lc-chat{border-right:0;border-bottom:1px solid var(--line)}
  .lc-side{order:-1;display:grid;grid-template-columns:auto 1fr;gap:12px 16px;align-items:center}
  .lc-side .lc-rank{grid-row:span 2}
  .lc-side .lc-bar,.lc-side .lc-goal{grid-column:2}
  .lc-side .lc-stats,.lc-side .lc-lbl,.lc-side .lc-hist{grid-column:1/-1}
  .lc-side .lc-lbl,.lc-side .lc-hist{display:none}
  .lcsec .lc-head{flex-direction:column;align-items:flex-start;gap:10px}
}
@media(max-width:600px){
  .lchat{border-radius:16px}
  .lc-top{padding:12px 14px;gap:8px}.lc-sub{width:100%;font-size:12px}
  .lc-h,.lc-msgs{padding-left:14px;padding-right:14px}
  .lc-msgs{height:360px}
  .lc-off{display:none}
  .lc-side{grid-template-columns:1fr;padding:16px 14px}
  .lc-side .lc-rank{grid-row:auto}
  .lc-side .lc-bar,.lc-side .lc-goal{grid-column:1}
  .lc-emb{width:64px;height:64px}.lc-rn{font-size:20px}
  .lc-m p{font-size:14px}
  .lc-m.sys{padding-left:0}
  .lc-in{margin:8px 12px 12px}
  .lcsec{padding:60px 0 20px}
}
@media(prefers-reduced-motion:reduce){.lc-m,.lc-hr,.lc-promo,.lc-rank.pop .lc-emb{animation:none}.lc-bar i{transition:none}}