/* ═══════════════════════════════════════
   WD AI Chat Widget — Frontend CSS v1.3
   #wdc-root scoped for theme compatibility
   ═══════════════════════════════════════ */

#wdc-root *,#wdc-root *::before,#wdc-root *::after{box-sizing:border-box;}

/* ── FAB ── */
#wdc-root .wdc-fab{
  position:fixed;z-index:99999;
  width:88px;height:88px;border-radius:50%;border:none;
  background:var(--wdc-color,#0073aa);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  transition:all .25s ease;
  margin:0;padding:0;overflow:hidden;
  left:24px;top:50%;transform:translateY(-50%);
}
#wdc-root .wdc-fab video.wdc-ic-chat{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
#wdc-root .wdc-fab .wdc-ic-close{position:relative;z-index:2;fill:#fff;}
#wdc-root .wdc-fab.pos-bottom-right{left:auto;right:24px;top:auto;bottom:24px;transform:none;}
#wdc-root .wdc-fab.pos-bottom-left{left:24px;top:auto;bottom:24px;transform:none;}
#wdc-root .wdc-fab.pos-top-left{left:24px;top:120px;transform:none;}
#wdc-root .wdc-fab.pos-top-right{left:auto;right:24px;top:120px;transform:none;}
#wdc-root .wdc-fab.pos-middle-left{left:24px;top:50%;transform:translateY(-50%);}
#wdc-root .wdc-fab.pos-middle-right{left:auto;right:24px;top:50%;transform:translateY(-50%);}
#wdc-root .wdc-fab:hover{box-shadow:0 6px 24px rgba(0,0,0,0.25);filter:brightness(1.08);}
#wdc-root .wdc-fab svg{width:26px;height:26px;fill:#fff;transition:transform .25s;margin:0;padding:0;}
#wdc-root .wdc-fab.open .wdc-ic-chat{display:none;}
#wdc-root .wdc-fab.open .wdc-ic-close{display:block;}
#wdc-root .wdc-fab:not(.open) .wdc-ic-close{display:none;}

/* ── FAB label (sits next to the avatar, hides when chat opens) ── */
#wdc-root .wdc-fab-label{
  position:fixed;z-index:99998;
  background:#fff;color:#222;
  padding:10px 16px;border-radius:24px;
  font:500 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,0.18);
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
#wdc-root .wdc-fab-label.pos-top-right{right:122px;top:164px;transform:translateY(-50%);}
#wdc-root .wdc-fab-label.pos-top-left{left:122px;top:164px;transform:translateY(-50%);}
#wdc-root .wdc-fab-label.pos-middle-right{right:122px;top:50%;transform:translateY(-50%);}
#wdc-root .wdc-fab-label.pos-middle-left{left:122px;top:50%;transform:translateY(-50%);}
#wdc-root .wdc-fab-label.pos-bottom-right{right:122px;bottom:68px;transform:translateY(50%);}
#wdc-root .wdc-fab-label.pos-bottom-left{left:122px;bottom:68px;transform:translateY(50%);}
#wdc-root .wdc-fab-label-hidden{opacity:0;pointer-events:none;}
@media (max-width:767px){#wdc-root .wdc-fab-label{display:none;}}

/* ── Window ── */
#wdc-root .wdc-win{
  position:fixed;z-index:99998;
  width:400px;max-width:calc(100vw - 32px);
  height:580px;max-height:calc(100vh - 130px);
  background:#fff;border-radius:12px;
  box-shadow:0 8px 40px rgba(0,0,0,0.15),0 2px 8px rgba(0,0,0,0.08);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
  font-family:'Jost',-apple-system,BlinkMacSystemFont,sans-serif;
  margin:0;padding:0;
  left:24px;top:50%;margin-top:-290px;
}
#wdc-root .wdc-win.pos-bottom-right{left:auto;right:24px;top:auto;bottom:96px;margin-top:0;}
#wdc-root .wdc-win.pos-bottom-left{left:24px;top:auto;bottom:96px;margin-top:0;}
#wdc-root .wdc-win.pos-top-left{left:24px;top:180px;margin-top:0;}
#wdc-root .wdc-win.pos-top-right{left:auto;right:24px;top:180px;margin-top:0;}
#wdc-root .wdc-win.pos-middle-left{left:90px;top:50%;margin-top:-290px;}
#wdc-root .wdc-win.pos-middle-right{left:auto;right:90px;top:50%;margin-top:-290px;}
#wdc-root .wdc-win.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:all;}

