/**
 * AI Fashion Stylist — Chat Widget
 *
 * ALL rules scoped under #afs-widget to prevent ANY conflict with other plugins.
 * No :root variables — all CSS vars scoped to #afs-widget itself.
 * Tone themes, layout variants, and position variants all handled here.
 *
 * @package AiFashionStylist
 */

/* ═══════════════════════════════════════════════════════
   1. WIDGET CONTAINER — position variants
═══════════════════════════════════════════════════════ */
#afs-widget {
  --afs-primary:       #c9a0dc;
  --afs-primary-dk:    #a97cbf;
  --afs-primary-lt:    #f3e8ff;
  --afs-accent:        #c9a0dc;
  --afs-surface:       #ffffff;
  --afs-text:          #2d2d2d;
  --afs-text-muted:    #6b7280;
  --afs-border:        rgba(201,160,220,0.28);
  --afs-shadow:        0 8px 32px rgba(150,80,190,0.18);
  --afs-radius:        18px;
  --afs-radius-sm:     10px;
  --afs-font:          -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --afs-panel-w:       370px;
  --afs-panel-h:       560px;
  --afs-z:             999999;
  --afs-ease:          0.22s cubic-bezier(.4,0,.2,1);
  /* trigger sizing */
  --afs-trigger-size:  56px;

  position:   fixed !important;
  z-index:    var(--afs-z) !important;
  display:    flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap:        12px !important;
  font-family: var(--afs-font) !important;
  /* default: bottom-right */
  bottom:     24px !important;
  right:      24px !important;
  left:       auto !important;
  top:        auto !important;
}

/* ── Position variants ──────────────────────────────── */
#afs-widget.afs-pos-bottom-left {
  right: auto !important;
  left:  24px !important;
  align-items: flex-start !important;
}
#afs-widget.afs-pos-bottom-center {
  right:     50% !important;
  left:      auto !important;
  transform: translateX(50%) !important;
  align-items: center !important;
}
#afs-widget.afs-pos-right-tab {
  right:      0 !important;
  bottom:     40% !important;
  align-items: flex-end !important;
}
#afs-widget.afs-pos-left-tab {
  left:       0 !important;
  right:      auto !important;
  bottom:     40% !important;
  align-items: flex-start !important;
}

/* ── All child resets (CSS isolation) ──────────────── */
#afs-widget *,
#afs-widget *::before,
#afs-widget *::after {
  box-sizing:  border-box !important;
  font-family: var(--afs-font) !important;
  -webkit-font-smoothing: antialiased !important;
  line-height: normal !important;
}

/* ── Utility ────────────────────────────────────────── */
#afs-widget .afs-hidden,
#afs-widget .afs-hidden.afs-hidden { display: none !important; }
#afs-widget .afs-sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}

/* ═══════════════════════════════════════════════════════
   2. TRIGGER BUTTON — layout variants
═══════════════════════════════════════════════════════ */
#afs-widget .afs-trigger {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             8px !important;
  background:      linear-gradient(135deg, var(--afs-primary) 0%, var(--afs-primary-dk) 100%) !important;
  color:           #fff !important;
  border:          none !important;
  cursor:          pointer !important;
  font-weight:     600 !important;
  font-size:       0.88rem !important;
  letter-spacing:  0.01em !important;
  box-shadow:      var(--afs-shadow) !important;
  transition:      transform var(--afs-ease), box-shadow var(--afs-ease) !important;
  outline-offset:  3px !important;
  text-decoration: none !important;
  /* default: pill */
  border-radius:   50px !important;
  padding:         14px 22px 14px 16px !important;
  min-height:      52px !important;
}
#afs-widget .afs-trigger:hover {
  transform:  translateY(-2px) !important;
  box-shadow: 0 14px 44px rgba(150,80,190,0.32) !important;
}
#afs-widget .afs-trigger:focus-visible {
  outline: 3px solid var(--afs-primary) !important;
}
#afs-widget .afs-trigger-icon { display: flex !important; align-items: center !important; }
#afs-widget .afs-trigger-label { white-space: nowrap !important; }
#afs-widget .afs-trigger-close { display: flex !important; align-items: center !important; }

