/* ================================================================
   MAIN.CSS - Global Styles Only
   ================================================================
   
   Component-specific styles have been moved to their respective
   component CSS files for better modularity:
   
   - ChatFooter.css: Footer, input bar, file attachments, drop zone
   - ConversationSidebar.css: Sidebar, history items, toggle button
   - ChatContainer.css: Chat area, messages, avatars, bubbles
   - Header.css: Header layout, logo, buttons, admin badge
   - QPOQQCCProgress.css: Progress bar, segments, QPOQQCC table
   - RoutineBanner.css: Routine mode banner and layout adjustments
   - HomeSelector.css: Home page grid, app cards, qualification menu
   - LoginPage.css: Login page with video background
   - ChartCard.css: Chart wrapper and grid
   - MenuDropdown.css: Menu dropdown component
   
   ================================================================ */

/* ============================================
   GLOBAL FONTS
   ============================================ */

body,
button,
input,
textarea,
select,
.message,
.message.user,
.message.assistant {
  font-family: "Montserrat", "Segoe UI Emoji", Arial, sans-serif !important;
}

/* ============================================
   CSS VARIABLES / DESIGN TOKENS
   ============================================ */

:root {
  /* Colors */
  --clr-primary: #654bde;
  --clr-primary-light: #7c66e3;
  --clr-accent: #654bde;
  --clr-accent-dark: #513ab2;
  --clr-bg: #f3f4f6;
  --clr-surface: #fff;
  --clr-surface-alt: #ede7fd;
  --clr-border: #e5e7eb;
  --clr-text: #111827;
  --clr-subtle: #6b7280;
  --clr-panel: #f8fafc;
  --clr-bubble: #f1f5f9;
  --clr-placeholder: #9ca3af;

  /* Border radius */
  --radius-lg: 1.25rem;
  --radius-md: 0.75rem;
  --radius-sm: 0.5rem;

  /* Shadows */
  --shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.05);
  --shadow-header: 0 4px 8px rgba(0, 0, 0, 0.1);

  /* Layout dimensions */
  --header-height: 82px;
  --footer-height: 110px;
}

/* ============================================
   GLOBAL RESETS
   ============================================ */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden !important;
}

body {
  background-color: var(--clr-bg);
  min-height: 100vh;
}

pre {
  font-family: "Fira Mono", "Menlo", "Consolas", monospace;
  font-size: 1rem;
  white-space: pre-wrap;
  word-break: break-word;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
}

/* ============================================
   APP LAYOUT STRUCTURE
   ============================================ */

.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-top: var(--header-height) !important;
  transition: margin-left 0.23s;
}

.app-layout:not(.sidebar-open) .main-content,
.app-layout:not(.sidebar-open) footer {
  margin-left: 0;
}

.page-below-header {
  padding-top: var(--header-height);
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blink {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.hidden {
  display: none;
}

/* ============================================
   DARK MODE
   ============================================ */

body.dark-mode {
  --clr-bg: #0e121a;
  --clr-text: #e5e7eb;
  --clr-panel: #1a1d24;
  --clr-border: #374151;
  --clr-accent: #836fff;
  --clr-bubble: #22252d;
  --clr-placeholder: #9ca3af;
  --clr-surface: #1f2937;
  --clr-surface-alt: #312e5c;
  --clr-subtle: #9ca3af;
}

body.dark-mode {
  background-color: var(--clr-bg);
  color: var(--clr-text);
}