/* ─────────────────────────────────────────────────────────────────────────────
   Voice first: Zaki's tab is the shop's front door. A big mic to talk (Zaki
   answers out loud and listens again), where it delivers under its name, the
   order read back as a card with Place order, and the inline delivery form.
   Also the four bottom tabs, Orders' "on its way" card and the Shop
   page's lower half (department tabs under the banners).

   Loaded unlayered after qc.css (index.html), so these rules win over the
   base layer; colours are qc.css's tokens, which are set again for dark.
   ───────────────────────────────────────────────────────────────────────────── */
:root{--zv-blue:#0868e8;--zv-blue-2:#0650b8;--zv-red:#e3262f;--zv-glow:#0868e840}
html[data-theme="dark"]{--zv-blue:#3d8bff;--zv-blue-2:#1f6fe6;--zv-red:#ff5a64;--zv-glow:#3d8bff55}

/* ── Zaki's heading: where it delivers, the order on its way ──────────────── */
.zv-head{padding-bottom:14px}
.zv-head h1{color:var(--qc-ink)}
.zv-head p{color:var(--qc-muted);margin-inline:auto}
.zv-where{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:14px auto 0;padding:9px 14px;border:1px solid var(--qc-line);border-radius:999px;background:var(--qc-card);color:var(--qc-ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.zv-where svg{width:17px;height:17px;flex:none;color:var(--zv-blue)}
.zv-where>span:not(.spinner){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zv-where em{display:inline-flex;align-items:center;gap:4px;padding-inline-start:8px;border-inline-start:1px solid var(--qc-line);font-style:normal;font-weight:800;color:var(--qc-brand-ink);white-space:nowrap}
.zv-where em svg{width:14px;height:14px;color:inherit}
.zv-where .chev{width:15px;height:15px;color:var(--qc-muted)}
.zv-where.unset{border-color:var(--zv-blue);color:var(--qc-brand-ink)}
.zv-where .spinner{flex:none}
/* Whisper · Co-pilot · Autopilot under where Zaki delivers. */
.zv-modes{display:inline-grid;grid-template-columns:repeat(3,auto);gap:4px;margin:12px auto 0;padding:4px;border:1px solid var(--qc-line);border-radius:999px;background:var(--qc-card)}
.zv-mode{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--qc-muted);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.zv-mode svg{width:16px;height:16px;flex:none}
.zv-mode.on{background:var(--zv-blue);color:#fff}
.zv-mode:focus-visible{outline:2px solid var(--qc-brand-ink);outline-offset:2px}
.zv-mode-tag{margin:6px auto 0;font-size:13px;color:var(--qc-muted)}
.zv-live-order{display:flex;align-items:center;gap:12px;max-width:420px;margin:12px auto 0;padding:12px 14px;border-radius:14px;background:var(--qc-add-bg);color:var(--qc-ink);text-align:start;text-decoration:none}
.zv-live-order span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.zv-live-order small{font-size:12px;color:var(--qc-muted)}
.zv-live-order strong{font-size:15px}
.zv-live-order .chev{width:16px;height:16px;color:var(--qc-muted)}
.zv-head.speaking .zaki-stage{filter:drop-shadow(0 0 22px var(--zv-glow))}

/* ── The mic dock ─────────────────────────────────────────────────────────── */
.zv-dock{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 2px}
.zv-status{min-height:22px;margin:0;max-width:100%;padding:0 12px;font-size:15px;font-weight:700;color:var(--qc-ink);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zv-row{display:grid;grid-template-columns:52px auto 52px;align-items:center;gap:28px}
.zv-orb{position:relative;width:78px;height:78px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--zv-blue);color:#fff;cursor:pointer;box-shadow:0 12px 28px -8px var(--zv-glow),0 0 0 6px color-mix(in srgb,var(--zv-blue) 14%,transparent);transition:transform .15s ease,background .2s ease;-webkit-tap-highlight-color:transparent}
.zv-orb svg{position:relative;z-index:1;width:32px;height:32px;stroke-width:2.2}
.zv-orb:active{transform:scale(.94)}
.zv-orb:disabled{opacity:.55;cursor:default}
.zv-orb:focus-visible{outline:3px solid var(--qc-brand-ink);outline-offset:4px}
.zv-orb.on{background:var(--zv-red);box-shadow:0 0 0 calc(6px + var(--lvl,0) * 16px) color-mix(in srgb,var(--zv-red) 22%,transparent)}
.zv-ring{position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;opacity:0;pointer-events:none}
.zv-orb.on .zv-ring{color:var(--zv-red);animation:zvRing 1.6s ease-out infinite}
.zv-orb.on .zv-ring.r2{animation-delay:.8s}
.zv-orb.speaking .zv-ring{color:var(--zv-blue);animation:zvRing 2.2s ease-out infinite}
.zv-orb.speaking .zv-ring.r2{animation-delay:1.1s}
@keyframes zvRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.75);opacity:0}}
.zv-side{position:relative;width:52px;height:52px;display:grid;place-items:center;padding:0;border:1px solid var(--qc-line);border-radius:50%;background:var(--qc-card);color:var(--qc-ink);cursor:pointer;text-decoration:none}
.zv-side svg{width:22px;height:22px}
.zv-side.ghost{visibility:hidden}
.zv-cart b{position:absolute;top:-4px;inset-inline-end:-4px;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:var(--zv-red);color:#fff;font-size:11px;font-weight:800;line-height:1}
.zv-hint{margin:0;padding:0 12px;font-size:12.5px;color:var(--qc-muted);text-align:center}
.zv-hint .text-link{font-size:inherit}
.chat-layout.zv .composer-wrap{background:var(--qc-bg)}
.chat-layout.zv .chat-prompts{display:none}

/* ── The order read back, and the delivery details Zaki asks for ──────────── */
.zv-order{display:grid;gap:10px;margin-top:12px;padding:14px;border:1px solid var(--qc-line);border-radius:14px;background:var(--qc-card);color:var(--qc-ink)}
.zv-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--qc-line)}
.zv-total span{font-size:13px;font-weight:700;color:var(--qc-muted)}
.zv-total strong{font-size:22px}
.zv-line{display:grid;grid-template-columns:18px auto minmax(0,1fr);align-items:start;gap:10px;font-size:14px}
.zv-line svg{width:18px;height:18px;margin-top:1px;color:var(--qc-muted)}
.zv-line span{color:var(--qc-muted)}
.zv-line strong{text-align:end;font-weight:700;overflow-wrap:anywhere}
.zv-order .action-row{margin-top:4px;display:flex;gap:10px}
.zv-order .action-row .btn{flex:1}
.zv-order .action-row .btn:last-child{flex:2}
.zv-done{display:flex;align-items:center;gap:8px;margin:2px 0 0;font-weight:800;color:#13a35a}
.zv-done svg{width:18px;height:18px}
.zv-details{display:grid;gap:10px;margin-top:12px}
.zv-details .two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zv-details .field{margin:0}
.zv-details .small-note{display:flex;align-items:center;gap:6px;margin:0}
.zv-details .small-note svg{width:15px;height:15px;flex:none}

/* ── The AI's own formatting (bold, lists) inside a reply ─────────────────── */
.message .rich{white-space:normal}
.message .rich p{margin:0;line-height:1.65}
.message .rich p+p,.message .rich p+ol,.message .rich p+ul,.message .rich ol+p,.message .rich ul+p{margin-top:10px}
.message .rich ol,.message .rich ul{margin:6px 0 0;padding-inline-start:22px}
.message .rich li{line-height:1.6}
.message .rich li+li{margin-top:4px}
.message .rich strong{font-weight:750}

/* ── Asking the store to get it: the form, then the request's card ────────── */
.zr-form{display:grid;gap:10px;margin-top:12px;white-space:normal}
.zr-form .field{margin:0}
.zr-form .field textarea{min-height:64px}
.zr-form .two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zr-form .small-note{display:flex;align-items:center;gap:6px;margin:0}
.zr-form .small-note svg{width:15px;height:15px;flex:none}
.zr-items{display:grid;gap:8px}
.zr-labels,.zr-item{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:8px}
.zr-labels span{font-size:11px;font-weight:600}
.zr-item input{width:100%;min-width:0;border:1px solid var(--qc-line);border-radius:8px;background:var(--qc-card);color:var(--qc-ink);padding:11px 12px;font-size:16px}
.zr-form .btn svg{width:17px;height:17px}
.zr-card{display:grid;gap:8px;margin-top:12px;padding:14px;border:1px solid var(--qc-line);border-radius:14px;background:var(--qc-card);color:var(--qc-ink);white-space:normal}
.zr-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zr-head svg{width:18px;height:18px;color:#13a35a}
.zr-ref{margin-inline-start:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:700;letter-spacing:.5px;padding:3px 8px;border-radius:6px;border:1px solid var(--qc-line)}
.zr-card>p{margin:0;font-size:13px;color:var(--qc-muted)}
.zr-status{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.zr-status span{color:var(--qc-muted)}
.zr-reply{padding:10px 12px;border-radius:10px;border:1px solid var(--qc-line)}
.zr-reply span{display:block;font-size:11px;font-weight:700;color:var(--qc-muted);margin-bottom:4px}
.zr-reply p{margin:0;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.zr-card .text-link{justify-self:start;font-size:13px}
@media(max-width:650px){.zr-form .two-col{grid-template-columns:1fr}}

/* ── Bottom tabs: four, Zaki first ────────────────────────────────────────── */
.mobile-nav .tab-live{position:absolute;top:2px;inset-inline-start:calc(50% + 8px);width:9px;height:9px;border-radius:50%;background:#13a35a;box-shadow:0 0 0 2px var(--qc-card)}
@media(prefers-reduced-motion:no-preference){.mobile-nav .tab-live{animation:zvBlink 1.6s ease-in-out infinite}}
@keyframes zvBlink{50%{opacity:.35}}

/* ── Orders: the one on its way ───────────────────────────────────────────── */
.orders-sub{margin:6px 0 12px;font-size:17px;font-weight:800;color:var(--qc-ink)}
.cur-order{display:grid;gap:14px;margin-bottom:22px;padding:18px;border-radius:18px;border:1px solid color-mix(in srgb,var(--zv-blue) 30%,var(--qc-line));background:var(--qc-add-bg);color:var(--qc-ink);text-decoration:none}
.cur-top{display:flex;align-items:flex-start;gap:12px}
.cur-ico{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--zv-blue);color:#fff}
.cur-ico svg{width:22px;height:22px}
.cur-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cur-text small{font-size:12px;color:var(--qc-muted)}
.cur-text strong{font-size:18px}
.cur-text em{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:13px;font-weight:700;color:var(--qc-brand-ink)}
.cur-text em svg{width:14px;height:14px}
.cur-order .order-steps{margin:0}
.cur-foot{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--qc-muted)}
.cur-foot strong{color:var(--qc-ink)}
.cur-go{margin-inline-start:auto;display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--qc-brand-ink)}
.cur-go svg{width:16px;height:16px}

/* ── Shop: banners on top, departments and shelves below (offers: Deals tab) ─ */
.home-promos{display:grid;gap:4px}
.home-promos>.qc-live{margin-bottom:14px}
.home-shop-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:26px 0 12px;padding-top:22px;border-top:1px solid var(--qc-line);scroll-margin-top:96px}
.home-shop-head h2{margin:0;font-size:20px;font-weight:800;color:var(--qc-ink)}
.home-shop-head .qc-link{display:inline-flex;align-items:center;gap:2px;font-size:14px;font-weight:700;color:var(--qc-brand-ink);text-decoration:none}
.home-shop-head .qc-link svg{width:15px;height:15px}

/* Right-pointing chevrons (the icon points down), mirrored in Arabic. */
.cur-go svg,.zv-live-order .chev{transform:rotate(-90deg)}
.rtl .cur-go svg,.rtl .zv-live-order .chev{transform:rotate(90deg)}

@media(max-width:650px){
  /* Zaki's tab: the conversation and the mic. The header keeps only the logo
     and its buttons; where Zaki delivers is the chip under its name. */
  body.live.qc-r-chat .topbar{grid-template-areas:"brand actions";top:0}
  body.live.qc-r-chat .topbar .search,body.live.qc-r-chat .topbar .delivery{display:none}
  .zv-head{padding-top:0}
  .zv-head .zaki-stage{width:84px;margin-bottom:6px}
  .zv-head h1{font-size:22px}
  .zv-head p{font-size:13.5px}
  .zv-modes{display:grid;width:100%;max-width:360px}
  .zv-mode{padding:0 8px;font-size:13px}
  .chat-layout.zv .composer-wrap{padding-top:8px}
  .zv-orb{width:72px;height:72px}
  .zv-row{gap:22px}
  /* The department tabs sit in the page now (under the offers), not in the header. */
  .home-tabs.qc-tabs-wide{display:block;margin:0 -16px 16px;padding:10px 6px 0;border-radius:0}
  body.live.qc-r-home .topbar{grid-template-areas:"where actions" "search search";padding-bottom:12px;background:var(--qc-bg);border-bottom:1px solid var(--qc-line)}
  html[data-theme="dark"] body.live.qc-r-home .topbar{background:var(--qc-bg)}
  .home-shop-head{margin-top:18px;padding-top:18px}
}
@media(prefers-reduced-motion:reduce){
  .zv-orb{transition:none}
  .zv-orb:active{transform:none}
  .zv-orb.on .zv-ring,.zv-orb.speaking .zv-ring{animation:none;opacity:.5;transform:scale(1.25)}
}

/* ── A calmer conversation ────────────────────────────────────────────────────
   Smaller type, tighter bubbles, and once a chat has started a slim header: the
   big robot, headline and explainer give the screen back to the conversation.
   Inputs stay 16px on phones (below that iOS zooms the page when one is tapped). */
.chat-layout .messages{gap:10px}
.chat-layout .message{font-size:13.5px;line-height:1.5;padding:9px 13px;border-radius:5px 15px 15px 15px;box-shadow:none}
.chat-layout .message.user{border-radius:15px 5px 15px 15px;box-shadow:none}
.rtl .chat-layout .message{border-radius:15px 5px 15px 15px}
.rtl .chat-layout .message.user{border-radius:5px 15px 15px 15px}
.message .rich p,.message .rich li{line-height:1.5}
.message .rich p+p,.message .rich p+ol,.message .rich p+ul,.message .rich ol+p,.message .rich ul+p{margin-top:6px}
.message .rich ol,.message .rich ul{margin-top:4px;padding-inline-start:20px}
.message .rich li+li{margin-top:2px}
.za-chip{font-size:12px;padding:6px 11px;gap:5px}
.za-chip svg{width:14px;height:14px}
.quick-chip{font-size:12px;padding:7px 12px}
.quick-chip svg{width:15px;height:15px}
.chat-product{font-size:12px}
.zv-head h1{font-size:22px;letter-spacing:-.4px}
.zv-head p{font-size:13px}
.zv-head .eyebrow{font-size:12px}
.zv-where{font-size:13px;padding:7px 12px;margin-top:10px}
.zv-mode{font-size:12.5px;min-height:32px;padding:0 12px;gap:5px}
.zv-mode svg{width:15px;height:15px}
.zv-mode-tag{font-size:12px}
.zv-status{font-size:13.5px}
.zv-hint{font-size:11.5px}
.zv-new::before{content:"·";margin-inline:6px}
.composer-note{font-size:11px}
/* The request card says each thing once: reference, status, the store's reply. */
.zr-card{padding:10px 12px;gap:6px;border-radius:12px}
.zr-head{gap:6px}
.zr-head strong{font-size:13.5px}
.zr-ref{font-size:12px;padding:2px 7px}
.zr-card>p,.zr-status{font-size:12px}
.zr-reply{padding:8px 10px}
.zr-reply span{font-size:11px}
.zr-reply p{font-size:12.5px}
.zr-card .text-link{font-size:12px}
.zr-form .field span{font-size:11px}

/* Once the chat has started: where Zaki delivers and how much it does, in one slim row. */
.chat-layout.has-thread .zv-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:2px 0 10px}
.chat-layout.has-thread .zv-head .zaki-stage,
.chat-layout.has-thread .zv-head p{display:none}
.chat-layout.has-thread .zv-head h1{display:none}
.chat-layout.has-thread .zv-where,
.chat-layout.has-thread .zv-modes{margin:0}
.chat-layout.has-thread .zv-live-order{flex-basis:100%;margin:0}
/* …and the mic is a smaller button with no tips under it, only "New chat". */
.chat-layout.has-thread .zv-orb{width:58px;height:58px;box-shadow:0 10px 22px -8px var(--zv-glow),0 0 0 5px color-mix(in srgb,var(--zv-blue) 14%,transparent)}
.chat-layout.has-thread .zv-orb svg{width:26px;height:26px}
.chat-layout.has-thread .zv-side{width:44px;height:44px}
.chat-layout.has-thread .zv-row{grid-template-columns:44px auto 44px;gap:18px}
.chat-layout.has-thread .zv-hint-text,
.chat-layout.has-thread .zv-new::before{display:none}
@media(max-width:650px){
  .zv-head h1{font-size:19px}
  /* The mic dock explains itself: no paragraph under the headline on a phone. */
  .zv-head p:not(.eyebrow):not(.zv-mode-tag){display:none}
  .zv-head .zaki-stage{width:64px;margin-bottom:4px}
  .zv-mode{padding:0 8px;font-size:12px}
  .zv-orb{width:64px;height:64px}
  .zv-orb svg{width:28px;height:28px}
  .zr-item input{font-size:16px}
  .chat-layout.has-thread .zv-modes{max-width:none;width:auto}
}