
/* Zaybees WPBot Branding
   Palette: black / gold / blue / grey
*/
:root{
  --zb-black:#07090d;
  --zb-black-2:#10141b;
  --zb-gold:#d4af37;
  --zb-gold-bright:#ffd76a;
  --zb-blue:#0f5ea8;
  --zb-blue-bright:#2d8cff;
  --zb-grey:#2b313a;
  --zb-grey-2:#3b424d;
  --zb-light:#f3f4f6;
  --zb-white:#ffffff;
}

/* Main floating chat shell */
#wp-chatbot-chat-container,
#wp-chatbot-ball-container{
  font-family: Arial, Helvetica, sans-serif !important;
}

#wp-chatbot-chat-container .wp-chatbot-board-container,
#wp-chatbot-chat-container #wp-chatbot-board-container{
  border:1px solid rgba(212,175,55,.7) !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:var(--zb-black-2) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.48),
    0 0 0 1px rgba(212,175,55,.12),
    0 0 28px rgba(15,94,168,.18) !important;
}

/* Header */
#wp-chatbot-chat-container .wp-chatbot-header{
  background:
    linear-gradient(135deg,var(--zb-black) 0%,var(--zb-black-2) 55%,#142235 100%) !important;
  border-bottom:2px solid var(--zb-gold) !important;
  color:var(--zb-white) !important;
  min-height:62px !important;
}
#wp-chatbot-chat-container .wp-chatbot-header h3,
#wp-chatbot-chat-container .wp-chatbot-header *,
#wp-chatbot-chat-container .wp-chatbot-header a{
  color:var(--zb-white) !important;
}
#wp-chatbot-chat-container .wp-chatbot-header h3{
  font-weight:800 !important;
  letter-spacing:.2px !important;
}
#wp-chatbot-chat-container .wp-chatbot-header h3::after{
  content:"";
  display:block;
  width:44px;
  height:3px;
  margin:7px auto 0;
  border-radius:10px;
  background:linear-gradient(90deg,var(--zb-gold),var(--zb-blue-bright));
}

/* Content area */
#wp-chatbot-chat-container .wp-chatbot-content{
  background:
    radial-gradient(circle at 100% 0,rgba(15,94,168,.13),transparent 34%),
    linear-gradient(180deg,#f7f8fa 0%,#eceff3 100%) !important;
}

/* Bot and user message bubbles */
#wp-chatbot-chat-container li.wp-chatbot-msg > .wp-chatbot-paragraph,
#wp-chatbot-chat-container li.wp-chatbot-msg .chat-container{
  background:var(--zb-white) !important;
  color:#151922 !important;
  border:1px solid #d9dde3 !important;
  border-left:4px solid var(--zb-gold) !important;
  border-radius:14px 14px 14px 5px !important;
  box-shadow:0 5px 14px rgba(0,0,0,.07) !important;
}
#wp-chatbot-chat-container li.wp-chat-user-msg > .wp-chatbot-paragraph,
#wp-chatbot-chat-container li.wp-chat-user-msg .chat-container{
  background:linear-gradient(135deg,var(--zb-blue),#183b63) !important;
  color:var(--zb-white) !important;
  border:1px solid rgba(255,215,106,.65) !important;
  border-radius:14px 14px 5px 14px !important;
  box-shadow:0 5px 14px rgba(15,94,168,.2) !important;
}
#wp-chatbot-chat-container li.wp-chat-user-msg .wp-chatbot-paragraph *,
#wp-chatbot-chat-container li.wp-chat-user-msg .chat-container *{
  color:var(--zb-white) !important;
}

/* Links in bot messages */
#wp-chatbot-chat-container .wp-chatbot-paragraph a,
#wp-chatbot-chat-container .wpb-search-result a{
  color:var(--zb-blue) !important;
  font-weight:700 !important;
  text-decoration:none !important;
}
#wp-chatbot-chat-container .wp-chatbot-paragraph a:hover,
#wp-chatbot-chat-container .wpb-search-result a:hover{
  color:#0a457e !important;
  text-decoration:underline !important;
}

