.chat-fab {
  position:fixed;
  right:20px;
  bottom:var(--chat-fab-bottom, 28px);
  z-index:220;
  width:auto;
  min-width:112px;
  height:50px;
  padding:0 16px 0 8px;
  gap:8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:#12243A;
  color:#fff;
  box-shadow:0 5px 20px rgba(18,36,58,.34);
  align-items:center;
  justify-content:center;
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  text-decoration:none;
  cursor:pointer;
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, opacity .2s ease;
  will-change:transform;
}

.chat-fab.visible { display:flex; }
.chat-fab[hidden] { display:none !important; }
.chat-fab:hover {
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 26px rgba(18,36,58,.42);
}
.chat-fab:focus-visible {
  outline:3px solid rgba(18,36,58,.25);
  outline-offset:3px;
}
.chat-fab.is-scroll-collapsed,
.chat-fab.is-scroll-collapsed:hover {
  transform:translateX(calc(100% - 12px));
  box-shadow:0 4px 14px rgba(18,36,58,.26);
}
.chat-fab-icon {
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:#fff;
  color:#12243A;
  font-family:"Noto Serif TC",serif;
  font-size:11px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.03em;
}
.chat-fab-label {
  color:#fff;
  font-size:14px;
  font-weight:800;
  line-height:1;
  letter-spacing:.03em;
  white-space:nowrap;
}
.chat-fab-badge {
  position:absolute;
  top:-2px;
  right:-2px;
  width:18px;
  height:18px;
  border:2px solid #fff;
  border-radius:50%;
  background:#E53935;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
}
.chat-fab-badge.hidden { display:none; }

@media (max-width:540px) {
  .chat-fab {
    right:calc(16px + env(safe-area-inset-right));
    bottom:var(--chat-fab-bottom, calc(22px + env(safe-area-inset-bottom)));
    min-width:108px;
    height:48px;
  }
  .chat-fab-icon { width:32px; height:32px; font-size:10px; }
  .chat-fab.is-scroll-collapsed,
  .chat-fab.is-scroll-collapsed:hover { transform:translateX(calc(100% - 10px)); }
}

@media (prefers-reduced-motion:reduce) {
  .chat-fab { transition:box-shadow .2s ease, opacity .2s ease; }
}