/* Custom Base & Smooth Effects */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Tajawal', sans-serif;
  user-select: none;
  touch-action: manipulation;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}
::-webkit-scrollbar-thumb {
  background: rgba(51, 65, 85, 0.8);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, 0.6);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Dynamic Tab Styling */
.browser-tab {
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1);
}

.browser-tab.active {
  background: #111827;
  color: #f8fafc;
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.browser-tab:not(.active) {
  background: rgba(20, 29, 47, 0.6);
  color: #94a3b8;
}

.browser-tab:not(.active):hover {
  background: rgba(30, 41, 59, 0.8);
  color: #e2e8f0;
}

/* Glassmorphism Classes */
.glass-panel {
  background: rgba(19, 27, 46, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Reader Mode Themes */
.reader-theme-dark {
  background-color: #0b0f19 !important;
  color: #e2e8f0 !important;
}

.reader-theme-sepia {
  background-color: #f7f1e3 !important;
  color: #33271b !important;
}
.reader-theme-sepia h1, 
.reader-theme-sepia h2, 
.reader-theme-sepia h3 {
  color: #1a120b !important;
}
.reader-theme-sepia .text-slate-400 {
  color: #796b58 !important;
}

.reader-theme-cyber {
  background-color: #070d19 !important;
  color: #a5f3fc !important;
}
.reader-theme-cyber h1,
.reader-theme-cyber h2 {
  color: #38bdf8 !important;
}

/* Animated gradient text */
.text-gradient {
  background: linear-gradient(135deg, #06b6d4, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Pulsing effect for AI */
@keyframes neon-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.2), 0 0 20px rgba(139, 92, 246, 0.15);
  }
  50% {
    box-shadow: 0 0 18px rgba(6, 182, 212, 0.4), 0 0 32px rgba(139, 92, 246, 0.3);
  }
}
.neon-pulse {
  animation: neon-glow 3s infinite ease-in-out;
}