@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap");/*
 * ═══════════════════════════════════════════════════════════════
 * 【初学者阅读导航】
 * 
 * 【运行环境】浏览器 CSS 引擎。
 * 【所在层次】灵眸各表情的形状和动画。
 * 【输入】LumiFace 生成的 expression-* class。
 * 【输出】眼睛形状、颜色和关键帧动画。
 * 
 * 【主调用链】
 * ExpressionId -> className -> 选择器/animation
 * 
 * 【推荐阅读顺序】先看基础结构，再看各表情覆盖，最后看 keyframes。
 * 【最容易误解】动画必须保持轻量，过多滤镜会影响语音字幕刷新。
 * ═══════════════════════════════════════════════════════════════
 */
/*
 * 文件用途：定义正式应用中的“Lumi 灵眸”屏幕外观和动态表情。
 * 核心功能：设备外壳、发光眼睛、指针跟随以及不同语义表情的形状与动画。
 * 主要依赖：LumiFace.tsx 输出的 lumi-* DOM 结构和 expression-* 状态类。
 * 调用关系：由 LumiFace.tsx 直接加载。
 * 修改注意：动画优先使用 transform、opacity 和 filter，避免高频布局计算。
 */
.lumi-shell{width:174px;padding:7px;border-radius:31px;background:linear-gradient(145deg,#eef5f5,#9aabad);box-shadow:inset 0 2px 2px #fff,0 15px 28px rgba(43,62,69,.25)}
.lumi-screen{--lumi:#71ffd8;--look-x:0;--look-y:0;position:relative;overflow:hidden;width:100%;aspect-ratio:1.75;border:4px solid #253236;border-radius:23px;background:radial-gradient(circle at 50% 110%,rgba(113,255,216,.13),transparent 57%),#020708;box-shadow:inset 0 1px 8px rgba(255,255,255,.08)}
.lumi-eye{position:absolute;top:37%;width:22%;height:27%;border-radius:44% 44% 40% 40%;background:var(--lumi);box-shadow:0 0 7px var(--lumi),0 0 20px rgba(113,255,216,.65);transform:translate(calc(var(--look-x) * 4px),calc(var(--look-y) * 3px));transform-origin:center;animation:lumi-blink 5.2s infinite,lumi-alive 3.8s ease-in-out infinite;transition:top .3s ease,width .3s ease,height .3s ease,border-radius .3s ease,opacity .3s ease}
.lumi-eye.left{left:21%}.lumi-eye.right{right:21%;animation-delay:.08s,.12s}
.gaze-down .lumi-eye{transform:translate(calc(var(--look-x)*2px),calc(3px + var(--look-y)*2px))}.gaze-side .lumi-eye{transform:translate(4px,calc(var(--look-y)*2px))}.gaze-user .lumi-eye{filter:brightness(calc(1 + var(--expression-intensity)*.12))}.gaze-scan .lumi-pupil{animation:lumi-scan 1.4s ease-in-out infinite}.blink-slow .lumi-eye{animation-duration:7.2s,4.4s}.blink-quick .lumi-eye{animation-duration:3.1s,2.4s}
.lumi-pupil{position:absolute;left:39%;top:34%;width:22%;height:32%;border-radius:50%;background:#06110f;opacity:.34}
.lumi-glow{position:absolute;top:33%;width:24%;height:34%;border-radius:50%;background:var(--lumi);filter:blur(20px);opacity:.12}.lumi-glow.left{left:20%}.lumi-glow.right{right:20%}
.lumi-decor,.lumi-center-decor{position:absolute;opacity:0}
.lumi-mouth{position:absolute;left:44%;bottom:12%;width:12%;height:calc(3px + var(--mouth-open,0)*13px);border-radius:50%;background:var(--lumi);box-shadow:0 0 8px rgba(113,255,216,.55);opacity:calc(.25 + var(--mouth-open,0)*.75);transform:scaleX(1);transition:height .06s linear,opacity .06s linear,transform .08s linear}.mouth-i{transform:scaleX(1.35)}.mouth-u{transform:scaleX(.55)}.mouth-o{transform:scaleX(.78);border-radius:50%}.mouth-closed{height:2px;opacity:.3}

/* 正面关系情绪使用弯眼、心形瞳孔和靠近动作，避免仅依靠颜色表达。 */
.expression-happy .lumi-eye,.expression-joy .lumi-eye,.expression-comforting .lumi-eye{top:44%;height:18%;border-radius:10% 10% 80% 80%;animation:lumi-happy 2.2s ease-in-out infinite}
.expression-joy .lumi-eye{animation:lumi-joy .9s ease-in-out infinite}.expression-excited .lumi-eye{animation:lumi-excited .55s ease-in-out infinite alternate}
.expression-loving .lumi-pupil{left:21%;top:21%;width:58%;height:58%;opacity:.9;clip-path:polygon(50% 88%,8% 47%,8% 27%,25% 10%,50% 29%,75% 10%,92% 27%,92% 47%);animation:lumi-heart 1.4s infinite}
.expression-attached .lumi-eye{animation:lumi-attached 2.1s ease-in-out infinite}.expression-attached .lumi-eye.left{left:27%}.expression-attached .lumi-eye.right{right:27%}

/* 负面情绪降低运动幅度，表达状态但不制造攻击性或压迫感。 */
.expression-sad .lumi-eye,.expression-missing .lumi-eye{top:40%;height:22%;border-radius:55% 28% 52% 42%;animation:lumi-sad 3s ease-in-out infinite}
.expression-missing .lumi-eye{opacity:.75;animation:lumi-far-look 3.4s ease-in-out infinite}
.expression-crying .lumi-decor{top:65%;width:7%;height:17%;border-radius:50% 50% 60% 60%;opacity:1;background:#7bdcff;box-shadow:0 0 12px #7bdcff;animation:lumi-tear 1.35s ease-in infinite}.expression-crying .lumi-decor.left{left:29%}.expression-crying .lumi-decor.right{right:29%;animation-delay:.55s}
.expression-angry .lumi-eye{top:42%;height:18%;border-radius:8px 70% 24% 60%;animation:lumi-angry 1.5s ease-in-out infinite}
.expression-annoyed .lumi-eye{top:47%;height:11%;border-radius:99px;animation:lumi-side-eye 3s ease-in-out infinite}

/* 即时交互状态必须比长期情绪更醒目，让用户明确知道系统正在做什么。 */
.expression-listening .lumi-eye{animation:lumi-listening 1.15s ease-in-out infinite}.expression-thinking .lumi-pupil{opacity:.75;animation:lumi-scan 1.4s ease-in-out infinite}.expression-thinking .lumi-eye{top:40%;height:22%}
.expression-speaking .lumi-eye{animation:lumi-speaking .45s ease-in-out infinite alternate}
.expression-sleepy .lumi-eye{top:51%;height:9%;border-radius:99px;animation:lumi-sleepy 3s ease-in-out infinite}.expression-sleeping .lumi-eye{top:53%;height:7%;border-radius:99px;animation:lumi-sleep 3.4s ease-in-out infinite}
.expression-offline .lumi-eye{opacity:.18;filter:grayscale(1);animation:none}

/* 为未来规则保留的细腻表情，当前可由后续互动事件直接触发。 */
.expression-shy .lumi-eye{top:45%;height:17%;transform:translateX(-8px)}.expression-curious .lumi-eye.left{top:32%;width:28%;height:36%;animation:lumi-curious 2.2s ease-in-out infinite}.expression-curious .lumi-eye.right{top:39%;width:18%;height:25%}
.expression-confused .lumi-eye.left{top:33%}.expression-confused .lumi-eye.right{top:46%}.expression-scared .lumi-eye{top:40%;width:16%;height:21%;animation:lumi-scared .28s ease-in-out infinite alternate}.expression-scared .lumi-eye.left{left:27%}.expression-scared .lumi-eye.right{right:27%}.expression-surprised .lumi-eye{top:28%;width:22%;height:42%;border-radius:50%}
.expression-proud .lumi-eye{top:39%;height:21%;border-radius:65% 24% 55% 32%;animation:lumi-proud 1.9s ease-in-out infinite}.expression-proud .lumi-eye.left{left:24%}.expression-proud .lumi-eye.right{right:24%}
.expression-guilty .lumi-eye{top:48%;width:18%;height:18%;border-radius:60% 60% 42% 42%;opacity:.72;animation:lumi-guilty 2.4s ease-in-out infinite}.expression-focused .lumi-eye{top:39%;height:21%;width:20%;animation:lumi-focused 1.5s ease-in-out infinite}

@keyframes lumi-blink{0%,46%,50%,100%{scale:1 1}48%{scale:1 .08}}@keyframes lumi-alive{0%,100%{translate:0 0}45%{translate:2% 0}75%{translate:-2% 1%}}@keyframes lumi-happy{50%{translate:0 -5%;scale:1.04 1}}@keyframes lumi-joy{50%{translate:0 -18%;scale:1.06 .94}}@keyframes lumi-excited{to{translate:0 -18%;scale:1.08 .9}}@keyframes lumi-heart{50%{scale:1.15}}@keyframes lumi-attached{50%{translate:4% 0;scale:1.04}}@keyframes lumi-sad{50%{translate:0 6%;opacity:.72}}@keyframes lumi-far-look{50%{translate:8% 0;opacity:.95}}@keyframes lumi-tear{0%{translate:0 -20%;scale:.7;opacity:0}25%{opacity:1}100%{translate:0 85%;scale:1;opacity:0}}@keyframes lumi-angry{48%,52%{translate:2% 0}50%,54%{translate:-2% 0}}@keyframes lumi-side-eye{50%{translate:13% 0}}@keyframes lumi-listening{50%{scale:1.08 1.16;filter:brightness(1.25)}}@keyframes lumi-scan{0%,100%{translate:-90% 0}50%{translate:90% 0}}@keyframes lumi-speaking{to{translate:0 -7%;scale:1.04 .88}}@keyframes lumi-sleepy{50%{scale:1 .35;translate:0 4%}}@keyframes lumi-sleep{50%{opacity:.62;filter:brightness(.75)}}@keyframes lumi-curious{50%{translate:5% -3%;scale:1.05}}@keyframes lumi-scared{to{translate:2% 0;scale:.94 1.06}}
@keyframes lumi-proud{50%{translate:0 -8%;scale:1.06 .92}}@keyframes lumi-guilty{50%{translate:0 9%;opacity:.92}}@keyframes lumi-focused{50%{scale:.92 1.08;filter:brightness(1.2)}}
@media (prefers-reduced-motion:reduce){.lumi-eye,.lumi-pupil,.lumi-decor{animation-duration:8s}}


/*
 * ═══════════════════════════════════════════════════════════════
 * 【初学者阅读导航】
 * 
 * 【运行环境】浏览器 CSS 引擎。
 * 【所在层次】应用整体布局和开发界面样式。
 * 【输入】React 输出的 className。
 * 【输出】尺寸、颜色、排版和交互反馈。
 * 
 * 【主调用链】
 * JSX className -> CSS 选择器 -> 浏览器绘制
 * 
 * 【推荐阅读顺序】按页面区域从上到下阅读。
 * 【最容易误解】CSS 不改变业务状态；看起来隐藏不等于数据被删除。
 * ═══════════════════════════════════════════════════════════════
 */
/*
 * 文件用途：定义桌宠全部视觉样式和轻量动画。
 * 核心功能：透明玻璃窗口、CSS 角色、状态颜色、面板和响应动画。
 * 主要依赖：App.tsx 输出的 className 结构。
 * 调用关系：main.tsx 全局加载。
 * 修改注意：角色尺寸与窗口高度紧密相关；调整时需同时测试 Electron 和浏览器模式。
 */
/* 全局基础样式保持透明背景，以支持 Electron 透明桌宠窗口。 */
:root { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; color: #382e48; background: transparent; }
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; background: transparent; }
.fatal-error { min-height:100vh;display:grid;place-content:center;gap:14px;padding:32px;text-align:center;color:#eefcff;background:#071318; }
.fatal-error button { justify-self:center;border:0;border-radius:12px;padding:10px 16px;background:#dff8ef;color:#174c3e; }
button, input { font: inherit; }
button { cursor: pointer; }
/* 应用外壳使用固定四行布局，保证角色区、内容卡片和导航互不挤压。 */
.app-shell { height: 100vh; padding: 12px; display: grid; grid-template-rows: 32px 260px 1fr 52px; gap: 8px; background: radial-gradient(circle at 40% 8%, rgba(255,255,255,.92), rgba(243,235,255,.86) 55%, rgba(223,215,249,.76)); border: 1px solid rgba(255,255,255,.7); border-radius: 28px; box-shadow: 0 18px 60px rgba(63,40,100,.22); backdrop-filter: blur(18px); }
/* Electron 通过该区域拖动无边框窗口；内部交互按钮不放在拖动区。 */
.drag-bar { -webkit-app-region: drag; display:flex; align-items:center; justify-content:space-between; padding: 0 10px; font-size: 12px; font-weight: 700; color:#796b91; letter-spacing:.08em; }
.provider { padding: 4px 8px; border-radius:20px; background:#e7def5; font-size:10px; letter-spacing:0; }
.provider.openai-compatible { background:#d7f3e9; color:#28735c; }
/* 正式角色采用“灵眸屏幕 + 小型底座”，屏幕内部表情由 LumiFace 独立维护。 */
.pet-stage { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pet { position:relative; display:flex; flex-direction:column; align-items:center; width:190px; height:205px; padding:8px; border:0; background:transparent; animation: float 3.8s ease-in-out infinite; filter:drop-shadow(0 18px 16px rgba(75,52,116,.18)); touch-action:none; user-select:none; }
.pet:hover .lumi-shell { transform:translateY(-2px); box-shadow:inset 0 2px 2px #fff,0 18px 34px rgba(39,101,88,.28); }
.pet:active .lumi-shell { transform:translateY(1px) scale(.98); }
.lumi-shell { z-index:2; transition:transform .2s ease,box-shadow .2s ease; }
.pet-base { position:relative; display:block; width:86px; height:68px; margin-top:-3px; border:3px solid #87999c; border-radius:18px 18px 30px 30px; background:linear-gradient(155deg,#f2f7f7,#b7c5c7); box-shadow:inset 0 2px 2px #fff,0 10px 15px rgba(61,83,88,.17); }
.pet-base::before,.pet-base::after { content:""; position:absolute; top:18px; width:15px; height:34px; border-radius:99px; background:#99aaad; opacity:.62; }
.pet-base::before { left:14px; transform:rotate(8deg); }
.pet-base::after { right:14px; transform:rotate(-8deg); }
.pet-light { position:absolute; left:50%; bottom:9px; width:13px; height:4px; translate:-50% 0; border-radius:99px; background:#71ffd8; box-shadow:0 0 8px #71ffd8; }
/* 思考和准备语音都代表宠物正在组织回答，因此共享轻微侧倾动画。 */
.thinking .pet,.preparing_speech .pet,.recovering .pet { animation: think 1s ease-in-out infinite; }
.gesture-lean_in .pet{animation:lean-in 2.2s ease-in-out infinite}
.gesture-gentle_sway .pet{animation:gentle-sway 3.2s ease-in-out infinite}
.gesture-celebrate .pet{animation:celebrate 1.15s ease-in-out infinite}
.gesture-recoil .pet{animation:recoil 1.8s ease-in-out infinite}
.gesture-thinking_tilt .pet{animation:think 1s ease-in-out infinite}
.gesture-sleepy_drift .pet{animation:sleepy-drift 4.2s ease-in-out infinite}
.spark { position:absolute; color:#a992dc; font-size:24px; animation: sparkle 2.4s infinite; }
.spark-one{left:56px;top:46px}
.spark-two{right:62px;top:82px;animation-delay:.7s}
.status-pill { display:flex; gap:7px; align-items:center; padding:6px 12px; border-radius:20px; color:#76658c; background:rgba(255,255,255,.65); font-size:11px; font-weight:600; }
.status-dot { width:7px;height:7px;border-radius:50%;background:#a698b5}
.status-dot.preparing_input,.status-dot.listening,.status-dot.finalizing_input,.status-dot.interrupting{background:#62c9a2;box-shadow:0 0 0 5px rgba(98,201,162,.14)}
.status-dot.thinking,.status-dot.preparing_speech,.status-dot.recovering{background:#e6b959}
.status-dot.speaking{background:#b58dea}
.status-dot.error,.status-dot.off{background:#d29292}
/* 内容卡片承载聊天、用户、记忆和设置四个面板。 */
.card { overflow:hidden; border:1px solid rgba(255,255,255,.8); border-radius:22px; background:rgba(255,255,255,.62); box-shadow:0 8px 30px rgba(75,52,116,.08); }
.chat-panel{height:100%;display:grid;grid-template-rows:auto auto auto minmax(120px,1fr) auto;overflow:hidden}
.greeting { display:flex;justify-content:space-between;align-items:center;padding:16px 18px 8px}
.greeting div{display:flex;flex-direction:column}
.greeting small,.hint,.toggle-row small,.person small{font-size:11px;color:#9286a2}
.greeting strong{font-size:16px}
.avatar{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:#d9c9fb;color:#55456a;font-weight:700}
.bubble { margin:6px 16px 12px; min-height:62px; padding:12px 14px; border-radius:16px 16px 16px 4px; background:#eee7fa; color:#51435f; font-size:13px; line-height:1.7; }
/* 多气泡容器：每个已完成句子固定为独立气泡，长回复在容器内滚动而不是无限撑高页面。 */
.bubble-container { display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto; padding-bottom:6px; }
.bubble-container .bubble { margin:0 16px; min-height:0; }
.bubble-container .bubble-fixed { opacity:.92; }
.bubble-container .bubble-current { min-height:62px; }
/* 天气卡片：结构化展示温度/天气/湿度/风力，区别于纯文本气泡 */
.weather-card { margin:0 16px; padding:14px 16px; border-radius:14px; background:linear-gradient(135deg,#a8d8ea,#cfe8f5); color:#2a4a5e; box-shadow:0 2px 8px rgba(80,140,180,.18); }
.weather-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.weather-card-city { font-size:14px; font-weight:700; }
.weather-card-day { font-size:11px; color:#5a7a8e; }
.weather-card-body { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.weather-card-temp { font-size:28px; font-weight:700; line-height:1; }
.weather-card-condition { font-size:13px; color:#3a5a6e; }
.weather-card-footer { display:flex; gap:16px; font-size:11px; color:#5a7a8e; }
/* 音乐播放器卡片 */
.music-card { margin:0 16px 10px; padding:12px 16px; border-radius:14px; background:linear-gradient(135deg,#e8d5f5,#f0e6fa); color:#4a2a5e; box-shadow:0 2px 8px rgba(120,80,180,.18); }
.music-card-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.music-card-icon { font-size:16px; }
.music-card-title { font-size:14px; font-weight:700; flex:1; }
.music-card-mode { font-size:10px; color:#7a5a8e; background:rgba(255,255,255,.5); padding:2px 8px; border-radius:8px; }
.music-card-player { width:100%; height:36px; border-radius:8px; }
/* 番茄钟卡片 */
.pomodoro-card { margin:0 16px 10px; padding:16px; border-radius:14px; background:#fff; box-shadow:0 2px 8px rgba(100,60,160,.12); display:flex; flex-direction:column; align-items:center; gap:10px; }
.pomodoro-card-ring { position:relative; width:100px; height:100px; }
.pomodoro-card-ring svg { width:100%; height:100%; }
.pomodoro-card-time { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; color:#4a2a5e; font-variant-numeric:tabular-nums; }
.pomodoro-card-label { font-size:13px; color:var(--pomo-color,#715c91); font-weight:600; }
/* 股票卡片 */
.stock-card { margin:0 16px 10px; padding:14px 16px; border-radius:14px; background:#fff; box-shadow:0 2px 8px rgba(80,80,180,.12); }
.stock-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.stock-card-name { font-size:14px; font-weight:700; }
.stock-card-code { font-size:10px; color:#999; }
.stock-card-body { display:flex; align-items:baseline; gap:10px; }
.stock-card-price { font-size:26px; font-weight:700; }
.stock-card-change { font-size:14px; font-weight:600; }
.voice-monitor{margin:-4px 16px 9px;padding:9px 11px;border:1px solid #e4dbee;border-radius:13px;background:rgba(255,255,255,.58);transition:border-color .2s,background .2s}
.voice-monitor.listening{border-color:#7bd2b1;background:#effaf5}
.voice-monitor.denied,.voice-monitor.error,.voice-monitor.unsupported{border-color:#e0aaba;background:#fff4f6}
.voice-monitor-header{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;font-size:10px}
.voice-monitor-header strong{color:#665577}
.voice-monitor-header span{color:#9a8ca8}
.voice-monitor-body{display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:stretch;gap:9px}
.voice-meter-column{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px}
.voice-meter-column small{color:#9a8ca8;font-size:7px}
.voice-level{position:relative;width:10px;height:40px;overflow:hidden;border:1px solid #d9cce9;border-radius:5px;background:linear-gradient(180deg,#f3eef8,#e9e2f1)}
.voice-level span{position:absolute;right:0;bottom:0;left:0;display:block;min-height:2px;border-radius:4px;background:linear-gradient(0deg,#72cfad,#9b78d1 75%,#e6b959);box-shadow:0 0 5px rgba(113,207,173,.42);transition:height .12s linear}
.voice-live-text{min-height:40px;max-height:62px;overflow:auto;color:#443653;font-size:11px;line-height:1.55;word-break:break-word}
.voice-guide{margin-top:4px;color:#877797;font-size:9px;line-height:1.45}
.voice-monitor.listening .voice-guide{color:#318766;font-weight:600}
.voice-monitor.denied .voice-guide,.voice-monitor.error .voice-guide,.voice-monitor.unsupported .voice-guide{color:#aa5f72}
.interaction-kernel-debug{display:flex;justify-content:space-between;gap:8px;margin-top:5px;padding-top:5px;border-top:1px dashed #ddd0e8;color:#9a8ca8;font-size:8px;line-height:1.35}
.conversation-history{position:relative;overflow-y:auto;margin:0 16px 10px;padding:14px;min-height:120px;border:1px dashed #d9cdea;border-radius:16px;background:rgba(249,247,253,.72);touch-action:none;user-select:none;transition:border-color .2s,background .2s,box-shadow .2s}
.conversation-history:hover{border-color:#b6a2d8;background:rgba(255,255,255,.82)}
.conversation-history.recording{border-color:#62c9a2;background:rgba(231,249,241,.78);box-shadow:inset 0 0 0 2px rgba(98,201,162,.12)}
.turn{display:flex;flex-direction:column;margin-bottom:14px;pointer-events:none}
.turn-meta{margin:0 5px 3px;color:#9b8ca9;font-size:9px}
.turn-meta.assistant{text-align:left}
.turn-bubble{max-width:86%;padding:8px 10px;border-radius:12px;font-size:11px;line-height:1.6;user-select:text;pointer-events:auto}
.user-turn{align-self:flex-end;background:#715c91;color:#fff;border-bottom-right-radius:3px}
.assistant-turn{align-self:flex-start;background:#eee7fa;color:#51435f;border-bottom-left-radius:3px}
.pending-turn{opacity:.78}
.turn-pending-label{align-self:flex-end;margin-top:4px;color:#8d7ca0;font-size:9px}
.history-empty{height:100%;display:grid;place-items:center;color:#9a8da8;font-size:11px;text-align:center;pointer-events:none}
.composer,.create-user { display:flex;gap:8px;padding:0 16px 16px}
.composer input,.create-user input{min-width:0;flex:1;border:1px solid #e2d9ef;border-radius:13px;padding:10px 12px;outline:none;background:rgba(255,255,255,.8)}
.composer input:focus,.create-user input:focus{border-color:#ad94db}
.composer button,.create-user button{border:0;border-radius:13px;padding:0 14px;background:#715c91;color:white;font-weight:600}
.composer .microphone-button{min-width:68px;padding:0 11px;background:#eee7fa;color:#67517e;font-size:11px;touch-action:none;user-select:none}
.composer .microphone-button.recording{background:#dff5ec;color:#27795d;box-shadow:0 0 0 4px rgba(98,201,162,.14);animation:pulse .8s infinite}
.panel-content{height:100%;overflow:auto;padding:16px}
.panel-content h2{margin:0 0 4px;font-size:16px}
.hint{margin:0 0 12px}
.list{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.person{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid transparent;background:#f6f1fc;border-radius:14px;text-align:left}
.person.selected{border-color:#b9a3df;background:#eee5fa}
.person span:last-child{display:flex;flex-direction:column}
.compact{padding:6px 0 0}
.memories{max-height:none;overflow:visible}
.memory{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:11px;background:#f6f1fc;border:1px solid transparent;border-radius:12px;font-size:12px}
.memory.superseded{opacity:.68;border-style:dashed}
.memory-content{display:flex;min-width:0;flex:1;flex-direction:column;gap:4px}
.memory-content strong{overflow-wrap:anywhere}
.memory-content>span{font-size:10px;color:#7e718b}
.memory-badges{display:flex;flex-wrap:wrap;gap:4px}
.memory small{padding:2px 5px;border-radius:8px;background:#ebe3f5;font-size:9px;color:#796d86}
.memory small.sensitivity-medium{background:#fff0cf;color:#85651d}
.memory small.sensitivity-high{background:#f9dce3;color:#9a4259}
.memory-actions{display:flex;flex-shrink:0;gap:5px}
.memory button,.danger,.memory-panel-heading button{border:0;background:transparent;color:#a35d72;font-size:11px}
.memory-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.memory-panel-heading .hint{margin-bottom:0}
.memory-panel-heading button{padding:6px 8px;background:#eee5fa;border-radius:9px;white-space:nowrap}
.memory-editor{width:100%;display:flex;flex-direction:column;gap:8px}
.memory-editor textarea{min-height:72px;resize:vertical;border:1px solid #d8c9e9;border-radius:9px;padding:8px;font:inherit}
.memory-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.memory-editor-grid label{display:flex;flex-direction:column;gap:3px;font-size:10px;color:#74687f}
.memory-editor-grid label:last-child{grid-column:1/-1}
.memory-editor-grid select,.memory-editor-grid input{width:100%}
.empty{padding:20px;text-align:center;color:#998da7;font-size:12px}
.danger{width:100%;padding:8px;background:#f9e9ed;border-radius:10px}
.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-bottom:1px solid #eee7f4}
.toggle-row span{display:flex;flex-direction:column}
.toggle-row input{accent-color:#715c91;width:17px;height:17px}
.privacy-note{margin-top:15px;padding:12px;background:#f3eef9;border-radius:12px;color:#796d86;font-size:11px;line-height:1.6}
.voice-persona-panel{margin-top:14px;padding:12px;border:1px solid #eee7f4;border-radius:16px;background:rgba(255,255,255,.52)}
.voice-persona-title{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:10px}
.voice-persona-title strong{font-size:13px}
.voice-persona-title small{color:#8c7c9d;font-size:10px}
.voice-persona-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.voice-persona-card{display:flex;flex-direction:column;gap:5px;min-height:86px;padding:10px;border:1px solid #e5dcef;border-radius:13px;background:#fbf8ff;color:#5f4d73;text-align:left;transition:transform .16s,border-color .16s,background .16s,box-shadow .16s}
.voice-persona-card:hover{transform:translateY(-1px);border-color:#cbb8ea;box-shadow:0 6px 14px rgba(80,55,120,.08)}
.voice-persona-card.selected{border-color:#8f72bd;background:#efe7fb;box-shadow:0 0 0 3px rgba(143,114,189,.12)}
.voice-persona-card strong{font-size:12px}
.voice-persona-card span{color:#8b7b9c;font-size:10px;line-height:1.45}
.device-status-pill{padding:3px 8px;border-radius:999px;background:#eee8f5;color:#746480;font-size:10px;font-weight:700}
.device-status-pill.online{background:#dff5e9;color:#26704c}
.device-status-pill.offline{background:#f7eadf;color:#8a5b32}
.device-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.device-summary-item{display:flex;min-width:0;flex-direction:column;gap:4px;padding:9px;border-radius:11px;background:#f6f1fc}
.device-summary-item small{color:#8c7c9d;font-size:9px}
.device-summary-item strong{overflow-wrap:anywhere;color:#5f4d73;font-size:11px}
.device-name-form{display:flex;align-items:flex-end;gap:8px;margin-top:10px}
.device-name-form label{display:flex;min-width:0;flex:1;flex-direction:column;gap:4px;color:#74687f;font-size:10px}
.device-name-form input{width:100%;box-sizing:border-box;padding:8px;border:1px solid #d8c9e9;border-radius:9px;background:#fff;font:inherit}
.device-name-form button{flex-shrink:0;padding:8px 10px;border:0;border-radius:9px;background:#715c91;color:#fff;font-size:11px}
.voice-customization-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.voice-customization-form label{display:flex;min-width:0;flex-direction:column;gap:4px;color:#74687f;font-size:10px}
.voice-customization-form select{width:100%;padding:7px;border:1px solid #d8c9e9;border-radius:9px;background:#fff;color:#5f4d73;font-size:10px}
.voice-customization-actions{display:grid;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:8px}
.voice-customization-form button{padding:8px;border:0;border-radius:9px;background:#715c91;color:#fff;font-size:11px}
.voice-customization-form button:disabled{cursor:wait;opacity:.6}
.voice-customization-actions button:first-child{background:#eee5fa;color:#715c91}
.diagnostic-file-button{display:inline-flex;align-items:center;padding:2px 5px;color:#a35d72;font-size:11px;cursor:pointer}
.diagnostic-file-button input{display:none}
.diagnostic-preview{max-height:360px;overflow:auto;white-space:pre-wrap;word-break:break-word;padding:12px;border-radius:12px;background:#241f2b;color:#f8f2ff;font-size:10px;line-height:1.55}
nav { display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:4px;background:rgba(255,255,255,.48);border-radius:18px; }
nav button{border:0;border-radius:14px;background:transparent;color:#8c8099;font-size:11px;font-weight:600}
nav button.active{background:#fff;color:#604d79;box-shadow:0 3px 12px rgba(75,52,116,.12)}
/* 动画保持幅度克制，避免常驻桌面时造成明显视觉干扰。 */
@keyframes float{50%{transform:translateY(-8px) rotate(1deg)}}
@keyframes pulse{50%{transform:scale(1.2)}}
@keyframes sparkle{50%{opacity:.25;transform:translateY(-8px) scale(.7)}}
@keyframes think{50%{transform:translateY(-5px) rotate(-2deg)}}
@keyframes lean-in{50%{transform:translateY(-5px) scale(calc(1 + var(--presentation-intensity)*.025))}}
@keyframes gentle-sway{25%{transform:translateX(-3px) rotate(-1deg)}75%{transform:translateX(3px) rotate(1deg)}}
@keyframes celebrate{35%{transform:translateY(calc(-7px - var(--presentation-intensity)*5px)) rotate(-2deg)}70%{transform:translateY(-2px) rotate(2deg)}}
@keyframes recoil{30%{transform:translateY(2px) scale(.97)}65%{transform:translateY(-3px) scale(1)}}
@keyframes sleepy-drift{50%{transform:translateY(4px) rotate(2deg)}}