/**
 * mobile.css — 全站移动端统一补丁
 * 覆盖顺序：在所有其他 CSS 之后加载，专门处理移动端边角情况
 */

/* ════════════════════════════════════════════════════════
   全局：触摸友好 & 防溢出
   ════════════════════════════════════════════════════════ */

html {
    /* 防止 iOS 字体缩放 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 所有可点击元素保证最小触摸区域 44px */
@media (max-width: 768px) {
    button,
    .nav-btn,
    .calendar-btn,
    .period-btn,
    .knowledge-tab,
    .result-tab,
    .date-nav-btn {
        min-height: 44px;
    }

    /* 防止水平滚动条 */
    body { overflow-x: hidden; }

    /* 图片自适应 */
    img { max-width: 100%; height: auto; }

    /* 表格横向滚动 */
    .planets-table-wrap,
    .aspects-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .planets-table {
        min-width: 480px;
    }
}

/* ════════════════════════════════════════════════════════
   星盘（chart）— 移动端
   ════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* 星盘图 最大 100% */
    .chart-container {
        max-width: 100%;
    }

    #natal-chart-canvas,
    .chart-canvas {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1;
    }

    /* 星盘 + 摘要 堆叠 */
    .chart-section {
        flex-direction: column;
    }
    .chart-visual,
    .chart-summary {
        min-width: unset;
        width: 100%;
    }

    /* 行星表：滚动容器 */
    .planets-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }

    /* 行星/相位信息卡片 */
    .planet-info-grid,
    .houses-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 行运时间轴 */
    .transit-timeline {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    .planet-info-grid,
    .houses-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ════════════════════════════════════════════════════════
   合盘（synastry）— 移动端
   ════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* VS 分隔符在移动端水平居中 */
    .vs-divider {
        display: flex;
        justify-content: center;
        padding: 0.5rem 0;
    }

    /* 合盘结果区域 */
    .synastry-result {
        padding: 1rem;
    }

    /* 合盘相位列表 */
    .synastry-aspects-list {
        grid-template-columns: 1fr !important;
    }
}

/* ════════════════════════════════════════════════════════
   命理知识库 — 移动端
   ════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .knowledge-container {
        border-radius: 12px;
    }

    .knowledge-content {
        padding: 1rem;
        min-height: 300px;
    }

    .knowledge-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .knowledge-card {
        padding: 1rem;
    }

    .knowledge-card-title { font-size: 1rem; }
    .knowledge-card-icon  { font-size: 1.6rem; }
}

@media (max-width: 480px) {
    .knowledge-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════
   行运分析 — 移动端
   ════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .transit-container { padding: 1rem; }

    .date-selector {
        flex-wrap: wrap;
        gap: 6px;
    }

    .date-nav-btn { padding: 0.45rem 0.7rem; }

    /* 行运结果卡片 */
    .transit-results {
        grid-template-columns: 1fr !important;
    }
}

/* ════════════════════════════════════════════════════════
   八字排盘 — bazi-ui.js 内联样式覆盖
   ════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* 十神网格强制单列（兼容 bazi-ui.js 内联样式和旧版 html） */
    .shi-shen-grid > div[style*="grid-template-columns"],
    .bazi-section div[style*="grid-template-columns: repeat(2"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    /* 旺衰评分列表 sdp-rows 横向滚动 */
    .sdp-rows {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 藏干 wrap */
    .pillar-hide-gan {
        word-break: break-all;
    }
}

@media (max-width: 480px) {
    /* 大运条目字体 */
    .da-yun-gan-zhi { font-size: 16px !important; }
    .da-yun-age     { font-size: 11px; }

    /* 喜用神标签 */
    .xiyong-tag { font-size: 12px; padding: 4px 10px; }

    /* 人生维度卡片 */
    .life-dim-header { padding: 10px 12px; }
    .life-dim-body   { padding: 12px; font-size: 12px; }
    .life-dim-icon   { font-size: 18px; }
    .life-dim-title  { font-size: 13px; }

    /* 健康格 */
    .health-item { padding: 8px 4px; }
    .health-el-name { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════
   弹窗 & 认证
   ════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .modal-content {
        max-height: 90vh;
        padding: 1rem;
    }

    .modal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .modal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ════════════════════════════════════════════════════════
   首页 today-overview 天象概览
   ════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .celestial-positions {
        gap: 6px;
    }
    .celestial-item {
        font-size: 0.8rem;
        padding: 0.4rem 0.7rem;
    }

    .today-overview {
        padding: 1rem;
    }
}

/* ════════════════════════════════════════════════════════
   页脚
   ════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .main-footer {
        padding: 1rem;
        font-size: 0.8rem;
    }
}

/* ════════════════════════════════════════════════════════
   iOS Safari 安全区域（刘海屏）
   ════════════════════════════════════════════════════════ */

@supports (padding: max(0px)) {
    .main-header {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    .main-footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
    /* AI 聊天输入区 */
    .chat-input-area {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}