/* Base Styles - Reset, Helpers, and Utilities */

/* Reset & Base */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--color-bg-main);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Layout Helper Classes */
.flex { display: flex; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-col { flex-direction: column; }
.flex-end { align-items: flex-end; }

/* Text Alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* Display & Overflow */
.full-width { width: 100%; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

/* Interactive */
.no-border { border: none; }
.pointer { cursor: pointer; }

/* Spacing Utilities */
.p-1 { padding: 0.625rem; }
.p-2 { padding: 1.25rem; }
.px-2 { padding: 0 1.25rem; }
.py-1 { padding: 0.625rem 0; }
.m-0 { margin: 0; }
.mb-1 { margin-bottom: 0.75rem; }
.mb-2 { margin-bottom: 1.25rem; }
.mt-1 { margin-top: 0.3125rem; }
.gap-1 { gap: 0.25rem; }

/* Border Radius */
.rounded { border-radius: 0.75rem; }
.rounded-lg { border-radius: 1.125rem; }
.rounded-xl { border-radius: 1.25rem; }
.rounded-full { border-radius: 50%; }
.rounded-pill { border-radius: 1.5625rem; }

/* Color Utilities */
.bg-white { background: var(--color-bg-white); }
.bg-primary { background: var(--color-primary); }
.bg-primary-dark { background: var(--color-primary-dark); }
.bg-chat { background: var(--color-bg-chat); }
.bg-user { background: var(--color-bg-user-message); }
.bg-light { background: var(--color-bg-light); }
.text-white { color: var(--color-text-white); }
.text-gray { color: var(--color-text-gray); }
.text-dark { color: var(--color-text-dark); }
.text-muted { color: var(--color-text-muted); }

/* Shadow Utilities */
.shadow-sm { box-shadow: 0 0.0625rem 0.125rem var(--color-shadow-light); }
.shadow-md { box-shadow: 0 0.125rem 0.5rem var(--color-shadow-primary); }
.shadow-lg { box-shadow: 0 1.25rem 2.5rem var(--color-shadow-light); }

/* Transition Utilities */
.transition { transition: all 0.2s ease; }
.transition-slow { transition: all 0.3s ease; }

/* Typography */
.text-xs { font-size: 0.6875rem; }
.text-sm { font-size: 0.75rem; }
.text-base { font-size: 0.9375rem; }
.text-lg { font-size: 1rem; }
.text-xl { font-size: 1.125rem; }
.text-2xl { font-size: 1.5rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: bold; }

/* Responsive */
@media (max-width: 1280px) {
  .chat-container {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
} 
@media (max-width: 768px) {
  .chat-container {
    border-radius: 0 !important;
  }
}