/* ========================================
   TriScope - 響應式樣式
   ======================================== */

/* 隐藏 WordPress 原生后台栏（已用自定义 ⚙ 图标替代） */
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; }

/* Tablet - 1024px */
@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 48px;
    }
    .hero-description { max-width: 100%; }
    .hero-actions { justify-content: center; }
    .hero-visual { max-width: 260px; margin: 0 auto; }
    .hero-logo-wrapper { width: 260px; height: 260px; }

    /* Timeline -> wrap */
    .timeline {
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }
    .timeline::before { display: none; }
    .timeline-step { flex: 0 0 calc(50% - 20px); min-width: 240px; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

    /* Reports */
    .TriScope-reports-grid { grid-template-columns: 1fr; }
}

/* Mobile - 768px */
@media (max-width: 768px) {
    :root {
        --tf-sidebar-w: 100%;
        --tf-header-h: 56px;
    }

    /* Header */
    /* Desktop nav removed — all nav is in 玄藏 panel */
    /* Language switcher: compact text button on mobile (no icon — text is clearer) */
    .lang-switcher { display: block; }
    .lang-switcher-toggle {
        padding: 7px 12px;
        gap: 5px;
        font-size: 0.82rem;
    }
    .lang-switcher-toggle .lang-current { display: inline; }
    .lang-switcher-toggle .lang-arrow { display: inline-block; font-size: 0.62rem; }
    .lang-dropdown { width: 150px; right: 0; left: auto; }
    /* Hero 快速入口气泡：手机端缩小 */
    .hero-bubble {
        padding: 9px 20px;
        font-size: 0.88rem;
        gap: 7px;
    }
    .hero-quicklinks { gap: 10px; margin-bottom: 40px; }
    .hero-quicklinks .hero-bubble { flex: 1 1 0; min-width: 0; justify-content: center; }
    .hero-auth { margin-bottom: 40px; }
    /* Header 间距 */
    .header-right { gap: 6px; }
    /* 顶栏导航：移动端紧凑 */
    .header-nav { gap: 0; }
    .nav-link {
        padding: 6px 8px;
        font-size: 0.8rem;
    }
    .header-login-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    /* 手机端导航栏不显示登录/注册按钮（登录入口在 hero 区域：命理知识/套餐服务下方） */
    .header-login-btn { display: none; }
    /* 用户菜单：移动端紧凑（积分徽标已移除，用户名保留） */
    .user-dropdown-toggle {
        padding: 6px 10px;
        gap: 6px;
    }
    .user-menu-name {
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .user-dropdown-menu { width: 200px; }
    /* 玄藏下拉 UI 已移除（菜单已释放为顶栏导航） */
    /* Tighter header padding */
    .header-container { padding: 0 12px; }
    /* Safe area: add top padding for iPhone notch */
    .TriScope-header {
        padding-top: var(--safe-top);
        height: calc(var(--tf-header-h) + var(--safe-top, 0px));
    }
    /* Mobile: chat input area safe bottom */
    .chat-input-area {
        padding-bottom: calc(10px + var(--safe-bottom, 0px));
    }

    /* Hero */
    .hero-section { padding: calc(var(--tf-header-h) + 20px) 0 50px; }
    /* 手机端标题：中文单行；en/de/fr 因文字长 title_2 换行两行；zh/en 同字号，de/fr 单词长略小 */
    .hero-title { font-size: 2rem; white-space: nowrap; }
    html[lang="de"] .hero-title,
    html[lang="fr"] .hero-title { white-space: normal; font-size: 1.4rem; }
    .hero-visual { max-width: 220px; margin: 0 auto; }
    .hero-logo-wrapper { width: 220px; height: 220px; }
    .hero-scroll-indicator { display: none; }

    /* Bento -> 1 col (mobile) */
    .bento-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .bento-card h3 { font-size: 0.95rem; }
    .bento-card p { font-size: 0.82rem; }
    .features-section .section-header { margin-bottom: 32px; }

    /* Knowledge -> 1 col */
    .knowledge-grid { grid-template-columns: 1fr; }

    /* Timeline -> 2x2 grid (mobile) */
    .timeline {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 16px;
    }
    .timeline-step { flex: 0 0 auto; min-width: 0; }

    /* CTA -> 手机端防溢出：加左右留白、标题/正文强制换行、按钮不超宽 */
    .cta-section { padding: 72px 20px; }
    .cta-content { width: 100%; box-sizing: border-box; }
    .cta-title {
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .cta-text {
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .cta-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    .cta-actions .btn {
        max-width: 100%;
        white-space: normal;
    }

    /* Chat */
    .chat-sidebar {
        position: fixed;
        left: -100%;
        top: var(--tf-header-h);
        bottom: 0;
        z-index: 200;
    }
    .chat-sidebar.open { left: 0; }
    .btn-toggle-sidebar { display: flex; }
    .chat-topbar { padding: 8px 12px; gap: 8px; }
    .chat-mode-selector { display: none; }
    /* 移动端标题切换 */
    .chat-title:not(.chat-title-mobile) { display: none; }
    .chat-title-mobile { display: flex; align-items: center; gap: 4px; font-size: 0.95rem; }
    .mobile-mode-label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* 精简操作按钮 */
    .btn-icon { width: 32px; height: 32px; font-size: 0.85rem; }
    .chat-messages { padding: 16px; }
    .message { max-width: 100%; }
    .quick-prompts { display: none; }
    .reasoning-steps { flex-wrap: wrap; justify-content: center; }
    .reasoning-arrow { display: none; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .footer-legal { flex-wrap: wrap; justify-content: center; gap: 12px; }

    /* Forms */
    .TriScope-auth-card { padding: 28px; }
    .quick-birth-form .form-row { grid-template-columns: 1fr; }

    /* Admin */
    .TriScope-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Register page responsive */
@media (max-width: 768px) {
    .register-card { padding: 32px 24px; }
    .register-form .form-row { grid-template-columns: minmax(0, 1fr); }
}

/* Small Mobile - 480px */
@media (max-width: 480px) {
    .hero-title { font-size: 1.8rem; white-space: nowrap; }
    /* de/fr 单词较长：小字号 + 允许按词换行（title_2 换行两行） */
    html[lang="de"] .hero-title,
    html[lang="fr"] .hero-title { white-space: normal; font-size: 1.3rem; }
    .hero-description { font-size: 0.93rem; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    /* 两个入口横排等宽：命理知识（左）/ 套餐服务（右），平衡对称 */
    .hero-quicklinks { flex-direction: row; width: 100%; gap: 10px; }
    .hero-quicklinks .hero-bubble {
        flex: 1 1 0;
        min-width: 0;
        max-width: 200px;
        justify-content: center;
        padding: 8px 18px;
        font-size: 0.84rem;
    }
    .hero-auth { margin-bottom: 32px; }
    .hero-auth .hero-bubble {
        padding: 8px 18px;
        font-size: 0.84rem;
    }
    .hero-visual { max-width: 180px; margin: 0 auto; }
    .hero-logo-wrapper { width: 180px; height: 180px; }

    .section-title { font-size: 1.5rem; }
    .cta-title { font-size: 1.5rem; }

    /* Header: hide logo subtitle on tiny screens */
    .logo-subtitle { display: none; }
    .logo-icon { width: 28px; height: 28px; }
    .logo-title { font-size: 1rem; }
    /* 顶栏导航：480px 以下极致紧凑 */
    .nav-link {
        padding: 5px 6px;
        font-size: 0.76rem;
    }
    .header-login-btn {
        padding: 5px 10px;
        font-size: 0.76rem;
    }
    .header-right { gap: 4px; }

    .chat-messages { padding: 12px; }
    .message-bubble { padding: 12px 14px; font-size: 0.9rem; }
    .chat-input-area { padding: 10px 8px 8px; height: auto; overflow-y: visible; }
    .input-wrapper { padding: 6px 8px; border-radius: 20px; }
    .chat-input { font-size: 0.87rem; }
    .btn-input-attach { display: none; } /* 小屏隐藏附件按钮节省空间 */
    .chat-sidebar { width: 100%; }
    /* 超级小屏：聊天顶栏更紧凑 */
    .chat-topbar { padding: 6px 10px; gap: 6px; }
    .chat-title-mobile { font-size: 0.85rem; }
    .mobile-mode-label { max-width: 100px; }
    .btn-icon { width: 28px; height: 28px; font-size: 0.75rem; border-radius: 6px; }
    .btn-toggle-sidebar { width: 30px; height: 30px; }
    /* 隐藏导出按钮，只保留清空 */
    #btnExportChat { display: none; }

    .TriScope-stats-grid { grid-template-columns: 1fr; }
    .profile-section { padding: 20px; }
}

/* ============================================
   平台适配 (iOS / Android / Touch)
   ============================================ */

/* iOS: 使用系统滚动条 */
.ios-device .chat-messages,
.ios-device .mobile-nav {
    -webkit-overflow-scrolling: touch;
}

/* iOS: 修复输入框圆角 */
.ios-device input:not([type="checkbox"]):not([type="radio"]):not([type="date"]):not([type="time"]),
.ios-device textarea,
.ios-device select {
    -webkit-appearance: none;
    border-radius: var(--tf-radius-xs);
}
.ios-device input[type="checkbox"],
.ios-device input[type="radio"],
.ios-device input[type="date"],
.ios-device input[type="time"] {
    -webkit-appearance: auto;
    appearance: auto;
}

/* Android: 修复字体渲染 */
.android-device body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 触摸设备: 增大按钮点击区域 */
.touch-device .btn,
.touch-device .nav-menu li a,
.touch-device .mobile-nav-menu li a,
.touch-device .quick-prompt,
.touch-device .lang-item {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* 触摸设备: 禁用 hover 效果（移动端无 hover） */
@media (hover: none) and (pointer: coarse) {
    .bento-card:hover,
    .chat-history-item:hover {
        transform: none !important;
    }
    .bento-card:hover .bento-icon {
        transform: none !important;
    }
}

/* 触摸设备: 点击反馈 */
.touch-device .btn:active,
.touch-device .nav-menu li a:active,
.touch-device .mobile-nav-menu li a:active {
    opacity: 0.7;
    transition: opacity 0.05s;
}

/* ============================================
   Journey & Plans - 合并版面响应式
   ============================================ */
@media (max-width: 768px) {
    .knowledge-section {
        padding: 64px 0 68px;
    }
    .knowledge-section .section-header {
        margin-bottom: 32px;
    }
    .journey-section {
        padding: 64px 0 68px;
    }
    .journey-section .section-header {
        margin-bottom: 32px;
    }
    /* 三脈图竖排 */
    .tri-map {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .tri-node {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 16px;
        gap: 12px;
    }
    .tri-node-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 0;
        border-radius: 13px;
        flex-shrink: 0;
    }
    .tri-node-text {
        align-items: flex-start;
        flex: 1;
        min-width: 0;
    }
    .tri-node-tag {
        margin: 2px 0 4px;
    }
    .tri-node-summary {
        min-height: 0;
    }
    .tri-node-cue {
        margin-top: 0;
        flex-shrink: 0;
    }
    .tri-connector {
        height: 40px;
    }
    .tri-connector::before {
        top: 0;
        bottom: 0;
        left: 41px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, var(--tf-primary), var(--tf-accent));
    }
    .tri-connector-b::before {
        background: linear-gradient(180deg, var(--tf-accent), var(--tf-info));
    }
    .tri-connector-dot {
        top: 50%;
        left: 42px;
        transform: translate(-50%, -50%);
    }
    /* 收费模式胶囊：移动端缩小间距，自动换行 */
    .pricing-map {
        gap: 10px;
    }
    .pricing-node {
        padding: 8px 20px;
        font-size: 0.88rem;
    }
    .pricing-modal {
        padding: 16px;
    }
    .pricing-modal-dialog {
        padding: 26px 20px 28px;
        max-height: 86vh;
    }
    .pricing-modal-close {
        top: 12px;
        right: 12px;
    }
    .tri-modal {
        padding: 16px;
    }
    .tri-modal-dialog {
        padding: 26px 20px 28px;
        max-height: 86vh;
    }
    .tri-modal-close {
        top: 12px;
        right: 12px;
    }
    .auth-modal {
        padding: 14px;
    }
    .auth-modal-dialog {
        max-height: calc(94vh - 28px);
    }
    .auth-modal-dialog .register-card,
    .auth-modal-dialog .login-card {
        padding: 28px 20px;
    }
    .auth-modal-close {
        top: 12px;
        right: 12px;
        width: 30px;
        height: 30px;
    }
    .tri-detail-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 480px) {
    .journey-part-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .journey-part-text h3 {
        font-size: 1.02rem;
    }
    .knowledge-books-list {
        gap: 6px 8px;
    }
    .knowledge-books-list li {
        padding: 7px 8px 7px 14px;
        font-size: 0.78rem;
    }
}

/* ============================================
   多系统适配增强 (iOS / Android / 微信 / 鸿蒙)
   ============================================ */

/* ── iOS Safari 输入框聚焦自动缩放修复 ──
   iOS 对 font-size < 16px 的 input/textarea/select 聚焦时会强制放大页面。
   移动端统一提到 16px，避免聚焦时版面被缩放。 */
@media (max-width: 768px) {
    .chat-input,
    .TriScope-auth-card input,
    .TriScope-auth-card textarea,
    .TriScope-auth-card select,
    .register-card input,
    .register-card textarea,
    .register-card select,
    .login-card input,
    .login-card textarea,
    .login-card select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* ── 触屏设备：消除 300ms 点击延迟 + 去掉点击高亮 ── */
.touch-device {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.touch-device a,
.touch-device button,
.touch-device .btn {
    -webkit-tap-highlight-color: transparent;
}

/* ── iOS 滚动优化：聊天区/侧栏惯性滚动 + 防止橡皮筋抖动 ── */
.ios-device .chat-messages,
.ios-device .chat-history-list,
.ios-device .mobile-nav {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ── 微信内置浏览器适配 ── */
/* X5/XWeb 内核 100vh 与 fixed 定位异常：聊天页高度兜底用 --vh */
.wechat-device .chat-page {
    min-height: calc(var(--vh, 1vh) * 100 - var(--tf-header-h));
}
/* 微信字号放大防护：禁止微信"调整字体大小"影响布局 */
.wechat-device {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}
/* 微信移动端 X5 内核 fixed 定位滚动抖动：侧栏改用 absolute（仅手机端） */
@media (max-width: 768px) {
    .wechat-device .chat-sidebar {
        position: absolute;
    }
}

/* ── 鸿蒙 ArkWeb 内核：字体渲染优化 ── */
.harmony-device body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── 安全区：页脚与弹窗底部适配全面屏手势条 ── */
@media (max-width: 768px) {
    .TriScope-footer .footer-bottom {
        padding-bottom: calc(16px + var(--safe-bottom, 0px));
    }
    .auth-modal-dialog,
    .tri-modal-dialog,
    .pricing-modal-dialog {
        padding-bottom: calc(28px + var(--safe-bottom, 0px));
    }
}

/* 注：键盘弹出时聊天输入区保持可见由 main.js visualViewport 更新 --vh 完成，
   chat-page/chat-input-area 高度随 --vh 收缩，无需额外 fixed 定位处理 */