@media (max-width: 768px) {
    .sidebar { width: 100%; min-width: 100%; }
    .chat-area { display: none; width: 100%; }
    .chat-layout.chat-open .sidebar { display: none; }
    .chat-layout.chat-open .chat-area { display: flex; }
    .message { max-width: 85%; }
    .messages-container { padding: 16px; }
    .message-input-area { padding: 10px 12px; }
    .chat-header { padding: 12px 16px; }
    .modal { padding: 24px 20px; }
    .auth-container { padding: 28px 24px; }
    .toast-container { right: 12px; bottom: 12px; left: 12px; }
    .toast { max-width: 100%; }
    .emoji-picker { width: calc(100vw - 60px); left: -10px; }
    .shortcut-hint { display: none !important; }
    .message-reply-text { max-width: 200px; }
}