/* mobile.css — 浮溟 iPad/iPhone 召唤台 v4
   Apple Liquid Glass 美学 · 隐藏滚动条 · 卡片系统 · 全屏星盘 · 历史回廊 */

/* ━━━━━━━━━━ 历史回廊钻石按钮（桌面同款的 prism-pulse 动画）━━━━━━━━━━ */
#history-toggle {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 56px);
    right: 16px;
    width: 36px; height: 36px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(200, 240, 255, 0.2));
    backdrop-filter: blur(15px) saturate(150%);
    -webkit-backdrop-filter: blur(15px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(100, 200, 255, 0.5);
    cursor: pointer;
    z-index: 60;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: prism-pulse 4s infinite ease-in-out;
}
@keyframes prism-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(100, 240, 255, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.3); }
    50% { box-shadow: 0 0 26px rgba(100, 240, 255, 0.85), 0 0 8px rgba(255, 255, 255, 0.6), inset 0 0 16px rgba(255, 255, 255, 0.5); }
}
#history-toggle:active { transform: rotate(225deg) scale(1.15); }
#history-toggle.active {
    background: rgba(162, 217, 255, 0.55);
    border-color: #fff;
    box-shadow: 0 0 36px rgba(162, 217, 255, 0.7), inset 0 0 12px rgba(255, 255, 255, 0.7);
    transform: rotate(225deg);
}

/* ━━━━━━━━━━ 历史记录面板（右侧，垂直瀑布）━━━━━━━━━━ */
#history-panel {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 100px);
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 90px);
    width: min(280px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 12px;
    border-radius: 22px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 25;

    background:
        radial-gradient(ellipse 60% 30% at 25% 12%,
            rgba(255, 255, 255, 0.20) 0%,
            transparent 65%),
        linear-gradient(180deg,
            rgba(12, 22, 42, 0.30) 0%,
            rgba(16, 28, 50, 0.55) 100%);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top-color: rgba(255, 255, 255, 0.32);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, black 6%, black 94%, transparent 100%);

    opacity: 0;
    pointer-events: none;
    transform: translateX(40px) scale(0.96);
    transition: opacity 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
                transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
#history-panel.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}
#history-panel.hidden { opacity: 0; pointer-events: none; }

.history-card {
    flex-shrink: 0;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.55;
    color: #f0f3fb;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-shadow: 0 1px 2px rgba(0, 0, 20, 0.45);
    word-break: break-word;
    white-space: pre-wrap;
}
.history-card.user {
    background: linear-gradient(160deg, rgba(80, 180, 255, 0.18), rgba(20, 50, 90, 0.40));
    border-color: rgba(160, 220, 255, 0.25);
    align-self: flex-end;
    border-radius: 14px 14px 4px 14px;
    max-width: 92%;
}
.history-card.fufu {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(180, 200, 240, 0.06));
    align-self: flex-start;
    border-radius: 14px 14px 14px 4px;
    max-width: 92%;
}
.history-card.dream {
    background: linear-gradient(160deg, rgba(212, 175, 55, 0.18), rgba(150, 110, 200, 0.10));
    border-color: rgba(212, 175, 55, 0.3);
    align-self: stretch;
    text-align: left;
    border-left: 2px solid #D4AF37;
    border-radius: 4px 14px 14px 14px;
}
.history-card .h-meta {
    display: block;
    font-size: 9px;
    letter-spacing: 1px;
    color: rgba(180, 210, 255, 0.6);
    margin-bottom: 4px;
    text-transform: uppercase;
}
.history-empty {
    color: rgba(232, 234, 243, 0.45);
    text-align: center;
    padding: 30px 0;
    font-size: 13px;
}

/* ━━━━━━━━━━ 全屏星盘 overlay（桌面同款 Dior 黑金质感）━━━━━━━━━━ */
#astro-overlay {
    position: fixed; inset: 0;
    background: linear-gradient(135deg, rgba(8, 12, 20, 0.7) 0%, rgba(5, 5, 10, 0.85) 100%);
    backdrop-filter: blur(40px) saturate(120%);
    -webkit-backdrop-filter: blur(40px) saturate(120%);
    z-index: 100;
    display: flex; justify-content: center; align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
#astro-overlay.visible { opacity: 1; pointer-events: auto; }

.astro-glass-disc {
    width: min(80vmin, 360px);
    height: min(80vmin, 360px);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.04) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 24px 70px rgba(0, 0, 0, 0.7),
        inset 0 0 50px rgba(0, 0, 0, 0.25);
    display: flex; justify-content: center; align-items: center;
    position: relative;
    transform: scale(0.95);
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
#astro-overlay.visible .astro-glass-disc { transform: scale(1); opacity: 1; }

#astro-chart-svg {
    width: 100%; height: 100%;
    animation: slow-spin 180s linear infinite;
}
#astro-chart-svg svg { width: 100%; height: 100%; }
@keyframes slow-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.astro-info {
    position: absolute;
    top: 12%;
    text-align: center;
    pointer-events: none;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    z-index: 102;
}
.astro-date {
    font-family: 'Times New Roman', serif;
    font-size: clamp(22px, 5vw, 32px);
    color: #f0f0f0;
    font-weight: 300;
    letter-spacing: 4px;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}
.astro-loc {
    font-family: 'Jura', sans-serif;
    font-size: 10px;
    color: rgba(212, 175, 55, 0.85);
    letter-spacing: 3px;
    text-transform: uppercase;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    padding-top: 8px;
    width: 110px;
}

.astro-close-btn {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 24px);
    right: 24px;
    width: 42px; height: 42px;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 50%;
    background: rgba(10, 12, 16, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: transparent;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 110;
}

/* 行星相位悬浮窗（点击行星弹出，Dior 黑金风）*/
#aspect-popup {
    position: absolute;
    width: max-content;
    min-width: 160px;
    max-width: 220px;
    max-height: 320px;
    padding: 12px 14px;
    pointer-events: none;
    z-index: 130;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    background: rgba(10, 12, 16, 0.92);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-left: 2px solid #D4AF37;
    border-radius: 8px;
    color: #fff;
    overflow-y: auto;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
}
#aspect-popup.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.ap-header {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    padding-bottom: 8px;
    margin-bottom: 8px;
}
.ap-symbol {
    font-size: 22px;
    color: #D4AF37;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.3));
}
.ap-name {
    font-family: 'Times New Roman', serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #f0f0f0;
    text-transform: uppercase;
}
.ap-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ap-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Jura', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.70);
    padding: 3px 0;
}
.ap-type { color: #fff; font-weight: 600; font-size: 10px; }
.ap-deg { opacity: 0.55; margin-left: 4px; font-size: 10px; }
.ap-empty {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    text-align: center;
    padding: 4px 0;
}

/* 让 SVG 里的 .planet-interactive 在 mobile 也有按下反馈 */
#astro-chart-svg .planet-interactive {
    cursor: pointer;
    transition: opacity 0.3s, transform 0.2s;
}
#astro-chart-svg .planet-interactive.active {
    opacity: 0.55;
    transform: scale(1.18);
    transform-origin: center;
}

