/* ai-chat-studio-portfolio.css - portfolio and images: the preview modal, grouped stacks, the upload and picker sheets.
   One of the Studio stylesheet's 7 parts (part 4). 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). */

/* ── 作品集预览弹窗 · 手机端 ──────────────────────────────────────────────
   桌面是"收缩包裹到图片大小"(横图矮/竖图高、无留白),那套在手机上放不下:
   卡按图片宽度定尺寸就会顶出屏幕。这里照搬【图片编辑页手机端】那套基准
   (.images-editor 的 768px 块):主图铺满宽度、右侧竖排缩略图改成底部横向滚动条。 */
@media (max-width: 768px), (max-height: 500px) {
  /* 360px 是给【桌面窄对话框】定的上限,漏到手机上就把上拉 sheet 卡住了:
     max-width 一旦小于屏宽,而 left/right 又都是 0,浏览器会放弃 right → sheet 贴左边、右侧空一条。
     约束跟着它服务的形态走,和分割条那两条 min-width 同理。 */
  .studio-brand-editor .project-settings-modal-content { max-width: none; }
  /* 挂了卡片待遇后，卡片有 16px 侧边距；不是 section 的那几排按钮（岗位选择 / 能力预设）要跟着对齐，
     否则它们贴到弹窗边上、比卡片向外突一截。只在手机形态生效（卡片本身就只在这里） */
  /* 操作区照全站 sheet 基准(项目设置那个手机 sheet 就是这么定的):底部留出拇指区、按钮加高一档。
     不照搬它"手机隐藏 Cancel"那半 —— 那张表单只有 Save,而 Studio 这几个编辑器同一行还有 Delete,
     藏掉 Cancel 会让 Save 和 Delete 贴到一起。 */
  .studio-brand-editor .project-modal-actions,
  .studio-agent-editor .project-modal-actions,
  .studio-template-editor .project-modal-actions,
  .studio-collection-settings .project-modal-actions { padding-bottom: 32px; }
  /* Footer pills are sized by the app-wide footer rule (ai-chat-base.css) on every device now; only the
     portfolio-detail window needs this - it has no footer container, its pills sit in the content box. */
  .project-modal-content.studio-pf-wide .project-modal-btn { padding: var(--btn-block-pad-y) 14px; font-size: var(--btn-block-font); }
  .project-modal-content.studio-pf-wide {
    width: 100%; max-width: 100%; min-width: 0;
    max-height: 92dvh;                      /* 同全站上拉 sheet 的高度基准 */
    padding: 14px; box-sizing: border-box;
    display: flex; flex-direction: column;
  }
  /* 预览区吃掉标题/按钮之外的高度,并把渲染器尺寸交给它(同模板编辑器的做法) */
  .studio-pf-preview-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; --preview-w: 100%; }
  .studio-pf-preview-wrap img.duo-preview { max-width: 100%; }   /* 限定 img:iframe/canvas 的宽由 --preview-w 管 */
  /* 画廊:右侧竖排 → 底部横向条(照 .images-editor-thumbs 手机端) */
  .studio-pf-preview-wrap { --pf-stage-h: 58vh; }   /* 手机端舞台高度(同样恒定,切图不跳) */
}

/* ── 图片分组【叠】:一组图折成一张卡,底下垫两层露出侧边 = 看得见厚度 ──
   垫层复用缩略图方块的圆角/边线基准(48px / 14px 圆角 / var(--color-border)),只是往右下各挪一点点;
   容器留 3px 外边距把露出的部分算进布局,免得压到相邻卡与文件名。 */
/* ★叠占的盒子必须与普通缩略图【完全一致】(48×48,零外边距):
   曾用 margin:0 6px 6px 0 给露出的纸边"预留位置",结果 ① 文件名比普通文件低 6px、
   ② 预留是写死的 6px 而实际厚度按张数是 1.5~6px(8 张只厚 1.5px 却空 6px)、
   ③ 右边距让缩略图在居中的卡里左偏 3px —— 一条 margin 造出三处不齐。
   厚度改成【纯横向】露出(见下面 transform):transform 不参与布局 = 零布局代价,
   底边与普通缩略图齐平 → 文件名间距天然一致;而且"侧面看到厚度"本就是要的样子。 */
.studio-pf-stack { position: relative; width: 48px; height: 48px; margin: 0; }
/* 纸边的存在感靠【颜色】不靠厚度:面板底色在侧栏底上对比太弱(暗色 #2a2a2a 压 #1a1a1a),
   改用 --color-bg-card(亮暗都是"叠在底色上的一层")+ 标准边线,边就看得出来了。 */
