/* Ask AI Sin - Custom Styles */

/* Base styles */
body { 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.light-site {
  background: #ffffff;
  color: #171717;
}

.light-site .text-neutral-600,
.light-site .text-neutral-500 {
  color: #525252 !important;
}

.light-site .text-neutral-300 {
  color: #737373 !important;
}

.dark-site {
  position: relative;
  background: #050505;
  color: #f5f5f5;
  isolation: isolate;
}

.dark-site::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.7;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.03) 18%, rgba(255, 255, 255, 0.01) 30%, transparent 50%),
    radial-gradient(circle at 82% 10%, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0.02) 16%, rgba(255, 255, 255, 0.008) 28%, transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 38%);
  filter: blur(26px);
}

/* Dark mode utility overrides for improved readability */
.dark-site .text-neutral-900,
.dark-site .text-neutral-800,
.dark-site .text-neutral-700 {
  color: #f5f5f5 !important;
}

.dark-site .text-neutral-600,
.dark-site .text-neutral-500 {
  color: #bcbcbc !important;
}

.dark-site .border-neutral-200,
.dark-site .border-neutral-100,
.dark-site .border-neutral-300 {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.dark-site .bg-neutral-50,
.dark-site .bg-white {
  background: rgba(255, 255, 255, 0.05) !important;
}

.dark-site .hover\:text-neutral-900:hover {
  color: #ffffff !important;
}

.dark-site .hover\:bg-neutral-800:hover,
.dark-site .hover\:bg-neutral-900:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

.dark-site .hover\:border-neutral-400:hover {
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Prose styling for content sections */
.prose-openai { 
  max-width: 65ch; 
  line-height: 1.75;
  letter-spacing: -0.011em;
}

/* Liquid glass surfaces */
.liquid-header,
.liquid-panel,
.liquid-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.dark-site .liquid-header,
.dark-site .liquid-panel,
.dark-site .liquid-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.light-site .liquid-header,
.light-site .liquid-panel,
.light-site .liquid-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.62));
  border: 1px solid rgba(23, 23, 23, 0.12);
}
.liquid-button-solid {
  background: rgba(255, 255, 255, 0.9);
  color: #050505;
  border: 1px solid rgba(255, 255, 255, 0.75);
}

.liquid-button-solid:hover {
  background: #ffffff;
}

.liquid-button-outline {
  color: #f5f5f5;
  background: rgba(255, 255, 255, 0.03);
}

.liquid-button-outline:hover {
  background: rgba(255, 255, 255, 0.1);
}

.light-site .liquid-button-outline {
  color: #171717;
  background: rgba(23, 23, 23, 0.04);
  border-color: rgba(23, 23, 23, 0.2) !important;
}

.light-site .liquid-button-outline:hover {
  background: rgba(23, 23, 23, 0.08);
  border-color: rgba(23, 23, 23, 0.35) !important;
}

/* Card hover effect */
.card-hover { 
  transition: all 0.2s ease;
}

.card-hover:hover { 
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.38);
  transform: translateY(-2px);
}

/* Language toggle - hide elements */
[data-lang][hidden] { 
  display: none !important; 
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Mobile menu animation */
#mobileMenu {
  transition: all 0.3s ease-in-out;
}

/* Header stays on top */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
}

.dark-site header {
  background-color: rgba(10, 10, 10, 0.72);
}