/* ━━━━━━━━━━ 矿石卡片 mineral-mode 变体 ━━━━━━━━━━
   按照设计哲学：
   - Phantom Habit：透通外壳 + 半透明内核（双层背景）
   - Spectral Gradient：垂直色阶插值（用 mineral c1/c2 真实演算）
   - Volumetric Atmosphere：动态光尘 + 顶边镜面反光
   保留对话气泡同款强玻璃质感，再叠一层矿石本色光谱 */
#soul-card.mineral-mode {
    /* 4 层叠加：镜面光斑 + 矿石光谱（垂直色带）+ 矿石侧光 + 暗玻璃底 */
    background:
        /* 1. 顶部镜面反光（Phantom Habit 外壳的玻璃高光）*/
        radial-gradient(ellipse 70% 35% at 22% 12%,
            rgba(255, 255, 255, 0.32) 0%,
            rgba(220, 240, 255, 0.14) 30%,
            transparent 70%),
        /* 2. 矿石垂直光谱（Spectral Gradient · 真实色带，西瓜碧玺/萤石那种）*/
        linear-gradient(180deg,
            color-mix(in srgb, var(--mineral-c1, #ffffff) 28%, transparent) 0%,
            color-mix(in srgb, var(--mineral-c1, #ffffff) 14%, transparent) 45%,
            color-mix(in srgb, var(--mineral-c2, #aaaaaa) 18%, transparent) 75%,
            color-mix(in srgb, var(--mineral-c2, #aaaaaa) 32%, transparent) 100%),
        /* 3. 右下侧光（Volumetric Atmosphere · 光场拟真）*/
        radial-gradient(ellipse 50% 35% at 88% 90%,
            color-mix(in srgb, var(--mineral-c2, #aaaaaa) 22%, transparent) 0%,
            transparent 65%),
        /* 4. 暗玻璃底（保证文字对比度）*/
        linear-gradient(180deg,
            rgba(15, 25, 50, 0.20) 0%,
            rgba(20, 35, 65, 0.40) 100%);

    /* 玻璃折射跟气泡同款 */
    backdrop-filter: blur(36px) saturate(220%) contrast(1.08);
    -webkit-backdrop-filter: blur(36px) saturate(220%) contrast(1.08);

    /* 顶边色锚（用矿石主色当 1.5px 实色边）+ 其他三边低调 */
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-top: 1.5px solid var(--mineral-c1, rgba(255, 255, 255, 0.5));

    box-shadow:
        0 24px 72px 0 rgba(0, 0, 0, 0.50),
        /* 矿石主色淡光晕扩散 */
        0 8px 24px 0 color-mix(in srgb, var(--mineral-c1, #888) 25%, transparent),
        inset 0 1px 0 0 rgba(220, 235, 255, 0.32),
        inset 1px 0 1px 0 color-mix(in srgb, var(--mineral-c1, #888) 18%, transparent),
        inset -1px 0 1px 0 color-mix(in srgb, var(--mineral-c2, #888) 18%, transparent),
        inset 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}

/* 矿石模式标题：双色线性渐变 */
.mineral-mode .mineral-title {
    background: linear-gradient(135deg,
        var(--mineral-c1, #ffffff) 0%,
        var(--mineral-c2, #aaaaaa) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter:
        drop-shadow(0 1px 2px rgba(0, 8, 24, 0.6))
        drop-shadow(0 0 14px color-mix(in srgb, var(--mineral-c1, #fff) 30%, transparent));
}

/* 矿石模式 portal 按钮：环 / 内核呼应矿石色 */
.mineral-mode .mineral-portal {
    background:
        radial-gradient(ellipse 80% 60% at 30% 20%,
            rgba(255, 255, 255, 0.20) 0%,
            transparent 70%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--mineral-c1, #6890dc) 28%, transparent) 0%,
            color-mix(in srgb, var(--mineral-c2, #968cdc) 25%, transparent) 100%);
    border-color: color-mix(in srgb, var(--mineral-c1, #fff) 35%, rgba(255,255,255,0.14));
    border-top-color: color-mix(in srgb, var(--mineral-c1, #fff) 60%, rgba(255,255,255,0.30));
}
.mineral-mode .mineral-portal .soul-card-ring {
    border-color: color-mix(in srgb, var(--mineral-c1, #fff) 40%, transparent);
}
.mineral-mode .mineral-portal .soul-card-core {
    color: var(--mineral-c1, #fff);
    text-shadow:
        0 0 12px color-mix(in srgb, var(--mineral-c1, #fff) 60%, transparent),
        0 0 4px rgba(255, 255, 255, 0.8);
}

/* ━━━━━━━━━━ 学术晶片 paper-card 变体（Dior 黑金风）━━━━━━━━━━
   通过给 #soul-card 加 .paper-mode 触发：黑底 + 金边 + 衬线大标题 */
#soul-card.paper-mode {
    background:
        linear-gradient(160deg,
            rgba(15, 20, 34, 0.85) 0%,
            rgba(20, 25, 40, 0.95) 100%);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    border: 1px solid rgba(212, 175, 55, 0.30);
    border-top-color: rgba(212, 175, 55, 0.85);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        inset 0 0 22px rgba(212, 175, 55, 0.10);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 20, 0.6);
}
.paper-mode .pc-header {
    font-family: 'Jura', sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 2.5px;
    margin-bottom: 4px;
}
.paper-mode .pc-title {
    font-family: 'Times New Roman', serif;
    font-size: 17px;
    font-weight: bold;
    color: #D4AF37;
    line-height: 1.25;
    margin-bottom: 6px;
    text-shadow: 0 0 14px rgba(212, 175, 55, 0.25);
}
.paper-mode .pc-authors {
    font-size: 11px;
    color: #A0B0C0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}
.paper-mode .pc-venue {
    font-family: 'Jura', sans-serif;
    font-size: 9px;
    color: #E0E0E0;
    padding: 3px 8px;
    background: rgba(212, 175, 55, 0.18);
    border-radius: 4px;
    display: inline-block;
    width: max-content;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.paper-mode .pc-btn {
    margin-top: 8px;
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    background: transparent;
    border: 1px solid #D4AF37;
    color: #D4AF37;
    font-family: 'Jura', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.4s ease;
}
.paper-mode .pc-btn:active {
    background: #D4AF37;
    color: #0F1422;
    box-shadow: 0 0 22px rgba(212, 175, 55, 0.55);
    transform: translateY(-2px);
}

/* ━━━━━━━━━━ 所罗门星符卡片 sigil-mode（液态玻璃 + 行星色辉）━━━━━━━━━━
   --sigil-glow 由 mobile.js 按行星注入 */
#soul-card.sigil-mode {
    --sigil-glow: #d4a050;
    width: min(320px, 92vw);
    max-height: 80vh;
    background:
        radial-gradient(ellipse 70% 35% at 22% 12%,
            rgba(255, 255, 255, 0.22) 0%,
            transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 88%,
            color-mix(in srgb, var(--sigil-glow) 18%, transparent) 0%,
            transparent 70%),
        linear-gradient(170deg,
            rgba(18, 14, 26, 0.78) 0%,
            rgba(22, 18, 34, 0.92) 100%);
    backdrop-filter: blur(34px) saturate(180%);
    -webkit-backdrop-filter: blur(34px) saturate(180%);
    border: 1px solid color-mix(in srgb, var(--sigil-glow) 35%, rgba(255,255,255,0.10));
    border-top-color: color-mix(in srgb, var(--sigil-glow) 70%, white 10%);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        inset 0 0 22px color-mix(in srgb, var(--sigil-glow) 12%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.sigil-mode .sigil-header {
    font-family: 'Jura', 'Cormorant Garamond', serif;
    font-size: 9px;
    font-weight: 700;
    color: color-mix(in srgb, var(--sigil-glow) 75%, white 20%);
    letter-spacing: 2.5px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.sigil-mode .sigil-title {
    font-family: 'Noto Serif SC', 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
    letter-spacing: 1px;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.6),
        0 0 18px color-mix(in srgb, var(--sigil-glow) 40%, transparent);
}
.sigil-mode .sigil-subtitle {
    font-size: 11px;
    color: rgba(220, 230, 250, 0.72);
    letter-spacing: 1px;
    margin-bottom: 14px;
}
/* 圆形展示舞台：halo 光环 + 圆形星符图（缩小尺寸，居中，比例不变）*/
.sigil-mode .sigil-stage {
    position: relative;
    width: 62%;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    margin: 6px auto 12px;
    display: flex; align-items: center; justify-content: center;
}
.sigil-mode .sigil-halo {
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            color-mix(in srgb, var(--sigil-glow) 35%, transparent) 0%,
            transparent 65%);
    filter: blur(10px);
    animation: sigil-halo-breathe 4.8s ease-in-out infinite;
}
@keyframes sigil-halo-breathe {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1.0; transform: scale(1.06); }
}
.sigil-mode .sigil-image {
    position: relative;
    width: 88%;
    height: 88%;
    object-fit: contain;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 28px color-mix(in srgb, var(--sigil-glow) 30%, transparent);
    background: radial-gradient(circle,
        rgba(245, 235, 220, 0.92) 0%,
        rgba(220, 205, 180, 0.85) 100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.sigil-mode .sigil-image:active {
    transform: scale(1.02);
}
.sigil-mode .sigil-row {
    margin-top: 10px;
}
.sigil-mode .soul-card-label {
    font-family: 'Jura', sans-serif;
    font-size: 9px;
    color: color-mix(in srgb, var(--sigil-glow) 65%, white 30%);
    letter-spacing: 2px;
}
.sigil-mode .sigil-purpose {
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(235, 240, 250, 0.92);
    margin-top: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 16, 0.55);
}
.sigil-mode .sigil-appearance {
    color: rgba(220, 225, 240, 0.78);
    font-size: 11.5px;
    font-style: italic;
}
.sigil-mode .sigil-narration {
    font-family: 'Noto Serif SC', serif;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(235, 240, 250, 0.92);
    margin: 12px 0;
    max-height: 40vh;
    overflow-y: auto;
    padding: 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.sigil-mode .sigil-footnotes {
    font-size: 10.5px;
    color: rgba(200, 210, 225, 0.65);
    line-height: 1.6;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sigil-mode .sigil-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.sigil-mode .sigil-btn {
    flex: 1;
    padding: 10px 8px;
    border: 1px solid color-mix(in srgb, var(--sigil-glow) 60%, rgba(255,255,255,0.15));
    border-radius: 10px;
    font-family: 'Jura', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    color: color-mix(in srgb, var(--sigil-glow) 70%, white 25%);
}
.sigil-mode .sigil-btn-save {
    background: color-mix(in srgb, var(--sigil-glow) 22%, transparent);
    color: #fff;
}
.sigil-mode .sigil-btn:active {
    background: color-mix(in srgb, var(--sigil-glow) 50%, transparent);
    color: #fff;
    box-shadow: 0 0 22px color-mix(in srgb, var(--sigil-glow) 55%, transparent);
    transform: translateY(-1px);
}

/* ━━━━━━━━━━ 截图浮窗（液态玻璃，右下角，桌面同款）━━━━━━━━━━ */
#screenshot-popup {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) + 90px);
    right: 16px;
    width: 160px;
    height: 100px;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(212, 175, 55, 0.5),
        inset 0 0 22px rgba(255, 255, 255, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(40px) scale(0.92) rotate(4deg);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 70;
    cursor: pointer;
    overflow: hidden;
}
#screenshot-popup::after {
    content: '⟡ TAP TO OPEN ⟡';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(15, 20, 34, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #D4AF37;
    font-family: 'Jura', sans-serif;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-align: center;
    padding: 5px 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
#screenshot-popup:active { transform: translateY(0) scale(1.04) rotate(0deg); }
#screenshot-popup:active::after { transform: translateY(0); }
#screenshot-popup.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1) rotate(0deg);
}

/* ━━━━━━━━━━ 音量 OSD（浅色磨砂，底部居中，iOS 蓝填充）━━━━━━━━━━ */
#volume-osd {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) + 110px);
    left: 50%;
    transform: translateX(-50%) translateY(40px) scale(0.92);
    width: min(260px, 80vw);
    height: 50px;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(240, 248, 255, 0.55) 100%);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.4);
    border-radius: 26px;
    box-shadow:
        0 16px 36px rgba(0, 10, 30, 0.18),
        0 4px 12px rgba(0, 10, 30, 0.10),
        inset 0 2px 4px rgba(255, 255, 255, 1.0),
        inset 0 -2px 10px rgba(255, 255, 255, 0.45);

    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 14px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 75;
}
#volume-osd.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
.vol-icon {
    font-size: 18px;
    color: #007AFF;
    text-shadow: 0 2px 8px rgba(0, 122, 255, 0.4);
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.95));
}
.vol-track {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: rgba(0, 20, 50, 0.06);
    box-shadow:
        inset 0 1px 3px rgba(0, 20, 50, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.95);
    overflow: hidden;
    position: relative;
}
.vol-fill {
    height: 100%;
    width: 50%;
    background: linear-gradient(90deg, #5AC8FA, #007AFF);
    border-radius: 4px;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.55),
        0 0 10px rgba(0, 122, 255, 0.5);
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.vol-text {
    font-family: 'Jura', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1c1c1e;
    width: 32px;
    text-align: right;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ━━━━━━━━━━ 气泡 dream-mode（浮溟说话时变温柔 + 浮动）━━━━━━━━━━ */
#bubble.dream-mode {
    /* 在原暗玻璃基础上叠一层玫瑰 / 薄荷的梦幻渐变 */
    background:
        radial-gradient(ellipse 60% 35% at 22% 18%,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(220, 240, 255, 0.14) 30%,
            transparent 65%),
        linear-gradient(135deg,
            rgba(192, 240, 236, 0.30) 0%,
            rgba(220, 195, 200, 0.22) 100%),
        linear-gradient(180deg,
            rgba(20, 35, 60, 0.06) 0%,
            rgba(22, 38, 65, 0.14) 100%);
    border-color: rgba(255, 240, 250, 0.55);
    border-top-color: rgba(255, 240, 250, 0.85);
    animation: dreamFloat 6s ease-in-out infinite;
    /* 稍微柔化一些文字（梦幻态），保持可读性 */
    color: #f8f1e8;
}
@keyframes dreamFloat {
    0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
    50%      { transform: translateX(-50%) translateY(-4px) scale(1.015); }
}
/* 已拖动过的气泡也可进入 dream-mode（不带 translateX） */
#bubble.dragged.dream-mode {
    animation: dreamFloatDragged 6s ease-in-out infinite;
}
@keyframes dreamFloatDragged {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-4px) scale(1.015); }
}
.astro-close-btn::before, .astro-close-btn::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 1px;
    background: #D4AF37;
    opacity: 0.85;
}
.astro-close-btn::before { transform: rotate(45deg); }
.astro-close-btn::after { transform: rotate(-45deg); }
.astro-close-btn:active {
    border-color: #D4AF37;
    background: rgba(212, 175, 55, 0.10);
    transform: rotate(90deg) scale(1.06);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, #0a0e1a 0%, #1a1f3a 50%, #0d1929 100%);
    font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
    color: #e8eaf3;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* 隐藏所有滚动条（保留滚动行为） */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ━━━━━━━━━━ Liquid Glass 基类 ━━━━━━━━━━
   多层叠加：渐变底 + 强 backdrop-filter + 顶部高光 + 内/外阴影
   仿 iOS 26 / macOS 26 Tahoe 玻璃材质 */
.lg-base {
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.06) 50%,
            rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
    -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-top-color: rgba(255, 255, 255, 0.28);
    box-shadow:
        0 8px 32px 0 rgba(0, 0, 0, 0.35),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 1px 0 rgba(0, 0, 0, 0.15);
    position: relative;
}
/* 顶部镜面反光（细高光带） */
.lg-base::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.0) 30%);
    pointer-events: none;
}

/* 透明模式（PWA standalone）下整体背景全透 */
body.transparent-mode { background: transparent !important; }
body.transparent-mode #starfield { opacity: 0.15; }

/* ━━━━━━━━━━ 背景星空 ━━━━━━━━━━ */
#starfield {
    position: fixed; inset: 0;
    background:
        radial-gradient(2px 2px at 25% 30%, #b8c5e8, transparent),
        radial-gradient(1px 1px at 70% 60%, #d4def0, transparent),
        radial-gradient(2px 2px at 50% 80%, #9fb0d8, transparent),
        radial-gradient(1px 1px at 15% 70%, #c5d2ec, transparent),
        radial-gradient(1.5px 1.5px at 85% 25%, #b0c0e0, transparent);
    background-repeat: repeat;
    background-size: 350px 350px;
    opacity: 0.5;
    z-index: 0;
    animation: drift 60s linear infinite;
    pointer-events: none;
}
@keyframes drift {
    from { background-position: 0 0; }
    to { background-position: 350px 350px; }
}

/* ━━━━━━━━━━ Live2D 画布 ━━━━━━━━━━ */
#live2d-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 1;
    touch-action: none;
    /* ellipse 50% 50%：fade 落在 cardinal 边附近 */
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at center,
        rgba(0,0,0,1)    72%,
        rgba(0,0,0,0.55) 86%,
        rgba(0,0,0,0.20) 95%,
        transparent      100%);
    -webkit-mask-mode: alpha;
    mask-image: radial-gradient(ellipse 50% 50% at center,
        rgba(0,0,0,1)    72%,
        rgba(0,0,0,0.55) 86%,
        rgba(0,0,0,0.20) 95%,
        transparent      100%);
    mask-mode: alpha;
}

/* ⚛ 水晶按键（与记忆回廊同语系）*/
#scale-controls {
    position: fixed;
    right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 90px);
    z-index: 100;
    display: flex; flex-direction: column; gap: 12px;
    /* iOS 滑入滑出弹簧曲线 */
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.3s ease;
    touch-action: pan-y;     /* 允许垂直滚动穿透，水平自己处理 */
}
#scale-controls.hidden {
    transform: translateX(calc(100% + 24px));
    opacity: 0.4;
}

/* 隐藏后屏幕右边的薄玻璃提示边条 */
#scale-controls-tab {
    position: fixed;
    right: 0; top: 50%;
    transform: translateY(-50%) translateX(100%);
    width: 4px; height: 68px;
    z-index: 100;
    border-radius: 4px 0 0 4px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(200, 240, 255, 0.45) 50%,
        rgba(255, 255, 255, 0.18) 100%);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow:
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.4),
        0 0 12px rgba(100, 200, 255, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.3s ease;
    /* 边条本体不接 touch，靠左侧扩展的"热区"接 */
    touch-action: none;
}
#scale-controls-tab::before {
    /* 不可见的扩展热区——往左 24px，方便手指找到 */
    content: '';
    position: absolute;
    inset: -20px 0 -20px -28px;
    pointer-events: auto;
}
#scale-controls-tab.visible {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
    pointer-events: auto;
}
#scale-controls-tab.visible::before { pointer-events: auto; }
.scale-crystal {
    width: 18px; height: 18px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(200, 240, 255, 0.2));
    backdrop-filter: blur(15px) saturate(150%);
    -webkit-backdrop-filter: blur(15px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom-color: rgba(100, 200, 255, 0.5);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: prism-pulse-m 4s infinite ease-in-out;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.scale-crystal:active {
    transform: rotate(225deg) scale(0.92);
    background: rgba(255, 255, 255, 0.6);
}
.scale-crystal.locked {
    background: #a2d9ff;
    border-color: #fff;
    box-shadow: 0 0 32px #a2d9ff, inset 0 0 12px white;
    transform: rotate(225deg);
    animation: none;
}
.scale-crystal .glyph {
    width: 10px; height: 10px;
    transform: rotate(-45deg);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    stroke: rgba(255, 255, 255, 0.98);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    filter:
        drop-shadow(0 0 0.6px rgba(15, 40, 70, 0.95))
        drop-shadow(0 0 0.6px rgba(15, 40, 70, 0.85))
        drop-shadow(0 0 3px rgba(180, 230, 255, 0.85))
        drop-shadow(0 0 7px rgba(100, 200, 255, 0.45));
}
.scale-crystal:active .glyph { transform: rotate(-225deg); }
.scale-crystal.locked .glyph {
    transform: rotate(-225deg);  /* 锁定时 crystal 已 225°，glyph 必须 -225° 才正立 */
    stroke: rgba(20, 60, 100, 0.95);
    filter:
        drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.95))
        drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}
/* ━━━━ tooltip 包在 .crystal-wrap 里 ━━━━ */
.crystal-wrap {
    position: relative;
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
}
.crystal-tip {
    position: absolute;
    right: calc(100% + 12px); top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 5px 11px;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: #1a3c5a;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(230, 245, 255, 0.32) 100%);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    border: 0.5px solid rgba(255, 255, 255, 0.35);
    border-top: 0.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 12px;
    border-top-right-radius: 3px;
    box-shadow:
        0 6px 18px rgba(100, 200, 255, 0.10),
        inset 0 0 10px rgba(255, 255, 255, 0.35);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.crystal-wrap:active .crystal-tip { opacity: 1; }

/* ━━━━ ⚛ Liquid Glass 尺寸滑条（iOS 26 风 · 移动端） ━━━━ */
#size-slider {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    transform-origin: bottom center;
    width: 4px; height: 110px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow:
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.06);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1),
        transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}
#size-slider.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}
#size-slider-fill {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 50%;
    border-radius: 999px;
    background: linear-gradient(0deg,
        rgba(168, 230, 207, 0.78) 0%,
        rgba(212, 244, 230, 0.55) 100%);
    box-shadow:
        inset 0 0 4px rgba(168, 230, 207, 0.45),
        0 0 8px rgba(168, 230, 207, 0.30);
    pointer-events: none;
    transition: height 0.16s cubic-bezier(0.32, 0.72, 0, 1);
}
#size-slider-handle {
    position: absolute;
    width: 11px; height: 11px;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.85) 18%,
        rgba(220, 245, 235, 0.92) 55%,
        rgba(178, 224, 208, 0.92) 95%,
        rgba(150, 200, 180, 0.85) 100%);
    border: 0.5px solid rgba(255, 255, 255, 0.65);
    box-shadow:
        0 0.5px 1px rgba(0, 0, 0, 0.18),
        0 2px 5px rgba(120, 180, 160, 0.30),
        inset 0 0.5px 0.5px rgba(255, 255, 255, 0.95),
        inset 0 -0.5px 1px rgba(140, 195, 175, 0.45);
    touch-action: none;
    transition:
        width 0.18s cubic-bezier(0.32, 0.72, 0, 1),
        height 0.18s cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
#size-slider-handle.dragging {
    width: 13px; height: 13px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.22),
        0 0 14px rgba(168, 230, 207, 0.95),
        inset 0 0.5px 0.5px rgba(255, 255, 255, 0.98),
        inset 0 -0.5px 1px rgba(140, 195, 175, 0.5);
}
.scale-crystal.size-active {
    background: linear-gradient(135deg, rgba(212, 244, 230, 0.65), rgba(168, 230, 207, 0.45));
    border-color: #fff;
    border-bottom-color: rgba(168, 230, 207, 0.85);
    box-shadow: 0 0 28px rgba(168, 230, 207, 0.75), inset 0 0 10px rgba(255, 255, 255, 0.7);
    animation: none;
}
@keyframes prism-pulse-m {
    0%, 100% { box-shadow: 0 0 15px rgba(100, 200, 255, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.3); }
    50%      { box-shadow: 0 0 30px rgba(100, 200, 255, 0.85), 0 0 10px rgba(255, 255, 255, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.5); }
}

/* ━━━━━━━━━━ 粒子层 ━━━━━━━━━━ */
#particles {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}
/* 真·玻璃泡泡：透明芯 + 镜面高光斑 + 细亮边 + 内/外辉光 */
.tap-particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;

    /* 双层背景：左上 28% 处的高光斑 + 极淡的玻璃体 */
    background:
        /* 镜面高光（小亮点） */
        radial-gradient(circle at 30% 28%,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.30) 12%,
            transparent 30%),
        /* 玻璃体本身（边缘略实，中央透） */
        radial-gradient(circle,
            transparent 0%,
            rgba(180, 210, 255, 0.05) 55%,
            rgba(200, 225, 255, 0.18) 82%,
            transparent 100%);

    /* 细亮边（玻璃外缘的反光） */
    border: 1px solid rgba(220, 235, 255, 0.45);

    /* 内部柔光 + 外部辉晕 */
    box-shadow:
        inset 0 0 4px rgba(255, 255, 255, 0.25),
        0 0 6px rgba(180, 210, 255, 0.30);

    /* 一点点 backdrop-filter 制造真正的折射感 */
    backdrop-filter: blur(2px) saturate(140%);
    -webkit-backdrop-filter: blur(2px) saturate(140%);
}

.tap-particle.float {
    animation: particle-float 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes particle-float {
    0%   { transform: translate(0, 0) scale(0.3); opacity: 0; }
    18%  { opacity: 1; transform: translate(calc(var(--dx) * 0.18), calc(var(--dy) * 0.18)) scale(1); }
    100% { transform: translate(var(--dx), var(--dy)) scale(0.65); opacity: 0; }
}

/* 拖太快 → 红粉色玻璃泡（晕晕） */
.tap-particle.spin {
    animation: particle-spin 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
    background:
        radial-gradient(circle at 30% 28%,
            rgba(255, 240, 248, 0.85) 0%,
            rgba(255, 230, 245, 0.30) 12%,
            transparent 30%),
        radial-gradient(circle,
            transparent 0%,
            rgba(255, 200, 220, 0.06) 55%,
            rgba(255, 190, 215, 0.20) 82%,
            transparent 100%);
    border-color: rgba(255, 220, 235, 0.50);
    box-shadow:
        inset 0 0 4px rgba(255, 240, 248, 0.30),
        0 0 8px rgba(255, 180, 210, 0.35);
}
@keyframes particle-spin {
    0%   { transform: translate(0, 0) rotate(0deg) scale(0.4); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.4); opacity: 0; }
}

/* ━━━━━━━━━━ 状态栏（顶部） ━━━━━━━━━━ */
#status-bar {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 12px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    color: #d8dcec;
    z-index: 10;
    max-width: calc(100vw - 24px);

    /* Liquid Glass — 暗底 + 折射 */
    background:
        linear-gradient(180deg,
            rgba(10, 18, 35, 0.30) 0%,
            rgba(14, 24, 46, 0.55) 100%);
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-top-color: rgba(255, 255, 255, 0.20);
    box-shadow:
        0 4px 20px 0 rgba(0, 0, 0, 0.35),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
    text-shadow: 0 1px 2px rgba(0, 0, 20, 0.4);
}
#status-bar > * { white-space: nowrap; flex-shrink: 0; }
.dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ff5e5e;
    box-shadow: 0 0 8px currentColor;
    flex-shrink: 0;
}
.dot.connected { background: #5eff9e; }
#memory-stats { opacity: 0.55; font-size: 11px; }

@media (max-width: 768px) {
    #status-bar { font-size: 11px; padding: 5px 12px; gap: 6px; }
    #memory-stats { font-size: 10px; }
    .dot { width: 7px; height: 7px; }
}
@media (max-width: 380px) {
    #status-bar { font-size: 10px; padding: 4px 10px; gap: 5px; }
    #memory-stats { display: none; }
}

/* ━━━━━━━━━━ 说话气泡（真·iOS26 Liquid Glass）━━━━━━━━━━
   高级感的三个核心：
   1. saturate 200% + 弱暗 tint → 背景色透过玻璃被"放大"，不灰
   2. 镜面反光斑（左上方径向白色高光）→ 模拟光源打在玻璃表面
   3. 虹彩边缘（多色 inset box-shadow）→ 棱镜折射的彩边
   4. 顶部 mask 消融 → 浮溟自然透出 */
#bubble {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) + 90px);
    left: 50%;
    transform: translateX(-50%);
    width: min(90%, 600px);
    max-height: 38vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 22px 18px;
    border-radius: 26px;
    font-size: 17px;
    line-height: 1.75;
    font-weight: 400;
    letter-spacing: 0.2px;
    color: #ffffff;
    /* 文字三层暗描边 + 微光晕（玻璃变浅后，靠这个保证文字一定能看清）*/
    text-shadow:
        0 1px 1px rgba(0, 8, 24, 0.65),
        0 1px 4px rgba(0, 8, 24, 0.45),
        0 0 10px rgba(0, 8, 24, 0.35);
    z-index: 20;
    transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s ease;

    /* 多层背景：极轻暗 tint 让背景色彩真正透出 */
    background:
        /* 1. 镜面反光斑（左上方径向白光，模拟光源） */
        radial-gradient(ellipse 60% 35% at 22% 18%,
            rgba(255, 255, 255, 0.26) 0%,
            rgba(220, 240, 255, 0.12) 30%,
            transparent 65%),
        /* 2. 右下方淡淡的反向辉光 */
        radial-gradient(ellipse 40% 30% at 85% 90%,
            rgba(180, 220, 255, 0.13) 0%,
            transparent 60%),
        /* 3. 虹彩斜扫（紫蓝青三色） */
        linear-gradient(115deg,
            rgba(180, 220, 255, 0.08) 0%,
            transparent 30%,
            rgba(220, 180, 255, 0.07) 60%,
            transparent 85%,
            rgba(180, 220, 255, 0.06) 100%),
        /* 4. 极轻暗 tint —— 不再是"灰玻璃"，只是淡淡偏冷 */
        linear-gradient(180deg,
            rgba(20, 35, 60, 0.08) 0%,
            rgba(22, 38, 65, 0.18) 50%,
            rgba(22, 38, 65, 0.28) 100%);

    /* 玻璃折射：220% saturate + 1.08 contrast 让背景色彩更鲜活 */
    backdrop-filter: blur(36px) saturate(220%) contrast(1.08);
    -webkit-backdrop-filter: blur(36px) saturate(220%) contrast(1.08);

    /* 边框：顶部更亮（光从上来），其他三边渐淡 */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top-color: rgba(255, 255, 255, 0.28);

    /* 关键：多色 inset box-shadow 形成虹彩边缘 + 外阴影做深度 */
    box-shadow:
        /* 外阴影（深度） */
        0 24px 72px 0 rgba(0, 0, 0, 0.50),
        0 8px 24px 0 rgba(60, 90, 200, 0.18),
        /* 虹彩边缘高光（顶白 / 左蓝 / 右紫 / 底暗） */
        inset 0 1px 0 0 rgba(220, 235, 255, 0.32),
        inset 1px 0 1px 0 rgba(180, 210, 255, 0.10),
        inset -1px 0 1px 0 rgba(220, 190, 255, 0.10),
        inset 0 -1px 2px 0 rgba(0, 0, 0, 0.25),
        /* 内层环境光（让玻璃"亮"起来） */
        inset 0 0 32px 0 rgba(180, 210, 255, 0.05);

    /* 顶部 8% 自然消融 → 浮溟的脸自然露出来 */
    -webkit-mask-image: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 3%,
        rgba(0, 0, 0, 0.85) 8%,
        black 14%,
        black 100%);
    mask-image: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 3%,
        rgba(0, 0, 0, 0.85) 8%,
        black 14%,
        black 100%);
}

/* 拖拽手柄视觉提示已隐去 — 顶部 28px 区域仍然是 drag zone（mobile.js 的 inHandleZone 判定不变）*/
#bubble::after { display: none; }

#bubble.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
}

/* ━━━━━━━━━━ 键盘弹起时：气泡上移到键盘顶 + 模糊减弱 + 高度限制 ━━━━━━━━━━
   --kbd-h 由 mobile.js 在 applyLayout 实时写入（visualViewport 收缩量）
   这样气泡始终浮在键盘 + 输入栏之上，浮溟在它下方依旧可见
   不再用 display:none 死锁气泡 → 键盘开着时浮溟回话也能看到 */
#bubble.kbd-open {
    /* 锚到键盘顶部 + 留 100px 给输入栏（输入栏 ~70px + 30px 缓冲）*/
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--kbd-h, 0px) + 100px) !important;
    max-height: 22vh;          /* 键盘开着时屏小，限高防淹没浮溟头 */
    /* 减弱 blur 强度——backdrop 模糊度低，浮溟透出更清晰 */
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    /* 略微提升暗 tint 不透明度，弥补 blur 减弱后的可读性 */
    background:
        radial-gradient(ellipse 60% 35% at 22% 18%,
            rgba(255, 255, 255, 0.22) 0%,
            transparent 65%),
        linear-gradient(180deg,
            rgba(20, 35, 60, 0.40) 0%,
            rgba(22, 38, 65, 0.55) 100%);
    transition:
        bottom 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
        max-height 0.35s ease,
        backdrop-filter 0.35s ease,
        opacity 0.4s ease;
}
/* 拖动过的气泡进入键盘模式时：清掉用户拖到的位置，回到屏幕中央上方 */
#bubble.kbd-open.dragged {
    left: 50% !important;
    top: auto !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

/* 已拖动过 → 取消默认的 translateX(-50%) */
#bubble.dragged {
    transform: none !important;
}
#bubble.dragged.hidden {
    transform: translateY(10px) !important;
}

