/* ============================================================
   星枢AI 智能体 S2 差异化层（任务2）
   每个智能体由 agents.js 注入 --ag-rgb（来自参考站主题色 r,g,b），
   贯穿大图标 / 主管卡 / 成员 / 模式入口 / 发送按钮 / 输入框聚焦，
   并带入场、呼吸、旋转等动效，实现“每个智能体颜色/界面/特效都不同”。
   ============================================================ */
.stage-wrap { --ag-rgb: 34, 211, 238; }

/* 英雄大图标：双层旋转光环 + 主题色光晕 */
.stage-bigicon { position: relative; box-shadow: 0 0 0 1px rgba(var(--ag-rgb), .35), 0 14px 40px rgba(var(--ag-rgb), .35); }
.stage-bigicon .big-ring {
  position: absolute; inset: -10px; border-radius: 50%;
  border: 1.5px dashed rgba(var(--ag-rgb), .55);
  animation: agRingSpin 14s linear infinite; pointer-events: none;
}
.stage-bigicon::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid rgba(var(--ag-rgb), .25);
  animation: agPulse 2.8s ease-in-out infinite; pointer-events: none;
}
@keyframes agRingSpin { to { transform: rotate(360deg); } }
@keyframes agPulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: .35; } }

/* 英雄标题 / 副标题 */
.stage-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stage-title .s2-badge { background: rgba(var(--ag-rgb), .16); color: rgb(var(--ag-rgb)); border: 1px solid rgba(var(--ag-rgb), .5); }
.stage-herosub { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted, #94a3b8); max-width: 760px; }

/* 能力徽章主题化 */
.stage-badges .stage-badge { border-color: rgba(var(--ag-rgb), .35); }
.stage-badges .stage-badge .dia { color: rgb(var(--ag-rgb)); }

/* 创作模式入口（参考站起始页大按钮） */
.ag-modes { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 6px; }
.ag-mode {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 11px 22px; border-radius: 14px; font-size: 14px; font-weight: 700;
  color: rgb(var(--ag-rgb)); background: rgba(var(--ag-rgb), .08);
  border: 1.5px solid rgba(var(--ag-rgb), .4);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  animation: agModeIn .5s ease both;
}
.ag-mode:nth-child(2) { animation-delay: .08s; }
.ag-mode:nth-child(3) { animation-delay: .16s; }
.ag-mode .agm-ic { font-size: 13px; }
.ag-mode:hover { transform: translateY(-2px); background: rgba(var(--ag-rgb), .16); box-shadow: 0 8px 22px rgba(var(--ag-rgb), .3); }
.ag-mode.on {
  color: #fff; background: linear-gradient(135deg, rgba(var(--ag-rgb), 1), rgba(var(--ag-rgb), .72));
  border-color: transparent; box-shadow: 0 8px 24px rgba(var(--ag-rgb), .4);
}
@keyframes agModeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* 团队轨道 */
.team-rail { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 6px; margin: 14px 0; }
.lead-card {
  border: 1px solid rgba(var(--ag-rgb), .45);
  background: linear-gradient(160deg, rgba(var(--ag-rgb), .16), rgba(var(--ag-rgb), .04));
  box-shadow: 0 0 0 1px rgba(var(--ag-rgb), .15), 0 10px 28px rgba(var(--ag-rgb), .18);
  animation: agLeadIn .5s ease both;
}
.lead-card .lead-avatar { animation: agLeadGlow 2.8s ease-in-out infinite; }
@keyframes agLeadIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes agLeadGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ag-rgb), .45); } 50% { box-shadow: 0 0 0 7px rgba(var(--ag-rgb), 0); } }
.member { animation: agMemIn .45s ease both; }
@keyframes agMemIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.member:hover .member-avatar { transform: scale(1.12) rotate(-4deg); }
.member-avatar { transition: transform .2s ease; }
.mlink { background: linear-gradient(90deg, rgba(var(--ag-rgb), .6), rgba(var(--ag-rgb), .15)); }

/* 参数 chips 选中态主题色 */
.pg-chip.on { background: rgba(var(--ag-rgb), .18) !important; border-color: rgb(var(--ag-rgb)) !important; color: rgb(var(--ag-rgb)) !important; }
.param-group .pg-ic { background: linear-gradient(135deg, rgba(var(--ag-rgb), 1), rgba(var(--ag-rgb), .6)); }

/* 输入框聚焦 + 发送按钮主题色 */
.big-composer { border-color: rgba(var(--ag-rgb), .25); }
.big-composer:focus-within { border-color: rgba(var(--ag-rgb), .65); box-shadow: 0 0 0 3px rgba(var(--ag-rgb), .16), 0 12px 36px rgba(var(--ag-rgb), .14); }
.send-btn {
  background: linear-gradient(135deg, rgba(var(--ag-rgb), 1), rgba(var(--ag-rgb), .7)) !important;
  box-shadow: 0 8px 22px rgba(var(--ag-rgb), .4);
}
.send-btn:hover { transform: translateY(-1px) scale(1.04); }

/* 左侧列表项激活时左侧主题色条 */
.agent-item { position: relative; }
.agent-item.active { background: rgba(var(--ag-rgb), .1); }
.agent-item.active::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 3px; background: rgb(var(--ag-rgb));
}
.agent-item .ai-ic { box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }