/* === 全局重置 === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100vh; overflow: hidden; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
body { 
    background: #0f172a; 
    color: #e2e8f0; 
    font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
    font-size: clamp(13px, 0.85vw, 16px);
    -webkit-font-smoothing: antialiased;
}
[v-cloak] { display: none !important; }

/* === 应用外壳 === */
.app-shell { 
    display: flex; 
    height: 100vh; 
    overflow: hidden;
}

/* === 左侧导航 === */
.sidebar { 
    width: clamp(200px, 15vw, 260px);
    height: 100vh; 
    background: #1e1e24; 
    display: flex; 
    flex-direction: column; 
    flex-shrink: 0; 
    border-right: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
}
.sidebar-brand { 
    padding: clamp(10px, 1vw, 16px) clamp(12px, 1.2vw, 18px);
    border-bottom: 1px solid rgba(255,255,255,0.06); 
    flex-shrink: 0; 
}
.sidebar-brand h1 { 
    font-size: clamp(15px, 1.1vw, 18px); 
    font-weight: 700; 
    color: #f1f5f9; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
}
.sidebar-brand span { font-size: clamp(11px, 0.7vw, 13px); color: #64748b; }
.sidebar-nav { 
    flex: 1; 
    padding: clamp(4px, 0.4vw, 8px); 
    overflow-y: auto; 
    min-height: 0; 
}
.sidebar-nav button { 
    width: 100%; 
    text-align: left; 
    padding: clamp(8px, 0.7vw, 11px) clamp(10px, 1vw, 14px); 
    border-radius: clamp(6px, 0.5vw, 8px); 
    font-size: clamp(13px, 0.85vw, 15px); 
    color: #94a3b8; 
    background: transparent; 
    border: none; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: clamp(6px, 0.6vw, 10px); 
    margin-bottom: 1px;
    transition: all 0.15s;
}
.sidebar-nav button:hover { background: rgba(255,255,255,0.04); color: #cbd5e1; }
.sidebar-nav button.active { background: rgba(59,130,246,0.12); color: #60a5fa; }
.sidebar-nav button i { font-size: clamp(14px, 1vw, 17px); width: clamp(16px, 1.2vw, 20px); text-align: center; }
.sidebar-footer { 
    padding: clamp(8px, 0.7vw, 12px) clamp(12px, 1.2vw, 18px); 
    border-top: 1px solid rgba(255,255,255,0.06); 
    flex-shrink: 0; 
    margin-bottom: 30px;
}
.sidebar-footer .user-row { 
    display: flex; 
    align-items: center; 
    gap: clamp(6px, 0.6vw, 10px); 
    margin-bottom: clamp(4px, 0.4vw, 8px); 
}
.sidebar-footer .avatar { 
    width: clamp(26px, 2vw, 32px); 
    height: clamp(26px, 2vw, 32px); 
    border-radius: clamp(5px, 0.4vw, 7px); 
    background: #3b82f6; 
    color: #fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: clamp(12px, 0.9vw, 15px); 
    font-weight: 600; 
    flex-shrink: 0; 
}
.sidebar-footer .uname { font-size: clamp(13px, 0.85vw, 15px); color: #e2e8f0; font-weight: 500; }
.sidebar-footer .vip-tag { font-size: clamp(11px, 0.65vw, 12px); margin-top: 2px; }
.sidebar-footer .exit-btn { 
    width: 100%; 
    padding: clamp(4px, 0.4vw, 6px); 
    border-radius: clamp(4px, 0.35vw, 6px); 
    font-size: clamp(12px, 0.75vw, 14px); 
    color: #64748b; 
    background: transparent; 
    border: 1px solid rgba(255,255,255,0.05); 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 4px;
    transition: all 0.15s;
}
.sidebar-footer .exit-btn:hover { background: rgba(239,68,68,0.08); color: #f87171; border-color: rgba(239,68,68,0.15); }

/* === 主体区域 === */
.main-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* === 日记布局 === */
.diary-layout { flex: 1; display: flex; overflow: hidden; }
.entry-column { 
    width: clamp(260px, 20vw, 340px);
    border-right: 1px solid rgba(255,255,255,0.05); 
    display: flex; 
    flex-direction: column; 
    flex-shrink: 0; 
    background: #0a0f19; 
}
.entry-column .top-bar { padding: clamp(8px, 0.7vw, 12px); }
.entry-column .top-bar button { 
    width: 100%; 
    padding: clamp(8px, 0.7vw, 12px); 
    border-radius: clamp(6px, 0.5vw, 8px); 
    background: #3b82f6; 
    color: #fff; 
    border: none; 
    font-size: clamp(13px, 0.85vw, 15px); 
    font-weight: 500; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 5px;
    transition: all 0.15s;
}
.entry-column .top-bar button:hover { background: #2563eb; }
.entry-column .search-wrap { padding: 0 clamp(8px, 0.7vw, 12px) clamp(4px, 0.4vw, 8px); position: relative; }
.entry-column .search-wrap input { 
    width: 100%; 
    background: rgba(255,255,255,0.04); 
    border: 1px solid rgba(255,255,255,0.06); 
    border-radius: clamp(5px, 0.4vw, 7px); 
    padding: clamp(7px, 0.5vw, 9px) clamp(7px, 0.5vw, 9px) clamp(7px, 0.5vw, 9px) clamp(26px, 2vw, 30px); 
    font-size: clamp(12px, 0.75vw, 14px); 
    color: #e2e8f0; 
    outline: none;
    transition: border-color 0.2s;
}
.entry-column .search-wrap input:focus { border-color: #3b82f6; }
.entry-column .search-wrap i { position: absolute; left: clamp(14px, 1vw, 18px); top: 50%; transform: translateY(-50%); color: #475569; font-size: clamp(12px, 0.75vw, 14px); }
.entry-column .search-wrap .clear-btn { position: absolute; right: clamp(12px, 1vw, 16px); top: 50%; transform: translateY(-50%); color: #64748b; cursor: pointer; padding: 2px; font-size: clamp(12px, 0.75vw, 14px); }
.entry-column .list-wrap { flex: 1; overflow-y: auto; padding: 0 clamp(6px, 0.5vw, 10px) clamp(6px, 0.5vw, 10px); }
.entry-column .count-row { padding: clamp(2px, 0.3vw, 4px) clamp(8px, 0.7vw, 12px); font-size: clamp(11px, 0.65vw, 12px); color: #334155; display: flex; justify-content: space-between; }

.entry-card { 
    padding: clamp(9px, 0.7vw, 12px) clamp(10px, 0.8vw, 14px); 
    border-radius: clamp(6px, 0.5vw, 8px); 
    cursor: pointer; 
    border: 1px solid transparent; 
    margin-bottom: 2px; 
    position: relative;
    transition: all 0.15s;
}
.entry-card:hover { background: rgba(255,255,255,0.03); }
.entry-card.active { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.25); }
.entry-card .mood { font-size: clamp(15px, 1.1vw, 18px); margin-right: 4px; }
.entry-card .title { font-size: clamp(13px, 0.85vw, 15px); color: #e2e8f0; font-weight: 500; }
.entry-card .date { font-size: clamp(11px, 0.65vw, 12px); color: #475569; margin-top: 2px; }
.entry-card .summary { font-size: clamp(11px, 0.7vw, 13px); color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-card .del { 
    position: absolute; right: clamp(4px, 0.4vw, 8px); top: 50%; transform: translateY(-50%); 
    opacity: 0; background: none; border: none; color: #ef4444; cursor: pointer; 
    font-size: clamp(13px, 0.9vw, 16px); padding: 2px 4px; border-radius: 4px; 
    transition: opacity 0.15s;
}
.entry-card:hover .del { opacity: 1; }
.entry-card .del:hover { background: rgba(239,68,68,0.15); }

/* === 编辑器区域 === */
.editor-area { flex: 1; overflow-y: auto; padding: clamp(16px, 1.5vw, 24px) clamp(20px, 2vw, 32px); min-width: 0; }
.editor-area .empty-hint { 
    height: 100%; display: flex; align-items: center; justify-content: center; 
    color: #334155; font-size: clamp(14px, 1vw, 17px); flex-direction: column; gap: clamp(8px, 0.6vw, 12px); 
}
.editor-area .empty-hint i { font-size: clamp(36px, 3vw, 48px); }
.editor-area .title-row { display: flex; align-items: center; gap: clamp(8px, 0.7vw, 12px); margin-bottom: clamp(6px, 0.5vw, 10px); }
.editor-area .title-input { 
    font-size: clamp(20px, 1.6vw, 26px); font-weight: 600; color: #f1f5f9; 
    background: transparent; border: none; width: 100%; outline: none; 
}
.editor-area .title-input::placeholder { color: #475569; }
.editor-area .mood-btn { 
    background: transparent; border: none; font-size: clamp(22px, 1.7vw, 26px); 
    cursor: pointer; padding: 2px 4px; border-radius: 4px; flex-shrink: 0;
}
.editor-area .mood-btn:hover { background: rgba(255,255,255,0.08); }
.editor-area .body-editor { 
    font-size: clamp(16px, 1.1vw, 18px); line-height: 1.85; color: #cbd5e1; 
    min-height: clamp(160px, 15vw, 240px); outline: none; 
}
.editor-area .body-editor:empty::before { content: '写下今天的心情...'; color: #475569; }
.editor-area .action-bar { 
    display: flex; gap: clamp(6px, 0.5vw, 10px); margin-top: clamp(12px, 1vw, 18px); 
    padding-top: clamp(10px, 0.8vw, 16px); border-top: 1px solid rgba(255,255,255,0.05); 
}
.btn-primary { 
    padding: clamp(7px, 0.6vw, 10px) clamp(16px, 1.5vw, 24px); 
    border-radius: clamp(6px, 0.5vw, 8px); font-size: clamp(13px, 0.85vw, 15px); 
    font-weight: 500; cursor: pointer; border: none; background: #3b82f6; color: #fff; 
    display: flex; align-items: center; gap: 5px;
    transition: all 0.15s;
}
.btn-primary:hover { background: #2563eb; }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-ghost { 
    padding: clamp(7px, 0.6vw, 10px) clamp(14px, 1.2vw, 20px); 
    border-radius: clamp(6px, 0.5vw, 8px); font-size: clamp(13px, 0.85vw, 15px); 
    cursor: pointer; background: transparent; color: #64748b; 
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.15s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.04); color: #94a3b8; }

/* === 右侧分析面板 === */
.analysis-panel { 
    width: clamp(280px, 22vw, 380px);
    border-left: 1px solid rgba(255,255,255,0.05); 
    overflow-y: auto; 
    padding: clamp(12px, 1vw, 18px); 
    flex-shrink: 0; 
    background: rgba(30,30,36,0.4); 
}
.analysis-panel .sec { margin-bottom: clamp(10px, 0.8vw, 16px); }
.analysis-panel .sec-label { 
    font-size: clamp(11px, 0.65vw, 12px); text-transform: uppercase; 
    color: #475569; letter-spacing: 0.06em; margin-bottom: 4px; 
}
.analysis-panel .tag-list { display: flex; flex-wrap: wrap; gap: 3px; }
.analysis-panel .tag-list span { 
    padding: clamp(2px, 0.2vw, 4px) clamp(8px, 0.7vw, 12px); 
    border-radius: 99px; font-size: clamp(11px, 0.7vw, 13px); 
    background: rgba(59,130,246,0.1); color: #60a5fa; 
}
.analysis-panel .ai-quote { 
    font-size: clamp(13px, 0.9vw, 15px); color: #e2e8f0; font-style: italic; 
    padding: clamp(8px, 0.6vw, 12px) clamp(10px, 0.8vw, 16px); 
    background: rgba(255,255,255,0.03); border-radius: 6px; 
    border-left: 2px solid #3b82f6; margin-bottom: 8px; 
}
.analysis-panel .ai-text { font-size: clamp(12px, 0.75vw, 14px); color: #94a3b8; line-height: 1.7; margin-bottom: 6px; }
.analysis-panel .ai-sugg { 
    font-size: clamp(12px, 0.75vw, 14px); color: #34d399; line-height: 1.7; 
    padding: clamp(6px, 0.5vw, 10px) clamp(10px, 0.8vw, 16px); 
    background: rgba(52,211,153,0.05); border-radius: 6px; 
}

/* === 视图页面（AI洞察/设置等） === */
.view-page { flex: 1; overflow-y: auto; padding: clamp(12px, 1vw, 20px) clamp(16px, 1.5vw, 28px); }
.view-page h2 { font-size: clamp(17px, 1.3vw, 21px); font-weight: 600; color: #f1f5f9; margin-bottom: clamp(10px, 0.8vw, 16px); }
.settings-card { 
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); 
    border-radius: clamp(6px, 0.5vw, 10px); padding: clamp(10px, 0.7vw, 14px) clamp(12px, 1vw, 18px); 
    margin-bottom: clamp(6px, 0.5vw, 10px); 
}
.settings-card h3 { font-size: clamp(13px, 0.85vw, 15px); color: #e2e8f0; margin-bottom: 3px; }
.settings-card p { font-size: clamp(12px, 0.75vw, 14px); color: #64748b; margin-bottom: 5px; }
.settings-card input, .settings-card select, .settings-card button { font-size: clamp(12px, 0.75vw, 14px); }

/* === AI聊天布局 === */
.chat-layout { flex: 1; display: flex; overflow: hidden; transform: scale(1.5); transform-origin: top left; }
.chat-sessions { 
    width: clamp(200px, 15vw, 250px); border-right: 1px solid rgba(255,255,255,0.05); 
    overflow-y: auto; flex-shrink: 0; padding: clamp(6px, 0.5vw, 10px); 
}
.chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.chat-main > div:last-child { flex-shrink: 0; }

/* === 登录页 === */
.bg-surface { background: #1e1e24; }
.bg-brand { background: #3b82f6; }
.bg-brandDark { background: #2563eb; }
.border-brand { border-color: #3b82f6; }
.text-brand { color: #3b82f6; }

/* === 心情选择器 === */
.mood-picker { position: relative; display: inline-flex; align-items: center; }
.mood-dropdown { 
    position: absolute; top: 110%; left: 0; background: #27272e; 
    border: 1px solid #3b82f6; border-radius: 14px; padding: 8px; 
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; 
    z-index: 50; box-shadow: 0 8px 30px rgba(0,0,0,0.5); min-width: 180px; 
}
.mood-emoji { font-size: 24px; cursor: pointer; padding: 4px; border-radius: 8px; transition: all 0.15s; }
.mood-emoji:hover { background: rgba(59,130,246,0.2); transform: scale(1.2); }

/* === 动画 === */
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.slide-enter-active, .slide-leave-active { transition: all 0.3s ease; }
.slide-enter-from, .slide-leave-to { opacity: 0; transform: translateY(-10px); }
.list-enter-active, .list-leave-active { transition: all 0.4s ease; }
.list-enter-from { opacity: 0; transform: translateX(-20px); }
.list-leave-to { opacity: 0; transform: translateX(20px); }
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.auto-dot { animation: pulse-dot 2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.1); opacity: 1; } }
.auto-breathing { animation: breathe 3s ease-in-out infinite; }

/* === 离线横幅 === */
.offline-banner { 
    position: fixed; top: 0; left: 0; right: 0; z-index: 100; 
    background: #ef4444; color: white; text-align: center; 
    padding: 6px 12px; font-size: 12px; font-weight: 500; display: none; 
}
.offline-banner span { flex: 1; text-align: left; }
.offline-banner .obl-retry { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 2px 10px; border-radius: 4px; cursor: pointer; font-size: 11px; display: flex; align-items: center; gap: 3px; }
.offline-banner .obl-retry:hover { background: rgba(255,255,255,0.25); }
.offline-banner .obl-close { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; font-size: 16px; padding: 2px 4px; line-height: 1; }
.offline-banner .obl-close:hover { color: #fff; }
.offline-banner.show { display: flex; align-items: center; justify-content: center; gap: 10px; animation: slideDown 0.3s ease; }
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* === 分享卡片 === */
.share-preview { 
    position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.9); 
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; 
}
.share-preview canvas { border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.6); max-width: 90vw; max-height: 70vh; }
.share-actions { display: flex; gap: 0.75rem; }
.share-actions button { 
    padding: 0.5rem 1.25rem; border-radius: 10px; font-size: 13px; 
    font-weight: 500; transition: all 0.2s; border: none; cursor: pointer; 
}
.share-actions .btn-save { background: #3b82f6; color: white; }
.share-actions .btn-close { background: #475569; color: #e2e8f0; }

/* === 草稿弹窗 === */
.draft-modal { 
    position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,0.8); 
    display: flex; align-items: center; justify-content: center; 
}
.draft-modal .modal-card { 
    background: #1e1e24; border: 1px solid rgba(255,255,255,0.1); 
    border-radius: 18px; padding: 1.5rem; width: 320px; text-align: center; 
}
.draft-modal .btn-restore { background: #3b82f6; color: white; }
.draft-modal .btn-discard { background: rgba(255,255,255,0.08); color: #94a3b8; }

/* === Toggle开关 === */
.toggle-checkbox:checked + .toggle-label { background-color: #3b82f6; }
.toggle-checkbox:checked + .toggle-label .toggle-dot { transform: translateX(100%); }

/* === 心情日历 === */
.calendar-grid { 
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    gap: clamp(2px, 0.2vw, 4px); 
}
.calendar-day { 
    border-radius: 8px; padding: 4px 2px; text-align: center; 
    transition: all 0.15s; min-height: clamp(38px, 3.5vw, 48px); 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
}
.calendar-day.has-entry { background: #27272e; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; }
.calendar-day.has-entry:hover { border-color: rgba(59,130,246,0.3); }
.calendar-day.empty { background: rgba(255,255,255,0.02); border: 1px solid transparent; }
.calendar-day .day-label { font-size: clamp(14px, 1vw, 17px); color: #64748b; }
.calendar-day .day-emoji { font-size: clamp(14px, 1.1vw, 18px); margin-top: 2px; }

/* === 客服/聊天消息 === */
.msg-bubble-user { 
    background: rgba(59,130,246,0.15); color: #e2e8f0; 
    border-radius: clamp(12px, 1vw, 16px) clamp(12px, 1vw, 16px) clamp(4px, 0.3vw, 6px) clamp(12px, 1vw, 16px);
    padding: clamp(8px, 0.6vw, 12px) clamp(12px, 1vw, 16px);
    font-size: clamp(13px, 0.85vw, 15px); line-height: 1.6;
}
.msg-bubble-ai { 
    background: #27272e; color: #cbd5e1; 
    border-radius: clamp(12px, 1vw, 16px) clamp(12px, 1vw, 16px) clamp(12px, 1vw, 16px) clamp(4px, 0.3vw, 6px);
    padding: clamp(8px, 0.6vw, 12px) clamp(12px, 1vw, 16px);
    font-size: clamp(13px, 0.85vw, 15px); line-height: 1.6;
}

/* === 滚动条美化 === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.1); }