@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; }
    #attachmentButton { display: none; }

    .emoji-picker {
        right: 12px;
        bottom: 84px;
        width: calc(100vw - 24px);
        height: min(440px, 54dvh);
    }
    .toast-region { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
    .notification-panel { inset: auto 0 0; width: 100%; height: min(84dvh, 680px); border-radius: 26px 26px 0 0; }
    .notification-panel-header { padding-top: 20px; }
    .profile-shell { width: min(100% - 24px, 760px); }.profile-card { padding: 24px 18px; border-radius: 22px; }.profile-hero { align-items: flex-start; gap: 15px; }.profile-image, .avatar-editor img { width: 76px; height: 76px; }.profile-counts { gap: 20px; }
    .avatar-crop-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 20px; }.avatar-crop-panel { gap: 14px; padding: 18px 14px max(18px, env(safe-area-inset-bottom)); }.avatar-crop-stage { width: min(100%, max(220px, calc(100dvh - 335px))); }.avatar-crop-tools { grid-template-columns: 1fr; gap: 12px; }.avatar-crop-rotate { justify-content: space-between; }.crop-tool-button { flex: 1; }.crop-tool-button:first-child, .crop-tool-button:last-child { flex: 0 0 42px; width: 42px; }.avatar-crop-actions { display: grid; grid-template-columns: 1fr 1fr; }.avatar-crop-actions button { width: 100%; min-width: 0; }
    .safety-shell { width: min(100% - 24px, 1040px); }.safety-topbar { margin-bottom: 24px; }.safety-hero { grid-template-columns: 1fr; gap: 16px; padding: 26px 20px; border-radius: 24px; }.safety-hero-icon { width: 48px; height: 48px; border-radius: 15px; }.safety-hero small { grid-column: auto; }.safety-promise { margin-bottom: 34px; }.safety-grid { grid-template-columns: 1fr; }.safety-card { padding: 20px; border-radius: 19px; }.safety-roadmap { padding: 22px 18px; border-radius: 22px; }.safety-footer { display: grid; gap: 12px; }.safety-footer a { white-space: normal; }
}