:root {
       --bg: #0b0d1a;
       --surface: rgba(24, 28, 48, 0.72);
       --border: rgba(140, 160, 220, 0.14);
       --text: #e6e9f5;
       --text-dim: #8a92b0;
       --accent: #a78bfa;
       --accent-2: #7dd3fc;
       --accent-3: #f0abfc;
       --bubble-user: linear-gradient(135deg, #7c6cf0, #a78bfa);
       --bubble-ai: rgba(36, 42, 68, 0.85);
       --safe-top: env(safe-area-inset-top, 0px);
       --safe-bottom: env(safe-area-inset-bottom, 0px);
     
       /* 情绪色（会被 JS 覆盖） */
       --emotion-color: #a78bfa;
       --emotion-glow: rgba(167, 139, 250, 0.4);
     }
     
     /* 情绪主题 */
     body[data-emotion="joy"] {
       --emotion-color: #fbbf24;
       --emotion-glow: rgba(251, 191, 36, 0.5);
     }
     body[data-emotion="sadness"] {
       --emotion-color: #60a5fa;
       --emotion-glow: rgba(96, 165, 250, 0.45);
     }
     body[data-emotion="anger"] {
       --emotion-color: #f87171;
       --emotion-glow: rgba(248, 113, 113, 0.5);
     }
     body[data-emotion="anticipation"] {
       --emotion-color: #f0abfc;
       --emotion-glow: rgba(240, 171, 252, 0.5);
     }
     body[data-emotion="trust"] {
       --emotion-color: #34d399;
       --emotion-glow: rgba(52, 211, 153, 0.45);
     }
     body[data-emotion="calm"] {
       --emotion-color: #a78bfa;
       --emotion-glow: rgba(167, 139, 250, 0.4);
     }
     
     body[data-theme="light"] {
       --bg: #f4f5fb;
       --surface: rgba(255, 255, 255, 0.85);
       --border: rgba(120, 130, 180, 0.18);
       --text: #1a1f36;
       --text-dim: #6a7188;
       --bubble-ai: rgba(240, 242, 250, 0.9);
     }
     
     * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
     html, body { height: 100%; overflow: hidden; }
     
     body {
       font-family: -apple-system, "PingFang SC", "SF Pro Display", "Microsoft YaHei", sans-serif;
       background: var(--bg);
       color: var(--text);
       font-size: 15px;
       line-height: 1.6;
       overscroll-behavior: none;
       transition: background 1.2s ease;
     }
     
     /* ============ 动态背景 ============ */
     .bg-layer {
       position: fixed;
       inset: 0;
       z-index: 0;
       pointer-events: none;
       overflow: hidden;
     }
     
     .bg-stars {
       position: absolute;
       inset: 0;
       background:
         radial-gradient(1px 1px at 20% 30%, rgba(200,220,255,.7), transparent),
         radial-gradient(1px 1px at 60% 70%, rgba(200,220,255,.5), transparent),
         radial-gradient(1px 1px at 80% 20%, rgba(220,200,255,.6), transparent),
         radial-gradient(1.5px 1.5px at 40% 80%, rgba(180,220,255,.5), transparent),
         radial-gradient(1px 1px at 90% 60%, rgba(255,200,240,.5), transparent),
         radial-gradient(1px 1px at 10% 90%, rgba(200,220,255,.4), transparent);
       animation: twinkle 6s ease-in-out infinite;
     }
     @keyframes twinkle {
       0%, 100% { opacity: .8; }
       50% { opacity: 1; }
     }
     
     .bg-glow {
       position: absolute;
       border-radius: 50%;
       filter: blur(90px);
       opacity: 0.35;
       animation: float 20s ease-in-out infinite;
       transition: background 1.5s ease;
     }
     .bg-glow-1 {
       width: 340px; height: 340px;
       background: radial-gradient(circle, var(--emotion-color), transparent 70%);
       top: -100px; left: -80px;
     }
     .bg-glow-2 {
       width: 400px; height: 400px;
       background: radial-gradient(circle, var(--accent-2), transparent 70%);
       bottom: -140px; right: -120px;
       animation-delay: -9s;
     }
     .bg-glow-3 {
       width: 300px; height: 300px;
       background: radial-gradient(circle, var(--accent-3), transparent 70%);
       top: 40%; left: 50%;
       opacity: 0.15;
       animation-delay: -14s;
     }
     
     @keyframes float {
       0%, 100% { transform: translate(0, 0) scale(1); }
       33% { transform: translate(40px, -30px) scale(1.1); }
       66% { transform: translate(-30px, 20px) scale(0.95); }
     }
     
     /* 极光条 */
     .bg-aurora {
       position: absolute;
       top: -20%;
       left: -50%;
       width: 200%;
       height: 60%;
       background: linear-gradient(
         180deg,
         transparent 0%,
         var(--emotion-glow) 40%,
         transparent 100%
       );
       opacity: 0.12;
       filter: blur(60px);
       animation: auroraShift 15s ease-in-out infinite;
       transition: background 1.5s ease;
     }
     @keyframes auroraShift {
       0%, 100% { transform: translateX(-10%) skewY(-2deg); opacity: 0.1; }
       50% { transform: translateX(10%) skewY(2deg); opacity: 0.18; }
     }
     
     /* 心跳波纹（页面级） */
     .heartbeat-wave {
       position: fixed;
       inset: 0;
       pointer-events: none;
       z-index: 1;
     }
     .heartbeat-wave::before,
     .heartbeat-wave::after {
       content: "";
       position: absolute;
       top: 50%;
       left: 50%;
       width: 10px; height: 10px;
       border-radius: 50%;
       border: 1px solid var(--emotion-color);
       opacity: 0;
       transform: translate(-50%, -50%);
     }
     .heartbeat-wave.beat::before {
       animation: ripple 1.6s ease-out;
     }
     .heartbeat-wave.beat::after {
       animation: ripple 1.6s ease-out 0.25s;
     }
     @keyframes ripple {
       0% { width: 10px; height: 10px; opacity: 0.5; }
       100% { width: 500px; height: 500px; opacity: 0; }
     }
     
     /* ============ 页面 ============ */
     .page {
       position: relative;
       z-index: 2;
       height: 100dvh;
       height: 100vh;
       display: flex;
       flex-direction: column;
     }
     .hidden { display: none !important; }
     
     /* ============ 登录页 ============ */
     .login-page {
       align-items: center;
       justify-content: center;
       padding: 24px;
       padding-top: calc(24px + var(--safe-top));
       padding-bottom: calc(24px + var(--safe-bottom));
     }
     
     .login-card {
       width: 100%;
       max-width: 380px;
       background: var(--surface);
       backdrop-filter: blur(24px);
       -webkit-backdrop-filter: blur(24px);
       border: 1px solid var(--border);
       border-radius: 24px;
       padding: 40px 28px 32px;
       text-align: center;
       box-shadow: 0 20px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
     }
     
     .avatar-ring {
       width: 96px; height: 96px;
       margin: 0 auto 20px;
       border-radius: 50%;
       position: relative;
       display: flex; align-items: center; justify-content: center;
     }
     .avatar-ring::before {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: 50%;
       background: conic-gradient(from 0deg, var(--emotion-color), var(--accent-2), var(--accent-3), var(--emotion-color));
       animation: spin 8s linear infinite;
       transition: background 1.2s ease;
     }
     .avatar-ring::after {
       content: "";
       position: absolute;
       inset: 3px;
       border-radius: 50%;
       background: var(--bg);
     }
     .avatar-core {
       width: 72px; height: 72px;
       border-radius: 50%;
       background: radial-gradient(circle at 30% 30%, var(--emotion-color), var(--accent) 70%);
       z-index: 1;
       box-shadow: 0 0 40px var(--emotion-glow);
       transition: background 1s ease, box-shadow 1s ease;
       background-size: cover;
       background-position: center;
     }
     .avatar-pulse {
       position: absolute;
       inset: -6px;
       border-radius: 50%;
       border: 1px solid var(--emotion-color);
       opacity: 0;
       animation: pulseRing 2.5s ease-out infinite;
       z-index: 0;
     }
     @keyframes spin { to { transform: rotate(360deg); } }
     @keyframes pulseRing {
       0% { transform: scale(1); opacity: 0.6; }
       100% { transform: scale(1.25); opacity: 0; }
     }
     
     .brand {
       font-size: 26px;
       font-weight: 600;
       letter-spacing: 4px;
       background: linear-gradient(135deg, var(--emotion-color), var(--accent-2));
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
       margin-bottom: 6px;
       transition: background 1s ease;
     }
     .brand-sub {
       font-size: 11px;
       color: var(--text-dim);
       letter-spacing: 2px;
       margin-bottom: 28px;
     }
     
     .field { margin-bottom: 12px; }
     .field input {
       width: 100%;
       padding: 14px 18px;
       background: rgba(10, 12, 24, .6);
       border: 1px solid var(--border);
       border-radius: 14px;
       color: var(--text);
       font-size: 15px;
       font-family: inherit;
       outline: none;
       transition: border-color .2s, box-shadow .2s;
     }
     .field input::placeholder { color: #555e7a; }
     .field input:focus {
       border-color: var(--emotion-color);
       box-shadow: 0 0 0 3px var(--emotion-glow);
     }
     
     .btn-primary {
       width: 100%;
       padding: 14px;
       margin-top: 8px;
       background: linear-gradient(135deg, var(--accent), var(--emotion-color));
       color: #fff;
       border: none;
       border-radius: 14px;
       font-size: 16px;
       font-weight: 500;
       letter-spacing: 2px;
       cursor: pointer;
       transition: transform .15s, box-shadow .3s;
       box-shadow: 0 8px 24px var(--emotion-glow);
     }
     .btn-primary:active { transform: scale(.98); }
     
     .err {
       color: var(--accent-3);
       font-size: 13px;
       margin-top: 12px;
       min-height: 18px;
     }
     
     /* ============ 聊天页 ============ */
     .chat-page {
       max-width: 720px;
       margin: 0 auto;
       width: 100%;
     }
     
     header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 12px 18px;
       padding-top: calc(12px + var(--safe-top));
       background: rgba(11, 13, 26, .75);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       border-bottom: 1px solid var(--border);
       flex-shrink: 0;
     }
     
     .header-left { display: flex; align-items: center; gap: 12px; }
     
     .avatar-wrap {
       position: relative;
       width: 44px; height: 44px;
     }
     
     .mini-avatar {
       width: 44px; height: 44px;
       border-radius: 50%;
       background: radial-gradient(circle at 30% 30%, var(--emotion-color), var(--accent) 70%);
       box-shadow: 0 0 20px var(--emotion-glow);
       transition: background 1s ease, box-shadow 1s ease, transform .2s;
       background-size: cover;
       background-position: center;
       position: relative;
       z-index: 2;
     }
     
     .avatar-pulse-sm {
       position: absolute;
       inset: -3px;
       border-radius: 50%;
       border: 1px solid var(--emotion-color);
       opacity: 0;
       z-index: 1;
     }
     .avatar-pulse-sm.beat {
       animation: pulseBeat 1.4s ease-out;
     }
     @keyframes pulseBeat {
       0% { transform: scale(1); opacity: 0.7; }
       100% { transform: scale(1.5); opacity: 0; }
     }
     
     .emotion-ring {
       position: absolute;
       inset: -4px;
       border-radius: 50%;
       border: 1.5px dashed var(--emotion-color);
       opacity: 0.4;
       animation: rotateSlow 12s linear infinite;
       z-index: 0;
       transition: border-color 1s ease;
     }
     @keyframes rotateSlow {
       to { transform: rotate(360deg); }
     }
     
     .title { font-size: 15px; font-weight: 600; color: var(--text); }
     .status {
       font-size: 11px;
       color: var(--text-dim);
       margin-top: 1px;
       display: flex;
       align-items: center;
       gap: 5px;
     }
     .status-dot {
       width: 6px; height: 6px;
       border-radius: 50%;
       background: #34d399;
       box-shadow: 0 0 8px #34d399;
       animation: statusPulse 2s ease-in-out infinite;
     }
     @keyframes statusPulse {
       0%, 100% { opacity: 1; }
       50% { opacity: 0.4; }
     }
     
     .header-actions { display: flex; gap: 4px; }
     
     .btn-icon {
       background: none;
       border: none;
       color: var(--text-dim);
       font-size: 18px;
       padding: 8px;
       cursor: pointer;
       border-radius: 10px;
       transition: background .2s, color .2s;
     }
     .btn-icon:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
     
     /* ============ 情绪条 ============ */
     .emotion-bar {
       padding: 8px 18px 4px;
       flex-shrink: 0;
     }
     .emotion-chip {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 4px 12px;
       background: rgba(255, 255, 255, 0.04);
       border: 1px solid var(--border);
       border-radius: 14px;
       font-size: 12px;
       color: var(--text-dim);
       transition: all 1s ease;
     }
     .emotion-dot {
       width: 8px; height: 8px;
       border-radius: 50%;
       background: var(--emotion-color);
       box-shadow: 0 0 10px var(--emotion-glow);
       transition: all 1s ease;
       animation: emotionPulse 2s ease-in-out infinite;
     }
     @keyframes emotionPulse {
       0%, 100% { transform: scale(1); }
       50% { transform: scale(1.25); }
     }
     
     /* ============ 消息列表 ============ */
     .messages {
       flex: 1;
       overflow-y: auto;
       padding: 16px;
       display: flex;
       flex-direction: column;
       gap: 14px;
       scroll-behavior: auto;
       -webkit-overflow-scrolling: touch;
     }
     .messages::-webkit-scrollbar { width: 0; }
     
     .msg {
       max-width: 78%;
       padding: 11px 15px;
       border-radius: 18px;
       font-size: 15px;
       line-height: 1.55;
       white-space: pre-wrap;
       word-break: break-word;
       animation: fadeIn .3s ease;
       position: relative;
     }
     
     @keyframes fadeIn {
       from { opacity: 0; transform: translateY(8px); }
       to { opacity: 1; transform: translateY(0); }
     }
     
     .msg.user {
       align-self: flex-end;
       background: var(--bubble-user);
       color: #fff;
       border-bottom-right-radius: 6px;
       box-shadow: 0 4px 16px rgba(124, 108, 240, .3);
     }
     
     .msg.assistant {
       align-self: flex-start;
       background: var(--bubble-ai);
       color: var(--text);
       border: 1px solid var(--border);
       border-bottom-left-radius: 6px;
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
       box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
       border-left: 2px solid var(--emotion-color);
       transition: border-color 1s ease;
     }
     
     .msg img {
       max-width: 100%;
       max-height: 260px;
       border-radius: 12px;
       display: block;
       cursor: pointer;
     }
     
     .msg .loc-badge {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       font-size: 12px;
       opacity: .75;
       color: var(--text-dim);
       letter-spacing: .3px;
     }
     
     .msg.image {
       padding: 6px;
       background: transparent !important;
       border: none !important;
       box-shadow: none !important;
     }
     
     .msg-time {
       font-size: 10.5px;
       color: var(--text-dim);
       margin-top: 5px;
       opacity: .55;
       letter-spacing: .3px;
       user-select: none;
     }
     .msg.user .msg-time { text-align: right; opacity: .7; }
     
     /* TTS */
     .msg-actions {
       display: flex;
       gap: 6px;
       margin: 2px 6px 8px 6px;
       opacity: .45;
       transition: opacity .2s;
     }
     .msg-actions:hover { opacity: 1; }
     .msg-actions.assistant { align-self: flex-start; padding-left: 4px; }
     .msg-actions.user { align-self: flex-end; padding-right: 4px; }

     .tts-btn {
       width: 24px;
       height: 24px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 0;
       font-size: 10px;
       line-height: 1;
       color: var(--text-dim);
       background: transparent;
       border: 1px solid var(--border);
       border-radius: 50%;
       cursor: pointer;
       transition: all .2s;
     }
     .tts-btn:hover { color: var(--emotion-color); border-color: var(--emotion-color); }
     .tts-btn.playing { color: var(--accent-3); border-color: var(--accent-3); }
     
     /* ============ 输入栏 ============ */
     .input-bar {
       display: flex;
       gap: 10px;
       padding: 12px 16px;
       padding-bottom: calc(12px + var(--safe-bottom));
       background: rgba(11, 13, 26, .85);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       border-top: 1px solid var(--border);
       flex-shrink: 0;
       align-items: flex-end;
     }
     
     .btn-attach {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 38px;
       height: 38px;
       min-width: 38px;
       padding: 0;
       background: rgba(30, 34, 56, .7);
       border: 1px solid var(--border);
       border-radius: 12px;
       color: var(--text-dim);
       cursor: pointer;
       transition: all .18s ease;
       -webkit-tap-highlight-color: transparent;
     }
     .btn-attach svg { display: block; }
     .btn-attach:hover {
       background: rgba(40, 46, 72, .9);
       color: var(--text);
       border-color: rgba(255, 255, 255, .12);
     }
     .btn-attach:active { transform: scale(.95); }
     .btn-attach:hover { background: rgba(40, 46, 72, .9); color: var(--text); }
     
     .input-bar textarea {
       flex: 1;
       resize: none;
       padding: 11px 16px;
       background: rgba(20, 24, 42, .8);
       border: 1px solid var(--border);
       border-radius: 22px;
       color: var(--text);
       font-size: 15px;
       font-family: inherit;
       line-height: 1.5;
       outline: none;
       max-height: 120px;
       transition: border-color .2s, box-shadow .2s;
     }
     .input-bar textarea::placeholder { color: #555e7a; }
     .input-bar textarea:focus {
       border-color: var(--emotion-color);
       box-shadow: 0 0 0 3px var(--emotion-glow);
     }
     
     .btn-send {
       width: 44px; height: 44px;
       min-width: 44px;
       border-radius: 50%;
       background: linear-gradient(135deg, var(--accent), var(--emotion-color));
       color: #fff;
       border: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 4px 16px var(--emotion-glow);
       transition: transform .15s, box-shadow .3s, background 1s ease;
     }
     .btn-send:active { transform: scale(.94); }
     
     /* ============ 面板 ============ */
     .sheet {
       position: fixed; inset: 0; z-index: 100;
       display: flex; align-items: flex-end; justify-content: center;
     }
     .sheet-mask {
       position: absolute; inset: 0;
       background: rgba(0, 0, 0, .5);
       backdrop-filter: blur(4px);
     }
     .sheet-body {
       position: relative;
       background: var(--surface);
       backdrop-filter: blur(24px);
       border: 1px solid var(--border);
       border-bottom: none;
       border-radius: 24px 24px 0 0;
       padding: 24px 20px;
       padding-bottom: calc(24px + var(--safe-bottom));
       width: 100%;
       max-width: 520px;
       animation: slideUp .3s ease;
     }
     @keyframes slideUp {
       from { transform: translateY(100%); }
       to { transform: translateY(0); }
     }
     .sheet-body h2 { font-size: 17px; margin-bottom: 20px; }
     
     .setting-row {
       display: flex; align-items: center; justify-content: space-between;
       padding: 12px 0;
       border-bottom: 1px solid var(--border);
     }
     .setting-row label { font-size: 14px; color: var(--text-dim); }
     .setting-row input {
       background: rgba(10, 12, 24, .5);
       border: 1px solid var(--border);
       border-radius: 10px;
       padding: 8px 12px;
       color: var(--text);
       font-size: 14px;
       width: 180px;
       text-align: right;
     }
     .setting-row input[type="color"] {
       width: 50px; height: 32px; padding: 2px;
     }
     .btn-mini {
       background: var(--emotion-glow);
       border: 1px solid var(--emotion-color);
       border-radius: 10px;
       color: var(--emotion-color);
       padding: 6px 14px;
       font-size: 13px;
       cursor: pointer;
     }
     .sheet-body .btn-primary { margin-top: 24px; }
     
     /* 内心面板 */
     .mind-body {
       max-height: 75vh;
       display: flex;
       flex-direction: column;
     }
     .mind-tabs {
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
       margin-bottom: 16px;
       border-bottom: 1px solid var(--border);
       padding-bottom: 12px;
     }
     .mind-tab {
       padding: 5px 13px;
       background: transparent;
       border: 1px solid var(--border);
       border-radius: 16px;
       color: var(--text-dim);
       font-size: 13px;
       cursor: pointer;
       transition: all .2s;
       white-space: nowrap;
     }
     .mind-tab.active {
       background: var(--emotion-glow);
       border-color: var(--emotion-color);
       color: var(--emotion-color);
     }
     .mind-content {
       flex: 1;
       overflow-y: auto;
       display: flex;
       flex-direction: column;
       gap: 10px;
       padding-right: 4px;
     }
     .mind-content::-webkit-scrollbar { width: 4px; }
     .mind-content::-webkit-scrollbar-thumb {
       background: var(--emotion-glow);
       border-radius: 2px;
     }
     .mind-item {
       background: rgba(20, 24, 42, .5);
       border: 1px solid var(--border);
       border-radius: 14px;
       padding: 12px 14px;
     }
     .mind-item-head {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 6px;
       font-size: 12px;
     }
     .mind-tag { font-size: 14px; }
     .mind-action { color: var(--emotion-color); font-weight: 500; letter-spacing: 1px; }
     .mind-time { color: var(--text-dim); }
     .mind-text {
       font-size: 14px;
       line-height: 1.6;
       color: var(--text);
       margin-bottom: 6px;
       word-break: break-word;
     }
     .mind-meta { font-size: 11px; color: var(--text-dim); }
     .mind-loading, .mind-empty {
       text-align: center;
       padding: 40px 20px;
       color: var(--text-dim);
       font-size: 14px;
     }
     
     body[data-theme="light"] .mind-item { background: rgba(255, 255, 255, .6); }
     
     /* 图片查看 */
     .lightbox {
       position: fixed; inset: 0; z-index: 200;
       background: rgba(0, 0, 0, .92);
       display: flex; align-items: center; justify-content: center;
       padding: 20px;
     }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
     
     /* ============ 移动端 ============ */
     @media (max-width: 480px) {
       body { font-size: 14.5px; }
       .login-card { padding: 32px 22px 26px; border-radius: 20px; }
       .brand { font-size: 22px; }
       .avatar-ring { width: 80px; height: 80px; }
       .avatar-core { width: 60px; height: 60px; }
       .msg { max-width: 84%; font-size: 14.5px; padding: 10px 14px; }
       .messages { padding: 12px; gap: 12px; }
       .input-bar { padding: 10px 12px; padding-bottom: calc(10px + var(--safe-bottom)); }
       .btn-attach { width: 36px; height: 36px; min-width: 36px; }
       .btn-send { width: 40px; height: 40px; min-width: 40px; }
     }
     
     /* 减少动画（系统偏好） */
     @media (prefers-reduced-motion: reduce) {
       * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
     }

     /* ============ V2 THEME ============ */
     /* 基础层：只在 body[data-theme="v2"] 时显示 */
     #v2-bg {
       position: fixed;
       inset: 0;
       z-index: 0;
       pointer-events: none;
       overflow: hidden;
       display: none;
     }
     body[data-theme="v2"] #v2-bg { display: block; }

     #v2-particles {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       opacity: .55;
     }

     /* 情绪光晕：跟随 --emotion-color */
     #v2-aura {
       position: absolute;
       left: 50%;
       top: 40%;
       width: 90vmax;
       height: 90vmax;
       transform: translate(-50%, -50%);
       border-radius: 50%;
       background:
         radial-gradient(circle at center,
           color-mix(in srgb, var(--emotion-color) 22%, transparent) 0%,
           color-mix(in srgb, var(--emotion-color) 8%, transparent) 30%,
           transparent 62%);
       filter: blur(60px);
       opacity: .55;
       transition: opacity .9s ease, background 1.2s ease;
     }
     body[data-theme="v2"].speaking #v2-aura {
       opacity: .95;
       animation: auraPulse 1.4s ease-in-out infinite;
     }
     @keyframes auraPulse {
       0%,100% { transform: translate(-50%,-50%) scale(1); }
       50% { transform: translate(-50%,-50%) scale(1.06); }
     }

     /* 消息气泡：v2 下强化视觉 */
     body[data-theme="v2"] .msg.assistant {
       border-left: 2px solid var(--emotion-color);
       box-shadow: 0 2px 20px color-mix(in srgb, var(--emotion-color) 12%, transparent);
     }
     body[data-theme="v2"] .msg.user {
       box-shadow: 0 4px 20px rgba(124,108,240,.35);
     }

     /* 顶部栏：v2 下加流动边 */
     body[data-theme="v2"] .topbar,
     body[data-theme="v2"] .header {
       position: relative;
     }
     body[data-theme="v2"] .topbar::after,
     body[data-theme="v2"] .header::after {
       content: "";
       position: absolute;
       left: 0; right: 0; bottom: 0;
       height: 1px;
       background: linear-gradient(
         90deg,
         transparent 0%,
         var(--emotion-color) 30%,
         transparent 70%);
       background-size: 200% 100%;
       animation: borderFlow 3.6s linear infinite;
       opacity: .7;
     }
     @keyframes borderFlow {
       0%   { background-position: 0% 50%; }
       100% { background-position: 200% 50%; }
     }

     /* 输入栏：v2 下内发光 */
     body[data-theme="v2"] .input-bar {
       position: relative;
       box-shadow: 0 0 0 1px color-mix(in srgb, var(--emotion-color) 20%, transparent),
                   0 0 32px color-mix(in srgb, var(--emotion-color) 12%, transparent) inset;
     }

     /* 说话时按钮发光 */
     body[data-theme="v2"].speaking .btn-send {
       box-shadow: 0 0 16px color-mix(in srgb, var(--emotion-color) 55%, transparent);
     }


     /* ============ V2 ORB ============ */
     #v2-orb {
       position: fixed;
       left: 50%;
       top: 18px;
       transform: translateX(-50%);
       z-index: 50;
       width: 56px;
       height: 56px;
       pointer-events: none;
       display: none;
     }
     body[data-theme="v2"] #v2-orb { display: block; }

     #v2-orb .orb-core {
       position: absolute;
       inset: 6px;
       border-radius: 50%;
       background:
         radial-gradient(circle at 35% 30%,
           color-mix(in srgb, var(--emotion-color) 95%, white 20%) 0%,
           var(--emotion-color) 55%,
           color-mix(in srgb, var(--emotion-color) 60%, #000 40%) 100%);
       box-shadow:
         0 0 12px color-mix(in srgb, var(--emotion-color) 60%, transparent),
         0 0 24px color-mix(in srgb, var(--emotion-color) 30%, transparent);
       transition: transform .12s ease, box-shadow .3s ease;
       will-change: transform;
     }

     #v2-orb .orb-ring {
       position: absolute;
       inset: 0;
       border-radius: 50%;
       border: 1.5px solid color-mix(in srgb, var(--emotion-color) 50%, transparent);
       opacity: .55;
       animation: orbRing 3.4s linear infinite;
     }
     @keyframes orbRing {
       0%   { transform: scale(.92); opacity: .6; }
       100% { transform: scale(1.18); opacity: 0; }
     }

     #v2-orb .orb-glow {
       position: absolute;
       inset: -18px;
       border-radius: 50%;
       background: radial-gradient(circle,
         color-mix(in srgb, var(--emotion-color) 45%, transparent) 0%,
         transparent 65%);
       filter: blur(14px);
       opacity: .35;
       transition: opacity .18s ease, transform .12s ease;
       will-change: transform, opacity;
     }
     body[data-theme="v2"].speaking #v2-orb .orb-glow {
       opacity: 1;
     }


     /* ============ V2 ORB AVATAR ============ */
     #v2-orb .orb-avatar {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       border-radius: 50%;
       object-fit: cover;
       display: none;
       z-index: 2;
     }
     #v2-orb.has-avatar .orb-avatar { display: block; }
     #v2-orb.has-avatar .orb-core { display: none; }

     /* ============ V2 ORB MOBILE (屏 < 768px) ============ */
     .orb-close { display: none; }

     @media (max-width: 768px) {
       /* 球移到底部 */
       body[data-theme="v2"] #v2-orb {
         top: auto;
         bottom: calc(64px + var(--safe-bottom, 0px));
         width: 68px;
         height: 68px;
         pointer-events: auto;
         cursor: pointer;
       }
       body[data-theme="v2"] #v2-orb .orb-core { inset: 0; }

       /* chat-page 变成从底部升起的 sheet */
       body[data-theme="v2"] #chat-page {
         position: fixed;
         inset: 0;
         padding-top: env(safe-area-inset-top, 0px);
         transform: translateY(100%);
         transition: transform .32s cubic-bezier(.3,.8,.4,1);
         z-index: 45;
         background: var(--bg-page, #0b0d1a);
         border-radius: 20px 20px 0 0;
         box-shadow: 0 -20px 60px rgba(0,0,0,.4);
         overflow: hidden;
       }
       body[data-theme="v2"] #chat-page.orb-open {
         transform: translateY(0);
       }
       /* 展开时球变成"收起"提示 —— 变成半透明小点 */
       body[data-theme="v2"] #chat-page.orb-open ~ #v2-orb {
         opacity: 0;
         pointer-events: none;
       }

       /* 关闭按钮：在 sheet 顶部 */
       body[data-theme="v2"] #chat-page .orb-close {
         display: flex;
         align-items: center;
         justify-content: center;
         position: absolute;
         top: 12px;
         right: 14px;
         width: 32px;
         height: 32px;
         padding: 0;
         background: rgba(255,255,255,.06);
         border: 1px solid var(--border);
         border-radius: 50%;
         color: var(--text-dim);
         cursor: pointer;
         z-index: 5;
         font-size: 13px;
       }

       /* 背景粒子只在移动 v2 显示（原桌面 v2 的圆球已移到底部当头像） */
       body[data-theme="v2"] #v2-bg { z-index: 1; }
       body[data-theme="v2"] #v2-particles { opacity: .35; }
       body[data-theme="v2"] #v2-aura {
         top: 60%;
         width: 130vmax;
         height: 130vmax;
         opacity: .7;
       }
     }


     /* ============ V2 PC HIDE ============ */
     /* 屏 >= 769px 时，无论 data-theme 是什么，都不显示 v2 元素 */
     @media (min-width: 769px) {
       #v2-bg,
       #v2-orb { display: none !important; }
       body[data-theme="v2"].speaking #v2-aura { animation: none; }
     }


     /* ============ V2 MOBILE SIMPLE ============ */
     /* 移动 v2 弹出层里只保留消息列表 + 输入框 */
     @media (max-width: 768px) {
       body[data-theme="v2"] #chat-page header {
         display: none !important;
       }
       /* sheet 底部安全区 */
       body[data-theme="v2"] #chat-page .input-bar {
         padding-bottom: calc(10px + var(--safe-bottom) + 8px);
       }
       body[data-theme="v2"] #chat-page .emotion-bar {
         display: none !important;
       }
       /* 消息区顶到顶部（补齐安全区） */
       body[data-theme="v2"] #chat-page #messages {
         padding-top: calc(16px + env(safe-area-inset-top, 0px));
       }
       /* 关闭按钮做成浮动小圆，不占布局 */
       body[data-theme="v2"] #chat-page .orb-close {
         position: absolute;
         top: calc(12px + env(safe-area-inset-top, 0px));
         right: 14px;
         z-index: 10;
         background: rgba(255,255,255,.08);
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
       }
     }


     /* ============ VOICE PANEL ============ */
     .voice-list {
       display: flex;
       flex-direction: column;
       gap: 8px;
       margin: 6px 0 18px;
     }
     .voice-item {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 14px 16px;
       background: rgba(255,255,255,.04);
       border: 1px solid var(--border);
       border-radius: 12px;
       cursor: pointer;
       transition: all .18s ease;
     }
     .voice-item:hover {
       background: rgba(255,255,255,.07);
       border-color: rgba(255,255,255,.14);
     }
     .voice-item.active {
       border-color: var(--emotion-color);
       background: color-mix(in srgb, var(--emotion-color) 10%, transparent);
     }
     .voice-item .vi-left { display: flex; flex-direction: column; gap: 3px; }
     .voice-item .vi-name {
       font-size: 14.5px;
       color: var(--text);
       font-weight: 500;
     }
     .voice-item .vi-desc {
       font-size: 12px;
       color: var(--text-dim);
       opacity: .8;
     }
     .voice-item .vi-actions {
       display: flex;
       align-items: center;
       gap: 10px;
     }
     .voice-item .vi-preview {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 32px; height: 32px;
       padding: 0;
       background: rgba(255,255,255,.05);
       border: 1px solid var(--border);
       border-radius: 50%;
       color: var(--text-dim);
       cursor: pointer;
       transition: all .18s ease;
     }
     .voice-item .vi-preview:hover {
       color: var(--emotion-color);
       border-color: var(--emotion-color);
     }
     .voice-item .vi-check {
       width: 20px; height: 20px;
       border-radius: 50%;
       border: 2px solid var(--border);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       font-size: 11px;
       color: transparent;
       transition: all .18s ease;
     }
     .voice-item.active .vi-check {
       border-color: var(--emotion-color);
       background: var(--emotion-color);
       color: #0b0d1a;
     }

     /* 移动 v2：顶部两个按钮紧挨 ✕ */
     @media (max-width: 768px) {
       body[data-theme="v2"] #chat-page .orb-settings { right: 58px; }
       body[data-theme="v2"] #chat-page .orb-voice { right: 102px; }
     }


     /* ============ ORB HIDE ON LOGIN ============ */
     /* 登录页未隐藏时，聊天页的圆球不该出现在登录页 */
     body:has(#login-page:not(.hidden)) #v2-orb {
       display: none !important;
     }
     body:has(#login-page:not(.hidden)) #v2-bg {
       display: block;   /* 粒子背景保留，登录页更美 */
     }


     /* ============ STATE PANEL ============ */
     .state-section {
       margin-bottom: 18px;
     }
     .state-title {
       font-size: 12px;
       font-weight: 600;
       color: var(--text-dim);
       text-transform: uppercase;
       letter-spacing: .6px;
       margin-bottom: 8px;
       padding-bottom: 6px;
       border-bottom: 1px solid var(--border);
     }
     .state-row {
       display: flex;
       justify-content: space-between;
       font-size: 13px;
       padding: 4px 0;
       color: var(--text);
     }
     .state-label { color: var(--text-dim); }
     .state-val { color: var(--text); font-variant-numeric: tabular-nums; }
     .state-dims {
       display: flex;
       flex-direction: column;
       gap: 3px;
       margin-top: 6px;
     }
     .state-dim {
       display: grid;
       grid-template-columns: 60px 1fr 44px;
       gap: 8px;
       align-items: center;
       font-size: 12px;
     }
     .state-dim-name { color: var(--text-dim); }
     .state-dim-bar {
       color: var(--emotion-color);
       font-family: monospace;
       letter-spacing: -1px;
       overflow: hidden;
       white-space: nowrap;
     }
     .state-dim-val {
       color: var(--text);
       text-align: right;
       font-variant-numeric: tabular-nums;
       font-size: 11.5px;
     }
     .state-note {
       font-size: 12.5px;
       color: var(--text);
       background: rgba(255,255,255,.04);
       border-left: 2px solid var(--emotion-color);
       padding: 6px 10px;
       border-radius: 6px;
       margin-top: 6px;
       line-height: 1.5;
     }
     .state-intent {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 6px 10px;
       background: rgba(255,255,255,.03);
       border-radius: 8px;
       margin-bottom: 4px;
       font-size: 12.5px;
     }
     .state-intent-kind {
       color: var(--emotion-color);
       font-weight: 500;
     }
     .state-intent-urgency {
       color: var(--text);
       font-variant-numeric: tabular-nums;
     }
     .state-intent-age {
       color: var(--text-dim);
       font-size: 11px;
     }


     /* ============ SELF VIEW ============ */
     .self-intro {
       font-size: 12.5px;
       color: var(--text-dim);
       opacity: .8;
       margin-bottom: 14px;
       line-height: 1.6;
       font-style: italic;
     }
     .self-view {
       padding: 12px 14px;
       background: rgba(255,255,255,.04);
       border-left: 2px solid var(--emotion-color);
       border-radius: 8px;
       margin-bottom: 10px;
     }
     .self-view-text {
       font-size: 14px;
       color: var(--text);
       line-height: 1.6;
     }
     .self-view-meta {
       font-size: 11px;
       color: var(--text-dim);
       margin-top: 8px;
       opacity: .7;
     }


     /* ============ THINKING ============ */
     /* 她在想——气泡流动 + 头像太阳光晕 */

     /* 待发送的用户气泡（半透明） */
     .msg.user.pending {
       opacity: .55;
       font-style: italic;
     }

     /* 思考中的 assistant 气泡：流动渐变 */
     .msg.assistant.thinking {
       background: linear-gradient(
         100deg,
         rgba(124,108,240,.08) 0%,
         rgba(124,108,240,.35) 30%,
         rgba(124,108,240,.08) 60%,
         rgba(124,108,240,.35) 90%,
         rgba(124,108,240,.08) 100%);
       background-size: 250% 100%;
       animation: thinkingFlow 2.2s linear infinite;
       min-height: 24px;
       min-width: 70px;
       border-left: 2px solid var(--emotion-color, #a78bfa);
     }
     @keyframes thinkingFlow {
       0%   { background-position: 100% 50%; }
       100% { background-position: -150% 50%; }
     }
     /* 思考中：末尾的三颗跳点 */
     .msg.assistant.thinking::after {
       content: "";
       display: inline-block;
       width: 4px; height: 4px;
       border-radius: 50%;
       background: var(--emotion-color, #a78bfa);
       box-shadow:
         10px 0 0 var(--emotion-color, #a78bfa),
         20px 0 0 var(--emotion-color, #a78bfa);
       margin-left: 2px;
       animation: thinkingDots 1.4s ease-in-out infinite;
       vertical-align: middle;
     }
     @keyframes thinkingDots {
       0%, 80%, 100% { opacity: .3; }
       40% { opacity: 1; }
     }

     /* PC header 头像：太阳光晕 */
     body.is-thinking .avatar-wrap {
       animation: sunPulse 1.6s ease-in-out infinite;
     }
     body.is-thinking .avatar-wrap::before {
       content: "";
       position: absolute;
       inset: -14px;
       border-radius: 50%;
       background: radial-gradient(circle,
         color-mix(in srgb, var(--emotion-color, #a78bfa) 55%, transparent) 0%,
         transparent 65%);
       animation: sunBurst 1.6s ease-out infinite;
       pointer-events: none;
       z-index: 0;
     }
     body.is-thinking .avatar-wrap::after {
       content: "";
       position: absolute;
       inset: -6px;
       border-radius: 50%;
       border: 1.5px solid var(--emotion-color, #a78bfa);
       opacity: 0;
       animation: sunRing 1.6s ease-out infinite;
       pointer-events: none;
       z-index: 0;
     }
     @keyframes sunPulse {
       0%, 100% { transform: scale(1); }
       50%      { transform: scale(1.06); }
     }
     @keyframes sunBurst {
       0%   { transform: scale(.85); opacity: .8; }
       100% { transform: scale(1.35); opacity: 0; }
     }
     @keyframes sunRing {
       0%   { transform: scale(.85); opacity: .9; }
       100% { transform: scale(1.5); opacity: 0; }
     }

     /* 移动 v2 圆球：思考时更亮 */
     body.is-thinking #v2-orb .orb-ring {
       animation-duration: .9s;
       opacity: 1;
     }
     body.is-thinking #v2-orb .orb-glow {
       animation: sunBurst 1.4s ease-out infinite;
       opacity: 1;
     }

/* THINKING-V2: 持续脉冲 */
body.is-thinking .avatar-wrap{animation:thPulse 1.4s ease-in-out infinite}
body.is-thinking .avatar-wrap::before{content:"";position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--emotion-color,#a78bfa) 65%,transparent) 0%,transparent 65%);animation:thBurst 1.4s ease-out infinite;pointer-events:none;z-index:0}
body.is-thinking .avatar-wrap::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--emotion-color,#a78bfa);opacity:0;animation:thRing 1.4s ease-out infinite;pointer-events:none;z-index:0}
@keyframes thPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes thBurst{0%{transform:scale(.8);opacity:.95}100%{transform:scale(1.5);opacity:0}}
@keyframes thRing{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.7);opacity:0}}
.msg.assistant.thinking{position:relative;padding-right:32px!important;background-size:250% 100%;animation:thinkingFlow 1.6s linear infinite}
.msg.assistant.thinking::before{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--emotion-color,#a78bfa);transform:translateY(-50%);animation:thDot 1.2s ease-in-out infinite}
@keyframes thDot{0%,100%{opacity:.3;transform:translateY(-50%) scale(.8)}50%{opacity:1;transform:translateY(-50%) scale(1.3)}}
body.is-thinking #v2-orb .orb-core{animation:thCore 1.2s ease-in-out infinite}
body.is-thinking #v2-orb .orb-glow{animation:thBurst 1.2s ease-out infinite;opacity:1}
@keyframes thCore{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}