#wsai-root.wsai-root{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999999;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
#wsai-root.wsai-right{ right: 14px; }
#wsai-root.wsai-left{ left: 14px; }

#wsai-root .wsai-dock{
  display:flex; align-items:center; gap:10px;
  border: 0;
  background: #0b3;
  color: #fff;
  padding: 12px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  cursor: pointer;
}
#wsai-root .wsai-dock-label{ font-weight: 700; }
#wsai-root .wsai-dot{
  width:10px; height:10px; border-radius:999px;
  background:#d7ffea;
  box-shadow: 0 0 0 6px rgba(215,255,234,.25);
}

#wsai-root .wsai-panel{
  width: 370px;
  /* Use a stable height model so the input bar never gets pushed out of view */
  max-height: min(72vh, 560px);
  display:none;
  margin-top: 12px;
  background:#fff;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  /* Layout: header + (quick buttons) + messages (flex) + input */
  flex-direction: column;
}
#wsai-root.wsai-open .wsai-panel{ display:flex; }

#wsai-root .wsai-header{
  display:flex;
  gap: 12px;
  padding: 12px 12px 10px 12px;
  background: linear-gradient(135deg, rgba(0,187,51,.15), rgba(0,187,51,.05));
  border-bottom: 1px solid rgba(0,0,0,.06);
}
#wsai-root .wsai-title{ flex:1; min-width:0; }
#wsai-root .wsai-name{ font-weight: 800; }
#wsai-root .wsai-sub{ font-size: 12px; opacity: .75; margin-top:2px; }

#wsai-root .wsai-close{
  border:0; background:transparent; cursor:pointer;
  font-size: 18px; opacity:.65;
}
#wsai-root .wsai-close:hover{ opacity:1; }

#wsai-root .wsai-messages{
  padding: 12px;
  overflow:auto;
  /* Flex child: takes remaining space between header and input */
  flex: 1 1 auto;
  max-height: none;
  background: #fff;
}

/* Quick prompt buttons */
#wsai-root .wsai-quick{
  padding: 10px 12px 0 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
#wsai-root .wsai-quickbtn{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.1;
}
#wsai-root .wsai-quickbtn:hover{
  border-color: rgba(0,187,51,.55);
  box-shadow: 0 0 0 3px rgba(0,187,51,.12);
}
#wsai-root .wsai-msg{ display:flex; margin: 10px 0; }
#wsai-root .wsai-user{ justify-content:flex-end; }
#wsai-root .wsai-assistant{ justify-content:flex-start; }

#wsai-root .wsai-bubble{
  max-width: 88%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.35;
  white-space: pre-wrap;
}
#wsai-root .wsai-user .wsai-bubble{
  background: rgba(0,187,51,.12);
  border: 1px solid rgba(0,187,51,.22);
}
#wsai-root .wsai-assistant .wsai-bubble{
  background: #f6f7f8;
  border: 1px solid rgba(0,0,0,.06);
}
#wsai-root .wsai-loading{ opacity:.75; font-style: italic; }

#wsai-root .wsai-inputbar{
  display:flex; gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
  background:#fff;
}
#wsai-root .wsai-input{
  flex:1;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 10px 10px;
  outline: none;
}
#wsai-root .wsai-input:focus{
  border-color: rgba(0,187,51,.65);
  box-shadow: 0 0 0 3px rgba(0,187,51,.14);
}
#wsai-root .wsai-send{
  border:0;
  background:#0b3;
  color:#fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  cursor:pointer;
}
#wsai-root .wsai-mic{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 12px;
  padding: 10px 10px;
  cursor:pointer;
}
#wsai-root .wsai-footnote{
  padding: 0 12px 12px 12px;
  font-size: 12px;
  opacity: .7;
}

/* --- Short viewport fixes ---
   When the viewport is short (landscape mobile / small laptop), keep the input visible.
*/
@media (max-height: 720px){
  #wsai-root .wsai-panel{
    max-height: min(78dvh, 520px);
  }
  #wsai-root .wsai-messages{ padding: 10px; }
  #wsai-root .wsai-inputbar{ padding: 10px; }
}


/* Mobile/Tablet: keep the dock button clear of bottom toolbars; show full-screen panel only when open */
@media (max-width: 1024px){
  #wsai-root.wsai-root{
    top: auto;
    bottom: calc(var(--wsai-bottom-offset, 76px) + env(safe-area-inset-bottom));
    transform: none;
  }

  /* Fullscreen assistant on mobile/tablet when open (but leave space for site bottom toolbars) */
  #wsai-root.wsai-open{
    left: 0 !important;
    right: 0 !important;
    bottom: 0;
    top: 0;
  }

  #wsai-root.wsai-open .wsai-dock{ display:none; }

  #wsai-root.wsai-open .wsai-panel{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: calc(var(--wsai-bottom-offset, 76px) + env(safe-area-inset-bottom));
    width: 100vw;
    height: auto;
    max-height: none;
    margin-top: 0;
    border-radius: 0;
  }
}