/* Layout: bubble (circle) */
#afs-widget.afs-layout-bubble .afs-trigger {
  width:         var(--afs-trigger-size) !important;
  height:        var(--afs-trigger-size) !important;
  border-radius: 50% !important;
  padding:       0 !important;
  min-height:    unset !important;
}
#afs-widget.afs-layout-bubble .afs-trigger-label { display: none !important; }

/* Layout: minimal (icon only, square-ish) */
#afs-widget.afs-layout-minimal .afs-trigger {
  width:         48px !important;
  height:        48px !important;
  border-radius: 14px !important;
  padding:       0 !important;
  min-height:    unset !important;
  box-shadow:    0 4px 20px rgba(150,80,190,0.22) !important;
}
#afs-widget.afs-layout-minimal .afs-trigger-label { display: none !important; }

/* Layout: side-tab (rotated pill attached to edge) */
#afs-widget.afs-layout-side-tab .afs-trigger {
  border-radius:             12px 0 0 12px !important;
  padding:                   12px 14px !important;
  writing-mode:              vertical-lr !important;
  text-orientation:          mixed !important;
  transform:                 rotate(180deg) !important;
  min-height:                unset !important;
  min-width:                 unset !important;
  gap:                       6px !important;
}
#afs-widget.afs-pos-left-tab.afs-layout-side-tab .afs-trigger {
  border-radius:             0 12px 12px 0 !important;
  transform:                 none !important;
}
#afs-widget.afs-layout-side-tab .afs-trigger:hover {
  transform: rotate(180deg) translateX(-2px) !important;
}
#afs-widget.afs-pos-left-tab.afs-layout-side-tab .afs-trigger:hover {
  transform: translateX(2px) !important;
}

/* ═══════════════════════════════════════════════════════
   3. CHAT PANEL
═══════════════════════════════════════════════════════ */
#afs-widget .afs-panel {
  width:          var(--afs-panel-w) !important;
  max-height:     var(--afs-panel-h) !important;
  background:     var(--afs-surface) !important;
  border-radius:  var(--afs-radius) !important;
  box-shadow:     var(--afs-shadow) !important;
  display:        flex !important;
  flex-direction: column !important;
  overflow:       hidden !important;
  border:         1px solid var(--afs-border) !important;
  animation:      afs-slide-up 0.25s ease both !important;
}
@keyframes afs-slide-up {
  from { opacity:0; transform:translateY(14px) scale(0.97); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}

/* Panel position: left side — panel opens to the right of trigger */
#afs-widget.afs-pos-bottom-left .afs-panel,
#afs-widget.afs-pos-left-tab   .afs-panel {
  align-self: flex-start !important;
}

/* Wide layout variant */
#afs-widget.afs-layout-wide .afs-panel {
  width: 420px !important;
}

/* ═══════════════════════════════════════════════════════
   4. HEADER
═══════════════════════════════════════════════════════ */
#afs-widget .afs-header {
  display:      flex !important;
  align-items:  center !important;
  gap:          10px !important;
  padding:      13px 15px !important;
  background:   linear-gradient(135deg, var(--afs-primary) 0%, var(--afs-primary-dk) 100%) !important;
  color:        #fff !important;
  flex-shrink:  0 !important;
}
#afs-widget .afs-header-avatar {
  width:           38px !important;
  height:          38px !important;
  background:      rgba(255,255,255,0.2) !important;
  border-radius:   50% !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-shrink:     0 !important;
  font-size:       1.2rem !important;
  line-height:     1 !important;
}
#afs-widget .afs-header-info {
  flex:    1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap:     2px !important;
  min-width: 0 !important;
}
#afs-widget .afs-header-name {
  font-weight: 700 !important;
  font-size:   0.92rem !important;
  line-height: 1.1 !important;
  color:       #fff !important;
  white-space: nowrap !important;
  overflow:    hidden !important;
  text-overflow: ellipsis !important;
}
#afs-widget .afs-header-status {
  font-size:   0.72rem !important;
  display:     flex !important;
  align-items: center !important;
  gap:         4px !important;
  opacity:     0.88 !important;
  color:       #fff !important;
}
#afs-widget .afs-status-dot {
  width:         6px !important;
  height:        6px !important;
  background:    #6ee7b7 !important;
  border-radius: 50% !important;
  flex-shrink:   0 !important;
  animation:     afs-pulse 2s ease-in-out infinite !important;
}
@keyframes afs-pulse { 0%,100%{opacity:1} 50%{opacity:0.45} }

