/**
 * TbaiClub — 4 temas extra (Esmeralda / Rubí / Ámbar / Océano).
 *
 * Se cargan DESPUÉS de tbai-chat-themes.css y añaden 4 nuevas opciones
 * al atributo data-tbai-chat-theme en .tbaiclub-root / .ftbai-panel.
 *
 * Diseño: mismas variables --tbai-chat-* que los 4 base. Paleta vistosa
 * con buen contraste en modo oscuro (excepto "amber" que es cálido claro).
 */

/* ═══════════════════════════════════════════════════════════════════
 * ESMERALDA — verde vivo con acentos dorados
 * ═══════════════════════════════════════════════════════════════════ */
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='emerald'] {
  --tbai-chat-dark-bg: #0b1f15;
  --tbai-chat-glass-bg: rgba(11, 31, 21, 0.78);
  --tbai-chat-bubble-opt: rgba(16, 44, 30, 0.45);
  --tbai-chat-cyan: #34d399;
  --tbai-chat-purple: #facc15;
  --tbai-chat-text: #e8fff2;
  --tbai-chat-text-muted: #86efac;
  --tbai-chat-border: #14532d;
  --tbai-chat-badge-admin-bg: rgba(250, 204, 21, 0.12);
  --tbai-chat-badge-pro-bg: rgba(52, 211, 153, 0.14);
  --tbai-chat-badge-glow-admin: 0 0 5px rgba(250, 204, 21, 0.45);
  --tbai-chat-badge-glow-pro: 0 0 5px rgba(52, 211, 153, 0.45);
  --tbai-chat-scrollbar-thumb: #14532d;
  --tbai-chat-scrollbar-thumb-hover: #34d399;
  --tbai-chat-scrollbar-track: rgba(11, 31, 21, 0.5);
  --tbai-chat-focus-glow: 0 0 15px rgba(52, 211, 153, 0.35);
  --tbai-chat-send-hover-glow: 0 0 10px rgba(250, 204, 21, 0.55);
  --tbai-chat-chip-border: rgba(52, 211, 153, 0.35);
}
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='emerald'] .tbai-sidebar,
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='emerald'] .ftbai-sidebar {
  background: linear-gradient(180deg, rgba(11, 31, 21, 0.9), rgba(6, 20, 14, 0.95));
  border-right: 1px solid rgba(52, 211, 153, 0.15);
}
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='emerald'] .tbai-main,
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='emerald'] .ftbai-body {
  background: radial-gradient(120% 80% at 50% 0%, rgba(52, 211, 153, 0.05), transparent 60%), #0b1f15;
}
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='emerald'] .tbai-channel-header {
  background: linear-gradient(180deg, rgba(20, 83, 45, 0.35), rgba(11, 31, 21, 0.2));
  border-bottom: 1px solid rgba(52, 211, 153, 0.2);
}
body:has(:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='emerald']) {
  --club-accent: #34d399;
  --club-accent-glow: rgba(52, 211, 153, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════
 * RUBÍ — rojo profundo con acentos ámbar
 * ═══════════════════════════════════════════════════════════════════ */
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='ruby'] {
  --tbai-chat-dark-bg: #1f0a12;
  --tbai-chat-glass-bg: rgba(31, 10, 18, 0.8);
  --tbai-chat-bubble-opt: rgba(52, 15, 26, 0.5);
  --tbai-chat-cyan: #fb7185;
  --tbai-chat-purple: #fbbf24;
  --tbai-chat-text: #fff1f2;
  --tbai-chat-text-muted: #fda4af;
  --tbai-chat-border: #881337;
  --tbai-chat-badge-admin-bg: rgba(251, 191, 36, 0.14);
  --tbai-chat-badge-pro-bg: rgba(251, 113, 133, 0.14);
  --tbai-chat-badge-glow-admin: 0 0 5px rgba(251, 191, 36, 0.5);
  --tbai-chat-badge-glow-pro: 0 0 5px rgba(251, 113, 133, 0.45);
  --tbai-chat-scrollbar-thumb: #881337;
  --tbai-chat-scrollbar-thumb-hover: #fb7185;
  --tbai-chat-scrollbar-track: rgba(31, 10, 18, 0.5);
  --tbai-chat-focus-glow: 0 0 15px rgba(251, 113, 133, 0.35);
  --tbai-chat-send-hover-glow: 0 0 10px rgba(251, 191, 36, 0.55);
  --tbai-chat-chip-border: rgba(251, 113, 133, 0.4);
}
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='ruby'] .tbai-sidebar,
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='ruby'] .ftbai-sidebar {
  background: linear-gradient(180deg, rgba(31, 10, 18, 0.92), rgba(17, 5, 10, 0.95));
  border-right: 1px solid rgba(251, 113, 133, 0.15);
}
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='ruby'] .tbai-main,
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='ruby'] .ftbai-body {
  background: radial-gradient(120% 80% at 50% 0%, rgba(251, 113, 133, 0.06), transparent 60%), #1f0a12;
}
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='ruby'] .tbai-channel-header {
  background: linear-gradient(180deg, rgba(136, 19, 55, 0.4), rgba(31, 10, 18, 0.2));
  border-bottom: 1px solid rgba(251, 113, 133, 0.2);
}
body:has(:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='ruby']) {
  --club-accent: #fb7185;
  --club-accent-glow: rgba(251, 113, 133, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════
 * ÁMBAR — cálido dorado (oscuro con acentos naranjas)
 * ═══════════════════════════════════════════════════════════════════ */
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='amber'] {
  --tbai-chat-dark-bg: #1c1407;
  --tbai-chat-glass-bg: rgba(28, 20, 7, 0.82);
  --tbai-chat-bubble-opt: rgba(45, 32, 12, 0.5);
  --tbai-chat-cyan: #fbbf24;
  --tbai-chat-purple: #fb923c;
  --tbai-chat-text: #fffbeb;
  --tbai-chat-text-muted: #fcd34d;
  --tbai-chat-border: #78350f;
  --tbai-chat-badge-admin-bg: rgba(251, 146, 60, 0.14);
  --tbai-chat-badge-pro-bg: rgba(251, 191, 36, 0.14);
  --tbai-chat-badge-glow-admin: 0 0 5px rgba(251, 146, 60, 0.5);
  --tbai-chat-badge-glow-pro: 0 0 5px rgba(251, 191, 36, 0.55);
  --tbai-chat-scrollbar-thumb: #78350f;
  --tbai-chat-scrollbar-thumb-hover: #fbbf24;
  --tbai-chat-scrollbar-track: rgba(28, 20, 7, 0.5);
  --tbai-chat-focus-glow: 0 0 15px rgba(251, 191, 36, 0.4);
  --tbai-chat-send-hover-glow: 0 0 10px rgba(251, 146, 60, 0.55);
  --tbai-chat-chip-border: rgba(251, 191, 36, 0.4);
}
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='amber'] .tbai-sidebar,
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='amber'] .ftbai-sidebar {
  background: linear-gradient(180deg, rgba(28, 20, 7, 0.92), rgba(15, 10, 4, 0.95));
  border-right: 1px solid rgba(251, 191, 36, 0.15);
}
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='amber'] .tbai-main,
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='amber'] .ftbai-body {
  background: radial-gradient(120% 80% at 50% 0%, rgba(251, 191, 36, 0.06), transparent 60%), #1c1407;
}
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='amber'] .tbai-channel-header {
  background: linear-gradient(180deg, rgba(120, 53, 15, 0.35), rgba(28, 20, 7, 0.2));
  border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}