/* Quick replies / menu chips */
#wp-chatbot-chat-container span.qcld-chatbot-product-category,
#wp-chatbot-chat-container span.qcld-chatbot-support-items,
#wp-chatbot-chat-container span.qcld-chatbot-wildcard,
#wp-chatbot-chat-container span.qcld-chatbot-suggest-email,
#wp-chatbot-chat-container span.qcld-chatbot-site-search,
#wp-chatbot-chat-container span.qcld-chatbot-suggest-phone,
#wp-chatbot-chat-container span.qcld-chatbot-reset-btn,
#wp-chatbot-chat-container span.qcld-chat-common,
#wp-chatbot-chat-container .wp-chatbot-loadmore,
#wp-chatbot-chat-container #wp-chatbot-loadmore{
  background:linear-gradient(135deg,var(--zb-black-2),var(--zb-grey)) !important;
  color:var(--zb-gold-bright) !important;
  border:1px solid rgba(212,175,55,.75) !important;
  box-shadow:0 3px 10px rgba(0,0,0,.14) !important;
  border-radius:999px !important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease !important;
}
#wp-chatbot-chat-container span.qcld-chatbot-product-category:hover,
#wp-chatbot-chat-container span.qcld-chatbot-support-items:hover,
#wp-chatbot-chat-container span.qcld-chatbot-wildcard:hover,
#wp-chatbot-chat-container span.qcld-chatbot-suggest-email:hover,
#wp-chatbot-chat-container span.qcld-chatbot-site-search:hover,
#wp-chatbot-chat-container span.qcld-chatbot-suggest-phone:hover,
#wp-chatbot-chat-container span.qcld-chatbot-reset-btn:hover,
#wp-chatbot-chat-container span.qcld-chat-common:hover,
#wp-chatbot-chat-container .wp-chatbot-loadmore:hover,
#wp-chatbot-chat-container #wp-chatbot-loadmore:hover{
  background:linear-gradient(135deg,var(--zb-blue),#173f6b) !important;
  color:var(--zb-white) !important;
  border-color:var(--zb-gold) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 6px 16px rgba(15,94,168,.25) !important;
}

/* Back to start */
#wp-chatbot-chat-container .qcld_back_to_start{
  background:transparent !important;
  color:var(--zb-blue) !important;
  border:1px solid var(--zb-blue) !important;
  font-weight:800 !important;
}
#wp-chatbot-chat-container .qcld_back_to_start:hover{
  background:var(--zb-blue) !important;
  color:var(--zb-white) !important;
}

/* Product / site-search cards */
#wp-chatbot-chat-container .wpb-search-result{
  display:grid !important;
  gap:10px !important;
}
#wp-chatbot-chat-container .wpbot_card_wraper{
  background:var(--zb-white) !important;
  border:1px solid #d7dce2 !important;
  border-top:3px solid var(--zb-gold) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:0 7px 18px rgba(0,0,0,.08) !important;
}
#wp-chatbot-chat-container .wpbot_card_image,
#wp-chatbot-chat-container .wpbot_card_caption,
#wp-chatbot-chat-container .wpbot_card_wraper a{
  background:var(--zb-white) !important;
}
#wp-chatbot-chat-container .wpbot_card_wraper img{
  width:100% !important;
  height:auto !important;
  max-height:180px !important;
  object-fit:contain !important;
  background:#fff !important;
}
#wp-chatbot-chat-container .wpbot_card_caption{
  padding:10px 12px 12px !important;
}
#wp-chatbot-chat-container .wpbot_card_caption p,
#wp-chatbot-chat-container .wpbot_card_caption .wpbot_card_caption_title{
  color:#151922 !important;
}
#wp-chatbot-chat-container .wpbot_product_price,
#wp-chatbot-chat-container .wp-chatbot-product-price{
  color:var(--zb-blue) !important;
  font-weight:900 !important;
  font-size:16px !important;
}

/* Input area */
#wp-chatbot-chat-container .wp-chatbot-editor-container{
  background:var(--zb-black) !important;
  border-top:1px solid rgba(212,175,55,.55) !important;
  border-radius:0 0 16px 16px !important;
  padding:8px 12px !important;
}
#wp-chatbot-chat-container .wp-chatbot-editor-container input,
#wp-chatbot-chat-container .wp-chatbot-editor-container textarea{
  color:var(--zb-white) !important;
  background:var(--zb-grey) !important;
  border:1px solid #505865 !important;
  border-radius:999px !important;
  padding:0 14px !important;
  min-height:42px !important;
}
#wp-chatbot-chat-container .wp-chatbot-editor-container input::placeholder,
#wp-chatbot-chat-container .wp-chatbot-editor-container textarea::placeholder{
  color:#c8ccd2 !important;
  opacity:1 !important;
}
#wp-chatbot-chat-container .wp-chatbot-editor-container input:focus,
#wp-chatbot-chat-container .wp-chatbot-editor-container textarea:focus{
  border-color:var(--zb-gold) !important;
  box-shadow:0 0 0 3px rgba(212,175,55,.16) !important;
  background:#252b33 !important;
}

