:root {
    /* --- 核心变量：紫禁书房 (Dark) --- */
    --bg-color: #0d0f12;
    /* 深空黑，比之前更深邃 */
    --bg-rgb: 13, 15, 18;

    --surface-color: #1a1c20;
    --surface-rgb: 26, 28, 32;

    --text-color: #f0f0f0;
    /* 提升亮度 */
    --text-dim: #9aa0a6;

    --gold: #d4af37;
    /* 鎏金：更鲜艳的金色 */
    --gold-dim: #4a3f2f;
    --vermilion: #cd3f3e;
    /* 朱砂：更正的红色 */
    --border-color: #2a2d32;

    /* --- 高净值质感 --- */
    --gold-gradient: linear-gradient(135deg, #bf953f, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c);
    --paper-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");

    --font-serif: "Noto Serif SC", "Songti SC", "SimSun", "Times New Roman", serif;
    --font-mono: "JetBrains Mono", "Courier New", monospace;

    /* --- 流式排版变量 (clamp) --- */
    /* 字体大小：clamp(最小值, 视口单位, 最大值) */
    --fluid-text-xs: clamp(0.625rem, 0.5rem + 0.5vw, 0.75rem);
    /* 10px ~ 12px */
    --fluid-text-sm: clamp(0.75rem, 0.6rem + 0.6vw, 0.875rem);
    /* 12px ~ 14px */
    --fluid-text-base: clamp(0.875rem, 0.7rem + 0.7vw, 1rem);
    /* 14px ~ 16px */
    --fluid-text-lg: clamp(1rem, 0.8rem + 0.8vw, 1.125rem);
    /* 16px ~ 18px */
    --fluid-text-xl: clamp(1.25rem, 1rem + 1vw, 1.5rem);
    /* 20px ~ 24px */
    --fluid-text-2xl: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    /* 24px ~ 40px */
    --fluid-text-3xl: clamp(1.875rem, 1rem + 2vw, 3rem);
    /* 30px ~ 48px */
    --fluid-text-4xl: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
    /* 36px ~ 60px */
    --fluid-text-5xl: clamp(3rem, 2rem + 3vw, 6rem);
    /* 48px ~ 96px */

    /* 间距：基于视口宽度的流式间距 */
    --fluid-space-xs: clamp(0.5rem, 0.25rem + 1vw, 1rem);
    --fluid-space-sm: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
    --fluid-space-md: clamp(1rem, 0.5rem + 1.5vw, 2rem);
    --fluid-space-lg: clamp(1.5rem, 1rem + 2vw, 3rem);
    --fluid-space-xl: clamp(2rem, 1rem + 3vw, 4rem);

    /* 柱子专用字体 */
    --fluid-pillar: clamp(1.5rem, 0.8rem + 2.5vw, 3.75rem);
    /* 24px ~ 60px */
    --fluid-pillar-center: clamp(1.875rem, 1rem + 3vw, 4.5rem);
    /* 30px ~ 72px */

    /* 流式间距 */
    --fluid-gap: clamp(0.5rem, 0.3rem + 1vw, 1rem);
    /* 柱子内部间距 */
    --fluid-gap-pillar: clamp(0.75rem, 0.5rem + 1.25vw, 3rem);
    /* 柱子组间距 */
    --fluid-padding-page: clamp(1.5rem, 1rem + 2vw, 3rem);
    /* 页面内边距 */

    /* iOS Safe Areas */
    --safe-top: env(safe-area-inset-top, 20px);
    --safe-bottom: env(safe-area-inset-bottom, 20px);
    --safe-bottom-btn: calc(var(--safe-bottom) + 20px);
}

/* --- 浅色模式 (Light) --- */
@media (prefers-color-scheme: light) {
    :root {
        --bg-color: #fdfaf5;
        /* 宣纸色：稍微亮一点 */
        --bg-rgb: 253, 250, 245;

        --surface-color: #f0ede6;
        --surface-rgb: 240, 237, 230;

        --text-color: #1a1a1a;
        /* 提升对比度 */
        --text-dim: #5c5c5c;

        --gold: #9d7c4a;
        /* 提升对比度 */
        --gold-dim: #d8cfc0;
        --vermilion: #b5382d;
        --border-color: #e0dbd0;

        --gold-gradient: linear-gradient(135deg, #9d7c4a, #c4a675 40%, #7d633a 100%);
    }
}

/* --- 全局基础 --- */
html {
    -webkit-overflow-scrolling: touch;
}

body {
    background-color: var(--bg-color);
    background: radial-gradient(circle at 50% 35%, var(--surface-color) 0%, var(--bg-color) 85%);
    color: var(--text-color);
    font-family: var(--font-serif);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background 0.5s ease, color 0.5s ease;
}

.texture-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--paper-texture);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
    opacity: 0.15;
    transition: opacity 0.5s ease;
}

