/* ============================================================ themes.css — 换肤引擎(Phase 1) 机制: 覆盖 design-system 的变量 + 玻璃 token。 非侵入:只新增覆盖规则,不改 index.html 内联样式。删掉本文件即回滚。 本阶段两套:cream(浅·默认) / purple-smoke(深·紫烟)。其余 5 套后续阶段。 ============================================================ */ /* —— 玻璃 token 默认值(cream 基调) —— */ :root{ --app-bg-image: var(--bg-primary); --card-bg: var(--bg-surface); --card-blur: 0px; --card-border: var(--border); --card-shadow: var(--shadow-soft); --wordmark-grad: var(--text-primary); /* 用户气泡玻璃:比背景浅 + 高光描边(浅色主题默认值) */ --bubble-glass: rgba(255,255,255,.66); --bubble-glass-border: rgba(255,255,255,.9); /* —— 简约字体:全部走无衬线(覆盖掉 --font-serif) + 字号 正文15 —— */ --font-serif: -apple-system,system-ui,'PingFang SC','Helvetica Neue',Arial,sans-serif; --font-sans: -apple-system,system-ui,'PingFang SC','Helvetica Neue',Arial,sans-serif; --text-read: 15px; } /* ===== 主题:cream(浅·奶油) ===== */ html[data-theme="cream"]{ --bg-primary:#F8F8F6; --bg-surface:#F6F6F4; --bubble-user:#EEEEEC; --bg-sunken:#E6E6E4; --text-primary:#1F1E1D; --text-secondary:#6E6D66; --text-faint:#A6A39A; --accent:#DA7756; --accent-hover:#C96846; --accent-fg:#FFFFFF; --border:rgba(31,30,29,.10); --border-strong:rgba(31,30,29,.18); --claude-sidebar-bg:#F3F3F0; --claude-main-surface:#F9F9F7; --claude-main-surface-soft:#F8F8F4; --claude-text-primary:#171717; --claude-text-secondary:#777670; --claude-text-muted:#A6A49D; --claude-recents-text-color:#17161A; --claude-recents-label-color:#777672; --claude-pill-bg:#2A2928; --claude-pill-text:#F0F0EC; --claude-new-chat-bg:#252429; --claude-new-chat-text:#FFFFFF; /* 玻璃 + 背景 */ --app-bg-image: radial-gradient(120% 85% at 50% -8%, #FFFFFF 0%, #F5F4F0 52%, #ECEAE3 100%); --card-bg: rgba(255,255,255,.58); --card-blur: 16px; --card-border: rgba(255,255,255,.7); --card-shadow: 0 8px 24px rgba(31,30,29,.05); --wordmark-grad: linear-gradient(180deg,#2A2926,#6E6D66); --bg-texture:url('tex-smoke.svg'); --bg-texture-blend:multiply; --bg-texture-opacity:.04; } /* ===== 主题:purple-smoke(深·紫烟) ===== */ html[data-theme="purple-smoke"]{ --bg-primary:#0E0B12; --bg-surface:#171320; --bubble-user:#221A30; --bg-sunken:#140F1C; --text-primary:#ECE8F2; --text-secondary:#A79FB5; --text-faint:#6E6780; --accent:#A78BFA; --accent-hover:#8B6FE0; --accent-fg:#0E0B12; --border:rgba(236,232,242,.10); --border-strong:rgba(236,232,242,.22); --shadow-soft:none; --claude-sidebar-bg:#120E18; --claude-main-surface:#0E0B12; --claude-main-surface-soft:#140F1C; --claude-text-primary:#ECE8F2; --claude-text-secondary:#8A8398; --claude-text-muted:#6E6780; --claude-recents-text-color:#ECE8F2; --claude-recents-label-color:#8A8398; --claude-recents-pressed-bg:rgba(255,255,255,.06); --claude-selected-bg:rgba(255,255,255,.08); --claude-pill-bg:#ECE8F2; --claude-pill-text:#171320; --claude-new-chat-bg:#A78BFA; --claude-new-chat-text:#0E0B12; --claude-context-dim-sidebar-bg:#0A070E; --claude-context-dim-main-bg:#0C0912; --claude-context-highlight-bg:#2A2140; --claude-context-menu-bg:#221A33; --claude-context-text-primary:#ECE8F2; --claude-context-highlight-text:#ECE8F2; --claude-context-text-muted:#9A93A8; --claude-context-shadow-rgb:0,0,0; /* 玻璃 + 紫烟背景(纯 CSS 近似体积烟雾) */ --app-bg-image: radial-gradient(95% 72% at 14% 6%, rgba(155,98,255,.44), transparent 62%), radial-gradient(82% 62% at 90% 18%, rgba(120,70,215,.38), transparent 58%), radial-gradient(88% 66% at 68% 96%, rgba(112,72,196,.42), transparent 60%), radial-gradient(72% 58% at 42% 52%, rgba(92,58,165,.26), transparent 66%), linear-gradient(165deg,#130D1C 0%,#0A0710 100%); --card-bg: rgba(34,23,52,.30); --card-blur: 24px; --card-border: rgba(196,168,240,.12); --card-shadow: 0 12px 36px rgba(0,0,0,.38); --wordmark-grad: linear-gradient(180deg,#EEE7FB,#B9A6E8); --bg-texture-opacity:0; --bubble-glass:rgba(255,255,255,.13); --bubble-glass-border:rgba(255,255,255,.14); } /* ===== 主题:紫晕奶白(浅·奶白底 + 紫色雾团晕染;沿用 blue-marble 这个 id 槽) ===== */ html[data-theme="blue-marble"]{ --bg-primary:#F4EFFA; --bg-surface:#F8F4FC; --bubble-user:#EDE6F6; --bg-sunken:#E6DEF2; --text-primary:#2A2440; --text-secondary:#6E6488; --text-faint:#A99FC0; --accent:#9B7BD4; --accent-hover:#8A6AC4; --accent-fg:#FFFFFF; --border:rgba(42,36,64,.10); --border-strong:rgba(42,36,64,.18); --app-bg-image: radial-gradient(88% 58% at 22% 6%, rgba(188,150,238,.42), transparent 55%), radial-gradient(78% 52% at 86% 26%, rgba(208,178,244,.34), transparent 55%), radial-gradient(100% 72% at 55% 102%, rgba(172,138,224,.30), transparent 60%), linear-gradient(180deg,#F8F4FD 0%,#EEE6F8 100%); --card-bg:rgba(255,255,255,.52); --card-blur:18px; --card-border:rgba(255,255,255,.88); --card-shadow:0 8px 26px rgba(120,90,170,.10); --wordmark-grad:linear-gradient(180deg,#5A4A82,#9B7BD4); --bg-texture:url('tex-smoke.svg'); --bg-texture-blend:soft-light; --bg-texture-opacity:.30; --bubble-glass:rgba(255,255,255,.72); --bubble-glass-border:rgba(255,255,255,.95); } /* ===== 主题:lavender-frost(浅·薰衣草雾) ===== */ html[data-theme="lavender-frost"]{ --bg-primary:#ECE8F4; --bg-surface:#F3F0FA; --bubble-user:#E4DCF2; --bg-sunken:#E0D8EE; --text-primary:#2A2438; --text-secondary:#6E6488; --text-faint:#A79FB5; --accent:#8B7BC7; --accent-hover:#7A69B6; --accent-fg:#FFFFFF; --border:rgba(42,36,56,.10); --border-strong:rgba(42,36,56,.18); --app-bg-image: radial-gradient(100% 70% at 50% -8%, #FBFAFF 0%, #EFEAF8 50%, #E3DCF2 100%), radial-gradient(60% 50% at 85% 18%, rgba(170,140,230,.16), transparent 60%); --card-bg:rgba(255,255,255,.55); --card-blur:18px; --card-border:rgba(255,255,255,.78); --card-shadow:0 8px 24px rgba(90,70,130,.10); --wordmark-grad:linear-gradient(180deg,#3A2F52,#8B7BC7); } /* ===== 主题:icy-white(浅·冰白刨冰) ===== */ html[data-theme="icy-white"]{ --bg-primary:#EEF3F8; --bg-surface:#F4F8FC; --bubble-user:#E4EDF6; --bg-sunken:#DCE6F0; --text-primary:#1E2A38; --text-secondary:#5B6B7E; --text-faint:#9AA9BB; --accent:#5B9BD5; --accent-hover:#4A8AC4; --accent-fg:#FFFFFF; --border:rgba(30,42,56,.10); --border-strong:rgba(30,42,56,.18); --app-bg-image: radial-gradient(95% 62% at 50% -10%, #FFFFFF 0%, #EAF1F8 46%, #DAE6F1 100%), linear-gradient(125deg, rgba(180,212,240,.22), transparent 42%); --card-bg:rgba(255,255,255,.62); --card-blur:18px; --card-border:rgba(255,255,255,.82); --card-shadow:0 8px 26px rgba(90,120,160,.12); --wordmark-grad:linear-gradient(180deg,#33465C,#6E86A0); } /* ===== 主题:starfield(深·星空) ===== */ html[data-theme="starfield"]{ --bg-primary:#070C1E; --bg-surface:#0C1430; --bubble-user:#101A3A; --bg-sunken:#0A1228; --text-primary:#DCE6F5; --text-secondary:#8FA0C0; --text-faint:#5A6A88; --accent:#5B8DEF; --accent-hover:#4A7CDE; --accent-fg:#070C1E; --border:rgba(220,230,245,.10); --border-strong:rgba(220,230,245,.22); --shadow-soft:none; --app-bg-image: radial-gradient(92% 66% at 50% 100%, rgba(58,104,220,.40), transparent 64%), radial-gradient(72% 52% at 18% 14%, rgba(74,94,196,.24), transparent 60%), radial-gradient(66% 50% at 85% 30%, rgba(90,80,200,.20), transparent 58%), linear-gradient(180deg,#0A1230 0%,#050818 100%); --card-bg:rgba(13,22,52,.36); --card-blur:24px; --card-border:rgba(125,155,235,.13); --card-shadow:0 12px 36px rgba(0,0,0,.44); --wordmark-grad:linear-gradient(180deg,#E6EEFF,#93B0F0); --bg-texture-opacity:0; --bubble-glass:rgba(255,255,255,.12); --bubble-glass-border:rgba(255,255,255,.13); } html[data-theme="starfield"] #appBg::after{ content:''; position:absolute; inset:0; pointer-events:none; background-repeat:no-repeat; background-image: radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 28% 62%, rgba(255,255,255,.85), transparent), radial-gradient(1.6px 1.6px at 44% 34%, #fff, transparent), radial-gradient(1px 1px at 60% 14%, rgba(255,255,255,.7), transparent), radial-gradient(1.3px 1.3px at 74% 48%, #fff, transparent), radial-gradient(1px 1px at 88% 26%, rgba(255,255,255,.8), transparent), radial-gradient(1.5px 1.5px at 20% 82%, #fff, transparent), radial-gradient(1px 1px at 52% 72%, rgba(255,255,255,.65), transparent), radial-gradient(1.2px 1.2px at 82% 78%, #fff, transparent), radial-gradient(1px 1px at 36% 90%, rgba(255,255,255,.6), transparent), radial-gradient(1.3px 1.3px at 68% 88%, rgba(255,255,255,.75), transparent), radial-gradient(1px 1px at 94% 60%, rgba(255,255,255,.7), transparent); animation:twinkle 4s ease-in-out infinite alternate; } @keyframes twinkle{ from{opacity:.55} to{opacity:1} } /* ===== 主题:meteor-light(浅·流星) ===== */ html[data-theme="meteor-light"]{ --bg-primary:#DCE9F7; --bg-surface:#EAF2FB; --bubble-user:#D6E4F5; --bg-sunken:#CFE0F2; --text-primary:#24303F; --text-secondary:#5A6B80; --text-faint:#93A3B8; --accent:#4C8DFF; --accent-hover:#3B7BEE; --accent-fg:#FFFFFF; --border:rgba(36,48,63,.10); --border-strong:rgba(36,48,63,.18); --app-bg-image: radial-gradient(100% 70% at 50% -10%, #EFF5FC 0%, #DCE9F7 50%, #CBDDF0 100%), repeating-linear-gradient(118deg, rgba(255,255,255,.30) 0 1px, transparent 1px 64px); --card-bg:rgba(255,255,255,.55); --card-blur:18px; --card-border:rgba(255,255,255,.8); --card-shadow:0 8px 24px rgba(70,110,160,.10); --wordmark-grad:linear-gradient(180deg,#2A3A4E,#5A82B0); } /* ===== 背景层 + 让上层透出来 ===== */ html[data-theme]{ background:var(--app-bg-image) center/cover no-repeat fixed; } #appBg{ position:fixed; inset:0; z-index:-1; background:var(--app-bg-image); background-size:cover; background-position:center; pointer-events:none; } /* 湍流肌理层:给背景加真实的烟雾/大理石纹,治"AI味"扁渐变 */ #appBg::before{ content:''; position:absolute; inset:0; pointer-events:none; background-image:var(--bg-texture,none); background-size:cover; background-position:center; mix-blend-mode:var(--bg-texture-blend,soft-light); opacity:var(--bg-texture-opacity,0); } html[data-theme] body{ background:transparent; } html[data-theme] #chat{ background:transparent; } html[data-theme] .composer-wrap{ background:transparent; } /* ===== 玻璃拟态套用到主要表面 ===== */ html[data-theme] .composer-box{ background:var(--card-bg); -webkit-backdrop-filter:blur(var(--card-blur)); backdrop-filter:blur(var(--card-blur)); border:1px solid var(--card-border); box-shadow:var(--card-shadow); } /* 用户气泡:比背景浅的玻璃 + 高光描边 */ html[data-theme] .msg-user .bubble{ background:var(--bubble-glass); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); border:1px solid var(--bubble-glass-border); box-shadow:none; } html[data-theme] .sheet, html[data-theme] .session-menu{ background:var(--card-bg); -webkit-backdrop-filter:blur(var(--card-blur)); backdrop-filter:blur(var(--card-blur)); border:1px solid var(--card-border); box-shadow:var(--card-shadow); } html[data-theme] .topbar .icon-button{ background:var(--card-bg); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--card-border); } /* 其他文字 14(正文 15 由 --text-read 管) */ html[data-theme] .thinking-summary, html[data-theme] .thinking-row{ font-size:14px; } /* 降级:低端/关特效时不糊(可后续用 html[data-fx=lite] 触发) */ html[data-fx="lite"] *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* ============================================================ 面板/浮层主题化 —— memory / diary / model / profile / 对话框 跟随当前主题 根治:系统深色下这些面板被内联 @media(prefers-color-scheme:dark) 钉成黑; 这里用 html[data-theme] 前缀抬高优先级,统一映射到主题变量,7 套通吃。 ============================================================ */ html[data-theme] #memoryPanel, html[data-theme] #diaryPanel{ background:var(--app-bg-image) center/cover no-repeat; color:var(--text-primary); } /* 圆钮 / 返回 / 保存 */ html[data-theme] .profile-round-button, html[data-theme] .profile-back-button{ background:var(--card-bg); -webkit-backdrop-filter:blur(var(--card-blur)); backdrop-filter:blur(var(--card-blur)); border:1px solid var(--card-border); color:var(--text-primary); box-shadow:var(--card-shadow); } html[data-theme] .profile-save-button{ background:var(--card-bg); border:1px solid var(--card-border); color:var(--accent); box-shadow:var(--card-shadow); } html[data-theme] .profile-save-button:disabled{ color:var(--text-faint); } /* 文本层级 */ html[data-theme] .profile-title{ color:var(--text-primary); } html[data-theme] .profile-subtitle, html[data-theme] .profile-section-title, html[data-theme] .profile-help-text, html[data-theme] .profile-nav-chevron, html[data-theme] .profile-nav-row-icon, html[data-theme] .diary-date-header{ color:var(--text-secondary); } html[data-theme] .profile-nav-row-note{ color:var(--text-faint); } /* 卡片 / 行 / 输入 */ html[data-theme] .profile-card, html[data-theme] .profile-nav-row, html[data-theme] .profile-preferences-card, html[data-theme] .profile-empty, html[data-theme] .profile-add-button, html[data-theme] .diary-entry, html[data-theme] .profile-memory-row .profile-memory-card{ background:var(--card-bg); -webkit-backdrop-filter:blur(var(--card-blur)); backdrop-filter:blur(var(--card-blur)); border:1px solid var(--card-border); color:var(--text-primary); box-shadow:none; } html[data-theme] .profile-divider{ background:var(--border); } html[data-theme] .profile-name-input, html[data-theme] .profile-memory-textarea, html[data-theme] .profile-preferences-textarea{ color:var(--text-primary); } html[data-theme] .profile-name-input::placeholder, html[data-theme] .profile-memory-textarea::placeholder, html[data-theme] .profile-preferences-textarea::placeholder{ color:var(--text-faint); } /* 日记月份 pill */ html[data-theme] .diary-month-pill{ background:var(--card-bg); color:var(--text-secondary); border:1px solid var(--card-border); } html[data-theme] .diary-month-pill.active{ background:var(--text-primary); color:var(--bg-primary); } /* 搜索气泡 */ html[data-theme] .memory-search-bubble, html[data-theme] .diary-search-bubble{ background:var(--card-bg); -webkit-backdrop-filter:blur(var(--card-blur)); backdrop-filter:blur(var(--card-blur)); border:1px solid var(--card-border); color:var(--text-secondary); box-shadow:var(--card-shadow); } html[data-theme] .memory-search-icon, html[data-theme] .diary-search-icon{ color:var(--text-secondary); } html[data-theme] .memory-search-input, html[data-theme] .diary-search-input{ color:var(--text-primary); } html[data-theme] .memory-search-input::placeholder, html[data-theme] .diary-search-input::placeholder{ color:var(--text-faint); } /* 模型 sheet / 分组 / 会话对话框 */ html[data-theme] #modelSheet{ background:var(--card-bg); } html[data-theme] .model-group{ background:var(--bg-surface); } html[data-theme] .delete-confirm-popover, html[data-theme] .rename-dialog{ background:var(--bg-surface); color:var(--text-primary); border:1px solid var(--card-border); } html[data-theme] .delete-confirm-popover:after{ border-top-color:var(--bg-surface); } html[data-theme] .rename-input, html[data-theme] .rename-action, html[data-theme] .delete-confirm-button{ background:var(--bg-sunken); color:var(--text-primary); } /* ============================================================ 自定义背景 —— 用户上传的图当背景,盖在主题渐变之上(可调强度) 复用 #appBg::before 这层(平时是肌理,启用自定义背景时改画照片)。 ============================================================ */ html[data-custombg="1"] #appBg::before{ background-image:var(--custom-bg-image,none); background-size:cover; background-position:center; mix-blend-mode:normal; opacity:var(--custom-bg-opacity,1); } /* ============================================================ 外观选择器 UI(设置 → 外观) ============================================================ */ .theme-swatch-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .theme-swatch{ display:flex; flex-direction:column; gap:8px; align-items:center; background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; } .theme-swatch-chip{ width:100%; aspect-ratio:1/1.08; border-radius:16px; border:1px solid var(--card-border); box-shadow:var(--card-shadow); background-size:cover; background-position:center; transition:transform .15s ease; } .theme-swatch:active .theme-swatch-chip{ transform:scale(.96); } .theme-swatch.active .theme-swatch-chip{ outline:2.5px solid var(--accent); outline-offset:2px; } .theme-swatch-name{ font-size:12.5px; color:var(--text-secondary); } .theme-swatch.active .theme-swatch-name{ color:var(--text-primary); font-weight:600; } .custombg-preview{ width:100%; aspect-ratio:16/9; border-radius:14px; border:1px solid var(--card-border); background:var(--bg-sunken) center/cover no-repeat; display:grid; place-items:center; color:var(--text-faint); font-size:13px; } .custombg-range{ width:100%; accent-color:var(--accent); } /* ============================================================ 首页仪表盘(1:1 验收稿) + Apple 液态玻璃底部导航(1:1 验收稿) ============================================================ */ #home{ position:fixed; inset:0; z-index:21; display:flex; flex-direction:column; background:transparent; } .home-scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:calc(env(safe-area-inset-top) + 14px) var(--page-pad) calc(env(safe-area-inset-bottom) + 96px); } .home-in{ width:100%; max-width:480px; margin:0 auto; display:flex; flex-direction:column; gap:14px; } .day-hero{ text-align:center; padding:6px 0 4px; } .hero-art{ width:88px; height:88px; margin:0 auto 8px; border-radius:22px; display:grid; place-items:center; background:var(--card-bg); -webkit-backdrop-filter:blur(var(--card-blur)); backdrop-filter:blur(var(--card-blur)); border:1px solid var(--card-border); font-size:32px; } .hero-mark{ font-family:'Snell Roundhand','Apple Chancery','Segoe Script','Bradley Hand',cursive; font-style:italic; font-size:36px; font-weight:600; line-height:1.1; letter-spacing:.01em; background:var(--wordmark-grad,var(--text-primary)); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero-daylabel{ margin-top:9px; font-size:11px; letter-spacing:.38em; color:var(--text-faint); } .hero-day{ font-size:58px; font-weight:800; line-height:1.02; letter-spacing:-.01em; color:var(--text-primary); } .hero-sub{ margin-top:3px; color:var(--text-secondary); font-size:12px; } .hcard{ padding:15px 17px; border-radius:20px; background:var(--card-bg); -webkit-backdrop-filter:blur(var(--card-blur)); backdrop-filter:blur(var(--card-blur)); border:1px solid var(--card-border); box-shadow:var(--card-shadow); } .hcard-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; } .hcard-title{ display:flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--text-primary); } .hcard-more{ color:var(--text-secondary); font-size:12px; } .usage-row+.usage-row{ margin-top:11px; } .usage-top{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; color:var(--text-secondary); } .usage-top .pct{ color:var(--text-primary); font-weight:700; } .bar{ height:6px; border-radius:999px; background:var(--bg-sunken); overflow:hidden; } .bar>i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-hover)); transition:width .5s ease; } .pet{ display:flex; gap:13px; align-items:flex-start; } .pet-avatar{ position:relative; width:66px; height:66px; flex:none; border-radius:16px; display:grid; place-items:center; background:var(--bg-sunken); border:1px solid var(--card-border); font-size:28px; } .pet-zzz{ position:absolute; top:5px; right:6px; font-size:9px; letter-spacing:2px; color:var(--text-faint); } .pet-body{ flex:1; min-width:0; } .pet-nrow{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:11px; } .pet-name{ font-size:15px; font-weight:600; color:var(--text-primary); } .pet-badge{ padding:3px 9px; border-radius:999px; font-size:11px; color:var(--text-secondary); background:var(--bg-sunken); } .pet-stats{ display:grid; grid-template-columns:1fr 1fr; gap:9px 14px; } .stat-l{ color:var(--text-faint); font-size:11px; } .stat-v{ font-size:14px; font-weight:600; margin-top:1px; color:var(--text-primary); } .msgcard-body{ font-size:13.5px; line-height:1.6; color:var(--text-primary); } /* Apple 液态玻璃底部导航(验收稿:5 格 + 标签 + 中间凸起首页钮) */ .tabbar{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom) + 10px); z-index:90; width:min(calc(100% - 24px),480px); height:60px; display:grid; grid-template-columns:repeat(5,1fr); align-items:center; background:var(--card-bg); -webkit-backdrop-filter:blur(30px) saturate(1.8); backdrop-filter:blur(30px) saturate(1.8); border:1px solid var(--card-border); border-radius:30px; box-shadow:0 16px 44px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.06); transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .24s ease; } .tabbar .tab{ display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--text-faint); font-size:10.5px; background:none; border:0; padding:0; cursor:pointer; font-family:inherit; } .tabbar .tab svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .tabbar .tab.active{ color:var(--accent); } .tabbar .tab:active{ transform:scale(.92); } .tabbar .tab.home-tab .home-btn{ width:42px; height:42px; margin-top:-6px; border-radius:50%; display:grid; place-items:center; background:var(--accent); border:0; color:var(--accent-fg); box-shadow:0 6px 16px rgba(0,0,0,.22); } .tabbar .tab.home-tab .home-btn svg{ width:21px; height:21px; stroke:var(--accent-fg); } /* 隐藏 tabbar:未进 app(gate)/ 全屏面板 / 底部 sheet 打开时,避免遮挡 */ body:not(.chat-ready) .tabbar{ opacity:0; transform:translateX(-50%) translateY(150%); pointer-events:none; } body:has(.sheet.show) .tabbar{ opacity:0; transform:translateX(-50%) translateY(160%); pointer-events:none; } html[data-theme] .memory-search-bar, html[data-theme] .diary-search-bar{ bottom:calc(env(safe-area-inset-bottom) + 84px); } html[data-theme] #diaryPanel .diary-content{ padding-bottom:calc(env(safe-area-inset-bottom) + 142px); } /* 聊天页 composer 给底部导航让出空间 */ html[data-theme] .composer-wrap{ padding-bottom:calc(env(safe-area-inset-bottom) + 84px); } /* ===== 聊天页 1:1 细节(验收稿) ===== */ /* THINKING 面板化:头行橙色小标 + 斜体摘要,整块玻璃卡(点击仍开思考 sheet) */ html[data-theme] .thinking-summary{ flex-wrap:wrap; padding:13px 15px; border-radius:16px; background:var(--card-bg); -webkit-backdrop-filter:blur(var(--card-blur)); backdrop-filter:blur(var(--card-blur)); border:1px solid var(--card-border); } html[data-theme] .thinking-summary::before{ content:'▾ THINKING'; width:100%; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.16em; margin-bottom:8px; } html[data-theme] .thinking-summary .thinking-clock{ display:none; } html[data-theme] .thinking-summary .thinking-summary-text{ color:var(--text-secondary); font-style:italic; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } /* 顶栏:在线小绿点 */ html[data-theme] #topbarModelSetting::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:#3ecf8e; margin-right:5px; vertical-align:1px; } html[data-theme] #topbarModelSetting::after{ content:' · 在线'; } /* 输入框模型胶囊 */ .composer-cap{ display:flex; align-items:center; gap:6px; padding:6px 11px; background:var(--bg-sunken); border:0; border-radius:15px; font-size:13px; color:var(--text-primary); cursor:pointer; font-family:inherit; }