/* ============================================================
   twbyte · Telegram 悬浮客服
   位置：视口右侧、垂直居中、贴边悬挂
   被 index.html / layout_default / layout_public 共同引用
   ============================================================ */
.tb-support{
  position:fixed;
  top:50%;
  right:0;
  transform:translateY(-50%);
  z-index:9990;
  display:flex;
  align-items:center;
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.tb-support *,
.tb-support *::before,
.tb-support *::after{box-sizing:border-box}

/* ---------- 贴边入口 ---------- */
.tb-support-fab{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:58px;
  min-height:96px;
  padding:14px 6px 13px;
  border:0;
  border-radius:14px 0 0 14px;
  background:linear-gradient(165deg,#3AB8F3 0%,#229EE0 52%,#1483C6 100%);
  color:#fff;
  cursor:pointer;
  box-shadow:-6px 8px 26px rgba(0,52,120,.26);
  transition:box-shadow .2s ease,filter .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.tb-support-fab:hover{box-shadow:-8px 10px 32px rgba(0,52,120,.36);filter:brightness(1.04)}
.tb-support-fab:active{filter:brightness(.96)}
.tb-support-fab:focus-visible{outline:3px solid #9FD4FF;outline-offset:2px}
.tb-support-fab svg{display:block;width:27px;height:27px;fill:currentColor;
  filter:drop-shadow(0 1px 1px rgba(0,20,60,.14))}
.tb-support-fab-label{
  max-width:46px;
  font-size:12px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:2px;
  text-align:center;
  writing-mode:vertical-rl; /* 中文侧边竖排，避免折行参差 */
}
/* 英文短标签横排；首页用 body.lang-en，门户用 html[lang^=en] */
body.lang-en .tb-support-fab-label,
html[lang^="en"] .tb-support-fab-label{
  writing-mode:horizontal-tb;
  font-size:11px;
  letter-spacing:0;
}

/* ---------- 展开卡片 ---------- */
.tb-support-panel{
  position:absolute;
  right:70px;
  top:50%;
  width:272px;
  padding:18px;
  background:#fff;
  border:1px solid #E6EDF7;
  border-radius:16px;
  box-shadow:0 18px 48px rgba(0,23,69,.18),0 2px 8px rgba(0,23,69,.06);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(10px,-50%) scale(.97);
  transform-origin:right center;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.tb-support.is-open .tb-support-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(0,-50%) scale(1);
}
/* 透明桥：让指针从入口移到卡片时不触发 mouseleave */
.tb-support-panel::before{
  content:"";
  position:absolute;
  right:-16px;
  top:0;
  bottom:0;
  width:16px;
  background:transparent;
}
.tb-support-panel::after{
  content:"";
  position:absolute;
  right:-6px;
  top:50%;
  width:11px;
  height:11px;
  background:#fff;
  border-right:1px solid #E6EDF7;
  border-top:1px solid #E6EDF7;
  transform:translateY(-50%) rotate(45deg);
}
.tb-support-close{
  position:absolute;
  top:9px;
  right:9px;
  width:26px;
  height:26px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#8493A8;
  font-size:19px;
  line-height:1;
  cursor:pointer;
}
.tb-support-close:hover{background:#F2F6FC;color:#0A1628}
.tb-support-close:focus-visible{outline:2px solid #9FD4FF;outline-offset:1px}

.tb-support-head{display:flex;align-items:center;gap:11px;margin-bottom:14px;padding-right:22px}
.tb-support-mark{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:12px;
  background:linear-gradient(160deg,#3AB8F3,#1483C6);
  color:#fff;
}
.tb-support-mark svg{width:22px;height:22px;fill:currentColor}
.tb-support-title{font-size:15px;font-weight:700;line-height:1.3;color:#0A1628}
.tb-support-sub{margin-top:3px;font-size:11.5px;line-height:1.4;color:#7A8799}

.tb-support-id{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  margin-bottom:12px;
  background:#F4F8FE;
  border:1px solid #E6EFFB;
  border-radius:10px;
}
.tb-support-id-label{flex:none;font-size:11px;color:#7A8799}
.tb-support-id-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 0;
  border:0;
  background:transparent;
  color:#014DB2;
  font-family:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
}
.tb-support-id-btn:hover{text-decoration:underline}
.tb-support-id-btn:focus-visible{outline:2px solid #9FD4FF;outline-offset:2px}
.tb-support-id-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}

.tb-support-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:42px;
  border-radius:10px;
  background:#014DB2;
  color:#fff;
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  transition:background .18s ease;
}
.tb-support-cta:hover,.tb-support-cta:focus{background:#003E92;color:#fff;text-decoration:none}
.tb-support-cta:focus-visible{outline:3px solid #9FD4FF;outline-offset:2px}
.tb-support-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

.tb-support-foot{margin-top:10px;font-size:11px;line-height:1.5;color:#98A4B5;text-align:center}

/* ---------- 深色模式（客户中心可切换） ---------- */
[data-bs-theme="dark"] .tb-support-panel{background:#151C2A;border-color:#2A364A}
[data-bs-theme="dark"] .tb-support-panel::after{background:#151C2A;border-color:#2A364A}
[data-bs-theme="dark"] .tb-support-title{color:#EDF2FA}
[data-bs-theme="dark"] .tb-support-sub,
[data-bs-theme="dark"] .tb-support-id-label{color:#9AA8BC}
[data-bs-theme="dark"] .tb-support-id{background:#1B2536;border-color:#2A364A}
[data-bs-theme="dark"] .tb-support-close:hover{background:#243044;color:#EDF2FA}

/* ---------- 窄屏 / 无障碍 ---------- */
@media (max-width:640px){
  .tb-support-fab{width:50px;min-height:84px;padding:12px 5px;gap:5px;border-radius:12px 0 0 12px}
  .tb-support-fab svg{width:24px;height:24px}
  .tb-support-fab-label{font-size:11px;letter-spacing:0}
  .tb-support-panel{right:58px;width:min(272px,calc(100vw - 74px));padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .tb-support-panel,.tb-support-fab,.tb-support-cta{transition:none}
}
@media print{.tb-support{display:none!important}}