/**
 * 悬浮社媒（左侧贴边）—— 全站共享 chrome 部件皮肤。
 * 只消费 Theme Token，禁止任何字面兜底：自定义主题通过追加 CSS 覆盖 Token 即可整体换肤，
 * 若在此写死兜底值，主题变量一旦缺省就会盖住自定义取值（REQ-THEME-0007 / 变量单一作者）。
 * 收起/展开由 footerSocialFloat 模块写 .is-collapsed + inline transform。
 */
.w-social-float {
    position:fixed;
    top: 50%;
    left: max(0px, env(safe-area-inset-left, 0px));
    z-index: var(--z-index-fixed);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 默认主题有 --weline-space-*；缺少这组 token 的主题（如 hanfu）会退化成 gap:normal，
     * 图标就贴在一起。给回退值，保持与默认主题同一套间距语义。 */
    gap: var(--weline-space-1, 0.5rem);
    padding: var(--weline-space-2, 0.75rem) var(--weline-space-1, 0.5rem);
    transform: translateY(-50%);
    color: var(--weline-theme-text);
    background: var(--weline-theme-surface-raised);
    border: var(--weline-theme-border-width) solid var(--weline-theme-border);
    border-left-width: var(--weline-space-1);
    border-left-color: var(--weline-theme-primary);
    border-radius: 0 var(--weline-radius-md) var(--weline-radius-md) 0;
    box-shadow: var(--weline-theme-shadow-md);
    transition: transform var(--weline-theme-duration-normal, 0.28s) var(--weline-theme-easing-standard, cubic-bezier(0.22, 1, 0.36, 1));
}

.w-social-float__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--weline-space-1, 0.5rem);
}

.w-social-float__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--weline-space-5) + var(--weline-space-1));
    height: calc(var(--weline-space-5) + var(--weline-space-1));
    color: var(--weline-theme-text);
    background: var(--weline-theme-surface);
    border: var(--weline-theme-border-width) solid var(--weline-theme-border);
    border-radius: var(--weline-radius-sm);
    box-shadow: var(--weline-theme-shadow-xs);
    text-decoration: none;
    transition:
        color var(--weline-theme-duration-fast, 0.16s) var(--weline-theme-easing-standard, cubic-bezier(0.22, 1, 0.36, 1)),
        background-color var(--weline-theme-duration-fast, 0.16s) var(--weline-theme-easing-standard, cubic-bezier(0.22, 1, 0.36, 1));
}

.w-social-float__link:is(:hover, :focus-visible) {
    color: var(--weline-theme-on-primary);
    background: var(--weline-theme-primary);
    border-color: var(--weline-theme-primary);
    outline: none;
}

.w-social-float__link .footer-social-icon {
    width: var(--weline-space-4);
    height: var(--weline-space-4);
    color: inherit;
    fill: currentColor;
}

.w-social-float__toggle {
    position: absolute;
    top: 50%;
    left: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--weline-space-5);
    height: calc(var(--weline-space-8) + var(--weline-space-1));
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    color: var(--weline-theme-primary);
    background: var(--weline-theme-surface-raised);
    border: var(--weline-theme-border-width) solid var(--weline-theme-border);
    border-left: none;
    border-radius: 0 var(--weline-radius-md) var(--weline-radius-md) 0;
    box-shadow: var(--weline-theme-shadow-xs);
    cursor: pointer;
    appearance: none;
}

.w-social-float__toggle:is(:hover, :focus-visible) {
    color: var(--weline-theme-on-primary);
    background: var(--weline-theme-primary);
    outline: none;
}

.w-social-float__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: transform var(--weline-theme-duration-normal, 0.28s) var(--weline-theme-easing-standard, cubic-bezier(0.22, 1, 0.36, 1));
}

.w-social-float.is-collapsed {
    transform: translateY(-50%) translateX(-100%);
}

.w-social-float.is-collapsed .w-social-float__panel {
    visibility: hidden;
    pointer-events: none;
}

.w-social-float.is-collapsed .w-social-float__toggle-icon {
    transform: scaleX(-1);
}

/* 旧 footer 容器社媒条与本部件并存时只保留本部件（防双轨） */
body:has(.w-social-float) .footer-social-float {
    display: none !important;
}

@media (max-width: 720px) {
    .w-social-float {
        padding: var(--weline-space-1);
    }
    .w-social-float__link {
        width: var(--weline-space-6);
        height: var(--weline-space-6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .w-social-float,
    .w-social-float__link,
    .w-social-float__toggle-icon {
        transition: none;
    }
}