/* ============================================================================
   「安装到手机桌面」（PWA）—— 按钮 + 说明弹窗的**共用样式**
   页面：个人中心（app/views/user_index.php）、登录页（app/views/login.php）
   逻辑：web/public/static/pwa/pwa-install.js（按钮和弹窗的 DOM 也由它注入）

   ★ 配色全部走 CSS 变量，默认是站点那条金线（#ffe680 → #ffd700 → #ff8c00）。
     别的页面想换色，在自己页面的 <style> 里覆盖 .tenderness-install-btn 上那几个
     变量即可（登录页就是蓝青紫，见 login.php 里的 .login-pwa-slot 一段）。
   ★ 改完要升 URL 上的 ?v=：CF 按扩展名缓存 .css/.js（max-age=14400），
     不换 URL 推不出去。
   ============================================================================ */

/* ---------------------------------------------------------------- 按钮本体 */
.tenderness-install-btn {
    /* 图标渐变三档（SVG 里 <stop> 的 stop-color 由下面的规则接管） */
    --pwa-g1: #ffe680;
    --pwa-g2: #ffd700;
    --pwa-g3: #ff8c00;
    --pwa-accent: #ffd700;                 /* 文字 + 描边 */
    --pwa-tint-a: rgba(255, 215, 0, 0.20); /* 底色渐变·起 */
    --pwa-tint-b: rgba(255, 140, 0, 0.14); /* 底色渐变·止 */
    --pwa-border: rgba(255, 215, 0, 0.5);
    --pwa-glow: rgba(255, 140, 0, 0.20);
    --pwa-done-color: rgba(255, 255, 255, 0.75);
    --pwa-done-bg: rgba(255, 255, 255, 0.08);
    --pwa-done-border: rgba(255, 255, 255, 0.28);

    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 9px 5px 7px;
    border: 1px solid var(--pwa-border);
    border-radius: 20px;
    background: linear-gradient(135deg, var(--pwa-tint-a) 0%, var(--pwa-tint-b) 100%);
    box-shadow: 0 1px 6px var(--pwa-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: var(--pwa-accent);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, opacity .12s ease;
}
.tenderness-install-btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}
.tenderness-install-btn.is-done {
    border-color: var(--pwa-done-border);
    background: var(--pwa-done-bg);
    box-shadow: none;
    color: var(--pwa-done-color);
}
.tenderness-install-icon {
    width: 15px;
    height: 15px;
    display: block;
    flex-shrink: 0;
}
/* 图标那条渐变由变量驱动：SVG 的 stop-color 是"表现属性"，任何 CSS 规则都能盖掉它。
   浏览器万一不认，就退回标签里写死的金色，不会变成黑块。 */
.tenderness-install-btn .tenderness-install-icon stop:nth-of-type(1) { stop-color: var(--pwa-g1); }
.tenderness-install-btn .tenderness-install-icon stop:nth-of-type(2) { stop-color: var(--pwa-g2); }
.tenderness-install-btn .tenderness-install-icon stop:nth-of-type(3) { stop-color: var(--pwa-g3); }

/* ★ 按钮文案是「添加到桌面」四个字，**一句到底**，不再按屏宽拆成两截。
   老写法是 `<span>安装</span><span class="…-long">到桌面</span>`（窄屏只留「安装」），
   起因是 iPhone 390 逻辑宽下那一行放不下（可用 275px 要装 89+88+100+间距）；
   后来个人中心把「ID / 会员标识」和「按钮列」拆成了左右两列，
   按钮不再跟 ID 抢同一条行宽，那个取舍就不需要了。
   ★ 留着这颗已废弃的类名只为让老缓存页面不至于错位，别在新代码里用它。 */
.tenderness-install-text-long { display: none; }
/* 浏览器真的给了安装能力（Chrome/Edge/安卓）时，图标轻轻动一下提示可以点 */
.tenderness-install-btn.is-ready .tenderness-install-icon {
    animation: pwaInstallBob 1.8s ease-in-out infinite;
}
@keyframes pwaInstallBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(1.5px); }
}
@media (prefers-reduced-motion: reduce) {
    .tenderness-install-btn.is-ready .tenderness-install-icon { animation: none; }
}

/* ------------------------------------------------- 「怎么装到桌面」说明弹窗 */
/* iOS Safari 压根没有安装 API（beforeinstallprompt 只在 Chromium 系有），
   微信/QQ 内置浏览器也不支持装 —— 这两种情况只能弹这层图文说明。 */
.pwa-help-mask {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 19891020;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.pwa-help-mask.is-open { display: flex; }
.pwa-help-panel {
    width: 100%;
    max-width: 380px;
    max-height: 84vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 22px 20px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 215, 0, 0.24);
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    color: #e8e8e8;
    text-align: left;
}
.pwa-help-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pwa-help-head img { width: 44px; height: 44px; border-radius: 11px; display: block; flex-shrink: 0; }
.pwa-help-title { color: #ffd700; font-size: 16px; font-weight: 700; line-height: 1.3; }
.pwa-help-sub { color: #9a9a9a; font-size: 12px; margin-top: 3px; line-height: 1.4; }
.pwa-help-steps { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: pwaStep; }
.pwa-help-steps li {
    counter-increment: pwaStep;
    position: relative;
    padding: 0 0 0 26px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.65;
    color: #dcdcdc;
}
.pwa-help-steps li:before {
    content: counter(pwaStep);
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.16);
    border: 1px solid rgba(255, 215, 0, 0.45);
    color: #ffd700;
    font-size: 11px;
    font-weight: 700;
}
.pwa-help-steps b { color: #ffd700; font-weight: 700; }
.pwa-help-note {
    margin: 0 0 14px;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(255, 140, 0, 0.10);
    border: 1px solid rgba(255, 140, 0, 0.30);
    color: #ffcf8a;
    font-size: 12px;
    line-height: 1.6;
}
.pwa-help-ok {
    display: block;
    width: 100%;
    padding: 11px 0;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffe680, #ffd700 45%, #ff8c00);
    color: #1a1200;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.pwa-help-ok:active { opacity: 0.9; }

/* ------------------------------------------------------------------- 轻提示 */
/* 「已装到桌面」「正在安装」这种一闪而过的小条，由 pwa-install.js 创建 */
.pwa-toast {
    position: fixed;
    left: 50%;
    bottom: 12%;
    transform: translateX(-50%);
    z-index: 19891030;
    max-width: 76%;
    padding: 10px 16px;
    border-radius: 22px;
    background: rgba(20, 20, 20, 0.94);
    border: 1px solid var(--pwa-border, rgba(255, 215, 0, 0.45));
    color: var(--pwa-accent, #ffd700);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.pwa-toast.is-show { opacity: 1; }