/* ai-chat-studio.css - the Studio shell: page frame, three columns, the sidebar's brand cards and portfolio section.
   One of the Studio stylesheet's 7 parts (part 1). They are contiguous slices of what used to be one
   file, and ai-chat-styles.liquid loads them in this order - the cascade depends on it, so a new part goes at the
   end of its own section, never between two others (gate: scripts/ui/studio-css-parts.test.mjs). */
/* ai-chat-studio.css — Studio 页（Collection 工作台 · 三栏分屏）FE-2 骨架
 * ★ 颜色/hover/头像全走 ai-chat-base.css 的单一真源 token（--color-bg-page/--color-bg-hover/--color-bg-card/
 *   --color-text/--color-text-secondary/--color-border/--avatar-bg/--avatar-fg）。token 自适应暗色 → 几乎不写 .dark-mode 覆盖。
 * 参考无痕的【布局形式】：圆角窗口 + 间隙 + 无可见分割条（间隙里拖）；颜色用正常主题(非无痕对比色)。
 * Studio 特有的非重复量才本地定义（窗口圆角/间隙/分屏比例）。
 */

:root {
  --studio-window-radius: 27px;   /* Studio 圆角窗口(特有,非全站重复) */
  /* 缝隙已收编为全站唯一真源 --duo-window-gap(ai-chat-base.css :root),与无痕模式共用;本地不再另立一份 */
}

/* ── 最外层：正常主题背景 + 三栏 ── */
.studio-view-page {
  position: absolute;
  inset: 0;
  display: flex;
  gap: var(--duo-window-gap);
  padding: var(--duo-window-gap);
  box-sizing: border-box;
  background: var(--color-bg-page);
  overflow: hidden;
}
.studio-view-page[hidden] { display: none; }

