/* ==========================================================================
   Q-VIRA / Mr.Q chat widget styles
   Ported from main.html. Everything is scoped under #qvira-chat-widget so it
   can't leak into (or be overridden by) the host WordPress theme's CSS.
   ========================================================================== */

/* ---- §1 · design tokens (scoped, not :root, so they don't leak site-wide) */
#qvira-chat-widget{
  --brand:#43B680;
  --brand-2:#369E70;
  --brand-deep:#1F7A54;
  --brand-tint:#EAF7F0;
  --brand-tint-2:#DCF1E6;
  --ink:#111418;
  --ink-soft:#484848;
  --line:#DFDFDF;
  --bubble-line:#E4E4E4;
  --chip:#EAF7F0;
  --chip-text:#1F7A54;
  --panel-shadow:0 24px 50px -14px rgba(31,122,84,.34);
  --font: "Noto Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-family:var(--font);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
#qvira-chat-widget *{box-sizing:border-box;}

/* ---- §2 · floating button (FAB) */
#qvira-chat-widget .fab{
  position:fixed;right:24px;bottom:var(--qvira-bottom-offset, 24px);z-index:2147483646;
  width:60px !important;height:60px !important;min-width:60px !important;min-height:60px !important;
  max-width:60px !important;max-height:60px !important;border-radius:50%;
  background:var(--brand);border:0;padding:0 !important;box-sizing:border-box !important;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
#qvira-chat-widget .fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 24px rgba(0,0,0,.32);}
#qvira-chat-widget .fab:active{transform:scale(.96);}
#qvira-chat-widget .fab svg{width:26px;height:26px;fill:#fff;flex-shrink:0;}
#qvira-chat-widget .fab .fab-logo{
  width:48px !important;height:48px !important;min-width:48px !important;min-height:48px !important;
  max-width:48px !important;max-height:48px !important;flex-shrink:0 !important;
  border-radius:50%;object-fit:cover !important;
}
#qvira-chat-widget .fab:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px;}

/* ---- §3 · panel shell + header */
#qvira-chat-widget .panel{
  position:fixed;right:24px;bottom:var(--qvira-bottom-offset, 24px);z-index:2147483647;
  width:400px;max-width:calc(100vw - 32px);
  background:#fff;border-radius:24px;overflow:hidden;
  box-shadow:var(--panel-shadow);
  display:none;flex-direction:column;
  transform:translateY(14px) scale(.98);opacity:0;
  transition:transform .2s ease, opacity .2s ease;
}
#qvira-chat-widget .panel.open{display:flex;transform:translateY(0) scale(1);opacity:1;}

#qvira-chat-widget .panel-head{
  background:var(--qvira-panel-bg, linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 55%, var(--brand-deep) 100%));
  padding:28px 18px;flex-shrink:0;
  position:relative;z-index:2;overflow:hidden;
}
#qvira-chat-widget .head-top{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; }
#qvira-chat-widget .head-chip{ display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.22); border-radius:999px; padding:4px 12px 4px 4px; }
#qvira-chat-widget .head-chip .head-ava{ width:24px !important; height:24px !important; min-width:24px !important; min-height:24px !important; max-width:24px !important; max-height:24px !important; flex-shrink:0 !important; border-radius:50%; object-fit:cover !important; background:#fff; display:block; }
#qvira-chat-widget .head-chip span{ color:#fff; font-weight:700; font-size:11.5px; }
#qvira-chat-widget .head-actions{ display:flex; align-items:center; gap:2px; }
#qvira-chat-widget .chat-head-actions{ position:absolute; top:8px; right:8px; z-index:1; }
#qvira-chat-widget .head-title{ position:relative; z-index:1; color:#fff; font-weight:800; font-size:20px; margin-top:14px; letter-spacing:-.01em; }
#qvira-chat-widget .head-sub{ position:relative; z-index:1; color:rgba(255,255,255,.9); font-size:12px; margin-top:4px; }
#qvira-chat-widget .head-row{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; }
#qvira-chat-widget .head-ava-big{ width:100px !important; height:100px !important; min-width:100px !important; min-height:100px !important; max-width:100px !important; max-height:100px !important; border-radius:50%; object-fit:cover !important; background:#fff; flex-shrink:0 !important; margin-left:10px; }
#qvira-chat-widget .head-row .head-text{ margin-top:10px; }
#qvira-chat-widget .head-row .head-title{ margin-top:0; }
#qvira-chat-widget .head-row .head-sub{ margin-top:2px; }
#qvira-chat-widget .head-btn{
  background:transparent;border:0;cursor:pointer;padding:10px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;line-height:0;
  min-width:40px;min-height:40px;
}
#qvira-chat-widget .head-btn:hover{background:rgba(255,255,255,.18);}
#qvira-chat-widget .head-btn svg{width:20px;height:20px;stroke:#fff;}
#qvira-chat-widget .head-btn:focus-visible{outline:2px solid #fff;outline-offset:1px;}
#qvira-chat-widget .head-btn.circled svg{width:26px;height:26px;}

