/* skin-effects：风格专属的形态。颜色、圆角、模糊强度已经由 skins.css 的令牌换过一轮，
 * 这里只写「琥珀压根没有这个东西」的部分：玻璃的模糊层与高光、赛博朋克的品红描边、
 * 蓝图的错位实影与虚线。石墨、绿意只靠令牌，没有专属形态。
 * 规矩：本文件所有选择器都必须挂在 :root[data-skin="…"] 下，漏掉前缀就会漏进琥珀，
 * 那正是切回默认风格以后「怎么还有残留」的来源。
 * 弹窗规则一律排除图片灯箱 .dlg-img：它刻意透明无边，只让图片浮在深色背板上。 */

/* ============================================================================
   液态玻璃
   ----------------------------------------------------------------------------
   玻璃感只给「背后是画布」的层：侧栏、工作台、卡片用半透明 --panel，透出色斑。
   凡是压在正文上的层——弹窗、菜单、下拉、气泡、抽屉、吸顶表头——一律用不透明的
   --panel-solid（各自的基础样式里已经写好），不要改回半透明再指望背景模糊：
   半透明底下的字即便糊过也是一团团字形，和上层文字叠在一起照样看不清；嵌套的
   backdrop-filter 还只采样到最近的模糊祖先（窄屏抽屉里的用户菜单），根本糊不掉。
   所以玻璃风格不给任何面板挂 backdrop-filter，只给弹窗、抽屉背后的遮罩磨砂：
   遮罩本来就是半透明的，磨一下让底下的页面退成背景，不和上层抢眼。
   画布刻意不做漂移动画：遮罩的模糊压在会动的画布上就得每帧重算。
   ========================================================================= */
:root[data-skin="glass"][data-theme="dark"] {
  --glass-glint: rgba(255, 255, 255, .16);
  --glass-edge: rgba(255, 255, 255, .14);
}
:root[data-skin="glass"][data-theme="light"] {
  --glass-glint: rgba(255, 255, 255, .80);
  --glass-edge: rgba(255, 255, 255, .85);
}

/* 浮层：上缘一道镜面高光。提示条（toast）的基础底色故意留了 6% 透明，玻璃下压实 */
:root[data-skin="glass"] .toast { background-color: var(--panel-solid); }
:root[data-skin="glass"] :is(dialog:not(.dlg-img), .kebab-menu, .select-panel, .side-user-menu, .action-popover, .section-menu, .version-menu, .date-range-popover, .workspace-guide, .pick-menu) {
  background-image: linear-gradient(180deg, var(--glass-glint) 0, transparent 96px);
}
/* 弹窗表头色带：玻璃的 --panel-2 本身是半透明叠色，按通用规则压淡后几乎看不出来，这里用满色；
 * 关闭钮悬停时同色再叠一层，仍然比色带深 */
:root[data-skin="glass"] dialog { --dlg-head-bg: var(--panel-2); }
:root[data-skin="glass"] dialog::backdrop {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* 侧栏：桌面上背后只有画布，不模糊；半透明面板挨着内容的那条边换成高光切面 */
:root[data-skin="glass"] .sidebar {
  border-right-color: var(--glass-edge);
  box-shadow: 1px 0 0 color-mix(in srgb, var(--glass-edge) 40%, transparent);
}
/* 窄屏抽屉、历史面板压在内容上：抽屉本身不透明，背后的遮罩磨砂 */
@media (max-width: 760px) {
  :root[data-skin="glass"] :is(.scrim, .tp-scrim).show {
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);
  }
}

/* 玻璃块的「厚度」靠上缘那道内高光，比加大阴影管用：输入区、按钮、输入框各补一道 */
:root[data-skin="glass"] .composer {
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-glint);
}
:root[data-skin="glass"] .composer:focus-within {
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-glint),
    0 0 0 3px color-mix(in srgb, var(--amber) 14%, transparent);
}
:root[data-skin="glass"] :is(.btn:not(.btn-ghost), .select-trigger) {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-glint) 70%, transparent);
}
/* 只给自带边框的输入框：输入区、搜索框、日期框里的无边框输入由外层画框，
 * 再补一道高光就成了框中间一条横线 */
:root[data-skin="glass"] :is(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea):not(.composer *, .session-search *, .dr-inputs *) {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-glint) 70%, transparent);
}
/* 主按钮：实色块上也压一层竖向高光，否则像贴上去的 */
:root[data-skin="glass"] :is(.btn-primary, .send-btn:not(.stop)) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 60%);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, .32);
}
:root[data-skin="glass"] .theme-options button.active {
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-glint);
}

/* ============================================================================
   赛博朋克：青色是界面的「电流」，品红只出现在边角——品牌栏下沿、主按钮的错位
   实影、选中行的切角。不加发光阴影刷满屏，霓虹感靠少量硬边线来给。
   ========================================================================= */
:root[data-skin="cyberpunk"] .side-head {
  box-shadow: inset 0 -2px 0 var(--skin-detail);
}
:root[data-skin="cyberpunk"] :is(.btn-primary, .send-btn:not(.stop)) {
  box-shadow: 2px 2px 0 var(--skin-detail);
}
:root[data-skin="cyberpunk"] :is(.btn-primary, .send-btn:not(.stop)):active:not(:disabled) {
  box-shadow: 1px 1px 0 var(--skin-detail);
}
/* 收起的窄栏另有贴边指示条（shell.css），这里只管展开的侧栏和窄屏抽屉 */
:root[data-skin="cyberpunk"]:not([data-sidebar-collapsed="true"]) .session-card.active {
  box-shadow: inset 2px 0 0 var(--amber);
}
@media (max-width: 760px) {
  :root[data-skin="cyberpunk"] .session-card.active { box-shadow: inset 2px 0 0 var(--amber); }
}
:root[data-skin="cyberpunk"] .btn:hover:not(:disabled, .btn-primary, .btn-ghost, .btn-danger) {
  border-color: var(--amber-dim);
}
/* 弹窗顶边一道青色，像终端窗口的标题条 */
:root[data-skin="cyberpunk"] dialog:not(.dlg-img) {
  border-top: 2px solid var(--amber);
}
:root[data-skin="cyberpunk"][data-theme="dark"] .composer:focus-within {
  box-shadow: var(--shadow-md), 0 0 0 1px var(--amber-dim), 0 0 22px -8px var(--amber);
}

/* ============================================================================
   工程蓝图：阴影是右下错位的实线（--shadow-sm 已经是），分隔线改虚线，
   像图纸上的辅助线。主按钮与输入区各带一道实影。
   ========================================================================= */
:root[data-skin="blueprint"] :is(.side-nav, .side-preferences) {
  border-top-style: dashed;
}
:root[data-skin="blueprint"] :is(.btn-primary, .send-btn:not(.stop)) {
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--amber) 45%, transparent);
}
:root[data-skin="blueprint"] .composer,
:root[data-skin="blueprint"] .composer:focus-within {
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--amber) 22%, transparent);
}
:root[data-skin="blueprint"] .composer:focus-within {
  border-color: var(--amber);
}
:root[data-skin="blueprint"] dialog:not(.dlg-img) {
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--amber) 28%, transparent), var(--shadow-md);
}