/* Send / action icons */
#wp-chatbot-chat-container .wp-chatbot-editor-container button,
#wp-chatbot-chat-container .wp-chatbot-editor-container .wp-chatbot-editor-send,
#wp-chatbot-chat-container .wp-chatbot-editor-container [class*="send"]{
  color:var(--zb-gold) !important;
}

/* Launcher / floating ball */
#wp-chatbot-chat-container .wp-chatbot-ball,
#wp-chatbot-ball-container .wp-chatbot-ball,
#wp-chatbot-chat-container .wp-chatbot-ball-animation-switch,
#wp-chatbot-ball-container .wp-chatbot-ball-animation-switch{
  background:
    radial-gradient(circle at 35% 30%,var(--zb-gold-bright),var(--zb-gold) 35%,var(--zb-black) 68%) !important;
  border:2px solid var(--zb-gold) !important;
  box-shadow:
    0 8px 25px rgba(0,0,0,.45),
    0 0 0 4px rgba(15,94,168,.16) !important;
}
#wp-chatbot-chat-container .wp-chatbot-ball:hover,
#wp-chatbot-ball-container .wp-chatbot-ball:hover{
  box-shadow:
    0 10px 30px rgba(0,0,0,.5),
    0 0 0 5px rgba(212,175,55,.18),
    0 0 22px rgba(45,140,255,.35) !important;
}

/* Small utility text / dividers */
#wp-chatbot-chat-container .qcld-chatbot-support-or,
#wp-chatbot-chat-container .qcld-like-dislike-icon i,
#wp-chatbot-chat-container .wp-chatbot-textanimation ul li::marker{
  color:var(--zb-blue) !important;
}

/* Scroll bar */
#wp-chatbot-chat-container .slimScrollBar{
  background:var(--zb-gold) !important;
  opacity:.75 !important;
}

/* Mobile */
@media (max-width:767px){
  #wp-chatbot-chat-container .wp-chatbot-board-container,
  #wp-chatbot-chat-container #wp-chatbot-board-container{
    border-radius:16px !important;
  }
  #wp-chatbot-chat-container .wp-chatbot-header{
    padding:14px 48px !important;
  }
}
@media (max-width:480px){
  #wp-chatbot-chat-container.wp-chatbot-mobile-fs-open .wp-chatbot-board-container,
  #wp-chatbot-chat-container.wp-chatbot-mobile-fs-open #wp-chatbot-board-container{
    border-radius:16px 16px 0 0 !important;
    border-left:none !important;
    border-right:none !important;
    border-bottom:none !important;
  }
  #wp-chatbot-chat-container .wp-chatbot-content{
    padding:12px !important;
  }
}

/* Accessibility/readability */
#wp-chatbot-chat-container *{
  box-sizing:border-box;
}
#wp-chatbot-chat-container a:focus,
#wp-chatbot-chat-container button:focus,
#wp-chatbot-chat-container input:focus,
#wp-chatbot-chat-container span[role="button"]:focus{
  outline:2px solid var(--zb-gold) !important;
  outline-offset:2px !important;
}


/* WooCommerce price visibility inside WPBot product cards */
#wp-chatbot-chat-container .wpbot_product_price,
#wp-chatbot-chat-container .wpbot_product_price *,
#wp-chatbot-chat-container .wpbot_product_price .woocommerce-Price-amount,
#wp-chatbot-chat-container .wpbot_product_price .woocommerce-Price-amount bdi,
#wp-chatbot-chat-container .wpbot_product_price .woocommerce-Price-currencySymbol,
#wp-chatbot-chat-container .wp-chatbot-product-price,
#wp-chatbot-chat-container .wp-chatbot-product-price *{
  color:var(--zb-blue) !important;
  opacity:1 !important;
  visibility:visible !important;
  -webkit-text-fill-color:var(--zb-blue) !important;
}
#wp-chatbot-chat-container .wpbot_product_price del,
#wp-chatbot-chat-container .wpbot_product_price del *{
  color:#7a8088 !important;
  -webkit-text-fill-color:#7a8088 !important;
}
#wp-chatbot-chat-container .wpbot_product_price ins,
#wp-chatbot-chat-container .wpbot_product_price ins *{
  color:var(--zb-blue) !important;
  -webkit-text-fill-color:var(--zb-blue) !important;
  text-decoration:none !important;
  font-weight:900 !important;
}
