:root { --bg: #0b0b0d; --panel: #141417; --panel2: #1b1b20; --border: #292930; --border-strong: #3a3a44; --text: #ededf1; --muted: #7e7e8c; --accent: #e06a52; --accent-hover: #ec7d67; /* matches main app dark theme */ --accent-soft: rgba(224,106,82,0.14); --accent-glow: rgba(224,106,82,0.30); --accent-grad: linear-gradient(135deg, #ec7d67 0%, #d15a44 100%); --danger: #f55; } * { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; overflow: hidden; } body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; -webkit-tap-highlight-color: transparent; /* Real viewport height: JS sets --app-vh from visualViewport.height (most reliable in PWA standalone mode where vh/dvh/svh report inconsistently across iOS Safari, Android Chrome, Samsung Internet, etc). Fallback chain ends in 100dvh for the few seconds before cc.js runs. */ /* iOS 键盘 bug 修复：把整个 app 外壳钉在 visual viewport 上（position:fixed + top=--app-top=visualViewport.offsetTop），这样 iOS 聚焦输入框弹键盘时强行滚动 window（layout viewport）也推不动外壳——内部 #cc-messages 照常滚，输入框稳在底部。裸 body 只定高不定位时会被 window 滚动带出可视区上沿（截图里「页面跳到上面」）。 */ position: fixed; top: var(--app-top, 0px); left: 0; right: 0; height: 100vh; height: 100dvh; height: var(--app-vh, 100dvh); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); overflow: hidden; } #cc-root { display: grid; grid-template-columns: 240px 1fr 320px; grid-template-rows: minmax(0, 1fr); /* constrain row so flex children shrink */ height: 100%; /* fills body's content box (after safe-area padding) */ /* Native controls (#cc-input textarea, scrollbars) follow the app theme, not the OS. Scoped to #cc-root so it never touches the main app's controls when cc.css is loaded on the fused homepage (index.html). */ color-scheme: dark; } [data-theme="light"] #cc-root { color-scheme: light; } /* iOS 软键盘上方的辅助栏（‹ › 完成那条）只认「根元素/文档级」的 color-scheme，读不到上面 #cc-root（一个 div）上的声明——于是浅色主题下键盘栏仍渲染成深色黑条。把 color-scheme 提升到带 data-theme 的根元素让 iOS 读到：独立 cc.html 的 data-theme 在，融合首页在 [data-cc-embedded]。选择器各带 data-theme + 宿主，故只在有 CC 的页面生效、且始终与当前主题一致，不误伤无 CC 的普通页。 */ html[data-theme="dark"], body[data-cc-embedded][data-theme="dark"] { color-scheme: dark; } html[data-theme="light"], body[data-cc-embedded][data-theme="light"] { color-scheme: light; } #cc-root.files-collapsed { grid-template-columns: 240px 1fr 0; } aside, main { border-right: 1px solid var(--border); overflow: hidden; } aside:last-child { border-right: none; } aside header, #cc-conv-header { padding: 10px 12px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } #cc-workspaces { display: flex; flex-direction: column; } #cc-ws-search, #cc-file-search { margin: 6px; padding: 6px 10px; background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; } #cc-ws-search:focus, #cc-file-search:focus { outline: none; border-color: var(--accent); } #cc-ws-search::placeholder, #cc-file-search::placeholder { color: var(--muted); } #cc-file-search { font-family: monospace; font-size: 12px; } /* FILES sort bar (issue #391): small field selector + asc/desc toggle, sits between the search input and the tree. */ #cc-file-sortbar { display: flex; align-items: center; gap: 6px; margin: 0 6px 4px; font-size: 11px; color: var(--muted); } #cc-file-sortbar label { flex: 0 0 auto; } #cc-file-sort-by { flex: 1 1 auto; min-width: 0; padding: 4px 6px; background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 12px; } #cc-file-sort-by:focus { outline: none; border-color: var(--accent); } #cc-file-sort-dir { flex: 0 0 auto; width: 28px; padding: 4px 0; background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1; } #cc-file-sort-dir:hover { border-color: var(--accent); color: var(--accent); } /* Batch-download toggle: sits at the end of the sort bar, injected by cc.js so no static HTML edit is needed. Matches the dir toggle's chip styling. */ .cc-file-batch-toggle { flex: 0 0 auto; width: 28px; padding: 4px 0; display: inline-flex; align-items: center; justify-content: center; background: var(--panel2); color: var(--muted); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; } .cc-file-batch-toggle:hover { border-color: var(--accent); color: var(--accent); } .cc-file-batch-toggle.active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel2)); } /* Batch-download selection toolbar (issue #391 PR-2), rendered at the top of the file tree while select mode is on. Reuses the archive toolbar's checkbox look (.cc-archive-check / .cc-archive-selall / .cc-archive-count). */ .cc-file-seltoolbar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px; position: sticky; top: 0; z-index: 1; background: var(--bg); border-bottom: 1px solid var(--border); } .cc-file-check { margin-right: 6px; } .cc-selbar-btn { flex: 0 0 auto; padding: 4px 10px; font-size: 12px; font-family: inherit; background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; } .cc-selbar-btn:hover:not(:disabled) { border-color: var(--accent); } .cc-selbar-btn:disabled { opacity: 0.45; cursor: default; } .cc-selbar-primary { background: var(--accent); color: #0a0a0a; border-color: var(--accent); } .cc-selbar-primary:hover:not(:disabled) { filter: brightness(1.08); } #cc-workspaces ul { list-style: none; padding: 6px; flex: 1; overflow-y: auto; min-height: 0; } #cc-workspaces li { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 6px; color: var(--text); margin-bottom: 2px; } #cc-workspaces li:hover { background: var(--panel2); } #cc-workspaces li.active { background: var(--panel2); color: #fff; } #cc-workspaces li.system { font-weight: 600; } #cc-workspaces li .cc-ws-body { flex: 1; min-width: 0; cursor: pointer; padding: 4px 6px; } #cc-workspaces li .meta { font-size: 11px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #cc-workspaces li .cc-ws-del { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.5; transition: opacity 0.15s, color 0.15s, background 0.15s; } #cc-workspaces li .cc-ws-del svg { display: block; } #cc-workspaces li:hover .cc-ws-del { opacity: 1; } #cc-workspaces li .cc-ws-del:hover { color: var(--danger); background: var(--panel); } #cc-recycle-btn, #cc-file-archive-btn, #cc-trial-btn, #cc-gatelog-btn { margin: 6px 6px 0; background: var(--panel); color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 8px; cursor: pointer; font-size: 12px; text-align: left; } #cc-recycle-btn, #cc-trial-btn, #cc-gatelog-btn { margin-bottom: 6px; } #cc-recycle-btn:hover, #cc-file-archive-btn:hover, #cc-trial-btn:hover, #cc-gatelog-btn:hover { color: var(--text); border-color: var(--text); } #cc-recycle-modal, #cc-file-archive-modal, #cc-trial-modal, #cc-gatelog-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 40; display: none; align-items: center; justify-content: center; padding: 20px; } #cc-recycle-modal.show, #cc-file-archive-modal.show, #cc-trial-modal.show, #cc-gatelog-modal.show { display: flex; } /* 审计面板（issue #498）：DOM 由 cc.js 动态建（两个前端入口共用一份 JS），这里只给壳。 */ #cc-gatelog-modal .cc-modal-panel { max-width: 640px; } #cc-gatelog-list { overflow-y: auto; } .cc-modal-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; width: 100%; max-width: 520px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; } .cc-modal-panel > header { padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; color: var(--text); text-transform: none; letter-spacing: 0; font-size: 14px; } .cc-modal-panel > header span { flex: 1; } .cc-modal-panel > header button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; padding: 4px 8px; } .cc-modal-note { padding: 12px 16px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); } #cc-recycle-body, #cc-file-archive-body, #cc-trial-list { flex: 1; overflow-y: auto; padding: 8px; min-height: 0; } /* Trial 账户管理（issue #356 PR-3） */ .cc-trial-new { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); } .cc-trial-new input { flex: 1; background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 7px 10px; font-size: 13px; outline: none; } .cc-trial-new input:focus { border-color: var(--accent); } .cc-trial-new button { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 6px 16px; cursor: pointer; font-weight: 600; font-size: 13px; } #cc-trial-created { padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--panel2); } #cc-trial-cred-note { font-size: 12px; color: var(--warn, #c9a55a); margin-bottom: 6px; } #cc-trial-cred-text { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; font-size: 13px; color: var(--text); user-select: all; -webkit-user-select: all; white-space: pre-wrap; } .cc-trial-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; flex-wrap: wrap; } .cc-trial-row:hover { background: var(--panel2); } .cc-trial-info { flex: 1; min-width: 140px; } .cc-trial-name { color: var(--text); font-weight: 600; } .cc-trial-status { font-size: 11px; font-weight: 400; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 1px 7px; margin-left: 6px; } .cc-trial-status-active { color: #7aa87a; border-color: #2e4a2e; } .cc-trial-status-expired, .cc-trial-status-disabled { color: #b07a7e; border-color: #4a2e30; } .cc-trial-meta { font-size: 11px; color: var(--muted); margin-top: 2px; } .cc-trial-actions { display: flex; gap: 6px; flex-wrap: wrap; } .cc-trial-actions button { background: var(--panel); color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 12px; } .cc-trial-actions button:hover { color: var(--text); border-color: var(--text); } .cc-trial-actions button.danger { color: #b07a7e; border-color: #4a2e30; } .cc-recycle-empty { padding: 24px; text-align: center; color: var(--muted); } .cc-recycle-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; } .cc-recycle-row:hover { background: var(--panel2); } .cc-recycle-info { flex: 1; min-width: 0; } .cc-recycle-name { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-recycle-meta { font-size: 11px; color: var(--muted); margin-top: 2px; } .cc-recycle-restore { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 6px 14px; cursor: pointer; font-weight: 600; text-decoration: none; font-size: 13px; white-space: nowrap; } .cc-recycle-restore:hover { background: var(--accent-hover); } .cc-recycle-danger { background: var(--danger); } .cc-recycle-danger:hover { background: var(--danger); filter: brightness(1.15); } .cc-recycle-restore:disabled { opacity: 0.4; cursor: not-allowed; } .cc-recycle-restore:disabled:hover { background: var(--danger); filter: none; } /* Compact icon action buttons for the file-archive rows. On mobile the old text buttons (下载/取消归档/永久删除) ate the row width and forced the name/meta to wrap character-by-character; icons free that space so name + 归档于 time show. */ .cc-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background .12s, color .12s; } .cc-icon-btn:hover, .cc-icon-btn:active { background: var(--panel2); color: var(--text); } .cc-icon-btn.danger { color: #c25a5a; } .cc-icon-btn.danger:hover, .cc-icon-btn.danger:active { background: rgba(255, 85, 85, .16); color: var(--danger); } /* Give the file name room to show more (up to 2 lines) instead of a hard one-line ellipsis, now that the compact icons leave horizontal space. */ #cc-file-archive-body .cc-recycle-row { gap: 8px; } #cc-file-archive-body .cc-recycle-name { white-space: normal; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Archive bulk toolbar (issue #391): 全选 / 已选 N / 删除所选 / 清空全部, sticky at the top of the scrolling archive list. */ .cc-archive-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 4px; position: sticky; top: 0; z-index: 1; background: var(--bg); border-bottom: 1px solid var(--border); } .cc-archive-selall { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; cursor: pointer; white-space: nowrap; } .cc-archive-count { color: var(--muted); font-size: 12px; white-space: nowrap; } .cc-archive-check { width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; accent-color: var(--accent); } #cc-new-ws { margin-left: auto; background: none; border: 1px solid var(--border); color: var(--muted); width: 24px; height: 24px; border-radius: 4px; cursor: pointer; } #cc-new-folder-btn { margin-left: auto; } #cc-new-folder-btn, #cc-upload-btn, #cc-upload-dir-btn { background: none; border: 1px solid var(--border); color: var(--muted); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 11px; letter-spacing: 1px; } #cc-upload-btn, #cc-upload-dir-btn { margin-left: 4px; } #cc-new-folder-btn:hover, #cc-upload-btn:hover, #cc-upload-dir-btn:hover { color: var(--text); border-color: var(--text); } #cc-conversation { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; } /* 锚定上拉刷新提示条 */ /* 手机上拉刷新提示：对话滚到底再上拉时浮现一个圆环（PWA 无地址栏/刷新键，下拉被滚动占用）。越过阈值后圆环用 1s 匀速转满，转满 = 解锁刷新；未满松手不刷新。桌面不触摸永不显形。位移/状态由 cc.js 手势逻辑控制，圆环填充由 CSS transition 与 DWELL_MS 同步。 */ .cc-pull-hint { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--panel2); border: 1px solid var(--border); opacity: 0; pointer-events: none; z-index: 50; transition: opacity .15s ease; } .cc-pull-hint:not(.active) { transition: transform .2s ease, opacity .2s ease; } .cc-pull-ring { width: 34px; height: 34px; transform: rotate(-90deg); } /* 从 12 点方向起转 */ .cc-pull-ring-track { fill: none; stroke: var(--border); stroke-width: 3; } .cc-pull-ring-prog { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 94.25; /* 2π·15 ≈ 94.25，整周 */ stroke-dashoffset: 94.25; /* 默认全空 */ transition: none; } .cc-pull-hint.filling .cc-pull-ring-prog { stroke-dashoffset: 0; /* 越过阈值 → 1s 匀速转满 */ transition: stroke-dashoffset 1s linear; } .cc-pull-hint.armed { border-color: var(--accent); } .cc-pull-hint.armed .cc-pull-ring-prog { stroke: var(--accent); } /* 回到底部 FAB（#430，仿 Claude App 圆形 ↓）：CC 产出中用户上翻后浮现，点击回底并恢复跟随。悬浮输入框正上方居中；仅 stick 关闭（离底）时 .visible 淡入。位置对齐 .cc-pull-hint，两者互斥（离底时 FAB 显示、上拉刷新只在贴底可起），不会同框。 */ #cc-scroll-bottom { position: absolute; left: 50%; bottom: 130px; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--panel2); color: var(--text); border: 1px solid var(--border); cursor: pointer; opacity: 0; pointer-events: none; z-index: 50; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); transition: opacity .15s ease; } #cc-scroll-bottom.visible { opacity: 1; pointer-events: auto; } #cc-scroll-bottom:hover { border-color: var(--accent); } #cc-conv-header { gap: 12px; } #cc-conv-title { flex: 1; color: var(--text); text-transform: none; font-size: 14px; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Model + effort picker (issue #382) — a chip in the composer (仿 Claude App) opening a two-level popover UPWARD: level 1 = model list + "Effort ›" row, level 2 = the 5 gears + 默认. Was a header button until #382. */ #cc-model-wrap { position: relative; min-width: 0; } #cc-model-btn { background: var(--panel2); color: var(--text); border: 1px solid var(--border); padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; max-width: 160px; } #cc-model-btn:hover { border-color: var(--text); } #cc-model-btn svg { flex-shrink: 0; opacity: 0.7; } #cc-model-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } #cc-model-popover { position: absolute; bottom: calc(100% + 8px); left: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); min-width: 170px; padding: 4px; z-index: 40; } #cc-model-popover[hidden] { display: none; } .cc-pop-panel { display: flex; flex-direction: column; gap: 1px; } .cc-pop-panel[hidden] { display: none; } .cc-pop-divider { height: 1px; background: var(--border); margin: 4px 2px; } .cc-pop-divider[hidden] { display: none; } #cc-model-popover [role="menuitem"] { background: none; border: none; color: var(--text); text-align: left; padding: 8px 12px; border-radius: 4px; font-size: 13px; cursor: pointer; white-space: nowrap; } #cc-model-popover [role="menuitem"]:hover { background: var(--panel2); } #cc-model-popover [data-model].active, #cc-model-popover [data-effort].active { color: var(--accent); } #cc-model-popover [data-model].active::before, #cc-model-popover [data-effort].active::before { content: "● "; font-size: 9px; opacity: 0.8; } #cc-effort-row { display: flex; align-items: center; gap: 6px; } #cc-effort-row[hidden] { display: none; } #cc-effort-row > span:first-child { flex: 1; } #cc-effort-cur { color: var(--muted); font-size: 12px; } #cc-effort-row svg { flex-shrink: 0; opacity: 0.6; } #cc-effort-back { display: flex; align-items: center; gap: 6px; color: var(--muted) !important; font-size: 12px !important; } /* Agent (execution engine) picker — same visual language as the model picker. */ #cc-agent-wrap { position: relative; } #cc-agent-btn { background: var(--panel2); color: var(--text); border: 1px solid var(--border); padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; max-width: 160px; } #cc-agent-btn:hover { border-color: var(--text); } #cc-agent-btn svg { flex-shrink: 0; opacity: 0.7; } #cc-agent-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #cc-agent-popover { position: absolute; top: calc(100% + 6px); right: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); min-width: 160px; padding: 4px; z-index: 40; display: flex; flex-direction: column; gap: 1px; } #cc-agent-popover[hidden] { display: none; } #cc-agent-popover [data-agent] { background: none; border: none; color: var(--text); text-align: left; padding: 8px 12px; border-radius: 4px; font-size: 13px; cursor: pointer; white-space: nowrap; } #cc-agent-popover [data-agent]:hover { background: var(--panel2); } #cc-agent-popover [data-agent].active { color: var(--accent); } #cc-agent-popover [data-agent].active::before { content: "● "; font-size: 9px; opacity: 0.8; } /* 图片模型选择器（image2 / Seedream 5 Pro）——与引擎选择器同款 */ #cc-imgmodel-wrap { position: relative; } #cc-imgmodel-btn { background: var(--panel2); color: var(--text); border: 1px solid var(--border); padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; max-width: 180px; } #cc-imgmodel-btn:hover { border-color: var(--text); } #cc-imgmodel-btn svg { flex-shrink: 0; opacity: 0.7; } #cc-imgmodel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #cc-imgmodel-popover { position: absolute; top: calc(100% + 6px); right: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); min-width: 160px; padding: 4px; z-index: 40; display: flex; flex-direction: column; gap: 1px; } #cc-imgmodel-popover[hidden] { display: none; } #cc-imgmodel-popover [data-imgmodel] { background: none; border: none; color: var(--text); text-align: left; padding: 8px 12px; border-radius: 4px; font-size: 13px; cursor: pointer; white-space: nowrap; } #cc-imgmodel-popover [data-imgmodel]:hover { background: var(--panel2); } #cc-imgmodel-popover [data-imgmodel].active { color: var(--accent); } #cc-imgmodel-popover [data-imgmodel].active::before { content: "● "; font-size: 9px; opacity: 0.8; } /* Single-row meter strip pinned above the input bar: [CTX | bar | %] [5h | bar | %] [7d | bar | %] CTX = context window (per-workspace, updated from CC stream) 5h = Max 5-hour rolling usage (account-level, polled from Anthropic) 7d = Max 7-day usage (same poll) Each segment gets .warn (>=70%) / .danger (>=90%) on the row class. */ #cc-meters { display: flex; flex-direction: row; gap: 16px; padding: 4px 12px; font-size: 11px; color: var(--muted); background: var(--panel); border-top: 1px solid var(--border); } .cc-meter-row { flex: 1 1 0; display: flex; align-items: center; gap: 6px; min-width: 0; } .cc-meter-label { flex: 0 0 auto; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; font-variant-numeric: tabular-nums; } .cc-meter-bar { flex: 1 1 auto; min-width: 20px; height: 4px; background: var(--panel2); border-radius: 2px; overflow: hidden; } .cc-meter-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.3s, background 0.3s; } .cc-meter-text { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; } .cc-meter-row.warn .cc-meter-fill { background: #d4a000; } .cc-meter-row.danger .cc-meter-fill { background: var(--danger); } .cc-meter-row.warn .cc-meter-text { color: #d4a000; } .cc-meter-row.danger .cc-meter-text { color: var(--danger); } #cc-new-session, #cc-toggle-files, #cc-toggle-ws, #cc-back { background: none; border: 1px solid var(--border); color: var(--muted); padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; } #cc-back:hover, #cc-new-session:hover, #cc-toggle-files:hover, #cc-toggle-ws:hover { color: var(--text); border-color: var(--text); } #cc-toggle-ws { display: none; } /* desktop hides hamburger; mobile breakpoint shows it */ #cc-messages { flex: 1 1 0; overflow-y: auto; padding: 16px; min-width: 0; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .cc-msg { margin-bottom: 12px; word-wrap: break-word; font-size: var(--cc-font-size, 15.5px); line-height: 1.6; } .cc-msg.user { background: var(--panel2); padding: 10px 13px; border-radius: 14px 14px 4px 14px; white-space: pre-wrap; word-break: break-word; border: 1px solid var(--border); } .cc-msg.assistant { line-height: 1.6; position: relative; } .cc-msg.assistant.streaming { white-space: pre-wrap; } /* preserve newlines mid-stream */ /* 「K」头像：只挂顶层助手气泡（最终答复/流式）——直接子选择器天然排除下沉进抽屉的中间叙述，及欢迎卡（自带强调条）。纯 CSS ::before，不依赖 cc.js DOM 槽位。 */ #cc-messages > .cc-msg.assistant:not(.cc-welcome) { padding-left: 40px; min-height: 28px; } #cc-messages > .cc-msg.assistant:not(.cc-welcome)::before { content: "K"; position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-grad); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px -2px var(--accent-glow); user-select: none; } /* 用户头像：与「K」对称，但放气泡左侧外部（margin 让位 + ::before 负偏移落到左留白），中性灰圆 + 白色人形图标，跟珊瑚 K 区分。同为顶层直接子，抽屉内不挂。纯 CSS，不动 cc.js。 */ #cc-messages > .cc-msg.user { position: relative; margin-left: 40px; } #cc-messages > .cc-msg.user::before { content: ""; position: absolute; left: -40px; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c0-3.6 3.1-5.5 7-5.5s7 1.9 7 5.5'/%3E%3C/svg%3E") center/17px no-repeat; box-shadow: 0 2px 8px -2px rgba(0,0,0,0.25); user-select: none; } /* 空空间预装欢迎语（feat/ws-memory-framework）：柔和卡片，区别于普通答复，读作「开场引导」。 */ .cc-welcome { background: linear-gradient(180deg, var(--accent-soft), transparent); border: 1px solid var(--border); border-radius: 12px; padding: 15px 17px; margin-bottom: 12px; position: relative; overflow: hidden; } .cc-welcome::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-grad); } .cc-welcome p:first-child { margin-top: 0; } .cc-welcome p:last-child { margin-bottom: 0; } /* Per-bubble footer row: [timestamp] [copy button]. Appended to every user + assistant text bubble. Dim-but-visible by default so the user doesn't have to guess whether there's a copy affordance. */ .cc-msg-footer { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 6px; opacity: 0.75; transition: opacity 0.15s; } .cc-msg.assistant:hover .cc-msg-footer, .cc-msg.user:hover .cc-msg-footer { opacity: 0.95; } .cc-msg-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.3px; user-select: none; } .cc-msg-copy { background: none; border: 1px solid var(--border); color: var(--muted); cursor: pointer; padding: 3px 5px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: color 0.15s, background 0.15s, border-color 0.15s; } #cc-new-session svg, #cc-toggle-files svg, .cc-msg-copy svg { display: block; } .cc-msg-copy:hover { color: var(--text); background: var(--panel2); border-color: var(--text); } .cc-msg-copy.copied { color: #6c6; border-color: #6c6; } /* 「引用」按钮（issue #493）：与复制按钮同款描边胶囊，并排放在 footer。 */ .cc-msg-quote { background: none; border: 1px solid var(--border); color: var(--muted); cursor: pointer; padding: 3px 5px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: color 0.15s, background 0.15s, border-color 0.15s; } .cc-msg-quote svg { display: block; } .cc-msg-quote:hover { color: var(--accent); background: var(--panel2); border-color: var(--accent); } /* 组合器顶部「引用中」chip（issue #493）：珊瑚左竖条 + 片段预览 + × 取消。 */ .cc-quote-chip { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 6px 8px 6px 10px; background: var(--panel2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 6px; font-size: 12px; line-height: 1.4; } .cc-quote-chip-role { flex: none; color: var(--accent); font-weight: 600; } .cc-quote-chip-text { flex: 1 1 auto; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-quote-chip-x { flex: none; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; transition: color 0.15s; } .cc-quote-chip-x:hover { color: var(--text); } /* user 气泡内的灰色引用条（issue #493，仿 Coze）：贴在正文之上，被引片段纯文本。 */ .cc-quote-bar { margin: 0 0 6px; padding: 5px 10px; background: var(--panel2); border-left: 3px solid var(--border-strong); border-radius: 4px; font-size: 12px; line-height: 1.5; opacity: 0.9; } .cc-quote-bar-role { color: var(--muted); font-weight: 600; margin-bottom: 2px; } .cc-quote-bar-text { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } /* 发送队列态（issue #395）：待发/发送中的 user 气泡半透明 + 左侧提示；发送失败的气泡描红并挂「点此重发」入口。send_ack / 补发成功后类被移除、气泡转正。 */ .cc-msg.user.cc-msg-pending { opacity: 0.55; } .cc-msg.user.cc-msg-pending::after { content: "发送中…"; display: block; margin-top: 4px; font-size: 11px; color: var(--muted); } .cc-msg.user.cc-msg-failed { border-color: #c0504d; } .cc-send-retry { margin-top: 6px; font-size: 12px; color: #e06c6c; cursor: pointer; user-select: none; display: inline-block; } .cc-send-retry:hover { text-decoration: underline; } /* Markdown elements inside assistant bubbles. Compact spacing — these blocks live inside chat, not a full document. */ .cc-msg.assistant h1, .cc-msg.assistant h2, .cc-msg.assistant h3, .cc-msg.assistant h4, .cc-msg.assistant h5, .cc-msg.assistant h6 { margin: 14px 0 6px; line-height: 1.3; font-weight: 700; color: #fff; } .cc-msg.assistant h1 { font-size: 18px; } .cc-msg.assistant h2 { font-size: 16px; } .cc-msg.assistant h3 { font-size: 15px; } .cc-msg.assistant h4, .cc-msg.assistant h5, .cc-msg.assistant h6 { font-size: 14px; } .cc-msg.assistant p { margin: 6px 0; } .cc-msg.assistant ul, .cc-msg.assistant ol { margin: 6px 0; padding-left: 22px; } .cc-msg.assistant li { margin: 2px 0; } .cc-msg.assistant li > p { margin: 0; } .cc-msg.assistant strong { color: #fff; font-weight: 700; } .cc-msg.assistant em { color: var(--text); } .cc-msg.assistant code { background: var(--panel2); color: #f8c; padding: 1px 5px; border-radius: 3px; font-size: 12.5px; font-family: monospace; } .cc-msg.assistant pre { background: #0c0c0c; border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin: 8px 0; overflow-x: auto; } .cc-msg.assistant pre code { background: transparent; color: inherit; padding: 0; font-size: 12px; } .cc-msg.assistant blockquote { border-left: 3px solid var(--border); padding: 2px 10px; margin: 6px 0; color: var(--muted); } .cc-msg.assistant a { color: var(--accent); text-decoration: none; } .cc-msg.assistant a:hover { text-decoration: underline; } .cc-msg.assistant hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; } /* 内联图片：栅格生图（如 2048² 方图）默认全宽铺满太占屏；封顶高度让它在对话里收成缩略尺寸，点一下另开原图查看/下载。横向 SVG 结构图本就矮、不受影响。 */ .cc-msg.assistant img, .cc-msg.user img { max-width: 100%; max-height: 300px; width: auto; height: auto; border-radius: 8px; display: block; margin: 6px 0; border: 1px solid var(--border); cursor: zoom-in; } .cc-msg.assistant table { border-collapse: collapse; margin: 8px 0; font-size: 13px; display: block; overflow-x: auto; max-width: 100%; } .cc-msg.assistant th, .cc-msg.assistant td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; } .cc-msg.assistant th { background: var(--panel); color: #fff; font-weight: 700; } /* 一个 turn 的所有工具调用收进一个轻量折叠组：默认只一行 muted 摘要（不显眼），点开露出定高可滚动区、深底浅字（浅色/深色主题都清晰）。 */ .cc-msg.cc-tool-group { padding: 0; margin: 6px 0; background: none; border: none; } .cc-tool-group-head { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 8px; font-size: 12px; color: var(--muted); user-select: none; border-left: 2px solid var(--border); border-radius: 2px; } .cc-tool-group-head:hover { color: var(--text); background: rgba(127,127,127,0.08); } .cc-msg.cc-tool-group.has-error .cc-tool-group-head { color: var(--danger); } .cc-tool-caret { flex: 0 0 auto; font-size: 10px; width: 12px; } .cc-tool-group-title { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 展开体默认深底 + 硬编码浅字（深色模式）：--text/--muted 在浅色主题是深色，叠 #0c0c0c 上不可见（#453 issue 2），故不复用主题变量。浅色模式的浅底覆盖见文件末 [data-theme=light] .cc-tool-* 块（#457）；此处深色默认值勿改回主题变量。 */ .cc-tool-group-body { max-height: 260px; overflow-y: auto; margin-top: 4px; background: #0c0c0c; border-radius: 4px; } .cc-tool-step { padding: 7px 10px; } .cc-tool-step + .cc-tool-step { border-top: 1px solid #2a2a2a; } .cc-tool-step-cmd { font-family: monospace; font-size: 12px; color: #8fd0a8; white-space: pre-wrap; word-break: break-all; } .cc-tool-step.error .cc-tool-step-cmd { color: #ff8a8a; } .cc-tool-step pre { margin: 5px 0 0; font-family: monospace; font-size: 12px; color: #cfcfcf; white-space: pre-wrap; word-break: break-word; } .cc-tool-step pre.cc-tool-output.error { color: #ff8a8a; } /* run 抽屉（issue #455）：一次提问的整个工作过程（工具/中间叙述/错误）收进一个可折叠「工作过程」抽屉；最终答复被提到抽屉外（.cc-final）展开。head 略比 tool-group 醒目一档（左边框实心 + 悬停）以示"这是整段过程的入口"，body 内嵌 tool-group 不再另设 max-height（外层 #cc-messages 已滚动；折叠态整体隐藏，不占位）。 */ .cc-msg.cc-run-drawer { padding: 0; margin: 8px 0; background: none; border: none; } .cc-run-drawer-head { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 8px; font-size: 12px; color: var(--muted); user-select: none; border-left: 2px solid var(--accent); border-radius: 2px; } .cc-run-drawer-head:hover { color: var(--text); background: rgba(127,127,127,0.08); } .cc-msg.cc-run-drawer.has-error .cc-run-drawer-head { color: var(--danger); border-left-color: var(--danger); } .cc-run-caret { flex: 0 0 auto; font-size: 10px; width: 12px; } .cc-run-drawer-title { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-run-drawer-body { margin-top: 2px; padding-left: 6px; border-left: 1px solid var(--border); } .cc-run-drawer-body[hidden] { display: none; } /* 抽屉内的中间叙述与顶层最终答复同字号，跟随「对话字号」选择；仍靠 opacity 弱化一档以作区分。 */ .cc-run-drawer-body .cc-msg.assistant { font-size: var(--cc-font-size, 15.5px); opacity: 0.92; } /* 最终答复（.cc-final）被提到抽屉外，样式与普通助手气泡一致——不额外定义，就是"答案本身"。 */ /* 行程交互地图抽屉（P1b, issue #472）：跟在最终答复气泡尾部，默认折叠、点头展开懒加载。 canvas 给固定高度——高德地图容器必须有非零尺寸才渲染底图，别用 auto/百分比高。 */ .cc-travel-map { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel2); } .cc-travel-map-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; cursor: pointer; user-select: none; font-size: 13px; color: var(--text); } .cc-travel-map-head:hover { background: rgba(127,127,127,0.08); } .cc-travel-map-caret { font-size: 10px; color: var(--muted); width: 12px; } .cc-travel-map-title { font-weight: 500; } .cc-travel-map-body { border-top: 1px solid var(--border); } .cc-travel-map-body[hidden] { display: none; } .cc-travel-map-canvas { width: 100%; height: 320px; background: var(--panel); } /* #472 验收：清除 .cc-msg img 全局规则（黑框/撑大/margin 错位）对高德 tile/marker 的污染。 cursor 用 inherit 而非 default，让瓦片继承地图容器的拖拽光标、marker 继承高德 pointer 手型。 */ .cc-travel-map .cc-travel-map-canvas img { max-width: none !important; max-height: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; cursor: inherit !important; } .cc-travel-map-note { padding: 6px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); } /* InfoWindow 内容（DOM 注入，非高德默认气泡） */ .cc-travel-info { min-width: 120px; max-width: 220px; font-size: 12px; color: #222; } .cc-travel-info-name { font-weight: 600; margin-bottom: 3px; } .cc-travel-info-row { line-height: 1.5; color: #555; } /* ===== P1.5b 行程模式：Day 标签 + 水滴序号 marker + 横向信息卡 ===== */ /* Day 标签栏（无「全部」，Day1/Day2…，默认 Day1 高亮） */ .cc-travel-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px; border-bottom: 1px solid var(--border); -webkit-overflow-scrolling: touch; } .cc-travel-tab { flex: 0 0 auto; padding: 4px 13px; font: inherit; font-size: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel2); color: var(--muted); cursor: pointer; white-space: nowrap; } .cc-travel-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* 水滴 marker：圆 + 左下尖角，旋转 -45° 让尖端朝正下方对准坐标（anchor:bottom-center）。内部序号数字反向旋转 45° 回正。住宿=紫底床图标；选中=放大变橙 + 置顶。 */ .cc-map-pin { width: 26px; height: 26px; background: #2b7fff; border: 2px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 1px 4px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; cursor: pointer; box-sizing: border-box; transition: width .15s, height .15s, background .15s; } /* 选中放大平滑过渡（cac #476） */ .cc-map-pin-num { transform: rotate(45deg); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; } .cc-map-pin.lodging { background: #8a63d2; } .cc-map-pin.selected { background: #ff5a3c; width: 32px; height: 32px; z-index: 20; } /* 横向滑动信息卡（Google Maps 式）：选中卡高亮 + 与 marker 双向联动 */ .cc-travel-cards { display: flex; gap: 8px; overflow-x: auto; padding: 8px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .cc-travel-card { flex: 0 0 200px; scroll-snap-align: center; position: relative; display: flex; gap: 8px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel2); cursor: pointer; } .cc-travel-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .cc-travel-card-badge { position: absolute; top: -7px; left: -7px; width: 20px; height: 20px; border-radius: 50%; background: #2b7fff; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 1; border: 1px solid var(--panel2); } .cc-travel-card-badge.lodging { background: #8a63d2; } .cc-travel-card-thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--panel); } /* 覆盖全局 .cc-msg.assistant img（同特异性靠位置后置也不稳），显式 !important 兜底 */ .cc-travel-map .cc-travel-card-thumb img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; cursor: pointer !important; display: block; } .cc-travel-card-thumb.noimg { display: flex; align-items: center; justify-content: center; } .cc-travel-card-thumb.noimg::after { content: "🗺"; font-size: 20px; opacity: 0.5; } .cc-travel-card-info { flex: 1 1 auto; min-width: 0; align-self: center; } .cc-travel-card-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-travel-card-meta { font-size: 11px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 顶部「加载更早的对话」按钮（issue #459）：随内容滚动的居中细条，主题变量适配深/浅色 + 独立 cc.html 与主页内嵌面板两入口。禁用态（加载中）降透明。 */ .cc-load-earlier { display: block; width: calc(100% - 24px); margin: 6px 12px 10px; padding: 7px 10px; font: inherit; font-size: 12px; text-align: center; cursor: pointer; color: var(--muted); background: var(--panel2); border: 1px solid var(--border); border-radius: 6px; } .cc-load-earlier:hover:not(:disabled) { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--panel2)); } .cc-load-earlier:disabled { opacity: 0.6; cursor: default; } .cc-msg.error { color: var(--danger); padding: 8px 12px; border: 1px solid var(--danger); border-radius: 4px; } .cc-msg.notice { color: var(--muted); font-size: 12px; padding: 6px 12px; border-left: 2px solid var(--accent); margin-bottom: 6px; } /* 仿 Claude App 输入框：整体一个圆角框，文字区在上、操作行在下。 */ #cc-input-bar { border-top: 1px solid var(--border); padding: 10px; } /* safe-area-inset-bottom is now handled at , not duplicated here */ .cc-composer { background: var(--panel); border: 1px solid var(--border-strong); border-radius: 16px; padding: 8px 10px 8px; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.2s, box-shadow 0.2s; } .cc-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } /* 缩略图预览带：粘贴/选图后即时显示小图 + × 删除（仿 Claude App）。 */ .cc-attach-preview { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 4px 0; } .cc-attach-preview[hidden] { display: none; } .cc-attach-thumb { position: relative; width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--panel); } .cc-attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .cc-attach-thumb.uploading img { opacity: 0.45; } .cc-attach-thumb.error { border-color: var(--danger); } .cc-attach-thumb .cc-attach-spin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text); } .cc-attach-thumb .cc-attach-spin svg { animation: cc-attach-rotate 0.8s linear infinite; } @keyframes cc-attach-rotate { to { transform: rotate(360deg); } } .cc-attach-thumb .cc-attach-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 999px; border: none; cursor: pointer; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; } .cc-attach-thumb .cc-attach-x:hover { background: rgba(0, 0, 0, 0.85); } #cc-input { width: 100%; box-sizing: border-box; background: none; border: none; color: var(--text); padding: 2px 4px 0; resize: none; font-size: 16px; line-height: 1.4; outline: none; /* 自动长高上限 = 10 行（JS 逐次量 scrollHeight），到顶后内部滚动。 */ max-height: calc(1.4em * 10 + 4px); overflow-y: auto; } .cc-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cc-composer-left { display: flex; align-items: center; gap: 6px; min-width: 0; } #cc-attach-btn { background: none; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; } #cc-attach-btn:hover { color: var(--text); border-color: var(--text); } /* 语音输入麦克风按钮（issue #435）：与附件按钮同尺寸圆钮。录音中变红呼吸，识别中变暗。 */ #cc-mic-btn { background: none; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; } #cc-mic-btn:hover { color: var(--text); border-color: var(--text); } #cc-mic-btn.recording { color: #fff; background: #e5484d; border-color: #e5484d; animation: cc-mic-pulse 1.2s ease-in-out infinite; } #cc-mic-btn.busy { opacity: 0.5; pointer-events: none; } @keyframes cc-mic-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(229,72,77,0.5); } 50% { box-shadow: 0 0 0 6px rgba(229,72,77,0); } } /* 语音状态条：录音中/识别中/结果提示 + 原文⇄整理后切换。默认隐藏，show 才显示。 */ .cc-mic-status { display: none; font-size: 12px; color: var(--muted); padding: 2px 4px 4px; line-height: 1.4; } .cc-mic-status.show { display: block; } .cc-mic-status.error { color: #e5484d; } .cc-mic-swap { color: var(--accent); cursor: pointer; text-decoration: none; background: none; border: none; padding: 0; font: inherit; } .cc-mic-swap:hover { text-decoration: underline; } /* 手机飞书式语音长条（issue #438）：点麦克风后 .cc-composer 加 .cc-voice-hidden 隐藏， #cc-voice-bar 加 .show 显示——左侧键盘返回小钮 + 右侧「点击说话」长条。 */ .cc-composer.cc-voice-hidden { display: none; } #cc-voice-bar { display: none; align-items: center; gap: 8px; } #cc-voice-bar.show { display: flex; } #cc-voice-keyboard { background: none; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; width: 40px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; } #cc-voice-keyboard:hover { color: var(--text); border-color: var(--text); } #cc-voice-toggle { flex: 1; min-width: 0; height: 44px; background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 12px; font-size: 15px; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; } #cc-voice-toggle.recording { color: #fff; background: #e5484d; border-color: #e5484d; animation: cc-mic-pulse 1.2s ease-in-out infinite; } #cc-voice-toggle.busy { opacity: 0.6; pointer-events: none; } #cc-send { background: var(--accent-grad); color: #fff; border: none; width: 34px; height: 34px; border-radius: 999px; cursor: pointer; flex-shrink: 0; box-shadow: 0 3px 12px -3px var(--accent-glow); display: flex; align-items: center; justify-content: center; transition: transform 0.12s, box-shadow 0.2s, filter 0.2s, opacity 0.2s; } #cc-send:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 18px -3px var(--accent-glow); } #cc-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } /* Running state: gray; click to stop the current turn (handled in JS). */ #cc-send.aborting { background: var(--muted); box-shadow: none; } #cc-send.aborting:hover { background: var(--muted); filter: brightness(1.1); } #cc-files.collapsed { display: none; } /* Drop-zone highlight: applied to #cc-files when a file is dragged over anywhere inside the FILES panel (header, search, tree, preview, blank space). pointer-events on children stay normal — we just paint a border + an overlay hint via ::after. */ /* Flex column so `#cc-file-tree` below gets a bounded height — without it, `overflow-y: auto` has nothing to scroll inside, content overflows the aside, and the outer `aside { overflow: hidden }` silently clips it. Desktop mouse-wheel reports "no scroll target" in that state. */ #cc-files { position: relative; display: flex; flex-direction: column; } #cc-files.dragover { outline: 2px dashed var(--accent); outline-offset: -8px; } #cc-files.dragover::after { content: "拖入即上传到当前目录"; position: absolute; inset: 8px; pointer-events: none; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); color: var(--text); font-size: 13px; border-radius: 4px; } #cc-file-tree { padding: 8px; font-family: monospace; font-size: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; /* `flex: 1` so the tree fills the aside; `min-height: 0` so flex can actually shrink below the children's intrinsic height (required for overflow-y to engage inside a flex column). */ flex: 1 1 auto; min-height: 0; } .cc-file { padding: 6px 8px; cursor: pointer; border-radius: 4px; display: flex; align-items: center; gap: 6px; min-width: 0; } .cc-file:hover { background: var(--panel2); } .cc-file.changed::after { content: " ●"; color: var(--accent); flex: 0 0 auto; } .cc-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ccSvgIcon() 行内图标：补 baseline 对齐，跟文件名/面包屑文字并排不偏移 */ svg.cc-ico { vertical-align: -0.15em; flex-shrink: 0; } /* 文件夹图标染暖金，跟中性灰文件图标区分（方案A） */ svg.cc-ico--folder { color: #c9a55a; } /* Tap-to-expand: a file row tapped open wraps its full name onto multiple lines so long names are fully readable on mobile (no hover tooltip). */ .cc-file.cc-file-expanded { align-items: flex-start; } .cc-file.cc-file-expanded .cc-file-name { overflow: visible; text-overflow: clip; white-space: normal; word-break: break-all; } /* Last-modified time, pinned to the right edge (rendered after the action buttons, so they sit to its left). Short HH:MM/MM-DD by default, full datetime when the row is tap-expanded. */ .cc-file-date { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; } .cc-date-full { display: none; } .cc-file.cc-file-expanded .cc-date-short { display: none; } .cc-file.cc-file-expanded .cc-date-full { display: inline; } .cc-file-dl, .cc-file-del, .cc-file-restore, .cc-file-move, .cc-file-archive { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 3px 5px; border-radius: 4px; color: var(--muted); text-decoration: none; background: none; border: none; cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s, background 0.15s; } .cc-file-dl svg, .cc-file-del svg, .cc-file-restore svg, .cc-file-move svg, .cc-file-archive svg { display: block; } .cc-file:hover .cc-file-dl, .cc-file:hover .cc-file-del, .cc-file:hover .cc-file-restore, .cc-file:hover .cc-file-move, .cc-file:hover .cc-file-archive { opacity: 0.7; } .cc-file-dl:hover { opacity: 1; color: var(--text); background: var(--panel); } .cc-file-del:hover { opacity: 1; color: var(--danger); background: var(--panel); } .cc-file-restore:hover { opacity: 1; color: var(--accent); background: var(--panel); } .cc-file-archive:hover { opacity: 1; color: var(--text); background: var(--panel); } .cc-file-move:hover { opacity: 1; color: var(--accent); background: var(--panel); } .cc-file.cc-dragging { opacity: 0.45; } .cc-file.dir.cc-drop-target { background: var(--panel); outline: 1px dashed var(--accent); } .cc-move-menu { position: fixed; z-index: 1000; background: var(--panel2); border: 1px solid var(--border); border-radius: 6px; padding: 4px; min-width: 160px; max-height: 60vh; overflow-y: auto; box-shadow: 0 6px 20px rgba(0,0,0,0.5); } .cc-move-menu-head { padding: 4px 8px; color: var(--muted); font-size: 11px; letter-spacing: 1px; } .cc-move-menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); cursor: pointer; padding: 6px 8px; border-radius: 4px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-move-menu button:hover { background: var(--panel); } .cc-file-empty { padding: 12px 8px; color: var(--muted); font-style: italic; text-align: center; } .cc-file-crumb { padding: 4px 8px 8px; color: var(--muted); font-size: 11px; border-bottom: 1px solid var(--border); margin-bottom: 6px; word-break: break-all; } .cc-crumb-seg { cursor: pointer; } .cc-crumb-seg:hover { color: var(--text); text-decoration: underline; } #cc-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 20; display: none; } #cc-mask.show { display: block; } /* Toast — anchored to the top-right corner of the viewport. Two levels: .warn (yellow, context nearing window limit) and .danger (red, usage quota hit). Auto-dismiss after a few seconds OR click ✕. */ #cc-toast { position: fixed; top: 16px; right: 16px; z-index: 50; max-width: 380px; min-width: 240px; padding: 10px 12px; border-radius: 6px; background: var(--panel); border: 1px solid var(--border); color: var(--text); font-size: 13px; line-height: 1.4; display: flex; align-items: flex-start; gap: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.5); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform 0.2s ease-out, opacity 0.2s ease-out; } #cc-toast:not(.hidden) { transform: translateY(0); opacity: 1; pointer-events: auto; } #cc-toast.warn { border-color: #d4a000; } #cc-toast.warn .cc-toast-icon::before { content: "⚠"; color: #d4a000; } #cc-toast.danger { border-color: var(--danger); } #cc-toast.danger .cc-toast-icon::before { content: "⛔"; color: var(--danger); } .cc-toast-icon { flex: 0 0 auto; font-size: 16px; line-height: 1; } .cc-toast-body { flex: 1 1 auto; word-break: break-word; } .cc-toast-close { flex: 0 0 auto; background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 14px; line-height: 1; } .cc-toast-close:hover { color: var(--text); } @media (max-width: 768px) { #cc-toast { left: 12px; right: 12px; max-width: none; top: 12px; } } /* Mobile breakpoint — folding drawer pattern */ @media (max-width: 768px) { #cc-root { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); } #cc-root.files-collapsed { grid-template-columns: 1fr; } #cc-toggle-ws { display: inline-block; } /* 手机端抽屉必须高于对话顶栏（融合主页 style.css「顶栏层级要高于消息区」给 #cc-conv-header 设了 z-index:30）：同为 30 时 DOM 更靠后的顶栏赢，会把抽屉自己那条 header（装着「＋新对话」）整条压住，手机上看不见也点不到。取 35 = 高于顶栏 30、低于弹窗 40（modal 从抽屉里开，必须盖在抽屉之上）。 */ #cc-workspaces { position: fixed; top: 0; left: 0; bottom: 0; width: 80vw; max-width: 300px; transform: translateX(-100%); transition: transform 0.22s ease-out; z-index: 35; background: var(--bg); border-right: 1px solid var(--border); } #cc-workspaces.open { transform: translateX(0); } /* Files drawer — slides in from right（同上：顶栏 30 会压住它自己的 header） */ #cc-files { position: fixed; top: 0; right: 0; bottom: 0; width: 85vw; max-width: 360px; transform: translateX(100%); transition: transform 0.22s ease-out; z-index: 35; background: var(--bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; } #cc-files.collapsed { display: flex; } /* override desktop hide */ #cc-files.open { transform: translateX(0); } /* Conversation always takes full width on mobile */ #cc-conversation { grid-column: 1; min-height: 0; } /* Touch-friendly sizing */ #cc-conv-header { padding: 12px; gap: 8px; } #cc-toggle-ws, #cc-toggle-files, #cc-new-ws, #cc-back, #cc-new-session { min-width: 38px; min-height: 38px; padding: 6px 10px; font-size: 16px; } #cc-model-btn { min-height: 40px; padding: 6px 10px; font-size: 13px; max-width: 130px; } /* Phone screens don't have room for back arrow + hamburger + title + model + new-session + toggle-files all on one row. Hide the back link — the OS-back gesture covers "leave /cc.html" and the workspace drawer covers intra-app navigation. */ #cc-back { display: none; } /* Mobile: no hover state — footer stays at the same visible opacity. */ .cc-msg-footer { opacity: 0.8; } .cc-msg-copy, .cc-msg-quote { min-height: 32px; padding: 6px 10px; } /* Mobile: keep the bar but smaller padding/text. */ #cc-meters { padding: 3px 10px; font-size: 10px; gap: 8px; } .cc-meter-row { gap: 4px; } .cc-meter-bar { min-width: 12px; } #cc-new-folder-btn, #cc-upload-btn, #cc-upload-dir-btn { min-height: 38px; padding: 8px 14px; font-size: 13px; } #cc-workspaces li .cc-ws-body { padding: 8px; min-height: 44px; } #cc-workspaces li .cc-ws-del { opacity: 1; min-width: 44px; min-height: 44px; font-size: 18px; } #cc-ws-search, #cc-file-search { font-size: 16px; min-height: 38px; } #cc-file-sort-by { font-size: 16px; min-height: 34px; } #cc-file-sort-dir { min-height: 34px; } #cc-input { font-size: 16px; min-height: 24px; } #cc-send { width: 40px; height: 40px; } #cc-attach-btn { width: 40px; height: 40px; font-size: 20px; } .cc-file { padding: 10px 8px; } /* Mobile: no hover, keep download/delete/restore/move buttons visible (dim) + bigger tap target. */ .cc-file-dl, .cc-file-del, .cc-file-restore, .cc-file-move { opacity: 0.6; padding: 6px 8px; min-width: 32px; min-height: 32px; } .cc-move-menu button { min-height: 40px; font-size: 15px; } #cc-messages { padding: 12px; } } /* Code-block copy button (per-block, in addition to bubble-level copy in footer) */ .cc-code-wrapper { position: relative; margin: 8px 0; } .cc-code-wrapper pre { margin: 0; } .cc-code-copy { position: absolute; top: 6px; right: 6px; background: var(--panel2); color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; z-index: 1; } .cc-code-wrapper:hover .cc-code-copy { opacity: 1; } .cc-code-copy:hover { background: var(--accent); color: white; border-color: var(--accent); } @media (hover: none) { /* Mobile (no hover): keep copy button visible (dim) + bigger tap target */ .cc-code-copy { opacity: 0.6; padding: 6px 10px; min-height: 28px; } } /* 浅色模式：cc.html 原本纯深色，标题/strong/表头/选中项硬编码 #fff，在浅色底上会变成白字看不清（用户实测反馈）。跟随 app 明确选定的主题 (data-theme=light，由早注入脚本从 koichat-theme 读)切换调色板——不跟系统外观。旧版用 @media(prefers-color-scheme) 跟系统走，导致 app=深色+系统=浅色时本块仍触发、页面黑白混合(输入框变白)。代码块沿用 highlight.js 的 github-dark 主题，故

 保持深底、只固定其文字为浅色，不随 --text 变深。
   融合页 index.html 由 style.css 的 body[data-cc-embedded][data-theme=light]
   以更高优先级覆盖，故内嵌 cc 用主 app 调色板；本块只对独立 cc.html 生效。 */
[data-theme="light"] {
  --bg: #ffffff; --panel: #f2f2f4; --panel2: #e9e9ee; --border: #dcdce2;
  --border-strong: #b8b8c0;
  --text: #1c1c1e; --muted: #6a6a70;
}
[data-theme="light"] #cc-workspaces li.active,
[data-theme="light"] .cc-msg.assistant h1, [data-theme="light"] .cc-msg.assistant h2,
[data-theme="light"] .cc-msg.assistant h3, [data-theme="light"] .cc-msg.assistant h4,
[data-theme="light"] .cc-msg.assistant h5, [data-theme="light"] .cc-msg.assistant h6,
[data-theme="light"] .cc-msg.assistant strong,
[data-theme="light"] .cc-msg.assistant th { color: #111; }
[data-theme="light"] .cc-msg.assistant code { color: #b3116b; }
/* 代码块保持深色面板，固定浅色文字（highlight.js github-dark 高亮，另一套主题） */
[data-theme="light"] .cc-msg.assistant pre code { color: #ddd; }
/* 工具详情块跟随浅色主题：#453 原一律深底(#0c0c0c)+绿字，浅底 UI 上是个黑方块，
   浮在白底里显突兀（用户浅色实测）。此处给浅色单独覆盖——底/边/文用主题变量（本块
   已在 [data-theme=light] 作用域，--panel/--border/--text 都是浅色，#453「叠深底
   不可见」的顾虑只对深色默认成立，故不影响；用变量还能让内嵌页跟自己的浅色调色板走）；
   绿/红语法色无对应变量、保持字面（降饱和适配白底）。深色默认完全不动。
   一条 [data-theme=light] 同时管住独立 cc.html 与首页内嵌两个入口。 */
[data-theme="light"] .cc-tool-group-body { background: var(--panel); }
[data-theme="light"] .cc-tool-step + .cc-tool-step { border-top-color: var(--border); }
[data-theme="light"] .cc-tool-step-cmd { color: #1a7f37; }
[data-theme="light"] .cc-tool-step.error .cc-tool-step-cmd { color: #cf222e; }
[data-theme="light"] .cc-tool-step pre { color: var(--text); }
[data-theme="light"] .cc-tool-step pre.cc-tool-output.error { color: #cf222e; }

/* 对话正文搜索结果（issue #15 PR-B）：片段最多两行，空结果一行提示 */
#cc-workspaces li .cc-ws-snippet { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#cc-workspaces li.cc-ws-empty { padding: 10px 12px; font-size: 12px; color: var(--muted); cursor: default; }