/* 拖动中 → 轻微放大 + 加重阴影（lift 效果） */
#bubble.dragging {
    transition: none;
    cursor: grabbing;
    box-shadow:
        0 24px 64px 0 rgba(0, 0, 0, 0.55),
        0 4px 16px 0 rgba(80, 110, 200, 0.25),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 2px 0 rgba(0, 0, 0, 0.20);
    transform: scale(1.015);
}
#bubble.dragging.dragged {
    transform: scale(1.015) !important;
}
/* dragging::after 已废弃（手柄已隐去）*/

#bubble-content {
    word-break: break-word;
    white-space: pre-wrap;
}

/* A softer ink for unsolicited remarks; the existing glass stays unchanged. */
#bubble.chatter-mode #bubble-content {
    color: #c7d7e2;
    text-shadow: 0 1px 2px rgba(0, 8, 24, 0.65), 0 0 8px rgba(0, 8, 24, 0.3);
}

/* "思考中"状态 —— 整体气泡更轻盈、文字半透明斜体，与正常回话明显区分 */
#bubble.thinking {
    /* 玻璃更薄一层 */
    background:
        radial-gradient(ellipse 60% 35% at 22% 18%,
            rgba(255, 255, 255, 0.16) 0%,
            transparent 65%),
        linear-gradient(180deg,
            rgba(20, 35, 60, 0.05) 0%,
            rgba(22, 38, 65, 0.12) 100%);
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow:
        0 16px 48px 0 rgba(0, 0, 0, 0.35),
        inset 0 1px 0 0 rgba(220, 235, 255, 0.18);
}
.thinking #bubble-content {
    color: rgba(220, 230, 250, 0.55);     /* 半透明 ~55% 与正常 ~95% 区分 */
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-shadow:
        0 1px 1px rgba(0, 8, 24, 0.3),
        0 0 8px rgba(180, 210, 255, 0.10);
}
.thinking #bubble-content::after {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
    animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.7); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* ━━━━━━━━━━ 输入栏（底部） ━━━━━━━━━━ */