/* 三个窗口：主题背景 + 边框勾圆角轮廓（不靠深浅对比区分） */
.studio-org-chart,
.studio-meeting {
  background: var(--color-bg-page);
  border: 1px solid var(--color-border);
  border-radius: var(--studio-window-radius);
  overflow: hidden;
}
/* 会议室 = 聊天,暗色对齐主聊天会话区 #212121(= .dark-mode .ai-design-section,比 --color-bg-page #1a1a1a 略亮),整块均匀无接缝;亮色仍 #fff */
.dark-mode .studio-meeting { background-color: #212121; }

/* ── 栏1(侧栏)= 复用现有 chat-sidebar(不自建)。Studio 视图时 chat-sidebar 加 .studio-active:
   隐藏常规内容(Primary nav / Projects / Chats),显示 #studioSidebarBody(显隐由 studio.js 控制)。
   折叠/hover/视觉/logo→主页 全部天然继承现有 sidebar。 ── */
.chat-sidebar.studio-active > .sidebar-body > .sidebar-nav-list,
.chat-sidebar.studio-active > .sidebar-body > .projects-section,
.chat-sidebar.studio-active > .sidebar-body > .history-section { display: none; }
/* Studio 视图隐藏聊天顶栏(chat-header)——Studio 是独立工作台,不需要聊天标题/版本选择器/菜单;顺带解决 header 遮挡 */
.chat-sidebar.studio-active ~ .chat-main .chat-header { display: none; }

.studio-empty, .studio-loading {
  font-size: 13px; color: var(--color-text-secondary); padding: 12px 6px;
}
/* 空态第二行(如"东西还在库里"):比主行更轻,别抢主行那句"你该做什么"的话。
   用 opacity 不另设颜色 —— 暗色自动跟着走 */
.studio-empty-sub { display: block; margin-top: 4px; opacity: 0.7; }
/* 危险色只用全站那一个(基准在 ai-chat-base.css);别在这另起一个红,暗色底上闷的那些尤其糊 */
.studio-error { color: var(--color-danger); }
/* 读失败时的那一行占整行:这些段是固定列宽自动铺满的网格,不跨列的话文字被挤成一竖条
   (owner 2026-09-17:空回收站那句在 80px 的瓦片列里断成"回收站是空/的。")。
   任何往这类网格里放 .studio-empty 的地方都要进这张单子 —— 网格的列宽不是给一句话用的 */
.studio-brand-grid > .studio-empty,
.studio-template-grid > .studio-empty,
.duo-viewer-overview-grid > .studio-empty { grid-column: 1 / -1; }

/* 段折叠:点段头 → toggle .collapsed → 隐藏该段内容(四段一致:Collection/Brand/Agent/Template) */
.studio-collection-section.collapsed .sidebar-nav-list { display: none; }
.studio-agent-section.collapsed .studio-agent-grid { display: none; }
/* ── 品牌卡(app 图标式):sidebar Brand 段网格 + 编辑器(契约 §2C) ── */
.studio-brand-section.collapsed .studio-brand-grid { display: none; }
.studio-brand-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 12px 8px; padding: 8px 12px 10px;
}
.studio-brand-card { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
/* 长按拖拽的系统手势抑制(照 .studio-org-scroll 那套整套搬):裸 user-select 拦不住 iOS 长按 <img> 的
   图片 callout(预览/存图)——它会接管手势发 pointercancel,把 350ms 长按拖拽掐掉(实测=带 logo 的
   品牌卡拖不动、纯文字卡能拖)。-webkit-user-drag 同 .project-sidebar-item 基准(已无 HTML5 draggable)。 */
/* ★按【容器】收口,不再逐个网格枚举:枚举必漏(Portfolio 网格与段标题就漏了,拖过去会选中蓝字),
   而且新增段落还得记得补。整个 Studio 侧栏都是控件面(文件名/段标题/卡片标签),
   选中它们没有用途、还跟长按拖拽抢手势。★内容照常可选:会议室聊天正文/判断输出/输入框都不在此容器内。 */
/* ★主区同理(2026-08-04 取证:手机上乱点冒出 iOS 的 Copy/Look Up,点 Find Selection 后
   Safari 报 "Collection 4 of 4" —— 欢迎页里正好 4 处,漏网的就是它)。侧栏当初已经从
   "逐个网格枚举"收成"按容器",主区却还一处没管:欢迎页、组织架构的人名/角色、模板行、
   作品集标签,全是控件文字。会议室正文是【真内容】,单独开口,见下。 */
#studioSidebarBody, #studioSidebarBody *,
#studioViewPage, #studioViewPage * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
/* 开口:会议室聊天正文 —— 那是要能选能复制的内容,不是控件。写在上面那条【之后】,
   同特异性靠顺序取胜(#studioViewPage * 与 #studioMeetingMessages * 都是 1,0,1)。 */
#studioMeetingMessages, #studioMeetingMessages * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* 例外:真要输入/改名的元素必须可选可编辑(将来侧栏加搜索框或就地改名时不至于被上面一刀切掉) */
#studioSidebarBody input, #studioSidebarBody textarea, #studioSidebarBody [contenteditable="true"], #studioSidebarBody [contenteditable="plaintext-only"] {
  -webkit-user-select: text; user-select: text;
}