/* --- 组件样式 --- */

/* 1. 流金文字 */
.text-gold-gradient {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 10px rgba(191, 149, 63, 0.15);
    font-weight: 700;
}

/* 2. 仪式感输入框 */
.input-ritual {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(198, 168, 124, 0.2);
    color: var(--text-color);
    transition: all 0.5s ease;
    border-radius: 0;
}

.input-ritual:focus {
    outline: none;
    border-bottom-color: var(--gold);
    box-shadow: 0 10px 20px -10px rgba(198, 168, 124, 0.3);
}

.input-ritual::placeholder {
    color: var(--text-dim);
    opacity: 0.3;
}

/* 3. 玻璃/碑刻容器 */
.glass-panel {
    background: rgba(var(--surface-rgb), 0.3);
    border: 1px solid rgba(198, 168, 124, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* 4. 印章 */
.vermilion-seal {
    background: radial-gradient(circle at 30% 30%, #cd3f3e, #8c2a2a);
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(205, 63, 62, 0.2), inset 0 2px 5px rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vermilion-seal:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 20px 40px rgba(205, 63, 62, 0.4);
}

.vermilion-seal:active {
    transform: scale(0.95);
}

/* 退出按钮：iOS 友好，更具触感 */
.btn-logout {
    position: fixed !important;
    top: var(--safe-top) !important;
    right: 20px !important;
    z-index: 100 !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(var(--surface-rgb), 0.4) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
    border-radius: 50% !important;
    color: var(--gold) !important;
    opacity: 0.6 !important;
    transition: all 0.4s ease !important;
}

.btn-logout:hover {
    opacity: 1;
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.1);
    transform: rotate(15deg);
}

.btn-logout:active {
    transform: scale(0.9);
}

/* 交互增强 */
a,
button {
    cursor: pointer;
}

.hover-gold:hover {
    color: var(--gold);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
    transition: all 0.3s ease;
}

/* 5. 登录页墨点 */
.ink-dot {
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 35% 35%, #cd3f3e, #8c2a2a);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 10px rgba(140, 42, 42, 0.4);
    filter: blur(0.5px);
}

.ink-dot.active {
    transform: scale(1);
}

/* 输入容器增强 */
#dots-container {
    padding: 20px 30px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    background: rgba(var(--surface-rgb), 0.2);
    border-radius: 12px;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#dots-container:hover {
    background: rgba(var(--surface-rgb), 0.4);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

#dots-container.focused {
    border-color: var(--gold);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.15);
    background: rgba(var(--surface-rgb), 0.5);
    transform: translateY(-2px);
}

/* --- [修复] Dashboard 聊天窗口样式 (此前缺失导致遮挡) --- */
#chat-overlay {
    /* 默认移出屏幕 */
    transform: translateY(110%);
    /* 缓动动画 */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    z-index: 100;
    pointer-events: none;

    /* 动态背景色 */
    background-color: rgba(var(--bg-rgb), 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* 布局 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
}

#chat-overlay.open {
    transform: translateY(0);
    pointer-events: auto;
}

/* 聊天头部与底部的半透明背景条 */
.chat-bar-bg {
    background-color: rgba(var(--bg-rgb), 0.85);
    /* 跟随系统 */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-color: var(--border-color);
}