#wsai-root .wsai-cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
#wsai-root .wsai-card{
  display:flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}
#wsai-root .wsai-cardlink{
  display:flex;
  gap: 10px;
  text-decoration:none;
  color: inherit;
}
#wsai-root .wsai-card img{
  width: 78px; height: 78px; object-fit: cover;
}
#wsai-root .wsai-imgph{
  width: 78px; height: 78px;
  background: linear-gradient(135deg, rgba(0,187,51,.18), rgba(0,0,0,.05));
}
#wsai-root .wsai-cardmeta{ padding: 8px 10px; min-width:0; }
#wsai-root .wsai-cardname{
  font-weight: 800;
  font-size: 13px;
  color:#111;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
#wsai-root .wsai-cardprice{ margin-top: 6px; font-weight: 900; color:#0b3; }
#wsai-root .wsai-cardstock{ margin-top: 2px; font-size: 12px; opacity:.7; }

#wsai-root .wsai-cardsizes{ margin-top: 4px; font-size: 12px; opacity:.85; }

#wsai-root .wsai-cardcontrols{
  display:grid;
  grid-template-columns: 1fr 68px;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
}
#wsai-root .wsai-var{
  grid-column: 1 / span 2;
  width: 100%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 10px;
  font-weight: 700;
  background:#fff;
}
#wsai-root .wsai-qty{
  width: 100%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 10px;
  font-weight: 800;
  text-align: center;
}

#wsai-root .wsai-add{
  border: 0;
  background: #0b3;
  color: #fff;
  font-weight: 900;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 12px;
}
#wsai-root .wsai-add:disabled{
  background: rgba(0,0,0,.18);
  cursor: not-allowed;
}

/* Cart block (inside assistant message) */
#wsai-root .wsai-cart{ max-width: 100%; }
#wsai-root .wsai-carttitle{ font-weight: 900; margin-bottom: 8px; }
#wsai-root .wsai-cartempty{ opacity:.75; }
#wsai-root .wsai-cartitems{ display:flex; flex-direction: column; gap: 8px; }
#wsai-root .wsai-cartitem{
  display:flex; gap: 10px;
  text-decoration:none;
  color: inherit;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow:hidden;
  background:#fff;
}
#wsai-root .wsai-cartitem img,
#wsai-root .wsai-cartitem .wsai-imgph{ width: 54px; height: 54px; object-fit: cover; }
#wsai-root .wsai-cartmeta{ padding: 6px 8px; }
#wsai-root .wsai-cartname{ font-weight: 800; font-size: 12px; }
#wsai-root .wsai-cartqty{ font-size: 12px; opacity:.75; margin-top: 2px; }
#wsai-root .wsai-cartactions{ display:flex; gap: 8px; margin-top: 10px; }
#wsai-root .wsai-cartbtn{
  flex:1;
  text-align:center;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 800;
  color: #111;
  background: #fff;
}
#wsai-root .wsai-cartbtn-primary{
  border: 0;
  background:#0b3;
  color:#fff;
}

/* Links inside assistant text */
#wsai-root .wsai-bubble a{ color: #0b3; font-weight: 700; text-decoration: underline; }

/* Avatar: realistic shiny green lipstick mouth */
#wsai-root .wsai-avatar{
  width: 46px; height: 46px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center;
}
#wsai-root .wsai-face{ width: 34px; height: 34px; position: relative; }
#wsai-root .wsai-mouth3d{
  position:absolute;
  left: 50%;
  top: 58%;
  width: 40px;
  height: 22px;
  transform: translate(-50%, -50%);
}
#wsai-root .wsai-mouthsvg{
  width: 100%;
  height: 100%;
  display:block;
}

/* Smooth opening animation driven by SVG element transforms */
#wsai-root .wsai-mouth-open{ transform-box: fill-box; transform-origin: 50% 50%; }
#wsai-root .wsai-inner{ transform-box: fill-box; transform-origin: 50% 40%; }
#wsai-root .wsai-tongue{ transform-box: fill-box; transform-origin: 50% 60%; opacity: .9; }

#wsai-root .wsai-upper,
#wsai-root .wsai-lower{ transform-box: fill-box; transform-origin: 50% 50%; }

/* Resting pose */
#wsai-root .wsai-mouth-open{ transform: scaleY(.18); }
#wsai-root .wsai-lower{ transform: translateY(-1px); }

/* Animate while listening/speaking */
#wsai-root .wsai-avatar.wsai-anim .wsai-mouth-open{ animation: wsaiMouthOpen .14s infinite alternate; }
#wsai-root .wsai-avatar.wsai-anim .wsai-lower{ animation: wsaiLowerLip .14s infinite alternate; }

@keyframes wsaiMouthOpen{
  from{ transform: scaleY(.18); }
  to{ transform: scaleY(1.05); }
}
@keyframes wsaiLowerLip{
  from{ transform: translateY(-1px); }
  to{ transform: translateY(2px); }
}