.studio-pf-stack-layer {
  position: absolute; inset: 0; border-radius: var(--tile-radius);
  background: var(--color-bg-card); border: 1px solid var(--color-border); box-sizing: border-box;
}
/* 偏移由 JS 按张数给(--stack-o1..o4,每层 1px),两轴同量 = 正 45° 的右下。这里只给默认值兜底。
   ★向下的总量【必须小于缩略图与文件名之间那 5px】(.studio-portfolio-card 的 gap):
     transform 不参与布局,所以它不会推开文字 —— 但会视觉上压到字。所以步长收到 1px、
     最大 4px,留出余量。要加厚就得先解决"文件名被顶"那件事,不能只调这里的数。 */
.studio-pf-stack-layer.l1 { transform: translate(var(--stack-o1, 1px), var(--stack-o1, 1px)); }
.studio-pf-stack-layer.l2 { transform: translate(var(--stack-o2, 2px), var(--stack-o2, 2px)); }
.studio-pf-stack-layer.l3 { transform: translate(var(--stack-o3, 3px), var(--stack-o3, 3px)); }
.studio-pf-stack-layer.l4 { transform: translate(var(--stack-o4, 4px), var(--stack-o4, 4px)); }
.studio-pf-stack-top { position: absolute; inset: 0; }
/* 数量角标:同 iOS 文件夹,压在右上角(10px = 微型徽标档) */
/* ★48px 缩略图右上角那个圆 = 全站【唯一基准】。图片堆叠的张数、模板的状态点都用它 ——
   位置和半径写在这一条里,改这一处两边一起变,别各写各的。
   ★与页面底色同色的一圈环:把角标从缩略图上"抬"起来(通知角标的通用做法),
     暗色下存在感低的根因是 --avatar-bg(#444)压在 #1a1a1a 页底上几乎同色 → 改用
     --color-text/--color-bg-page 这对【本来就随主题反色】的 token,亮暗都是强对比。 */
.studio-pf-stack-count,
.studio-template-status {
  /* 出角的量抽成变量:选中对号坐的是【右下角】,它要的是这同一个量镜像过去(owner 2026-08-08),
     写死数字就会变成"两个角各调各的"。改这两个数 = 右上角标与右下对号一起动。 */
  --badge-inset-x: -6px; --badge-inset-y: -5px;
  /* One size knob. Every number circle in the app is this badge at some --badge-size; the font, padding
     and ring scale WITH it (fixed proportions of 16px: font 3/4, pad 1/4, ring 1/8) - a variant may set
     the size, never re-declare the proportions. */
  --badge-size: 16px;
  position: absolute; top: var(--badge-inset-y); right: var(--badge-inset-x);
  min-width: var(--badge-size); height: var(--badge-size);
  border-radius: 999px;
  corner-shape: round;
  box-sizing: border-box;
  box-shadow: 0 0 0 calc(var(--badge-size) / 8) var(--color-bg-page);
}
.studio-pf-stack-count {
  /* iPhone 式:min-width 是下限不是定宽 —— 一位数撑不到 → 正圆;两位起撑破 → 自动拉成胶囊。
     padding 必须小于 (16 - 单个数字宽)/2,否则一位数也会被撑出圆形。 */
  padding: 0 calc(var(--badge-size) / 4);
  background: var(--color-text); color: var(--color-bg-page);
  font-size: calc(var(--badge-size) * 0.75); font-variant-numeric: tabular-nums;
  /* 数字要【真的】居中:flex 只能把行盒居中,而字体 ascent/descent 不对称(数字只占基线到
     cap 高,盒底还留着 descent 的空)→ 数字天然偏上。trim 让盒子贴着字的墨迹,换字体自动跟着
     变、不写补偿数值。同 .duo-viewer-title 那条。 */
  display: flex; align-items: center; justify-content: center; line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
/* 拖到某张卡上方 = 松手即成组(iPhone 式)。被指向的那张放大一点点 + 描边点亮,给出"能放进去"的确认。 */
.studio-portfolio-card.merge-target .studio-portfolio-thumb,
.studio-portfolio-card.merge-target .studio-pf-stack-top {
  transform: scale(1.06);
  box-shadow: 0 0 0 2px var(--color-text);
}
.studio-portfolio-card.merge-target .studio-portfolio-thumb { transition: transform 0.12s, box-shadow 0.12s; }
.studio-portfolio-card.dragging { opacity: var(--dim); }
/* ★这类卡片一直【没有 hover 反馈】——整个作品集侧栏也一样,鼠标放上去毫无反应,读不出"能点"。
   走 Studio 既有的那套亮度微调(同 .studio-brand-swatch),不另发明第二种 hover 语言;
   也不做抬升/投影(全站禁)。触屏那份 :active 是必须的,否则手指按下去没有任何回应。
   ★:not(.is-disabled) 不能省:选图弹窗里被置灰的格子也是这个 class,它自己写着 cursor:default
   (点不了)。给它 hover 反馈 = 一边说"点不了"一边说"能点",自相矛盾。 */
html:not([data-input="touch"]) .studio-portfolio-card:not(.is-disabled):hover .studio-portfolio-thumb,
html:not([data-input="touch"]) .studio-portfolio-card:not(.is-disabled):hover .studio-pf-stack-top{ filter: brightness(var(--press-hover)); }

.studio-portfolio-card:not(.is-disabled):active .studio-portfolio-thumb,
.studio-portfolio-card:not(.is-disabled):active .studio-pf-stack-top { filter: brightness(var(--press-active)); }

/* 字体库的卡片网格。★不复用侧栏那个 .studio-pf-folder-body:它的左右内边距是给【侧栏】留的,
   弹窗自己已经有内边距,套上去会多缩一截;格子宽度也不同 —— 家族名(HIPERMESTRA)比文件名长,
   56px 的格子会把它截掉。卡片/堆叠/角标的几何仍然全部复用,这里只定容器。 */
.studio-font-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 16px 8px;              /* 行距比侧栏松一档:弹窗里卡片少,挤在一起反而显得没排过 */
  padding: 0;
  margin-top: 20px;           /* 动作行与内容之间的节奏 = 全站 Studio 编辑器那一套 20px */
}
/* ★把这段间距收在【上面那一个数】里:共享的 .studio-bench-actions 自带 4px 下边距,
   留着就变成 4+20 的加法 —— 以后谁调其中一个,另一处对不上,而"差不多"是不许有的。 */
