/* 右下角联系方式（Telegram 首选 + 备用微信二维码）。规则取自 style.css 的 .contact-float，变量在这里单独给定，避免和首页主题变量撞名。 */
.contact-float{--ink:#182333;--ink-2:#2c3a4d;--muted:#526174;--on-dark:#fff;--line:#e3e8ef;--line-strong:#cfd7e3;--line-ui:#8996a8;--green:#0865d2;--green-deep:#0756b4;--paper-deep:#edf0f7;--paper-soft:#f6f8fb;--radius-lg:16px;--ease:cubic-bezier(.22,.61,.36,1);--sans:inherit;box-sizing:border-box}
.contact-float *,.contact-float *::before,.contact-float *::after{box-sizing:border-box}
.contact-float a{text-decoration:none}
/* ===== 悬浮联系组件 .contact-float（上：Telegram 首选、实心主色胶囊 · 下：备用微信，半透明白底弱化） =====
   标记可原样复制到任意页面；JS 见 app.js 末尾。
   DOM 顺序：Telegram 链接 → 微信按钮 → 微信模态（.contact-float__modal，默认 hidden）。
   两颗按钮竖向排列、右对齐；容器就是两颗按钮的包围盒（JS 防遮挡用它算重叠）：
     桌面：right 22 / bottom 22，微信 36 高 + 间距 14 → Telegram 底边离视口底 72px。
     手机：right 16 / bottom 16，居中对齐：Telegram 56 圆、微信 40 圆（右侧留白 24）、Telegram 底边 64px。
   --cf-offset 由 JS 写入：页面若有底部固定下单条，组件整体上移避让。 */
.contact-float {
  --cf-offset: 0px;
  position: fixed; z-index: 40; /* 低于 .site-header(50) 及手机导航菜单(49)，远低于下单确认弹窗(1000) */
  right: calc(22px + env(safe-area-inset-right, 0px));
  bottom: calc(22px + var(--cf-offset) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  transition: opacity .25s var(--ease), visibility 0s linear 0s;
}
/* 微信模态打开时整组提到页面内容与页头之上（仍低于下单确认弹窗 1000） */
.contact-float.is-open { z-index: 900; }
/* 与下单按钮重叠 / 下单弹窗打开期间：淡出且不可点 */
.contact-float.is-hidden,
.sg-modal-open .contact-float {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), visibility 0s linear .2s;
}
.contact-float__btn, .contact-float__btn:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px 0 13px; margin: 0; border: 1px solid transparent; border-radius: 999px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .04em; line-height: 1; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-float__btn svg { width: 20px; height: 20px; flex: none; }
.contact-float__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Telegram：首选，最醒目，实心松绿胶囊 */
.contact-float__btn--tg, .contact-float__btn--tg:visited {
  height: 54px; padding: 0 22px 0 16px;
  font-size: 16px; font-weight: 600;
  background: var(--green); border-color: var(--green); color: var(--on-dark);
  box-shadow: 0 1px 2px rgba(22, 43, 69, .08), 0 10px 22px -8px rgba(7, 86, 180, .5);
}
.contact-float__btn--tg svg { width: 22px; height: 22px; }
.contact-float__btn--tg:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--on-dark); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(22, 43, 69, .1), 0 14px 26px -8px rgba(7, 86, 180, .55); }
.contact-float__btn--tg:active { background: var(--ink); border-color: var(--ink); transform: translateY(0); }
/* 微信：备用，小胶囊、半透明白底 + 细描边、muted 文字 */
.contact-float__btn--wechat {
  height: 36px; padding: 0 14px 0 11px; gap: 6px;
  font-size: 13px; font-weight: 500; letter-spacing: .02em;
  background: rgba(255, 255, 255, .92); border-color: var(--line-strong); color: var(--muted);
  box-shadow: 0 1px 2px rgba(22, 43, 69, .04), 0 4px 10px -6px rgba(22, 43, 69, .12);
}
.contact-float__btn--wechat svg { width: 17px; height: 17px; opacity: .85; }
.contact-float__btn--wechat:hover,
.contact-float__btn--wechat[aria-expanded="true"] { background: #fff; border-color: var(--line-ui); color: var(--ink); }
.contact-float__btn--wechat:active { background: var(--paper-soft); }

/* 微信模态：半透明深色遮罩铺满视口，白色卡片居中。默认 hidden，JS 打开时去掉 hidden 并锁定页面滚动 */
.contact-float__modal {
  position: fixed; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(22, 43, 69, .5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: cf-modal-in .18s var(--ease) both;
}
.contact-float__modal[hidden] { display: none; }
.contact-float__dialog {
  position: relative; box-sizing: border-box;
  width: 320px; max-width: 100%; padding: 28px 28px 18px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; /* 横屏矮视口时卡片内滚动 */
  background: #fff; color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 6px rgba(22, 43, 69, .1), 0 28px 60px -16px rgba(22, 43, 69, .45);
  text-align: center;
  animation: cf-dialog-in .22s var(--ease) both;
}
.contact-float__dialog::before { /* 左上绿色短线，呼应下单弹窗 */
  content: ""; position: absolute; top: 0; left: 28px; width: 36px; height: 2px;
  background: var(--green); border-radius: 0 0 2px 2px;
}
@keyframes cf-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cf-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.contact-float__close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: -4px -6px -4px 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.contact-float__close svg { width: 16px; height: 16px; }
.contact-float__close:hover { background: var(--paper-deep); color: var(--ink); }
.contact-float__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.contact-float__dialog .contact-float__close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; margin: 0; }
.contact-float__dialog .contact-float__close svg { width: 18px; height: 18px; }
.contact-float__dialog picture { display: block; }
.contact-float__dialog img {
  display: block; width: 220px; height: 220px; margin: 0 auto; padding: 6px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.contact-float__title { font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink-2); }
.contact-float__dialog .contact-float__title { display: block; margin: 16px 0 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.contact-float__note { margin: 8px 0 0; font-size: 12px; line-height: 1.55; text-align: center; color: var(--muted); }
.contact-float__dialog .contact-float__note { margin-top: 6px; font-size: 13px; }
.contact-float__note a, .contact-float__note a:visited { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.contact-float__note a:hover { color: var(--green-deep); }

/* 页脚底部栏为组件留位（组件高 54 + 14 + 36 = 104px + 下边距 22px） */
.footer-bar .wrap { padding-bottom: calc(18px + 118px); }

@media (max-width: 640px) {
  .contact-float {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + var(--cf-offset) + env(safe-area-inset-bottom, 0px));
    align-items: center; gap: 8px; /* 两圆钮中心对齐；微信钮右侧留白 = (56-40)/2 + 16 = 24px */
  }
  .contact-float .contact-float__btn { padding: 0; gap: 0; }
  .contact-float .contact-float__btn--tg { width: 56px; height: 56px; }      /* Telegram：大圆钮，底边离视口底 16+40+8 = 64px */
  .contact-float .contact-float__btn--wechat { width: 40px; height: 40px; }  /* 备用微信：小圆钮 */
  .contact-float__btn--tg svg { width: 26px; height: 26px; }
  .contact-float__btn--wechat svg { width: 19px; height: 19px; }
  .contact-float__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* 文字视觉隐藏，仍可被读屏读到 */
  .contact-float__modal { padding: 16px; }
  .contact-float__dialog { width: min(320px, 100%); }
  .footer-bar .wrap { padding-bottom: calc(18px + 120px + env(safe-area-inset-bottom, 0px)); } /* 56 + 8 + 40 圆钮 + 下边距 16 */
}
@media (prefers-reduced-motion: reduce) {
  .contact-float, .contact-float__btn, .contact-float__close { transition: none; }
  .contact-float__modal, .contact-float__dialog { animation: none; }
  .contact-float__btn:hover, .contact-float__btn:active { transform: none; }
}

/* ---------- 2026-11-11 联系方式改版：毛玻璃小面板，Telegram / 微信各一行，品牌色圆形图标 ----------
   毛玻璃画在 ::before 上，不放在容器本身：容器一旦有 backdrop-filter，里面 fixed 定位的二维码弹窗会被它框住。 */
.contact-float { gap: 2px; padding: 6px; align-items: stretch; border-radius: 20px; }
.contact-float::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(22, 43, 69, .12);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 12px 32px -12px rgba(22, 43, 69, .32), 0 1px 2px rgba(22, 43, 69, .06);
}
.contact-float .contact-float__btn, .contact-float .contact-float__btn:visited {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  width: auto; height: auto; min-height: 0; padding: 6px 14px 6px 6px;
  border: 0; border-radius: 14px; background: transparent; box-shadow: none; transform: none;
  color: #182333; font-size: 13.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; text-align: left; text-decoration: none; cursor: pointer;
}
.contact-float .contact-float__btn:hover, .contact-float .contact-float__btn:active,
.contact-float .contact-float__btn--wechat[aria-expanded="true"] { background: rgba(22, 43, 69, .07); border: 0; color: #182333; transform: none; }
.contact-float .contact-float__btn:focus-visible { outline: 2px solid #0865d2; outline-offset: 1px; }
.contact-float .contact-float__btn svg { box-sizing: border-box; flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 50%; color: #fff; opacity: 1; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.contact-float .contact-float__btn:hover svg { transform: scale(1.08); }
.contact-float .contact-float__btn--tg svg { background: linear-gradient(180deg, #3bbcf6, #1c93d2); box-shadow: 0 4px 10px -4px rgba(28, 147, 210, .8); }
.contact-float .contact-float__btn--wechat svg { background: linear-gradient(180deg, #2bd46f, #07b457); box-shadow: 0 4px 10px -4px rgba(7, 180, 87, .8); }
.contact-float .contact-float__btn span { display: block; }
.contact-float .contact-float__btn span::after { display: block; margin-top: 1px; font-size: 11px; font-weight: 400; color: #657386; }
.contact-float .contact-float__btn--tg span::after { content: "@singatao · 首选"; }
.contact-float .contact-float__btn--wechat span::after { content: "点开看二维码"; }
@media (max-width: 640px) {
  .contact-float { padding: 5px; gap: 4px; border-radius: 999px; align-items: center; }
  .contact-float .contact-float__btn.contact-float__btn--tg, .contact-float .contact-float__btn.contact-float__btn--wechat { width: auto; height: auto; padding: 0; border-radius: 50%; }
  .contact-float .contact-float__btn svg { width: 42px; height: 42px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { .contact-float .contact-float__btn svg { transition: none; } }
/* 小字写在样式里，翻译脚本改不到：非中文时 Telegram 只留账号，微信不显示小字 */
html:not([lang^="zh"]) .contact-float .contact-float__btn--tg span::after { content: "@singatao"; }
html:not([lang^="zh"]) .contact-float .contact-float__btn--wechat span::after { content: none; }