/* Subtle state glow */
#wsai-root.wsai-listening .wsai-avatar,
#wsai-root.wsai-speaking .wsai-avatar{
  box-shadow: 0 0 0 6px rgba(0,187,51,.14), 0 10px 22px rgba(0,0,0,.12);
}


/* Wider desktop mode toggle */
#wsai-root.wsai-wide .wsai-panel{
  width: 720px;
}

/* Header action buttons */
#wsai-root .wsai-actions{
  display:flex; gap:8px; align-items:center;
}
#wsai-root .wsai-actions button{
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor:pointer;
  font-size: 14px;
  line-height: 1;
  opacity: .9;
}
#wsai-root .wsai-actions button:hover{ opacity:1; }

/* Product list view mode */
#wsai-root .wsai-productsview{
  display:none;
  padding: 12px;
  overflow:auto;
  max-height: calc(70vh - 142px);
  background:#fff;
}
#wsai-root.wsai-view-products .wsai-productsview{ display:block; }
#wsai-root.wsai-view-products .wsai-messages{ display:none; }

#wsai-root .wsai-pv-title{
  font-weight: 900;
  margin-bottom: 10px;
}
#wsai-root .wsai-pv-empty{
  opacity:.7;
  font-size: 13px;
  padding: 10px 2px;
}

/* Improve link visibility in markdown */
#wsai-root .wsai-link{
  color:#0b3;
  text-decoration: underline;
  font-weight: 700;
}
#wsai-root .wsai-md-h1,#wsai-root .wsai-md-h2,#wsai-root .wsai-md-h3,#wsai-root .wsai-md-h4{
  font-weight: 900;
  margin: 6px 0 4px;
}
#wsai-root .wsai-md-h1{ font-size: 18px; }
#wsai-root .wsai-md-h2{ font-size: 16px; }
#wsai-root .wsai-md-h3{ font-size: 14px; }
#wsai-root .wsai-md-h4{ font-size: 13px; opacity:.9; }
#wsai-root .wsai-md-p{ margin: 4px 0; }
#wsai-root .wsai-md-ul{ margin: 6px 0 6px 18px; padding:0; }
#wsai-root .wsai-md-ul li{ margin: 3px 0; }
#wsai-root .wsai-md-sp{ height: 6px; }

/* Rainbow thinking outline */
#wsai-root.wsai-thinking .wsai-panel{
  position: relative;
}
#wsai-root.wsai-thinking .wsai-panel::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius: 20px;
  padding:3px;
  background: conic-gradient(from 0deg, #ff004c, #ffb300, #00e5ff, #7c4dff, #00ff85, #ff004c);
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: wsaiRainbow 1.1s linear infinite;
  pointer-events:none;
}
@keyframes wsaiRainbow{
  to { transform: rotate(360deg); }
}



/* --- Mobile portrait fix (v1.4.3.1) ---
   Prevent the assistant from overflowing the viewport when switching between Chat / Products.
   Keeps the panel within the screen and makes the content stack vertically on small screens.
*/
@media (max-width: 768px){
  #wsai-root, #wsai-root * { box-sizing: border-box; }
  #wsai-root .wsai-panel{
    width: min(96vw, 420px) !important;
    max-width: 96vw !important;
    left: auto !important;
    right: 12px !important;
    max-height: 78vh !important;
    overflow: hidden !important;
  }
  /* If a "wide" class exists, don't let it exceed the viewport on mobile */
  #wsai-root.wsai-wide .wsai-panel{
    width: min(96vw, 420px) !important;
    max-width: 96vw !important;
  }

  /* Force single column layout */
  #wsai-root .wsai-body,
  #wsai-root .wsai-main,
  #wsai-root .wsai-content,
  #wsai-root .wsai-split{
    display: block !important;
    grid-template-columns: none !important;
  }

  /* Ensure scroll happens inside the message/product area, not by stretching width */
  #wsai-root .wsai-messages,
  #wsai-root .wsai-productsview{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Keep input and send button visible */
  #wsai-root .wsai-inputbar{
    position: sticky !important;
    bottom: 0 !important;
    background: #fff !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  /* Avoid horizontal scroll on page caused by the widget */
  html, body { overflow-x: hidden; }
}

/* Pill toggle to switch Chat / Products (v1.4.3.2) */
#wsai-root .wsai-pilltoggle{
  position:absolute;
  right:-14px;
  top:50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin:center;
  border:0;
  background:#0b3;
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  z-index: 10;
}
#wsai-root.wsai-view-products .wsai-pilltoggle{ background:#111; }

/* View switching: show either chat column or products column full width */
#wsai-root.wsai-view-products .wsai-messages{ display:none !important; }
#wsai-root.wsai-view-products .wsai-productsview,
#wsai-root.wsai-view-products .wsai-products{ display:block !important; width:100% !important; }
#wsai-root.wsai-view-products .wsai-productsview{ max-width:100% !important; }

@media (max-width:768px){
  #wsai-root .wsai-pilltoggle{
    right: 12px;
    top: auto;
    bottom: 170px; /* above input area */
    transform: none;
    border-radius: 14px;
    padding: 10px 12px;
  }
}