/* 下载哈啰App —— 桌面端 hover 展示二维码
 *
 * 为什么用 @media (hover: hover) and (pointer: fine) 而不是判 UA：
 *   触屏设备没有真实 hover，浮层会被"首次点击当成 hover"卡住，用户得点两次才能跳转。
 *   这个媒体查询由浏览器按输入设备能力判定，比 UA 字符串可靠，也不需要 JS。
 *   手机/平板上浮层完全不参与渲染，点击直接进下载落地页。
 *
 * 二维码内容 = 按钮 href 的同一个下载落地页 URL（assets/images/app-download-qr-v0915.svg，
 * 由 URL 直接生成，QR 版本 11 / 61x61 格 / 纠错等级 M / 静默区 2 格）。
 * 落地页本身是手机端页面，PC 上点开也下载不了，所以桌面端的主路径是扫码。
 */

.app-download {
    position: relative;
    display: inline-flex;
}

/* 默认（含所有触屏设备）：浮层不存在 */
.app-download-qr {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .app-download-qr {
        display: block;
        position: absolute;
        bottom: calc(100% + 14px);
        left: 50%;
        transform: translateX(-50%) translateY(6px) scale(0.96);
        transform-origin: bottom center;
        z-index: 30;

        padding: var(--hg-space-4);
        /* 显式宽度是必须的：全站有一条 img { max-width: 100% }，而绝对定位浮层的宽度
         * 又要由图片决定，两者互相依赖会被浏览器解成塌缩（实测图片被压到 37px、
         * 高仍是 180px，比例歪掉）。这里 180 图 + 左右各 16 内边距 = 212。 */
        width: 212px;
        border-radius: 16px;
        /* CTA 区是深色底，浮层用白卡；白色同时充当二维码的额外静默区 */
        background: #fff;
        box-shadow: 0 18px 48px rgba(11, 18, 32, 0.28);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 180ms ease, transform 180ms cubic-bezier(0.4, 0, 0.2, 1), visibility 180ms;
    }

    /* 小三角，指向按钮 */
    .app-download-qr::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        width: 12px;
        height: 12px;
        background: #fff;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .app-download-qr img {
        display: block;
        width: 180px;
        height: 180px;
        /* 抵消全站的 img { max-width: 100% }，否则二维码会被压小、格子失真到扫不出来 */
        max-width: none;
    }

    .app-download-qr-tip {
        display: block;
        margin-top: var(--hg-space-2);
        color: #1d1d1f;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        letter-spacing: 0.01em;
    }

    /* hover 或键盘 focus 到按钮都展示，键盘用户不会被漏掉；
     * .is-open 是桌面端点击后的驻留态（见 assets/js/app-download-v0916.js），
     * 桌面端点击不跳转，只把二维码留在原地方便扫码。 */
    .app-download:hover .app-download-qr,
    .app-download:focus-within .app-download-qr,
    .app-download.is-open .app-download-qr {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-download-qr {
        transition: none;
        transform: translateX(-50%);
    }
    .app-download:hover .app-download-qr,
    .app-download:focus-within .app-download-qr,
    .app-download.is-open .app-download-qr {
        transform: translateX(-50%);
    }
}