/* 快捷键按钮 */
.chip-btn {
    border: 1px solid rgba(212, 175, 55, 0.2);
    background: rgba(var(--surface-rgb), 0.2);
    color: var(--text-dim);
    padding: 12px 20px;
    font-size: 14px;
    letter-spacing: 0.1em;
    font-family: var(--font-serif);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.chip-btn:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.msg-bubble-ai {
    border-left: 2px solid var(--gold);
    padding-left: 16px;
    margin-bottom: 2rem;
}

.msg-bubble-user {
    background: rgba(var(--surface-rgb), 0.3);
    padding: 12px 20px;
    border-radius: 12px 12px 2px 12px;
    border: 1px solid rgba(212, 175, 55, 0.05);
}

/* 辅助类 */
.text-gold {
    color: var(--gold);
}

.text-dim {
    color: var(--text-dim);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* --- 流式排版语义化类 --- */

/* 流式字体大小 */
.text-fluid-xs {
    font-size: var(--fluid-text-xs);
}

.text-fluid-sm {
    font-size: var(--fluid-text-sm);
}

.text-fluid-base {
    font-size: var(--fluid-text-base);
}

.text-fluid-lg {
    font-size: var(--fluid-text-lg);
}

.text-fluid-xl {
    font-size: var(--fluid-text-xl);
}

.text-fluid-2xl {
    font-size: var(--fluid-text-2xl);
}

.text-fluid-3xl {
    font-size: var(--fluid-text-3xl);
}

.text-fluid-4xl {
    font-size: var(--fluid-text-4xl);
}

.text-fluid-5xl {
    font-size: var(--fluid-text-5xl);
}

.text-fluid-pillar {
    font-size: var(--fluid-pillar);
}

.text-fluid-pillar-center {
    font-size: var(--fluid-pillar-center);
}

/* 流式间距 */
.p-fluid-page {
    padding-left: var(--fluid-padding-page);
    padding-right: var(--fluid-padding-page);
}

.p-fluid-sm {
    padding: var(--fluid-space-sm);
}

.p-fluid-md {
    padding: var(--fluid-space-md);
}

.p-fluid-lg {
    padding: var(--fluid-space-lg);
}

.px-fluid-page {
    padding-left: var(--fluid-padding-page);
    padding-right: var(--fluid-padding-page);
}

.py-fluid-sm {
    padding-top: var(--fluid-space-sm);
    padding-bottom: var(--fluid-space-sm);
}

.py-fluid-md {
    padding-top: var(--fluid-space-md);
    padding-bottom: var(--fluid-space-md);
}

.py-fluid-lg {
    padding-top: var(--fluid-space-lg);
    padding-bottom: var(--fluid-space-lg);
}

.pt-fluid-sm {
    padding-top: var(--fluid-space-sm);
}

.pt-fluid-md {
    padding-top: var(--fluid-space-md);
}

.pt-fluid-lg {
    padding-top: var(--fluid-space-lg);
}

.pt-fluid-xl {
    padding-top: var(--fluid-space-xl);
}

.pb-fluid-sm {
    padding-bottom: var(--fluid-space-sm);
}

.pb-fluid-md {
    padding-bottom: var(--fluid-space-md);
}

.pb-fluid-lg {
    padding-bottom: var(--fluid-space-lg);
}

.pb-fluid-xl {
    padding-bottom: var(--fluid-space-xl);
}

.px-fluid-lg {
    padding-left: var(--fluid-space-lg);
    padding-right: var(--fluid-space-lg);
}

.px-fluid-md {
    padding-left: var(--fluid-space-md);
    padding-right: var(--fluid-space-md);
}

.px-fluid-sm {
    padding-left: var(--fluid-space-sm);
    padding-right: var(--fluid-space-sm);
}

.mb-fluid-sm {
    margin-bottom: var(--fluid-space-sm);
}

.mb-fluid-md {
    margin-bottom: var(--fluid-space-md);
}

.mb-fluid-lg {
    margin-bottom: var(--fluid-space-lg);
}

.mb-fluid-xl {
    margin-bottom: var(--fluid-space-xl);
}

.mt-fluid-sm {
    margin-top: var(--fluid-space-sm);
}

.mt-fluid-md {
    margin-top: var(--fluid-space-md);
}

.mt-fluid-lg {
    margin-top: var(--fluid-space-lg);
}

.gap-fluid {
    gap: var(--fluid-gap);
}

.gap-fluid-pillar {
    gap: var(--fluid-gap-pillar);
}

/* 流式高度 */
.h-fluid-line {
    height: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* 移动端水平文字：某些手机浏览器对 vertical-rl 支持不佳，强制使用水平布局 */
.mobile-horizontal-text {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
}

/* 桌面端恢复垂直布局 */
@media (min-width: 768px) {
    .mobile-horizontal-text {
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }

    /* 桌面端优化：更大的点击区域 */
    .vermilion-seal {
        min-width: 64px;
        min-height: 64px;
    }

    .btn-logout {
        right: 32px !important;
    }
}

/* 平板端优化 */
@media (min-width: 640px) and (max-width: 1024px) {
    .p-fluid-page {
        padding-left: var(--fluid-space-md) !important;
        padding-right: var(--fluid-space-md) !important;
    }
}

/* 移动端优化：增强触摸体验 */
@media (max-width: 640px) {
    /* 增大触摸目标 */
    button,
    .vermilion-seal,
    .chip-btn,
    input[type="radio"]+div,
    input[type="checkbox"]+label {
        min-height: 44px;
        min-width: 44px;
    }

    /* 输入框优化：防止 iOS 缩放 */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    /* 减少桌面端悬停效果，优化触摸反馈 */
    .hover\:scale-110:hover {
        transform: none;
    }

    .hover\:opacity-100:hover {
        opacity: 0.7;
    }

    /* 优化玻璃面板在移动端的内边距 */
    .glass-panel {
        padding: 1rem !important;
    }

    /* 优化地点选择器在移动端的高度 */
    #picker-columns {
        height: 50vh !important;
    }
}

/* 动画 */
.fade-in {
    animation: fadeIn 1s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.fade-in-up {
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.glow-breathing {
    animation: breathe 6s ease-in-out infinite;
}

@keyframes breathe {

    0%,
    100% {
        opacity: 0.9;
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
        filter: brightness(1.2);
    }
}

@keyframes shake-light {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

.shake-light {
    animation: shake-light 0.4s ease-in-out;
}