:root{
  --chat-button-color: #b05468;
  --chat-response-background-color: rgba(183, 77, 101, 0.2);
  --chat-response-hover-color: rgba(183, 77, 101, 0.8);
  --chat-response-loading-color: rgba(183, 77, 101, 0.5);
  --chat-addtocart: #211c35;
  --chat-max-height: 100px;
}


.chat__app{ position:fixed; right:0; bottom:0; width:100%; z-index:10; padding:0 0 8px; background:#fff;
            box-shadow: -2px 2px 10px rgba(0,0,0,0.2); border-top-left-radius:12px; border-top-right-radius:12px;}

  .chat__app-inner{ position:relative; }


  .chat__app-side-panel{ display:none;  position:absolute; z-index:1; bottom:0; right:100%; height:100%;  box-sizing:border-box;
                         align-items:center;}

    .chat__toggle-button{ cursor:pointer; padding:8px 8px 16px; background-color:#3F001D; border-top-left-radius:12px;  border-bottom-left-radius:12px;  }
      .chat__toggle-button-svg{display:block; width:30px; height:30px; border-radius:5px; background-color:#FBE5E1; margin-bottom:14px; }
    .chat__toggle-button-text{ color:#fff; writing-mode: vertical-rl; transform:rotate(180deg); font-size:16px; font-weight:560; padding:0 3px 0 0; letter-spacing:0.05em;  }
      .chat__toggle-button-text:last-of-type{ display:none;  font-size:20px; padding:0 1px 0 0; }
      .chat__app--show-on-desktop .chat__toggle-button-text:first-of-type{ display:none; }
      .chat__app--show-on-desktop .chat__toggle-button-text:last-of-type{ display:block; }






    .chat__resize-bar{ display:block !important; position:absolute; z-index:1; top:-1px; left:0; width:100%; cursor:pointer; padding:6px 0 24px;  }
      .chat__resize-bar:before{ content: ""; width:100px; height:3px; border-radius:3px; margin:0 auto;
                                background-color:rgba(0,0,0,0.2); display:block; }

    .chat__header{ border-bottom:solid 1px rgba(0,0,0,0.1); padding:16px 0 16px 16px; display:none; align-items:center;     }
      .chat__header-logo-svg{display:block; width:35px; height:36px; border-radius:8px;  margin-right:16px; background-color:#FBE5E1;  }
      .chat__header-text{ font-size:18px; font-weight:600; flex:1;  }
      .chat__header-close{ display:none; width:60px; height:60px; padding:20px; cursor:pointer;   }
        .chat__header-close-svg{display:block; width:100%; height:100%; stroke-width:3px; cursor:pointer;  }

    .chat__messages-window{ width:100%; display:flex; flex-direction:column; padding-top:12px   }





      .chat__message-bottom{ font-size:1px; height:1px;  overflow:hidden;  }

      .chat__messages{ flex:1;  overflow-y: auto; padding: 0 12px; max-height: var(--chat-max-height); }

  /*
    max-height: calc(85vh - 200px);
     @media (min-width: 1250px) { .chat__messages{ height: calc(85vh - 200px); }}
  */

    .chat__messages::-webkit-scrollbar {width: 3px; margin-left:10px; }
    .chat__messages::-webkit-scrollbar-track {background: #e0e0e0; }
    .chat__messages::-webkit-scrollbar-thumb {background-color: black;}

    .chat__message{max-width: 80%;  border-radius:10px; margin-bottom:4px; padding:6px 12px; /*padding: 8px 12px;*/
                  text-align:left; margin-left:auto; width: fit-content; font-size:15px; line-height:1.3; position:relative;   }

      .chat__message--request{ border-top-right-radius:2px; background:#D9DEDE; margin:8px 0 8px auto;  }
      .chat__message--response{ margin-left:0; border-radius:0; padding-left:40px  }





      .chat__message-logo-svg{position:absolute; top:0; left:0; display:block; width:30px; height:30px;    }
        .chat__message--request .chat__message-logo-svg{display:none; }

      .chat__message p{padding:0; margin:0; }
      .chat__message p:nth-of-type(n+2){ margin-top:8px; }
        .chat__message-link{ color:#000; text-decoration:underline; text-decoration-color:rgba(0,0,0,0.5); cursor:pointer; }
          .chat__message-link--product{ display:block; padding:10px 0; }
        .chat__message ul, .chat__message ol{ display:block; margin: 0; padding:0 0 0 16px;  }
        /*.chat__message ul, .chat__message ol{ display:block; margin:4px 0 0; padding: 0; }
        .chat__message-li{ display:block; padding:6px 12px; margin:0 0 4px; cursor:pointer; border-radius:2px;
                            background-color:rgba(255,255,255, 0.7 ); border-color: rgb(229 229 229); }
          .chat__message-li:not(.chat__message-li--not-selected):hover{ background-color:var(--chat-response-hover-color); color:#fff; }
          .chat__message-li--selected{ background-color:var(--chat-response-hover-color); color:#fff;}
*/

        .chat__message-option{ display:block; padding:6px 12px; margin:0 0 4px; border-radius:2px; cursor:pointer !important;
                            background-color:rgba(183, 77, 101, 0.2 ); border-color: rgb(229 229 229); color:#000; text-decoration:none !important; }
          .chat__message-option:not(.chat__message-option--not-selected):hover{ background-color:var(--chat-response-hover-color); color:#fff; }
          .chat__message-option--selected{ background-color:var(--chat-response-hover-color); color:#fff; cursor: not-allowed !important; }
            .chat__message-option--selected ~ .chat__message-option{ cursor: not-allowed !important;}


        .chat__message-paragraph{ margin-bottom: 4px; }

        .chat__waiting{font-style:italic; font-size:11px; font-weight:100; display:flex; align-items:center;  }
          .chat__waiting span{display:block; width:2px; height:2px; border-radius:4px; margin-left:8px;
            animation: 1s blink-small infinite; background-color:#666; transform:translateY(3px) ;
          }

        .chat__loading{display:flex; padding-left:12px; margin-bottom:8px; }
          .chat__loading span{display:block; width:8px; height:8px; border-radius:4px; margin-right:8px;
            animation: 1s blink infinite; background-color:var(--chat-response-loading-color);
          }

          .chat__loading span:nth-child(2), .chat__waiting span:nth-child(2) { animation-delay: 250ms; }
          .chat__loading span:nth-child(3), .chat__waiting span:nth-child(3) { animation-delay: 500ms; }

          @keyframes blink {
            50% { opacity:0; transform: translateY(-4px); }
          }

          @keyframes blink-small {
            50% { opacity:0; transform: translateY(-1px); }
          }



      .chat__product{ display:flex; margin: 16px 0; }
        .chat__product-image{ display:block; width:110px; flex:0 0 110px; }
        .chat__product-img{display:block; width:100%; border:solid 1px rgba(0,0,0,0.1); }
        .chat__product-details{ margin-left:12px; }
          .chat__product-details-link{ text-decoration:none !important; color:#000; }
            .chat__product-title{font-size: 13px; font-weight:600; line-height:1.2; letter-spacing:0;   }
            .chat__product-price{font-size: 15px; margin-top: 6px;}
          .chat__product-button{ display:inline-block; background:var(--chat-addtocart); color:#fff; font-size:13px;
                                 padding:5px 20px; margin-top:8px; text-decoration:none !important; cursor:pointer !important;  }
            .chat__product-button--large{ width: 100%; text-align:center;  padding:8px 0;}

          .chat__product-loading{display:flex; align-items:center; font-style:italic; padding:8px 0px; }
          .chat__product-loading:before {content:""; display:block; width:12px; height:12px; margin-right:8px;
                                          border: 1px solid rgba(0,0,0,0.8); border-bottom-color: transparent; border-radius:50%;
                                          box-sizing:border-box; animation: rotation 1s linear infinite; }

            @keyframes rotation {
              0% {transform: rotate(0deg); }
              100% {transform: rotate(360deg);}
            }

.chat__new-message{display:flex; align-items:center; padding:0 12px;}
  .chat__new-message-textarea{  flex:1; margin-right:8px; appearance:none; font-size:14px; line-height:1.4 ; box-sizing:border-box;
                               border:solid 1px rgba(0,0,0,0.3); box-shadow:none !important; outline:none !important;
                               padding:8px 12px; resize:none; border-radius:6px; background:#fff; max-height:80px;
                                overflow-y:scroll; -ms-overflow-style:none; scrollbar-width:none;
  }

    .chat__new-message-textarea:focus{ border:solid 1px rgba(0,0,0,0.5);}
      .chat__new-message-textarea::-webkit-scrollbar{ display:none; }

  .chat__new-message-button{ appearance:none; background:none; color:#fff; padding:0; border:none;
                            font-size:10px; text-transform:uppercase; font-weight:600; letter-spacing:0.1em; cursor:pointer;   }

    .chat__new-message-button-svg{display:block; width:34px; height:34px; }


  .testa{background: blue;}
    .testb{background: red;}
.testc{background: greenyellow;}



  .chat__logo{display:none; justify-content:center; }
    .chat__logo-powered-by{color:#B0BCBC; padding-right:12px; font-size:14px; font-weight:500;   }
    .chat__logo-svg{ display:block; width:80px; fill:#B0BCBC; }

@media (max-width: 960px) {
  .chat__message--response:first-of-type{ max-width:100%; }

}

@media (min-width: 961px) {
  .chat__app{ height:100%; height:100dvh;  max-width:400px; border-radius:0; box-shadow: none; border-left:solid 1px rgba(0,0,0,0.1); transform:translateX(100%); transition:transform 0.7s; }
    .chat__app--show-on-desktop{ transform:translateX(0); }
  .chat__app-inner{ height:100%;   }
    .chat__app-side-panel{ display:flex; }

  .chat__header{  display:flex; }
  .chat__messages-window{ height:calc(100% - 116px); }
  .chat__resize-bar{  display:none !important; }
  .chat__messages{ max-height:100% !important;  }
  .chat__message{padding: 8px 16px; margin-top: 8px; margin-bottom:8px;  }
  .chat__message--response{padding: 4px 0 0 46px; max-width:90%; }
  .chat__new-message{ padding:20px 12px 8px; }
  .chat__new-message-textarea{  padding:12px 12px; }
  .chat__new-message-button{  }
  .chat__new-message-button-svg{ width:40px; height:40px; }
  .chat__logo{ display:flex; }
  .chat__header-close{ display:block; }


  }