@media (max-width: 768px) {
    .home-container { flex-direction: column; }
    .sidebar { width: 100%; max-height: 200px; }
    .topics-grid { grid-template-columns: 1fr; }
    .message { max-width: 85%; }
    .chat-header { padding: 12px 16px; }
    .chat-input-area { padding: 12px 16px; }
    .modal-content { padding: 20px; width: 95%; }
    button { min-height: 44px; }
    input, textarea, select { font-size: 16px !important; }
}
@supports (padding: max(0px)) {
    .chat-container, .home-container, .auth-container { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}