/* ---- §5 · chat view: messages & bubbles */
#qvira-chat-widget .chat-view{display:none;flex-direction:column;height:750px;max-height:calc(100vh - 48px);position:relative;}
#qvira-chat-widget .chat-view.active{display:flex;}
#qvira-chat-widget .messages{
  flex:1;overflow-y:auto;padding:8px 16px 14px;
  display:flex;flex-direction:column;gap:10px;
}
#qvira-chat-widget .msg{max-width:82%;font-size:15px;line-height:1.5;border-radius:16px;padding:11px 14px;}
#qvira-chat-widget .msg.bot{
  align-self:flex-start;background:var(--brand-tint);
  color:var(--ink);border-top-left-radius:4px;border-bottom-left-radius:5px;
}
#qvira-chat-widget .msg.user{
  align-self:flex-end;background:linear-gradient(120deg,var(--brand),var(--brand-deep));color:#fff;
  border-top-right-radius:4px;border-bottom-right-radius:5px;
}
#qvira-chat-widget .msg strong{font-weight:700;}
#qvira-chat-widget .msg .lead{font-weight:700;}
#qvira-chat-widget .msg.bot.img-msg{padding:0;border:0;background:transparent;max-width:70%;}
#qvira-chat-widget .msg.bot.img-msg img{width:100% !important;height:auto !important;display:block;border-radius:14px;}

/* product result cards */
#qvira-chat-widget .product-cards-wrap{position:relative;margin:2px 0;}
#qvira-chat-widget .product-cards{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 4px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
#qvira-chat-widget .product-cards::-webkit-scrollbar{display:none;}
#qvira-chat-widget .product-card{
  scroll-snap-align:start;flex:0 0 264px;
  border:1px solid var(--bubble-line);border-radius:12px;overflow:hidden;
  text-decoration:none;color:var(--ink);background:#fff;transition:box-shadow .15s ease;
}
#qvira-chat-widget .product-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.14);}
#qvira-chat-widget .product-card .thumb{width:100% !important;height:200px !important;object-fit:cover !important;display:block;background:#F3F1EC;}
#qvira-chat-widget .product-card .info{padding:8px 10px 10px;}
#qvira-chat-widget .product-card .name{
  font-size:12.5px;font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#qvira-chat-widget .product-card .price{font-size:13px;font-weight:700;color:var(--brand-deep);margin-top:4px;}
#qvira-chat-widget .card-nav{
  position:absolute;top:88px;width:26px;height:26px;border-radius:50%;
  background:rgba(17,20,24,.72);border:0;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;z-index:2;
}
#qvira-chat-widget .card-nav svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.4;}
#qvira-chat-widget .card-nav.prev{left:-2px;}
#qvira-chat-widget .card-nav.next{right:-2px;}
#qvira-chat-widget .card-nav:hover{background:rgba(17,20,24,.9);}
#qvira-chat-widget .card-nav:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}

