#xyCustomerChat{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:2147482000;
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC",sans-serif
}

#xyChatBtn{
  height:54px;
  padding:0 19px;
  border:0;
  border-radius:999px;
  background:#c96e8e;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.4px;
  box-shadow:0 10px 28px rgba(143,67,94,.25);
  cursor:pointer;
  white-space:nowrap;
  position:relative!important
}

.xyChatBtnHeart{
  font-size:18px;
  line-height:1
}

.xyChatBtnText{
  font-size:14px;
  line-height:1
}

#xyChatBox{
  display:none;
  position:absolute;
  right:0;
  bottom:70px;
  width:350px;
  max-width:calc(100vw - 28px);
  height:500px;
  max-height:70vh;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #efd5de;
  border-radius:22px;
  background:#fff;
  box-shadow:0 20px 55px rgba(76,42,54,.22)
}

.xyChatHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 16px;
  background:#fff2f6;
  color:#87475e
}

.xyChatHead b{
  display:block;
  font-size:15px
}

.xyChatHead small{
  display:block;
  margin-top:3px;
  color:#9a7c87
}

.xyChatHead button{
  border:0;
  background:#fff;
  width:32px;
  height:32px;
  border-radius:50%;
  font-size:20px;
  color:#9d536d;
  cursor:pointer
}

#xyChatMsgs{
  flex:1;
  overflow:auto;
  padding:14px;
  background:#fffafb
}

.xyChatEmpty{
  text-align:center;
  color:#a28c94;
  font-size:12px;
  line-height:1.7;
  padding:35px 15px
}

.xyChatRow{
  display:flex;
  margin:8px 0
}

.xyChatRow>div{
  max-width:78%;
  padding:10px 12px;
  border-radius:15px;
  font-size:13px;
  line-height:1.5;
  word-break:break-word
}

.xyChatRow.visitor{
  justify-content:flex-end
}

.xyChatRow.visitor>div{
  background:#d87999;
  color:#fff
}

.xyChatRow.admin{
  justify-content:flex-start
}

.xyChatRow.admin>div{
  background:#f4e8ec;
  color:#624e55
}

.xyChatInput{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px;
  border-top:1px solid #f0dce3;
  background:#fff
}

.xyChatInput input{
  flex:1;
  min-width:0;
  height:42px;
  padding:0 11px;
  border:1px solid #ead5dd;
  border-radius:13px;
  outline:0;
  box-sizing:border-box
}

.xyChatInput #xyChatSend{
  width:58px;
  height:42px;
  flex:0 0 58px;
  border:0;
  border-radius:13px;
  background:#ce7392;
  color:#fff;
  font-weight:700;
  cursor:pointer
}

.xyMsgImage{
  display:block;
  max-width:220px;
  max-height:260px;
  border-radius:10px;
  cursor:zoom-in;
  object-fit:cover
}

.xyMsgText+.xyMsgImage{
  margin-top:7px
}

.xyImagePreview{
  display:none;
  padding:8px 11px 0;
  border-top:1px solid #f0dce3;
  background:#fff
}

.xyImagePreview:not(:empty){
  display:block
}

.xyPreviewBox{
  position:relative;
  display:inline-block
}

.xyPreviewBox img{
  display:block;
  max-width:90px;
  max-height:90px;
  border-radius:10px;
  object-fit:cover
}

.xyPreviewBox button{
  position:absolute;
  right:-7px;
  top:-7px;
  width:22px;
  height:22px;
  border:0;
  border-radius:50%;
  background:#7e5966;
  color:#fff;
  cursor:pointer
}

.xyChatInput .xyAttach{
  width:42px;
  height:42px;
  flex:0 0 42px;
  padding:0;
  border:0;
  border-radius:13px;
  background:#f4e8ec;
  color:#9d536d;
  font-size:22px;
  line-height:42px;
  font-weight:400;
  cursor:pointer
}

/* 未讀數字 */

.xyChatBadge{
  display:none;
  position:absolute;
  right:-5px;
  top:-7px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  background:#b94768;
  color:#fff;
  border:2px solid #fff;
  font-size:10px;
  font-weight:700;
  line-height:16px;
  text-align:center;
  box-sizing:border-box
}

.xyChatBadge.show{
  display:block
}

/* 訊息時間 */

.xyMsgTime{
  margin-top:5px;
  font-size:9px;
  line-height:1;
  opacity:.65;
  text-align:right;
  white-space:nowrap
}

/* 小韻回覆提示 */

.xyChatToast{
  position:absolute;
  right:0;
  bottom:68px;
  max-width:260px;
  padding:10px 13px;
  border-radius:14px;
  background:#754657;
  color:#fff;
  font-size:12px;
  line-height:1.45;
  box-shadow:0 10px 28px rgba(80,50,60,.22);
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:.2s;
  white-space:nowrap
}

.xyChatToast.show{
  opacity:1;
  transform:none
}

/* 新增：收到未讀訊息時，加強右下角按鈕 */

#xyChatBtn.xyHasUnread{
  transform:translateY(-2px);
  box-shadow:
    0 12px 34px rgba(143,67,94,.38),
    0 0 0 4px rgba(201,110,142,.14);
  transition:
    transform .2s ease,
    box-shadow .2s ease
}

#xyChatBtn.xyHasUnread .xyChatBtnText{
  font-weight:800
}

#xyChatBtn.xyHasUnread .xyChatBtnHeart{
  transform:scale(1.12)
}

/* 手機版 */

@media(max-width:600px){

  #xyCustomerChat{
    right:14px;
    bottom:14px
  }

  #xyChatBtn{
    height:50px;
    padding:0 16px;
    gap:6px
  }

  .xyChatBtnHeart{
    font-size:17px
  }

  .xyChatBtnText{
    font-size:13px
  }

  #xyChatBox{
    position:fixed;
    left:10px;
    right:10px;
    bottom:76px;
    width:auto;
    height:68vh;
    max-height:560px
  }

  .xyMsgImage{
    max-width:190px;
    max-height:240px
  }

  .xyChatToast{
    position:fixed;
    right:14px;
    bottom:72px;
    max-width:calc(100vw - 28px)
  }
}