/* ── Header ── */
#wdc-root .wdc-hdr{
  background:#fff;border-bottom:1px solid #eee;
  padding:16px 18px;display:flex;align-items:center;gap:12px;flex-shrink:0;
  margin:0;
}
#wdc-root .wdc-hdr-avatar{
  width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:var(--wdc-color,#0073aa);display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;color:#fff;letter-spacing:.5px;
  margin:0;padding:0;
}
#wdc-root .wdc-hdr-text{margin:0;padding:0;}
#wdc-root .wdc-hdr-text h3{font-size:15px;font-weight:600;color:#333;letter-spacing:.2px;font-family:'Jost',sans-serif;margin:0;padding:0;}
#wdc-root .wdc-hdr-text span{font-size:11.5px;color:#999;font-weight:400;margin:0;padding:0;}
#wdc-root .wdc-hdr-dot{display:inline-block;width:7px;height:7px;background:#4a9;border-radius:50%;margin:0 4px 0 0;padding:0;vertical-align:middle;}

/* ── Messages ── */
#wdc-root .wdc-msgs{
  flex:1;overflow-y:auto;padding:20px 18px;
  display:flex;flex-direction:column;gap:14px;background:#fafafa;
  margin:0;
}
#wdc-root .wdc-msgs::-webkit-scrollbar{width:4px;}
#wdc-root .wdc-msgs::-webkit-scrollbar-thumb{background:#ddd;border-radius:4px;}

#wdc-root .wdc-m{max-width:88%;line-height:1.6;font-size:13.5px;color:#333;animation:wdc-fi .25s ease;margin:0;padding:0;}
@keyframes wdc-fi{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
#wdc-root .wdc-m.bot{align-self:flex-start;}
#wdc-root .wdc-m.usr{align-self:flex-end;}

#wdc-root .wdc-m .bbl{padding:12px 16px;border-radius:12px;word-wrap:break-word;margin:0;}
#wdc-root .wdc-m.bot .bbl{background:#fff;border:1px solid #eee;border-radius:4px 12px 12px 12px;}
#wdc-root .wdc-m.usr .bbl{background:var(--wdc-color,#0073aa);color:#fff;border-radius:12px 12px 4px 12px;}
#wdc-root .wdc-m .bbl a{color:var(--wdc-color,#0073aa);text-decoration:none;font-weight:500;}
#wdc-root .wdc-m .bbl a:hover{text-decoration:underline;}
#wdc-root .wdc-m.usr .bbl a{color:#fcc;}
#wdc-root .wdc-m .ts{font-size:10px;color:#bbb;margin:3px 0 0;padding:0 4px;}
#wdc-root .wdc-m.usr .ts{text-align:right;}

/* ── Typing ── */
#wdc-root .wdc-typ{
  display:flex;gap:4px;align-items:center;padding:12px 16px;margin:0;
  background:#fff;border:1px solid #eee;border-radius:4px 12px 12px 12px;
  width:fit-content;animation:wdc-fi .2s ease;
}
#wdc-root .wdc-typ span{width:6px;height:6px;background:#ccc;border-radius:50%;animation:wdc-bnc 1.2s infinite;margin:0;padding:0;}
#wdc-root .wdc-typ span:nth-child(2){animation-delay:.15s;}
#wdc-root .wdc-typ span:nth-child(3){animation-delay:.3s;}
@keyframes wdc-bnc{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-5px);background:var(--wdc-color,#0073aa);}}

/* ── Product Cards ── */
#wdc-root .wdc-prod{
  display:flex;gap:12px;padding:10px;background:#fff;
  border:1px solid #eee;border-radius:8px;margin:6px 0 0;
  transition:border-color .2s;text-decoration:none;color:inherit;
}
#wdc-root .wdc-prod:hover{border-color:var(--wdc-color,#0073aa);}
#wdc-root .wdc-prod img{width:60px;height:60px;object-fit:cover;border-radius:6px;background:#f5f5f5;flex-shrink:0;margin:0;padding:0;}
#wdc-root .wdc-pinfo{flex:1;min-width:0;margin:0;padding:0;}
#wdc-root .wdc-pinfo h4{font-size:12px;font-weight:500;color:#333;line-height:1.3;margin:0 0 3px;padding:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#wdc-root .wdc-pinfo .pr{font-size:13px;font-weight:600;color:var(--wdc-color,#0073aa);margin:0;padding:0;}
#wdc-root .wdc-pinfo .pr-old{font-size:10.5px;color:#aaa;text-decoration:line-through;margin:0 0 0 5px;padding:0;font-weight:400;}
#wdc-root .wdc-pinfo .ct{font-size:10px;color:#999;margin:1px 0 0;padding:0;}
#wdc-root .wdc-pinfo .sk{font-size:10px;font-weight:500;margin:0;padding:0;}
#wdc-root .wdc-pinfo .sk.in{color:#4a9;}
#wdc-root .wdc-pinfo .sk.out{color:#c44;}

