/* ============================================================
   禅释·此刻 — 桌面端布局（2026-10-24 v1）
   仅作用于 >=1024px 的 Web/PWA；移动端样式完全不受影响；
   不涉及微信小程序（wechat-miniprogram 单独一套代码）。
   ============================================================ */

/* 桌面侧栏默认隐藏，移动端不占位 */
.desktop-nav { display: none; }

/* 透明包装层：移动端保持原有同级布局，桌面端用于把资料卡与统计收成一列 */
.profile-main-column { display: contents; }

@media (min-width: 1024px) {
    /* ---------- 全局骨架 ---------- */
    body { background: #EFE9DD; }

    [data-theme="dark"] body { background: #211E1A; }

    #app {
        max-width: none;
        width: 100%;
        margin: 0;
        padding-left: 252px;
        box-sizing: border-box;
        box-shadow: none;
        background: var(--zen-cream);
    }

    /* 启动 / 模式 / 登录 / 注册：不显示侧栏，内容居中 */
    #app:has(#splash-screen.active),
    #app:has(#mode-screen.active),
    #app:has(#login-screen.active),
    #app:has(#register-screen.active) { padding-left: 0; }

    #app:has(#splash-screen.active) .desktop-nav,
    #app:has(#mode-screen.active) .desktop-nav,
    #app:has(#login-screen.active) .desktop-nav,
    #app:has(#register-screen.active) .desktop-nav { display: none; }

    /* ---------- 左侧导航 ---------- */
    .desktop-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 252px;
        padding: 30px 18px 20px;
        box-sizing: border-box;
        background: #FBF7EF;
        border-right: 1px solid rgba(61, 50, 41, 0.08);
        z-index: 50;
    }

    [data-theme="dark"] .desktop-nav {
        background: #332F29;
        border-right-color: rgba(245, 240, 232, 0.08);
    }

    .desktop-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 10px 26px;
    }

    .desktop-brand img { width: 38px; height: 38px; opacity: .9; }

    .desktop-brand-name {
        display: block;
        font-family: var(--font-serif);
        font-size: 20px;
        letter-spacing: 4px;
        color: var(--zen-brown);
        line-height: 1.3;
    }

    .desktop-brand-sub {
        display: block;
        font-size: 11px;
        letter-spacing: 2px;
        color: var(--zen-gray);
        opacity: .7;
        margin-top: 2px;
    }

    .desktop-nav-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: 1;
    }

    .desktop-nav .nav-btn {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        padding: 13px 16px;
        border-radius: 12px;
        font-size: 15px;
        color: var(--zen-gray);
        transition: background .2s ease, color .2s ease;
    }

    .desktop-nav .nav-btn .nav-icon-img { width: 22px; height: 22px; }
    .desktop-nav .nav-btn .nav-label { font-size: 15px; letter-spacing: 1px; }

    [data-theme="dark"] .desktop-nav .nav-icon-img {
        filter: invert(1) brightness(1.35);
        opacity: .78;
    }

    .desktop-nav .nav-btn:hover {
        background: rgba(139, 115, 85, .08);
        color: var(--zen-dark);
    }

    .desktop-nav .nav-btn:focus-visible {
        outline: 2px solid var(--zen-brown);
        outline-offset: 2px;
    }

    /* 桌面侧栏用整块背景表示选中，不使用移动端底部导航的下划线 */
    .desktop-nav .nav-btn.active::after { display: none; }

    /* 选中态由当前激活的 screen 推导，手机端底部导航逻辑不变 */
    #app:has(#main-screen.active) .desktop-nav [data-screen="home"],
    #app:has(#meditation-screen.active) .desktop-nav [data-screen="home"],
    #app:has(#reminder-screen.active) .desktop-nav [data-screen="home"],
    #app:has(#emotion-trend-screen.active) .desktop-nav [data-screen="home"],
    #app:has(#chat-screen.active) .desktop-nav [data-screen="chat"],
    #app:has(#journal-screen.active) .desktop-nav [data-screen="journal"],
    #app:has(#journal-editor-screen.active) .desktop-nav [data-screen="journal"],
    #app:has(#journal-detail-screen.active) .desktop-nav [data-screen="journal"],
    #app:has(#profile-screen.active) .desktop-nav [data-screen="profile"],
    #app:has(#about-screen.active) .desktop-nav [data-screen="profile"] {
        background: rgba(139, 115, 85, .12);
        color: var(--zen-brown);
        font-weight: 600;
        box-shadow: inset 3px 0 0 var(--zen-brown);
    }

    [data-theme="dark"] .desktop-nav .nav-btn.active {
        background: rgba(201, 169, 110, .14);
        color: var(--zen-gold);
        box-shadow: inset 3px 0 0 var(--zen-gold);
    }

    .desktop-nav-footer {
        padding: 16px 10px 0;
        border-top: 1px solid rgba(61, 50, 41, .08);
        text-align: left;
    }

    [data-theme="dark"] .desktop-nav-footer {
        border-top-color: rgba(245, 240, 232, 0.08);
    }

    .desktop-nav-footer .version { font-size: 11px; margin: 0; }
    .desktop-nav-footer .icp { font-size: 11px; margin: 4px 0 0; opacity: .55; }
    .desktop-nav-footer .icp a { color: inherit; text-decoration: none; }

    /* 桌面端隐藏移动底栏与主页面重复备案号 */
    #main-screen .bottom-nav { display: none; }
    .main-icp { display: none; }

    /* ---------- 页头统一 ---------- */
    .status-bar { padding: 16px 44px; }
    .chat-header,
    .journal-header,
    .meditation-header,
    .reminder-header,
    .trend-header,
    .profile-header,
    .about-header { padding: 16px 44px; }

    /* ---------- 启动 / 模式 ---------- */
    .splash-content { max-width: 460px; }
    .splash-content .zen-circle { width: 168px; height: 168px; }
    .app-title { font-size: 52px; }

    #mode-screen .mode-content { max-width: 760px; padding: 40px 0; }
    #mode-screen .mode-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        width: 100%;
    }
    #mode-screen .mode-btn { height: 100%; }

    /* ---------- 登录 / 注册 ---------- */
    .register-content { max-width: 460px; margin: 0 auto; }

    /* ---------- 首页：桌面仪表盘 ---------- */
    #main-screen .scrollable-content {
        display: grid;
        grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr);
        grid-template-areas:
            "hero stats"
            "mood actions"
            "insight insight";
        gap: 20px 22px;
        align-items: stretch;
        width: 100%;
        max-width: 1240px;
        margin: 0 auto;
        padding: 28px 44px 48px;
        box-sizing: border-box;
    }

    /* 顶部：导师语录 + 今日数据 */
    .master-section {
        grid-area: hero;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 34px;
        padding: 26px 32px;
        overflow: hidden;
        text-align: left;
        background: linear-gradient(125deg, rgba(201, 169, 110, .14), rgba(250, 248, 243, .9) 62%);
        border: 1px solid rgba(139, 115, 85, .1);
        border-radius: var(--radius-lg);
    }
    [data-theme="dark"] .master-section {
        background: linear-gradient(125deg, rgba(201, 169, 110, .12), rgba(61, 56, 48, .9) 62%);
        border-color: rgba(245, 240, 232, .08);
    }
    .master-section .master-card { margin: 0; flex: 0 0 auto; }
    .master-section .master-avatar { width: 92px; height: 92px; margin: 0; }
    .master-section .master-image-img { width: 92px; height: 92px; }
    .master-section .master-dialogue { width: auto; max-width: 520px; margin: 0; }
    .master-section .dialogue-bubble {
        padding: 20px 26px;
        border: 1px solid var(--zen-beige);
        box-shadow: var(--shadow-sm);
    }
    .master-section .dialogue-bubble::before {
        top: 50%;
        left: -8px;
        transform: translateY(-50%);
        border: 8px solid transparent;
        border-right-color: var(--zen-white);
        border-left: 0;
        border-bottom-color: transparent;
    }
    .master-section .dialogue-text { font-size: 18px; }

    .today-stats {
        grid-area: stats;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 22px;
        background: var(--zen-white);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
    }
    .stats-title { margin-bottom: 14px; padding: 0; }
    .stats-grid { gap: 10px; }
    .today-stats .stat-card {
        padding: 18px 8px;
        background: var(--zen-cream);
        box-shadow: none;
    }
    .today-stats .stat-card:hover { box-shadow: var(--shadow-sm); }
    .stat-value { font-size: 28px; }

    /* 中部：感受记录 + 快捷功能 */
    .mood-input-section {
        grid-area: mood;
        margin: 0;
        padding: 24px;
    }
    .quick-tags {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 18px;
    }
    .quick-tags-row { display: contents; }
    .tag-btn { min-width: 0; max-width: none; padding: 12px 8px; }
    .mood-input-wrapper { gap: 14px; }
    #mood-text { height: 86px; }

    .core-functions {
        grid-area: actions;
        padding: 22px;
        background: var(--zen-white);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
    }
    .functions-title { margin-bottom: 14px; padding: 0; }
    .functions-grid { gap: 10px; }
    .func-btn {
        padding: 18px 12px;
        background: var(--zen-cream);
        box-shadow: none;
    }
    .func-btn:hover { background: #F2EAD9; box-shadow: var(--shadow-sm); }
    [data-theme="dark"] .func-btn:hover { background: rgba(201, 169, 110, .12); }
    .func-icon-wrapper { width: 48px; height: 48px; margin-bottom: 8px; background: rgba(255, 255, 255, .55); }
    [data-theme="dark"] .func-icon-wrapper { background: rgba(245, 240, 232, .06); }

    /* 底部：洞察横向铺开 */
    .daily-insight { grid-area: insight; margin: 0; padding: 22px; }
    .insight-header { margin-bottom: 12px; }
    .insight-content {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
    .insight-item { height: 100%; }

    @media (min-width: 1200px) {
        .quick-tags { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    }

    @media (max-width: 1199px) {
        .master-section { gap: 20px; padding: 24px; }
        .master-section .dialogue-bubble { padding: 18px 20px; }
        .master-section .dialogue-text { font-size: 17px; }
    }

    /* ---------- 对话 ---------- */
    #chat-screen .chat-container { width: 100%; max-width: 1080px; margin: 0 auto; }
    .chat-messages { padding: 28px 12px; gap: 18px; }
    .message-content { font-size: 16px; max-width: 72%; }
    .chat-input-area { padding: 14px 12px 28px; }
    #chat-input { font-size: 16px; }

    /* ---------- 拾绪 ---------- */
    #journal-screen .journal-container { width: 100%; max-width: 1040px; margin: 0 auto; padding: 28px 12px; }
    .timeline-item { padding: 20px 24px; }
    #journal-editor-screen .journal-editor-container { width: 100%; max-width: 900px; margin: 0 auto; padding: 28px 12px; }
    #journal-detail-screen .journal-detail-container { width: 100%; max-width: 860px; margin: 0 auto; padding: 28px 12px; }

    /* ---------- 冥想 / 提醒 ---------- */
    #meditation-screen .meditation-container { width: 100%; max-width: 900px; margin: 0 auto; padding: 28px; }
    #reminder-screen .reminder-container { width: 100%; max-width: 900px; margin: 0 auto; padding: 28px 12px; }

    /* ---------- 情绪趋势：两张图并排 ---------- */
    #emotion-trend-screen .trend-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        align-items: start;
        width: 100%;
        max-width: 1120px;
        margin: 0 auto;
        padding: 28px 12px;
        box-sizing: border-box;
    }
    #emotion-trend-screen .trend-stats { grid-column: 1 / -1; }
    #emotion-trend-screen .chart-wrapper {
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #emotion-trend-screen .chart-wrapper canvas { max-width: 100%; height: auto; }
    #emotion-trend-screen .chart-wrapper .chart-title { align-self: flex-start; }
    #emotion-trend-screen .trend-insights { grid-column: 1 / -1; }

    /* ---------- 我的 ---------- */
    #profile-screen .profile-container {
        display: grid;
        grid-template-columns: 340px minmax(0, 1fr);
        gap: 22px;
        align-items: start;
        width: 100%;
        max-width: 1120px;
        margin: 0 auto;
        padding: 28px 12px;
        box-sizing: border-box;
    }
    #profile-screen .profile-main-column {
        display: flex;
        flex-direction: column;
        gap: 22px;
        min-width: 0;
    }
    #profile-screen .profile-card,
    #profile-screen .profile-stats { margin-bottom: 0; }
    #profile-screen .profile-card,
    #profile-screen .profile-stats { grid-column: auto; grid-row: auto; }
    #profile-screen .profile-menu { grid-column: 2; grid-row: 1; }

    /* ---------- 关于 ---------- */
    #about-screen .about-container { max-width: 900px; margin: 0 auto; padding: 32px 24px 48px; }
    #about-screen .about-title { width: fit-content; margin: 0 auto 6px; }
    .about-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
}