/* ============================================================
   JUJU 深色主题 · 靛墨版  (juju-theme-dark.css)
   叠在 app.css 之后加载,作用于 html[data-theme="dark"]。
   做法:映射你们【已有的同名 token】,所有组件 + 共享 modal 自动继承,
   不用重写组件 CSS。再加:状态色系统 + 质感/触感 + 新 IA 组件样式。
   配色取自品牌紫(靛墨),非 Discord 中性灰。
   ============================================================ */

html[data-theme="dark"]{
  /* —— 基底:靛墨,三层纵深 —— */
  --color-page:#14141C;          /* 最深 */
  --color-card:#1C1C26;          /* 浮起面 */
  --color-border:#2C2C3A;
  --color-border-soft:#23232F;
  --color-text:#E8E8F0;
  --color-text-muted:#9A9AAB;
  --color-text-weak:#6C6C7D;

  /* —— 品牌 + 语义(深色下提亮)—— */
  --color-brand:#8B79F5;
  --color-brand-hover:#A697FF;
  --color-success:#38CC8A;  --color-success-bg:#15311F;
  --color-warning:#F0A23B;  --color-warning-bg:#3A2F1A;
  --color-danger:#F2555A;   --color-danger-bg:#3A2326;
  --color-code-bg:#22222E;
  --color-accent-blue:#4CC4E0;
  --color-accent-rose:#F07BA7;
  --gradient-brand:linear-gradient(135deg,#8B79F5 0%,#4CC4E0 100%);

  /* —— 身份色(队友)——保持鲜亮,深底上才"有人在" —— */
  --color-roster-nova:#B98CFF;
  --color-roster-orion:#4CC4E0;
  --color-roster-sage:#38CC8A;
  --color-roster-pixel:#F0A23B;
  --color-roster-online:#38CC8A;
  --color-roster-away:#F0A23B;
  --color-roster-busy:#F2555A;
  --color-roster-offline:#6C6C7D;

  /* —— 阴影墨:深色下更深、降高光 —— */
  --shadow-ink:0,0,0;
  --elev-1:0 1px 2px rgba(0,0,0,.25);
  --elev-2:0 2px 6px rgba(0,0,0,.3),0 8px 20px rgba(0,0,0,.25);
  --elev-pop:0 8px 24px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.45);
  --lit-edge:inset 0 1px 0 rgba(255,255,255,.04);

  --r-sm:9px;--r-md:13px;--r-lg:17px;--r-xl:22px;--r-pill:999px;
  --ease:cubic-bezier(.2,.8,.3,1);--dur:160ms;
}