/* Header action buttons */
#afs-widget .afs-header-actions {
  display:  flex !important;
  gap:      4px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
#afs-widget .afs-header-btn {
  background:    transparent !important;
  border:        none !important;
  color:         rgba(255,255,255,0.82) !important;
  cursor:        pointer !important;
  padding:       5px !important;
  border-radius: 7px !important;
  display:       flex !important;
  align-items:   center !important;
  justify-content: center !important;
  transition:    background var(--afs-ease) !important;
  line-height:   1 !important;
}
#afs-widget .afs-header-btn:hover {
  background: rgba(255,255,255,0.18) !important;
  color:      #fff !important;
}
#afs-widget .afs-close-btn {
  background:    transparent !important;
  border:        none !important;
  color:         rgba(255,255,255,0.82) !important;
  cursor:        pointer !important;
  padding:       5px !important;
  border-radius: 7px !important;
  display:       flex !important;
  align-items:   center !important;
  transition:    background var(--afs-ease) !important;
}
#afs-widget .afs-close-btn:hover { background: rgba(255,255,255,0.2) !important; color:#fff !important; }

/* ── Layout switcher bar (inside header, shown after open) ── */
#afs-widget .afs-layout-switcher {
  display:    flex !important;
  gap:        4px !important;
  padding:    6px 14px 6px !important;
  background: rgba(255,255,255,0.12) !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  flex-shrink: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
#afs-widget .afs-layout-switcher::-webkit-scrollbar { display: none !important; }
#afs-widget .afs-ls-btn {
  background:    rgba(255,255,255,0.15) !important;
  border:        1px solid rgba(255,255,255,0.2) !important;
  border-radius: 8px !important;
  color:         rgba(255,255,255,0.85) !important;
  cursor:        pointer !important;
  padding:       4px 10px !important;
  font-size:     0.72rem !important;
  font-weight:   500 !important;
  white-space:   nowrap !important;
  display:       flex !important;
  align-items:   center !important;
  gap:           4px !important;
  transition:    all var(--afs-ease) !important;
  flex-shrink:   0 !important;
}
#afs-widget .afs-ls-btn:hover,
#afs-widget .afs-ls-btn.afs-ls-active {
  background: rgba(255,255,255,0.32) !important;
  color:      #fff !important;
  border-color: rgba(255,255,255,0.45) !important;
}

/* ═══════════════════════════════════════════════════════
   5. MESSAGES
═══════════════════════════════════════════════════════ */
#afs-widget .afs-messages {
  flex:            1 !important;
  overflow-y:      auto !important;
  padding:         15px 13px !important;
  display:         flex !important;
  flex-direction:  column !important;
  gap:             10px !important;
  scroll-behavior: smooth !important;
  background:      var(--afs-surface) !important;
}
#afs-widget .afs-messages::-webkit-scrollbar { width: 3px !important; }
#afs-widget .afs-messages::-webkit-scrollbar-thumb { background: var(--afs-primary-lt) !important; border-radius: 3px !important; }

