@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --blue: #3b82f6; 
  --light-blue: #93c5e8; 
  --red: #f87171; 
  --purple: #8b5cf6; 
  --amber: #f59e0b; 
  --green: #22c55e;
  --bg: #f5f5f0; 
  --white: #ffffff; 
  --border: #e2e2dc;
  --text: #1a1a1a; 
  --muted: #8a8a84;
}

body, html, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--white);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Base custom styles & animations */
@keyframes pulse-amber { 
  0%, 100% { opacity: 1; } 
  50% { opacity: 0.5; } 
}

@keyframes bounce { 
  0%, 100% { transform: translateY(0); } 
  50% { transform: translateY(-4px); } 
}

@keyframes popIn { 
  from { transform: scale(0.95); opacity: 0; } 
  to { transform: scale(1); opacity: 1; } 
}

/* Typing points */
.dot { 
  width: 5px; height: 5px; background: var(--muted); border-radius: 50%; 
  display: inline-block; animation: bounce 1.4s infinite ease-in-out both; 
  margin: 0 2px;
}
.dot1 { animation-delay: -0.32s; }
.dot2 { animation-delay: -0.16s; }

/* View transitions */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 0.25s;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

/* Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Table styling */
table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
th { padding: 6px; border-bottom: 1px solid var(--border); text-align: left; color: #555; background: #fbfbfb; }
td { padding: 6px; border-bottom: 1px solid var(--bg); }