/* =========================================================
   EXCHANGE PRO - Chat Widget (v1)
   - Only contains chat widget styles to avoid interfering with site
   - Uses safe-area + bottom-nav offset
========================================================= */

#chatWidgetRoot{ position:relative; z-index:2000; }

/* Floating button */
#chatWidgetRoot .support-fab{
  position: fixed;
  right: 14px;
  /* 貼近右下角，並自動避開底部導覽列 + iPhone 安全區 */
  bottom: calc(18px + env(safe-area-inset-bottom, 0px) + 64px);
  z-index: 8000;

  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;

  background: rgba(10,18,32,.92);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  letter-spacing: .3px;

  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
#chatWidgetRoot .support-fab:active{ transform: translateY(1px); }

/* ✅ 避免浮球蓋住其它底部彈窗的「關閉/收起」按鈕
   只要 body 被標記為 modal-open，就暫時隱藏站內客服浮球 */
body.modal-open #chatWidgetRoot .support-fab{
  display:none !important;
}

/* Modal panel (centered, keeps away from header & bottom-nav) */
#chatWidgetRoot .chat-modal{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);

  top: 72px;
  bottom: calc(88px + env(safe-area-inset-bottom));

  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - 72px - 88px - env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;

  background: rgba(10,18,32,.96);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow: hidden;

  box-shadow: 0 20px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  z-index: 8500;
}
#chatWidgetRoot .chat-modal.hidden{ display:none; }

/* Header */
#chatWidgetRoot .chat-hd{
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;

  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#chatWidgetRoot .chat-title{
  display:flex;
  align-items:center;
  gap:8px;

  font-weight: 900;
  letter-spacing: .5px;
  color: rgba(255,255,255,.92);
  user-select: none;
}
#chatWidgetRoot .chat-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;

  color: rgba(255,255,255,.88);
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.22);
}
#chatWidgetRoot .chat-close{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);

  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.90);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}
#chatWidgetRoot .chat-close:hover{ background: rgba(255,255,255,.08); }

/* Body */
#chatWidgetRoot .chat-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}
#chatWidgetRoot .chat-body::-webkit-scrollbar{ width: 6px; }
#chatWidgetRoot .chat-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 99px;
}

/* Message bubbles */
#chatWidgetRoot .chat-bubble{
  align-self: flex-start;
  max-width: 84%;
  padding: 8px 10px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
  margin: 8px 0;
  word-break: break-word;
  border: 1px solid rgba(255,255,255,.08);
  display: inline-block;
  min-width: 0;
}
#chatWidgetRoot .chat-bubble.cs{
  background: rgba(59,130,246,.14);
  color: rgba(255,255,255,.92);
}
#chatWidgetRoot .chat-bubble.me{
  align-self: flex-end;
  margin-left: auto;
  background: rgba(34,197,94,.14);
  color: rgba(255,255,255,.92);
}

/* Quick reply buttons (if you render them as buttons inside body) */
#chatWidgetRoot .chat-quick{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin: 10px 0;
}
#chatWidgetRoot .chat-quick button{
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(34,197,94,.22);
  background: rgba(34,197,94,.12);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  cursor:pointer;
}
#chatWidgetRoot .chat-quick button:active{ transform: translateY(1px); }

/* Footer input row */
#chatWidgetRoot .chat-ft{
  display: flex;
  gap: 10px;
  padding: 12px;

  background: rgba(255,255,255,.04);
  border-top: 1px solid rgba(255,255,255,.08);
}
#chatWidgetRoot .chat-input{
  flex: 1;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: #fff;
  padding: 0 12px;
  font-size: 16px; /* iOS 避免 focus 放大 */
  outline: none;
}
#chatWidgetRoot .chat-input::placeholder{ color: rgba(255,255,255,.45); }

#chatWidgetRoot .chat-send{
  height: 44px;
  min-width: 84px;
  border-radius: 12px;
  border: none;

  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
#chatWidgetRoot .chat-send:active{ transform: translateY(1px); }

/* Small screens / short height */
@media (max-height: 520px){
  #chatWidgetRoot .chat-modal{
    top: 12px;
    bottom: 12px;
    max-height: calc(100vh - 24px);
  }
  #chatWidgetRoot .support-fab{
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 520px){
  .chat-modal{ left: 10px; right: 10px; width: auto; height: min(78vh, 640px); bottom: calc(var(--bottom-nav, 88px) + 10px); }
}

.chat-hd-actions{ display:flex; align-items:center; gap:8px; }
.chat-clear{ background: rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.15); border-radius: 10px; padding:6px 10px; cursor:pointer; font-size:12px; }
.chat-clear:hover{ background: rgba(255,255,255,.16); }

/* --- Patch: ensure close button clickable and widget on top --- */
#chatWidgetRoot{ z-index: 8500; }
.chat-modal, .chat-fab{ pointer-events: auto; }
.chat-modal-header{ position: relative; z-index: 2; }
.chat-close{ cursor: pointer; pointer-events: auto; z-index: 3; }