#input-bar {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) + 16px);
    left: 50%;
    transform: translateX(-50%);
    width: min(90%, 600px);
    display: flex;
    gap: 8px;
    padding: 8px;
    border-radius: 28px;
    z-index: 10;

    /* Liquid Glass — 更轻盈，多层镜面 */
    background:
        /* 顶部一道横向高光（玻璃顶部反光） */
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.10) 0%,
            transparent 35%),
        /* 极淡虹彩斜扫 */
        linear-gradient(115deg,
            rgba(180, 220, 255, 0.05) 0%,
            transparent 50%,
            rgba(220, 180, 255, 0.04) 100%),
        /* 暗 tint（轻很多） */
        linear-gradient(180deg,
            rgba(10, 18, 35, 0.18) 0%,
            rgba(14, 24, 46, 0.35) 100%);
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        0 8px 24px 0 rgba(0, 0, 0, 0.30),
        inset 0 1px 0 0 rgba(220, 235, 255, 0.20),
        inset 1px 0 1px 0 rgba(180, 210, 255, 0.06),
        inset -1px 0 1px 0 rgba(220, 190, 255, 0.06),
        inset 0 -1px 1px 0 rgba(0, 0, 0, 0.15);
}
#chat-input {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    outline: none;
    color: #f0f3fb;
    font-size: 17px;
    font-family: inherit;
    -webkit-user-select: text;
}
#chat-input::placeholder { color: rgba(232, 234, 243, 0.45); }
#send-btn {
    width: 40px; height: 40px;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
    flex-shrink: 0;
    background: linear-gradient(135deg, #6ec1ff 0%, #7e8fff 100%);
    box-shadow:
        0 4px 16px 0 rgba(110, 193, 255, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}
#send-btn:active { transform: scale(0.92); }
#send-btn:disabled { opacity: 0.4; cursor: default; }

/* ━━━━━━━━━━ 灵魂卡片 (#soul-card) — 矿石 / 星盘 / 论文 ━━━━━━━━━━
   完全对齐对话气泡的液态玻璃质感：暗底 + 折射 + 白字描边 */
#soul-card {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 60px);
    right: 16px;
    width: min(280px, 90vw);
    max-height: 70vh;
    padding: 22px 20px 18px;
    border-radius: 24px;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px) scale(0.96);
    transition: opacity 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
                transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
    overflow-y: auto;
    color: #ffffff;
    text-shadow:
        0 1px 1px rgba(0, 8, 24, 0.65),
        0 1px 4px rgba(0, 8, 24, 0.45),
        0 0 10px rgba(0, 8, 24, 0.35);

    /* 跟气泡完全同款的多层背景 */
    background:
        radial-gradient(ellipse 60% 35% at 22% 18%,
            rgba(255, 255, 255, 0.26) 0%,
            rgba(220, 240, 255, 0.12) 30%,
            transparent 65%),
        radial-gradient(ellipse 40% 30% at 85% 90%,
            rgba(180, 220, 255, 0.13) 0%,
            transparent 60%),
        linear-gradient(115deg,
            rgba(180, 220, 255, 0.08) 0%,
            transparent 30%,
            rgba(220, 180, 255, 0.07) 60%,
            transparent 85%,
            rgba(180, 220, 255, 0.06) 100%),
        linear-gradient(180deg,
            rgba(20, 35, 60, 0.08) 0%,
            rgba(22, 38, 65, 0.18) 50%,
            rgba(22, 38, 65, 0.28) 100%);

    backdrop-filter: blur(36px) saturate(220%) contrast(1.08);
    -webkit-backdrop-filter: blur(36px) saturate(220%) contrast(1.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-top-color: rgba(255, 255, 255, 0.28);
    box-shadow:
        0 24px 72px 0 rgba(0, 0, 0, 0.50),
        0 8px 24px 0 rgba(60, 90, 200, 0.18),
        inset 0 1px 0 0 rgba(220, 235, 255, 0.32),
        inset 1px 0 1px 0 rgba(180, 210, 255, 0.10),
        inset -1px 0 1px 0 rgba(220, 190, 255, 0.10),
        inset 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
}
#soul-card.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}

