.messages article, .reply-to-dialog article { max-width: calc(33 * var(--module)); margin-bottom: var(--module-n-half); width: 100%; }

.messages article header, .reply-to-dialog article header { flex: 0 0 var(--module-double-n-half); align-items: center; justify-content: center; position: relative; flex-direction: column; margin: 0 var(--vertical-spacing); }

.messages article header .icon, .reply-to-dialog article header .icon { display: block; background-color: white; height: var(--module-double-n-half); width: var(--module-double-n-half); border-radius: 50%; opacity: .9; overflow: hidden; }

.messages article header .icon img, .reply-to-dialog article header .icon img { height: var(--module-double-n-half); width: var(--module-double-n-half); pointer-events: none; }

.messages article.unread header:after, .reply-to-dialog article.unread header:after { content: ""; display: block; position: absolute; background: #04b74e center no-repeat url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" fill="rgba(255,255,255,.9)"><path d="M 56.765625 20.859375 C 54.444175 20.720022 52.265995 22.224679 51.640625 24.558594 C 50.230081 29.822817 52.475081 30.980218 49.992188 42 A 8 8 0 0 0 46.013672 43.074219 C 38.346354 34.766489 39.712175 32.641859 35.857422 28.787109 C 33.904802 26.834487 30.739731 26.834487 28.787109 28.787109 C 26.834489 30.73973 26.834486 33.904801 28.787109 35.857422 C 32.641546 39.71186 34.76623 38.346508 43.072266 46.011719 A 8 8 0 0 0 42 49.992188 C 30.980218 52.475081 29.822816 50.230079 24.558594 51.640625 C 21.891263 52.355333 20.306775 55.09634 21.021484 57.763672 C 21.736194 60.431001 24.479155 62.015491 27.146484 61.300781 C 32.412424 59.889778 32.290431 57.36519 43.085938 54.003906 A 8 8 0 0 0 45.994141 56.917969 C 42.6335 67.709305 40.110041 67.58825 38.699219 72.853516 C 37.984508 75.520847 39.568998 78.263807 42.236328 78.978516 C 44.903658 79.693225 47.644667 78.108737 48.359375 75.441406 C 49.76992 70.177182 47.524919 69.019782 50.007812 58 A 8 8 0 0 0 53.986328 56.925781 C 61.653647 65.233511 60.287827 67.358141 64.142578 71.212891 C 66.0952 73.165513 69.26027 73.165512 71.212891 71.212891 C 73.165512 69.260269 73.165513 66.095198 71.212891 64.142578 C 67.358454 60.28814 65.23377 61.653492 56.927734 53.988281 A 8 8 0 0 0 58 50.007812 C 69.019783 47.524918 70.177183 49.76992 75.441406 48.359375 C 78.108736 47.644666 79.693225 44.903658 78.978516 42.236328 C 78.263807 39.568997 75.520846 37.98451 72.853516 38.699219 C 67.587576 40.110222 67.709569 42.63481 56.914062 45.996094 A 8 8 0 0 0 54.005859 43.082031 C 57.3665 32.290695 59.889957 32.411751 61.300781 27.146484 C 62.01549 24.479153 60.431003 21.736192 57.763672 21.021484 C 57.430256 20.932146 57.097261 20.879283 56.765625 20.859375 z "/></svg>'); background-size: 100%; height: var(--module-n-half); width: var(--module-n-half); top: calc(50% - var(--module-double)); right: calc(-1 * var(--module-half)); border-radius: 50%; box-shadow: 0 0 var(--module-half) rgba(0, 0, 0, 0.05); }

.messages article > section, .reply-to-dialog article > section { flex-direction: column; justify-content: center; padding-top: var(--module); }

.messages article > section p, .reply-to-dialog article > section p { margin: 0; padding: 0; }

.messages article .texts, .reply-to-dialog article .texts { margin-right: var(--vertical-spacing); }

.messages article .texts p, .reply-to-dialog article .texts p { background-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); padding: var(--module-half) calc(3 * var(--module-quarter)); border-radius: 0 var(--module) var(--module) var(--module); word-break: break-word; }

.messages article .texts p span.emoticon, .reply-to-dialog article .texts p span.emoticon { font-size: 200%; line-height: var(--module-double); }

.messages article .attachments, .reply-to-dialog article .attachments { flex-wrap: wrap; margin: calc(-1 * var(--module-quarter)); margin-right: var(--vertical-spacing); }

.messages article .attachments .attachment, .reply-to-dialog article .attachments .attachment { justify-content: center; align-items: center; flex: 0 0 calc(5 * var(--module)); height: calc(5 * var(--module)); margin: var(--module-quarter); border-radius: var(--module); overflow: hidden; position: relative; }

.messages article .attachments .attachment img, .reply-to-dialog article .attachments .attachment img { width: calc(5 * var(--module)); pointer-events: none; }

.messages article .attachments + .texts, .reply-to-dialog article .attachments + .texts { margin-top: var(--module-half); }

.messages article .details, .reply-to-dialog article .details { display: flex; font-size: 80%; color: rgba(255, 255, 255, 0.2); white-space: pre; }

.messages article .details .name, .reply-to-dialog article .details .name { font-weight: bold; }

.messages article.My, .reply-to-dialog article.My { flex-direction: row-reverse; }

.messages article.My .texts, .reply-to-dialog article.My .texts { margin-right: 0; margin-left: var(--vertical-spacing); justify-content: flex-end; }

.messages article.My .texts p, .reply-to-dialog article.My .texts p { border-radius: var(--module) 0 var(--module) var(--module); }

.messages article.My .attachments, .reply-to-dialog article.My .attachments { justify-content: flex-end; margin-right: calc(-1 * var(--module-quarter)); margin-left: var(--vertical-spacing); }

.messages article.My .details, .reply-to-dialog article.My .details { align-self: flex-end; }

/*# sourceMappingURL=message.css.map */