/* ===== 沙琪玛 uxbot 主题覆写（在 uxbot.css 之后加载） ===== */ /* 品牌变量：shadcn HSL 变量换成沙琪玛绿色科技系 */ :root { --primary: 239 84% 67%; /* #6366F1 indigo */ --primary-foreground: 0 0% 100%; --primary-hover: 239 84% 60%; --accent: 258 90% 66%; /* #8B5CF6 violet */ --accent-foreground: 0 0% 100%; --accent-hover: 258 90% 60%; --ring: 239 84% 67%; --sidebar-primary: 239 84% 67%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 258 90% 66%; --sidebar-ring: 239 84% 67%; --sq-green: #6366F1; --sq-green-bright: #8B5CF6; --sq-ink: #0B0F14; } body.dark { --background: 216 22% 6%; --foreground: 150 20% 92%; --card: 210 20% 9%; --card-foreground: 150 20% 92%; --popover: 210 20% 9%; --popover-foreground: 150 20% 92%; --secondary: 200 14% 15%; --secondary-foreground: 150 20% 88%; --muted: 200 14% 15%; --muted-foreground: 160 8% 60%; --border: 190 16% 18%; --input: 190 16% 18%; --sidebar-background: 213 20% 7%; --sidebar-foreground: 150 20% 92%; --sidebar-border: 190 16% 16%; } /* ===== 布局骨架 ===== */ html, body { height: 100%; margin: 0; } body { font-family: var(--font-sans, "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif); background: hsl(var(--background)); color: hsl(var(--foreground)); overflow: hidden; } #pcb-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .3; } body.dark #pcb-bg { opacity: .5; } #pcb-bg .trace { stroke: var(--sq-green); stroke-opacity: .25; fill: none; stroke-width: 1.5; } #pcb-bg .via, #pcb-bg .pad { fill: none; stroke: var(--sq-green); stroke-opacity: .4; } #pcb-bg .pulse { stroke: var(--sq-green-bright); fill: none; stroke-width: 1.5; stroke-dasharray: 5 95; animation: pcb-flow linear infinite; } #pcb-bg .trail { stroke: var(--sq-green-bright); stroke-opacity: .35; fill: none; stroke-width: 1.5; stroke-dasharray: 12 88; animation: pcb-flow linear infinite; } @keyframes pcb-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } #app { position: relative; z-index: 1; display: flex; height: 100vh; } /* ===== 侧栏（uxbot 风） ===== */ .ux-sidebar { width: 264px; flex-shrink: 0; display: flex; flex-direction: column; background: hsl(var(--sidebar-background)); border-right: 1px solid hsl(var(--sidebar-border)); transition: margin-left .25s ease; } #app.collapsed .ux-sidebar { margin-left: -264px; } .ux-brand { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; } .ux-brand-logo { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; flex-shrink: 0; } .ux-brand-logo img { width: 100%; height: 100%; display: block; } .ux-brand-text { display: flex; flex-direction: column; min-width: 0; } .ux-brand-name { font-weight: 700; font-size: 17px; letter-spacing: .3px; } .ux-brand-sub { font-size: 11px; color: hsl(var(--muted-foreground)); } .ux-side-section { padding: 4px 12px 10px; } .ux-btn-primary { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border: none; border-radius: 10px; cursor: pointer; background: linear-gradient(135deg, var(--sq-green), var(--sq-green-bright)); color: #FFFFFF; font-weight: 600; font-size: 14px; transition: filter .15s, transform .1s; } .ux-btn-primary:hover { filter: brightness(1.08); } .ux-btn-primary:active { transform: scale(.98); } .ux-btn-primary { color: #fff; } .side-label { padding: 8px 18px 6px; font-size: 12px; color: hsl(var(--muted-foreground)); letter-spacing: .5px; } /* 会话列表 */ .chat-list { flex: 1; overflow-y: auto; padding: 0 8px; } .chat-item { display: flex; align-items: center; gap: 6px; padding: 9px 10px; margin-bottom: 2px; border-radius: 9px; cursor: pointer; font-size: 13.5px; color: hsl(var(--sidebar-foreground)); transition: background .12s; } .chat-item:hover { background: hsl(var(--muted) / .6); } .chat-item.active { background: hsl(var(--primary) / .14); color: hsl(var(--primary)); font-weight: 600; } .chat-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-item .del { opacity: 0; border: none; background: none; color: hsl(var(--muted-foreground)); cursor: pointer; padding: 2px; border-radius: 5px; display: flex; } .chat-item:hover .del { opacity: 1; } .chat-item .del:hover { color: hsl(var(--destructive)); background: hsl(var(--destructive) / .12); } /* 侧栏底部 */ .side-bottom { border-top: 1px solid hsl(var(--sidebar-border)); padding: 10px 14px 8px; } .model-picker { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .model-picker label { font-size: 12px; color: hsl(var(--muted-foreground)); flex-shrink: 0; } .model-picker select { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; border: 1px solid hsl(var(--input)); background: hsl(var(--card)); color: hsl(var(--foreground)); } .side-actions { display: flex; align-items: center; gap: 6px; } .icon-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid hsl(var(--border)); border-radius: 8px; cursor: pointer; background: hsl(var(--card)); color: hsl(var(--muted-foreground)); transition: color .12s, border-color .12s; } .icon-btn:hover { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .5); } .quota { margin-left: auto; font-size: 12px; color: hsl(var(--muted-foreground)); } .side-foot { margin-top: 8px; font-size: 11px; color: hsl(var(--muted-foreground)); text-align: center; opacity: .8; } #user-card { margin: 0 !important; border-radius: 10px !important; margin-bottom: 8px !important; } /* ===== 主区 ===== */ .ux-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .ux-topbar { height: var(--header-height, 60px); flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background) / .85); backdrop-filter: blur(8px); } #topbar-title { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .badge-link { font-size: 12.5px; color: hsl(var(--primary)); text-decoration: none; padding: 5px 12px; border: 1px solid hsl(var(--primary) / .35); border-radius: 999px; transition: background .12s; } .badge-link:hover { background: hsl(var(--primary) / .1); } .badge { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } /* 消息区 */ #chat-scroll { flex: 1; overflow-y: auto; padding: 24px 0; } #messages { max-width: 820px; margin: 0 auto; padding: 0 24px; display: none; } #messages.has-content { display: block; } .msg { display: flex; gap: 12px; margin-bottom: 22px; } .msg .avatar { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } .msg.user .avatar { background: linear-gradient(135deg, var(--sq-green), var(--sq-green-bright)); color: #FFFFFF; } .msg .avatar img { width: 100%; height: 100%; } .msg .body { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.75; } .msg.user .body { background: hsl(var(--primary) / .1); border: 1px solid hsl(var(--primary) / .2); padding: 10px 14px; border-radius: 12px; border-top-left-radius: 4px; white-space: pre-wrap; } .msg.assistant .body { padding-top: 2px; } .msg .role-name { font-size: 12px; font-weight: 600; color: hsl(var(--primary)); margin-bottom: 4px; } .msg .md > :first-child { margin-top: 0; } .msg .md > :last-child { margin-bottom: 0; } .cursor-blink::after { content: '▍'; color: var(--sq-green-bright); animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } /* markdown 元素 */ .md pre { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 10px; overflow: hidden; margin: 10px 0; } .md pre .code-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; font-size: 12px; color: hsl(var(--muted-foreground)); border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .4); } .md pre code { display: block; padding: 12px 14px; overflow-x: auto; font-size: 13px; font-family: Consolas, "Cascadia Code", monospace; } .md code:not(pre code) { background: hsl(var(--muted)); padding: 1px 6px; border-radius: 5px; font-size: .9em; } .copy-btn { border: none; background: none; color: hsl(var(--primary)); cursor: pointer; font-size: 12px; } .md table { border-collapse: collapse; margin: 10px 0; } .md th, .md td { border: 1px solid hsl(var(--border)); padding: 6px 12px; font-size: 13.5px; } .md th { background: hsl(var(--muted) / .5); } .md blockquote { border-left: 3px solid hsl(var(--primary) / .5); margin: 10px 0; padding: 2px 14px; color: hsl(var(--muted-foreground)); } /* 工具卡片 */ .tools { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; } .tool-card { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 12px; border-radius: 9px; font-size: 12.5px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); } .tool-card.running { border-color: hsl(var(--primary) / .4); } .tool-card.done { opacity: .85; } .tool-card.error { border-color: hsl(var(--destructive) / .5); } .tc-icon { color: hsl(var(--primary)); display: flex; } .tc-name { font-weight: 600; } .tc-detail { color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; } .tc-status { margin-left: auto; display: flex; } .tc-status .spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .tc-summary { width: 100%; color: hsl(var(--muted-foreground)); font-size: 12px; } /* 欢迎页 */ #welcome { max-width: 820px; margin: 0 auto; padding: 7vh 24px 40px; text-align: center; } #welcome.hidden { display: none; } .welcome-logo { width: 76px; height: 76px; margin: 0 auto 18px; } .welcome-logo img { width: 100%; height: 100%; } #welcome h1 { font-size: 26px; font-weight: 700; margin: 0 0 10px; } .welcome-sub { color: hsl(var(--muted-foreground)); font-size: 14px; margin: 0 0 30px; } .suggest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; text-align: left; } .suggest-card { padding: 14px 16px; border-radius: 12px; cursor: pointer; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); transition: border-color .12s, transform .1s; } .suggest-card:hover { border-color: hsl(var(--primary) / .5); transform: translateY(-1px); } .sc-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: hsl(var(--primary)); margin-bottom: 5px; } .sc-desc { font-size: 12.5px; color: hsl(var(--muted-foreground)); } /* 输入区 */ #composer-wrap { flex-shrink: 0; padding: 10px 24px 14px; } #composer { max-width: 820px; margin: 0 auto; position: relative; display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow-soft); transition: border-color .15s; } #composer:focus-within { border-color: hsl(var(--primary) / .55); } #composer-tools { width: 100%; display: flex; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; cursor: pointer; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--muted-foreground)); transition: all .12s; } .chip:hover { border-color: hsl(var(--primary) / .5); color: hsl(var(--primary)); } .chip.on { background: hsl(var(--primary) / .12); border-color: hsl(var(--primary) / .6); color: hsl(var(--primary)); font-weight: 600; } #input { flex: 1; min-width: 200px; border: none; outline: none; resize: none; background: transparent; color: hsl(var(--foreground)); font-size: 14.5px; line-height: 1.6; max-height: 200px; font-family: inherit; padding: 6px 4px; } .send-btn { width: 38px; height: 38px; border: none; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(135deg, var(--sq-green), var(--sq-green-bright)); color: #FFFFFF; transition: filter .15s, opacity .15s; } .send-btn:hover:not(:disabled) { filter: brightness(1.1); } .send-btn:disabled { opacity: .35; cursor: not-allowed; } .send-btn.stop { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .composer-hint { max-width: 820px; margin: 8px auto 0; text-align: center; font-size: 11.5px; color: hsl(var(--muted-foreground)); } /* 滚动条 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / .3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / .5); } /* 移动端 */ @media (max-width: 768px) { /* console pages mobile: sidebar -> top bar (2026-09-05 fix blocked content) */ .ux-sidebar { position: static !important; z-index: auto !important; height: auto !important; width: 100% !important; flex-direction: row !important; align-items: center; gap: 10px; overflow-x: auto; box-shadow: none !important; border-right: none; border-bottom: 1px solid hsl(var(--sidebar-border)); padding: 8px 12px !important; } #app:has(.ux-sidebar) { flex-direction: column !important; } .ux-sidebar .ux-brand { flex-shrink: 0; } .ux-sidebar .ux-nav { display: flex !important; flex-direction: row !important; gap: 2px; overflow-x: auto; flex: 1; } .ux-sidebar .ux-nav-item { flex-shrink: 0; white-space: nowrap; } .ux-sidebar .side-bottom { display: none; } #chat-scroll { padding: 16px 0; } #messages, #welcome, #composer, .composer-hint { padding-left: 14px; padding-right: 14px; } .suggest-grid { grid-template-columns: 1fr; } } /* ===== uxbot �ַ��ٷ��鵼�� ===== */ .ux-accordion { margin: 2px 8px; } .ux-accordion summary { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: hsl(var(--sidebar-foreground)); list-style: none; user-select: none; transition: background .12s; } .ux-accordion summary::-webkit-details-marker { display: none; } .ux-accordion summary:hover { background: hsl(var(--muted) / .6); } .acc-ico { width: 18px; text-align: center; font-size: 14px; } .acc-arrow { margin-left: auto; transition: transform .18s; opacity: .55; } .ux-accordion[open] .acc-arrow { transform: rotate(180deg); } .acc-body { padding: 2px 0 6px; display: flex; flex-direction: column; gap: 1px; } .acc-item { display: block; padding: 8px 10px 8px 36px; border-radius: 8px; font-size: 13px; text-decoration: none; color: hsl(var(--sidebar-foreground)); transition: background .12s, color .12s; } .acc-item:hover { background: hsl(var(--muted) / .6); } .acc-item.active { background: hsl(var(--primary) / .14); color: hsl(var(--primary)); font-weight: 600; } /* ===== ƽ̨�Dz���������ҳ�����ṹ�� ===== */ .shell-sidebar { width: 236px; flex-shrink: 0; display: flex; flex-direction: column; background: hsl(var(--sidebar-background)); border-right: 1px solid hsl(var(--sidebar-border)); } .shell-nav { flex: 1; overflow-y: auto; padding: 4px 0; } .shell-bottom { border-top: 1px solid hsl(var(--sidebar-border)); padding: 10px 14px 8px; } .shell-bottom .side-actions { display: flex; align-items: center; gap: 6px; } .shell-bottom .side-foot { margin-top: 8px; font-size: 11px; color: hsl(var(--muted-foreground)); text-align: center; opacity: .8; } .shell-bottom #user-card { margin-bottom: 8px; } /* ����״̬��������ȫ���� */ #app.collapsed .shell-sidebar, #app.collapsed #sidebar { display: none; } /* ��Ϣ��ͷ�� logo ���� */ .msg .rounded-full img { border-radius: 50%; } /* �Ự��Ƭɾ����ť��ɫ��uxbot ��Ƭѡ��̬�£� */ .chat-item .del { border: none; background: none; color: inherit; opacity: .6; cursor: pointer; padding: 3px; border-radius: 5px; display: flex; align-items: center; } .chat-item .del:hover { opacity: 1; background: hsl(var(--destructive) / .2); } /* �ƶ��� */ @media (max-width: 900px) { .shell-sidebar { display: none; } #sidebar { position: fixed; z-index: 40; height: 100vh; box-shadow: var(--shadow-card); } #app.collapsed #sidebar { display: none; } } /* ����ѡ��������chip ��� */ .chip-select { appearance: none; -webkit-appearance: none; padding-right: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; } .chip-select:focus { outline: none; border-color: hsl(var(--primary) / .6); } /* ===== �����л��������� + ��壩 ===== */ .persona-card { display:flex; align-items:center; gap:9px; padding:8px 10px; margin:0 10px 8px; border-radius:12px; border:1px solid hsl(var(--border)); background:hsl(var(--background)/.6); cursor:pointer; transition:border-color .15s, background .15s; } .persona-card:hover { border-color:hsl(var(--primary)/.5); background:hsl(var(--accent)/.4); } .persona-av { width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#6366F1,#8B5CF6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex-shrink:0; } .persona-info { flex:1;min-width:0; } .persona-name { font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .persona-desc { font-size:11px;color:hsl(var(--muted-foreground));overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .persona-arrow { color:hsl(var(--muted-foreground));flex-shrink:0; } .persona-modal { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; } .persona-modal.hidden { display:none; } .persona-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); } .persona-panel { position:relative; width:400px; max-width:92vw; max-height:80vh; overflow:auto; background:#12141C; border:1px solid #262A3A; border-radius:16px; padding:18px; box-shadow:0 24px 60px rgba(0,0,0,.5); } .persona-panel-head { display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:15px; } .persona-panel-head button { background:none;border:none;color:#8B93A7;cursor:pointer;font-size:15px;padding:4px; } .persona-panel-sub { font-size:12px; color:#8B93A7; margin:4px 0 12px; } .persona-list { display:flex; flex-direction:column; gap:6px; } .persona-opt { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; cursor:pointer; border:1px solid transparent; } .persona-opt:hover { background:hsl(var(--accent)/.4); } .persona-opt.active { border-color:hsl(var(--primary)/.5); background:hsl(var(--accent)/.5); } .persona-opt-av { width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#6366F1,#8B5CF6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex-shrink:0; } .persona-opt b { font-size:13.5px; } .persona-opt-desc { font-size:11.5px; color:hsl(var(--muted-foreground)); } .persona-opt-check { margin-left:auto; color:#8B5CF6; font-weight:700; } /* ===== 生图结果：图片在左，右侧空余处操作列（另存为/转视频） ===== */ .gen-result { display:flex; gap:12px; align-items:flex-start; } .gen-result img { max-width:68%; border-radius:12px; border:1px solid hsl(var(--border)); } .gen-actions { flex:0 0 auto; display:flex; flex-direction:column; gap:8px; align-items:flex-start; min-width:110px; } .gen-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:8px; font-size:12px; font-weight:600; text-decoration:none; cursor:pointer; border:none; line-height:1.4; } .gen-btn.btn-primary { background:linear-gradient(135deg,#6366F1,#8B5CF6); color:#fff; } .gen-btn.btn-ghost { border:1px solid hsl(var(--primary)/.5); background:transparent; color:hsl(var(--primary)); } .gen-btn:disabled { opacity:.6; cursor:not-allowed; } .gen-meta { font-size:11px; color:hsl(var(--muted-foreground)); } .gen-video video { max-width:100%; border-radius:12px; border:1px solid hsl(var(--border)); } @media (max-width:640px) { .gen-result { flex-direction:column; } .gen-result img { max-width:100%; } .gen-actions { flex-direction:row; flex-wrap:wrap; align-items:center; min-width:0; } } /* ============ 个性化设置（2026-08-30） ============ */ /* --- 主题色（body[data-accent]） --- */ body[data-accent="black"] { --primary:0 0% 9%; --primary-hover:0 0% 24%; --ring:0 0% 9%; --sidebar-primary:0 0% 9%; --sidebar-ring:0 0% 9%; --accent:0 0% 18%; --accent-hover:0 0% 30%; --sidebar-accent:0 0% 18%; } body[data-accent="black"].dark { --primary:0 0% 92%; --primary-hover:0 0% 78%; --ring:0 0% 92%; --sidebar-primary:0 0% 92%; --sidebar-ring:0 0% 92%; --accent:0 0% 76%; --accent-hover:0 0% 64%; --sidebar-accent:0 0% 76%; } body[data-accent="violet"] { --primary:239 84% 67%; --primary-hover:239 84% 58%; --ring:239 84% 67%; --sidebar-primary:239 84% 67%; --sidebar-ring:239 84% 67%; } body[data-accent="teal"] { --primary:172 74% 44%; --primary-hover:172 74% 36%; --ring:172 74% 44%; --sidebar-primary:172 74% 44%; --sidebar-ring:172 74% 44%; --accent:166 85% 56%; --accent-hover:166 85% 48%; --sidebar-accent:166 85% 56%; } body[data-accent="coral"] { --primary:16 92% 58%; --primary-hover:16 92% 50%; --ring:16 92% 58%; --sidebar-primary:16 92% 58%; --sidebar-ring:16 92% 58%; --accent:22 95% 64%; --accent-hover:22 95% 56%; --sidebar-accent:22 95% 64%; } body[data-accent="rose"] { --primary:340 82% 56%; --primary-hover:340 82% 48%; --ring:340 82% 56%; --sidebar-primary:340 82% 56%; --sidebar-ring:340 82% 56%; --accent:330 85% 60%; --accent-hover:330 85% 52%; --sidebar-accent:330 85% 60%; } body[data-accent="sky"] { --primary:210 90% 54%; --primary-hover:210 90% 46%; --ring:210 90% 54%; --sidebar-primary:210 90% 54%; --sidebar-ring:210 90% 54%; --accent:200 95% 62%; --accent-hover:200 95% 54%; --sidebar-accent:200 95% 62%; } /* --- 布局（body[data-layout]） --- */ body[data-layout="compact"] .shell-sidebar { display:none; } body[data-layout="compact"] #sidebar.w-64 { width: 20rem; } body[data-layout="immersive"] .shell-sidebar, body[data-layout="immersive"] #sidebar.w-64 { display:none; } body[data-layout="immersive"] .app-main, body[data-layout="immersive"] #chat-scroll { max-width:none; } body[data-layout="immersive"] .max-w-4xl { max-width: 100%; } body[data-layout="wide"] #messages.max-w-4xl { max-width: 74rem; } /* --- 图标动态动画 --- */ .anim-spin { animation: pz-spin 14s linear infinite; } .anim-breathe { animation: pz-breathe 3.4s ease-in-out infinite; } .anim-blink { animation: pz-blink 4.2s step-end infinite; } @keyframes pz-spin { to { transform: rotate(360deg); } } @keyframes pz-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.13); } } @keyframes pz-blink { 0%,88%,100% { opacity:1; } 92% { opacity:.15; } 96% { opacity:1; } } /* --- AI 背景（body[data-bg]） --- */ body[data-bg="default"] #pcb-bg { display:none; } body[data-bg="circuit"] #pcb-bg { display:block; } body[data-bg="aurora"]::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: linear-gradient(135deg,#eef2ff 0%,#e0e7ff 40%,#f5f3ff 100%); animation: pz-aurora-bg 18s ease-in-out infinite alternate; } body[data-bg="aurora"]::after { content:""; position:fixed; inset:-22%; z-index:0; pointer-events:none; background: radial-gradient(40% 36% at 24% 26%, rgba(99,102,241,.34), transparent 70%), radial-gradient(34% 30% at 76% 20%, rgba(139,92,246,.30), transparent 70%), radial-gradient(38% 34% at 52% 80%, rgba(16,185,129,.18), transparent 70%); filter: blur(30px); animation: pz-aurora-move 24s ease-in-out infinite alternate; } body[data-accent="coral"][data-bg="aurora"]::before { background: linear-gradient(135deg,#fff7ed 0%,#ffedd5 40%,#fef3c7 100%); } body[data-accent="coral"][data-bg="aurora"]::after { background: radial-gradient(40% 36% at 24% 26%, rgba(249,115,22,.30), transparent 70%), radial-gradient(34% 30% at 76% 20%, rgba(244,63,94,.26), transparent 70%), radial-gradient(38% 34% at 52% 80%, rgba(251,191,36,.20), transparent 70%); } body.dark[data-bg="aurora"]::before { background: linear-gradient(135deg,#0b0d1a 0%,#101836 45%,#1a1038 100%); } body.dark[data-bg="aurora"]::after { background: radial-gradient(40% 36% at 24% 26%, rgba(99,102,241,.40), transparent 70%), radial-gradient(34% 30% at 76% 20%, rgba(139,92,246,.36), transparent 70%), radial-gradient(38% 34% at 52% 80%, rgba(16,185,129,.20), transparent 70%); } @keyframes pz-aurora-bg { from { filter:hue-rotate(0deg); } to { filter:hue-rotate(24deg); } } @keyframes pz-aurora-move { from { transform:translate(0,0) rotate(0deg); } to { transform:translate(5%,-4%) rotate(5deg); } } body[data-bg="starfield"]::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background-color:#0d1226; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Ccircle cx='24' cy='36' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='128' cy='52' r='1.1' fill='%23ffffff' opacity='.75'/%3E%3Ccircle cx='196' cy='28' r='1.4' fill='%23c7d2fe'/%3E%3Ccircle cx='64' cy='108' r='1' fill='%23ffffff' opacity='.55'/%3E%3Ccircle cx='168' cy='120' r='1.7' fill='%23ffffff'/%3E%3Ccircle cx='32' cy='180' r='1.2' fill='%23ffffff' opacity='.7'/%3E%3Ccircle cx='112' cy='200' r='1' fill='%23c7d2fe' opacity='.6'/%3E%3Ccircle cx='208' cy='184' r='1.4' fill='%23ffffff' opacity='.8'/%3E%3C/svg%3E"); background-size: 240px 240px; animation: pz-star-drift 90s linear infinite; } body[data-bg="starfield"]::after { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Ccircle cx='40' cy='20' r='1.2' fill='%23a5b4fc' opacity='.8'/%3E%3Ccircle cx='140' cy='90' r='1.5' fill='%23ffffff' opacity='.6'/%3E%3Ccircle cx='80' cy='150' r='1' fill='%23ffffff' opacity='.5'/%3E%3Ccircle cx='170' cy='160' r='1.3' fill='%23a5b4fc' opacity='.7'/%3E%3C/svg%3E"); background-size: 180px 180px; animation: pz-star-drift2 60s linear infinite; } @keyframes pz-star-drift { from { background-position: 0 0; } to { background-position: 240px 240px; } } @keyframes pz-star-drift2 { from { background-position: 0 0; } to { background-position: -180px 180px; } } } body[data-bg="grid"]::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(rgba(120,120,150,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(120,120,150,.12) 1px, transparent 1px); background-size: 44px 44px; } body[data-bg="sunset"]::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: linear-gradient(160deg,#eef2ff 0%,#ede9fe 30%,#fce7f3 62%,#fed7aa 100%); animation: pz-aurora-bg 22s ease-in-out infinite alternate; } body.dark[data-bg="sunset"]::before { background: linear-gradient(160deg,#170f2e 0%,#33154a 38%,#6b2a52 70%,#b4533a 100%); } /* 内容层提升到背景之上 */ body[data-bg="aurora"] .app-shell, body[data-bg="starfield"] .app-shell, body[data-bg="grid"] .app-shell, body[data-bg="sunset"] .app-shell { position:relative; z-index:1; } /* --- 个性化面板 --- */ #personalize-modal .persona-panel { width: 580px; max-width: 94vw; max-height: 84vh; overflow-y: auto; } .pz-sec { margin-bottom: 18px; } .pz-sec-title { font-size: 13px; font-weight: 600; color: var(--foreground); margin-bottom: 9px; display:flex; align-items:center; gap:7px; } .pz-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:10px; } .pz-opt { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px 8px; border-radius:12px; border:1px solid var(--border); cursor:pointer; background: transparent; color: var(--foreground); font-size:11px; transition:all .15s; } .pz-opt:hover { border-color: hsl(var(--primary) / .6); } .pz-opt.active { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / .32); background: hsl(var(--primary) / .08); } .pz-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(128,128,128,.28); box-sizing: border-box; } .pz-iconbox { width: 38px; height: 38px; display:flex; align-items:center; justify-content:center; border-radius: 10px; background: rgba(128,128,150,.10); } .pz-iconbox svg { width: 30px; height: 30px; } .pz-dyn { position:absolute; top:-5px; right:-5px; font-size:9px; line-height:1; background: hsl(var(--primary)); color:#fff; border-radius:7px; padding:2px 5px; box-shadow:0 1px 4px rgba(0,0,0,.25); } .pz-opt > .pz-iconbox { position:relative; } .pz-upload-row { display:flex; gap:8px; align-items:center; margin-top:10px; } .chip-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; border:1px solid var(--border); background: transparent; color: var(--foreground); font-size:12px; cursor:pointer; } .chip-btn:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); } .chip-btn.primary { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .pz-bgcard { height: 46px; width: 100%; border-radius: 10px; border: 1px solid var(--border); position:relative; overflow:hidden; } .pz-bgcard .pz-bgname { position:absolute; left:6px; bottom:4px; font-size:10px; font-weight:600; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); } .pz-bg-default { background: linear-gradient(135deg,#f9fafb,#e5e7eb); } .pz-bg-aurora { background: linear-gradient(135deg,#6366f1,#8b5cf6 50%,#22d3ee); } .pz-bg-starfield { background: radial-gradient(1.5px 1.5px at 25% 30%, #fff, transparent 100%), radial-gradient(1.5px 1.5px at 70% 60%, #fff, transparent 100%), linear-gradient(160deg,#0f172a,#1e1b4b); } .pz-bg-circuit { background: linear-gradient(135deg,#1e293b,#0f172a), repeating-linear-gradient(45deg, transparent 0 6px, rgba(99,102,241,.25) 6px 7px); } .pz-bg-grid { background: linear-gradient(rgba(100,100,130,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(100,100,130,.3) 1px, transparent 1px), #f8fafc; background-size: 22px 22px; } .pz-bg-sunset { background: linear-gradient(160deg,#7c3aed,#db2777 50%,#f97316); } .pz-foot { display:flex; justify-content:flex-end; margin-top:4px; } /* --- 更多颜色色板 & 自定义背景（2026-08-30 第二轮） --- */ .pz-custom-dot { width:26px; height:26px; border-radius:50%; background:conic-gradient(#f43f5e,#f97316,#facc15,#22c55e,#06b6d4,#6366f1,#a855f7,#f43f5e); border:2px solid rgba(128,128,128,.28); box-sizing:border-box; } .pz-palette { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; } .pz-palette.hidden { display:none; } .pz-palette-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); } .pz-palette-panel { position:relative; width:330px; max-width:92vw; background:hsl(var(--popover)); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:0 20px 60px rgba(0,0,0,.35); color:var(--foreground); } .pz-palette-head { display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:14px; margin-bottom:12px; } .pz-palette-head button { background:none; border:none; color:var(--muted-foreground); font-size:14px; cursor:pointer; padding:2px 6px; } #pz-color-input { width:100%; height:42px; border:1px solid var(--border); border-radius:10px; background:transparent; cursor:pointer; margin-bottom:10px; padding:2px; box-sizing:border-box; } .pz-palette-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:7px; } .pz-palette-swatch { width:100%; aspect-ratio:1; border-radius:8px; border:1px solid rgba(128,128,128,.25); cursor:pointer; transition:transform .12s; } .pz-palette-swatch:hover { transform:scale(1.15); } body[data-bg="custom"]::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:var(--custom-bg); background-size:cover; background-position:center; } .pz-bg-custom { background:conic-gradient(#f43f5e,#f97316,#facc15,#22c55e,#06b6d4,#6366f1,#a855f7,#f43f5e); } /* ===== mobile header adapt (2026-08-31, uxbot responsive) ===== */ .badge-link { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .badge-link svg { flex-shrink: 0; } .badge-link .bl-text { display: none; } @media (min-width: 640px) { .badge-link .bl-text { display: inline; } } @media (max-width: 640px) { header { padding-left: 12px; padding-right: 12px; } header .flex.items-center.gap-2 { gap: 4px; } .badge-link { padding: 5px 8px; } header h1 { font-size: 14px; } header p { font-size: 10px; } } /* ===================================================================== v3 大改版（2026-09-01）：App 双栏 / 双模式条 / 思维链 / Agent 干活可视化 ===================================================================== */ /* --- 侧栏品牌行 + 底部功能区 --- */ .sb-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .sb-brand-logo { width: 36px; height: 36px; } .sb-brand-sub { font-size: 11px; color: hsl(var(--muted-foreground)); } .sb-toolrow { display: flex; align-items: center; gap: 6px; margin: 10px 0 8px; } .sb-toolrow .icon-btn { width: 30px; height: 30px; } .sb-toolrow .quota { margin-left: auto; font-size: 11.5px; } .sb-bottom .model-picker { margin: 0 0 6px; } /* --- 布局语义（壳侧栏已移除，单选栏） --- */ body[data-layout="app"] #sidebar { width: 300px; } body[data-layout="slim"] #sidebar { width: 232px; } body[data-layout="immersive"] #sidebar { display: none; } body[data-layout="immersive"] #btn-menu { display: none; } body[data-layout="wide"] #messages, body[data-layout="wide"] #welcome { max-width: 960px; } body[data-layout="wide"] #composer-wrap .max-w-4xl { max-width: 960px; } /* --- 双模式条：⚡快速 / 🧠深度思考 --- */ .mode-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .mode-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: 999px; font-size: 12.5px; cursor: pointer; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--muted-foreground)); transition: all .15s; } .mode-btn:hover { border-color: hsl(var(--primary) / .55); color: hsl(var(--primary)); } .mode-btn.on { background: linear-gradient(135deg, var(--sq-green), var(--sq-green-bright)); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 2px 10px hsl(var(--primary) / .35); } .mode-btn svg { flex-shrink: 0; } /* --- chips 横向滚动（不再溢出被裁） --- */ #composer-tools { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } #composer-tools::-webkit-scrollbar { display: none; } #composer-tools .chip { flex-shrink: 0; } /* --- Agent 干活状态条 --- */ .agent-bar { display: flex; align-items: center; gap: 8px; padding: 8px 18px; font-size: 12.5px; background: hsl(var(--primary) / .08); color: hsl(var(--primary)); border-bottom: 1px solid hsl(var(--primary) / .25); flex-shrink: 0; } .agent-bar.hidden { display: none; } .agent-bar .spin { animation: spin 1s linear infinite; display: flex; } .agent-bar .ab-step { font-weight: 700; } .agent-bar .ab-done { color: hsl(var(--muted-foreground)); } /* --- 思维链折叠块（深度思考） --- */ .think-block { margin: 2px 0 10px; } .think-toggle { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 12px; border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--card)); color: hsl(var(--muted-foreground)); font-size: 12.5px; cursor: pointer; text-align: left; transition: border-color .15s; } .think-toggle:hover { border-color: hsl(var(--primary) / .45); } .think-toggle .tt-ico { color: hsl(var(--primary)); display: flex; flex-shrink: 0; } .think-toggle .tt-label { font-weight: 600; color: hsl(var(--foreground)); } .think-toggle .tt-arrow { margin-left: auto; transition: transform .2s; color: hsl(var(--muted-foreground)); display: flex; flex-shrink: 0; } .think-block.open .tt-arrow { transform: rotate(180deg); } .think-body { display: none; padding: 10px 12px; border: 1px solid hsl(var(--border)); border-top: none; border-radius: 0 0 10px 10px; background: hsl(var(--card) / .6); font-size: 12.5px; line-height: 1.75; color: hsl(var(--muted-foreground)); white-space: pre-wrap; max-height: 300px; overflow-y: auto; } .think-block.open .think-body { display: block; } .think-thinking { color: hsl(var(--muted-foreground)); } .think-thinking::after { content: '…'; animation: tt-dots 1.2s steps(4) infinite; } @keyframes tt-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } } /* --- 工具卡片步骤序号 --- */ .tc-step { font-size: 10.5px; font-weight: 600; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-radius: 6px; padding: 1px 7px; flex-shrink: 0; } /* --- 九宫格导航（替代壳侧栏） --- */ .nav-panel { width: 480px; max-width: 94vw; } .nav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 2px 0 6px; } .nav-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 14px; border-radius: 12px; text-decoration: none; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); transition: all .15s; } .nav-tile svg { color: hsl(var(--primary)); } .nav-tile span { font-size: 12.5px; font-weight: 600; } .nav-tile:hover { border-color: hsl(var(--primary) / .6); transform: translateY(-1px); background: hsl(var(--primary) / .06); } /* --- 移动端会话抽屉遮罩 --- */ .sb-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .25s; display: none; } .sb-scrim.show { opacity: 1; pointer-events: auto; } /* --- 移动端 App 化（≤900px 抽屉滑入；≤640px 精简） --- */ @media (max-width: 900px) { #sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(84vw, 320px) !important; z-index: 60; transform: translateX(-105%); transition: transform .28s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 40px rgba(0,0,0,.35); border-right: 1px solid hsl(var(--sidebar-border)); } #app:not(.collapsed) #sidebar { display: flex !important; transform: none; } #app.collapsed #sidebar { display: flex !important; transform: translateX(-105%); } .sb-scrim { display: block; } .sb-scrim.show { display: block; } } @media (max-width: 640px) { /* 九宫格里有入口，header 隐藏两个次要链接，给标题/输入腾空间 */ header a[href="/console.html"], header a[href="/platform"] { display: none; } #messages { padding-left: 12px; padding-right: 12px; } #welcome { padding-left: 14px; padding-right: 14px; } .msg { gap: 8px; } .msg .body { font-size: 14px; } #composer-wrap { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); } .mode-bar { margin-bottom: 6px; } #composer-tools { gap: 6px; } .chip { padding: 4px 10px; font-size: 12px; } .sb-bottom { padding: 8px; } .nav-grid { grid-template-columns: repeat(3, 1fr); } .nav-tile { padding: 12px 6px 10px; } } /* ===================================================================== 成熟视觉收敛（2026-09-02）：结构照 uxbot 模板不动，视觉对标 Claude/DeepSeek —— 去彩虹渐变、收圆角、压装饰、单色实心按钮、克制留白 ===================================================================== */ /* --- 按钮：单色实心（默认 accent=black 时纯黑白，深色模式反色） --- */ .send-btn { background: hsl(var(--primary)); border-radius: 8px; box-shadow: none; transition: background .15s, opacity .15s; } .send-btn:hover:not(:disabled) { filter: none; background: hsl(var(--primary-hover)); } body[data-accent="black"] .send-btn { background: #1a1a1a; } body[data-accent="black"] .send-btn:hover:not(:disabled) { background: #333; } body[data-accent="black"].dark .send-btn { background: #ececec; color: #111; } body[data-accent="black"].dark .send-btn:hover:not(:disabled) { background: #fff; } .ux-btn-primary { background: hsl(var(--primary)); border-radius: 8px; box-shadow: none; } .ux-btn-primary:hover { filter: none; background: hsl(var(--primary-hover)); } body[data-accent="black"] .ux-btn-primary { background: #1a1a1a; } body[data-accent="black"] .ux-btn-primary:hover { background: #333; } body[data-accent="black"].dark .ux-btn-primary { background: #ececec; color: #111; } body[data-accent="black"].dark .ux-btn-primary:hover { background: #fff; } .mode-btn.on { background: hsl(var(--primary)); box-shadow: none; border-radius: 8px; } body[data-accent="black"] .mode-btn.on { background: #1a1a1a; } body[data-accent="black"].dark .mode-btn.on { background: #ececec; color: #111; } .chip-btn.primary { background: hsl(var(--primary)); } /* --- 圆角收敛：胶囊 → 小圆角 --- */ .chip, .mode-btn, .badge-link, .tool-card, .chat-item, .persona-opt-av, .nav-tile, .suggest-card, .gen-btn { border-radius: 8px; } .msg.user .body { border-radius: 10px; border-top-right-radius: 3px; } .msg .rounded-full { border-radius: 8px !important; } .persona-av { border-radius: 8px; } .icon-btn { border-radius: 8px; } #composer, #composer:focus-within { border-radius: 10px; box-shadow: none; } .think-toggle, .think-body { border-radius: 8px; } .think-block.open .think-toggle { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .think-block.open .think-body { border-radius: 0 0 8px 8px; } /* --- 渐变装饰 → 单色 --- */ .persona-av, .persona-opt-av, .msg.user .avatar { background: hsl(var(--primary)) !important; background-image: none !important; } .chat-item.active { background: hsl(var(--primary) / .08); } .gen-btn.btn-primary { background: hsl(var(--primary)); } /* --- 欢迎页收敛：小字重排版 --- */ #welcome h1 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; } .welcome-sub { font-size: 13px; margin-bottom: 26px; color: hsl(var(--muted-foreground)); } .welcome-logo { width: 52px; height: 52px; margin-bottom: 16px; opacity: .92; } .suggest-card { padding: 12px 14px; } .sc-title { font-size: 13px; margin-bottom: 3px; } .sc-desc { font-size: 12px; } /* --- 排版收敛 --- */ #topbar-title { font-size: 15px; font-weight: 650; } header p { color: hsl(var(--muted-foreground)); } .msg .body { line-height: 1.7; } .msg { margin-bottom: 18px; } .sb-brand-sub { opacity: .85; } .mode-btn, .chip { font-weight: 500; } /* --- 输入区：去卡片感，桌面下贴地白底 --- */ #composer-wrap { padding-top: 8px; } #composer { border-color: hsl(var(--border)); background: hsl(var(--card)); } .agent-bar { padding: 6px 18px; font-size: 12px; } .tc-step { border-radius: 5px; } .think-toggle { background: hsl(var(--background)); } .think-toggle:hover { background: hsl(var(--muted) / .5); } /* --- 侧栏细节收敛 --- */ .persona-card { border-radius: 10px; } .model-picker select { border-radius: 8px; } .side-foot { opacity: .55; } .badge-link { border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); } .badge-link:hover { background: hsl(var(--muted) / .5); color: hsl(var(--foreground)); } /* ===== 登录引导弹窗（2026-09-02 免登录试用） ===== */ .lg-panel { width: 360px; max-width: 92vw; text-align: center; } .lg-body { padding: 10px 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 0; } .lg-ico { width: 56px; height: 56px; margin-bottom: 14px; } .lg-ico img { width: 100%; height: 100%; } .lg-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .lg-sub { font-size: 12.5px; color: hsl(var(--muted-foreground)); line-height: 1.7; margin-bottom: 18px; } .lg-btn { display: block; width: 100%; padding: 10px 0; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; margin-bottom: 8px; transition: background .15s; } .lg-btn.primary { background: hsl(var(--primary)); color: #fff; } body[data-accent="black"] .lg-btn.primary { background: #1a1a1a; } body[data-accent="black"].dark .lg-btn.primary { background: #ececec; color: #111; } .lg-btn.ghost { border: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--foreground)); } .lg-btn.text { background: none; color: hsl(var(--muted-foreground)); font-weight: 500; font-size: 12.5px; padding: 6px 0; margin-bottom: 0; } .lg-btn.text:hover { color: hsl(var(--foreground)); } /* ===== Artifacts 实时预览 + 语音（2026-09-02 借鉴 ChatGPT/Claude） ===== */ .code-head .pv-btn { margin-left: auto; margin-right: 2px; } .code-head .pv-btn, .copy-btn { border: none; background: none; color: hsl(var(--primary)); cursor: pointer; font-size: 12px; } .pv-panel { width: min(880px, 94vw); height: min(86vh, 760px); display: flex; flex-direction: column; padding: 16px; } .pv-panel .persona-panel-head { flex-shrink: 0; margin-bottom: 10px; } #pv-frame { flex: 1; min-height: 0; } .msg-tools { display: flex; gap: 6px; margin-top: 6px; opacity: 0; transition: opacity .15s; } .msg:hover .msg-tools { opacity: 1; } .mt-btn { background: none; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: 11.5px; padding: 2px 10px; border-radius: 6px; cursor: pointer; transition: all .15s; } .mt-btn:hover { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .5); } #btn-mic.chip.rec { background: hsl(var(--destructive) / .15); border-color: hsl(var(--destructive)); color: hsl(var(--destructive)); animation: mic-pulse 1.1s ease-in-out infinite; } @keyframes mic-pulse { 0%,100% { box-shadow: 0 0 0 0 hsl(var(--destructive) / .25); } 50% { box-shadow: 0 0 0 6px hsl(var(--destructive) / 0); } } /* ===== AI 通话入口样式（2026-09-02） ===== */ .call-entry { position: relative; color: var(--sq-green-bright, #8B5CF6) !important; } .call-entry::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; animation: call-pulse 1.6s ease-in-out infinite; } @keyframes call-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(61,220,151,.5); } 50% { box-shadow: 0 0 0 5px rgba(61,220,151,0); } } .nav-call-tile { border-color: rgba(99,102,241,.45) !important; background: rgba(99,102,241,.07); } .nav-call-tile svg { color: var(--sq-green-bright, #8B5CF6) !important; } /* ===== AI 声音面板（2026-09-02） ===== */ .pz-voice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .pz-voice-grid .pz-opt { flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; } .pz-voice-badge { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; } .pz-voice-badge.g-f { background: #ec4899; } .pz-voice-badge.g-m { background: #6366f1; } .pz-voice-badge.g-t { background: #f59e0b; } .pz-voice-badge.g-x { background: #10b981; } #phrase-toggle.on { border-color: hsl(var(--primary)); color: hsl(var(--primary)); background: hsl(var(--primary) / .1); } @media (max-width: 640px) { .pz-voice-grid { grid-template-columns: 1fr 1fr; } } /* ===== 会话搜索 / 重命名 / 消息复制（2026-09-02，对照 Hermes 桌面版补齐） ===== */ .chat-search-box { display: flex; align-items: center; gap: 7px; margin: 10px 12px 4px; padding: 6px 10px; border: 1px solid hsl(var(--border)); border-radius: 8px; background: hsl(var(--background) / .6); } .chat-search-box svg { color: hsl(var(--muted-foreground)); flex: none; } .chat-search-box input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-size: 12.5px; color: inherit; } .chat-search-box input::placeholder { color: hsl(var(--muted-foreground)); opacity: .75; } .chat-empty { padding: 20px 12px; font-size: 12.5px; color: hsl(var(--muted-foreground)); text-align: center; line-height: 1.8; } .chat-item .chat-ops { gap: 1px; margin-right: -2px; } .chat-item .chat-ops button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: hsl(var(--muted-foreground)); background: transparent; border: 0; cursor: pointer; } .chat-item .chat-ops button:hover { color: inherit; background: hsl(var(--muted) / .5); } .chat-item.bg-primary .chat-ops button { color: hsl(var(--primary-foreground) / .75); } .chat-item.bg-primary .chat-ops button:hover { color: hsl(var(--primary-foreground)); background: hsl(var(--primary-foreground) / .15); } /* ===== 移动端性能与弹层收尾（2026-09-02） ===== */ /* 低端机 / 老 WebView：动态背景动画降级为静态，毛玻璃关闭，减少 GPU 合成压力 */ @media (max-width: 768px) { body[data-bg="aurora"]::before, body[data-bg="aurora"]::after, body[data-bg="starfield"]::before, body[data-bg="starfield"]::after, body[data-bg="sunset"]::before, body[data-bg="sunset"]::after, #pcb-bg { animation: none !important; } header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .persona-backdrop, .pz-backdrop, .pz-palette-backdrop, .pv-backdrop, .nav-backdrop, .ch-backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #composer-tools { -webkit-overflow-scrolling: touch; } /* 弹层面板小屏安全高度：内容超高可内滚，底部按钮不再被浏览器 UI 遮挡 */ .persona-modal .persona-panel { max-height: 86dvh; overscroll-behavior: contain; } } /* 系统开启「减少动态效果」时全站停动画（无障碍 + 低端机性能） */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ===== v3.3 可读性修正（2026-09-12，用户反馈「切换模型配色看不清 / 黑字压紫底」）===== 实测数据来自 workspace/audit-contrast.cjs（按 WCAG 算渲染后对比度）： 灰字 3.48~3.63:1、白字压主色 4.41:1、侧栏用户卡 1.36:1（写死暗底 + 继承深色文字） */ /* 1) 灰字对比度 3.5:1 → 6.4:1；主色按主题分开取值（同一个紫色无法同时在白底/黑底上都达标）： 亮色用 indigo-600 #4f46e5（白字压它 6.2:1、它当文字压白底 6.2:1） 深色用亮 indigo + 深色前景（亮字压深底 7.0:1、深字压亮底 7.1:1） */ :root { --primary: 243 75% 59%; --primary-hover: 243 75% 52%; --primary-foreground: 0 0% 100%; --muted-foreground: 220 14% 38%; } body.dark { --primary: 235 90% 74%; --primary-hover: 235 90% 80%; --primary-foreground: 235 60% 12%; --muted-foreground: 210 14% 74%; } /* 2) 实心主色按钮上的文字统一用主色前景色（黑字压紫底的根因：没设 color 就继承了深色正文） */ .mode-btn.on, .mode-btn.on span, .chip-btn.primary, .ux-btn-primary, .send-btn, .send-btn span, .gen-btn.btn-primary, .lg-btn.primary, .pz-dyn { color: hsl(var(--primary-foreground)); } /* 2b) 六个主题色按同一口径重新取色（保留色相，只压/提亮度使对比度达标）。 注意：body[data-accent="x"]（原定义在文件中部）优先级高于 :root，必须在文件末尾同等选择器覆盖。 */ body[data-accent="violet"] { --primary: 243 75% 59%; --primary-hover: 243 75% 52%; --primary-foreground: 0 0% 100%; } body[data-accent="teal"] { --primary: 176 80% 25%; --primary-hover: 176 80% 20%; --primary-foreground: 0 0% 100%; } body[data-accent="coral"] { --primary: 16 82% 44%; --primary-hover: 16 82% 38%; --primary-foreground: 0 0% 100%; } body[data-accent="rose"] { --primary: 340 75% 44%; --primary-hover: 340 75% 38%; --primary-foreground: 0 0% 100%; } body[data-accent="sky"] { --primary: 210 90% 37%; --primary-hover: 210 90% 31%; --primary-foreground: 0 0% 100%; } body.dark[data-accent="violet"] { --primary: 235 90% 74%; --primary-hover: 235 90% 80%; --primary-foreground: 235 60% 12%; } body.dark[data-accent="teal"] { --primary: 172 70% 63%; --primary-hover: 172 70% 71%; --primary-foreground: 180 70% 10%; } body.dark[data-accent="coral"] { --primary: 20 90% 67%; --primary-hover: 20 90% 75%; --primary-foreground: 20 80% 12%; } body.dark[data-accent="rose"] { --primary: 340 85% 71%; --primary-hover: 340 85% 79%; --primary-foreground: 340 70% 12%; } body.dark[data-accent="sky"] { --primary: 205 90% 67%; --primary-hover: 205 90% 75%; --primary-foreground: 210 80% 12%; } /* 5) 弹层面板（「全部功能」九宫格 / 个性化 / 预览共用 .persona-panel）： 原实现 background:#12141C 是纯深色时代的写死值 → 浅色主题下变成「深字压深底（标题看不见）+ 白卡压深底（观感乱）」。改为主题变量，深浅主题各自成立。 */ .persona-panel { background: hsl(var(--card)); border-color: hsl(var(--border)); color: hsl(var(--foreground)); box-shadow: 0 24px 60px hsl(var(--foreground) / .16); } .persona-panel-head { color: hsl(var(--foreground)); } .persona-panel-head button { color: hsl(var(--muted-foreground)); } .persona-panel-head button:hover { color: hsl(var(--foreground)); } .persona-panel-sub { color: hsl(var(--muted-foreground)); } .nav-tile { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); font: inherit; text-align: center; cursor: pointer; } /* 快捷键提示行（面板底部） */ .kbd-hint { margin-top: 10px; padding-top: 10px; border-top: 1px solid hsl(var(--border)); font-size: 11.5px; color: hsl(var(--muted-foreground)); line-height: 1.9; } .kbd-hint b { color: hsl(var(--foreground)); font-weight: 600; } /* 自定义快捷键区 */ .kbd-settings { margin-top: 10px; padding-top: 10px; border-top: 1px dashed hsl(var(--border)); } .kbd-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 8px; } .kbd-head button { background: none; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); border-radius: 7px; padding: 3px 9px; font-size: 11.5px; cursor: pointer; } .kbd-head button:hover { color: hsl(var(--foreground)); border-color: hsl(var(--primary)); } .kbd-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; } .kbd-label { font-size: 12px; color: hsl(var(--muted-foreground)); } .kbd-key { min-width: 108px; text-align: center; font-size: 12px; font-weight: 600; font-family: ui-monospace, Consolas, monospace; color: hsl(var(--foreground)); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 8px; padding: 5px 10px; cursor: pointer; } .kbd-key:hover { border-color: hsl(var(--primary)); } .kbd-key.capturing { color: hsl(var(--primary-foreground)); background: hsl(var(--primary)); border-color: hsl(var(--primary)); animation: kbdPulse 1s ease-in-out infinite; } @keyframes kbdPulse { 0%,100% { opacity: 1; } 50% { opacity: .72; } } .kbd-tip { margin-top: 8px; font-size: 11px; color: hsl(var(--muted-foreground)); line-height: 1.7; } /* 闹钟卡片（app.js 本地定闹钟的结果回执） */ .alarm-card { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: 12px; padding: 13px 15px; max-width: 420px; } .alarm-card.bad { border-color: #f87171; } .alarm-card .ac-t { font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 6px; } .alarm-card .ac-time { font-size: 20px; font-weight: 700; color: hsl(var(--primary)); letter-spacing: .4px; margin: 4px 0 8px; font-variant-numeric: tabular-nums; } .alarm-card .ac-note { font-size: 12px; color: hsl(var(--muted-foreground)); line-height: 1.7; } .alarm-card.bad .ac-time { font-size: 14px; font-weight: 500; color: hsl(var(--foreground)); } .nav-tile span { color: hsl(var(--foreground)); } .nav-tile svg { color: hsl(var(--primary)); } .nav-tile:hover { background: hsl(var(--primary) / .08); border-color: hsl(var(--primary) / .6); } /* 弹层里的次要文字统一用主题灰（浅色下 #8B93A7 压白底只有 3.0:1） */ #nav-modal .persona-panel-sub, #personalize-modal .persona-panel-sub, .pv-panel .persona-panel-sub { color: hsl(var(--muted-foreground)); } body[data-accent="black"]:not(.dark) .mode-btn.on, body[data-accent="black"]:not(.dark) .mode-btn.on span, body[data-accent="black"]:not(.dark) .chip-btn.primary, body[data-accent="black"]:not(.dark) .ux-btn-primary, body[data-accent="black"]:not(.dark) .lg-btn.primary { color: #ffffff; } body[data-accent="black"].dark .mode-btn.on, body[data-accent="black"].dark .mode-btn.on span, body[data-accent="black"].dark .ux-btn-primary, body[data-accent="black"].dark .chip-btn.primary, body[data-accent="black"].dark .lg-btn.primary { color: #111111; } /* 3) 模型下拉与选项列表跟上主题（默认