/* 卡片关闭按钮 */
.soul-card-close {
    position: absolute;
    top: 8px; right: 12px;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.soul-card-close:active {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.soul-card-tag {
    font-size: 9px;
    letter-spacing: 2.5px;
    color: rgba(180, 210, 255, 0.85);
    text-transform: uppercase;
    margin-bottom: 8px;
    text-shadow: 0 1px 2px rgba(0, 8, 24, 0.5);
}
.soul-card-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #ffffff;
    margin-bottom: 4px;
    word-break: break-all;
    text-shadow:
        0 1px 2px rgba(0, 8, 24, 0.6),
        0 0 12px rgba(140, 180, 255, 0.35);
}
.soul-card-subtitle {
    font-size: 12px;
    color: rgba(220, 230, 250, 0.75);
    margin-bottom: 14px;
    text-shadow: 0 1px 2px rgba(0, 8, 24, 0.5);
}

/* 卡片传送门按钮（点击访问外部 / 知识库）*/
.soul-card-portal {
    position: relative;
    width: 100%;
    height: 64px;
    margin: 14px 0;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    overflow: hidden;
    /* 稍微比卡片本身更"实"一点，看起来是个能点的按钮 */
    background:
        radial-gradient(ellipse 80% 60% at 30% 20%,
            rgba(255, 255, 255, 0.18) 0%,
            transparent 70%),
        linear-gradient(135deg,
            rgba(80, 130, 220, 0.20) 0%,
            rgba(140, 100, 200, 0.15) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-top-color: rgba(255, 255, 255, 0.30);
    box-shadow:
        inset 0 1px 0 0 rgba(220, 235, 255, 0.25),
        inset 0 -1px 1px 0 rgba(0, 0, 0, 0.15),
        0 4px 12px 0 rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}
.soul-card-portal:active {
    transform: scale(0.97);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
        0 0 22px rgba(120, 160, 240, 0.5);
}
.soul-card-ring {
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    animation: ring-spin 8s linear infinite;
}
@keyframes ring-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.soul-card-core {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 10px rgba(180, 220, 255, 0.7);
    z-index: 2;
}
.soul-card-text {
    font-size: 10px;
    letter-spacing: 2.5px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0, 8, 24, 0.5);
    z-index: 2;
}

/* 卡片内信息行 */
.soul-card-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
}
.soul-card-row:last-child { border-bottom: none; }
.soul-card-label {
    color: rgba(180, 210, 255, 0.65);
    font-weight: 600;
    letter-spacing: 2px;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0, 8, 24, 0.4);
}
.soul-card-row > span:last-child {
    color: rgba(255, 255, 255, 0.92);
    text-align: right;
    word-break: break-all;
    text-shadow: 0 1px 2px rgba(0, 8, 24, 0.5);
}

