/* KoozhenStudio Theme System — full-token bridge + premium picker
 * v20260714theme2  Fixes: --ng bridge + kill stuck color transitions
 * (Rule9: transition running@currentTime=0 freezes chrome colors)
 */

/* ---------- kill hard-coded page bg that blocked themes ---------- */
html, body {
  background: var(--bg) !important;
  color: var(--text);
}

/* Ambient wash follows accent (was fixed purple/cyan) */
body {
  background-image:
    radial-gradient(circle at 18% 42%, rgba(var(--accent-rgb), 0.10) 0%, transparent 52%),
    radial-gradient(circle at 82% 18%, rgba(var(--accent-rgb), 0.06) 0%, transparent 48%),
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px !important;
  background-color: var(--bg) !important;
}

/* Bridge legacy tokens ↔ silicon-valley --ng-* tokens */
:root, html[data-theme="aurora"] {
  --bg: #0f0f1a;
  --surface: #1a1a2e;
  --surface2: #252545;
  --accent: #6c63ff;
  --accent-rgb: 108, 99, 255;
  --accent-hover: #5a52e0;
  --success: #4ecdc4;
  --warning: #ffe66d;
  --danger: #ff6b6b;
  --text: #eaeaea;
  --text-dim: #8888aa;

  --ng-bg: #080D18;
  --ng-surface-1: #101827;
  --ng-surface-2: #162238;
  --ng-border: rgba(108, 99, 255, 0.18);
  --ng-border-strong: rgba(108, 99, 255, 0.32);
  --ng-text-1: #F1F5F9;
  --ng-text-2: #A8B3C7;
  --ng-text-3: #718096;
  --ng-primary: #7C6CF2;
  --ng-primary-hover: #8B7CF6;
  --ng-aurora-cyan: #33C6D4;
  --ng-success: #3CCB9A;
  --ng-warning: #F2B84B;
  --ng-danger: #F06A78;
  --ng-info: #5FA8FF;
  --ng-accent: var(--accent);
  --ng-accent-2: var(--success);
  --toolbar-bg: rgb(20, 20, 36); /* [20260923] 不透明：避免预览画面透上来形成灰罩 */
  --panel-glow: rgba(108, 99, 255, 0.12);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #F7F9F9;
  --surface: #FFFFFF;
  --surface2: #EEF3F3;
  --accent: #7C6CF3;
  --accent-rgb: 124, 108, 243;
  --accent-hover: #6959E8;
  --success: #47B4B0;
  --warning: #A86B16;
  --danger: #C94E5D;
  --text: #1B1A34;
  --text-dim: #5D6570;

  --ng-bg: #F7F9F9;
  --ng-surface-1: #FFFFFF;
  --ng-surface-2: #EEF3F3;
  --ng-border: rgba(27, 26, 52, 0.14);
  --ng-border-strong: rgba(27, 26, 52, 0.24);
  --ng-text-1: #1B1A34;
  --ng-text-2: #5D6570;
  --ng-text-3: #7B858F;
  --ng-primary: #7C6CF3;
  --ng-primary-hover: #6959E8;
  --ng-aurora-cyan: #47B4B0;
  --ng-success: #47B4B0;
  --ng-warning: #A86B16;
  --ng-danger: #C94E5D;
  --ng-info: #5969C9;
  --ng-accent: var(--accent);
  --ng-accent-2: var(--success);
  --toolbar-bg: rgb(247, 249, 249); /* [20260923] 不透明：避免预览画面透上来形成灰罩 */
  --panel-glow: rgba(124, 108, 243, 0.10);
}

html[data-theme="midnight"] {
  --bg: #070b16;
  --surface: #0f172a;
  --surface2: #1a2744;
  --accent: #3b82f6;
  --accent-rgb: 59, 130, 246;
  --accent-hover: #2563eb;
  --success: #22d3ee;
  --warning: #fbbf24;
  --danger: #f87171;
  --text: #e6edf7;
  --text-dim: #7c92b0;

  --ng-bg: #050914;
  --ng-surface-1: #0c1426;
  --ng-surface-2: #15213a;
  --ng-border: rgba(59, 130, 246, 0.18);
  --ng-border-strong: rgba(59, 130, 246, 0.34);
  --ng-text-1: #E8EEF9;
  --ng-text-2: #93A4C3;
  --ng-text-3: #64789A;
  --ng-primary: #3B82F6;
  --ng-primary-hover: #60A5FA;
  --ng-aurora-cyan: #22D3EE;
  --ng-success: #2DD4BF;
  --ng-warning: #FBBF24;
  --ng-danger: #F87171;
  --ng-info: #38BDF8;
  --ng-accent: var(--accent);
  --ng-accent-2: var(--success);
  --toolbar-bg: rgb(12, 20, 40); /* [20260923] 不透明：避免预览画面透上来形成灰罩 */
  --panel-glow: rgba(59, 130, 246, 0.14);
}

