@charset "utf-8";
/* CSS Document */

/*dialog_box*/
.flex-js{display: flex;justify-content: space-between;align-items: center;}
.dialog_box{font-family: "Noto Sans TC", "Manrope", sans-serif;width: 400px;height: 650px;position: fixed;bottom: 30px;right: 15px;border: 1px solid #e0e0e0;background: #FFF;border-radius: 15px;z-index: 510;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); overflow: hidden; }
@media (max-width: 768px){.dialog_box{width: 95%;transform: translateY(50% 50%);right: 10px;}}
.dialog_box .time{color: #9ca3af;font-size: .9rem;}
.dialog_box .head{font-family: "Noto Sans TC", "Manrope", sans-serif;position: sticky;top: 0;height: 50px;display: flex;align-items: center;justify-content: center;font-size: 1.1rem;font-weight: 600;}
.dialog_box .icon,.dialog_box .btn{cursor: pointer;}
.dialog_box .head p{width:100%;overflow:hidden;text-overflow : ellipsis;white-space : nowrap;text-align: center;margin-bottom: 0;}
.dialog_box .head .icon{width: 30px;text-align: center;position: absolute;right: 12px;top: 0px;height: 100%;display: flex;align-items: center;justify-content: center;} 
.dialog_box .main{font-size: .9rem;height: 530px;overflow: auto;border-top: 1px solid #e0e0e0;padding: 10px 15px 12px 15px;position: relative;}
.dialog_box .question{border: 1px solid #e0e0e0;border-radius: 50px;display: flex;gap:8px;align-items: center;padding: 8px;box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);background: #FFF;}
.dialog_box .input-bar{width: 100%;}
.dialog_box .question_div{position: relative; bottom: 5px;left: 0;width: 100%;background: #FFF;padding: 10px;}
.dialog_box .question textarea{background: unset;min-height: 30px;field-sizing: content;resize: none;border: none;outline: none;box-shadow: none;width:calc(100% - 30px);}
.dialog_box .question textarea::placeholder{color: #9ca3af;}
.dialog_box .question textarea::-webkit-input-placeholder {color: #9ca3af;}
.dialog_box .question textarea:-ms-input-placeholder{color: #9ca3af;}
.dialog_box .question_icon{width: 30px;height: 30px;border-radius: 50px;background: #f3f4f6;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.dialog_box .send{width: 35px;height: 35px;border-radius: 50px;background: #0ba998;color: #FFF;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.dialog_box .send i{font-size: 1rem;}
.dialog_box .footer{position: sticky;bottom: 0;height: 30px;text-align: center;padding: 3px 0px;color: #9ca3af;font-size: .9rem;}
.dialog_box .footer img{height: 30px;margin: 0px 5px;}
.dialog_box .dialogloader{display: flex;/*justify-content: center;*/align-items: center;gap: 8px; /* 點點之間的間距 */}
.dialog_box .dialogloader span {width: 10px;height: 10px;background-color: #838887; /* 點點顏色 */border-radius: 50%;display: inline-block;animation: dot-flashing 1.4s infinite ease-in-out both;}
/* 設定時間差，這是動態感的關鍵 */
.dialog_box .dialogloader span:nth-child(1) {animation-delay: -0.32s;}
.dialog_box .dialogloader span:nth-child(2) {
  animation-delay: -0.16s;
}

/* 定義動畫動作：從縮小變大，並改變透明度 */
@keyframes dot-flashing {
  0%, 80%, 100% { 
    transform: scale(0);
    opacity: 0.3;
  } 
  40% { 
    transform: scale(1.0);
    opacity: 1;
  }
}
.dialog_box_icon{position: fixed;width: 60px;height: 60px;border-radius: 50px;background: #0ba998;color: #FFF;bottom: 20px;right: 20px;z-index: 5100;display: flex;align-items: center;justify-content: center;}
.dialog_box_icon img{height: 45px;}
.ask{text-align: right;margin-left: 30px;}
.askbox{background: #f4f4f4;border-radius: 15px;padding: 5px 10px;display: inline-block;}
.answer{margin:10px 30px 10px 0px;}
.answerbox{word-break: break-all;background: #deeaf6;border-radius: 15px;padding: 5px 10px;display: inline-block;}
.hoteltitle{display: flex;align-items: center;margin-bottom: 8px;gap: 10px}
.hoteltitle p{width:calc(100% - 35px);}
.hoteltitle_logo{width: 35px;height: 35px;border-radius: 50px;display: flex;align-items: center;justify-content: center;border: 1px solid #e0e0e0;overflow: hidden;}
.hoteltitle_logo img{height: 30px;}


/* 黑色半透明遮罩 */
.side-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
    display: none; /* 預設隱藏 */
    backdrop-filter: blur(2px); /* 選擇性：增加模糊質感 */
}
.side-overlay1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 110!important;
    display: none; /* 預設隱藏 */
    backdrop-filter: blur(2px); /* 選擇性：增加模糊質感 */
}
/* 滑出式選單 */
.side-menu {
    position: absolute;
    top: 0;
    left: -300px; /* 初始藏在左側 (寬度設為 200px) */
    width: 300px;
    height: 100%;
    background: #fff;
    z-index: 1111;border-radius: 0px 15px 15px 0px;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.side-menu .fa-times.icon{font-size: 1.25rem;}
.log{margin: 10px;}
.log .date{color: #9ca3af;font-size: .9rem;}
.log .loglist{background: #f4f4f4;border-radius: 15px;padding: 8px 15px;font-size: .9rem;display: flex;justify-content: space-between;align-items: center;}
.log:nth-child(2) .loglist{background: #deeaf6;}
.log+.log{margin-top: 8px;}
.language-search{position: relative;}
.language-search i{position: absolute;right: 35px;top: 25px;}
.language-search input{border: none;outline: none;width:calc(100% - 30px);background: #f4f4f4;padding: 10px 15px;border-radius: 15px;margin: 10px;}
.language-footer{position: sticky;bottom: 0;background: #FFF;border-top: 1px solid #e0e0e0;padding: 5px 0px;text-align: center;}
.language-footer button:hover{text-decoration: none;}
.menu-content-head{width: 100%;border-bottom: 1px solid #e0e0e0;text-align: center;padding: 8px 0px 10px 0px;}
.menu-content .dropdown-toggle {background: unset;border: none;color: #333;}
.menu-content .dropdown-toggle::after{content:none;}
.menu-content .dropdown-menu{width: auto!important;min-width: auto!important;font-size: .9rem;right: 0px;left: unset;}
.menu-content .dropdown-item{padding: 5px 15px;}
.menu-content .dropdown-item i{margin-right: 5px;}
.language-menu {
    position: absolute;
    top: 0;
    right: -200px;
    width: 200px;
    height: 100%;
    background: #fff;
    z-index: 11;border-radius:15px 0px 0px 15px;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
}
.language-menu .fa-times.icon{position: absolute;right: 15px;top: 15px;font-size: 1.25rem;}
.written-menu {
    position: absolute;
    left: 0;
    bottom: -550px;
    height: 550px;
    width: 100%;
    background: #fff;
    z-index: 111;border-radius:15px 15px 0px 0px ;
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
}

/* 當激活時的狀態 */
.side-menu.active {left: 0;}
.language-menu.active {right: 0;}
.written-menu.active {bottom: 0;}
.side-overlay.active,.side-overlay1.active{display: block;}
.menu-content-language{padding: 10px;overflow: auto;height:390px;}
.languagelist>li{border: 1px solid #e0e0e0;padding: 15px;border-radius: 15px;cursor: pointer;}
.languagelist>li:hover{box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);background: #f4f4f4;}
.languagelist>li+li{margin-top: 15px;}
.chooselanguage{box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);background: #f4f4f4;padding: 10px 15px;border-radius: 15px;margin: 50px 8px 0px 8px;cursor: pointer;}