#afs-widget .afs-msg {
  max-width:   82% !important;
  padding:     9px 13px !important;
  border-radius: 17px !important;
  font-size:   0.86rem !important;
  line-height: 1.55 !important;
  word-break:  break-word !important;
  margin:      0 !important;
  border:      none !important;
  box-shadow:  none !important;
}
#afs-widget .afs-msg--assistant {
  align-self:  flex-start !important;
  background:  var(--afs-primary-lt) !important;
  color:       var(--afs-text) !important;
  border-bottom-left-radius: 4px !important;
}
#afs-widget .afs-msg--user {
  align-self:  flex-end !important;
  background:  linear-gradient(135deg, var(--afs-primary) 0%, var(--afs-primary-dk) 100%) !important;
  color:       #fff !important;
  border-bottom-right-radius: 4px !important;
}
#afs-widget .afs-msg--error {
  align-self:  flex-start !important;
  background:  #fef2f2 !important;
  color:       #b91c1c !important;
  border:      1px solid #fecaca !important;
  font-size:   0.8rem !important;
}

/* ── Typing dots ────────────────────────────────────── */
#afs-widget .afs-typing {
  align-self:    flex-start !important;
  display:       flex !important;
  align-items:   center !important;
  gap:           5px !important;
  padding:       10px 13px !important;
  background:    var(--afs-primary-lt) !important;
  border-radius: 17px 17px 17px 4px !important;
  margin:        0 !important;
}
#afs-widget .afs-typing span {
  width:         7px !important; height: 7px !important;
  background:    var(--afs-primary) !important;
  border-radius: 50% !important;
  display:       block !important;
  animation:     afs-bounce 1.2s ease-in-out infinite !important;
}
#afs-widget .afs-typing span:nth-child(2) { animation-delay: 0.15s !important; }
#afs-widget .afs-typing span:nth-child(3) { animation-delay: 0.30s !important; }
@keyframes afs-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }

/* ═══════════════════════════════════════════════════════
   6. QUICK REPLIES
═══════════════════════════════════════════════════════ */
#afs-widget .afs-quick-replies {
  display:    flex !important;
  flex-wrap:  wrap !important;
  gap:        5px !important;
  padding:    8px 13px !important;
  border-top: 1px solid var(--afs-primary-lt) !important;
  background: var(--afs-surface) !important;
  flex-shrink: 0 !important;
}
#afs-widget .afs-quick-btn {
  background:    var(--afs-primary-lt) !important;
  color:         #5b21b6 !important;
  border:        1px solid var(--afs-border) !important;
  border-radius: 20px !important;
  padding:       5px 11px !important;
  font-size:     0.77rem !important;
  font-weight:   500 !important;
  cursor:        pointer !important;
  transition:    background var(--afs-ease), transform var(--afs-ease) !important;
  white-space:   nowrap !important;
  line-height:   1.4 !important;
}
#afs-widget .afs-quick-btn:hover {
  background: var(--afs-primary) !important;
  color:      #fff !important;
  transform:  translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════
   7. INPUT AREA
═══════════════════════════════════════════════════════ */
#afs-widget .afs-input-area {
  display:     flex !important;
  align-items: flex-end !important;
  gap:         7px !important;
  padding:     9px 11px !important;
  border-top:  1px solid var(--afs-primary-lt) !important;
  background:  var(--afs-surface) !important;
  flex-shrink: 0 !important;
}
#afs-widget .afs-input {
  flex:          1 !important;
  border:        1.5px solid #e9d5ff !important;
  border-radius: 12px !important;
  padding:       8px 12px !important;
  font-size:     0.86rem !important;
  line-height:   1.5 !important;
  resize:        none !important;
  min-height:    38px !important;
  max-height:    110px !important;
  overflow-y:    auto !important;
  transition:    border-color var(--afs-ease) !important;
  color:         var(--afs-text) !important;
  background:    #fdf8ff !important;
  outline:       none !important;
  box-shadow:    none !important;
  width:         100% !important;
}
#afs-widget .afs-input:focus {
  border-color: var(--afs-primary) !important;
  background:   #fff !important;
}
#afs-widget .afs-input::placeholder { color: #b9a0cc !important; }
#afs-widget .afs-send-btn {
  width:           38px !important; height: 38px !important;
  min-width:       38px !important; min-height: 38px !important;
  background:      linear-gradient(135deg, var(--afs-primary) 0%, var(--afs-primary-dk) 100%) !important;
  color:           #fff !important;
  border:          none !important;
  border-radius:   50% !important;
  cursor:          pointer !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-shrink:     0 !important;
  transition:      transform var(--afs-ease), box-shadow var(--afs-ease) !important;
  box-shadow:      0 3px 10px rgba(150,80,190,0.28) !important;
  padding:         0 !important;
}
#afs-widget .afs-send-btn:hover   { transform: scale(1.08) !important; box-shadow: 0 5px 16px rgba(150,80,190,0.38) !important; }
#afs-widget .afs-send-btn:active  { transform: scale(0.94) !important; }
#afs-widget .afs-send-btn:disabled { opacity: 0.45 !important; cursor: not-allowed !important; transform: none !important; }

