/**
 * SUPMARTECH AI CONNECT - Custom Stylesheet
 * Enterprise Modern SaaS Theme (Dark Navy + Electric Blue + Cyan + Emerald)
 */

:root {
  --font-sans: 'Noto Sans Thai', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  /* Dark Theme Palette (Default) */
  --bg-primary: #0B1120;
  --bg-secondary: #111C32;
  --bg-card: rgba(17, 28, 50, 0.75);
  --bg-card-hover: rgba(22, 36, 64, 0.85);
  --bg-input: #15223c;
  --border-color: rgba(255, 255, 255, 0.09);
  --border-active: rgba(6, 182, 212, 0.4);
  --text-main: #F8FAFC;
  --text-muted: #94A3B8;
  --text-subtle: #64748B;
  
  --color-blue: #2563EB;
  --color-blue-glow: rgba(37, 99, 235, 0.35);
  --color-cyan: #06B6D4;
  --color-cyan-glow: rgba(6, 182, 212, 0.35);
  --color-emerald: #10B981;
  --color-emerald-glow: rgba(16, 185, 129, 0.35);

  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 25px rgba(6, 182, 212, 0.2);
}

/* Light Theme Variables */
html[data-theme="light"] {
  --bg-primary: #F8FAFC;
  --bg-secondary: #FFFFFF;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-card-hover: #F1F5F9;
  --bg-input: #FFFFFF;
  --border-color: rgba(15, 23, 42, 0.09);
  --border-active: rgba(37, 99, 235, 0.5);
  --text-main: #0F172A;
  --text-muted: #475569;
  --text-subtle: #64748B;
  
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.07);
  --shadow-glow: 0 0 25px rgba(37, 99, 235, 0.12);
}

/* Base resets & typography */
html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-main);
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
}

/* Glassmorphism Classes */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
}

.glass-panel:hover {
  border-color: var(--border-active);
}

.glass-nav {
  background: rgba(11, 17, 32, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color);
}

html[data-theme="light"] .glass-nav {
  background: rgba(255, 255, 255, 0.88);
}

/* Gradient Text */
.gradient-text-blue-cyan {
  background: linear-gradient(135deg, #60A5FA 0%, #06B6D4 50%, #10B981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-emerald {
  background: linear-gradient(135deg, #34D399 0%, #06B6D4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Ambient glow blobs */
.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}

html[data-theme="light"] .ambient-glow {
  opacity: 0.15;
}

/* Interactive Network Canvas */
#network-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 18px var(--color-blue-glow);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--color-cyan-glow);
  filter: brightness(1.08);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}

/* Chat Simulator UI */
.chat-bubble-user {
  background: #1E3A8A;
  color: #FFFFFF;
  border-radius: 1.25rem 1.25rem 0.25rem 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.chat-bubble-ai {
  background: #111C32;
  color: #F8FAFC;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem 1.25rem 1.25rem 0.25rem;
}

html[data-theme="light"] .chat-bubble-ai {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #E2E8F0;
}

.tool-invocation-box {
  background: rgba(6, 182, 212, 0.07);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: 0.75rem;
  font-family: var(--font-mono);
}

/* Json preview drawer */
.json-preview {
  background: #060B14;
  color: #38BDF8;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Timeline Components */
.timeline-stem {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2rem;
  width: 2px;
  background: linear-gradient(180deg, #2563EB, #06B6D4, #10B981);
}

@media (min-width: 768px) {
  .timeline-stem {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Range input customization */
input[type="range"] {
  accent-color: #06B6D4;
}

/* Reduced Motion Query */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High Contrast Keyboard Focus */
:focus-visible {
  outline: 2px solid #06B6D4 !important;
  outline-offset: 3px !important;
}

/* Hide scrollbars for clean tabs */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}