.project-modal-content:has(.studio-font-grid) .studio-bench-actions { margin-bottom: 0; }
.studio-font-grid .studio-portfolio-name { max-width: 72px; }   /* 跟格子同宽,名字才吃得下 */
/* 展开哪一个家族,那张卡要看得出来 —— 用的是选图弹窗里"选中"的同一种记号(2px 描边环),
   不另发明第二种选中语言。堆叠的卡露在最上面的是 .studio-pf-stack-top,两个都要写。 */
.studio-font-grid .studio-portfolio-card.is-selected .studio-portfolio-thumb,
.studio-font-grid .studio-portfolio-card.is-selected .studio-pf-stack-top {
  box-shadow: 0 0 0 2px var(--color-text);
}
/* 摊开的字重列表:紧跟在网格下面,不另起一段标题 —— 上面那张亮着环的卡就是标题。 */
.studio-font-family:not(:empty) { margin-top: 16px; }
/* 单个字重的文件名走 400,家族名那行保持 500 —— 上下才有层级。全都 500 会读成一片同样重的东西,
   分不出"这一族"和"族里的一个"。(全站只有 400/500 两档,不许再往上加。) */
.studio-font-file .share-member-name { font-weight: 400; }

/* ── 上传落点选择(弹窗)= 一组胶囊,不是六行菜单 ─────────────────────────
   六项是【同一个动作的六个落点】,菜单行基准 .project-menu-item 的图标位是用来分辨
   "这行是哪个动作"的 —— 六行挂同一颗 ⊕ 等于零信息量,还会被读成"每行各有个加号按钮"。
   所以改用胶囊真源 .project-modal-btn(+ -cancel 变体),六颗一样重。
   ★一排 2 个,六种语言、桌面手机【全都一样】(owner 2026-08-08:"我想让它统一的,
   不要有时候 2 有时候 3")。为什么不是 3:480px 弹窗里三等分 = 138.7px,而意大利语
   Documenti di giudizio 实测要 141px,写死 3 就切字;手机上三等分只剩 108.7px,
   六种语言里四种放不下。2 列 = 桌面 212px / 手机 167px,最宽的也富余 26px 以上,
   所以它不需要按语言分叉。改类别名前先量最宽那颗还在不在 167px 以内。 */