/* ── Footer ─────────────────────────────────────────── */
#afs-widget .afs-footer-note {
  text-align:  center !important;
  font-size:   0.7rem !important;
  color:       var(--afs-text-muted) !important;
  padding:     5px 14px 9px !important;
  border-top:  1px solid var(--afs-primary-lt) !important;
  flex-shrink: 0 !important;
  background:  var(--afs-surface) !important;
  margin:      0 !important;
}

/* ═══════════════════════════════════════════════════════
   8. TONE THEMES
═══════════════════════════════════════════════════════ */

/* ── ELEGANT (default, refined lavender-rose) ─────── */
#afs-widget.afs-tone-elegant {
  --afs-primary:    #c9a0dc;
  --afs-primary-dk: #a97cbf;
  --afs-primary-lt: #f3e8ff;
  --afs-border:     rgba(201,160,220,0.28);
  --afs-shadow:     0 8px 32px rgba(150,80,190,0.16);
}
#afs-widget.afs-tone-elegant .afs-msg--assistant {
  background: #faf0ff !important;
  border-left: 2px solid #e9d5ff !important;
  border-radius: 0 14px 14px 14px !important;
}
#afs-widget.afs-tone-elegant .afs-input {
  background: #fefaff !important;
}

/* ── PLAYFUL & WARM (bright pink, bouncy) ─────────── */
#afs-widget.afs-tone-playful {
  --afs-primary:    #f472b6;
  --afs-primary-dk: #db2777;
  --afs-primary-lt: #fdf2f8;
  --afs-border:     rgba(244,114,182,0.28);
  --afs-shadow:     0 8px 32px rgba(219,39,119,0.18);
}
#afs-widget.afs-tone-playful .afs-trigger {
  border-radius: 28px !important;
}
#afs-widget.afs-tone-playful .afs-panel {
  border-radius: 22px !important;
  border: 2px solid rgba(244,114,182,0.3) !important;
}
#afs-widget.afs-tone-playful .afs-msg--assistant {
  background: #fdf2f8 !important;
  border-radius: 18px 18px 18px 4px !important;
}
#afs-widget.afs-tone-playful .afs-quick-btn {
  color: #be185d !important;
  border-color: rgba(244,114,182,0.35) !important;
}
#afs-widget.afs-tone-playful .afs-quick-btn:hover {
  background: var(--afs-primary) !important;
}
#afs-widget.afs-tone-playful .afs-typing span {
  background: #f472b6 !important;
  animation: afs-bounce-playful 0.9s ease-in-out infinite !important;
}
#afs-widget.afs-tone-playful .afs-typing span:nth-child(2){ animation-delay:0.12s !important }
#afs-widget.afs-tone-playful .afs-typing span:nth-child(3){ animation-delay:0.24s !important }
@keyframes afs-bounce-playful { 0%,100%{transform:translateY(0) scale(1)} 40%{transform:translateY(-7px) scale(1.1)} }
#afs-widget.afs-tone-playful .afs-input { border-color: rgba(244,114,182,0.4) !important; background: #fff8fc !important; }
#afs-widget.afs-tone-playful .afs-input:focus { border-color: #f472b6 !important; }

