@media (max-width: 900px) {
    .sidebar { width: 340px; min-width: 290px; }
    .messages { padding-inline: 24px; }
    .typing { margin-inline: 24px; }
    .chat-header, .message-box { margin-inline: 18px; }
}

@media (max-width: 680px) {
    body { background: var(--ink); }
    .chat-app { position: relative; min-height: 100dvh; }
    .sidebar, .chat-area { width: 100%; min-width: 100%; }
    .sidebar { border: 0; }
    .chat-area { display: none; }
    .chat-app.chat-open .sidebar { display: none; }
    .chat-app.chat-open .chat-area { display: flex; }
    .sidebar-header { padding-top: max(22px, env(safe-area-inset-top)); }
    .chat-header { margin: max(12px, env(safe-area-inset-top)) 12px 0; padding: 10px 12px; border-radius: 20px; }
    .messages { padding: 22px 14px; }
    .message { max-width: 86%; }
    .typing { margin: 0 16px 6px; }
    .message-box { margin: 0 12px max(12px, env(safe-area-inset-bottom)); padding: 7px; border-radius: 21px; }
    .composer-action { display: none; }
    .toast-region { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
}