.studio-pf-upload-grid {
  display: grid; gap: 8px; margin: 4px 0 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 胶囊拉满格子的尺寸走 block 档变体 .project-modal-btn-block(JS 挂在按钮上),
   这里【一个数值都不写】—— 写了就是第二份,迟早跟真源分家。
   ★也不锁 nowrap:窄机器上放不下就换行,不切字。实测 360px 机器意大利语差 6px、
   320px 法语也差 —— 锁 nowrap 就得靠断点改列数(那正是 owner 不要的"有时候 2 有时候 3"),
   或者为排版改文案。换行让格子几何在任何宽度、任何语言下都是同一个 2×3。 */

/* ── 成组选图器(弹窗)· 文件夹头三竖点 → Select images ──────────────────
   在弹窗里勾图,不在侧栏边上做多选(用户 2026-07-26)。格子复用作品卡视觉,
   选中态用强对比描边(设计宪法允许的"非标准边线"例外——它是选中态,不是普通边线)。 */
/* ★padding 不是留白,是【不让选中记号被裁】:overflow-y:auto 会把 overflow-x 一起算成 auto
   (规范:一轴非 visible 时另一轴的 visible 计算成 auto)→ 这个网格是个四边都裁的裁切盒,
   而首行缩略图的上沿正好压在它的内容上边缘(实测 grid.top === thumb.top),画在盒外的 2px 选中环
   顶边就被削掉 = "选中框不完整"。记号最大外伸 4px(勾自己的 2px 描环 + 外露 2px),所以给 4px。
   外围几何保持不变:上 0+4=4、下 4+12=16,与原来的 margin 一致。 */
.studio-pf-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 14px 10px; margin: 0 0 12px; padding: 4px; max-height: 52vh; overflow-y: auto;
}
.studio-pf-picker-cell { cursor: pointer; }
/* 选中 = 外圈描环 + 右下角对号圆圈,与材质球同一套记号(定义在 ai-chat-file-preview.css
   的 .duo-select-tick),这里只说"什么时候现身" */
.studio-pf-picker-cell.is-selected .studio-portfolio-thumb { box-shadow: 0 0 0 2px var(--color-text); }
.studio-pf-picker-cell.is-selected .duo-select-tick { display: flex; }
.studio-pf-picker-cell.is-selected .studio-portfolio-name { color: var(--color-text); }
.studio-pf-picker .project-modal-btn[disabled] { opacity: var(--dim); cursor: default; }
/* 三竖点:与侧栏段头同一套(桌面 hover 才显、触屏常驻、菜单打开时保持)——照抄 .project-item-actions 那套显隐 */
.studio-pf-folder-menu-btn { margin-left: auto; opacity: 0; transition: opacity 0.12s; }
html:not([data-input="touch"]) .studio-pf-folder-head:hover .studio-pf-folder-menu-btn,
html:not([data-input="touch"]) .studio-pf-folder-head:active .studio-pf-folder-menu-btn{ opacity: 1; }

.studio-pf-folder-head:has(.studio-section-menu.active) .studio-pf-folder-menu-btn { opacity: 1; }
@media (hover: none) and (pointer: coarse) {
  .studio-pf-folder-menu-btn { opacity: 1; }
}
/* 选图器:选了第一张后异类置灰(与其选完在成组时被拒,不如当场说明不能混) */
.studio-pf-picker-cell.is-disabled { opacity: 0.35; cursor: default; }

/* 从预览器把一张拖到侧栏 = 脱离组:侧栏给一个接收态(复用 Studio 拖放蒙层的单一真源色) */

/* 红点是可点的(补字体 / 重试)。点只有 10px,所以把可点区域撑到 24px —— 手指按得中 */
.studio-template-status.is-actionable { cursor: pointer; }
.studio-template-status.is-actionable::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 24px; height: 24px; transform: translate(-50%, -50%);
}

/* 「谁做的」= 压在缩略图右下角的一颗小头像。盒子/圆角/字号全部来自 .project-avatar 基准,
   这里只压两件事:尺寸 20(卡片角落的量级,同 .studio-org-add 那档)与定位。
   描边用页面底色而不是 --color-border:它压在缩略图【上面】,要的是"浮起来"的隔离,
   跟卡片轮廓那类边线不是一回事。 */
/* 归属头像基类:行内小标记(卡角绝对定位那代用法已退役)。
   ★边框用轮廓基准 var(--color-border):基准那颗 bg-panel 色边框是【叠放裁切】用的故意隐形,
   独立小标记要的是看得见的轮廓(暗色下已被 owner 两次拍到看不清)。 */
.studio-pf-maker {
  position: static;
  width: 20px; height: 20px; font-size: 9px;
  border-color: var(--color-border);
  pointer-events: none;
}