/* ── Chips ── */
#wdc-root .wdc-chips{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0;padding:0;}
#wdc-root .wdc-chip{
  font-family:'Jost',sans-serif;font-size:11.5px;padding:5px 11px;margin:0;
  border-radius:18px;border:1px solid #ddd;background:#fff;color:#555;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
#wdc-root .wdc-chip:hover{border-color:var(--wdc-color,#0073aa);color:var(--wdc-color,#0073aa);background:#fef5f5;}

/* ── Email collection form ── */
#wdc-root .wdc-email-form{padding:16px;text-align:center;margin:0;}
#wdc-root .wdc-email-form p{font-size:13px;color:#666;margin:0 0 12px;padding:0;line-height:1.4;}
#wdc-root .wdc-email-form input{
  width:100%;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;
  font-family:'Jost',sans-serif;font-size:13px;margin:0 0 8px;outline:none;
}
#wdc-root .wdc-email-form input:focus{border-color:var(--wdc-color,#0073aa);}
#wdc-root .wdc-email-form button{
  width:100%;padding:10px;border:none;border-radius:6px;margin:0;
  background:var(--wdc-color,#0073aa);color:#fff;font-family:'Jost',sans-serif;
  font-size:14px;font-weight:500;cursor:pointer;transition:background .2s;
}
#wdc-root .wdc-email-form button:hover{filter:brightness(0.9);}
#wdc-root .wdc-email-skip{font-size:12px;color:#999;cursor:pointer;margin:8px 0 0;padding:0;display:inline-block;}
#wdc-root .wdc-email-skip:hover{color:#666;}

/* ── Input ── */
#wdc-root .wdc-inp{
  border-top:1px solid #eee;padding:12px 16px;margin:0;
  display:flex;gap:10px;align-items:flex-end;background:#fff;flex-shrink:0;
}
#wdc-root .wdc-inp textarea{
  flex:1;border:1px solid #e0e0e0;border-radius:8px;padding:10px 14px;margin:0;
  font-family:'Jost',sans-serif;font-size:13.5px;color:#333;background:#fafafa;
  resize:none;outline:none;min-height:40px;max-height:100px;line-height:1.4;
  transition:border-color .2s;
}
#wdc-root .wdc-inp textarea::placeholder{color:#bbb;}
#wdc-root .wdc-inp textarea:focus{border-color:var(--wdc-color,#0073aa);background:#fff;}
#wdc-root .wdc-send{
  width:36px;height:36px;border-radius:8px;border:none;margin:0;padding:0;
  background:var(--wdc-color,#0073aa);
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .2s,transform .15s;
}
#wdc-root .wdc-send:hover{filter:brightness(0.9);}
#wdc-root .wdc-send:active{transform:scale(.93);}
#wdc-root .wdc-send:disabled{background:#e0e0e0;cursor:default;filter:none;}
#wdc-root .wdc-send svg{width:17px;height:17px;fill:#fff;margin:0;padding:0;}

#wdc-root .wdc-ft{text-align:center;padding:5px;margin:0;font-size:9.5px;color:#ccc;background:#fff;border-top:1px solid #f0f0f0;}

/* ── Mobile ── */
@media(max-width:480px){
  #wdc-root .wdc-win,#wdc-root .wdc-win[class*="pos-"]{left:0;right:0;top:auto;bottom:0;width:100vw;max-width:100vw;height:calc(100vh - 60px);max-height:calc(100vh - 60px);border-radius:16px 16px 0 0;margin-top:0;}
  #wdc-root .wdc-fab,#wdc-root .wdc-fab[class*="pos-"]{left:16px;top:auto;bottom:16px;right:auto;width:52px;height:52px;transform:none;}
}
