/** Shopify CDN: Minification failed
Line 112:31 Unexpected "}"
Line 882:31 Unexpected "}"
**/
/* =========================================================
kb-sidebar-projects.css
Project-related styles (modal, sidebar items, project view)
Split from kb-sidebar.css for maintainability
========================================================= */
/* ★ anti-FOUC：分组渲染就绪前隐藏整个项目列表区(New Project 按钮 + #projectList)，
避免首帧闪平铺/独立文件夹。 在 阻塞渲染 → 此规则首帧 paint 前即生效。
reveal：renderProjectList 在 decorate 就位后给 .projects-section 加 .projects-ready(kb-projects.js)。 */
.projects-section:not(.projects-ready) .project-list { visibility: hidden; }
/* =========================
1. Project Modal
========================= */
/* ★层级梯子(2026-07-27 实测记录,别再各自拍脑袋加零):
.project-modal(本条,含改名/设置/分享/删除确认) 100002
← 必须【高于】全屏文件查看器,因为查看器的 ⋯ 里就能开改名弹窗
.kuribaby-preview-zoompop / .kuribaby-pdf-drawpop 100001 查看器内部浮层
.pdf-viewer-overlay 100000 全屏文件查看器
.msg-context-menu 999999 右键菜单(始终最高,本条不越过它)
原值 10000 比查看器低一个数量级 —— 从查看器里开改名弹窗时它整个被盖住(用户 2026-07-27)。
本元素 position:fixed + z-index 自成层叠上下文,内部的 backdrop/内容/下拉都随它一起上浮。 */
.project-modal {
position: fixed;
inset: 0;
z-index: 100002;
display: flex;
align-items: center;
justify-content: center;
}
/* 删除确认框是【弹窗之上的弹窗】:它总是由另一个弹窗叫出来的(品牌/agent 编辑器、项目设置…),
跟它们同为 .project-modal 就变成同层 —— 同层由 DOM 顺序决定,而 #deleteModal 是页面里写死的
元素(排在前)、那些编辑器是打开时 append 到 body 的(排在后),于是确认框被压在下面。
抬到 toast 那一层(100003 = 压过弹窗),所有"从弹窗里叫确认框"的地方一次全好,不必逐个打补丁。 */
#deleteModal { z-index: 100003; }
.project-modal[hidden] {
display: none;
}
.project-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}
.project-modal-content {
position: relative;
background: var(--color-bg-panel);
border-radius: var(--modal-radius); /* 全站弹窗窗口倒角单一源 */
width: 90%;
max-width: 400px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
animation: modalSlideIn 0.2s ease-out;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: scale(0.95) translateY(-10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.project-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--color-border);
}
.project-modal-title {
font-size: 16px;
font-weight: 500;
margin: 0;
color: var(--color-text);
}
.project-modal-close {
width: 28px;
height: 28px;
border: none;
background: transparent;
font-size: 20px;
color: var(--color-text-secondary);
cursor: pointer;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
}
/* ★ 关闭图标 svg 带 class .icon → 被 Prestige 主题 theme.css .icon{height:auto} 接管、把只靠 width 属性的图标压成 8×8(实测)。
显式钉回 14×14(特异性 0,1,1 > 主题 .icon 的 0,1,0)→ 与 Sources 等无 .icon 的关闭 × 同大小。 */
.project-modal-close svg { width: 14px; height: 14px; }
/* 触屏上放大到 36×36 / 图标 18:28px 的点按目标在手机上偏小,而同一批上拉 sheet 里
设置页那颗返回钮就是 36 —— 并排放着一大一小。改在真源上=全站弹窗关闭钮一起变,桌面维持 28。 */
@media (hover: none) and (pointer: coarse) {
.project-modal-close { width: 36px; height: 36px; }
.project-modal-close svg { width: 18px; height: 18px; }
html:not([data-input="touch"]) }
.project-modal-close:hover{
background: var(--color-bg-card);
color: rgba(0, 0, 0, 0.8);
}
.project-modal-close:active {
background: var(--color-bg-card);
color: rgba(0, 0, 0, 0.8);
}
.project-modal-body {
padding: 20px;
}
.project-modal-label {
display: block;
font-size: 13px;
font-weight: 500;
color: rgba(0, 0, 0, 0.6);
margin-bottom: 8px;
}
.project-modal-input {
width: 100%;
padding: 10px 12px;
font-size: 14px;
border: 1px solid var(--color-border); /* 输入框边线跟标准一致（原 var(--color-shadow) 偏重）*/
border-radius: 8px;
background: var(--color-bg-panel);
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
box-sizing: border-box;
}
.project-modal-input:focus {
border-color: #000;
}
html:not([data-input="touch"]) .project-modal-input:-webkit-autofill,
html:not([data-input="touch"]) .project-modal-input:-webkit-autofill:hover,
html:not([data-input="touch"]) .project-modal-input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0 1000px #fff inset;
-webkit-text-fill-color: #1a1a1a;
}
/* ★body 浮层(agent 编辑器等 appendChild(body))暗色靠 .dark-mode-active(挂 html),.dark-mode 选不到 → autofill 会露白底,补这条 */
html:not([data-input="touch"]) .dark-mode .project-modal-input:-webkit-autofill,
html:not([data-input="touch"]) .dark-mode .project-modal-input:-webkit-autofill:hover,
html:not([data-input="touch"]) .dark-mode .project-modal-input:-webkit-autofill:focus,
html:not([data-input="touch"]).dark-mode-active .project-modal-input:-webkit-autofill,
html:not([data-input="touch"]).dark-mode-active .project-modal-input:-webkit-autofill:hover,
html:not([data-input="touch"]).dark-mode-active .project-modal-input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0 1000px #2a2a2a inset;
-webkit-text-fill-color: rgba(255,255,255,0.9);
}
html:not([data-input="touch"]) .project-name-input-with-color:-webkit-autofill,
html:not([data-input="touch"]) .project-name-input-with-color:-webkit-autofill:hover,
html:not([data-input="touch"]) .project-name-input-with-color:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0 1000px #fff inset;
-webkit-text-fill-color: #1a1a1a;
}
html:not([data-input="touch"]) .dark-mode .project-name-input-with-color:-webkit-autofill,
html:not([data-input="touch"]) .dark-mode .project-name-input-with-color:-webkit-autofill:hover,
html:not([data-input="touch"]) .dark-mode .project-name-input-with-color:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0 1000px #2a2a2a inset;
-webkit-text-fill-color: rgba(255,255,255,0.9);
}
/* --- Project Color Picker --- */
.project-name-row {
display: flex;
align-items: center;
position: relative;
border: 1px solid var(--color-border); /* 边框颜色跟 Instructions/Memory 一致（原 var(--color-shadow) 偏重）；不改其他样式 */
border-radius: 8px;
background: var(--color-bg-panel);
transition: border-color 0.15s, box-shadow 0.15s;
}
.project-name-row:has(.project-name-input-with-color:focus) {
border-color: #000;
}
.project-name-input-with-color {
flex: 1;
min-width: 0;
border: none !important;
border-radius: 0 8px 8px 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.project-color-trigger {
width: 28px;
height: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 6px;
background: transparent;
cursor: pointer;
padding: 0 0 0 1px;
margin: 0 0 0 6px;
transition: background 0.15s;
}
.project-name-row-divider {
width: 1px;
align-self: stretch;
margin-left: 6px;
background: var(--color-border); /* 竖线跟框边线一致（原 var(--color-shadow) 偏重）*/
flex-shrink: 0;
}
html:not([data-input="touch"]) .project-color-trigger:hover{
background: var(--color-bg-card);
}
.project-color-trigger:active {
background: var(--color-bg-card);
}
.project-color-dropdown {
position: absolute;
top: 100%;
left: 0;
margin-top: 6px;
padding: 10px 12px;
background: var(--color-bg-panel);
border-radius: var(--menu-radius);
box-shadow: var(--menu-shadow);
z-index: 10;
}
.project-color-picker {
display: flex;
gap: 8px;
}
.project-color-dot {
width: 26px;
height: 26px;
border-radius: 50%;
border: none;
cursor: pointer;
padding: 0;
outline: none;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
position: relative;
}
.project-color-ring {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 21px;
height: 21px;
border-radius: 50%;
border: 2px solid #fff;
pointer-events: none;
}
.project-color-dot.active .project-color-ring {
display: block;
}
/* ★hover 只许原地(§5.3 第 6 条:禁 scale/抬升,反馈走颜色/亮度/边框)。
原来是 scale(1.1) —— 在侧栏看不出违规,进了查看器那条 overflow-x 的横滑货架就现形:
一轴设了 auto,另一轴的 visible 会被 CSS 自动改成 auto,涨出来的部分上下被裁掉。
改用同类色块早有的那套亮度微调(同 .studio-brand-swatch),不另发明第二种。 */
html:not([data-input="touch"]) .project-color-dot:hover{
filter: brightness(var(--press-hover));
}
.project-color-dot:active {
filter: brightness(var(--press-active));
}
.project-modal-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 16px 20px;
border-top: 1px solid var(--color-border);
}
.project-modal-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 12px; /* 竖向 7px：line-height:1 收紧后补回原按钮高度（≈26px） */
font-size: 12px;
font-weight: 500;
line-height: 1; /* 收紧行盒，让中文(CJK)字形垂直居中，不再被拉丁下降部顶高 */
border-radius: 999px;
cursor: pointer;
transition: background 0.15s, opacity 0.15s;
}
.project-modal-btn-cancel {
background: transparent;
border: 1px solid var(--color-shadow);
color: rgba(0, 0, 0, 0.7);
}
html:not([data-input="touch"]) .project-modal-btn-cancel:hover{
background: var(--color-bg-hover);
}
.project-modal-btn-cancel:active {
background: var(--color-bg-hover);
}
.project-modal-btn-primary {
background: #1a1a1a;
border: none;
color: #fff;
}
html:not([data-input="touch"]) .project-modal-btn-primary:hover{
opacity: 0.85;
}
.project-modal-btn-primary:active {
opacity: 0.85;
}
.project-modal-btn-primary:disabled {
background: var(--color-shadow);
color: rgba(255,255,255,0.6);
opacity: 1;
cursor: not-allowed;
}
/* ★block 档:胶囊被拉满整行时用(尺寸取 --btn-block-* 那对 token,数值不在这里)。
只改纵向内距与字号,横向内距/圆角/配色/hover/暗色仍是上面那套基准。
line-height 从基准的 1 放到 1.25:1 是为收紧行盒让 CJK 居中,而拉满宽的按钮
在窄屏会换行,两行用 1 会贴死。 */
.project-modal-btn-block {
width: 100%;
padding-top: var(--btn-block-pad-y);
padding-bottom: var(--btn-block-pad-y);
font-size: var(--btn-block-font);
line-height: 1.25;
text-align: center; /* 换行后第二行也居中(flex 只居中整块文本,不管行内对齐) */
}
.project-modal-btn-danger {
background: #dc3545;
border: none;
color: #fff;
}
html:not([data-input="touch"]) .project-modal-btn-danger:hover{
background: #c82333;
}
.project-modal-btn-danger:active {
background: #c82333;
}
/* Memory off modal */
.memory-off-modal-content {
max-width: 460px;
}
.memory-off-option {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
padding: 12px 0;
position: relative;
}
.memory-off-option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.memory-off-radio {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid rgba(0,0,0,0.3);
margin-top: 1px;
box-sizing: border-box;
position: relative;
}
.memory-off-option input[type="radio"]:checked + .memory-off-radio {
border-color: var(--color-text);
}
.memory-off-option input[type="radio"]:checked + .memory-off-radio::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-text);
}
.memory-off-option-border {
border-top: 1px solid var(--color-border);
}
.memory-off-option-title {
font-weight: 500;
font-size: 14px;
color: var(--color-text);
}
.memory-off-option-desc {
font-size: 13px;
color: #666;
margin-top: 2px;
line-height: 1.4;
}
/* Delete Modal Message */
.delete-modal-message {
font-size: 14px;
color: #4a4a4a;
line-height: 1.5;
margin: 0;
}
/* Delete Project Footer — two action buttons */
.delete-project-footer {
gap: 8px;
}
/* ── Alert Modal（单按钮信息提示，复用 project-modal 容器，但布局居中） ── */
.alert-modal-body {
text-align: center;
padding: 28px 20px 16px;
}
.alert-modal-title {
font-size: 17px;
font-weight: 500;
color: #111;
margin: 0 0 8px;
}
.alert-modal-message {
font-size: 14px;
color: rgba(0, 0, 0, 0.55);
line-height: 1.5;
margin: 0;
}
.alert-modal-footer {
justify-content: center;
border-top: none;
padding: 8px 20px 20px;
}
.alert-modal-footer .project-modal-btn-primary {
min-width: 120px;
padding: 8px 24px;
}
/* 暗色 */
.dark-mode .alert-modal-title { color: rgba(255,255,255,0.92); }
.dark-mode .alert-modal-message { color: rgba(255,255,255,0.55); }
/* Move to Project List */
.move-to-project-list {
max-height: 300px;
overflow-y: auto;
}
/* .move-to-project-list 滚动条走 .kuribaby-scroll 模板（元素已加该 class） */
.move-to-project-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
border: none;
background: transparent;
width: 100%;
text-align: left;
font-size: 14px;
color: var(--color-text);
}
html:not([data-input="touch"]) .move-to-project-item:hover{
background: var(--color-bg-hover);
}
.move-to-project-item:active {
background: var(--color-bg-hover);
}
.move-to-project-item .project-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: rgba(0, 0, 0, 0.5);
}
.move-to-project-empty {
text-align: center;
padding: 24px;
color: var(--color-text-secondary);
font-size: 14px;
}
/* =========================
2. Project Items in Sidebar
========================= */
.project-items-list {
display: flex;
flex-direction: column;
gap: 2px;
}
#btnNewProject {
color: var(--sidebar-text-main);
}
.project-sidebar-item {
display: flex;
align-items: center;
gap: 5px;
width: 100%;
border: none;
background: transparent;
height: 40px;
padding: 0 6px 0 14px; /* 右 12→6：三点中心右移到距右缘 30px、与顶部 toggle 对齐；横条宽=body padding 不变 */
border-radius: 8px;
cursor: pointer;
text-decoration: none;
color: var(--sidebar-text-main);
font-weight: 400;
transition: background 0.15s;
position: relative;
touch-action: manipulation; /* Prevent double-tap delay on touch devices */
}
/* Only apply hover on devices that support it (prevents double-tap on mobile) */
html:not([data-input="touch"]) .project-sidebar-item:hover{
background: var(--sidebar-hover);
}
/* Touch feedback on mobile */
.project-sidebar-item:active {
background: var(--sidebar-hover);
}
.project-sidebar-item.active {
background: var(--sidebar-active);
}
/* ── 拖动排序 ── */
/* 常驻：禁原生 拖影 + 禁选中 + 禁 iOS 长按菜单
（手机长按进入拖拽，若可选中会先触发浏览器文字选择的蓝色高亮） */
.project-sidebar-item {
-webkit-user-drag: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/* 排序进行中：兄弟行平滑让位（transform 过渡） */
.projects-reordering .project-sidebar-item {
transition: transform 0.18s ease, background 0.15s;
}
/* 被拖起的行：跟手（无过渡）、克制地微抬起（实色底 + 轻阴影） */
.projects-reordering .project-sidebar-item.project-item-dragging {
transition: none;
z-index: 10;
background: var(--sidebar-hover);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
cursor: grabbing;
}
.dark-mode .projects-reordering .project-sidebar-item.project-item-dragging {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
/* 分组拖动的插入位置线：fixed 覆盖层，不进文档流 → 零布局打搅 */
.project-drop-line {
position: fixed;
height: 1px;
background: rgba(0, 0, 0, 0.32);
z-index: 9999;
pointer-events: none;
display: none;
}
/* 挂在侧栏，用 的 .dark-mode-active 切暗色 */
.dark-mode-active .project-drop-line { background: rgba(255, 255, 255, 0.4); }
.project-drop-line.show { display: block; }
/* ── 一级分组 ── */
/* 折叠隐藏的行 */
.project-row-collapsed { display: none !important; }
/* Projects 标题右侧三点：复用 .project-action-btn(24×24)，跟别处三点同尺寸；
顶到最右 + 去掉 .sidebar-section-header button 的默认 4px padding */
.sidebar-section-header .project-action-btn {
margin-left: auto;
padding: 0;
flex-shrink: 0;
}
/* 分组表头 */
.project-group-header {
display: flex;
align-items: center;
gap: 5px;
height: 40px; /* = 子项目行 .project-sidebar-item 高度，行间距跟子项目一致 */
/* 左 15px = 原 6px + 曾经那个占位元素的净宽 4px + 它与文件夹图标之间的 5px gap。
★这 9px 以前靠一个空 span 撑着(更早还是个隐形 chevron),现在直接写进 padding ——
DOM 里没有多余元素,改起点只改这一个数。右 12→6:三点对齐顶部 toggle(中心距右缘 30px)。 */
padding: 0 6px 0 15px;
border-radius: 8px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
position: relative;
}
html:not([data-input="touch"]) .project-group-header:hover{ background: var(--sidebar-hover); }
.project-group-header:active { background: var(--sidebar-hover); }
/* 组的白色文件夹图标（跟全站图标同 22px gutter）*/
.project-group-folder {
width: 22px; height: 22px; /* = 子项目 .sidebar-item-icon 真实值(22px !important) */
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
color: var(--sidebar-text-main); /* 白（暗色下亮/亮色下深，自适应主题）*/
}
.project-group-folder svg { width: 22px; height: 22px; }
.project-group-name {
font-size: 14px; /* 字号仍跟 Projects 一致 */
font-weight: 500; /* 比 Projects 标题(400)重一档 → 文件夹标题感 */
color: var(--sidebar-text-main); /* 用主文字色(比 Projects 的浅色 sub 亮)→ 跟"区块标签"分出层级 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 三点菜单区：靠右；按钮/菜单复用 .project-action-btn / .project-action-menu / .project-menu-item 基准 */
.project-group-actions { margin-left: auto; flex-shrink: 0; position: relative; }
/* 三点：桌面悬停才显、触屏常驻、菜单打开时保持——跟项目行 .project-item-actions 完全一致 */
.project-group-actions,
.projects-section .sidebar-section-header .project-action-btn,
#studioSidebarBody .sidebar-section-header .project-action-btn { opacity: 0; transition: opacity 0.15s; }
html:not([data-input="touch"]) .project-group-header:hover .project-group-actions,
html:not([data-input="touch"]) .project-group-header:has(.project-action-menu.active) .project-group-actions,
html:not([data-input="touch"]) .projects-section .sidebar-section-header:hover .project-action-btn,
html:not([data-input="touch"]) .projects-section .sidebar-section-header:has(.project-action-menu.active) .project-action-btn,
html:not([data-input="touch"]) #studioSidebarBody .sidebar-section-header:hover .project-action-btn,
html:not([data-input="touch"]) #studioSidebarBody .sidebar-section-header:has(.project-action-menu.active) .project-action-btn{ opacity: 1; }
/* 菜单打开时：三点按钮保持高亮 + 组表头保持背景（跟项目行 :has() 一致）*/
.project-group-actions:has(.project-action-menu.active) .project-action-btn,
.projects-section .sidebar-section-header:has(.project-action-menu.active) .project-action-btn,
#studioSidebarBody .sidebar-section-header:has(.project-action-menu.active) .project-action-btn {
background: rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.7);
}
.project-group-header:has(.project-action-menu.active) { background: var(--sidebar-hover); }
.dark-mode .project-group-actions:has(.project-action-menu.active) .project-action-btn,
.dark-mode .projects-section .sidebar-section-header:has(.project-action-menu.active) .project-action-btn,
.dark-mode #studioSidebarBody .sidebar-section-header:has(.project-action-menu.active) .project-action-btn {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.7);
}
/* 空组拖入提示 */
.project-group-empty {
font-size: 12px;
color: var(--sidebar-text-main);
opacity: var(--dim);
padding: 6px 12px 8px 30px;
}
.project-sidebar-item .sidebar-item-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.project-sidebar-item .sidebar-item-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
font-size: 14px;
}
/* See more / See less button */
.project-see-more-btn {
display: flex;
align-items: center;
gap: 5px;
width: 100%;
border: none;
background: transparent;
height: 36px;
padding: 0 12px 0 14px;
border-radius: 8px;
cursor: pointer;
color: var(--sidebar-text-sub);
font-size: 13px;
font-family: inherit;
transition: background 0.15s;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
html:not([data-input="touch"]) .project-see-more-btn:hover{
background: var(--sidebar-hover);
}
.project-see-more-btn:active {
background: var(--sidebar-hover);
}
.project-see-more-dots {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: inherit;
}
.project-see-more-dots svg {
width: 18px;
height: 18px;
}
/* Page-number pagination (project chat list) — 箭头 + 页码 + 省略号 */
.project-pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 4px;
width: 100%;
padding: 12px 0 4px;
}
.project-page-btn,
.project-page-arrow {
display: flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 6px;
border: none;
background: transparent;
color: var(--sidebar-text-sub);
font-family: inherit;
font-size: 13px;
font-weight: 400;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Arrow box must match the number box (32×32). The SVG is 24px, so the shared
horizontal padding would push the arrow past min-width:32px and make its hover
background wider than the numbers'. Drop the side padding to collapse it back. */
.project-page-arrow {
padding: 0;
}
html:not([data-input="touch"]) .project-page-btn:not(.is-active):hover,
html:not([data-input="touch"]) .project-page-arrow:not(:disabled):hover{
background: var(--sidebar-hover);
}
.project-page-btn:not(.is-active):active,
.project-page-arrow:not(:disabled):active {
background: var(--sidebar-hover);
}
.project-page-btn.is-active {
color: #000;
font-weight: 500;
cursor: default;
}
.dark-mode .project-page-btn.is-active {
color: #fff;
}
.project-page-arrow:disabled {
opacity: 0.35;
cursor: default;
}
.project-page-arrow svg {
width: 24px;
height: 24px;
display: block;
}
.project-page-ellipsis {
display: flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 32px;
color: var(--sidebar-text-sub);
font-size: 13px;
user-select: none;
}
/* =========================
2b. Project Dropdown List (Desktop only)
========================= */
.project-dropdown-list {
display: block;
padding: 4px 0 4px 31px;
max-height: 280px; /* 项目内聊天太多时限高，内部滚动，不再撑爆侧栏/顶到上面 */
overflow-y: auto;
/* 滚动条走 .kuribaby-scroll 模板（元素已加该 class） */
}
/* 分组视图：组内项目往右缩进一档 —— 项目彩色文件夹(原 17px)移到 30px，明显落在
组白文件夹(15px)右边，一眼看出"项目在这个文件夹里"。内联聊天下拉同步右移(31→44)，
保持"聊天嵌在项目里"的层级关系。平铺(无分组)时不加 .projects-grouped=零缩进。 */
.projects-grouped .project-sidebar-item { padding-left: 30px; }
.projects-grouped .project-dropdown-list { padding-left: 44px; }
.project-dropdown-list[hidden] {
display: none;
}
.project-dropdown-chat {
display: flex;
align-items: center;
padding: 6px 12px;
font-size: 14px;
color: var(--sidebar-text-main);
text-decoration: none;
cursor: pointer;
border-radius: 6px;
transition: background 0.15s;
position: relative;
}
.project-dropdown-chat-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
.project-dropdown-chat-actions {
flex-shrink: 0;
display: flex;
align-items: center;
margin-left: auto;
opacity: 0;
transition: opacity 0.15s;
}
html:not([data-input="touch"]) .project-dropdown-chat:hover .project-dropdown-chat-actions,
html:not([data-input="touch"]) .project-dropdown-chat .project-dropdown-chat-actions:has(.sidebar-action-menu.active){
opacity: 1;
}
.project-dropdown-chat-dots {
width: 24px;
height: 24px;
background: none;
border: none;
cursor: pointer;
border-radius: 6px;
color: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
}
.project-dropdown-chat-dots svg {
width: 16px;
height: 16px;
color: inherit;
}
html:not([data-input="touch"]) .project-dropdown-chat-dots:hover{
background: rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.7);
}
.project-dropdown-chat-dots:active {
background: rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.7);
}
@media (hover: none) and (pointer: coarse) {
.project-dropdown-chat-actions {
opacity: 1;
}
html:not([data-input="touch"]) }
.project-dropdown-chat:hover{
background: var(--sidebar-hover);
}
.project-dropdown-chat:active {
background: var(--sidebar-hover);
}
.project-dropdown-chat.active {
background: var(--sidebar-active);
}
.project-dropdown-empty {
padding: 8px 12px;
font-size: 14px;
color: var(--color-text-secondary);
font-style: italic;
}
/* Project Item Actions Menu */
.project-item-actions {
position: relative;
display: flex;
align-items: center;
opacity: 1; /* Default visible on touch devices */
transition: opacity 0.15s;
margin-left: auto;
flex-shrink: 0;
}
/* Only hide by default on devices with true hover (desktop with mouse) */
.project-item-actions {
opacity: 0;
}
html:not([data-input="touch"]) .project-sidebar-item:hover .project-item-actions{
opacity: 1;
}
/* Always show when menu is open */
.project-item-actions:has(.project-action-menu.active) {
opacity: 1;
}
/* Shared action button styles (project + chat history) */
.project-action-btn,
.chat-history-action-btn {
width: 24px;
height: 24px;
border: none;
background: transparent;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
transition: background 0.15s, color 0.15s;
}
html:not([data-input="touch"]) .project-action-btn:hover,
html:not([data-input="touch"]) .chat-history-action-btn:hover{
background: rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.7);
}
.project-action-btn:active,
.chat-history-action-btn:active {
background: rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.7);
}
.dark-mode .project-action-btn:active,
.dark-mode .chat-history-action-btn:active {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.7);
}
/* Keep hover effect when menu is open */
.project-item-actions:has(.project-action-menu.active) .project-action-btn {
background: rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.7);
}
.dark-mode .project-item-actions:has(.project-action-menu.active) .project-action-btn {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.7);
}
/* Keep hover effect on entire row when menu is open */
.project-sidebar-item:has(.project-action-menu.active) {
background: var(--sidebar-hover);
}
.project-action-menu {
position: fixed;
min-width: 160px;
max-width: calc(100vw - 16px);
background: var(--color-bg-panel);
border-radius: 8px;
box-shadow: var(--menu-shadow);
padding: 4px 0;
z-index: 9999;
display: none;
}
.project-action-menu.active {
display: block;
}
.project-menu-item {
padding: 8px 12px;
font-size: 14px;
color: var(--color-text);
cursor: pointer;
transition: background 0.15s;
display: flex;
align-items: center;
gap: 8px;
}
html:not([data-input="touch"]) .project-menu-item:hover{
background: rgba(0, 0, 0, 0.05);
}
.project-menu-item:active {
background: rgba(0, 0, 0, 0.05);
}
.project-menu-item--danger {
color: #dc3545;
}
html:not([data-input="touch"]) .project-menu-item--danger:hover{
background: rgba(220, 53, 69, 0.08);
}
.project-menu-item--danger:active {
background: rgba(220, 53, 69, 0.08);
}
/* =========================
3. Project View Page
========================= */
.project-view-page {
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
background: var(--color-bg-page);
overflow-y: auto;
}
/* .project-view-page 滚动条走 .kuribaby-scroll 模板（元素已加该 class） */
.project-view-page[hidden] {
display: none;
}
/* Project Content Container */
.project-view-content {
width: 100%;
display: flex;
flex-direction: column;
flex: 1;
}
/* Project Title Row - matches input-wrapper width */
.project-title-row {
display: flex;
align-items: center;
gap: 8px;
padding: 200px 0 20px 16px; /* 200px top, 20px bottom, 16px left offset */
width: 85%;
max-width: 700px;
margin: 0 auto;
box-sizing: border-box;
}
.project-title-icon {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #000;
flex-shrink: 0;
}
.project-view-title {
font-family: var(--heading-font-family);
font-weight: var(--heading-font-weight);
font-style: var(--heading-font-style);
letter-spacing: var(--heading-letter-spacing);
text-transform: var(--heading-text-transform);
font-size: var(--text-h3);
line-height: 1.6;
margin: 0;
color: var(--color-text);
}
/* Project Composer - reuses existing composer-bar styles */
.project-composer-bar {
position: relative;
flex-shrink: 0;
margin-bottom: 20px;
}
/* Project placeholder styling */
.project-placeholder {
position: absolute;
left: 52px; /* Account for + button */
bottom: 13px;
color: var(--color-text-secondary);
pointer-events: none;
font-size: 14px;
}
/* Hide placeholder when input has content */
.project-composer-bar .chat-input:not(:placeholder-shown) ~ .project-placeholder,
.project-composer-bar .chat-input:focus ~ .project-placeholder {
display: none;
}
/* Toolbar row above the chat list — holds the sort dropdown, right-aligned.
宽度与 .project-chat-list 对齐，使排序下拉右缘落在聊天列表右缘（镜像图片页 toolbar）。
下拉本体样式复用 .images-filter*（单一基准），这里只负责定位容器。 */
.project-toolbar-row {
width: calc(85% - 12px);
max-width: calc(700px - 12px);
margin: 0 auto 2px;
display: flex;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
}
/* 排序方向箭头（复用 .images-filter-check 槽位放 chevron）：
desc = 向下，asc = 旋转 180° 向上。作用域限定在 toolbar 内，绝不影响图片页 filter。 */
.project-toolbar-row .images-filter-check svg { transition: transform 0.15s ease; }
.project-toolbar-row .images-filter-check.proj-sort-asc svg { transform: rotate(180deg); }
/* Project Chat List - matches input-wrapper width */
.project-chat-list {
min-height: 0;
width: calc(85% - 12px); /* 6px less on each side */
max-width: calc(700px - 12px);
margin: 0 auto;
padding-bottom: 100px; /* 底部留白 */
}
.project-chat-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px 10px 8px;
cursor: pointer;
transition: background 0.15s;
border-radius: 8px;
position: relative;
text-decoration: none;
color: inherit;
}
html:not([data-input="touch"]) .project-chat-item:hover{
background: rgba(0, 0, 0, 0.02);
}
.project-chat-item:active {
background: rgba(0, 0, 0, 0.02);
}
/* 方向A：项间分隔线走 ::before 直线，不被 border-radius 勾成圆角端；border-radius 只作用于 hover/active 圆角高亮 */
.project-chat-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--color-border);
pointer-events: none;
}
.project-chat-item:first-child::before {
display: none;
}
.project-chat-icon {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--color-bg-hover);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-text-tertiary);
}
.project-chat-icon svg {
width: 22px;
height: 22px;
}
.project-chat-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.project-chat-title {
font-size: 13px;
font-weight: 500;
color: var(--color-text);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.project-chat-summary {
font-size: 10px;
line-height: 14px;
min-height: 14px; /* ★ 空摘要也预留一行 → 项目列表所有行等高（有的会话无 user 消息摘要为空）*/
color: rgba(0, 0, 0, 0.45);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.project-chat-right {
display: flex;
align-items: center;
margin-left: 4px;
flex-shrink: 0;
position: relative;
}
.project-chat-date {
font-size: 11px;
color: rgba(0, 0, 0, 0.45);
white-space: nowrap;
}
.project-chat-action-btn svg {
width: 16px;
height: 16px;
color: inherit;
}
.project-chat-action-btn {
width: 24px;
height: 24px;
border: none;
background: transparent;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: rgba(0, 0, 0, 0.4);
transition: background 0.15s, color 0.15s, opacity 0.2s;
position: absolute;
right: 0;
opacity: 0;
}
.project-chat-action-menu {
display: none;
position: fixed;
background: var(--color-bg-panel);
box-shadow: var(--menu-shadow);
border-radius: var(--menu-radius);
padding: 4px;
z-index: 9999;
min-width: 160px;
max-width: calc(100vw - 32px); /* Prevent overflow on mobile */
}
.project-chat-action-menu.active {
display: block;
}
.project-chat-menu-item {
padding: 8px 12px;
font-size: 14px;
color: var(--color-text);
cursor: pointer;
border-radius: var(--radius-menu-row);
white-space: normal; /* Allow wrapping for long text */
word-break: break-word;
position: relative;
display: flex;
align-items: center;
gap: 8px;
}
html:not([data-input="touch"]) .project-chat-menu-item:hover{
background: var(--color-bg-hover);
}
.project-chat-menu-item:active {
background: var(--color-bg-hover);
}
.project-chat-menu-item.text-red {
color: #d32f2f;
}
.project-chat-menu-item.text-red .action-icon,
.project-chat-menu-item.text-red .action-icon svg {
color: #d32f2f;
stroke: #d32f2f;
}
html:not([data-input="touch"]) .project-chat-menu-item.text-red:hover{
background: rgba(211, 47, 47, 0.08);
}
.project-chat-menu-item.text-red:active {
background: rgba(211, 47, 47, 0.08);
}
.project-chat-menu-item .submenu-arrow {
margin-left: 8px;
color: var(--color-text-secondary);
}
.project-chat-submenu {
display: none;
position: absolute;
left: 100%;
top: 0;
background: var(--color-bg-panel);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-radius: 8px;
padding: 4px;
min-width: 120px;
margin-left: 4px;
}
html:not([data-input="touch"]) .project-chat-menu-item.has-submenu:hover .project-chat-submenu{
display: block;
}
/* Desktop hover effects for project chat items */
html:not([data-input="touch"]) .project-chat-item:hover .project-chat-date{
opacity: 0;
}
html:not([data-input="touch"]) .project-chat-item:hover .project-chat-action-btn{
opacity: 1;
}
html:not([data-input="touch"]) .project-chat-action-btn:hover{
background: rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.7);
}
/* Keep visible when menu is open (all devices) */
.project-chat-item:has(.project-chat-action-menu.active) .project-chat-date {
opacity: 0;
}
.project-chat-item:has(.project-chat-action-menu.active) .project-chat-action-btn {
opacity: 1;
background: rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.7);
}
.dark-mode .project-chat-item:has(.project-chat-action-menu.active) .project-chat-action-btn {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.7);
}
/* Mobile: hide date, always show dots */
@media (hover: none) and (pointer: coarse) {
.project-chat-date {
display: none !important;
}
.project-chat-action-btn {
position: relative !important;
opacity: 1 !important;
}
.project-chat-action-btn:active {
background: rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.7);
}
.dark-mode .project-chat-action-btn {
color: rgba(255, 255, 255, 0.35) !important;
}
.dark-mode .project-chat-action-btn:active {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.7) !important;
}
/* Submenu opens to the left on touch devices */
.project-chat-submenu {
left: auto;
right: 100%;
top: 0;
margin-left: 0;
margin-right: 4px;
}
}
.project-chat-empty {
text-align: center;
padding: 48px 0;
color: var(--color-text-secondary);
}
.project-chat-empty-icon {
width: 48px;
height: 48px;
margin: 0 auto 16px;
color: rgba(0, 0, 0, 0.15);
}
.project-chat-empty-icon svg {
width: 100%;
height: 100%;
}
.project-chat-empty-text {
font-size: 14px;
margin: 0;
line-height: 1.6;
}
/* Mobile Responsive */
@media (max-width: 768px), (max-height: 500px) {
.project-title-row {
padding: 120px 0 16px 21px; /* 120px top, 16px bottom, 21px left offset */
width: 90%;
}
.project-chat-list {
width: calc(90% - 28px); /* 14px less on each side (was 6px, +8px each side) */
padding-bottom: 60px; /* 底部留白（移动端） */
}
.project-toolbar-row {
width: calc(90% - 28px); /* 与移动端聊天列表同宽，右缘对齐 */
max-width: none;
}
}
/* =========================
4. Finalized Chat State in Project View
========================= */
.project-chat-item.is-finalized .project-chat-content,
.project-chat-item.is-finalized .project-chat-right,
.project-chat-item.is-finalized .project-chat-icon {
opacity: var(--dim);
}
.project-chat-item.is-finalized .project-chat-title::after {
content: "· Finalised";
font-size: 10px;
font-weight: 400;
color: var(--color-text-tertiary);
margin-left: 6px;
}
/* =========================
5. Dark Mode
========================= */
.dark-mode .project-chat-action-btn {
color: rgba(255,255,255,0.35);
}
html:not([data-input="touch"]) .dark-mode .project-chat-action-btn:hover{
color: rgba(255,255,255,0.7);
background: rgba(255,255,255,0.08);
}
.dark-mode .project-chat-action-btn:active {
color: rgba(255,255,255,0.7);
background: rgba(255,255,255,0.06);
}
.dark-mode .project-chat-action-menu,
.dark-mode .project-chat-submenu {
border-color: rgba(255,255,255,0.1);
}
.dark-mode .project-chat-menu-item {
color: rgba(255,255,255,0.85);
}
html:not([data-input="touch"]) .dark-mode .project-chat-menu-item:hover{
background: rgba(255,255,255,0.06);
}
.dark-mode .project-chat-menu-item:active {
background: rgba(255,255,255,0.06);
}
.dark-mode .project-chat-menu-item.text-red {
color: #ef5350;
}
.dark-mode .project-chat-menu-item.text-red .action-icon,
.dark-mode .project-chat-menu-item.text-red .action-icon svg {
color: #ef5350;
stroke: #ef5350;
}
html:not([data-input="touch"]) .dark-mode .project-chat-menu-item.text-red:hover{
background: rgba(239, 83, 80, 0.1);
}
.dark-mode .project-chat-menu-item.text-red:active {
background: rgba(239, 83, 80, 0.1);
}
.dark-mode .project-chat-menu-item .submenu-arrow {
color: rgba(255,255,255,0.4);
}
/* --- Project Modal --- */
.dark-mode .project-modal-content {
background: #212121;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.dark-mode .project-modal-header {
border-bottom-color: var(--color-border);
}
.dark-mode .project-modal-close {
color: rgba(255,255,255,0.5);
}
html:not([data-input="touch"]) .dark-mode .project-modal-close:hover{
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.8);
}
.dark-mode .project-modal-close:active {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.8);
}
.dark-mode .project-modal-label {
color: rgba(255,255,255,0.5);
}
.dark-mode .project-modal-input {
color: rgba(255,255,255,0.9);
}
.dark-mode .project-modal-input::placeholder {
color: rgba(255,255,255,0.35);
}
.dark-mode .project-modal-input:focus {
border-color: rgba(255,255,255,0.4);
}
.dark-mode .project-name-row:has(.project-name-input-with-color:focus) {
border-color: rgba(255,255,255,0.4);
}
html:not([data-input="touch"]) .dark-mode .project-color-trigger:hover{
background: rgba(255,255,255,0.08);
}
.dark-mode .project-color-trigger:active {
background: rgba(255,255,255,0.08);
}
.dark-mode .project-color-dropdown {
border-color: var(--color-border);
}
.dark-mode .project-color-ring {
border-color: #000;
}
.dark-mode .project-modal-footer {
border-top-color: var(--color-border);
}
.dark-mode .project-modal-btn-cancel {
color: rgba(255,255,255,0.7);
}
html:not([data-input="touch"]) .dark-mode .project-modal-btn-cancel:hover{
background: rgba(255,255,255,0.06);
}
.dark-mode .project-modal-btn-cancel:active {
background: rgba(255,255,255,0.06);
}
.dark-mode .project-modal-btn-primary {
background: #fff;
color: #1a1a1a;
}
html:not([data-input="touch"]) .dark-mode .project-modal-btn-primary:hover{
opacity: 0.9;
}
.dark-mode .project-modal-btn-primary:active {
opacity: 0.9;
}
.dark-mode .project-modal-btn-primary:disabled {
background: rgba(255,255,255,0.15);
color: rgba(255,255,255,0.3);
opacity: 1;
}
.dark-mode .project-modal-btn-danger {
background: #ef5350;
}
html:not([data-input="touch"]) .dark-mode .project-modal-btn-danger:hover{
background: #e53935;
}
.dark-mode .project-modal-btn-danger:active {
background: #e53935;
}
.dark-mode .project-modal-backdrop {
background: rgba(0,0,0,0.6);
}
.dark-mode .memory-off-radio,
.dark-mode-active .memory-off-radio {
border-color: rgba(255,255,255,0.35);
}
.dark-mode .memory-off-option input[type="radio"]:checked + .memory-off-radio,
.dark-mode-active .memory-off-option input[type="radio"]:checked + .memory-off-radio {
border-color: #fff;
}
.dark-mode .memory-off-option input[type="radio"]:checked + .memory-off-radio::after,
.dark-mode-active .memory-off-option input[type="radio"]:checked + .memory-off-radio::after {
background: #fff;
}
.dark-mode .memory-off-option-border,
.dark-mode-active .memory-off-option-border {
border-top-color: var(--color-border);
}
.dark-mode .memory-off-option-desc,
.dark-mode-active .memory-off-option-desc {
color: rgba(255,255,255,0.5);
}
/* Auto-manage Off Confirmation Modal */
.auto-manage-off-content { max-width: 420px; }
.auto-manage-off-body { padding: 24px 20px 16px; }
.auto-manage-off-title {
font-size: 16px; font-weight: 500; margin: 0 0 8px; color: var(--color-text);
}
.auto-manage-off-desc {
font-size: 14px; color: #666; line-height: 1.5; margin: 0;
}
.dark-mode .auto-manage-off-desc,
.dark-mode-active .auto-manage-off-desc {
color: rgba(255,255,255,0.5);
}
.dark-mode .delete-modal-message {
color: rgba(255,255,255,0.6);
}
html:not([data-input="touch"]) .dark-mode .move-to-project-item:hover{
background: rgba(255,255,255,0.06);
}
.dark-mode .move-to-project-item:active {
background: rgba(255,255,255,0.06);
}
.dark-mode .move-to-project-item .project-icon {
color: rgba(255,255,255,0.5);
}
/* --- Project Sidebar Items --- */
.dark-mode .project-menu-item {
color: rgba(255,255,255,0.85);
}
html:not([data-input="touch"]) .dark-mode .project-menu-item:hover{
background: rgba(255,255,255,0.06);
}
.dark-mode .project-menu-item:active {
background: rgba(255,255,255,0.06);
}
.dark-mode .project-menu-item--danger {
color: #ef5350;
}
html:not([data-input="touch"]) .dark-mode .project-menu-item--danger:hover{
background: rgba(239,83,80,0.1);
}
.dark-mode .project-menu-item--danger:active {
background: rgba(239,83,80,0.1);
}
/* --- Project View Page --- */
.dark-mode .project-view-page { background: #212121; }
.dark-mode .project-title-icon {
color: #fff;
}
.dark-mode .project-chat-summary {
color: rgba(255,255,255,0.4);
}
.dark-mode .project-chat-date {
color: rgba(255,255,255,0.4);
}
.dark-mode .project-chat-empty-icon {
color: rgba(255,255,255,0.15);
}
html:not([data-input="touch"]) .dark-mode .project-chat-item:hover{
background: rgba(255,255,255,0.04);
}
.dark-mode .project-chat-item:active {
background: rgba(255,255,255,0.04);
}