/* ============================================================
   sp-v51.css  作曲器「插入内容区」1:1 复刻（参考站 hz.lk888.ai 实测）
   - 附件/参考图牌堆：白边斜卡交叉重叠 + 右下角圆形 +
   - hover：手牌横向扇形展开、悬停卡放大上浮、上方文件名气泡、右上圆形 X
   - hover 时右下 + 展开为完整虚线卡（附件 N/上限）移到扇形最右
   - 底部功能钮：暗底 #292B33 + 彩色渐变描边胶囊
   本文件最后加载，统一覆盖历史分散规则。
   ============================================================ */

/* ---------- 牌堆容器 ---------- */
.cp-v2 #attachmentList.sp-stack{
  display:block !important;
  position:relative;
  width:64px; height:80px;
  overflow:visible;
  margin:0;
}
.cp-v2 #attachmentList.sp-stack.hidden{ display:none !important; }

/* ---------- 斜卡（白边拍立得） ---------- */
.cp-v2 #attachmentList.sp-stack .sp-stack-card{
  position:absolute; left:0; top:0;
  width:64px; height:80px;
  margin:0; padding:0;
  border:2px solid #fff;
  border-radius:3px;
  background:#2d2f35;
  box-shadow:0 4px 12px rgba(0,0,0,.30);
  overflow:visible;
  transform:rotate(var(--sr,0deg)) translateZ(0);
  transition:transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.cp-v2 #attachmentList.sp-stack .sp-stack-card img,
.cp-v2 #attachmentList.sp-stack .sp-stack-card video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; border-radius:1px; background:#2d2f35;
}
.cp-v2 #attachmentList.sp-stack .sp-stack-card .sp-file-ic{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#9fb4c4;
}
.cp-v2 #attachmentList.sp-stack .sp-stack-card .sp-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.55);
}
.cp-v2 #attachmentList.sp-stack .sp-stack-card .sp-play::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%);
  border-left:9px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent;
}

/* ---------- hover：横向扇形展开（首张在最左，逐张 +54px） ---------- */
.cp-v2 #attachmentList.sp-stack:hover .sp-stack-card:not(:hover){
  transform:translateX(calc(var(--p,0) * 54px)) rotate(var(--hr,0deg)) scale(1) translateZ(0);
  z-index:calc(5 + var(--p,0));
}
.cp-v2 #attachmentList.sp-stack:hover .sp-stack-card:hover{
  transform:translateX(calc(var(--p,0) * 54px)) translateY(-12px) rotate(var(--hr,0deg)) scale(1.22) translateZ(0);
  z-index:1000;
  box-shadow:0 14px 26px rgba(0,0,0,.5);
}

/* ---------- 删除 X：20px 深色小圆，悬停卡才出现，hover 变红 ---------- */
.cp-v2 #attachmentList.sp-stack .sp-stack-card .sp-x{
  display:none;
  position:absolute; top:-7px; right:-7px;
  width:20px; height:20px; padding:0;
  border-radius:50%;
  background:#23262d; border:1px solid #41474c;
  color:rgba(255,255,255,.92);
  font-size:12px; line-height:1; font-weight:400;
  place-items:center; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  z-index:1001;
}
.cp-v2 #attachmentList.sp-stack .sp-stack-card:hover .sp-x{ display:grid; }
.cp-v2 #attachmentList.sp-stack .sp-stack-card .sp-x:hover{
  background:rgba(239,68,68,.85); border-color:rgba(239,68,68,.9); color:#fff; transform:scale(1.1);
}

/* ---------- 文件名气泡（卡片上方，名 + 大小，仅悬停卡显示） ---------- */
.cp-v2 #attachmentList.sp-stack .sp-stack-card .sp-name{
  display:none;
  position:absolute; left:50%; bottom:calc(100% + 10px);
  transform:translateX(-50%);
  flex-direction:column; align-items:center; gap:1px;
  background:rgba(40,42,48,.97);
  border:1px dashed rgba(140,149,159,.42);
  border-radius:8px;
  padding:5px 10px;
  white-space:nowrap; pointer-events:none;
  z-index:1002;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.cp-v2 #attachmentList.sp-stack .sp-stack-card .sp-name::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:rgba(40,42,48,.97);
}
.cp-v2 #attachmentList.sp-stack .sp-stack-card:hover .sp-name{ display:flex; }
.cp-v2 #attachmentList.sp-stack .sp-stack-card .spn-name{
  max-width:180px; overflow:hidden; text-overflow:ellipsis;
  font-size:11px; color:#e6ebf0;
}
.cp-v2 #attachmentList.sp-stack .sp-stack-card .spn-size{ font-size:9.5px; color:#9aa4ad; }