/* 模板卡(Templates)= 照 brand 卡片视觉;文件卡图标框显扩展名短标签(PDF/PPT/AI/CDR…),prompt 卡显 fileText 图标 */
.studio-template-section.collapsed .studio-template-grid { display: none; }
.studio-template-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 12px 8px; padding: 8px 12px 10px;
}
.studio-template-card { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.studio-template-card.dragging { opacity: var(--dim); }
.studio-template-icon {
  width: 48px; height: 48px; border-radius: var(--tile-radius);   /* 同 brand 图标框:圆角方块 */
  background: var(--color-bg-card); color: var(--color-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; letter-spacing: 0.3px;
  overflow: hidden; box-sizing: border-box; border: 1px solid var(--color-border);
}
.studio-template-icon svg { width: 28px; height: 28px; }   /* app 统一文件图标(pdf 红标/表格/文档)在图标框内 */
/* 文件类型彩色底 + 白图标(同消息气泡文件卡:pdf红/excel绿/word蓝/ppt橙…)。底色由 JS 按类型设,去边线、图标转白。 */
.studio-template-icon.has-filetype { border: none; color: #fff; }
.studio-template-name {
  font-size: 11px; color: var(--color-text); max-width: 60px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
/* 消化状态 = 图标右上角一个点,说明走 hover。卡才 ~56px 宽,写字必然被截成省略号。
   ★颜色按【要不要你动手】分,不按"发生了什么":绿=没你的事 · 黄=在做 · 红=点它要你处理。
   图标本身 overflow:hidden(裁文件类型标),所以点挂在外面这层容器上,否则会被裁掉。 */
.studio-template-iconwrap { position: relative; display: flex; }
/* 几何(位置/半径/尺寸/那圈环)全在基准块,这里【只给颜色】。点没有内容,基准块的
   min-width 就决定了它的宽 —— 别再写 width。这条现在由 portfolio-groups 门看住。 */
.studio-template-status.is-ok { background: var(--color-live); }
.studio-template-status.is-busy { background: var(--color-warn); }
.studio-template-status.is-attention { background: var(--color-danger); }   /* 全站唯一危险色(基准 ai-chat-base.css) */
/* 绑定到某行(角色)的标签:名字下方一行淡色小字 */
/* 手机端"+"选择器里的模板区:分组标题 + 文件类型彩色方角图标(区别于 agent 圆头像) */
.studio-picker-section-label { width: 100%; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); padding: 10px 4px 2px; }
.studio-picker-icon.studio-picker-tpl { border-radius: calc(10px * var(--corner-k)); color: #fff; }
.studio-picker-icon.studio-picker-tpl svg { width: var(--icon-size); height: var(--icon-size); }
/* 上传中占位卡:点卡=取消。图标与压暗/进度环都走全站单一真源(类型图标 applyTypeIcon + data-uploading),
   这里不再给它铺一层灰底 —— 那层灰底是"占位先摆个空盒子"时代留下的,现在盒子里本来就有图标。 */
.studio-template-card.is-uploading { cursor: pointer; }
/* 上传进度只用环表达,不显百分比文字(缩略图就那么大:字大了碍眼、字小了看不清 —— 用户 2026-07-26 定)。
   原 .studio-template-pct 规则已随两处调用点一并删除。 */
/* ── Portfolio 情境段(侧栏):按【角色行】分文件夹(只显点亮的行),每个文件夹里作品卡 = 照模板卡视觉 ── */
.studio-portfolio-section.collapsed .studio-portfolio-grid { display: none; }
.studio-portfolio-grid { display: block; padding: 2px 0 8px; }   /* 容器装的是文件夹(块),不是卡网格 */
/* 产出文件夹:头(角色名 + 数量 + "+"上传) + 体(卡网格,可折叠) */
.studio-pf-folder-head {
  /* ★右内边距必须跟段头(.sidebar-section-header 的 6px)一致 —— 这两层的三竖点是同一个
     24×24 按钮,右缘要落在同一条竖线上。原来这里是 12px,于是文件夹那颗左偏 6px。
     左边保持 14:比段头的 12 多两格,是这一层"缩进一级"的意思,和三点无关。 */
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; cursor: pointer; user-select: none;
}
/* 产出文件夹名:小、轻、浅【三个信号一致往下】。★别加粗 —— 12px 上加粗读作"又小又粗",
   而且字重往上、字号与颜色往下 = 自相矛盾的层级。"重一档"这个信号留给项目分组组头
   (.project-group-name 14px/500/主色,同为侧栏可折叠文件夹的基准),全站加粗语义才不通胀。 */
.studio-pf-folder-name { font-size: 12px; font-weight: 400; color: var(--color-text-secondary); }
.studio-pf-folder-count { font-size: 11px; color: var(--color-text-secondary); opacity: 0.65; font-variant-numeric: tabular-nums; margin-left: 2px; }
.studio-pf-folder-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 12px 8px; padding: 4px 12px 8px; }
.studio-pf-folder.collapsed .studio-pf-folder-body { display: none; }
/* 「件」面板(线 A 的实体):品类小标 = 作品集文件夹名那一档(12px 浅色);每件一行 = 名字 + 草图缩略图条(缩略图同作品集卡的框,只是小一圆)
.studio-piece-list { display: block; padding: 2px 0 8px; }
.studio-piece-section.collapsed .studio-piece-list { display: none; }
.studio-piece-empty { font-size: 12px; color: var(--color-text-secondary); padding: 4px 14px 8px; }
/* 品类头复用 .studio-pf-folder-head 真源(对齐/暗色/手势跟作品集文件夹一致);件行内距照文件夹 body(左 12)对齐 */
.studio-piece-body { padding: 0 0 4px; }
/* Two columns, exactly as folder-head vs folder-body above: the name row runs out to the 6px dots line so its
   three-dot sits on the same vertical as every other one in the sidebar; the sketch strip keeps the 12px content
   inset the thumbnails everywhere else use. The row itself owns no horizontal padding. */
.studio-piece { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 6px; }
.studio-piece-name { font-size: 12px; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Set membership: a quiet outline chip beside the name (token border, secondary ink - no new colours) */
.studio-piece-setchip { flex: 0 0 auto; padding: 0 6px; border-radius: 999px; corner-shape: round; font-size: 10px; color: var(--color-text-secondary); box-shadow: 0 0 0 1px var(--color-border); }
.studio-piece-sheetchip { border: none; background: transparent; font-family: inherit; cursor: pointer; }
html:not([data-input="touch"]) .studio-piece-sheetchip:hover, .studio-piece-sheetchip:active { color: var(--color-text); }
/* 草图条 = 上面所有图标区同一张 56px 网格(对齐真源:品类卡/模板/品牌都是 minmax(56px,1fr)+居中);缩略图用 .studio-portfolio-thumb 原尺(48),不另设尺寸 */
.studio-piece-sketches { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 12px 8px; justify-items: center; padding: 0 12px; }
.studio-piece-thumb { cursor: pointer; }
/* Sketch verdict badge: the one true corner badge; pass keeps the solid form, reject flips ink (same shape, X glyph) */
.studio-sketch-verdict { display: flex; padding: 0; }
.studio-sketch-verdict svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.studio-sketch-verdict.is-reject { background: var(--color-bg-page); color: var(--color-text); box-shadow: 0 0 0 2px var(--color-text); }
/* Markup handle: the corner badge source (.studio-pf-stack-count) worn at the BOTTOM-right - same geometry,
   ink, and page-colour ring (the "cut into the thumb" edge); this rule only mirrors the position, makes it a
   button, and handles reveal. Desktop reveals on hover, touch keeps it - real input, not a media guess.
   JS composes the classes: 'studio-pf-stack-count studio-sketch-markup' (same recipe as .duo-select-tick). */
.studio-pf-stack-count.studio-sketch-markup {
  top: auto; bottom: var(--badge-inset-y);
  padding: 0; border: none; cursor: pointer;
}
.studio-sketch-markup svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }
html:not([data-input="touch"]) .studio-sketch-markup { opacity: 0; }
html:not([data-input="touch"]) .studio-pf-thumbwrap:hover .studio-sketch-markup { opacity: 1; }
/* A settled piece: the round is over, so the thumb reads as decided and loses its markup handle (JS drops it). */
.studio-pf-thumbwrap.is-selected .studio-piece-thumb { box-shadow: 0 0 0 2px var(--color-text); }