/* 
 Theme Name:     Divi Child
 Description: Divi Child Theme
 Author: Elegant Themes
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.1.0
*/ 


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------*/
#chatbot-container {
    position: fixed;
    right: 50px;
    bottom: 0;
    background: #ffffff;
    z-index: 1;
    max-width: 320px;
    color: black;
    padding: 0;
    width: 320px

}
.common-toolbar {
    display: flex;
}
#chatbot-container {
    border: 1px solid #23304D;
}
div#chat-content {
    color: white;
    height: 45vh; 
    padding: 20px;
}

#chat-content a {
    background: #9e2e2e;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    text-wrap: revert;
    display: inline-block;
}

.debug {
    height: 0;
    overflow: hidden;
}

 .chatbot-container pre, .debug {
    display: none;
}


#ucc-chat-header {
    background: #23304D;
    color: white;
    display: flex;
    padding: 10px;
    justify-content: space-between;
}
.chat-header button {
    background: transparent;
}
.chat-header button {
    background: transparent;
    box-shadow: none;
    border: 0;
    display: flex
;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* Prevent text wrapping */
  border: 0;
}
/* Chat form container */
.chat-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px;
    background: #fff;
    border-top: 1px solid #ccc;
}

/* Input field with integrated button */
input[type=text].chat-input, textarea.chat-input {
    width: 100%;
    padding: 12px 50px 12px 15px; /* Leaves space for the button */
    border: 1px solid #ccc;
    border-radius: 25px;
    font-size: 14px;
        height: 45px;
    outline: none;
    background: #f5f5f5;
      min-height: 45px;
  max-height: 200px;     /* Optional: limit height */
}
textarea.chat-input {
  resize: none;
}
/* Send button inside input field */
.chat-send-button {
    position: absolute;
    right: 15px;
    bottom: -2.5px;
    transform: translateY(-50%);
    background-color: #CE2821; /* Best Buy blue */
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease-in-out;
}

.chat-send-button:hover {
    background-color: #D0221B;
}

/* SVG icon for the send button */
.chat-send-button svg {
    display: block;
}

.boosted {
    display: none;
}

.related-pro ul {
 
    width: 100%;
    overflow-x: auto;
}

.related-pro li {
    background: transparent;
    border-radius: 6px;
    display: block;
    /* height: auto; */
    margin-right: 10px;
    /* min-height: 100px; */
    padding: 5px;
    margin-bottom: 5px;
    width: 100%;
    color: #000;
    /* border: #9e2e2e 1px solid; */
}
.related-pro li strong {
    word-wrap: break-word;
}
.related-pro > strong {
    color: #323232;
}

/** Loader **/
.chat-loader {
    position: relative;
    width: 48px;
    height: 12px;
    display: flex;
    justify-content: start;
    align-items: center;
    opacity: 0; /* Initially hidden */
    overflow: hidden;
    visibility: hidden; /* Initially hidden */
    margin: 0;
    font-size: 0;
     white-space: nowrap; 
     margin-bottom: 10px;
}

.chat-loader span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #23304d; /* Best Buy Blue */
    display: inline-block;
    position: relative;
    margin-right: 6px;
      left: -18px; /* Start “off” left to create the sliding effect */

}
.chatbot-loader-container {
    padding-left: 24px;
 }

/* Chat Container */
#chat-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

/* Message Bubble */
.chat-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}
.chat-bubble p:last-of-type {
  padding-bottom: 0;
}
/* User (Right-aligned like iPhone) */
.user-message {
    align-self: flex-end;
    background: #23304d;
    color: white;
    border-bottom-right-radius: 4px;
}
.user-message p {
    color: white;
}
/* Bot (Left-aligned like iPhone) */
.bot-message {
    align-self: flex-start;
    background: #E5E5EA;
    color: black;
    border-bottom-left-radius: 4px;
}

/* Responsive Fix */
@media (max-width: 500px) {
    .chat-bubble {
        max-width: 85%;
    }
}
.unsure .related-pro {
    display: block
;
}

/** Close/Min **/

/* Minimized: shrink height, maybe width */
.chat--minimized {
  height: 48px;            /* whatever fits the header */
}

/* Hidden: remove from flow */
.chat--hidden {
  display: none;
}

/* Floating launcher icon */
.chat-open {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  font-size: 26px;
}
/* show only one icon at a time */
.chat-min-btn .icon-max { display:none; }

.chat--minimized .chat-min-btn .icon-min { display:none; }
.chat--minimized .chat-min-btn .icon-max { display:inline; }
.chat-icon {
    height: 32px;
    width: 32px; 
     margin-top: -3px;
   
}
#chat-open-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #cf2721;
    border: 0;
    padding: 6px;
        
}

#chat-open-btn {
  background-repeat: no-repeat;
  background-position: -120px -120px, 0 0;
  
  background-image: -webkit-linear-gradient(
    top left,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.2) 37%,
    rgba(255, 255, 255, 0.8) 45%,
    rgba(255, 255, 255, 0.0) 50%
  );
  background-image: -moz-linear-gradient(
    0 0,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.2) 37%,
    rgba(255, 255, 255, 0.8) 45%,
    rgba(255, 255, 255, 0.0) 50%
  );    
  background-image: -o-linear-gradient(
    0 0,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.2) 37%,
    rgba(255, 255, 255, 0.8) 45%,
    rgba(255, 255, 255, 0.0) 50%
  );
  background-image: linear-gradient(
    0 0,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.2) 37%,
    rgba(255, 255, 255, 0.8) 45%,
    rgba(255, 255, 255, 0.0) 50%
  );
  
  -moz-background-size: 250% 250%, 100% 100%;
       background-size: 250% 250%, 100% 100%;
  
  -webkit-transition: background-position 0s ease;
     -moz-transition: background-position 0s ease;       
       -o-transition: background-position 0s ease;
          transition: background-position 0s ease;
}

#chat-open-btn:hover {
  background-position: 0 0, 0 0;
  
  -webkit-transition-duration: 0.5s;
     -moz-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
svg.icon-min, svg.icon-max, .c-close-icon {
    cursor: pointer;
}

/** custom z-indexing for Passive Plus **/
button#chat-open-btn {
    z-index: 1;
}

#chatbot-container {
    z-index: 2;
}
/** THEME STYLES **/
.pum-theme-1851 .pum-container .pum-content + .pum-close {
  right: 10px;
  top: 10px;
  left: auto;
  bottom: auto;
}