/* Zaki's chat, laid out like WhatsApp (app.js chat()).
   A header with Zaki's name and what it is doing, the messages in their own
   scrolling pane, and one input row: type, or tap the mic. Loaded last and
   unlayered, with its own wa-* class names, so the old chat styles can't leak
   in. Nothing here animates when the page is redrawn: the conversation only
   moves when a message is added or the shopper scrolls. */

.wa{
  --wa-wall:#eef1f6;
  --wa-dots:#0f1a280b;
  --wa-in:var(--qc-card,#fff);
  --wa-out:#d9e9ff;
  --wa-out-ink:#0c2a52;
  --wa-shadow:0 1px .5px #0b141a24;
  --wa-time:#667085;
  display:flex;
  flex-direction:column;
  background:var(--wa-wall);
  color:var(--qc-ink);
  overflow:hidden;
}
html[data-theme="dark"] .wa{
  --wa-wall:#111216;
  --wa-dots:#ffffff08;
  --wa-in:#222328;
  --wa-out:#1b355c;
  --wa-out-ink:#e6efff;
  --wa-shadow:0 1px .5px #00000080;
  --wa-time:#9aa1ad;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.wa-head{position:relative;z-index:2;display:flex;align-items:center;gap:10px;flex:none;min-height:60px;padding:6px 6px 6px 14px;background:var(--qc-card);border-bottom:1px solid var(--qc-line)}
.rtl .wa-head{padding:6px 14px 6px 6px}
.wa-ava{width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden;background:#0868e8}
.wa-ava img{display:block;width:100%;height:100%;object-fit:cover}
.wa-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.wa-who strong{font-size:16.5px;font-weight:700;color:var(--qc-ink)}
.wa-who small{font-size:12.5px;color:var(--qc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-who small.busy{color:var(--qc-brand-ink)}
.wa-icon{position:relative;display:grid;place-items:center;width:42px;height:42px;flex:none;padding:0;border:0;border-radius:50%;background:transparent;color:var(--qc-ink);cursor:pointer;text-decoration:none}
.wa-icon:hover{background:var(--qc-panel)}
.wa-icon svg{width:22px;height:22px}
.wa-cart b{position:absolute;top:3px;inset-inline-end:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--qc-off);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}

/* ⋮ menu */
.wa-scrim{position:fixed;inset:0;z-index:40;background:transparent}
.wa-menu{position:absolute;top:54px;inset-inline-end:8px;z-index:41;min-width:236px;max-width:calc(100% - 16px);padding:6px 0;border-radius:14px;background:var(--qc-card);box-shadow:0 10px 30px -8px #0f1a2847,0 2px 6px #0f1a281a;border:1px solid var(--qc-line)}
.wa-menu>button,.wa-menu>a{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 16px;border:0;background:none;color:var(--qc-ink);font:inherit;font-size:15px;text-align:start;text-decoration:none;cursor:pointer}
.wa-menu>button:hover,.wa-menu>a:hover{background:var(--qc-panel)}
.wa-menu>button span,.wa-menu>a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-menu svg{width:19px;height:19px;flex:none;color:var(--qc-muted)}
.wa-langs{display:flex;align-items:center;gap:6px;min-height:46px;padding:0 16px}
.wa-langs svg{margin-inline-end:6px}
.wa-langs button{height:30px;padding:0 10px;border:1px solid var(--qc-line);border-radius:15px;background:none;color:var(--qc-ink);font:inherit;font-size:13px;cursor:pointer}
.wa-langs button.on{background:var(--qc-brand);border-color:var(--qc-brand);color:#fff}

/* The order on its way, pinned under the header. */
.wa-pin{display:flex;align-items:center;gap:10px;flex:none;padding:8px 14px;background:var(--qc-card);border-bottom:1px solid var(--qc-line);color:var(--qc-ink);text-decoration:none;font-size:13px}
.wa-pin>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.wa-pin small{color:var(--qc-muted);font-size:12px}
.wa-pin strong{font-weight:700}
.wa-pin .chev{width:16px;height:16px;transform:rotate(-90deg);color:var(--qc-muted)}
.rtl .wa-pin .chev{transform:rotate(90deg)}

/* ── Messages ───────────────────────────────────────────────────────────── */
.wa-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 10px 10px;background-image:radial-gradient(var(--wa-dots) 1px,transparent 1.2px);background-size:18px 18px;scrollbar-width:thin}
.wa-thread{display:flex;flex-direction:column;gap:3px;max-width:860px;margin:0 auto}
.wa .day-sep{display:flex;justify-content:center;margin:10px 0 6px;border:0;padding:0}
.wa .day-sep::before,.wa .day-sep::after{display:none}
.wa .day-sep span{padding:4px 10px;border-radius:8px;background:var(--wa-in);box-shadow:var(--wa-shadow);color:var(--wa-time);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
.wa-row{display:flex;flex-direction:column;margin-top:3px}
.wa-row.in{align-items:flex-start}
.wa-row.out{align-items:flex-end}
.wa-row.out+.wa-row.in,.wa-row.in+.wa-row.out{margin-top:8px}
.wa-bubble{max-width:min(82%,560px);padding:7px 10px 5px;border-radius:12px;background:var(--wa-in);box-shadow:var(--wa-shadow);color:var(--qc-ink);font-size:15px;line-height:1.42;overflow-wrap:anywhere}
.wa-row.in .wa-bubble{border-start-start-radius:4px}
.wa-row.out .wa-bubble{border-start-end-radius:4px;background:var(--wa-out);color:var(--wa-out-ink)}
.wa-bubble.wide{width:min(92%,620px);max-width:none}
.wa-row.failed .wa-bubble{background:var(--qc-deal);color:var(--qc-deal-ink)}
.wa-text{white-space:pre-line}
.wa-text .rich{white-space:normal}
.wa-text .rich p{margin:0 0 6px}
.wa-text .rich p:last-child,.wa-text .rich ul:last-child,.wa-text .rich ol:last-child{margin-bottom:0}
.wa-text .rich ul,.wa-text .rich ol{margin:4px 0 6px;padding-inline-start:20px}
.wa-time{display:block;margin-top:2px;font-size:11px;line-height:1.2;color:var(--wa-time);text-align:end}
.wa-row.out .wa-time{color:color-mix(in srgb,var(--wa-out-ink) 55%,transparent)}
.wa-typing{padding:12px 14px}
.wa-typing .typing-dots{margin:0}

/* What sits inside Zaki's answers: products, buttons, cards and forms. */
.wa-bubble .chat-products,.wa-bubble .shelf-group,.wa-bubble .note,.wa-bubble .za-card,.wa-bubble form{margin-top:8px}
.wa-bubble .shelf-group+.shelf-group{margin-top:10px}
.wa-bubble .btn{margin-top:8px}
.wa-bubble .chat-product{background:var(--qc-card)}
html[data-theme="dark"] .wa-bubble .chat-product{background:#1a1b1f}

/* Zaki's suggestions for what comes next, under its latest answer only. */
.wa-row .za-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px;max-width:94%;padding:0;border:0}
.wa .za-chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:1px solid var(--qc-line);border-radius:17px;background:var(--qc-card);color:var(--qc-brand-ink);font:inherit;font-size:13.5px;font-weight:600;white-space:nowrap;box-shadow:none;cursor:pointer;animation:none}
.wa .za-chip svg{width:16px;height:16px;flex:none}
.wa .za-chip:disabled{opacity:.5}

/* ── Input row ──────────────────────────────────────────────────────────── */
.wa-bar{display:flex;align-items:flex-end;gap:6px;flex:none;margin:0;padding:6px 8px 8px;background:transparent}
.wa-field{position:relative;flex:1;min-width:0;display:flex;align-items:center;min-height:46px;padding:0 16px;border-radius:23px;background:var(--qc-card);box-shadow:var(--wa-shadow)}
.wa-field input{flex:1;min-width:0;width:100%;height:46px;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;color:var(--qc-ink);font:inherit;font-size:16px}
.wa-field input::placeholder{color:var(--qc-muted)}
.wa-live{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:23px;background:var(--qc-card);color:var(--qc-ink);font-size:15px;white-space:nowrap;overflow:hidden}
.wa-live span:last-child{overflow:hidden;text-overflow:ellipsis}
.wa-live .spinner{flex:none}
.wa-dot{width:10px;height:10px;flex:none;border-radius:50%;background:#e3262f;animation:wa-pulse 1.2s ease-in-out infinite}
.wa-dot.speak{background:var(--qc-brand)}
@keyframes wa-pulse{50%{opacity:.35}}
.wa-btn{display:grid;place-items:center;width:46px;height:46px;flex:none;margin:0;padding:0;border:0;border-radius:50%;background:var(--qc-brand);color:#fff;cursor:pointer;box-shadow:var(--wa-shadow)}
.wa-btn svg{width:22px;height:22px}
.wa-btn:disabled{opacity:.5;cursor:default}
.wa-mic.on{background:#e3262f;box-shadow:0 0 0 calc(var(--lvl,0) * 10px) #e3262f33}
.rtl .wa-send svg{transform:scaleX(-1)}
/* The mic while the box is empty, send once something is typed (and while Zaki listens, only stop). */
.wa-bar .wa-send{display:none}
.wa-bar.has-text .wa-send,.wa-bar.no-mic .wa-send{display:grid}
.wa-bar.has-text .wa-mic{display:none}
.wa-bar.live .wa-send{display:none}
.wa-bar.live .wa-mic{display:grid}

/* ── Phones: the chat is the whole screen above the tab bar ─────────────── */
@media(max-width:650px){
  body.live.qc-r-chat{overflow:hidden}
  body.live.qc-r-chat .topbar,body.live.qc-r-chat .utility-bar,body.live.qc-r-chat .catbar{display:none}
  body.live.qc-r-chat .page{margin:0;padding:0;min-height:0}
  .wa{position:fixed;left:0;right:0;top:0;height:calc(100dvh - 64px);z-index:20}
  .wa-head{padding-top:calc(6px + env(safe-area-inset-top,0px))}
  .wa-menu{top:calc(54px + env(safe-area-inset-top,0px))}
  /* The keyboard is up: the tab bar steps aside, as in WhatsApp (fitChat). */
  body.wa-kb .mobile-nav{display:none}
}
/* ── Larger screens: the same chat as a card under the shop's header ────── */
@media(min-width:651px){
  .wa{position:relative;max-width:900px;height:calc(100vh - 220px);min-height:460px;margin:0 auto;border:1px solid var(--qc-line);border-radius:18px;box-shadow:0 12px 32px -20px #0f1a2840}
}
@media(prefers-reduced-motion:reduce){
  .wa-dot{animation:none}
  .wa-mic.on{box-shadow:none}
}