/* quick-reply chip pictures: one row, swipeable, same nav style as product cards */
#qvira-chat-widget .chip-images-wrap{position:relative;margin:2px 0;max-width:100%;}
#qvira-chat-widget .chip-images{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 4px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
#qvira-chat-widget .chip-images::-webkit-scrollbar{display:none;}
#qvira-chat-widget .chip-image{
  scroll-snap-align:start;flex:0 0 160px;width:160px !important;height:auto !important;
  border-radius:12px;object-fit:contain !important;display:block;background:#F3F1EC;
}
#qvira-chat-widget .chip-images-wrap .card-nav{top:50%;transform:translateY(-50%);}
/* pictures wired to a membership card (see §11b) -- clickable to open the lightbox */
#qvira-chat-widget .chip-image.has-card,
#qvira-chat-widget .msg.bot.img-msg img.has-card{cursor:pointer;}

/* review/product videos: same swipeable-row pattern, sized for a Facebook
   Reel embed (portrait 267x476, matches Facebook's own plugin defaults) */
#qvira-chat-widget .review-videos-wrap{position:relative;margin:2px 0;max-width:100%;}
#qvira-chat-widget .review-videos{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 4px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
#qvira-chat-widget .review-videos::-webkit-scrollbar{display:none;}
#qvira-chat-widget .review-video{
  scroll-snap-align:start;flex:0 0 267px;width:267px !important;height:476px !important;
  border-radius:12px;border:0;display:block;background:#F3F1EC;
}
#qvira-chat-widget .review-videos-wrap .card-nav{top:50%;transform:translateY(-50%);}

/* persistent shortcut row above the composer (e.g. "review"/"products") --
   separate from .chips: always visible, not part of the scrollable message
   history */
#qvira-chat-widget .quick-shortcuts{
  display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px;
  border-top:1px solid var(--brand-tint-2);background:#fff;flex-shrink:0;
}
#qvira-chat-widget .quick-shortcuts:empty{display:none;padding:0;border-top:0;}
#qvira-chat-widget .quick-shortcut{
  background:linear-gradient(120deg,var(--brand),var(--brand-deep));border:0;border-radius:999px;
  padding:7px 16px;font-size:12.5px;font-weight:700;font-family:var(--font);
  color:#fff;cursor:pointer;transition:filter .15s ease;
}
#qvira-chat-widget .quick-shortcut:hover{filter:brightness(1.05);}
#qvira-chat-widget .quick-shortcut:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px;}

/* ---- §6 · quick-reply chips */
#qvira-chat-widget .chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 4px;}
#qvira-chat-widget .chip{
  background:var(--chip);border:1px solid var(--brand-tint-2);border-radius:14px;
  padding:12px 14px;font-size:12.5px;font-weight:700;font-family:var(--font);
  color:var(--chip-text);cursor:pointer;text-align:center;transition:background .15s ease;
}
#qvira-chat-widget .chip:hover{filter:brightness(.96);}
#qvira-chat-widget .chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

/* ---- §7 · feedback survey */
#qvira-chat-widget .feedback{padding:6px 4px 8px;}
#qvira-chat-widget .feedback h3{font-size:19px;font-weight:700;line-height:1.3;margin:8px 0 10px;color:var(--ink);}
#qvira-chat-widget .feedback p{font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0 0 14px;}
#qvira-chat-widget .feedback a{color:var(--ink);text-decoration:underline;font-weight:700;}
#qvira-chat-widget .feedback .rate-label{font-weight:700;color:var(--ink);margin-bottom:6px;}
#qvira-chat-widget .stars{display:flex;align-items:center;gap:6px;}
#qvira-chat-widget .stars .star{width:30px;height:30px;cursor:pointer;fill:none;stroke:var(--ink);stroke-width:1.6;transition:fill .1s ease;}
#qvira-chat-widget .stars .star.filled{fill:var(--brand);stroke:var(--brand-deep);}
#qvira-chat-widget .stars .count{margin-left:auto;font-size:13px;color:#9a9a9a;}
#qvira-chat-widget .comment-box{
  width:100%;min-height:84px;border:1px solid var(--brand-tint-2);border-radius:10px;
  padding:10px 12px;font-family:var(--font);font-size:14px;resize:vertical;outline:none;
}
#qvira-chat-widget .comment-box:focus{border-color:var(--brand);}

