/* ============================================================ oneAgent 设计系统（命名空间 oa-，避免与 main.css 冲突） 配色令牌对齐 docs/index.html 原型：--brand:#615ced 浅/暗双主题，通过 切换（cookie 持久化） ============================================================ */ :root{ --oa-brand:#615ced; --oa-brand-2:#8b5cf6; --oa-brand-soft:#eef0fe; --oa-ink:#1a1d29; --oa-muted:#6b7280; --oa-line:#eceef3; --oa-bg:#f7f8fc; --oa-card:#fff; --oa-free:#0ea371; --oa-free-soft:#e7f7f0; --oa-ai:#615ced; --oa-ai-soft:#efeefe; --oa-radius:16px; --oa-shadow:0 8px 30px rgba(28,30,60,.06); } [data-theme="dark"]{ --oa-brand:#8b5cf6; --oa-brand-2:#a78bfa; --oa-brand-soft:#241f3a; --oa-ink:#e6e8ef; --oa-muted:#9aa1b5; --oa-line:#262a36; --oa-bg:#0f1117; --oa-card:#1c1f27; --oa-free:#34d399; --oa-free-soft:#13312a; --oa-ai:#8b5cf6; --oa-ai-soft:#241f3a; --oa-shadow:0 8px 30px rgba(0,0,0,.4); /* 旧 oneCMS 令牌：深色主题映射到 oa- 深色，保持整套站点主题一致 */ --primary:var(--oa-brand); --primary-dark:var(--oa-brand-2); --primary-light:var(--oa-brand-2); --accent:var(--oa-brand-2); --bg:var(--oa-bg); --bg-card:var(--oa-card); --bg-elevated:var(--oa-card); --bg-hover:var(--oa-bg); --bg-border:var(--oa-line); --text:var(--oa-ink); --text-secondary:var(--oa-ink); --text-muted:var(--oa-muted); --border:var(--oa-line); --border-hover:#3a3f4d; --gradient-primary:linear-gradient(135deg,var(--oa-brand),var(--oa-brand-2)); --gradient-glow:radial-gradient(ellipse 80% 50% at 50% -20%, rgba(139,92,246,.18), transparent); --oa-cta-grad:linear-gradient(135deg,var(--oa-brand),var(--oa-brand-2)); } /* 兼容旧 oneCMS 页面：将其设计令牌统一映射到 oa- 品牌（浅色默认）， 实现「风格统一」且不改动任何模板/JS。oneagent.css 在 main.css 之后加载，故覆盖生效。 */ :root{ --primary:var(--oa-brand); --primary-dark:var(--oa-brand-2); --primary-light:var(--oa-brand-2); --accent:var(--oa-brand-2); --accent-dark:var(--oa-brand); --bg:var(--oa-bg); --bg-card:var(--oa-card); --bg-elevated:var(--oa-card); --bg-hover:var(--oa-bg); --bg-border:var(--oa-line); --text:var(--oa-ink); --text-secondary:var(--oa-ink); --text-muted:var(--oa-muted); --border:var(--oa-line); --border-hover:#cfd3e6; --gradient-primary:linear-gradient(135deg,var(--oa-brand),var(--oa-brand-2)); --gradient-bg:linear-gradient(135deg,var(--oa-bg) 0%, #eef0f8 100%); --gradient-glow:radial-gradient(ellipse 80% 50% at 50% -20%, rgba(97,92,237,.16), transparent); --radius:16px; --radius-lg:20px; --radius-sm:10px; --shadow:var(--oa-shadow); --shadow-lg:var(--oa-shadow); --shadow-glow:0 0 40px rgba(97,92,237,.22); --container-w:1180px; /* 旧 CMS 深色区块（CTA）统一为品牌渐变，保持视觉焦点 */ --oa-cta-grad:linear-gradient(135deg,var(--oa-brand),var(--oa-brand-2)); } /* 旧 CMS 的 .section-dark / .cta-section 在统一品牌下改为品牌渐变 */ .section.section-dark, .cta-section{ background:var(--oa-cta-grad) !important; color:#fff; } .section.section-dark .section-title, .section.section-dark h2, .section.section-dark .section-sub, .cta-section h2, .cta-section .section-title, .cta-section .cta-inner h2{ color:#fff; } .section.section-dark p, .section.section-dark .section-sub, .cta-section p, .cta-section .cta-inner p{ color:rgba(255,255,255,.86); } .section.section-dark .btn-outline, .cta-section .btn-outline{ color:#fff; border-color:rgba(255,255,255,.55); } /* 注意：.page-hero-title 的主题适配已直接改在 main.css（纯色 var(--text)）。 此前在此处加的「渐变文字」覆盖会因 `background: ... !important` 简写把 background-clip 重置回 border-box，导致标题整块被涂上背景色（两个主题都错） → 已移除该覆盖，避免与 main.css 冲突，改为 single source of truth。 */ /* main.css:1476 的 .tag-chip:hover 在浅色主题下为白字 + 淡紫底（rgba(99,102,241,.2)）不可读， 文章详情页等会用到 → 改为跟随主题令牌（浅色深字 / 深色亮字，两主题均可读）。 */ .tag-chip:hover{ color:var(--oa-ink) !important; } * { box-sizing: border-box; } .oa-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; } /* ---------- Header / Nav ---------- */ .oa-header{ position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--oa-bg) 82%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--oa-line); } .oa-nav{ display:flex; align-items:center; justify-content:space-between; height:64px; } .oa-logo{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; color:var(--oa-ink); } .oa-logo-img{ width:34px; height:34px; object-fit:contain; border-radius:8px; display:block; flex:0 0 auto; } .oa-logo .oa-dot{ width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,var(--oa-brand),var(--oa-brand-2)); box-shadow:0 6px 16px rgba(97,92,237,.35); } .oa-logo .oa-sub{ color:var(--oa-muted); font-weight:500; font-size:14px; } .oa-nav-links{ display:flex; gap:26px; color:var(--oa-muted); font-size:14px; } .oa-nav-links a{ color:inherit; transition:.15s; } .oa-nav-links a:hover, .oa-nav-links a.active{ color:var(--oa-ink); } .oa-nav-right{ display:flex; align-items:center; gap:12px; } .oa-balance{ display:flex; align-items:center; gap:7px; background:var(--oa-card); border:1px solid var(--oa-line); padding:7px 12px; border-radius:999px; font-size:13px; font-weight:600; color:var(--oa-ink); } .oa-balance .oa-coin{ width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,#f5b14c,#f59e0b); } .oa-btn{ display:inline-flex; align-items:center; gap:6px; border:none; cursor:pointer; font-size:14px; font-weight:600; border-radius:10px; padding:9px 16px; transition:.18s; text-decoration:none; } .oa-btn-primary{ background:linear-gradient(135deg,var(--oa-brand),var(--oa-brand-2)); color:#fff; box-shadow:0 8px 20px rgba(97,92,237,.28); } .oa-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(97,92,237,.36); } .oa-btn-ghost{ background:var(--oa-card); color:var(--oa-ink); border:1px solid var(--oa-line); } .oa-btn-ghost:hover{ border-color:#cfd3e6; } .oa-btn-sm{ padding:7px 13px; font-size:13px; } .oa-btn-stop{ background:#fef2f2; color:#b42318; border:1px solid #f6c6c6; } .oa-btn-stop:hover{ background:#fde8e8; border-color:#e89c9c; } .oa-ai-text{ word-break:break-word; line-height:1.68; white-space:normal; } /* ---------- AI 正文 Markdown 渲染（标题/加粗/列表/表格/引用） ---------- */ .oa-ai-text > :first-child{ margin-top:0; } .oa-ai-text > :last-child{ margin-bottom:0; } .oa-ai-text p{ margin:0 0 10px; } .oa-ai-text h1,.oa-ai-text h2,.oa-ai-text h3,.oa-ai-text h4,.oa-ai-text h5{ margin:16px 0 8px; line-height:1.35; font-weight:700; color:var(--oa-ink); } .oa-ai-text h1{ font-size:21px; } .oa-ai-text h2{ font-size:18px; } .oa-ai-text h3{ font-size:16px; } .oa-ai-text h4,.oa-ai-text h5{ font-size:15px; } .oa-ai-text ul,.oa-ai-text ol{ margin:8px 0 10px; padding-left:22px; } .oa-ai-text li{ margin:3px 0; } .oa-ai-text li > ul,.oa-ai-text li > ol{ margin:3px 0; } .oa-ai-text strong{ font-weight:700; color:var(--oa-ink); } .oa-ai-text em{ font-style:italic; } .oa-ai-text del{ text-decoration:line-through; opacity:.7; } .oa-ai-text a{ color:var(--oa-brand); text-decoration:underline; word-break:break-all; } .oa-ai-text code{ background:var(--oa-bg); border:1px solid var(--oa-line); border-radius:5px; padding:1px 5px; font-size:.9em; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } .oa-ai-text pre{ background:var(--oa-bg); border:1px solid var(--oa-line); border-radius:9px; padding:10px 12px; overflow:auto; margin:10px 0; } .oa-ai-text pre code{ background:none; border:none; padding:0; font-size:12.5px; line-height:1.55; } .oa-ai-text blockquote{ margin:10px 0; padding:6px 12px; border-left:3px solid var(--oa-line); color:var(--oa-muted); background:var(--oa-bg); border-radius:0 6px 6px 0; } .oa-ai-text hr{ border:none; border-top:1px solid var(--oa-line); margin:14px 0; } .oa-ai-text table{ border-collapse:collapse; width:100%; margin:10px 0; font-size:13px; display:block; overflow-x:auto; } .oa-ai-text th,.oa-ai-text td{ border:1px solid var(--oa-line); padding:6px 10px; text-align:left; vertical-align:top; } .oa-ai-text thead th{ background:var(--oa-bg); font-weight:600; color:var(--oa-ink); } .oa-ai-text tbody tr:nth-child(even){ background:rgba(125,125,145,.06); } .oa-resume-bar{ align-self:flex-start; max-width:88%; display:flex; align-items:center; gap:10px; background:var(--oa-card); border:1px dashed var(--oa-line); border-radius:11px; padding:10px 12px; margin-top:6px; } .oa-theme-toggle{ width:38px;height:38px;border-radius:10px;border:1px solid var(--oa-line);background:var(--oa-card);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center; color:var(--oa-ink); } .oa-menu-toggle{ display:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--oa-line); background:var(--oa-card); color:var(--oa-ink); font-size:16px; align-items:center; justify-content:center; cursor:pointer; } /* ---------- Hero ---------- */ .oa-hero{ padding:64px 0 40px; text-align:center; } .oa-eyebrow{ display:inline-block; font-size:13px; color:var(--oa-brand); background:var(--oa-brand-soft); padding:6px 14px; border-radius:999px; font-weight:600; margin-bottom:18px; } .oa-h1{ font-size:44px; line-height:1.18; margin:0 0 16px; letter-spacing:-.5px; color:var(--oa-ink); } .oa-h1 .oa-grad{ background:linear-gradient(135deg,var(--oa-brand),var(--oa-brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .oa-sub{ font-size:17px; color:var(--oa-muted); max-width:640px; margin:0 auto 28px; line-height:1.7; } .oa-searchbar{ display:flex; align-items:center; gap:10px; max-width:620px; margin:0 auto; background:var(--oa-card); border:1px solid var(--oa-line); border-radius:14px; padding:10px 10px 10px 18px; box-shadow:var(--oa-shadow); } .oa-searchbar input{ flex:1; border:none; outline:none; font-size:15px; background:transparent; color:var(--oa-ink); } .oa-hint{ margin-top:14px; font-size:13px; color:var(--oa-muted); } .oa-hint b{ color:var(--oa-free); } /* ---------- Sections / Cards ---------- */ .oa-section{ padding:34px 0; } .oa-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; gap:16px; flex-wrap:wrap; } .oa-sec-head h2{ font-size:24px; margin:0; color:var(--oa-ink); } .oa-sec-head p{ color:var(--oa-muted); font-size:14px; margin:6px 0 0; } .oa-tag{ font-size:13px; font-weight:600; padding:5px 12px; border-radius:999px; } .oa-tag.free{ color:var(--oa-free); background:var(--oa-free-soft); } .oa-tag.ai{ color:var(--oa-ai); background:var(--oa-ai-soft); } .oa-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:16px; } .oa-card{ background:var(--oa-card); border:1px solid var(--oa-line); border-radius:var(--oa-radius); padding:20px; transition:.18s; position:relative; overflow:hidden; } .oa-card:hover{ transform:translateY(-3px); box-shadow:var(--oa-shadow); border-color:#dfe2f1; } .oa-card .oa-ic{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:20px; } .oa-ic.free{ background:var(--oa-free-soft); } .oa-ic.ai{ background:var(--oa-ai-soft); } .oa-card h3{ margin:0 0 6px; font-size:16px; display:flex; align-items:center; gap:8px; color:var(--oa-ink); } .oa-card p{ margin:0; color:var(--oa-muted); font-size:13px; line-height:1.6; } .oa-card .oa-ex{ margin-top:12px; font-size:12px; color:#9aa1b5; background:var(--oa-bg); border-radius:8px; padding:8px 10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .oa-pill{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; } .oa-pill.free{ color:var(--oa-free); background:var(--oa-free-soft); } .oa-pill.ai{ color:var(--oa-ai); background:var(--oa-ai-soft); } .oa-group-gap{ margin-top:14px; } /* ---------- Workspace preview ---------- */ .oa-ws{ display:grid; grid-template-columns:1fr 1fr; gap:18px; background:var(--oa-card); border:1px solid var(--oa-line); border-radius:20px; padding:18px; box-shadow:var(--oa-shadow); } .oa-panel{ border:1px solid var(--oa-line); border-radius:14px; min-height:300px; overflow:hidden; display:flex; flex-direction:column; } .oa-ph{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--oa-line); font-size:13px; font-weight:600; color:var(--oa-muted); } .oa-ph .oa-d{ width:9px; height:9px; border-radius:50%; } .oa-bubble{ margin:12px 14px; padding:12px 14px; border-radius:12px; font-size:13px; line-height:1.6; max-width:90%; } .oa-bubble.oa-user{ background:var(--oa-brand-soft); align-self:flex-end; max-width:80%; } .oa-bubble.oa-ai{ background:var(--oa-bg); border:1px solid var(--oa-line); } .oa-tool-row{ display:flex; align-items:center; gap:8px; margin:0 14px 10px; font-size:12px; color:var(--oa-muted); background:var(--oa-bg); border:1px solid var(--oa-line); border-radius:9px; padding:8px 10px; } .oa-tool-row .oa-tk{ width:7px; height:7px; border-radius:50%; background:var(--oa-free); } .oa-docmock{ padding:18px 20px; font-size:13px; line-height:1.8; color:#374151; } .oa-docmock h4{ margin:0 0 8px; font-size:16px; color:var(--oa-ink); } .oa-docmock .oa-slide{ margin-top:14px; border:1px dashed #cfd3e6; border-radius:10px; padding:12px; } /* ---------- Pricing ---------- */ .oa-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .oa-plan{ background:var(--oa-card); border:1px solid var(--oa-line); border-radius:var(--oa-radius); padding:22px; text-align:center; } .oa-plan.oa-hot{ border-color:var(--oa-brand); box-shadow:0 12px 30px rgba(97,92,237,.16); } .oa-plan .oa-name{ font-weight:700; font-size:16px; color:var(--oa-ink); } .oa-plan .oa-price{ font-size:30px; font-weight:800; margin:10px 0 2px; color:var(--oa-ink); } .oa-plan .oa-price small{ font-size:14px; color:var(--oa-muted); font-weight:500; } .oa-plan .oa-feat{ color:var(--oa-muted); font-size:13px; line-height:1.9; margin:14px 0; } .oa-plan .oa-btn{ width:100%; justify-content:center; margin-top:6px; } /* ---------- Footer ---------- */ .oa-footer{ border-top:1px solid var(--oa-line); padding:34px 0 26px; color:var(--oa-muted); font-size:13px; margin-top:30px; } .oa-footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:24px; } .oa-footer .oa-logo{ margin-bottom:12px; } .oa-footer h4{ color:var(--oa-ink); font-size:14px; margin:0 0 12px; } .oa-footer ul{ list-style:none; padding:0; margin:0; } .oa-footer li{ margin-bottom:8px; } .oa-footer a{ color:var(--oa-muted); text-decoration:none; } .oa-footer a:hover{ color:var(--oa-ink); } .oa-footer-bottom{ margin-top:24px; padding-top:18px; border-top:1px solid var(--oa-line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; } /* ---------- Generic page header ---------- */ .oa-page{ padding:48px 0; } .oa-page h1{ font-size:34px; color:var(--oa-ink); margin:0 0 12px; } .oa-page .oa-lead{ color:var(--oa-muted); font-size:16px; max-width:680px; line-height:1.7; } .oa-prose{ color:var(--oa-muted); font-size:15px; line-height:1.9; max-width:760px; } .oa-prose h3{ color:var(--oa-ink); margin:26px 0 10px; } /* ---------- Tools workbench (三栏：左用户/任务 + 中会话 + 右文档预览[可折叠]) ---------- */ .oa-tools{ display:grid; grid-template-columns:260px 1fr 0px; gap:0; height:calc(100vh - 64px); background:var(--oa-bg); position:relative; transition:grid-template-columns .25s ease; } .oa-tools.oa-right-open{ grid-template-columns:260px 1fr 400px; } /* 左栏 */ .oa-left{ border-right:1px solid var(--oa-line); background:var(--oa-card); overflow-y:auto; display:flex; flex-direction:column; } .oa-user-card{ padding:14px 14px 10px; border-bottom:1px solid var(--oa-line); } .oa-user-main{ display:flex; align-items:center; gap:11px; } .oa-avatar{ width:42px; height:42px; border-radius:50%; flex:none; background:linear-gradient(135deg,var(--oa-brand),var(--oa-brand-2)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; background-size:cover; background-position:center; } .oa-user-info{ min-width:0; flex:1; } .oa-user-name{ font-size:14px; font-weight:600; color:var(--oa-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .oa-user-points{ font-size:12px; color:var(--oa-muted); margin-top:2px; } .oa-user-actions{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; } .oa-checkin-btn{ flex:1; min-width:110px; border:none; cursor:pointer; font-size:12.5px; font-weight:600; border-radius:9px; padding:8px 10px; background:linear-gradient(135deg,#f5b14c,#f59e0b); color:#fff; transition:.15s; } .oa-checkin-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(245,158,11,.3); } .oa-checkin-btn.signed{ background:var(--oa-free-soft); color:var(--oa-free); cursor:default; } .oa-checkin-btn:disabled{ opacity:.6; } .oa-user-dash, .oa-user-logout{ font-size:12px; color:var(--oa-muted); text-decoration:none; padding:6px 8px; border-radius:7px; transition:.15s; } .oa-user-dash:hover, .oa-user-logout:hover{ background:var(--oa-bg); color:var(--oa-ink); } .oa-user-login{ padding:4px 0; } .oa-user-login-btn{ width:100%; justify-content:center; } .oa-user-login-tip{ font-size:11px; color:var(--oa-muted); text-align:center; margin:8px 0 0; line-height:1.5; } /* 新建任务 */ .oa-new-task-wrap{ padding:12px 14px; } .oa-new-task{ width:100%; display:flex; align-items:center; justify-content:center; gap:7px; border:none; cursor:pointer; font-size:14px; font-weight:600; border-radius:11px; padding:11px 12px; background:linear-gradient(135deg,var(--oa-brand),var(--oa-brand-2)); color:#fff; box-shadow:0 8px 20px rgba(97,92,237,.24); transition:.18s; } .oa-new-task:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(97,92,237,.34); } .oa-new-task-plus{ font-size:18px; line-height:1; font-weight:700; } /* 任务列表 */ .oa-task-list{ flex:1; min-height:0; display:flex; flex-direction:column; border-top:1px solid var(--oa-line); } .oa-task-list-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px 6px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--oa-muted); } .oa-task-refresh{ border:none; background:transparent; cursor:pointer; color:var(--oa-muted); font-size:15px; padding:2px 6px; border-radius:6px; } .oa-task-refresh:hover{ background:var(--oa-bg); color:var(--oa-ink); } .oa-task-list-body{ flex:1; overflow-y:auto; padding:4px 10px 12px; } .oa-task-empty{ font-size:12px; color:var(--oa-muted); text-align:center; padding:20px 10px; } .oa-task-item{ display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:10px; cursor:pointer; transition:.15s; margin-bottom:2px; } .oa-task-item:hover{ background:var(--oa-bg); } .oa-task-item.active{ background:var(--oa-brand-soft); } .oa-task-ico{ flex:none; font-size:14px; } .oa-task-title{ flex:1; min-width:0; font-size:13px; color:var(--oa-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .oa-task-item.active .oa-task-title{ color:var(--oa-brand); font-weight:600; } .oa-task-time{ flex:none; font-size:11px; color:var(--oa-muted); } /* 工具箱（折叠） */ .oa-tools-box{ border-top:1px solid var(--oa-line); max-height:40%; display:flex; flex-direction:column; } .oa-tools-box-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; cursor:pointer; font-size:12px; font-weight:600; color:var(--oa-muted); user-select:none; } .oa-tools-box-arrow{ transition:.2s; } .oa-tools-box.oa-tools-box-collapsed .oa-tools-box-arrow{ transform:rotate(-90deg); } .oa-tools-box-body{ overflow-y:auto; padding:0 10px 12px; } .oa-tools-box.oa-tools-box-collapsed .oa-tools-box-body{ display:none; } .oa-tool-item{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:10px; cursor:pointer; border:1px solid transparent; margin-bottom:4px; transition:.15s; } .oa-tool-item:hover{ background:var(--oa-bg); border-color:var(--oa-line); } .oa-tool-item .oa-ic{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex:none; } .oa-tool-item .oa-ti-title{ font-size:12.5px; font-weight:600; color:var(--oa-ink); } .oa-tool-item .oa-ti-desc{ font-size:11px; color:var(--oa-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 中栏 */ /* 关键：.oa-chat 是 CSS Grid 的网格项，必须 min-height:0 才能被网格行高度约束， 否则 flex 子项 min-height:auto 会撑高整列，overflow:hidden 的 body 把底部输入框裁掉、整页无法滚动。 加 min-height:0 后，.oa-msgs(flex:1+overflow:auto) 在列内正常内部滚动，输入框始终钉在底部。 */ .oa-chat{ display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--oa-bg); } .oa-chat-head{ padding:13px 18px; border-bottom:1px solid var(--oa-line); background:var(--oa-card); display:flex; align-items:center; justify-content:space-between; gap:10px; } .oa-chat-head-title strong{ font-size:14px; color:var(--oa-ink); } .oa-msgs{ flex:1; min-height:0; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; } .oa-msg{ max-width:88%; padding:12px 14px; border-radius:13px; font-size:14px; line-height:1.65; } .oa-msg.oa-user{ align-self:flex-end; background:linear-gradient(135deg,var(--oa-brand),var(--oa-brand-2)); color:#fff; border-bottom-right-radius:4px; } .oa-msg.oa-ai{ align-self:flex-start; background:var(--oa-card); border:1px solid var(--oa-line); border-bottom-left-radius:4px; color:var(--oa-ink); } .oa-msg.oa-err{ align-self:flex-start; background:var(--oa-free-soft); color:#b42318; border:1px solid #f3c8bf; } .oa-toolcall{ align-self:flex-start; max-width:88%; font-size:12px; color:var(--oa-muted); background:var(--oa-card); border:1px solid var(--oa-line); border-radius:11px; padding:9px 12px; } .oa-toolcall b{ color:var(--oa-free); } /* 初始 hero（logo + 口号 + 居中输入框） */ .oa-hero-box{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center; } .oa-hero-logo{ display:flex; align-items:center; justify-content:center; margin-bottom:20px; } .oa-hero-logo-img{ width:200px; height:auto; max-width:100%; display:block; border-radius:16px; box-shadow:0 12px 32px rgba(97,92,237,.22); } .oa-hero-logo .oa-dot{ width:26px; height:26px; border-radius:9px; background:#fff; } .oa-hero-slogan{ font-size:26px; font-weight:700; color:var(--oa-ink); margin:0 0 8px; letter-spacing:-.3px; } .oa-hero-sub{ font-size:14px; color:var(--oa-muted); margin:0 0 24px; } .oa-hero-input{ width:100%; max-width:640px; display:flex; align-items:flex-end; gap:10px; background:var(--oa-card); border:1px solid var(--oa-line); border-radius:16px; padding:10px; box-shadow:var(--oa-shadow); } .oa-hero-input textarea{ flex:1; resize:none; border:none; outline:none; font-size:15px; font-family:inherit; background:transparent; color:var(--oa-ink); min-height:44px; max-height:180px; padding:6px 8px; } .oa-hero-send{ flex:none; padding:10px 20px; } .oa-hero-samples{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:18px; justify-content:center; } .oa-hero-samples > span{ font-size:12px; color:var(--oa-muted); } .oa-sample-chip{ border:1px solid var(--oa-line); background:var(--oa-card); color:var(--oa-muted); font-size:12.5px; border-radius:999px; padding:6px 13px; cursor:pointer; transition:.15s; } .oa-sample-chip:hover{ border-color:var(--oa-brand); color:var(--oa-brand); } /* 底部输入框 */ .oa-inputbar{ border-top:1px solid var(--oa-line); background:var(--oa-card); padding:12px 14px; display:none; gap:10px; align-items:flex-end; } .oa-inputbar.oa-inputbar-active{ display:flex; } .oa-inputbar textarea{ flex:1; resize:none; border:1px solid var(--oa-line); border-radius:12px; padding:11px 13px; font-size:14px; font-family:inherit; background:var(--oa-bg); color:var(--oa-ink); outline:none; max-height:140px; } .oa-inputbar textarea:focus{ border-color:var(--oa-brand); } /* 右栏开关按钮（workBuddy 风格） */ .oa-right-toggle{ position:absolute; right:0; top:50%; transform:translateY(-50%); width:26px; height:64px; border:1px solid var(--oa-line); border-right:none; border-radius:10px 0 0 10px; background:var(--oa-card); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--oa-muted); z-index:5; transition:right .25s ease,background .2s; } .oa-right-toggle:hover{ background:var(--oa-brand-soft); color:var(--oa-brand); } .oa-right-toggle-ico{ font-size:12px; } .oa-tools.oa-right-open .oa-right-toggle{ right:400px; border-right:1px solid var(--oa-line); border-radius:0 10px 10px 0; } /* 右栏 */ .oa-preview{ border-left:1px solid var(--oa-line); background:var(--oa-card); overflow:hidden; display:flex; flex-direction:column; min-width:0; } .oa-preview-head{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--oa-line); padding:0 8px; } .oa-preview-tabs{ display:flex; gap:2px; } .oa-preview-tab{ display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; cursor:pointer; font-size:13px; font-weight:600; color:var(--oa-muted); padding:12px 14px; border-bottom:2px solid transparent; transition:.15s; } .oa-preview-tab.active{ color:var(--oa-brand); border-bottom-color:var(--oa-brand); } .oa-preview-close{ border:none; background:transparent; cursor:pointer; font-size:14px; color:var(--oa-muted); padding:8px 10px; border-radius:8px; } .oa-preview-close:hover{ background:var(--oa-bg); color:var(--oa-ink); } .oa-preview-body{ flex:1; overflow:hidden; display:flex; flex-direction:column; } .oa-preview-tab-pane{ flex:1; min-height:0; display:none; } .oa-preview-tab-pane.active{ display:flex; flex-direction:column; } .oa-preview-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--oa-muted); font-size:13px; text-align:center; padding:24px; gap:6px; } .oa-preview-empty-ico{ font-size:36px; } .oa-preview-empty-sub{ font-size:11px; opacity:.7; } .oa-preview-frame-wrap{ flex:1; min-height:0; display:flex; flex-direction:column; } .oa-preview-text-wrap{ flex:1; min-height:0; display:flex; flex-direction:column; } .oa-preview-frame-title{ padding:8px 12px; font-size:12px; color:var(--oa-muted); border-bottom:1px solid var(--oa-line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; } .oa-preview-frame-wrap iframe{ flex:1; width:100%; border:none; background:#fff; } .oa-preview-text{ flex:1; margin:0; overflow:auto; padding:14px; font-size:13px; line-height:1.7; color:var(--oa-ink); white-space:pre-wrap; word-break:break-word; font-family:inherit; } /* 文档列表 */ .oa-docs-list-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px 6px; font-size:12px; color:var(--oa-muted); } .oa-docs-refresh{ border:none; background:transparent; cursor:pointer; color:var(--oa-muted); font-size:15px; padding:2px 6px; border-radius:6px; } .oa-docs-refresh:hover{ background:var(--oa-bg); color:var(--oa-ink); } .oa-docs-list{ flex:1; overflow-y:auto; padding:4px 12px 12px; } .oa-docs-empty{ font-size:13px; color:var(--oa-muted); text-align:center; padding:30px 10px; } .oa-doc-item{ display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:11px; cursor:pointer; transition:.15s; margin-bottom:4px; border:1px solid transparent; } .oa-doc-item:hover{ background:var(--oa-bg); border-color:var(--oa-line); } .oa-doc-ico{ flex:none; font-size:18px; } .oa-doc-meta{ flex:1; min-width:0; } .oa-doc-name{ font-size:13px; color:var(--oa-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .oa-doc-time{ font-size:11px; color:var(--oa-muted); margin-top:2px; } .oa-doc-dl{ flex:none; font-size:14px; color:var(--oa-muted); text-decoration:none; padding:4px 7px; border-radius:7px; } .oa-doc-dl:hover{ background:var(--oa-brand-soft); color:var(--oa-brand); } /* Toast */ .oa-toast{ position:fixed; top:70px; left:50%; transform:translateX(-50%) translateY(-10px); background:var(--oa-ink); color:var(--oa-bg); padding:10px 20px; border-radius:10px; font-size:13px; opacity:0; transition:.3s; z-index:999; pointer-events:none; } .oa-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } .oa-login-tip{ padding:40px; text-align:center; color:var(--oa-muted); } /* ---------- About page: stats ---------- */ .oa-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .oa-stat{ background:var(--oa-card); border:1px solid var(--oa-line); border-radius:var(--oa-radius); padding:22px 18px; text-align:center; } .oa-stat-num{ display:block; font-size:34px; font-weight:800; color:var(--oa-ink); line-height:1.1; } .oa-stat-plus{ color:var(--oa-brand); font-weight:800; } .oa-stat-label{ display:block; margin-top:6px; font-size:13px; color:var(--oa-muted); } /* ---------- About page: CTA band ---------- */ .oa-cta{ background:linear-gradient(135deg,var(--oa-brand),var(--oa-brand-2)); border-radius:24px; padding:48px 24px; text-align:center; } .oa-cta-inner h2{ color:#fff; font-size:28px; margin:0 0 10px; } .oa-cta-inner p{ color:rgba(255,255,255,.85); margin:0 0 22px; font-size:15px; } .oa-cta-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } .oa-cta .oa-btn-ghost{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); color:#fff; } .oa-cta .oa-btn-ghost:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.6); } /* ---------- 2-column grid modifier (advantages) ---------- */ .oa-grid-2{ grid-template-columns:repeat(2,1fr); } /* ---------- Contact page ---------- */ .oa-contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:20px; align-items:start; } .oa-contact-left{ display:flex; flex-direction:column; gap:16px; } .oa-contact-left .oa-grid{ grid-template-columns:repeat(2,1fr); } .oa-ic-info{ background:var(--oa-brand-soft); color:var(--oa-brand); } .oa-info-card .oa-ic{ font-size:18px; } .oa-info-card .oa-ti-title{ font-size:13px; color:var(--oa-muted); margin-bottom:2px; } .oa-info-card .oa-ti-desc{ font-size:15px; font-weight:600; color:var(--oa-ink); } .oa-info-card .oa-note{ font-size:12px; color:var(--oa-muted); margin-top:4px; } /* service promise */ .oa-promise h3, .oa-faq h3{ font-size:16px; color:var(--oa-ink); margin:0 0 12px; } .oa-promise ul{ list-style:none; padding:0; margin:0; } .oa-promise li{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--oa-muted); line-height:1.6; margin-bottom:10px; } .oa-promise li svg{ flex:none; color:var(--oa-free); margin-top:3px; } .oa-promise li strong{ color:var(--oa-ink); } /* faq */ .oa-faq-list{ display:flex; flex-direction:column; gap:8px; } .oa-faq-item{ border:1px solid var(--oa-line); border-radius:11px; overflow:hidden; } .oa-faq-q{ width:100%; text-align:left; background:transparent; border:none; cursor:pointer; padding:13px 14px; font-size:14px; font-weight:600; color:var(--oa-ink); display:flex; align-items:center; justify-content:space-between; gap:10px; } .oa-faq-q svg{ flex:none; transition:.2s; color:var(--oa-muted); } .oa-faq-item.open .oa-faq-q svg{ transform:rotate(180deg); } .oa-faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; } .oa-faq-item.open .oa-faq-a{ max-height:240px; } .oa-faq-a p{ margin:0; padding:0 14px 14px; font-size:13px; color:var(--oa-muted); line-height:1.7; } /* form */ .oa-form-card{ padding:22px; } .oa-form-head{ margin-bottom:16px; } .oa-form-head h2{ font-size:18px; color:var(--oa-ink); margin:0 0 4px; } .oa-form-head p{ font-size:13px; color:var(--oa-muted); margin:0; } .oa-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .oa-field{ margin-bottom:14px; } .oa-field label{ display:block; font-size:13px; font-weight:600; color:var(--oa-ink); margin-bottom:6px; } .oa-field .oa-req{ color:#e5484d; } .oa-input, .oa-select, .oa-textarea{ width:100%; border:1px solid var(--oa-line); border-radius:11px; padding:10px 12px; font-size:14px; font-family:inherit; background:var(--oa-bg); color:var(--oa-ink); outline:none; transition:.15s; } .oa-input:focus, .oa-select:focus, .oa-textarea:focus{ border-color:var(--oa-brand); background:var(--oa-card); } .oa-textarea{ resize:vertical; min-height:110px; line-height:1.6; } .oa-select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--oa-muted) 50%),linear-gradient(135deg,var(--oa-muted) 50%,transparent 50%); background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; } .oa-submit{ width:100%; justify-content:center; margin-top:4px; } .oa-form-feedback{ margin-top:12px; font-size:13px; text-align:center; min-height:18px; } .oa-form-feedback.ok{ color:var(--oa-free); } .oa-form-feedback.err{ color:#e5484d; } /* ---------- 工作台流程标签（workBuddy 风格：思考/任务/工具/搜索/完成 + 动画） ---------- */ .oa-step{ align-self:flex-start; max-width:88%; display:flex; flex-direction:column; gap:6px; } .oa-step-tag{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--oa-ink); background:var(--oa-card); border:1px solid var(--oa-line); border-radius:999px; padding:6px 12px; cursor:pointer; user-select:none; transition:.15s; } .oa-step-tag:hover{ border-color:var(--oa-brand); } .oa-step-tag .oa-tag-ico{ width:14px; height:14px; flex:none; display:inline-flex; align-items:center; justify-content:center; } .oa-step-tag.thinking .oa-tag-ico{ color:var(--oa-brand); } .oa-step-tag.planning .oa-tag-ico{ color:#0ea5e9; } .oa-step-tag.tool .oa-tag-ico{ color:var(--oa-free); } .oa-step-tag.search .oa-tag-ico{ color:#0ea5e9; } .oa-step-tag.done .oa-tag-ico{ color:var(--oa-free); } .oa-step-tag.error .oa-tag-ico{ color:#e5484d; } .oa-spinner{ width:13px; height:13px; border:2px solid var(--oa-line); border-top-color:var(--oa-brand); border-radius:50%; animation:oaSpin .8s linear infinite; } @keyframes oaSpin{ to{ transform:rotate(360deg); } } .oa-step-body{ font-size:12.5px; color:var(--oa-muted); background:var(--oa-card); border:1px solid var(--oa-line); border-radius:11px; padding:10px 12px; line-height:1.6; max-height:150px; overflow:auto; white-space:pre-wrap; word-break:break-word; } .oa-step-body.oa-collapsed{ display:none; } /* officecli 动态结果区：固定两行高，子命令结果滚动替换，不占太多页面空间 */ .oa-step-body.oa-live{ max-height:3em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:1.5; } .oa-step-body.oa-live-multi{ max-height:3em; overflow-y:auto; white-space:pre-wrap; line-height:1.5; } /* 余额不足提示条 */ .oa-insufficient{ align-self:flex-start; max-width:88%; display:flex; align-items:center; gap:10px; background:var(--oa-free-soft); border:1px solid #f3c8bf; border-radius:11px; padding:12px 14px; font-size:13px; color:#b42318; } .oa-insufficient a{ color:var(--oa-brand); font-weight:600; text-decoration:none; margin-left:4px; } .oa-insufficient a:hover{ text-decoration:underline; } /* 工具开关 */ .oa-tool-item{ position:relative; } .oa-switch{ position:relative; width:36px; height:20px; flex:none; border-radius:999px; background:var(--oa-line); cursor:pointer; transition:.18s; border:none; } .oa-switch.on{ background:var(--oa-brand); } .oa-switch::after{ content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.18s; box-shadow:0 1px 3px rgba(0,0,0,.2); } .oa-switch.on::after{ left:18px; } .oa-tool-item.off .oa-ic, .oa-tool-item.off .oa-ti-title, .oa-tool-item.off .oa-ti-desc{ opacity:.45; } .oa-pref-hint{ font-size:11px; color:var(--oa-muted); margin:0 6px 8px; line-height:1.5; } /* ---------- Responsive ---------- */ @media (max-width: 980px){ .oa-tools{ grid-template-columns:1fr; height:auto; } .oa-tools.oa-right-open{ grid-template-columns:1fr; } .oa-left, .oa-preview, .oa-right-toggle{ display:none; } .oa-ws, .oa-plans{ grid-template-columns:1fr; } .oa-footer-grid{ grid-template-columns:1fr 1fr; } .oa-nav{ position:relative; } .oa-nav-links{ display:none; } .oa-nav-links.open{ display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--oa-card); border-bottom:1px solid var(--oa-line); padding:8px 20px 14px; gap:0; box-shadow:var(--oa-shadow); z-index:29; } .oa-nav-links.open a{ padding:12px 2px; border-bottom:1px solid var(--oa-line); font-size:15px; color:var(--oa-ink); } .oa-nav-links.open a:last-child{ border-bottom:none; } .oa-h1{ font-size:34px; } .oa-menu-toggle{ display:inline-flex; } .oa-stats{ grid-template-columns:repeat(2,1fr); } .oa-grid-2{ grid-template-columns:1fr; } .oa-contact-grid{ grid-template-columns:1fr; } .oa-form-row{ grid-template-columns:1fr; } }