/* ═══════════════════════════════════════════════════════════════════
   STAS Chat Addon PRO — 5 PREMIUM CHAT THEMES
   Mỗi theme dùng class trên #stas-chat-wrap: .stas-skin-{name}
   Chỉ thay giao diện, KHÔNG ảnh hưởng chức năng.
═══════════════════════════════════════════════════════════════════ */

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  THEME 1: GLASSMORPHISM — Kính mờ, trong suốt, hiện đại     ║
   ╚═══════════════════════════════════════════════════════════════╝ */
.stas-skin-glass #stas-window {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.25) !important;
}
.stas-skin-glass #stas-header {
  background: linear-gradient(135deg, rgba(99,102,241,.85), rgba(139,92,246,.85)) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.stas-skin-glass #stas-messages { background: transparent !important; }
.stas-skin-glass .stas-msg.bot .stas-bubble-text {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.4) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
  color: #1e1b4b !important;
}
.stas-skin-glass .stas-msg.user .stas-bubble-text {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(99,102,241,.3) !important;
}
.stas-skin-glass #stas-input-row { background: rgba(255,255,255,.55) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.3) !important; }
.stas-skin-glass #stas-input { background: rgba(255,255,255,.6) !important; border-color: rgba(99,102,241,.2) !important; }
.stas-skin-glass #stas-input:focus { border-color: rgba(99,102,241,.5) !important; box-shadow: 0 0 0 3px rgba(99,102,241,.1) !important; }
.stas-skin-glass #stas-send { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; box-shadow: 0 3px 10px rgba(99,102,241,.3) !important; }
.stas-skin-glass #stas-bubble { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; box-shadow: 0 4px 20px rgba(99,102,241,.4) !important; }
.stas-skin-glass #stas-shortcuts { background: rgba(245,243,255,.6) !important; border-bottom: 1px solid rgba(99,102,241,.1) !important; }
.stas-skin-glass .stas-shortcut { border-color: rgba(99,102,241,.35) !important; color: #6366f1 !important; background: rgba(255,255,255,.5) !important; }
.stas-skin-glass .stas-shortcut:hover { background: #6366f1 !important; color: #fff !important; }
.stas-skin-glass .stas-card { background: rgba(255,255,255,.7) !important; border-color: rgba(99,102,241,.12) !important; backdrop-filter: blur(6px); }
.stas-skin-glass .stas-btn-cart { background: #6366f1 !important; }
.stas-skin-glass .stas-btn-order { color: #6366f1 !important; border-color: #6366f1 !important; }
.stas-skin-glass .stas-action-btn { border-color: #6366f1 !important; color: #6366f1 !important; background: rgba(255,255,255,.5) !important; }
.stas-skin-glass .stas-action-btn:hover { background: #6366f1 !important; color: #fff !important; }
.stas-skin-glass .stas-choice-btn { border-color: #6366f1 !important; color: #6366f1 !important; }
.stas-skin-glass .stas-choice-btn:hover { background: #6366f1 !important; color: #fff !important; }

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  THEME 2: MIDNIGHT AURORA — Tối sang trọng, gradient neon    ║
   ╚═══════════════════════════════════════════════════════════════╝ */
.stas-skin-aurora #stas-window {
  background: #0f0f1a !important;
  border: 1px solid rgba(139,92,246,.2) !important;
  box-shadow: 0 0 40px rgba(139,92,246,.1), 0 8px 32px rgba(0,0,0,.4) !important;
}
.stas-skin-aurora #stas-header {
  background: linear-gradient(135deg, #1a0533 0%, #0f172a 50%, #1e1b4b 100%) !important;
  border-bottom: 1px solid rgba(139,92,246,.2);
}
.stas-skin-aurora #stas-header #stas-title { color: #e0e7ff !important; }
.stas-skin-aurora #stas-header #stas-status { color: rgba(196,181,253,.6) !important; }
.stas-skin-aurora #stas-header #stas-avatar-wrap::after { background: #a78bfa !important; border-color: #1e1b4b !important; }
.stas-skin-aurora #stas-messages { background: #0f0f1a !important; }
.stas-skin-aurora .stas-msg.bot .stas-bubble-text {
  background: linear-gradient(135deg, rgba(30,27,75,.8), rgba(49,46,129,.6)) !important;
  border: 1px solid rgba(139,92,246,.15) !important;
  color: #e0e7ff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.2) !important;
}
.stas-skin-aurora .stas-msg.user .stas-bubble-text {
  background: linear-gradient(135deg, #7c3aed, #a855f7, #ec4899) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(168,85,247,.3) !important;
}
.stas-skin-aurora #stas-input-row { background: #0f0f1a !important; border-top: 1px solid rgba(139,92,246,.15) !important; }
.stas-skin-aurora #stas-input { background: rgba(30,27,75,.6) !important; border-color: rgba(139,92,246,.2) !important; color: #e0e7ff !important; }
.stas-skin-aurora #stas-input:focus { border-color: #8b5cf6 !important; box-shadow: 0 0 0 3px rgba(139,92,246,.15) !important; }
.stas-skin-aurora #stas-input::placeholder { color: rgba(196,181,253,.4) !important; }
.stas-skin-aurora #stas-send { background: linear-gradient(135deg, #7c3aed, #a855f7) !important; box-shadow: 0 0 16px rgba(168,85,247,.3) !important; }
.stas-skin-aurora #stas-bubble { background: linear-gradient(135deg, #7c3aed, #ec4899) !important; box-shadow: 0 0 24px rgba(168,85,247,.4) !important; }
.stas-skin-aurora #stas-bubble::after { border-color: #a855f7 !important; }
.stas-skin-aurora #stas-shortcuts { background: rgba(15,15,26,.8) !important; border-bottom: 1px solid rgba(139,92,246,.1) !important; }
.stas-skin-aurora .stas-shortcut { border-color: rgba(168,85,247,.35) !important; color: #c4b5fd !important; background: rgba(30,27,75,.5) !important; }
.stas-skin-aurora .stas-shortcut:hover { background: #7c3aed !important; color: #fff !important; }
.stas-skin-aurora .stas-notice { background: rgba(30,27,75,.6) !important; color: #a5b4fc !important; }
.stas-skin-aurora .stas-card { background: rgba(30,27,75,.6) !important; border-color: rgba(139,92,246,.15) !important; }
.stas-skin-aurora .stas-card-name { color: #e0e7ff !important; }
.stas-skin-aurora .stas-price-now { color: #f472b6 !important; }
.stas-skin-aurora .stas-btn-cart { background: linear-gradient(135deg,#7c3aed,#a855f7) !important; }
.stas-skin-aurora .stas-btn-order { color: #c4b5fd !important; border-color: #8b5cf6 !important; background: transparent !important; }
.stas-skin-aurora .stas-action-btn { border-color: #8b5cf6 !important; color: #c4b5fd !important; background: rgba(30,27,75,.5) !important; }
.stas-skin-aurora .stas-action-btn:hover { background: #7c3aed !important; color: #fff !important; }
.stas-skin-aurora .stas-choice-btn { border-color: #8b5cf6 !important; color: #c4b5fd !important; background: rgba(30,27,75,.5) !important; }
.stas-skin-aurora .stas-choice-btn:hover { background: #7c3aed !important; color: #fff !important; }
.stas-skin-aurora .stas-typing span { background: #8b5cf6 !important; }

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  THEME 3: WARM SUNSET — Cam ấm, gradient mặt trời lặn       ║
   ╚═══════════════════════════════════════════════════════════════╝ */
.stas-skin-sunset #stas-window {
  background: #fffbf5 !important;
  border: 1px solid rgba(251,146,60,.12) !important;
  box-shadow: 0 8px 32px rgba(234,88,12,.1) !important;
}
.stas-skin-sunset #stas-header {
  background: linear-gradient(135deg, #ea580c 0%, #f97316 40%, #facc15 100%) !important;
}
.stas-skin-sunset #stas-messages { background: #fffbf5 !important; }
.stas-skin-sunset .stas-msg.bot .stas-bubble-text {
  background: #fff7ed !important;
  border: 1px solid rgba(251,146,60,.12) !important;
  color: #431407 !important;
  box-shadow: 0 1px 6px rgba(234,88,12,.06) !important;
}
.stas-skin-sunset .stas-msg.user .stas-bubble-text {
  background: linear-gradient(135deg, #ea580c, #f97316) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(234,88,12,.25) !important;
}
.stas-skin-sunset #stas-input-row { background: #fffbf5 !important; border-top: 1px solid rgba(251,146,60,.12) !important; }
.stas-skin-sunset #stas-input { border-color: rgba(234,88,12,.15) !important; }
.stas-skin-sunset #stas-input:focus { border-color: #f97316 !important; box-shadow: 0 0 0 3px rgba(249,115,22,.1) !important; }
.stas-skin-sunset #stas-send { background: linear-gradient(135deg, #ea580c, #f97316) !important; }
.stas-skin-sunset #stas-bubble { background: linear-gradient(135deg, #ea580c, #f97316) !important; box-shadow: 0 4px 20px rgba(234,88,12,.35) !important; }
.stas-skin-sunset #stas-bubble::after { border-color: #f97316 !important; }
.stas-skin-sunset #stas-shortcuts { background: #fff7ed !important; border-bottom: 1px solid rgba(251,146,60,.1) !important; }
.stas-skin-sunset .stas-shortcut { border-color: #fb923c !important; color: #ea580c !important; }
.stas-skin-sunset .stas-shortcut:hover { background: #ea580c !important; color: #fff !important; }
.stas-skin-sunset .stas-card { border-color: rgba(251,146,60,.12) !important; }
.stas-skin-sunset .stas-card:hover { border-color: #f97316 !important; }
.stas-skin-sunset .stas-price-now { color: #c2410c !important; }
.stas-skin-sunset .stas-btn-cart { background: #ea580c !important; }
.stas-skin-sunset .stas-btn-order { color: #ea580c !important; border-color: #ea580c !important; }
.stas-skin-sunset .stas-action-btn { border-color: #f97316 !important; color: #ea580c !important; }
.stas-skin-sunset .stas-action-btn:hover { background: #ea580c !important; color: #fff !important; }
.stas-skin-sunset .stas-choice-btn { border-color: #f97316 !important; color: #ea580c !important; }
.stas-skin-sunset .stas-choice-btn:hover { background: #ea580c !important; color: #fff !important; }
.stas-skin-sunset .stas-typing span { background: #fb923c !important; }

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  THEME 4: OCEAN BREEZE — Xanh biển, tươi mát, thoáng đãng   ║
   ╚═══════════════════════════════════════════════════════════════╝ */
.stas-skin-ocean #stas-window {
  background: #f0fdfa !important;
  border: 1px solid rgba(20,184,166,.12) !important;
  box-shadow: 0 8px 32px rgba(13,148,136,.1) !important;
}
.stas-skin-ocean #stas-header {
  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 50%, #2dd4bf 100%) !important;
}
.stas-skin-ocean #stas-messages { background: linear-gradient(180deg, #f0fdfa 0%, #f5f3ff 100%) !important; }
.stas-skin-ocean .stas-msg.bot .stas-bubble-text {
  background: #fff !important;
  border: 1px solid rgba(20,184,166,.1) !important;
  color: #134e4a !important;
  box-shadow: 0 1px 6px rgba(13,148,136,.06) !important;
}
.stas-skin-ocean .stas-msg.user .stas-bubble-text {
  background: linear-gradient(135deg, #0d9488, #14b8a6) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(13,148,136,.25) !important;
}
.stas-skin-ocean #stas-input-row { background: #f0fdfa !important; border-top: 1px solid rgba(20,184,166,.1) !important; }
.stas-skin-ocean #stas-input { border-color: rgba(20,184,166,.2) !important; }
.stas-skin-ocean #stas-input:focus { border-color: #14b8a6 !important; box-shadow: 0 0 0 3px rgba(20,184,166,.1) !important; }
.stas-skin-ocean #stas-send { background: linear-gradient(135deg, #0d9488, #14b8a6) !important; }
.stas-skin-ocean #stas-bubble { background: linear-gradient(135deg, #0d9488, #14b8a6) !important; box-shadow: 0 4px 20px rgba(13,148,136,.35) !important; }
.stas-skin-ocean #stas-bubble::after { border-color: #14b8a6 !important; }
.stas-skin-ocean #stas-shortcuts { background: rgba(240,253,250,.8) !important; border-bottom: 1px solid rgba(20,184,166,.08) !important; }
.stas-skin-ocean .stas-shortcut { border-color: #5eead4 !important; color: #0d9488 !important; }
.stas-skin-ocean .stas-shortcut:hover { background: #0d9488 !important; color: #fff !important; }
.stas-skin-ocean .stas-card:hover { border-color: #14b8a6 !important; }
.stas-skin-ocean .stas-price-now { color: #0d9488 !important; }
.stas-skin-ocean .stas-btn-cart { background: #0d9488 !important; }
.stas-skin-ocean .stas-btn-order { color: #0d9488 !important; border-color: #0d9488 !important; }
.stas-skin-ocean .stas-action-btn { border-color: #14b8a6 !important; color: #0d9488 !important; }
.stas-skin-ocean .stas-action-btn:hover { background: #0d9488 !important; color: #fff !important; }
.stas-skin-ocean .stas-choice-btn { border-color: #14b8a6 !important; color: #0d9488 !important; }
.stas-skin-ocean .stas-choice-btn:hover { background: #0d9488 !important; color: #fff !important; }
.stas-skin-ocean .stas-typing span { background: #5eead4 !important; }

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  THEME 5: NEOBRUTALISM — Táo bạo, viền đậm, bóng cứng       ║
   ╚═══════════════════════════════════════════════════════════════╝ */
.stas-skin-neo #stas-window {
  background: #fffef2 !important;
  border: 3px solid #1a1a2e !important;
  border-radius: 12px !important;
  box-shadow: 6px 6px 0 #1a1a2e !important;
}
.stas-skin-neo #stas-header {
  background: #ff6b35 !important;
  border-bottom: 3px solid #1a1a2e !important;
  border-radius: 0 !important;
}
.stas-skin-neo #stas-header #stas-clear,
.stas-skin-neo #stas-header #stas-close,
.stas-skin-neo #stas-header #stas-theme-toggle {
  background: #fffef2 !important;
  color: #1a1a2e !important;
  border: 2px solid #1a1a2e !important;
}
.stas-skin-neo #stas-messages { background: #fffef2 !important; }
.stas-skin-neo .stas-msg.bot .stas-bubble-text {
  background: #fff !important;
  border: 2px solid #1a1a2e !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 #1a1a2e !important;
  color: #1a1a2e !important;
}
.stas-skin-neo .stas-msg.user .stas-bubble-text {
  background: #a855f7 !important;
  border: 2px solid #1a1a2e !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 #1a1a2e !important;
  color: #fff !important;
}
.stas-skin-neo #stas-input-row { background: #fffef2 !important; border-top: 3px solid #1a1a2e !important; }
.stas-skin-neo #stas-input { border: 2px solid #1a1a2e !important; border-radius: 8px !important; background: #fff !important; }
.stas-skin-neo #stas-input:focus { box-shadow: 3px 3px 0 #1a1a2e !important; }
.stas-skin-neo #stas-send { background: #ff6b35 !important; border: 2px solid #1a1a2e !important; box-shadow: 2px 2px 0 #1a1a2e !important; }
.stas-skin-neo #stas-send:hover { transform: translate(-1px,-1px) !important; box-shadow: 3px 3px 0 #1a1a2e !important; }
.stas-skin-neo #stas-bubble { background: #ff6b35 !important; border: 3px solid #1a1a2e !important; box-shadow: 4px 4px 0 #1a1a2e !important; }
.stas-skin-neo #stas-bubble::after { display: none !important; }
.stas-skin-neo #stas-bubble:hover { transform: translate(-2px,-2px) scale(1.03) !important; box-shadow: 6px 6px 0 #1a1a2e !important; }
.stas-skin-neo #stas-shortcuts { background: #fef3c7 !important; border-bottom: 2px solid #1a1a2e !important; }
.stas-skin-neo .stas-shortcut { border: 2px solid #1a1a2e !important; color: #1a1a2e !important; border-radius: 8px !important; box-shadow: 2px 2px 0 #1a1a2e !important; font-weight: 700 !important; }
.stas-skin-neo .stas-shortcut:hover { background: #ff6b35 !important; color: #fff !important; transform: translate(-1px,-1px); box-shadow: 3px 3px 0 #1a1a2e !important; }
.stas-skin-neo .stas-card { border: 2px solid #1a1a2e !important; border-radius: 10px !important; box-shadow: 3px 3px 0 #1a1a2e !important; }
.stas-skin-neo .stas-card:hover { transform: translate(-2px,-2px) !important; box-shadow: 5px 5px 0 #1a1a2e !important; }
.stas-skin-neo .stas-btn-cart { background: #ff6b35 !important; border: 2px solid #1a1a2e !important; border-radius: 8px !important; box-shadow: 2px 2px 0 #1a1a2e !important; }
.stas-skin-neo .stas-btn-order { color: #1a1a2e !important; border: 2px solid #1a1a2e !important; border-radius: 8px !important; box-shadow: 2px 2px 0 #1a1a2e !important; }
.stas-skin-neo .stas-action-btn { border: 2px solid #1a1a2e !important; color: #1a1a2e !important; background: #fff !important; border-radius: 8px !important; box-shadow: 3px 3px 0 #1a1a2e !important; font-weight: 700 !important; }
.stas-skin-neo .stas-action-btn:hover { background: #a855f7 !important; color: #fff !important; transform: translate(-1px,-1px) !important; box-shadow: 4px 4px 0 #1a1a2e !important; }
.stas-skin-neo .stas-choice-btn { border: 2px solid #1a1a2e !important; border-radius: 8px !important; box-shadow: 2px 2px 0 #1a1a2e !important; font-weight: 700 !important; }
.stas-skin-neo .stas-choice-btn:hover { background: #ff6b35 !important; color: #fff !important; }
.stas-skin-neo .stas-typing span { background: #ff6b35 !important; }
.stas-skin-neo .stas-notice { background: #fef3c7 !important; border: 1px solid #1a1a2e !important; color: #1a1a2e !important; }