.light-site header {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Focus styles for accessibility */
input:focus,
textarea:focus,
button:focus {
  outline-offset: 2px;
}

.dark-site input:focus,
.dark-site textarea:focus,
.dark-site button:focus {
  outline: 2px solid rgba(255, 255, 255, 0.8);
}

.light-site input:focus,
.light-site textarea:focus,
.light-site button:focus {
  outline: 2px solid rgba(23, 23, 23, 0.8);
}

.dark-site input,
.dark-site textarea {
  background: rgba(255, 255, 255, 0.04);
  color: #f5f5f5;
}

.dark-site input::placeholder,
.dark-site textarea::placeholder {
  color: #a3a3a3;
}

/* Custom scrollbar (optional - for modern browsers) */
::-webkit-scrollbar {
  width: 8px;
}

.dark-site ::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.dark-site ::-webkit-scrollbar-thumb {
  background: #595959;
  border-radius: 4px;
}

.dark-site ::-webkit-scrollbar-thumb:hover {
  background: #808080;
}

.light-site ::-webkit-scrollbar-track {
  background: #f5f5f5;
}

.light-site ::-webkit-scrollbar-thumb {
  background: #cfcfcf;
  border-radius: 4px;
}

.light-site ::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* n8n chat theme aligned with site neutrals */
:root {
  --chat--color--primary: #f5f5f5;
  --chat--color--primary-shade-50: #e5e5e5;
  --chat--color--primary--shade-100: #d4d4d4;
  --chat--color--secondary: #f5f5f5;
  --chat--color-secondary-shade-50: #e5e5e5;
  --chat--color-white: #0a0a0a;
  --chat--color-light: #171717;
  --chat--color-light-shade-50: #262626;
  --chat--color-light-shade-100: #404040;
  --chat--color-medium: #525252;
  --chat--color-dark: #f5f5f5;
  --chat--color-disabled: #525252;
  --chat--color-typing: #a3a3a3;
  --chat--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --chat--border-radius: 0.75rem;
  --chat--window--border: 1px solid #404040;
  --chat--window--border-radius: 0.75rem;
  --chat--header--background: #171717;
  --chat--header--color: #f5f5f5;
  --chat--message--bot--background: #262626;
  --chat--message--bot--color: #f5f5f5;
  --chat--message--bot--border: 1px solid #404040;
  --chat--message--user--background: #f5f5f5;
  --chat--message--user--color: #0a0a0a;
  --chat--message--user--border: none;
  --chat--toggle--background: #f5f5f5;
  --chat--toggle--hover--background: #ffffff;
  --chat--toggle--active--background: #e5e5e5;
  --chat--toggle--color: #0a0a0a;
  --chat--input--background: #171717;
  --chat--input--text-color: #f5f5f5;
  --chat--input--container--background: #171717;
  --chat--input--container--border: 1px solid #404040;
  --chat--input--container--border-radius: 0 0 0.75rem 0.75rem;
  --chat--button--color--primary: #0a0a0a;
  --chat--button--background--primary: #f5f5f5;
  --chat--button--color--primary--hover: #0a0a0a;
  --chat--button--background--primary--hover: #e5e5e5;
  --chat--button--color--primary--disabled: #0a0a0a;
  --chat--button--background--primary--disabled: #a3a3a3;
  --chat--input--send--button--background: #f5f5f5;
  --chat--input--send--button--color: #0a0a0a;
  --chat--input--send--button--background-hover: #e5e5e5;
  --chat--input--send--button--color-hover: #0a0a0a;
  --chat--input--file--button--background: #f5f5f5;
  --chat--input--file--button--color: #0a0a0a;
  --chat--input--file--button--background-hover: #e5e5e5;
  --chat--input--file--button--color-hover: #0a0a0a;
  --chat--body--background: #0a0a0a;
  --chat--footer--background: #171717;
  --chat--footer--color: #f5f5f5;
  --chat--footer--border-top: 1px solid #404040;
  --chat--close--button--color-hover: #a3a3a3;
  --chat--message--actions--color: #a3a3a3;
}

.light-site {
  --chat--header--background: #f5f5f5;
  --chat--header--color: #171717;
  --chat--body--background: #ffffff;
  --chat--footer--background: #fafafa;
  --chat--footer--color: #171717;
  --chat--input--background: #ffffff;
  --chat--input--text-color: #171717;
  --chat--input--container--background: #ffffff;
  --chat--input--container--border: 1px solid #d4d4d4;
  --chat--message--bot--background: #ffffff;
  --chat--message--bot--color: #171717;
  --chat--message--bot--border: 1px solid #e5e5e5;
  --chat--toggle--background: #171717;
  --chat--toggle--hover--background: #262626;
  --chat--toggle--active--background: #0a0a0a;
  --chat--toggle--color: #ffffff;
}

/* n8n chat floating toggle icon contrast fixes */
.dark-site .chat-window-toggle,
.dark-site .chat-toggle,
.dark-site [class*="chat-window-toggle"] {
  background: #f5f5f5 !important;
  color: #0a0a0a !important;
  border: 1px solid #525252 !important;
}

.dark-site .chat-window-toggle svg,
.dark-site .chat-window-toggle svg *,
.dark-site .chat-toggle svg,
.dark-site [class*="chat-window-toggle"] svg,
.dark-site [class*="chat-window-toggle"] svg * {
  fill: #0a0a0a !important;
  stroke: #0a0a0a !important;
  color: #0a0a0a !important;
}

.light-site .chat-window-toggle,
.light-site .chat-toggle,
.light-site [class*="chat-window-toggle"] {
  background: #171717 !important;
  color: #ffffff !important;
  border: 1px solid #171717 !important;
}

.light-site .chat-window-toggle svg,
.light-site .chat-window-toggle svg *,
.light-site .chat-toggle svg,
.light-site [class*="chat-window-toggle"] svg,
.light-site [class*="chat-window-toggle"] svg * {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}