/* Chatbot (floating button + chat window): flat red button, rounded black chat window, clean bubbles and cards. Loaded after chatbot.css.
   gaming-theme.css forces "* { font-size: 15px !important; font-weight: 200 !important }" and square corners, so sizes, weights and radii carry !important. */

/* ---------- floating button ---------- */
html body .chatbot-trigger { width: 58px; height: 58px; right: 24px; bottom: 24px; background: #d10000 !important; border: 0 !important; border-radius: 50% !important; box-shadow: 0 10px 30px rgba(209, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.6) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: none !important; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.2s !important; }
html body .chatbot-trigger:hover { transform: scale(1.07) !important; background: #e60000 !important; box-shadow: 0 14px 36px rgba(209, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.6) !important; }
html body .chatbot-trigger i { font-size: 23px !important; color: #fff !important; text-shadow: none !important; transform: none !important; }
html body .chatbot-trigger-badge { top: 3px; right: 3px; width: 13px; height: 13px; background: #fff !important; border: 2px solid #d10000 !important; box-shadow: none !important; animation: cbaPing 2.4s ease-out infinite !important; }
@keyframes cbaPing { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }

/* ---------- chat window ---------- */
html body .chatbot-container { width: 390px; right: 24px; bottom: 96px; background: #0d0d0d !important; border: 1px solid #1f1f1f !important; border-radius: 24px !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85) !important; }
html body .chatbot-container::after { display: none !important; }

/* header */
html body .chatbot-header { padding: 16px 18px; background: #0d0d0d !important; border-bottom: 1px solid #1f1f1f !important; }
html body .chatbot-header-info { gap: 12px; }
html body .chatbot-avatar { width: 42px; height: 42px; background: #161616 !important; border: 0 !important; border-radius: 13px !important; }
html body .chatbot-avatar img { width: 28px; height: auto; }
html body .chatbot-status-dot { right: -3px; bottom: -3px; width: 12px; height: 12px; background: #22c55e !important; border: 2px solid #0d0d0d !important; box-shadow: none !important; }
html body .chatbot-title { font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0 !important; color: #fff; }
html body .chatbot-subtitle { margin-top: 2px; font-size: 13px !important; font-weight: 400 !important; color: #a8a8a8 !important; }
html body .chatbot-close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0 !important; background: #161616 !important; border-radius: 50% !important; color: #a8a8a8 !important; font-size: 20px !important; line-height: 1; }
html body .chatbot-close:hover { background: #222 !important; color: #fff !important; transform: none !important; }

/* messages */
html body .chatbot-messages { padding: 18px; gap: 12px; background: #000; }
html body .chatbot-msg { max-width: 86%; }
html body .chatbot-msg-text { padding: 11px 15px; border-radius: 18px !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.5; }
html body .chatbot-msg-text p, html body .chatbot-msg-text li { font-size: 15px !important; font-weight: 400 !important; }
html body .chatbot-msg-text b, html body .chatbot-msg-text strong { font-weight: 700 !important; color: #fff; }
html body .chatbot-msg-bot .chatbot-msg-text { background: #161616 !important; border: 0 !important; color: #e6e6e6; border-bottom-left-radius: 6px !important; }
html body .chatbot-msg-user .chatbot-msg-text { background: #d10000 !important; border: 0 !important; color: #fff; border-bottom-right-radius: 6px !important; }
html body .chatbot-typing { padding: 14px 18px; background: #161616 !important; border: 0 !important; border-radius: 18px !important; border-bottom-left-radius: 6px !important; }
html body .chatbot-typing span { background: #ff5252 !important; }

/* quick answers */
html body .chatbot-quick-options { gap: 8px; margin-top: 2px; }
html body .chatbot-quick-pill { padding: 9px 15px !important; background: #0d0d0d !important; border: 1px solid #2a2a2a !important; border-radius: 999px !important; color: #fff !important; font-size: 13.5px !important; font-weight: 500 !important; box-shadow: none !important; transform: none !important; }
html body .chatbot-quick-pill:hover { background: #1a0000 !important; border-color: #d10000 !important; box-shadow: none !important; transform: none !important; }
html body .chatbot-quick-pill i { font-size: 12px !important; color: #ff5252 !important; }

/* product cards */
html body .chatbot-products-container { gap: 10px; }
html body .chatbot-product-card { padding: 10px; gap: 12px; background: #0d0d0d !important; border: 1px solid #1f1f1f !important; border-radius: 16px !important; box-shadow: none !important; transform: none !important; }
html body .chatbot-product-card:hover { border-color: #3a3a3a !important; background: #111 !important; transform: none !important; box-shadow: none !important; }
html body .chatbot-product-img { width: 60px; height: 60px; padding: 6px; background: #161616 !important; border: 0 !important; border-radius: 12px !important; }
html body .chatbot-product-brand { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em; color: #ff5252 !important; }
html body .chatbot-product-name { font-size: 14px !important; font-weight: 500 !important; color: #fff; }
html body .chatbot-product-price { font-size: 15px !important; font-weight: 700 !important; color: #fff !important; }
html body .chatbot-product-btn { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0; text-transform: none; color: #ff5252 !important; }
html body .chatbot-product-btn i { font-size: 10px !important; }
html body .chatbot-stock-badge { border-radius: 999px !important; font-size: 11px !important; }

/* action buttons inside the chat */
html body .chatbot-whatsapp-btn { padding: 11px 18px !important; background: #1faa52 !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; font-size: 14px !important; font-weight: 700 !important; transform: none !important; filter: none !important; }
html body .chatbot-whatsapp-btn:hover { background: #25d366 !important; transform: none !important; box-shadow: none !important; }
html body .chatbot-builder-cta-btn { padding: 11px 18px !important; background: #d10000 !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; color: #fff !important; font-size: 14px !important; font-weight: 700 !important; transform: none !important; }
html body .chatbot-builder-cta-btn i { color: #fff !important; }
html body .chatbot-builder-cta-btn:hover { background: #e60000 !important; transform: none !important; box-shadow: none !important; border: 0 !important; }
html body .chatbot-product-tabby { border-radius: 12px !important; }
html body .chatbot-product-tabby .tabby-text b { color: #fff; }

/* input */
html body .chatbot-input-bar { padding: 14px 16px; gap: 10px; background: #0d0d0d !important; border-top: 1px solid #1f1f1f !important; }
html body .chatbot-input-bar input { height: 46px; padding: 0 18px !important; background: #000 !important; border: 1px solid #3a3a3a !important; border-radius: 999px !important; color: #fff !important; font-size: 15px !important; font-weight: 400 !important; box-shadow: none !important; }
html body .chatbot-input-bar input::placeholder { color: #6a6a6a; }
html body .chatbot-input-bar input:focus { border-color: #d10000 !important; background: #000 !important; box-shadow: none !important; }
html body .chatbot-send-btn { width: 46px; height: 46px; flex: 0 0 46px; background: #d10000 !important; border-radius: 50% !important; box-shadow: none !important; }
html body .chatbot-send-btn:hover { background: #e60000 !important; transform: scale(1.05); box-shadow: none !important; }
html body .chatbot-send-btn i { font-size: 15px !important; color: #fff !important; }
html body .chatbot-disclaimer, html body .chatbot-footer-note { font-size: 12px !important; font-weight: 400 !important; color: #6a6a6a !important; }

/* dark scrollbar inside the chat */
html body .chatbot-messages::-webkit-scrollbar-thumb { background: #3a3a3a; }
html body .chatbot-messages::-webkit-scrollbar-thumb:hover { background: #5a5a5a; }

/* phone: a bottom sheet above the bottom menu */
@media (max-width: 768px) {
    html body .chatbot-trigger { width: 54px; height: 54px; right: 16px; bottom: 92px; }
    html body .chatbot-container { right: 12px !important; left: 12px !important; width: auto !important; bottom: 84px !important; border-radius: 22px !important; }
    html body .chatbot-header { padding: 14px 16px; }
}

/* ---------- one font, one look everywhere inside the chat ----------
   gaming-theme.css forces weight 200 on every element ("*"), which made the small texts inside the chat thin and different from the rest of the site.
   :where() keeps this rule's weight low, so anything above that sets its own bold/medium still wins. */
:where(.chatbot-container) * { font-family: 'Outfit', sans-serif !important; font-weight: 400 !important; }
html body .chatbot-container button, html body .chatbot-container input { font-family: 'Outfit', sans-serif !important; }

html body .chatbot-quick-pill { gap: 9px; padding: 10px 16px !important; }
html body .chatbot-quick-pill span { font-size: 14px !important; font-weight: 500 !important; color: #fff; }
html body .chatbot-quick-pill .cb-pill-icon { width: 16px; text-align: center; font-size: 14px !important; color: #ff5252 !important; }
html body .chatbot-quick-pill .cb-pill-arrow { margin-left: 2px; font-size: 10px !important; color: #6a6a6a !important; transition: transform 0.2s, color 0.2s; }
html body .chatbot-quick-pill:hover .cb-pill-arrow { color: #fff !important; transform: translateX(2px); }
html body .chatbot-msg-text b, html body .chatbot-msg-text strong { font-weight: 700 !important; }