html[data-theme="forest"] {
  --bg: #08110e;
  --surface: #10201a;
  --surface2: #1a3228;
  --accent: #34d399;
  --accent-rgb: 52, 211, 153;
  --accent-hover: #10b981;
  --success: #6ee7b7;
  --warning: #fcd34d;
  --danger: #fb7185;
  --text: #e7f2ec;
  --text-dim: #7fa494;

  --ng-bg: #060e0b;
  --ng-surface-1: #0c1a15;
  --ng-surface-2: #152920;
  --ng-border: rgba(52, 211, 153, 0.18);
  --ng-border-strong: rgba(52, 211, 153, 0.34);
  --ng-text-1: #E8F7F0;
  --ng-text-2: #93B8A8;
  --ng-text-3: #628578;
  --ng-primary: #34D399;
  --ng-primary-hover: #6EE7B7;
  --ng-aurora-cyan: #2DD4BF;
  --ng-success: #4ADE80;
  --ng-warning: #FCD34D;
  --ng-danger: #FB7185;
  --ng-info: #5EEAD4;
  --ng-accent: var(--accent);
  --ng-accent-2: var(--success);
  --toolbar-bg: rgb(12, 28, 22); /* [20260923] 不透明：避免预览画面透上来形成灰罩 */
  --panel-glow: rgba(52, 211, 153, 0.14);
}

html[data-theme="sunset"] {
  --bg: #140c10;
  --surface: #22151c;
  --surface2: #35212b;
  --accent: #fb7185;
  --accent-rgb: 251, 113, 133;
  --accent-hover: #f43f5e;
  --success: #fbbf24;
  --warning: #fdba74;
  --danger: #ef4444;
  --text: #f6e9ec;
  --text-dim: #b78a95;

  --ng-bg: #10090d;
  --ng-surface-1: #1a1016;
  --ng-surface-2: #2a1822;
  --ng-border: rgba(251, 113, 133, 0.20);
  --ng-border-strong: rgba(251, 113, 133, 0.36);
  --ng-text-1: #F9ECEF;
  --ng-text-2: #C49AA5;
  --ng-text-3: #916875;
  --ng-primary: #FB7185;
  --ng-primary-hover: #FDA4AF;
  --ng-aurora-cyan: #FBBF24;
  --ng-success: #FBBF24;
  --ng-warning: #FDBA74;
  --ng-danger: #EF4444;
  --ng-info: #FB923C;
  --ng-accent: var(--accent);
  --ng-accent-2: var(--success);
  --toolbar-bg: rgb(32, 16, 24); /* [20260923] 不透明：避免预览画面透上来形成灰罩 */
  --panel-glow: rgba(251, 113, 133, 0.14);
}

html[data-theme="slate"] {
  --bg: #0c0e12;
  --surface: #151920;
  --surface2: #222733;
  --accent: #94a3b8;
  --accent-rgb: 148, 163, 184;
  --accent-hover: #7c8ba0;
  --success: #5eead4;
  --warning: #fde68a;
  --danger: #fca5a5;
  --text: #e8eaef;
  --text-dim: #8a91a0;

  --ng-bg: #0a0c10;
  --ng-surface-1: #12151b;
  --ng-surface-2: #1c212b;
  --ng-border: rgba(148, 163, 184, 0.16);
  --ng-border-strong: rgba(148, 163, 184, 0.30);
  --ng-text-1: #EEF1F6;
  --ng-text-2: #A0A8B8;
  --ng-text-3: #6B7384;
  --ng-primary: #94A3B8;
  --ng-primary-hover: #CBD5E1;
  --ng-aurora-cyan: #5EEAD4;
  --ng-success: #5EEAD4;
  --ng-warning: #FDE68A;
  --ng-danger: #FCA5A5;
  --ng-info: #93C5FD;
  --ng-accent: var(--accent);
  --ng-accent-2: var(--success);
  --toolbar-bg: rgb(18, 20, 26); /* [20260923] 不透明：避免预览画面透上来形成灰罩 */
  --panel-glow: rgba(148, 163, 184, 0.10);
}

