| .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; | |
| } | |
| } |