/* ---- §8 · composer */
#qvira-chat-widget .composer{
  border-top:1px solid var(--brand-tint-2);padding:12px 16px 16px;
  display:flex;align-items:center;gap:8px;background:#fff;
}
#qvira-chat-widget .composer input{
  flex:1;border:1px solid var(--brand-tint-2);outline:none;font-size:13.5px;font-family:var(--font);
  padding:11px 14px;color:var(--ink);background:var(--brand-tint);border-radius:14px;
}
#qvira-chat-widget .composer input:focus{border-color:var(--brand);}
#qvira-chat-widget .composer input::placeholder{color:#8fa89c;}
#qvira-chat-widget .send-btn{
  background:linear-gradient(120deg,var(--brand),var(--brand-deep));border:0;cursor:pointer;padding:0;
  width:38px;height:38px;flex-shrink:0;border-radius:12px;
  display:flex;align-items:center;justify-content:center;line-height:0;
}
#qvira-chat-widget .send-btn:hover{filter:brightness(1.05);}
#qvira-chat-widget .send-btn svg{width:16px;height:16px;stroke:#fff;}
#qvira-chat-widget .send-btn:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}

/* ---- §9 · survey footer */
#qvira-chat-widget .survey-footer{border-top:1px solid var(--line);padding:14px 16px;background:#fff;display:none;}
#qvira-chat-widget .survey-footer.show{display:block;}
#qvira-chat-widget .submit-btn{
  width:100%;border:0;border-radius:999px;padding:15px 20px;
  font-size:15px;font-weight:700;font-family:var(--font);cursor:not-allowed;
  background:#EDEDED;color:#A6A6A6;transition:background .15s ease,color .15s ease;
}
#qvira-chat-widget .submit-btn.enabled{background:linear-gradient(120deg,var(--brand),var(--brand-deep));color:#fff;cursor:pointer;}
#qvira-chat-widget .submit-btn.enabled:hover{filter:brightness(1.05);}

/* ---- §10 · typing indicator */
#qvira-chat-widget .typing{align-self:flex-start;display:flex;gap:4px;padding:10px 14px;
  background:var(--brand-tint);border-radius:16px;border-bottom-left-radius:5px;}
#qvira-chat-widget .typing span{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:qvira-blink 1.2s infinite;}
#qvira-chat-widget .typing span:nth-child(2){animation-delay:.2s;}
#qvira-chat-widget .typing span:nth-child(3){animation-delay:.4s;}
@keyframes qvira-blink{0%,60%,100%{opacity:.3;}30%{opacity:1;}}

/* ---- §11 · end-chat modal */
#qvira-chat-widget .modal-overlay{
  position:absolute;inset:0;z-index:5;
  background:rgba(0,0,0,.45);
  display:none;align-items:center;justify-content:center;padding:18px;
}
#qvira-chat-widget .modal-overlay.show{display:flex;}
#qvira-chat-widget .modal{
  background:#fff;border-radius:12px;padding:24px 22px;width:100%;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
#qvira-chat-widget .modal h3{font-size:17px;font-weight:700;line-height:1.4;margin:0 0 20px;color:var(--ink);}
#qvira-chat-widget .modal button{
  width:100%;border-radius:999px;padding:14px 18px;font-size:15px;font-weight:700;
  font-family:var(--font);cursor:pointer;margin-top:10px;
}
#qvira-chat-widget .modal .end{background:linear-gradient(120deg,var(--brand),var(--brand-deep));color:#fff;border:2px solid var(--brand-deep);}
#qvira-chat-widget .modal .end:hover{filter:brightness(1.05);}
#qvira-chat-widget .modal .continue{background:#F4F4F4;color:var(--ink);border:1px solid var(--line);}
#qvira-chat-widget .modal .continue:hover{background:#ececec;}
#qvira-chat-widget .modal button:focus-visible{outline:3px solid var(--brand);outline-offset:2px;}

