@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Gothic:wght@400;700;800&display=swap');

:root {
    --chatbot-font:"Nanum Gothic", "Helvetica Neue", sans-serif;
    --chatbot-primary: #FF6A39;
    --chatbot-primary-hover: #FB612E;
    --chatbot-text-color: #000000;
    --chatbot-header-bg: #ffffff;
    --chatbot-messages-bg: #F2F2F2;
    --chatbot-messages-bot: #ffffff;
    --chatbot-messages-user: #E5FFD1;
    --chatbot-messages-new: #EAFF00;
    --chatbot-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px 4px 6px, rgba(0, 0, 0, 0.15) 0px 8px 30px;
  }
.disabled {
  pointer-events: none; /* Prevents clicking */
  opacity: 0.5; /* Visual cue that it's disabled */
  cursor: not-allowed; /* Changes the cursor to indicate disabled */
}
.btn-chatbot-call{cursor: pointer;}
.chatbot-dim {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1030;}
.chatbot-modal {display: none; font-family: var(--chatbot-font); position: fixed; right: 0px; bottom: 100px; z-index: 20; padding: 0 30px; z-index: 1040;}

.chatbot-content {width: 100%; max-width: 450px; height: 690px; position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--chatbot-shadow);}
.chatbot-close {
    position: absolute;
    right: 97px;
    bottom: -70px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color:#f0f404;
    color: #67718A;
    border-radius: 50px;
    box-shadow: var(--chatbot-shadow);
}

.chatbot-main{background:#fff; font-family: "Jua"; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); overflow: hidden; display: flex; align-items: center; justify-content: center; width: 450px; height: 100%;}
.chatbot-main-area{text-align: center; line-height: 140%;}
.chatbot-main-area span{display: block; width: 120px; margin: 0 auto 50px auto;}
.chatbot-main-area span img{width: 100%;}
.chatbot-main .text{font-family: "Jua"; font-size: 18px; font-weight: 400; line-height: 160%;}

.chatbot-btn-warp{margin-top: 40px;}
.chatbot-btn{ background: #FF6A39; font-size: 22px; font-family: "Jua"; color: #fff !important; padding: 17px 50px 12px 50px; border-radius: 60px; }
.chatbot-btn img{width: 24px; margin-left: 10px; position: relative; top: -4px;}

.chat-container { background:var(--chatbot-messages-bg); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); overflow: hidden; display: flex; flex-direction: column; width: 100%; height: 100%; }

.chat-header { font-family: "Jua"; background:var(--chatbot-header-bg); color: #000; text-align: left; padding: 20px 20px 10px 20px; font-size: 24px; font-weight: 400; display: flex; align-items: center; justify-content: left;}
.chat-header a{display: inline-block; padding:0 13px 0 0; position: relative; top: -2px;}
.chat-messages { flex: 1; padding: 15px; width: 435px; height: 560px; overflow-y: auto; position: relative;}
.chat-message-area{position: relative; min-height: 68px;display: flow-root;}
.timestamp{font-size: 12px; color: #999; margin-top: 5px;clear: both;}
.timestamp.user { text-align: right; margin-right: 55px; }
.timestamp.bot { text-align: left; margin-left: 55px; }
.chat-thumb{position: absolute; top:11px; width: 40px; height: 40px; border-radius: 30px; overflow: hidden;}
.chat-thumb img{width: 100%;}
.chat-thumb.bot{left: 0px;}
.chat-thumb.user{right: 0px;}


.chat-bubble{ padding: 14px 20px; margin: 10px 55px; color: #000000; border-radius: 10px; position: relative; font-size: 14px; min-height: 48px; line-height: 140%; display: inline-block; word-break: keep-all;}
.chat-bubble .empty-line{height: 1rem; display: block; line-height: 5px;}
.chat-bubble.user { background:var(--chatbot-messages-user); float: right; }
.chat-bubble.user::after { content: ""; position: absolute; top: 12px; right: -20px; width: 0; height: 0; border-bottom: 10px solid transparent; border-top: 10px solid transparent; border-left: 15px solid var(--chatbot-messages-user); border-right: 10px solid transparent;}

.chat-bubble.user.clickable{ background-color: var(--chatbot-messages-new); cursor: pointer;}
.chat-bubble.user.clickable:hover{font-weight: 600;}
.chat-bubble.user.clickable::after{border-left: 15px solid var(--chatbot-messages-new);}
.chat-bubble.bot { background:var(--chatbot-messages-bot); float: left;}
.chat-bubble.bot::after {content: ""; position: absolute; top: 12px; left: -20px; width: 0; height: 0; border-bottom: 10px solid transparent; border-top: 10px solid transparent; border-right: 15px solid var(--chatbot-messages-bot); border-left: 10px solid transparent;}
.chat-bubble .chat-about-list{padding-top: 15px; width: 255px;}
.chat-bubble .chat-about-list a{display: block; background: #F3F3F3; color: #180000; font-size: 13px; padding: 12px 10px 12px 15px; border-radius: 10px; margin-bottom: 10px; cursor: pointer;}
.chatbot-assess{padding-left: 55px;}
.chatbot-assess a{cursor: pointer; display: inline-block; width: 20px;}
.chatbot-assess a img{width: 100%;}

.clickable-message {background:#00A444; cursor: pointer; padding: 8px 20px 7px 20px; border-radius: 30px; color: #fff; font-weight: 700; border: 2px solid #00913c; border-bottom-width: 5px;}
.clickable-message:hover{ background: #00A444; }

.chat-input {display: flex; background-color: #ffffff; padding: 10px; }
.chat-input input {flex: 1; padding: 5px 15px; border:none; outline: none; font-size: 14px; border-radius: 5px; background-color:#F3F3F3;}
.chat-input button {font-family: "Jua"; font-weight: 200; letter-spacing: 2px; font-size: 16px; padding: 9px 15px 9px 15px; background-color: var(--chatbot-primary); color: #fff; border: none; cursor: pointer; border-radius: 5px; margin-left: 13px; }
.chat-input button span{width: 18px; display: inline-block; position: relative; top: 3px; margin-left: 6px;}
.chat-input button span img{width: 100%;}
.chat-input button:hover { background:var(--chatbot-primary-hover);}

.chat-message-loader-area{display: flex; align-items: center; justify-content: center; padding: 10px 20px; width: 150px;}
.chat-message-loader {
    width: 16px;
    height: 16px;
    position: relative;
    left: -32px;
    border-radius: 50%;
    color: #FFDBCE;
    background:  #FFDBCE;
    box-shadow: 32px 0 , -32px 0 ,  64px 0;
  }
  
  .chat-message-loader::after {
    content: '';
    position: absolute;
    left: -32px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 10px;
    background:var(--chatbot-primary);
    animation: chat-move 3s linear infinite alternate;
  }
  
  @keyframes chat-move {
    0% , 5%{
      left: -32px;
      width: 16px;
    }
    15% , 20%{
      left: -32px;
      width: 48px;
    }
    30% , 35%{
      left: 0px;
      width: 16px;
    }
    45% , 50%{
      left: 0px;
      width: 48px;
    }
    60% , 65%{
      left: 32px;
      width: 16px;
    }
  
    75% , 80% {
      left: 32px;
      width: 48px;
    }
    95%, 100% {
      left: 64px;
      width: 16px;
    }
}