/**
 * Ethantheme 客服浮动 UI（FAB / 客服工具组 / 移动端底部菜单）
 * ----------------------------------------------------
 * 0.9.1：从 polish.css 独立出来，按需加载（仅客服开启时）。
 * 依赖 tokens.css（--eth-* 变量）+ polish.css 的 --eth-premium-* 属性。
 */

/* --- FAB 专属投影（1.4.0：P2 回归微调）：常驻固定元素，
   悬浮感需超越按钮档位；沿用组件局部令牌惯例（同 loop/carousel） --- */
:root {
    --eth-fab-shadow: 0 12px 28px color-mix(in srgb, var(--eth-primary) 30%, transparent);
    --eth-fab-shadow-hover: 0 16px 34px color-mix(in srgb, var(--eth-primary) 42%, transparent);
}

/* --- 浮动容器 --- */
.eth-floating {
    position: fixed;
    right: 24px;
    bottom: var(--eth-float-bottom, 24px);
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* --- 返回顶部 FAB --- */
.eth-float-btn--top {
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--eth-primary), var(--eth-primary-d-1));
    box-shadow: var(--eth-fab-shadow);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition:
        opacity 320ms var(--eth-premium-ease),
        transform 320ms var(--eth-premium-ease),
        box-shadow 260ms ease;
}

.eth-float-btn--top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.eth-float-btn--top svg {
    width: 24px;
    height: 24px;
}

.eth-float-btn--top:hover {
    box-shadow: var(--eth-fab-shadow-hover);
    transform: translateY(-2px);
}

.eth-float-btn--top:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--eth-primary) 35%, transparent);
    outline-offset: 3px;
}

/* --- PC 客服工具组（右下角垂直工具条） --- */
.eth-float-service {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.eth-float-service__item {
    position: relative;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--eth-premium-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--eth-bg-surface);
    color: var(--eth-primary);
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--eth-premium-shadow-sm);
    transition:
        color 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease,
        transform 300ms var(--eth-premium-ease),
        box-shadow 300ms var(--eth-premium-ease);
}

.eth-float-service__item:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--eth-primary), var(--eth-primary-d-1));
    border-color: var(--eth-primary);
    transform: translateY(-3px);
    box-shadow: var(--eth-premium-shadow-md);
}

.eth-float-service__item.is-copied {
    color: #fff;
    background: var(--eth-success);
    border-color: var(--eth-success);
}

.eth-float-service__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.eth-float-service__icon svg {
    width: 22px;
    height: 22px;
}

/* 左侧 tooltip（hover 显示标题） */
.eth-float-service__tip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    white-space: nowrap;
    padding: var(--eth-space-3xs) var(--eth-space-2xs);
    border-radius: var(--eth-radius-s);
    background: var(--eth-text-title);
    color: var(--eth-bg-surface);
    font-size: var(--eth-fs-xs);
    font-weight: var(--eth-fw-semibold);
    letter-spacing: 0.01em;
    box-shadow: var(--eth-premium-shadow-sm);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, transform 260ms var(--eth-premium-ease), visibility 200ms;
}

.eth-float-service__item:hover .eth-float-service__tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* --- 移动端底部固定菜单 --- */
.eth-mobile-float {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    display: none;
    background: color-mix(in srgb, var(--eth-bg-surface) 92%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--eth-premium-border);
    box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.08);
    padding-bottom: env(safe-area-inset-bottom);
}

.eth-mobile-float ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0;
    padding: var(--eth-space-3xs) var(--eth-space-2xs);
    list-style: none;
}

.eth-mobile-float li {
    flex: 1;
    min-width: 0;
}

.eth-mobile-float a,
.eth-mobile-float button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 100%;
    padding: 0.35rem 0.25rem;
    border: none;
    background: none;
    color: var(--eth-text-muted);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    transition: color 200ms ease;
}

.eth-mobile-float a:hover,
.eth-mobile-float button:hover {
    color: var(--eth-primary);
}

.eth-mobile-float__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.eth-mobile-float__icon svg {
    width: 22px;
    height: 22px;
}

.eth-mobile-float__label {
    font-size: 0.66rem;
    font-weight: var(--eth-fw-semibold);
    line-height: var(--eth-lh-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 移动端语言切换器（0.7.2） */
.eth-mobile-float__lang {
    position: relative;
}

.eth-mobile-float__lang-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 100%;
    padding: 0.35rem 0.25rem;
    border: none;
    background: none;
    color: var(--eth-text-muted);
    cursor: pointer;
    font: inherit;
    transition: color 200ms ease;
}

.eth-mobile-float__lang-trigger:hover {
    color: var(--eth-primary);
}

.eth-mobile-float__lang-panel {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    min-width: 160px;
    padding: var(--eth-space-2xs);
    border: 1px solid var(--eth-premium-border);
    border-radius: var(--eth-radius-m);
    background: var(--eth-bg-surface);
    box-shadow: var(--eth-premium-shadow-md);
    z-index: 520;
}

.eth-mobile-float__lang-panel.is-open {
    display: block;
}

.eth-mobile-float__lang-panel ul {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eth-mobile-float__lang-panel li {
    flex: none;
}

.eth-mobile-float__lang-panel a {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--eth-space-3xs);
    padding: var(--eth-space-3xs) var(--eth-space-2xs);
    font-size: var(--eth-fs-xs);
    font-weight: var(--eth-fw-semibold);
    border-radius: var(--eth-radius-s);
    transition: background-color 180ms ease, color 180ms ease;
}

.eth-mobile-float__lang-panel a:hover {
    background: color-mix(in srgb, var(--eth-primary) 8%, transparent);
    color: var(--eth-primary);
}

/* 移动端：body 底部留白，避免内容被菜单遮挡 */
@media (max-width: 767px) {
    .eth-mobile-float {
        display: block;
    }
    /* 0.8.4：移动端隐藏右侧竖排客服工具组。
       底部横排菜单已承担客服入口，竖排按钮组会叠加溢出；
       tooltip 的横向溢出也随之消除。保留回到顶部 FAB。 */
    .eth-float-service {
        display: none;
    }
    .eth-floating {
        bottom: calc(var(--eth-float-bottom, 24px) + 64px + env(safe-area-inset-bottom));
        right: 16px;
    }
    .eth-float-btn--top {
        width: 46px;
        height: 46px;
    }
    .eth-float-btn--top svg {
        width: 22px;
        height: 22px;
    }
    body:has(.eth-mobile-float) {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

/* 桌面端：客服工具组 + FAB 可见，移动端菜单隐藏（默认） */
@media (min-width: 768px) {
    .eth-mobile-float {
        display: none !important;
    }
}

/* reduced-motion：禁用过渡与滚动平滑 */
@media (prefers-reduced-motion: reduce) {
    .eth-float-btn--top,
    .eth-float-service__item,
    .eth-float-service__tip {
        transition-duration: 0.01ms !important;
    }
}