@charset "UTF-8";
.chatbot-header { background: url('https://chatbot.ecbeing.io/data/design/chatbot-icon-b.png') center left 15px / 32px auto no-repeat; }
.chatbot-header { background-color: #ffffff; }
.chatbot-title, .chatbot-title * { color: #363841; }
.chatbot-disclaimer { color: #363841; }
@media screen and (max-width: 800px) {
.chatbot-header { background-position: top 8px center; }
}
.chatbot-message-bot-icon { background: url('https://chatbot.ecbeing.io/data/design/chatbot-icon-w.png') center center / 32px auto no-repeat; }
.feedback-button.good { background: url('https://chatbot.ecbeing.io/data/design/feedback-good.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }
.feedback-button.bad { background: url('https://chatbot.ecbeing.io/data/design/feedback-bad.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }
.chatbot-message-bot { background-color: #b5eef4; }
.chatbot-message-bot { color: #222222; }
.chatbot-message-bot.message-error { background-color: #ffffff; }
.chatbot-message-user { background-color: #f5f5f5; }
.chatbot-message-user { color: #222222; }
.chatbot-answer-reference-url a { color: #009298; }
.chatbot-content { background-color: #ffffff; }
.send-chat { background: url('https://chatbot.ecbeing.io/data/design/chatbot-send-black.png') center center / 20px auto no-repeat; }
.chatbot-footer { background-color: #f5f5f5; }
@media screen and (min-width: 801px) {
.chatbot-container { width: 150px; max-width: 400px; transition: transform 0.5s, width 0.5s, background 0.5s, max-height 0.2s; transform: translateY(calc(100% - 72px)); overflow-x: hidden;}
.chatbot-container.is-open { width: 400px; overflow-x: hidden;}
.chatbot-container .chatbot-frame { width: 400px; transition: none; }
.chatbot-container:not(.is-open) .chatbot-header { align-items: center; padding: 47px 15px 8px; font-size: 13px; font-weight: bold; line-height: 17px; background-position: top 8px center; }
.chatbot-sp-only { display: block; }
.is-open .chatbot-sp-only { display: none; }
.chatbot-pc-only { display: none; }
.is-open .chatbot-pc-only { display: block; }
}
@media screen and (max-width: 800px) {
.chatbot-container { width: 85px; transform: translateY(calc(100% - 67px)); }
.chatbot-container:not(.is-open) .chatbot-header { padding: 42px 8px 8px; background-position: top 8px center; }
.close-chatbot { display: none; }
.chatbot-container.is-open .close-chatbot { display: block; }
.chatbot-container.is-open .chatbot-title{ display: block; }
}
.chatbot-container { overflow: visible; }
.hide-chatbot { position: absolute; top: -20px; right: -20px; background: #DEDEDE; border: none; border-radius: 50%; box-shadow: 0 0 6px rgba(0, 0, 0, 0.2); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; }
.hide-chatbot-icon { width: 20px; height: 20px; background: url('https://chatbot.ecbeing.io/data/design/chatbot-hide.svg') center center / 23px auto no-repeat; }
.chatbot-header { border-radius: 8px 8px 0 0; }
@media screen and (max-width: 800px) {
.hide-chatbot { right: -10px; }
.chatbot-header { border-radius: 5px 5px 0 0; }
.chatbot-container .chatbot-frame { transform: scale(0.5); transition: inherit; transform-origin: bottom right; }
.chatbot-container.is-open .chatbot-frame { transform: scale(1.0); }
}
@media screen and (min-width: 801px) {
.chatbot-container .chatbot-frame { transform: scale(0.5); transition: inherit; transform-origin: bottom right; }
.chatbot-container.is-open .chatbot-frame { transform: scale(1.0); }
}
@media screen and (max-width: 800px) {
    .chatbot-container {
      bottom: env(safe-area-inset-bottom);
      transform: translateY(calc(100% - 72px));
      width: 120px;
      max-height: 70vh;
      transition: transform 0.5s, width 0.5s, background 0.5s, max-height 0.2s;
    }
  
    .chatbot-container.is-open {
      width: calc(100vw - 20px);
    }
  
    .chatbot-container.is-footer-nav {
      margin-bottom: 53px;
      z-index: 1000;
    }
  
    .chatbot-container.is-cart-fixed {
      bottom: calc(59px + env(safe-area-inset-bottom));
      max-height: calc(70vh - 59px);
    }
    .chatbot-container .chatbot-frame {
        width: calc(100vw - 20px);
        transition: none;
      }
    
      .chatbot-container .chatbot-content {
        max-height: calc(70vh - 140px);
        transition: none;
      }
    
      .chatbot-container.is-cart-fixed .chatbot-content {
        max-height: calc(70vh - 199px);
      }
    
    .chatbot-contact-url a {
      font-size: 11px;
      color: #009298;
      word-wrap: break-word;
    }

}