.message { width: 100%; overflow-wrap: break-word; display: flex; gap: var(--section-gap); padding: var(--section-gap); padding-bottom: 0; } .message:last-child { animation: 0.6s show_message; } @keyframes show_message { from { transform: translateY(10px); opacity: 0; } } .message .avatar-container img { max-width: 48px; max-height: 48px; box-shadow: 0.4px 0.5px 0.7px -2px rgba(0, 0, 0, 0.08), 1.1px 1.3px 2px -2px rgba(0, 0, 0, 0.041), 2.7px 3px 4.8px -2px rgba(0, 0, 0, 0.029), 9px 10px 16px -2px rgba(0, 0, 0, 0.022); } .message .content { display: flex; flex-direction: column; width: 90%; gap: 18px; } .message .content p, .message .content li, .message .content code { font-size: 1rem; line-height: 1.3; } @media screen and (max-height: 720px) { .message { padding: 12px; gap: 0; } .message .content { margin-left: 8px; width: 80%; } .message .avatar-container img { max-width: 32px; max-height: 32px; } .message .content, .message .content p, .message .content li, .message .content code { font-size: 0.875rem; line-height: 1.3; } }