/* ---------- 空槽：倾斜虚线斜卡（+ / 附件 / 0/N） ---------- */
.cp-v2 .cp-refs{ position:relative; }
.cp-v2 .cp-refs:not(.has-items) .cp-frame-add{
  width:64px !important; height:80px !important;
  border-radius:3px !important;
  background:#2d2f35 !important;
  border:1px dashed rgba(98,105,113,.6) !important;
  color:#626971;
  transform:rotate(-8deg);
  transition:transform .3s ease, border-color .2s, color .2s;
}
.cp-v2 .cp-refs:not(.has-items) .cp-frame-add:hover{
  transform:rotate(-8deg) scale(1.08);
  border-color:rgba(140,149,159,.9) !important; color:#9aa4ad;
}
.cp-v2 .cp-refs:not(.has-items) .cp-frame-add .cp-plus-icon{
  font-size:23px; font-weight:300; line-height:1; color:#8a929b;
}
.cp-v2 .cp-refs:not(.has-items) .cp-frame-add em{
  display:block; font-style:normal; font-size:11px; line-height:1.15; color:#626971;
}
.cp-v2 .cp-refs:not(.has-items) .cp-frame-add .cp-frame-count{
  display:block; font-size:9px; line-height:1.1; color:rgba(98,105,113,.85);
}

/* ---------- 有附件后：加号收成 32px 小圆，叠在牌堆右下角 ---------- */
.cp-v2 .cp-refs.has-items .cp-frame-add[data-frame-role="附件"],
.cp-v2 .cp-refs.has-items .cp-frame-add[data-frame-role="参考图"]{
  position:absolute; left:46px; top:60px;
  width:32px !important; height:32px !important; min-width:0; padding:0;
  border-radius:50% !important;
  border:none !important;
  background:#31343c;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  transform:rotate(0deg);
  z-index:120;
  display:flex; align-items:center; justify-content:center;
  transition:left .4s cubic-bezier(.4,0,.2,1), top .4s cubic-bezier(.4,0,.2,1),
             width .4s cubic-bezier(.4,0,.2,1), height .4s cubic-bezier(.4,0,.2,1),
             border-radius .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1), background .2s;
}
.cp-v2 .cp-refs.has-items .cp-frame-add[data-frame-role="附件"] .cp-plus-icon,
.cp-v2 .cp-refs.has-items .cp-frame-add[data-frame-role="参考图"] .cp-plus-icon{
  font-size:18px; font-weight:300; color:#fff; line-height:1;
}
.cp-v2 .cp-refs.has-items .cp-frame-add[data-frame-role="附件"] em,
.cp-v2 .cp-refs.has-items .cp-frame-add[data-frame-role="参考图"] em,
.cp-v2 .cp-refs.has-items .cp-frame-add[data-frame-role="附件"] .cp-frame-count,
.cp-v2 .cp-refs.has-items .cp-frame-add[data-frame-role="参考图"] .cp-frame-count{ display:none; }

/* hover 牌堆：加号展开回完整虚线卡，移到扇形最右 */
.cp-v2 .cp-refs.has-items:hover .cp-frame-add[data-frame-role="附件"],
.cp-v2 .cp-refs.has-items:hover .cp-frame-add[data-frame-role="参考图"]{
  left:calc(76px + 54px * (var(--span,1) - 1));
  top:0;
  width:64px !important; height:80px !important; min-width:0 !important; min-height:0 !important;
  border-radius:3px !important;
  background:#2d2f35;
  border:1px dashed rgba(98,105,113,.6) !important;
  transform:rotate(8deg) scale(1);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.cp-v2 .cp-refs.has-items:hover .cp-frame-add[data-frame-role="附件"] .cp-plus-icon,
.cp-v2 .cp-refs.has-items:hover .cp-frame-add[data-frame-role="参考图"] .cp-plus-icon{
  font-size:22px; color:#8a929b;
}
.cp-v2 .cp-refs.has-items:hover .cp-frame-add[data-frame-role="附件"] em,
.cp-v2 .cp-refs.has-items:hover .cp-frame-add[data-frame-role="参考图"] em{
  display:block; font-style:normal; font-size:11px; line-height:1.15; color:#626971;
}
.cp-v2 .cp-refs.has-items:hover .cp-frame-add[data-frame-role="附件"] .cp-frame-count,
.cp-v2 .cp-refs.has-items:hover .cp-frame-add[data-frame-role="参考图"] .cp-frame-count{
  display:block; font-size:9px; line-height:1.1; color:rgba(98,105,113,.85);
}

/* ---------- ID 级铁律：加号小圆 / 展开卡定位（压过所有历史 class 规则） ---------- */
/* 通用：所有空槽/媒体槽/填充卡统一 64×80（ID 级压过一切 class !important；圆形/展开态在后面更高优先级覆盖） */
.cp-v2 #cpRefs .cp-frame-add{
  width:64px !important; height:80px !important;
  min-width:0 !important; min-height:0 !important;
  box-sizing:border-box !important;
}
/* 空槽统一 64×80（与牌堆卡完全一致，杜绝大小不一） */
.cp-v2 #cpRefs:not(.has-items) .cp-frame-add{
  width:64px !important; height:80px !important;
  min-width:0 !important; min-height:0 !important;
  box-sizing:border-box !important;
}
.cp-v2 #cpRefs .cp-frame-add.filled,
.cp-v2 #cpRefs .cp-fstack-add{
  box-sizing:border-box !important;
}
.cp-v2 #cpRefs.has-items .cp-frame-add[data-frame-role="附件"],
.cp-v2 #cpRefs.has-items .cp-frame-add[data-frame-role="参考图"]{
  position:absolute !important;
  left:46px !important; top:60px !important;
  width:32px !important; height:32px !important;
  min-width:0 !important; min-height:0 !important;
  border-radius:50% !important;
}
.cp-v2 #cpRefs.has-items:hover .cp-frame-add[data-frame-role="附件"],
.cp-v2 #cpRefs.has-items:hover .cp-frame-add[data-frame-role="参考图"]{
  left:calc(76px + 54px * (var(--span,1) - 1)) !important;
  top:0 !important;
  width:64px !important; height:80px !important;
  min-width:0 !important; min-height:0 !important;
  border-radius:3px !important;
}

