/* ============================================================
   GTALK(지톡) — 테마 8종 (CSS 변수 시스템)
   body[data-theme="..."] 로 전환. 새 테마 추가는 블록 복사로 끝.
   변수 목록:
   --bg-base / --bg-1 / --bg-2 / --panel / --panel-2 / --border
   --text / --muted / --accent / --accent-2 / --accent-text
   --bubble-in / --bubble-in-text / --bubble-out / --bubble-out-text
   --danger / --ok / --input-bg / --shadow / --chip
   ============================================================ */

/* 1) 미드나잇 — 기본 다크 (인디고 + 바이올렛) */
[data-theme="midnight"] {
  --bg-base: #070a14;
  --bg-1: rgba(99, 102, 241, 0.22);
  --bg-2: rgba(168, 85, 247, 0.16);
  --panel: rgba(15, 19, 34, 0.8);
  --panel-2: rgba(255, 255, 255, 0.05);
  --border: rgba(148, 163, 184, 0.15);
  --text: #e8ecf6;
  --muted: #8b94ad;
  --accent: #6366f1;
  --accent-2: #a855f7;
  --accent-text: #ffffff;
  --bubble-in: rgba(255, 255, 255, 0.07);
  --bubble-in-text: #e8ecf6;
  --bubble-out: linear-gradient(135deg, #6366f1, #a855f7);
  --bubble-out-text: #ffffff;
  --danger: #f87171;
  --ok: #34d399;
  --input-bg: rgba(0, 0, 0, 0.35);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --chip: rgba(255, 255, 255, 0.07);
}

/* 2) 네온 사이버 — 블랙 + 네온 그린/시안 */
[data-theme="neon"] {
  --bg-base: #04070a;
  --bg-1: rgba(0, 255, 163, 0.1);
  --bg-2: rgba(0, 213, 255, 0.1);
  --panel: rgba(6, 12, 10, 0.86);
  --panel-2: rgba(0, 255, 163, 0.06);
  --border: rgba(0, 255, 163, 0.2);
  --text: #e6fff4;
  --muted: #5f8a78;
  --accent: #00ffa3;
  --accent-2: #00d5ff;
  --accent-text: #03130c;
  --bubble-in: rgba(0, 255, 163, 0.08);
  --bubble-in-text: #e6fff4;
  --bubble-out: linear-gradient(135deg, #00ffa3, #00d5ff);
  --bubble-out-text: #03130c;
  --danger: #ff3b6b;
  --ok: #00ffa3;
  --input-bg: rgba(0, 0, 0, 0.5);
  --shadow: 0 0 40px rgba(0, 255, 163, 0.08), 0 20px 60px rgba(0, 0, 0, 0.6);
  --chip: rgba(0, 255, 163, 0.1);
}

/* 3) 노르드 — 북유럽 쿨 그레이블루 */
[data-theme="nord"] {
  --bg-base: #242933;
  --bg-1: rgba(136, 192, 208, 0.14);
  --bg-2: rgba(129, 161, 193, 0.14);
  --panel: rgba(59, 66, 82, 0.82);
  --panel-2: rgba(255, 255, 255, 0.05);
  --border: rgba(216, 222, 233, 0.14);
  --text: #eceff4;
  --muted: #9aa3b2;
  --accent: #88c0d0;
  --accent-2: #81a1c1;
  --accent-text: #2e3440;
  --bubble-in: rgba(76, 86, 106, 0.7);
  --bubble-in-text: #eceff4;
  --bubble-out: linear-gradient(135deg, #88c0d0, #81a1c1);
  --bubble-out-text: #2e3440;
  --danger: #bf616a;
  --ok: #a3be8c;
  --input-bg: rgba(46, 52, 64, 0.7);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  --chip: rgba(136, 192, 208, 0.12);
}

/* 4) 드라큘라 — 보라 다크 */
[data-theme="dracula"] {
  --bg-base: #1d1f2b;
  --bg-1: rgba(189, 147, 249, 0.16);
  --bg-2: rgba(255, 121, 198, 0.1);
  --panel: rgba(40, 42, 54, 0.85);
  --panel-2: rgba(255, 255, 255, 0.05);
  --border: rgba(189, 147, 249, 0.2);
  --text: #f8f8f2;
  --muted: #9b9fb1;
  --accent: #bd93f9;
  --accent-2: #ff79c6;
  --accent-text: #282a36;
  --bubble-in: rgba(68, 71, 90, 0.8);
  --bubble-in-text: #f8f8f2;
  --bubble-out: linear-gradient(135deg, #bd93f9, #ff79c6);
  --bubble-out-text: #282a36;
  --danger: #ff5555;
  --ok: #50fa7b;
  --input-bg: rgba(24, 25, 34, 0.8);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  --chip: rgba(189, 147, 249, 0.14);
}

/* 5) 솔라 라이트 — 눈이 편한 라이트 */
[data-theme="solar"] {
  --bg-base: #fdf6e3;
  --bg-1: rgba(181, 137, 0, 0.1);
  --bg-2: rgba(42, 161, 152, 0.1);
  --panel: rgba(255, 255, 255, 0.75);
  --panel-2: rgba(101, 123, 131, 0.08);
  --border: rgba(101, 123, 131, 0.28);
  --text: #47585e;
  --muted: #93a1a1;
  --accent: #268bd2;
  --accent-2: #2aa198;
  --accent-text: #ffffff;
  --bubble-in: #eee8d5;
  --bubble-in-text: #47585e;
  --bubble-out: linear-gradient(135deg, #268bd2, #2aa198);
  --bubble-out-text: #ffffff;
  --danger: #dc322f;
  --ok: #859900;
  --input-bg: rgba(255, 255, 255, 0.9);
  --shadow: 0 20px 50px rgba(101, 123, 131, 0.2);
  --chip: rgba(38, 139, 210, 0.1);
}

/* 6) 선셋 — 따뜻한 석양 */
[data-theme="sunset"] {
  --bg-base: #fff7ed;
  --bg-1: rgba(251, 146, 60, 0.22);
  --bg-2: rgba(244, 114, 182, 0.16);
  --panel: rgba(255, 255, 255, 0.78);
  --panel-2: rgba(194, 65, 12, 0.06);
  --border: rgba(194, 65, 12, 0.18);
  --text: #7c2d12;
  --muted: #b07a4e;
  --accent: #f97316;
  --accent-2: #ec4899;
  --accent-text: #ffffff;
  --bubble-in: #ffedd5;
  --bubble-in-text: #7c2d12;
  --bubble-out: linear-gradient(135deg, #f97316, #ec4899);
  --bubble-out-text: #ffffff;
  --danger: #dc2626;
  --ok: #16a34a;
  --input-bg: rgba(255, 255, 255, 0.92);
  --shadow: 0 20px 50px rgba(194, 65, 12, 0.16);
  --chip: rgba(249, 115, 22, 0.12);
}

/* 7) 포레스트 — 딥 그린 */
[data-theme="forest"] {
  --bg-base: #060f0a;
  --bg-1: rgba(34, 197, 94, 0.14);
  --bg-2: rgba(163, 230, 53, 0.08);
  --panel: rgba(9, 22, 15, 0.86);
  --panel-2: rgba(34, 197, 94, 0.07);
  --border: rgba(34, 197, 94, 0.2);
  --text: #dcfce7;
  --muted: #6fa287;
  --accent: #22c55e;
  --accent-2: #a3e635;
  --accent-text: #052e16;
  --bubble-in: rgba(34, 197, 94, 0.1);
  --bubble-in-text: #dcfce7;
  --bubble-out: linear-gradient(135deg, #22c55e, #a3e635);
  --bubble-out-text: #052e16;
  --danger: #f87171;
  --ok: #4ade80;
  --input-bg: rgba(0, 0, 0, 0.4);
  --shadow: 0 0 40px rgba(34, 197, 94, 0.07), 0 20px 60px rgba(0, 0, 0, 0.55);
  --chip: rgba(34, 197, 94, 0.12);
}

/* 8) 모노 — 미니멀 흑백 라이트 */
[data-theme="mono"] {
  --bg-base: #f4f4f5;
  --bg-1: rgba(24, 24, 27, 0.06);
  --bg-2: rgba(113, 113, 122, 0.1);
  --panel: rgba(255, 255, 255, 0.82);
  --panel-2: rgba(24, 24, 27, 0.045);
  --border: rgba(24, 24, 27, 0.12);
  --text: #18181b;
  --muted: #71717a;
  --accent: #18181b;
  --accent-2: #52525b;
  --accent-text: #fafafa;
  --bubble-in: #e4e4e7;
  --bubble-in-text: #18181b;
  --bubble-out: linear-gradient(135deg, #18181b, #3f3f46);
  --bubble-out-text: #fafafa;
  --danger: #dc2626;
  --ok: #16a34a;
  --input-bg: rgba(255, 255, 255, 0.95);
  --shadow: 0 20px 50px rgba(24, 24, 27, 0.12);
  --chip: rgba(24, 24, 27, 0.07);
}

/* ---------- 테마 선택 버튼 미리보기 ---------- */
.theme-btn .swatch { background: linear-gradient(135deg, var(--a), var(--b)); }
.theme-btn[data-t="midnight"] .swatch { --a: #6366f1; --b: #a855f7; }
.theme-btn[data-t="neon"] .swatch { --a: #00ffa3; --b: #00d5ff; }
.theme-btn[data-t="nord"] .swatch { --a: #88c0d0; --b: #81a1c1; }
.theme-btn[data-t="dracula"] .swatch { --a: #bd93f9; --b: #ff79c6; }
.theme-btn[data-t="solar"] .swatch { --a: #268bd2; --b: #2aa198; }
.theme-btn[data-t="sunset"] .swatch { --a: #f97316; --b: #ec4899; }
.theme-btn[data-t="forest"] .swatch { --a: #22c55e; --b: #a3e635; }
.theme-btn[data-t="mono"] .swatch { --a: #18181b; --b: #a1a1aa; }