body:has(:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='amber']) {
  --club-accent: #fbbf24;
  --club-accent-glow: rgba(251, 191, 36, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════
 * OCÉANO — azul profundo con acentos aguamarina
 * ═══════════════════════════════════════════════════════════════════ */
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='ocean'] {
  --tbai-chat-dark-bg: #0a1828;
  --tbai-chat-glass-bg: rgba(10, 24, 40, 0.82);
  --tbai-chat-bubble-opt: rgba(15, 35, 60, 0.5);
  --tbai-chat-cyan: #38bdf8;
  --tbai-chat-purple: #22d3ee;
  --tbai-chat-text: #e0f2fe;
  --tbai-chat-text-muted: #7dd3fc;
  --tbai-chat-border: #1e3a5f;
  --tbai-chat-badge-admin-bg: rgba(34, 211, 238, 0.14);
  --tbai-chat-badge-pro-bg: rgba(56, 189, 248, 0.14);
  --tbai-chat-badge-glow-admin: 0 0 5px rgba(34, 211, 238, 0.5);
  --tbai-chat-badge-glow-pro: 0 0 5px rgba(56, 189, 248, 0.5);
  --tbai-chat-scrollbar-thumb: #1e3a5f;
  --tbai-chat-scrollbar-thumb-hover: #38bdf8;
  --tbai-chat-scrollbar-track: rgba(10, 24, 40, 0.5);
  --tbai-chat-focus-glow: 0 0 15px rgba(56, 189, 248, 0.4);
  --tbai-chat-send-hover-glow: 0 0 10px rgba(34, 211, 238, 0.55);
  --tbai-chat-chip-border: rgba(56, 189, 248, 0.4);
}
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='ocean'] .tbai-sidebar,
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='ocean'] .ftbai-sidebar {
  background: linear-gradient(180deg, rgba(10, 24, 40, 0.92), rgba(5, 14, 26, 0.95));
  border-right: 1px solid rgba(56, 189, 248, 0.15);
}
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='ocean'] .tbai-main,
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='ocean'] .ftbai-body {
  background: radial-gradient(120% 80% at 50% 0%, rgba(56, 189, 248, 0.06), transparent 60%), #0a1828;
}
:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='ocean'] .tbai-channel-header {
  background: linear-gradient(180deg, rgba(30, 58, 95, 0.4), rgba(10, 24, 40, 0.2));
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
}
body:has(:is(.tbaiclub-root, .ftbai-panel)[data-tbai-chat-theme='ocean']) {
  --club-accent: #38bdf8;
  --club-accent-glow: rgba(56, 189, 248, 0.35);
}