/* Responsive Design Styles */

/* Mobile-first base styles are already in main.css */

/* Tablet adjustments */
@media (max-width: 1024px) {
	.modal-content {
		width: 90%;
	}
}

/* Mobile adjustments */
@media (max-width: 768px) {
	/* Layout adjustments are handled in layout.css */
	
	/* Text size adjustments for mobile */
	h2 {
		font-size: 1.1em !important;
	}
	
	h3 {
		font-size: 1.05em !important;
	}
	
	h4 {
		font-size: 0.95em !important;
	}
	
	/* Reduce suggestion button size on mobile */
	.suggestion-button {
		width: 100%;
		max-width: 260px;
		height: 80px;
		font-size: 0.8rem;
	}
}

/* Very small screens */
@media (max-width: 480px) {
	.modal-content {
		width: 98%;
	}
	
	.suggestion-button {
		height: 70px;
		font-size: 0.75rem;
	}
}

/* Mobile viewport height fixes */
@media (max-width: 768px) {
	html, body {
		height: 100%;
		min-height: 100svh; /* Use small viewport height for mobile browsers */
		overflow-x: hidden;
	}
	
	.main-container {
		min-height: calc(100svh - 40px);
		height: calc(100svh - 40px);
	}
	
	/* Ensure chat area is properly sized */
	.right-content {
		height: 100%;
		max-height: calc(100svh - 40px);
	}
}