/* 星盘卡片专属 */
.astro-list {
    margin: 6px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.astro-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top-color: rgba(255, 255, 255, 0.14);
    font-size: 12px;
}
.astro-time {
    color: rgba(200, 220, 255, 0.85);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 8, 24, 0.5);
}
.astro-symbol {
    font-size: 15px;
    color: #d4befd;
    flex-shrink: 0;
    text-shadow: 0 0 8px rgba(180, 150, 240, 0.5);
}
.astro-desc {
    color: rgba(255, 255, 255, 0.92);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 8, 24, 0.5);
}
.astro-loading {
    text-align: center;
    color: rgba(180, 210, 255, 0.6);
    font-size: 11px;
    padding: 14px 0;
    animation: pulse 1.5s ease-in-out infinite;
}

/* 手机：卡片改成顶部居中 + 更紧凑 */
@media (max-width: 768px) {
    #soul-card {
        top: calc(env(safe-area-inset-top) + 56px);
        right: 50%;
        transform: translateX(50%) translateY(-10px) scale(0.96);
        width: calc(100vw - 24px);
        max-width: 360px;
    }
    #soul-card.visible {
        transform: translateX(50%) translateY(0) scale(1);
    }
}

/* Lifecycle only: preserve all original knowledge-card and star-chart styling. */
#fufu-knowledge-panel[hidden], #astro-overlay[hidden] { display: none !important; }
#fufu-knowledge-panel #soul-card { z-index: 19020; }
#astro-overlay { z-index: 19030; }