.contact-tools { position: fixed; right: max(20px, env(safe-area-inset-right)); top: 56%; z-index: 12; display: flex; flex-direction: column; gap: 8px; width: 52px; }
.contact-tools button { display: flex; align-items: center; justify-content: center; width: 52px; padding: 0; border: 1px solid var(--wc-border); border-radius: var(--wc-radius); box-shadow: var(--wc-surface-shadow); }
.contact-tools .contact-launcher { flex-direction: column; gap: 10px; min-height: 148px; padding-block: 16px; color: var(--wc-white); border-color: var(--wc-blue); background: var(--wc-blue); }
.contact-label-desktop { writing-mode: vertical-rl; text-orientation: upright; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: 3px; }
.contact-tools .contact-label-mobile { display: none; }
.contact-tools .contact-top { flex-direction: column; gap: 2px; height: 52px; color: var(--wc-blue); background: var(--wc-white); }
.contact-top span { font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; }
.contact-tools svg { width: 22px; height: 22px; }
.contact-panel { position: fixed; z-index: 13; inset: auto max(84px, calc(env(safe-area-inset-right) + 64px)) auto auto; width: 336px; max-width: calc(100vw - 104px); max-height: calc(100dvh - 32px); margin: 0; padding: 22px; border: 1px solid var(--wc-surface-border); border-radius: var(--wc-surface-radius); color: var(--wc-text); background: var(--wc-white); box-shadow: 0 12px 40px -12px rgb(24 59 100 / 24%); overflow-y: auto; overscroll-behavior: contain; }
.contact-panel-header { display: flex; align-items: center; gap: 10px; }
.contact-panel-header p { font-size: 12px; }
.contact-panel-header h2 { font-size: 18px; }
.contact-panel-header .icon-wrap { width: 38px; height: 38px; flex-basis: 38px; }
.contact-panel-header .icon-button { margin-left: auto; width: 36px; height: 36px; flex-basis: 36px; border: 0; }
.contact-description { margin-top: 16px; font-size: 13px; }
.contact-wechat { display: flex; align-items: center; justify-content: center; margin-top: 16px; padding: 12px; border: 1px solid var(--wc-divider); border-radius: var(--wc-radius); }
.contact-wechat img { display: block; flex: 0 0 auto; width: 136px; max-width: 100%; height: auto; padding: 8px; box-sizing: content-box; background: #fff; }
.contact-phone-list { display: grid; gap: 8px; margin-top: 12px; }
.contact-phone { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px; border: 1px solid var(--wc-divider); border-radius: var(--wc-radius); color: var(--wc-blue); text-decoration: none; }
.contact-phone span { display: flex; flex: 1; flex-direction: column; }
.contact-phone small { color: var(--wc-muted); font-size: 12px; }
.contact-phone strong { color: var(--wc-heading); font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.contact-phone svg { flex: 0 0 18px; width: 18px; height: 18px; }
.contact-panel-footer { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--wc-divider); }
.contact-panel-footer .text-link { justify-content: space-between; width: 100%; font-size: 13px; }
.contact-panel::backdrop { background: rgb(24 59 100 / 32%); }
body:has(.contact-panel:modal) { overflow: hidden; }
body:has(dialog[open]:not(.contact-panel)) .contact-tools { display: none; }
.contact-tools button, .contact-panel .icon-button { transition: background-color var(--wc-motion-fast) var(--wc-ease-state), border-color var(--wc-motion-fast) var(--wc-ease-state); }
@media (hover: hover) and (pointer: fine) {
  .contact-tools .contact-launcher:hover { border-color: var(--wc-blue-hover); background: var(--wc-blue-hover); }
  .contact-tools .contact-top:hover, .contact-panel .icon-button:hover { background: var(--wc-blue-soft); }
  .contact-phone:hover { border-color: var(--wc-blue); background: var(--wc-blue-soft); }
}
@media (min-width: 761px) and (min-height: 561px) and (max-width: 1439px) {
  body:has(.contact-tools) main { padding-right: 48px; }
}
@media (max-width: 760px), (max-height: 560px) {
  .contact-tools { top: auto; bottom: max(20px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); flex-direction: column-reverse; width: 52px; }
  .contact-tools .contact-launcher { min-height: 56px; padding-block: 7px; gap: 2px; border-radius: 16px; }
  .contact-tools .contact-label-desktop { display: none; }
  .contact-tools .contact-label-mobile { display: block; font-size: 12px; line-height: 1.4; }
  .contact-tools .contact-top { height: 48px; border-radius: 16px; }
  .contact-panel { inset: auto 0 0; width: 100%; max-width: none; max-height: calc(100dvh - 24px); padding: 20px max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); border-radius: 20px 20px 0 0; border-bottom: 0; }
  .contact-panel-header .icon-button { width: 44px; height: 44px; flex-basis: 44px; }
  .contact-wechat { padding: 8px; }
  .contact-wechat img { width: 132px; }
  body:has(.contact-panel:modal) .contact-tools { visibility: hidden; }
  body:has(.contact-tools) .footer { padding-bottom: max(104px, calc(88px + env(safe-area-inset-bottom))); }
}
@media (max-width: 359px) {
  .contact-wechat img { width: 120px; }
}
@media print {
  .contact-tools, .contact-panel { display: none !important; }
  body:has(.contact-tools) main { padding-right: 0; }
}