/* —— 三栏纵深:左栏与右栏比中间更深一档,空间感 —— */
html[data-theme="dark"] .juju-sidebar,
html[data-theme="dark"] .juju-agent-panel{ background:#1A1A23; }
html[data-theme="dark"] .juju-main{ background:#17171F; }

/* —— 状态色系统:任务/审批状态 = 彩色药丸 + 左色条 + 同色进度 —— */
html[data-theme="dark"]{
  --st-doing:var(--color-accent-blue); --st-doing-bg:#16252E;
  --st-blocked:var(--color-warning);   --st-blocked-bg:var(--color-warning-bg);
  --st-failed:var(--color-danger);     --st-failed-bg:var(--color-danger-bg);
  --st-review:var(--color-brand);      --st-review-bg:#221E3A;
  --st-accepted:var(--color-success);  --st-accepted-bg:var(--color-success-bg);
}
/* 任务卡按 data 状态染左色条(Codex 给卡片加 data-status 即可生效) */
html[data-theme="dark"] .juju-task-card{ box-shadow:var(--elev-1),var(--lit-edge); border-radius:var(--r-lg); transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease); }
html[data-theme="dark"] .juju-task-card:hover{ box-shadow:var(--elev-2),var(--lit-edge); transform:translateY(-1px); }
html[data-theme="dark"] .juju-task-card[data-status="doing"]{ box-shadow:inset 3px 0 0 var(--st-doing),var(--elev-1); }
html[data-theme="dark"] .juju-task-card[data-status="failed"]{ box-shadow:inset 3px 0 0 var(--st-failed),var(--elev-1); }
html[data-theme="dark"] .juju-task-card[data-status="blocked"]{ box-shadow:inset 3px 0 0 var(--st-blocked),var(--elev-1); }
html[data-theme="dark"] .juju-task-card[data-status="review"]{ box-shadow:inset 3px 0 0 var(--st-review),var(--elev-1); }
html[data-theme="dark"] .juju-task-card[data-status="accepted"]{ box-shadow:inset 3px 0 0 var(--st-accepted),var(--elev-1); }

/* —— 质感 / 触感(沿用质感层,深色调)—— */
html[data-theme="dark"] .juju-result-card,
html[data-theme="dark"] .juju-review-card,
html[data-theme="dark"] .juju-file-card{ border-radius:var(--r-lg); box-shadow:var(--elev-1),var(--lit-edge); }
html[data-theme="dark"] .juju-modal-card{ border-radius:var(--r-xl); box-shadow:var(--elev-pop); }
html[data-theme="dark"] .juju-message-bubble,
html[data-theme="dark"] .juju-typing-bubble{ border-radius:var(--r-lg); }
html[data-theme="dark"] .juju-btn{ border-radius:var(--r-md); box-shadow:var(--elev-1); transition:box-shadow var(--dur) var(--ease),transform 90ms var(--ease),filter var(--dur) var(--ease); }
html[data-theme="dark"] .juju-btn:hover{ box-shadow:var(--elev-2); transform:translateY(-1px); filter:brightness(1.05); }
html[data-theme="dark"] .juju-btn:active{ transform:translateY(0); filter:brightness(.98); }
html[data-theme="dark"] .juju-mini-btn:active,
html[data-theme="dark"] .juju-ghost-btn:active,
html[data-theme="dark"] .juju-round-button:active{ transform:scale(.94); }
html[data-theme="dark"] .juju-reaction-chip,
html[data-theme="dark"] .juju-mention-chip,
html[data-theme="dark"] .juju-client-chip{ border-radius:var(--r-pill); transition:transform 90ms var(--ease),background var(--dur) var(--ease); }
html[data-theme="dark"] .juju-reaction-chip:active{ transform:scale(.92); }
html[data-theme="dark"] .juju-nav-item{ border-radius:var(--r-md); transition:background var(--dur) var(--ease); }
html[data-theme="dark"] .juju-nav-item:hover{ background:rgba(139,121,245,.1); }
html[data-theme="dark"] .juju-nav-item.is-active{ background:rgba(139,121,245,.16); }
html[data-theme="dark"] .juju-composer,
html[data-theme="dark"] #groupSearch{ background:var(--color-code-bg); border-radius:var(--r-lg); box-shadow:inset 0 1px 2px rgba(0,0,0,.3); transition:box-shadow var(--dur) var(--ease); }
html[data-theme="dark"] .juju-composer:focus-within,
html[data-theme="dark"] #groupSearch:focus-within{ box-shadow:0 0 0 2px rgba(139,121,245,.45); }

/* —— 排版细节 —— */
html[data-theme="dark"] .juju-thread-header #chatName{ font-weight:600; letter-spacing:0; }
html[data-theme="dark"] .juju-task-status{ letter-spacing:.01em; font-variant-numeric:tabular-nums; }

/* —— 头像:有厚度的圆盘 —— */
html[data-theme="dark"] .juju-avatar{ box-shadow:var(--elev-1),inset 0 1px 0 rgba(255,255,255,.06); }

/* ============================================================
   新 IA 组件(Codex 按 IA-SPEC 加这些类后生效)
   —— 生命卡 / 呼吸光晕 / 活儿流水 / 钉顶在场 ——
   ============================================================ */
/* 光晕:沿用 app.css 的柔和径向渐变,只做"极淡的呼吸";idle 近乎不可见。
   不再覆盖 .juju-life-card 与 .juju-life-aura 的底色/布局(交给 app.css,
   避免把柔光换成实色强光 —— 这是上一版"光晕太强"的根因)。 */
@keyframes juju-aura{0%,100%{opacity:.12}50%{opacity:.20}}
html[data-theme="dark"] .juju-life-aura,
html[data-theme="dark"] .juju-pin-aura{ animation:juju-aura 5s ease-in-out infinite; }
html[data-theme="dark"] .juju-life-card[data-life="idle"] .juju-life-aura,
html[data-theme="dark"] .juju-life-card.empty .juju-life-aura{ opacity:.05; animation:none; }
html[data-theme="dark"] .juju-life-name{ color:var(--agent,#8B79F5); font-weight:600; }

html[data-theme="dark"] .juju-life-card{ background:#1B1B25; border:1px solid #2A2A38; }
html[data-theme="dark"] .juju-life-card.empty{ background:#181820; border-color:#23232F; }
html[data-theme="dark"] .juju-life-card .juju-avatar{
  width:52px; height:52px; border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.10);
}
html[data-theme="dark"] .juju-life-name{ font-size:16px; letter-spacing:0; }
html[data-theme="dark"] .juju-life-role{ color:var(--color-text-weak); }
html[data-theme="dark"] .juju-life-state{
  background:color-mix(in srgb, var(--agent,#8B79F5) 16%, transparent);
  color:var(--agent,#8B79F5);
}

html[data-theme="dark"] :is(.juju-life-card,.juju-pin) .juju-avatar-base{
  transform:none; font-size:19px; font-weight:700; width:auto; height:auto; color:#fff;
}
html[data-theme="dark"] :is(.juju-life-card,.juju-pin) .juju-avatar-expression{
  inset:auto -2px -3px auto; width:17px; height:17px; font-size:11px;
  display:grid; place-items:center; background:var(--color-card,#1B1B25);
  border-radius:50%; box-shadow:0 0 0 2px var(--color-card,#1B1B25);
}
html[data-theme="dark"] .juju-avatar.life-online .juju-avatar-expression,
html[data-theme="dark"] .juju-avatar.life-idle .juju-avatar-expression{ display:none; }

html[data-theme="dark"] :is(.juju-life-card,.juju-pin,.juju-progress-agent-list,.juju-member-list,.juju-roster,#memberList,.juju-agent-line) .juju-avatar{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px rgba(0,0,0,.3);
}
html[data-theme="dark"] :is(.juju-life-card,.juju-pin,.juju-progress-agent-list,.juju-member-list,.juju-roster,#memberList,.juju-agent-line) .juju-avatar.violet{ background:linear-gradient(150deg,#7A68EC,#4A3D9E); }
html[data-theme="dark"] :is(.juju-life-card,.juju-pin,.juju-progress-agent-list,.juju-member-list,.juju-roster,#memberList,.juju-agent-line) .juju-avatar.blue{ background:linear-gradient(150deg,#5A9BF0,#2E5FAE); }
html[data-theme="dark"] :is(.juju-life-card,.juju-pin,.juju-progress-agent-list,.juju-member-list,.juju-roster,#memberList,.juju-agent-line) .juju-avatar.teal{ background:linear-gradient(150deg,#40C6D8,#2A8B98); }
html[data-theme="dark"] :is(.juju-life-card,.juju-pin,.juju-progress-agent-list,.juju-member-list,.juju-roster,#memberList,.juju-agent-line) .juju-avatar.amber{ background:linear-gradient(150deg,#ECA63F,#B0701C); }
html[data-theme="dark"] :is(.juju-life-card,.juju-pin,.juju-progress-agent-list,.juju-member-list,.juju-roster,#memberList,.juju-agent-line) .juju-avatar.rose{ background:linear-gradient(150deg,#F07BA7,#B84B78); }
html[data-theme="dark"] :is(.juju-life-card,.juju-pin,.juju-progress-agent-list,.juju-member-list,.juju-roster,#memberList,.juju-agent-line) .juju-avatar.dark,
html[data-theme="dark"] :is(.juju-life-card,.juju-pin,.juju-progress-agent-list,.juju-member-list,.juju-roster,#memberList,.juju-agent-line) .juju-avatar.green{ background:linear-gradient(150deg,#3FBE86,#2B7E5B); }

/* 活儿流水 */
html[data-theme="dark"] .juju-flow-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; justify-items:start; gap:10px; padding:8px 11px 8px 4px; border-radius:9px; font-size:13px; transition:background var(--dur) var(--ease); }
html[data-theme="dark"] .juju-flow-row:hover{ background:#1E1E28; }

/* 进对话:钉顶在场条 */
html[data-theme="dark"] .juju-pin{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:#1A1A23; box-shadow:0 1px 0 rgba(0,0,0,.3); }
html[data-theme="dark"] .juju-pin-aura{ position:absolute; inset:-8px; border-radius:50%; }

/* —— 质量地板 —— */
html[data-theme="dark"] :focus-visible{ outline:2px solid var(--color-brand); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){
  html[data-theme="dark"] .juju-life-aura,
  html[data-theme="dark"] .juju-pin-aura{ animation:none; }
  html[data-theme="dark"] .juju-task-card,
  html[data-theme="dark"] .juju-btn{ transition:none; transform:none; }
}

/* Identity color alignment, pill tint, role wrapping, and quiet empty cards. */
html[data-theme="dark"] .juju-life-card.violet,
html[data-theme="dark"] .juju-pin.violet{ --agent:#8B79F5; }
html[data-theme="dark"] .juju-life-card.blue,
html[data-theme="dark"] .juju-pin.blue{ --agent:#5A9BF0; }
html[data-theme="dark"] .juju-life-card.teal,
html[data-theme="dark"] .juju-pin.teal{ --agent:#40C6D8; }
html[data-theme="dark"] .juju-life-card.amber,
html[data-theme="dark"] .juju-pin.amber{ --agent:#ECA63F; }
html[data-theme="dark"] .juju-life-card.rose,
html[data-theme="dark"] .juju-pin.rose{ --agent:#F07BA7; }
html[data-theme="dark"] .juju-life-card.dark,
html[data-theme="dark"] .juju-pin.dark,
html[data-theme="dark"] .juju-life-card.green,
html[data-theme="dark"] .juju-pin.green{ --agent:#3FBE86; }

html[data-theme="dark"] .juju-life-card .juju-life-state,
html[data-theme="dark"] .juju-pin .juju-life-state{
  background-color:color-mix(in srgb, var(--agent,#8B79F5) 18%, transparent) !important;
  color:var(--agent,#8B79F5);
}

html[data-theme="dark"] .juju-life-card-top{ align-items:start; }
html[data-theme="dark"] .juju-life-role{
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-height:1.35;
}

html[data-theme="dark"] .juju-life-card.empty .juju-life-doing{ display:none; }
html[data-theme="dark"] .juju-life-card.empty{ grid-template-rows:auto auto; }