/* ChatGPT exact font sizes and typography */

/* Base font sizes matching ChatGPT exactly */
:root {
  /* Primary text sizes - exact ChatGPT values */
  --font-size-xs: 0.75rem; /* 12px - Sidebar section headings, small metadata */
  --font-size-sm: 0.875rem; /* 14px - Sidebar conversation titles, code blocks, buttons */
  --font-size-base: 1rem; /* 16px - Main chat text, chat input */
  --font-size-lg: 1.125rem; /* 18px - h3 headings in messages */
  --font-size-xl: 1.25rem; /* 20px - h2 headings in messages */
  --font-size-2xl: 1.5rem; /* 24px - h1 headings in messages */

  /* Metadata and timestamps */
  --font-size-metadata: 0.8125rem; /* 13px - Message timestamps/metadata */
  --font-size-timestamp: 0.75rem; /* 12px - Smaller timestamps */

  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* Typography utility classes matching ChatGPT */
.text-xs {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
}

.text-sm {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.text-base {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.text-lg {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
}

.text-xl {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

.text-2xl {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

/* Metadata and timestamp sizes */
.text-metadata {
  font-size: var(--font-size-metadata);
  line-height: var(--line-height-tight);
}

.text-timestamp {
  font-size: var(--font-size-timestamp);
  line-height: var(--line-height-tight);
}

/* Font weight utilities */
.font-normal {
  font-weight: var(--font-weight-normal);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

/* ChatGPT specific component typography */

/* Main chat text - 16px */
.chat-message-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
}

/* Message timestamps and metadata - 12-13px */
.message-timestamp {
  font-size: var(--font-size-metadata);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  color: var(--text-muted);
}

.message-metadata {
  font-size: var(--font-size-timestamp);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  color: var(--text-muted);
}

/* Sidebar conversation titles - 14px */
.sidebar-conversation-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

/* Sidebar section headings - 12px uppercase */
.sidebar-section-heading {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Chat input text - 16px */
.chat-input-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

/* Headings inside messages */
.message-heading-h1 {
  font-size: var(--font-size-2xl); /* 24px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.message-heading-h2 {
  font-size: var(--font-size-xl); /* 20px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.message-heading-h3 {
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/* Inline code and code blocks - 14px */
.inline-code {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

.code-block {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
}

/* Buttons - 14-16px */
.button-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.button-text-large {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.button-text-small {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

/* Sidebar specific typography */
.sidebar-logo {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.sidebar-nav-item {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.sidebar-sub-item {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.sidebar-profile-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
}

.sidebar-profile-email {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
}

/* Dropdown and popup typography */
.dropdown-item {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.dropdown-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
}

.dropdown-subtitle {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
}

/* Tooltip typography */
.tooltip-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
}

/* Form typography */
.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.form-input {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.form-helper {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
}

/* Card and modal typography */
.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.card-subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.card-body {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
}

/* Navigation typography */
.nav-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.nav-item {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

/* Analytics and dashboard typography */
.metric-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.metric-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
}

/* Status and badge typography */
.badge-text {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.status-text {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
}

/* Responsive typography adjustments */
@media (max-width: 768px) {
  :root {
    /* Slightly smaller on mobile to fit more content */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 0.875rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.125rem;
    --font-size-2xl: 1.25rem;
    --font-size-metadata: 0.75rem;
    --font-size-timestamp: 0.6875rem;
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  /* Slightly increase line height for better readability in dark mode */
  .chat-message-text {
    line-height: 1.7;
  }

  .message-timestamp,
  .message-metadata {
    opacity: 0.7;
  }
}

/* Print styles */
@media print {
  :root {
    --font-size-xs: 10pt;
    --font-size-sm: 11pt;
    --font-size-base: 12pt;
    --font-size-lg: 14pt;
    --font-size-xl: 16pt;
    --font-size-2xl: 18pt;
  }
}