/* --- N8N Chat Widget + Site Theme Variables --- */
/* Theme system: dark (default), brown, light */

:root, :root[data-theme="dark"] {
	--primary-color: #6a11cb;
    --secondary-color: #2575fc;
    --dark-bg: #12121c;
    --light-bg: #1a1a2e;
    --text-color: #e0e0e0;
    --heading-color: #ffffff;
    --accent-glow: rgba(106, 17, 203, 0.5);
    /* chat vars */
    --chat--message--bot-border: rgba(255,255,255,0.08);
    /* Dark theme chat refinements */
    --chat--color-primary: #5640b8; /* calmer purple */
    --chat--color-primary-shade-50: #644cc4;
    --chat--color-primary-shade-100: #7158cf;
    --chat--color-secondary: #2a5fd6; /* deep blue accent */
    --chat--color-secondary-shade-50: #3472f0;
    --chat--color-white: #ffffff;
    --chat--color-light: #222235;
    --chat--color-medium: #9ca3af;
    --chat--color-dark: #12121c;
    --chat--color-disabled: #555b66;
    --chat--color-typing: #6d7391;
    --chat--header--background: #18182a; /* subtle purple-tinted panel */
    --chat--header--color: #ffffff;
    --chat--message--bot--background: #1e1e2b; /* darker neutral for bot */
    --chat--message--bot--color: #e2e2e8;
    --chat--message--user--background: #1f3d8f; /* dark blue replacing cyan */
    --chat--message--user--color: #ffffff;
    --chat--toggle--background: linear-gradient(135deg,#5640b8,#2a5fd6);
    --chat--toggle--hover--background: linear-gradient(135deg,#644cc4,#3472f0);
}

:root[data-theme="brown"] {
    --primary-color: #c58b47;
    --secondary-color: #a66a2a; /* subtle gradient */
    --dark-bg: #2b2118;
    --light-bg: #3a2a20;
    --text-color: #e9e0d8;
    --heading-color: #ffffff;
    --accent-glow: rgba(197,139,71,0.35);

    --chat--color-primary: var(--primary-color);
    --chat--color-primary-shade-50: #d89d57;
    --chat--color-primary-shade-100: #e6b170;
    --chat--color-secondary: var(--secondary-color);
    --chat--color-secondary-shade-50: #b6763a;
    --chat--color-white: #ffffff;
    --chat--color-light: #463527;
    --chat--color-medium: #e9e0d8;
    --chat--color-dark: #2b2118;
    --chat--color-disabled: #84776e;
    --chat--color-typing: #c8b8ad;
    --chat--header--background: #3a2a20;
    --chat--header--color: #ffffff;
    --chat--message--bot--background: #514033; /* lighter than window for contrast */
    --chat--message--bot--color: #f3e9df;
    --chat--message--bot-border: rgba(197,139,71,0.35);
    --chat--message--user--background: var(--primary-color);
    --chat--message--user--color: #2b2118;
    --chat--toggle--background: var(--primary-color);
    --chat--toggle--hover--background: #d89d57;
}

:root[data-theme="light"] {
    --primary-color: #1e3a8a; /* single tone (no rainbow) */
    --secondary-color: #3356b8; /* subtle variant */
    --dark-bg: #f2f5f9; /* page background */
    --light-bg: #ffffff; /* card / surface */
    --text-color: #1f2a33;
    --heading-color: #101820;
    --accent-glow: rgba(30,58,138,0.25);

    /* Chat */
    --chat--color-primary: var(--primary-color);
    --chat--color-primary-shade-50: #24469f;
    --chat--color-primary-shade-100: #2f56b5;
    --chat--color-secondary: var(--secondary-color);
    --chat--color-secondary-shade-50: #3b63c9;
    --chat--color-white: #ffffff;
    --chat--color-light: #eef1f6;
    --chat--color-medium: #4b5563;
    --chat--color-dark: #ffffff;
    --chat--color-disabled: #adb5bd;
    --chat--color-typing: #6b7280;
    --chat--header--background: var(--primary-color); /* stronger contrast */
    --chat--header--color: #ffffff;
    --chat--message--bot--background: #e3ebf4; /* stronger contrast vs window */
    --chat--message--bot--color: #14212b;
    --chat--message--bot-border: #d1dae4;
    --chat--message--user--background: var(--primary-color);
    --chat--message--user--color: #ffffff;
    --chat--toggle--background: var(--primary-color);
    --chat--toggle--hover--background: #24469f;
}

/* Shared chat sizing & radii */
:root {
    --chat--spacing: 1rem;
    --chat--border-radius: 12px;
    --chat--transition-duration: 0.2s;
    --chat--window--width: 420px;
    --chat--window--height: 700px;
    --chat--heading--font-size: 1.5em;
    --chat--toggle--size: 64px;
}

/* Chat window visuals */
.n8n-chat-window { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); border: 1px solid rgba(255,255,255,0.08); }
:root[data-theme="dark"] .n8n-chat-window { background:linear-gradient(180deg,#18182a,#12121c); }
:root[data-theme="brown"] .n8n-chat-window { background: linear-gradient(180deg,#2b2118,#261c14); }
:root[data-theme="light"] .n8n-chat-window { box-shadow: 0 8px 28px rgba(0,0,0,0.08); border: 1px solid #d9e0ea; background:#ffffff; }
.n8n-chat-message--bot { background: var(--chat--message--bot--background) !important; color: var(--chat--message--bot--color, inherit) !important; border:1px solid var(--chat--message--bot-border, transparent) !important; box-shadow: 0 2px 6px -2px rgba(0,0,0,0.35); }
:root[data-theme="light"] .n8n-chat-message--bot { box-shadow: 0 2px 6px -2px rgba(0,0,0,0.12); }

/* Remove old theme-toggle styles if present (kept for reference) */
/* .theme-toggle { display:none; } */

/* Theme Toggle (named buttons with hover color reveal) */
.theme-toggle { display:inline-flex; gap:10px; padding:6px 10px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:32px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
:root[data-theme="light"] .theme-toggle { background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.12); }
.theme-toggle .theme-btn { position:relative; overflow:hidden; border:none; background:transparent; color:var(--text-color); font:500 0.7rem/1 'Poppins',sans-serif; letter-spacing:.5px; padding:8px 18px; border-radius:20px; cursor:pointer; transition:color .35s; }
/* Individual gradients per theme button so hover always previews that theme */
.theme-toggle .theme-btn[data-theme="dark"]::before { background:linear-gradient(90deg,#6a11cb,#2575fc); }
.theme-toggle .theme-btn[data-theme="brown"]::before { background:linear-gradient(90deg,#c58b47,#a66a2a); }
.theme-toggle .theme-btn[data-theme="light"]::before { background:linear-gradient(90deg,#1e3a8a,#3356b8); }
.theme-toggle .theme-btn::before { content:""; position:absolute; inset:0; opacity:0; transition:opacity .4s, transform .6s; transform:scale(1.4); z-index:-1; }
.theme-toggle .theme-btn:hover::before { opacity:1; transform:scale(1); }
.theme-toggle .theme-btn:hover { color:#fff; }
:root[data-theme="light"] .theme-toggle .theme-btn:hover { color:#101820; }
.theme-toggle .theme-btn.active { color:#fff; }
.theme-toggle .theme-btn.active::before { opacity:1; transform:scale(1); filter:brightness(1.05); }
:root[data-theme="light"] .theme-toggle .theme-btn.active { color:#fff; }
.site-header .theme-toggle { margin-left:16px; }
@media (max-width:680px){ .theme-toggle { gap:6px; padding:4px 8px; } .theme-toggle .theme-btn { padding:6px 14px; font-size:0.65rem; } }

/* Mobile improvements */
@media (max-width: 768px) {
  .theme-toggle { gap:4px; }
  .theme-toggle button { padding:5px 10px; font-size:.7rem; }
  .n8n-chat-window { width: calc(100vw - 24px) !important; height: calc(100vh - 120px) !important; }
}

/* Slightly reduce card padding on mobile for density & keep premium feel */
@media (max-width:768px){ .feature-card { padding:22px; } }