/* ---------- 视频/图片槽位填充卡：同族白边斜卡 ---------- */
.cp-v2 .cp-refs .cp-frame-add.filled{
  width:64px !important; height:80px !important;
  border:2px solid #fff !important; border-radius:3px !important;
  background:#2d2f35; box-shadow:0 4px 12px rgba(0,0,0,.3);
  overflow:hidden; padding:0;
  transition:transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1);
}
.cp-v2 .cp-refs .cp-frame-add.filled:hover{
  transform:translateY(-6px) scale(1.06);
  box-shadow:0 12px 24px rgba(0,0,0,.5); z-index:60;
}
.cp-v2 .cp-refs .cp-frame-add.filled .cp-frame-x{
  position:absolute; top:-7px; right:-7px;
  width:20px; height:20px; line-height:1;
  background:#23262d; border:1px solid #41474c; color:#fff; font-size:12px;
  border-radius:50%; display:none; place-items:center; cursor:pointer; z-index:70;
}
.cp-v2 .cp-refs .cp-frame-add.filled:hover .cp-frame-x{ display:grid; }
.cp-v2 .cp-refs .cp-frame-add.filled .cp-frame-x:hover{ background:rgba(239,68,68,.85); border-color:rgba(239,68,68,.9); }

/* 视频多文件媒体槽（参考图/参考视频/参考音频）空槽统一为虚线斜卡 */
.cp-v2 .cp-fstack-add{
  width:64px !important; height:80px !important; border-radius:3px !important;
  background:#2d2f35 !important; border:1px dashed rgba(98,105,113,.6) !important;
  color:#626971; transform:rotate(-8deg);
  transition:transform .3s, border-color .2s, color .2s;
}
.cp-v2 .cp-fstack-add:hover{ transform:rotate(-8deg) scale(1.08); border-color:rgba(140,149,159,.9)!important; color:#9aa4ad; }

/* ---------- 底部功能钮：暗底 + 彩色渐变描边胶囊（1:1 参考站） ---------- */
.cp-v2 .composer-bottom .mode-buttons{ gap:7px; align-items:center; }
.cp-v2 .composer-bottom .mode-buttons button{
  height:31px; padding:0 11px;
  border-radius:6.3px;
  border:1px solid transparent;
  background:linear-gradient(#292b33,#292b33) padding-box,
             linear-gradient(135deg,rgba(99,102,241,.55),rgba(168,85,247,.45)) border-box;
  color:#f5fbff; font-size:13px; font-weight:400;
  display:inline-flex; align-items:center; gap:6px;
  transition:filter .2s, transform .15s;
}
.cp-v2 .composer-bottom .mode-buttons button:hover{ filter:brightness(1.12); }
.cp-v2 .composer-bottom .mode-buttons button svg{ width:15px; height:15px; }
.cp-v2 .composer-bottom .mode-buttons button .mb-caret{ margin-left:-2px; }
/* 综合最优：实心底 + 紫色菱形图标（无渐变描边） */
.cp-v2 .composer-bottom .mode-buttons button[data-mode-panel="best"]{
  background:#292b33; border:1px solid rgba(255,255,255,.06);
}
.cp-v2 .composer-bottom .mode-buttons button[data-mode-panel="best"] svg{ color:#ab47bc; }
/* 高级设置：青 → 紫 渐变描边，青色图标 */
.cp-v2 .composer-bottom .mode-buttons button[data-mode-panel="advanced"]{
  background:linear-gradient(#292b33,#292b33) padding-box,
             linear-gradient(135deg,rgba(6,182,212,.65),rgba(139,92,246,.65)) border-box;
}
.cp-v2 .composer-bottom .mode-buttons button[data-mode-panel="advanced"] svg{ color:rgba(6,182,212,.95); }
/* 长期记忆：紫色渐变描边，紫色图标 */
.cp-v2 .composer-bottom .mode-buttons button[data-mode-panel="memory"]{
  background:linear-gradient(#292b33,#292b33) padding-box,
             linear-gradient(135deg,rgba(139,92,246,.6),rgba(167,139,250,.5)) border-box;
}
.cp-v2 .composer-bottom .mode-buttons button[data-mode-panel="memory"] svg{ color:rgba(139,92,246,.9); }
/* 技能广场：靛 → 品红 渐变描边，靛色图标 */
.cp-v2 .composer-bottom .mode-buttons button[data-mode-panel="role"]{
  background:linear-gradient(#292b33,#292b33) padding-box,
             linear-gradient(135deg,rgba(99,102,241,.6),rgba(168,85,247,.5)) border-box;
}
.cp-v2 .composer-bottom .mode-buttons button[data-mode-panel="role"] svg{ color:rgba(129,140,248,.95); }

/* ---------- 移动端：扇形改为竖向轻微展开，避免横向溢出 ---------- */
@media (max-width:640px){
  .cp-v2 #attachmentList.sp-stack:hover .sp-stack-card:not(:hover){
    transform:translateX(calc(var(--p,0) * 40px)) rotate(var(--hr,0deg)) scale(1);
  }
  .cp-v2 #attachmentList.sp-stack:hover .sp-stack-card:hover{
    transform:translateX(calc(var(--p,0) * 40px)) translateY(-10px) rotate(var(--hr,0deg)) scale(1.14);
  }
  .cp-v2 .cp-refs.has-items:hover .cp-frame-add[data-frame-role="附件"],
  .cp-v2 .cp-refs.has-items:hover .cp-frame-add[data-frame-role="参考图"]{
    left:calc(72px + 40px * (var(--span,1) - 1));
  }
}

/* @V55-HISTORY-RAIL 恢复参考站竖排对话历史条：仅当前模型/智能体有历史(.has)时显示，贴侧栏右外缘；无历史/灵感视图/窄屏隐藏 */
#sbHistoryRail,.sb-history-rail{display:none!important;}
#sbHistoryRail.has,.sb-history-rail.has{display:flex!important;}
@media (max-width:991px){#sbHistoryRail.has,.sb-history-rail.has{display:none!important;}}

/* v53: 团队/普通智能体开聊后收起落地英雄区，避免与消息流重叠 */
#agentWorkspace.aw-in-chat{display:none!important;}

/* v53: 会员徽章回归后端等级色（tech-fx 曾把所有徽章强制金色），按 --lv 着色 */
.ws-v2 .sp-vip-badge[class*="lv-"]{
  color:color-mix(in srgb,var(--lv) 72%,#fff)!important;
  background:linear-gradient(160deg,color-mix(in srgb,var(--lv) 26%,#151926),color-mix(in srgb,var(--lv) 9%,#0d0d12))!important;
  border:1px solid color-mix(in srgb,var(--lv) 60%,transparent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 2px 12px color-mix(in srgb,var(--lv) 30%,transparent)!important;
}
.ws-v2 .sp-vip-badge.lv-7{
  color:#ecd9ff!important;
  background:linear-gradient(160deg,rgba(199,155,255,.30),rgba(199,155,255,.12))!important;
  border-color:rgba(199,155,255,.7)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 16px rgba(199,155,255,.5)!important;
}

/* v53 移动端安全：智能多帧工作台/引擎弹窗在窄屏不溢出、可点 */
@media (max-width:860px){
  .re-wb-head{flex-wrap:wrap;gap:8px;}
  .re-wb-tabs{margin-left:0;width:100%;justify-content:center;gap:6px;}
  .re-wb-tab{padding:5px 10px;font-size:11px;}
  .re-flow{padding:10px;gap:6px;}
  .re-flow-step{font-size:12px;}
  .re-flow-arrow{display:none;}
  .re-mm-modal{padding:20px 16px 18px;border-radius:16px;width:min(560px,94vw);}
  .re-mm-sel{width:100%;box-sizing:border-box;}
  .re-card{margin:0 2px;min-height:auto;}
  .re-title{font-size:22px;}
}

/* @V55-INSP-RAIL 灵感纯浏览视图不显示对话历史竖轨 */
body:has(.ws-main.in-insp-view) #sbHistoryRail,body:has(.ws-main.in-insp-view) .sb-history-rail{display:none!important;}