html[data-theme="rose"] {
  --bg: #130c12;
  --surface: #211520;
  --surface2: #322031;
  --accent: #ec4899;
  --accent-rgb: 236, 72, 153;
  --accent-hover: #db2777;
  --success: #f0abfc;
  --warning: #fda4af;
  --danger: #fb7185;
  --text: #f6e9f2;
  --text-dim: #b487a8;

  --ng-bg: #100910;
  --ng-surface-1: #1a111a;
  --ng-surface-2: #2a1a29;
  --ng-border: rgba(236, 72, 153, 0.20);
  --ng-border-strong: rgba(236, 72, 153, 0.36);
  --ng-text-1: #F9ECF4;
  --ng-text-2: #C49BB5;
  --ng-text-3: #916480;
  --ng-primary: #EC4899;
  --ng-primary-hover: #F472B6;
  --ng-aurora-cyan: #E879F9;
  --ng-success: #F0ABFC;
  --ng-warning: #FDA4AF;
  --ng-danger: #FB7185;
  --ng-info: #F9A8D4;
  --ng-accent: var(--accent);
  --ng-accent-2: var(--success);
  --toolbar-bg: rgb(30, 16, 28); /* [20260923] 不透明：避免预览画面透上来形成灰罩 */
  --panel-glow: rgba(236, 72, 153, 0.14);
}

/* ---------- studio chrome: follow theme ---------- */
.preview-toolbar {
  background: var(--toolbar-bg) !important;
  border-color: rgba(var(--accent-rgb), 0.16) !important;
  box-shadow: 0 4px 22px rgba(0,0,0,0.30), 0 0 0 1px rgba(var(--accent-rgb), 0.06) !important;
}

.asset-rail,
#assetRail {
  background: var(--surface) !important;
  border-left-color: rgba(var(--accent-rgb), 0.14) !important;
}

.composer {
  background: var(--surface) !important;
  border-color: rgba(var(--accent-rgb), 0.16) !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.04), 0 8px 28px rgba(0,0,0,0.18);
}

.composer:focus-within {
  border-color: rgba(var(--accent-rgb), 0.45) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16), 0 8px 28px rgba(0,0,0,0.22) !important;
}

.ptb-btn:hover {
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb), 0.40) !important;
  background: rgba(var(--accent-rgb), 0.10) !important;
}

.theme-btn {
  border-color: rgba(var(--accent-rgb), 0.22) !important;
  position: relative;
}

/* Live accent chip on Theme button so current palette is obvious */
.theme-btn::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 6px;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.28);
  flex-shrink: 0;
}

/* Studio chrome that still used fixed aurora/midnight blues */
.studio-topbar,
.topbar {
  background: var(--surface) !important;
  border-bottom-color: rgba(var(--accent-rgb), 0.12) !important;
}

.chat-panel {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface) 72%, transparent) 0%,
    color-mix(in srgb, var(--bg) 96%, #000) 100%
  ) !important;
  border-right-color: rgba(var(--accent-rgb), 0.10) !important;
}

.preview-panel,
.preview-frame-container {
  background: var(--bg) !important;
}

.theme-pop {
  background: color-mix(in srgb, var(--surface) 92%, #000) !important;
  border-color: rgba(var(--accent-rgb), 0.22) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--accent-rgb), 0.10) !important;
}

/* NO global color transitions — they stuck at currentTime=0 in Electron */

/* ---------- premium theme picker ---------- */
.theme-pop {
  min-width: 280px !important;
  padding: 12px !important;
  background: color-mix(in srgb, var(--surface2) 92%, #000 8%) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.22) !important;
  border-radius: 14px !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 40px var(--panel-glow) !important;
  backdrop-filter: blur(16px) saturate(1.2);
}

.theme-pop-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important;
  padding: 2px 4px 10px !important;
}

.theme-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.theme-opt {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease !important;
  position: relative;
}

.theme-opt:hover {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(var(--accent-rgb), 0.28) !important;
  transform: translateY(-1px);
}

.theme-opt.active {
  background: rgba(var(--accent-rgb), 0.10) !important;
  border-color: rgba(var(--accent-rgb), 0.45) !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18), inset 0 0 20px rgba(var(--accent-rgb), 0.06) !important;
  font-weight: 600 !important;
}

/* hide old checkmark pseudo — use ring on swatch instead */
.theme-opt.active::after {
  content: none !important;
}

.theme-opt .tsw {
  width: 100% !important;
  height: 44px !important;
  border-radius: 8px !important;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10) !important;
  /* mini UI mock: left rail + accent bar */
  background:
    linear-gradient(90deg, var(--a) 0 28%, transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.08) 0 10px, transparent 10px),
    linear-gradient(135deg, var(--a), var(--b)) !important;
  background-color: color-mix(in srgb, var(--a) 35%, #0a0a12) !important;
}

.theme-opt .tsw::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--b);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
}

.theme-opt.active .tsw {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.14),
    0 0 0 2px rgba(var(--accent-rgb), 0.55) !important;
}

.theme-opt .tmeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.theme-opt .tname {
  font-size: 12px;
  line-height: 1.2;
  color: var(--text);
}

.theme-opt .tdesc {
  font-size: 10px;
  line-height: 1.2;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-opt.active .tname {
  color: var(--accent);
}