/* ── LUXURY (dark gold + charcoal) ───────────────── */
#afs-widget.afs-tone-luxury {
  --afs-primary:    #c8a96e;
  --afs-primary-dk: #a88040;
  --afs-primary-lt: #fdf8ee;
  --afs-surface:    #1a1614;
  --afs-text:       #f5f0e8;
  --afs-text-muted: #a89880;
  --afs-border:     rgba(200,169,110,0.22);
  --afs-shadow:     0 10px 40px rgba(0,0,0,0.4);
}
#afs-widget.afs-tone-luxury .afs-panel {
  background: #1a1614 !important;
  border: 1px solid rgba(200,169,110,0.3) !important;
}
#afs-widget.afs-tone-luxury .afs-messages {
  background: #1a1614 !important;
}
#afs-widget.afs-tone-luxury .afs-msg--assistant {
  background: #261f18 !important;
  color:      #f5f0e8 !important;
  border:     1px solid rgba(200,169,110,0.2) !important;
}
#afs-widget.afs-tone-luxury .afs-msg--user {
  background: linear-gradient(135deg, #c8a96e, #a88040) !important;
  color: #1a1614 !important;
}
#afs-widget.afs-tone-luxury .afs-quick-replies {
  background: #1a1614 !important;
  border-top: 1px solid rgba(200,169,110,0.2) !important;
}
#afs-widget.afs-tone-luxury .afs-quick-btn {
  background:   #261f18 !important;
  color:        #c8a96e !important;
  border-color: rgba(200,169,110,0.3) !important;
}
#afs-widget.afs-tone-luxury .afs-quick-btn:hover {
  background: #c8a96e !important;
  color:      #1a1614 !important;
}
#afs-widget.afs-tone-luxury .afs-input-area {
  background: #1a1614 !important;
  border-top: 1px solid rgba(200,169,110,0.2) !important;
}
#afs-widget.afs-tone-luxury .afs-input {
  background: #261f18 !important;
  border-color: rgba(200,169,110,0.3) !important;
  color: #f5f0e8 !important;
}
#afs-widget.afs-tone-luxury .afs-input::placeholder { color: #6b5840 !important; }
#afs-widget.afs-tone-luxury .afs-input:focus { border-color: #c8a96e !important; }
#afs-widget.afs-tone-luxury .afs-footer-note {
  background: #1a1614 !important;
  color: #6b5840 !important;
  border-top: 1px solid rgba(200,169,110,0.15) !important;
}
#afs-widget.afs-tone-luxury .afs-typing {
  background: #261f18 !important;
}
#afs-widget.afs-tone-luxury .afs-typing span { background: #c8a96e !important; }
#afs-widget.afs-tone-luxury .afs-layout-switcher {
  background: rgba(200,169,110,0.08) !important;
  border-bottom: 1px solid rgba(200,169,110,0.15) !important;
}
#afs-widget.afs-tone-luxury .afs-messages::-webkit-scrollbar-thumb { background: rgba(200,169,110,0.3) !important; }

/* ═══════════════════════════════════════════════════════
   9. MOBILE
═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #afs-widget {
    bottom: 0 !important;
    right:  0 !important;
    left:   0 !important;
    top:    auto !important;
    transform: none !important;
    align-items: center !important;
  }
  #afs-widget .afs-trigger {
    margin-bottom: 12px !important;
    margin-right:  16px !important;
    align-self:    flex-end !important;
  }
  #afs-widget .afs-panel {
    width:         100% !important;
    max-width:     100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height:    82dvh !important;
    position:      fixed !important;
    bottom:        0 !important;
    left:          0 !important;
    right:         0 !important;
  }
}

/* ═══════════════════════════════════════════════════════
   10. REDUCED MOTION
═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #afs-widget .afs-panel,
  #afs-widget .afs-trigger,
  #afs-widget .afs-send-btn    { animation: none !important; transition: none !important; }
  #afs-widget .afs-status-dot,
  #afs-widget .afs-typing span { animation: none !important; }
}