/* ---- §11b · membership card lightbox
   A direct child of #qvira-chat-widget (a SIBLING of .panel, not nested
   inside it) so position:fixed here resolves against the real viewport --
   .panel has its own `transform`, which would otherwise turn any
   position:fixed descendant into one scoped to the panel's own box instead
   of the page. Being a direct child keeps it in #qvira-chat-widget's CSS
   variable scope (var(--brand) etc.) while still covering the whole page. */
#qvira-chat-widget .qvira-lightbox{
  position:fixed;inset:0;z-index:2147483647;
  background:rgba(0,0,0,.72);
  display:none;align-items:center;justify-content:center;padding:32px;
  overflow-y:auto;
}
#qvira-chat-widget .qvira-lightbox.show{display:flex;}
#qvira-chat-widget .lightbox-close{
  position:fixed;top:20px;right:20px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.15);border:0;cursor:pointer;color:#fff;
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
}
#qvira-chat-widget .lightbox-close:hover{background:rgba(255,255,255,.28);}
#qvira-chat-widget .lightbox-close:focus-visible{outline:2px solid #fff;outline-offset:2px;}
#qvira-chat-widget .lightbox-content{
  display:flex;flex-direction:column;align-items:center;gap:28px;
  max-width:920px;width:100%;margin:auto;
}
#qvira-chat-widget .lightbox-columns{
  display:flex;align-items:center;gap:40px;width:100%;
}
#qvira-chat-widget .lightbox-info{flex:1;min-width:0;color:#fff;}
#qvira-chat-widget .lightbox-heading{
  font-size:19px;font-weight:700;line-height:1.5;white-space:pre-wrap;margin:0 0 16px;
}
#qvira-chat-widget .lightbox-benefits{margin:0 0 16px;padding-left:20px;}
#qvira-chat-widget .lightbox-benefits li{font-size:15px;line-height:1.6;margin-bottom:8px;}
#qvira-chat-widget .lightbox-note{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.75);white-space:pre-wrap;}
#qvira-chat-widget .lightbox-media{flex:0 0 auto;max-width:340px;}
#qvira-chat-widget .lightbox-image{width:100%;height:auto;display:block;border-radius:16px;}
#qvira-chat-widget .lightbox-cta{
  display:inline-block;background:linear-gradient(120deg,var(--brand),var(--brand-deep));
  color:#fff;text-decoration:none;font-weight:700;font-size:15px;font-family:var(--font);
  border-radius:999px;padding:14px 40px;text-align:center;
}
#qvira-chat-widget .lightbox-cta:hover{filter:brightness(1.05);}

/* ---- §12 · responsive + motion */
@media (max-width:640px){
  #qvira-chat-widget .panel{right:8px;bottom:var(--qvira-bottom-offset, 8px);width:calc(100vw - 16px);}
  #qvira-chat-widget .fab{right:16px;bottom:var(--qvira-bottom-offset, 16px);}
  #qvira-chat-widget .chat-view{height:min(600px, calc(100vh - 32px));}
  #qvira-chat-widget .qvira-lightbox{padding:20px;}
  #qvira-chat-widget .lightbox-close{top:12px;right:12px;}
  #qvira-chat-widget .lightbox-columns{flex-direction:column;gap:20px;}
  #qvira-chat-widget .lightbox-media{max-width:220px;}
  #qvira-chat-widget .lightbox-cta{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  #qvira-chat-widget .panel,#qvira-chat-widget .fab{transition:none;}
  #qvira-chat-widget .typing span{animation:none;opacity:.6;}
}