.site-dock {
    position: fixed;
    top: 50%;
    right: 20px;
    z-index: 40;
    transform: translateY(-50%);
    color: #1a2233;
    --dock-shadow: 0 2px 16px rgba(26, 34, 51, .1), 0 1px 4px rgba(26, 34, 51, .06);
}
.site-dock [hidden] { display: none !important; }
.site-dock__list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-dock__item { position: relative; }
.site-dock__trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5.6px;
    width: 68px;
    min-height: 72px;
    padding: 10px 6px 9px;
    border: 0;
    border-radius: 6px;
    background: #fff;
    box-shadow: var(--dock-shadow);
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .15s ease;
}
.site-dock__trigger:hover { box-shadow: 0 4px 20px rgba(26, 34, 51, .14), 0 2px 6px rgba(26, 34, 51, .08); }
.site-dock__trigger:focus-visible { outline-offset: 2px; }
.site-dock__icon { display: block; flex: none; width: 28px; height: 28px; color: #0d6efd; }
.site-dock__icon--demo { width: 32px; height: 32px; }
.site-dock__icon--wechat { width: 36px; height: 36px; }
.site-dock__label { font-size: 11px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.site-dock__panel {
    position: absolute;
    top: 50%;
    right: 100%;
    min-width: 172px;
    padding: 17px 20px;
    border: 8px solid transparent;
    border-radius: 14px;
    background: #fff;
    background-clip: padding-box;
    filter: drop-shadow(0 2px 8px rgba(26, 34, 51, .14));
    text-align: center;
    transform: translateY(-50%);
}
.site-dock__panel::after { content: ""; position: absolute; top: 50%; right: -8px; border: 8px solid transparent; border-right: 0; border-left-color: #fff; transform: translateY(-50%); }
.site-dock__panel p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; white-space: nowrap; }
.site-dock__phone { font-size: 20px; font-weight: 600; white-space: nowrap; }
.site-dock__qr { display: block; width: 120px; height: 120px; margin: 0 auto; }
#contact-unavailable { width: 240px; }
#contact-unavailable p { margin: 0; white-space: normal; }
#contact-unavailable a { color: #0d6efd; }
.site-dock__noscript { padding: 8px; background: #fff; font-size: 12px; }

@media (max-width: 760px) {
    body:has(.site-dock) { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
    .site-dock { top: auto; right: 0; bottom: 0; left: 0; transform: none; }
    .site-dock__list { flex-direction: row; gap: 0; padding-bottom: env(safe-area-inset-bottom, 0px); background: #fff; box-shadow: 0 -2px 16px rgba(26, 34, 51, .1); }
    .site-dock__item { display: flex; flex: 1; min-width: 0; }
    .site-dock__item + .site-dock__item { border-left: 1px solid rgba(26, 34, 51, .1); }
    .site-dock__item--preview { display: none; }
    .site-dock__trigger { flex-direction: row; gap: 6px; width: 100%; min-height: 52px; padding: 9px 5px; border-radius: 0; box-shadow: none; }
    .site-dock__trigger:hover { background: #f0f6ff; box-shadow: none; }
    .site-dock__trigger:focus-visible { outline-offset: -3px; }
    .site-dock__icon, .site-dock__icon--wechat { width: 22px; height: 22px; }
    .site-dock__label { font-size: 13px; }
    .site-dock__panel { top: auto; right: auto; bottom: 100%; left: 50%; max-width: calc(100vw - 16px); transform: translateX(-50%); }
    .site-dock__panel::after { top: auto; right: auto; bottom: -8px; left: 50%; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; transform: translateX(-50%); }
    #contact-unavailable { right: 0; left: auto; transform: none; }
    #contact-unavailable::after { right: 38px; left: auto; transform: none; }
}