/* DNINE storefront chat launcher: WhatsApp + "Ask DNINE AI". Every class is scoped .dnchat-* */
.dnchat{--dn-maroon:#6A1B32;--dn-dark:#3B0E1B;--dn-gold:#D49F0B;--dn-cream:#F7F1E7;--dn-paper:#FFFCF6;--dn-line:#E4D8C5;--dn-muted:#7A6653;--dn-wa:#25D366;font-family:Nunito,'Helvetica Neue',Arial,sans-serif;color:#2B1A1F;position:fixed;right:20px;bottom:20px;z-index:44;line-height:1.45}
.dnchat[data-pos="left"]{right:auto;left:20px}
.dnchat *{box-sizing:border-box}
.dnchat [hidden]{display:none!important}

/* ---- launcher stack ---- */
.dnchat-stack{display:flex;flex-direction:column;align-items:flex-end;gap:12px;transition:transform .25s ease}
.dnchat[data-pos="left"] .dnchat-stack{align-items:flex-start}
.dnchat-fab{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;text-decoration:none;font:inherit;font-weight:800;box-shadow:0 10px 26px rgba(59,14,27,.28);transition:transform .15s ease,box-shadow .15s ease}
.dnchat-fab:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(59,14,27,.34)}
.dnchat-fab:focus-visible,.dnchat button:focus-visible,.dnchat a:focus-visible,.dnchat textarea:focus-visible,.dnchat select:focus-visible{outline:3px solid var(--dn-gold);outline-offset:2px}
.dnchat-wa{width:54px;height:54px;border-radius:50%;background:var(--dn-wa);color:#fff;position:relative}
.dnchat-wa svg{width:28px;height:28px}
.dnchat-ai{height:54px;padding:0 22px 0 16px;border-radius:999px;background:var(--dn-maroon);color:var(--dn-cream);font-family:Fredoka,Nunito,sans-serif;font-weight:600;font-size:16px;letter-spacing:.005em}
.dnchat-ai .dnchat-spark{width:30px;height:30px;border-radius:50%;background:var(--dn-gold);color:var(--dn-dark);display:grid;place-items:center;flex:0 0 auto}
.dnchat-ai .dnchat-spark svg{width:17px;height:17px}
.dnchat-tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);background:var(--dn-dark);color:var(--dn-cream);border-radius:14px;padding:8px 12px;font-size:12.5px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.dnchat[data-pos="left"] .dnchat-tip{right:auto;left:calc(100% + 12px)}
.dnchat-wa:hover .dnchat-tip,.dnchat-wa:focus-visible .dnchat-tip{opacity:1}
.dnchat-tip small{display:block;font-weight:600;color:#E6D3D8;font-size:11.5px}

/* ---- panel ---- */
.dnchat-panel{position:fixed;right:20px;bottom:20px;width:380px;height:min(560px,calc(100dvh - 40px));background:var(--dn-paper);border-radius:26px;box-shadow:0 24px 60px rgba(30,6,14,.38);display:flex;flex-direction:column;overflow:hidden;z-index:44;opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.dnchat[data-pos="left"] .dnchat-panel{right:auto;left:20px}
.dnchat.open .dnchat-panel{opacity:1;transform:none;pointer-events:auto}
.dnchat.open .dnchat-stack{display:none}
.dnchat-head{background:var(--dn-maroon);color:var(--dn-cream);padding:14px 14px 14px 16px;display:flex;align-items:center;gap:12px;flex:0 0 auto}
.dnchat-mark{width:42px;height:42px;border-radius:50%;background:var(--dn-cream);display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
.dnchat-mark img{width:30px;height:30px;object-fit:contain}
.dnchat-title{flex:1;min-width:0}
.dnchat-title b{display:block;font-family:Fredoka,Nunito,sans-serif;font-weight:600;font-size:18px;line-height:1.15}
.dnchat-title span{display:block;font-size:12px;color:#E6D3D8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dnchat-ib{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:var(--dn-cream);cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.dnchat-ib:hover{background:rgba(255,255,255,.26)}
.dnchat-ib svg{width:17px;height:17px}
.dnchat-body{flex:1;overflow-y:auto;padding:16px 14px 8px;background:var(--dn-paper);scroll-behavior:smooth;overscroll-behavior:contain}
.dnchat-row{display:flex;flex-direction:column;margin-bottom:12px;max-width:100%}
.dnchat-row.user{align-items:flex-end}
.dnchat-row.bot{align-items:flex-start}
.dnchat-msg{max-width:88%;padding:10px 14px;border-radius:18px;font-size:14.5px;word-wrap:break-word;overflow-wrap:anywhere}
.dnchat-row.user .dnchat-msg{background:var(--dn-maroon);color:var(--dn-cream);border-bottom-right-radius:6px}
.dnchat-row.bot .dnchat-msg{background:var(--dn-cream);color:#2B1A1F;border-bottom-left-radius:6px}
.dnchat-msg p{margin:0 0 8px}.dnchat-msg p:last-child{margin-bottom:0}
.dnchat-msg ul,.dnchat-msg ol{margin:4px 0 8px;padding-left:20px}
.dnchat-msg li{margin:2px 0}
.dnchat-msg a{color:var(--dn-maroon);font-weight:800;text-decoration:underline}
.dnchat-row.user .dnchat-msg a{color:var(--dn-gold)}
.dnchat-msg code{background:rgba(106,27,50,.09);border-radius:6px;padding:1px 5px;font-size:.92em}
.dnchat-fb{display:flex;gap:4px;margin:4px 0 0 4px}
.dnchat-fb button{border:0;background:none;cursor:pointer;color:var(--dn-muted);width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.dnchat-fb button:hover{background:var(--dn-cream)}
.dnchat-fb button.on{color:var(--dn-maroon);background:var(--dn-cream)}
.dnchat-fb svg{width:15px;height:15px}
.dnchat-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.dnchat-chip{border:1.5px solid var(--dn-maroon);background:transparent;color:var(--dn-maroon);border-radius:999px;padding:7px 13px;font:inherit;font-weight:800;font-size:13px;cursor:pointer;text-align:left}
.dnchat-chip:hover{background:var(--dn-maroon);color:var(--dn-cream)}
.dnchat-typing{display:inline-flex;gap:4px;padding:13px 16px}
.dnchat-typing i{width:7px;height:7px;border-radius:50%;background:var(--dn-muted);opacity:.5;animation:dnchatDot 1s infinite ease-in-out}
.dnchat-typing i:nth-child(2){animation-delay:.15s}.dnchat-typing i:nth-child(3){animation-delay:.3s}
@keyframes dnchatDot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
.dnchat-cards{display:flex;flex-direction:column;gap:8px;margin-top:8px;width:min(100%,320px)}
.dnchat-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;background:#fff;border:1px solid var(--dn-line);border-radius:16px;padding:8px}
.dnchat-card img{width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--dn-cream)}
.dnchat-card b{display:block;font-size:13.5px;line-height:1.25}
.dnchat-card .dnchat-price{font-size:12.5px;color:var(--dn-muted);font-weight:700}
.dnchat-card .dnchat-cta{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}
.dnchat-card select{height:32px;border:1px solid var(--dn-line);border-radius:999px;background:var(--dn-paper);font:inherit;font-size:12.5px;padding:0 8px;max-width:130px}
.dnchat-add{height:32px;padding:0 14px;border:0;border-radius:999px;background:var(--dn-gold);color:var(--dn-dark);font:inherit;font-weight:800;font-size:12.5px;cursor:pointer}
.dnchat-add:disabled{opacity:.6;cursor:default}
.dnchat-card a.dnchat-view{font-size:12px;font-weight:800;color:var(--dn-maroon);text-decoration:underline}
.dnchat-handoff{display:flex;align-items:center;gap:8px;margin:2px 0 0;padding:0 14px 8px;background:var(--dn-paper)}
.dnchat-hbtn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;border:1.5px solid var(--dn-wa);background:#fff;color:#0F7A3B;font:inherit;font-weight:800;font-size:13px;text-decoration:none;cursor:pointer;flex:1;justify-content:center}
.dnchat-hbtn:hover{background:var(--dn-wa);color:#fff}
.dnchat-hbtn svg{width:17px;height:17px}
.dnchat-hbtn.strong{background:var(--dn-wa);color:#fff}
.dnchat-hnote{padding:0 16px 6px;font-size:11.5px;color:var(--dn-muted);background:var(--dn-paper)}
.dnchat-form{display:flex;gap:8px;align-items:flex-end;padding:8px 12px 8px;border-top:1px solid var(--dn-line);background:var(--dn-paper);flex:0 0 auto}
.dnchat-form textarea{flex:1;resize:none;border:1.5px solid var(--dn-line);border-radius:20px;background:#fff;padding:10px 14px;font:inherit;font-size:14.5px;line-height:1.35;max-height:110px;min-height:42px;outline:none;color:#2B1A1F}
.dnchat-form textarea:focus{border-color:var(--dn-maroon)}
.dnchat-send{width:42px;height:42px;border-radius:50%;border:0;background:var(--dn-maroon);color:var(--dn-cream);cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.dnchat-send:disabled{opacity:.45;cursor:default}
.dnchat-send svg{width:18px;height:18px}
.dnchat-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.dnchat-priv{padding:0 16px 10px;font-size:11px;color:var(--dn-muted);background:var(--dn-paper);line-height:1.35}
.dnchat-count{font-size:11px;color:var(--dn-muted);text-align:right;padding:0 16px;background:var(--dn-paper)}

/* ---- pages where the launcher would collide with sticky bars (mobile only) ---- */
@media (max-width:767px){
  .dnchat[data-page="checkout"],.dnchat[data-page="packaging"]{display:none}
  .dnchat[data-page="cart"] .dnchat-stack{bottom:80px}
}
/* ---- phones: compact launcher, full-height sheet ---- */
@media (max-width:600px){
  .dnchat{right:14px;bottom:14px}
  .dnchat[data-pos="left"]{left:14px}
  .dnchat-ai{padding:0;width:54px;justify-content:center}
  .dnchat-ai .dnchat-label{display:none}
  .dnchat-ai .dnchat-spark{width:32px;height:32px;background:var(--dn-gold)}
  .dnchat-tip{display:none}
  .dnchat-panel,.dnchat[data-pos="left"] .dnchat-panel{inset:0;width:100%;height:100dvh;border-radius:0;right:0;left:0;bottom:0}
  .dnchat-msg{max-width:92%;font-size:15px}
  .dnchat-form textarea{font-size:16px} /* stops iOS zoom on focus */
}
html.dnchat-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){.dnchat *{animation:none!important;transition:none!important}}
/* WhatsApp button visibility from Commerce settings (show on desktop / mobile) */
@media (min-width:768px){.dnchat[data-wa-desk="0"] .dnchat-wa{display:none}}
@media (max-width:767px){.dnchat[data-wa-mob="0"] .dnchat-wa{display:none}}

/* ---- independent sides: WhatsApp on the left, "Ask DNINE AI" on the right (settings whatsapp_position / ai_position) ---- */
.dnchat{position:static;right:auto;left:auto;bottom:auto;z-index:auto}
.dnchat-stack{display:contents}
.dnchat-fab{position:fixed;bottom:20px;z-index:44}
.dnchat-ai{right:20px;left:auto}
.dnchat-wa{left:20px;right:auto}
.dnchat[data-ai-side="left"] .dnchat-ai{left:20px;right:auto}
.dnchat[data-wa-side="right"] .dnchat-wa{right:20px;left:auto}
.dnchat[data-same="1"] .dnchat-wa{bottom:86px}
.dnchat-tip{right:auto;left:calc(100% + 12px)}
.dnchat[data-wa-side="right"] .dnchat-tip{left:auto;right:calc(100% + 12px)}
.dnchat-panel{right:20px;left:auto}
.dnchat[data-ai-side="left"] .dnchat-panel{left:20px;right:auto}
.dnchat.open .dnchat-stack{display:contents}
.dnchat.open .dnchat-ai{display:none}
@media (max-width:767px){
  /* room at the very end of the page so the floating buttons never hide the last row / footer links (padding sits inside the dark footer, no cream strip) */
  body:has(.dnchat-fab) footer{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .dnchat[data-page="cart"] .dnchat-fab{bottom:80px}
}
@media (max-width:600px){
  .dnchat-fab{bottom:14px}
  .dnchat-ai{right:14px}.dnchat-wa{left:14px}
  .dnchat[data-ai-side="left"] .dnchat-ai{left:14px;right:auto}
  .dnchat[data-wa-side="right"] .dnchat-wa{right:14px;left:auto}
  .dnchat[data-same="1"] .dnchat-wa{bottom:78px}
  .dnchat.open .dnchat-wa{display:none}
  /* smaller floating buttons on phones; the AI button keeps only its icon so it no longer covers product names, chips and prices */
  .dnchat-wa{width:46px;height:46px}.dnchat-wa svg{width:25px;height:25px}
  .dnchat-ai{width:46px;height:46px;padding:0;border-radius:50%}
  .dnchat-ai .dnchat-label{display:none}
  .dnchat-ai .dnchat-spark{width:32px;height:32px}
  .dnchat-panel,.dnchat[data-ai-side="left"] .dnchat-panel{inset:0;left:0;right:0;bottom:0}
}
/* Phone bottom navigation bar (Settings > General): the floating buttons sit above it. --mnh = bar height (0 while the keyboard is open). */
@media (max-width:768px){
  body.dn-has-mnav .dnchat-fab{bottom:calc(14px + var(--mnh,0px))}
  body.dn-has-mnav .dnchat[data-same="1"] .dnchat-wa{bottom:calc(78px + var(--mnh,0px))}
}
@media (min-width:601px) and (max-width:768px){
  body.dn-has-mnav .dnchat[data-same="1"] .dnchat-wa{bottom:calc(86px + var(--mnh,0px))}
  body.dn-has-mnav .dnchat-panel{bottom:calc(20px + var(--mnh,0px));height:min(560px,calc(100dvh - 40px - var(--mnh,0px)))}
}