/* typography.css - Typography and Text Styles with Enhanced Contrast */

/* Welcome message - matches estimator hero styling */
#smartfence-embed-root .welcome-message { 
  text-align: center;
  margin: 0 auto;
}

#smartfence-embed-root .welcome-message h2 { 
  font-size: 30px; /* Match estimator .hero-title */
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

#smartfence-embed-root .welcome-message p { 
  color: var(--text-secondary); /* Now uses darker grey */
  margin-bottom: 0.75rem;
  line-height: 1.5;
  font-size: 1.125rem; /* Match estimator .hero-subtitle */
  margin-left: auto;
  margin-right: auto;
}

#smartfence-embed-root .prompt { 
  font-weight: 500;
  color: var(--text-primary);
  margin-top: 1.5rem; /* Increased margin */
  font-size: 1rem; /* Increased font size */
}

/* Bot message headings - match estimator section headers */
#smartfence-embed-root .bot-message .message-content h3 { 
  font-size: 1.5rem; /* Match estimator .section-header h3 */
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  line-height: 1.3;
}

#smartfence-embed-root .bot-message .message-content h4 { 
  font-size: 1.125rem; /* Slightly smaller than h3 */
  font-weight: 600;
  margin: 1rem 0 0.5rem 0;
  color: var(--text-primary);
  line-height: 1.3;
}

/* Ensure first headings don't have top margin */
#smartfence-embed-root .message-content h3:first-child,
.message-content h3:first-child,
#smartfence-embed-root .message-content h4:first-child,
.message-content h4:first-child { 
  margin-top: 0;
}

/* Paragraph text in bot messages - ENHANCED with darker color */
#smartfence-embed-root .bot-message .message-content p { 
  margin-bottom: 0.75rem;
  line-height: 1.5;
  font-size: 1rem; /* Match estimator base font size */
  color: var(--text-primary); /* Changed to primary text color for better readability */
}

#smartfence-embed-root .bot-message .message-content p:last-child { 
  margin-bottom: 0;
}

/* Lists in bot messages - ENHANCED with darker color */
#smartfence-embed-root .bot-message .message-content ol,
.bot-message .message-content ol,
#smartfence-embed-root .bot-message .message-content ul,
.bot-message .message-content ul { 
  margin: 0.75rem 0;
  padding-left: 1.5rem;
  color: var(--text-primary); /* Changed to primary text color */
}

#smartfence-embed-root .bot-message .message-content li { 
  margin-bottom: 0.5rem;
  line-height: 1.5;
  font-size: 1rem;
  color: var(--text-primary); /* Changed to primary text color */
}

#smartfence-embed-root .bot-message .message-content li:last-child { 
  margin-bottom: 0;
}

/* Strong text styling */
#smartfence-embed-root .bot-message .message-content strong { 
  font-weight: 600;
  color: var(--text-primary);
}

#smartfence-embed-root .user-message .message-content strong { 
  color: white;
}

/* Chat-specific overrides for consistent styling */
#smartfence-embed-root .fence-types-showcase .bot-message .message-content h3 { 
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
  text-align: center;
}

/* Override for fence type titles in bot responses */
#smartfence-embed-root .bot-message .message-content .fence-types-showcase h3 { 
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
  text-align: center;
}

/* Secondary text elements - ENHANCED contrast */
#smartfence-embed-root .bot-message .message-content .text-secondary,
.bot-message .message-content .text-secondary,
#smartfence-embed-root .message-content .option-description,
.message-content .option-description,
#smartfence-embed-root .suggestion-card .option-description { 
  color: var(--text-secondary); /* Now uses darker grey */
}

/* Ensure all paragraph text in messages uses primary color */
#smartfence-embed-root .message-content p,
.message-content p,
#smartfence-embed-root .bot-message p,
.bot-message p,
#smartfence-embed-root .welcome-message p { 
  color: var(--text-primary); /* Ensure all paragraphs use dark text */
}

/* Exception: Keep welcome message subtitle lighter but still readable */
#smartfence-embed-root .welcome-message p { 
  color: var(--text-secondary); /* Welcome subtitle uses secondary (but now darker) */
}

/* Hide capabilities on mobile */
@media (max-width: 768px) {
  #smartfence-embed-root .welcome-message .capabilities { 
    display: none !important;
  }
  
  #smartfence-embed-root .capabilities { 
    display: none !important;
  }
}