:root {
    --msgRad:       16px;
    --msgRadSmall:   5px;

    --msgPadLarge:  56px;
    --msgPad:       16px;
    --msgPadSmall:   8px;

    --msgGap:        8px;
    --msgGapSmall:   2px;

    --msgMinSize:   34px;
    --msgMaxSize:  480px;

    --msgFont:      12px;
    --msgFontSmall: 11px;

    --msgLH:        18px;
    --msgLPV:        2px;
    --msgLPH:        4px;
}

.msgSmnMin, .msgWmnMin { min-width: var(--msgMinSize); } .msgSmnMin, .msgHmnMin { min-height: var(--msgMinSize); }
.msgSmxMin, .msgWmxMin { max-width: var(--msgMinSize); } .msgSmxMin, .msgHmxMin { max-height: var(--msgMinSize); }

.msgSmnMax, .msgWmnMax { min-width: var(--msgMaxSize); } .msgSmnMax, .msgHmnMax { min-height: var(--msgMaxSize); }
.msgSmxMax, .msgWmxMax { max-width: var(--msgMaxSize); } .msgSmxMax, .msgHmxMax { max-height: var(--msgMaxSize); }

.msgRadSmall { border-radius: var(--msgRadSmall); }
.msgRad      { border-radius: var(--msgRad); }

.msgPadSmall { padding: var(--msgPadSmall); }

.msgPad      { padding: var(--msgPad); }

.msgPadLarge { padding: var(--msgPadLarge); }

.msgLinePad, .msgLinePadH { padding-left: var(--msgLPH); padding-right: var(--msgLPH); }
.msgLinePad, .msgLinePadV { padding-top: var(--msgLPV); padding-bottom: var(--msgLPV); }

.msgGapSmall { gap: var(--msgGapSmall); }
.msgGap      { gap: var(--msgGap); }

.msgLH { line-height: var(--msgLH); }

.msgFn      { font-size: var(--msgFont); }
.msgFnSmall { font-size: var(--msgFontSmall); }





/* Message list */

.msgList {
    font-size: var(--msgFont);
    padding: var(--msgGap) 0;
    word-break: break-word;
}





/* Object */

.msgObjectFlex { max-width: var(--msgMaxSize); }

.msgGroup.my    .msgObjectFlex { margin-left:  auto; justify-content:   flex-end; }
.msgGroup.other .msgObjectFlex { margin-right: auto; justify-content: flex-start; }

.msgGroup.my    .msgObject { padding-left:  var(--msgPadLarge); }
.msgGroup.other .msgObject { padding-right: var(--msgPadLarge); }

.msgList.avMy    .msgGroup.my    .msgObject { padding-right: calc((var(--msgPadSmall) * 2) + var(--msgMinSize)); }
.msgList.avOther .msgGroup.other .msgObject { padding-left:  calc((var(--msgPadSmall) * 2) + var(--msgMinSize)); }





/* Animation */

.msgObject {
    padding: 0 var(--msgPad);
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

.msgGroup.my    .msgObject { animation-name:    msgObjectShowMy; transform: translateX(25%);  }
.msgGroup.other .msgObject { animation-name: msgGrouObjectOther; transform: translateX(-25%); }

@keyframes msgObjectShowMy {
    from { opacity: 0; transform: translateX(25%); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes msgGrouObjectOther {
    from { opacity: 0; transform: translateX(-25%); }
    to   { opacity: 1; transform: translateX(0); }
}

.msgObject:nth-child(2)  { animation-delay: 0.1s; }
.msgObject:nth-child(3)  { animation-delay: 0.2s; }
.msgObject:nth-child(4)  { animation-delay: 0.3s; }
.msgObject:nth-child(5)  { animation-delay: 0.4s; }
.msgObject:nth-child(6)  { animation-delay: 0.5s; }
.msgObject:nth-child(7)  { animation-delay: 0.6s; }
.msgObject:nth-child(8)  { animation-delay: 0.7s; }
.msgObject:nth-child(9)  { animation-delay: 0.8s; }
.msgObject:nth-child(10) { animation-delay: 0.9s; }
.msgObject:nth-child(11) { animation-delay: 1.0s; }
.msgObject:nth-child(12) { animation-delay: 1.1s; }
.msgObject:nth-child(13) { animation-delay: 1.2s; }
.msgObject:nth-child(14) { animation-delay: 1.3s; }
.msgObject:nth-child(15) { animation-delay: 1.4s; }
.msgObject:nth-child(16) { animation-delay: 1.5s; }
.msgObject:nth-child(17) { animation-delay: 1.6s; }
.msgObject:nth-child(18) { animation-delay: 1.7s; }
.msgObject:nth-child(19) { animation-delay: 1.8s; }
.msgObject:nth-child(20) { animation-delay: 1.9s; }





/* Message bubble */

.msgMessage:before {
    position: absolute;
    display: block;
    --msgCorner: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PHBhdGggZD0iTTQwLDBIOHYzMGMwLDMuNy0yLjQzLDcuNC02LjExLDcuOTQtLjUxLjA3LS44OS41MS0uODksMS4wMiwwLC41OC40NywxLjA0LDEuMDQsMS4wNGgzNy45NlYwWiIvPjwvc3ZnPg==");
    -webkit-mask-image: var(--msgCorner);
    mask-image:         var(--msgCorner);
    -webkit-mask-repeat: no-repeat;
    mask-repeat:         no-repeat;
    -webkit-mask-position: left bottom;
    mask-position:         left bottom;
    -webkit-mask-size:     40px 40px;
    mask-size:             40px 40px;
    background-color: inherit;
    width:  calc(var(--msgRad) + 8px); /* 8px потому что выступ этой пимпочки в картинке равен 8 пикселям. это не переменная */
    height: var(--msgRad);
    bottom: 0;
}

.msgMessage:before { content: ""; }

.msgGroup.my .msgMessage:before {
    left: 100%;
    margin-left: calc(var(--msgRad) * -1);
    transform: scaleX(-1);
}

.msgGroup.other .msgMessage:before {
    right: 100%;
    margin-right: calc(var(--msgRad) * -1);
}

.msgObject:not(:last-child) .msgMessage:before { display: none; }





/* Nickname */

.msgObject:not(:first-child)                 .msgItemNickname,
.msgList:not(.nicknameMy)    .msgGroup.my    .msgItemNickname,
.msgList:not(.nicknameOther) .msgGroup.other .msgItemNickname { display: none; }





/* Avatar */

.msgAvatar {
    width:  var(--msgMinSize);
    height: var(--msgMinSize);
}

.msgGroup.other .msgAvatar { left:  calc((var(--msgMinSize) + var(--msgPadSmall)) * -1); }
.msgGroup.my    .msgAvatar { right: calc((var(--msgMinSize) + var(--msgPadSmall)) * -1); }

.msgObject:not(:last-child)            .msgAvatar,
.msgList:not(.avMy)    .msgGroup.my    .msgAvatar,
.msgList:not(.avOther) .msgGroup.other .msgAvatar { display: none; }





/* Time */

.msgTime {
    width: var(--msgPadLarge);
    font-size: var(--msgFontSmall);
    min-height: var(--msgMinSize);
}

.msgPoster .msgTime {
    color: #ffffff;
    text-shadow: 0 1px 1px #000000;
}

.msgGroup.my .msgTime {
    right: 100%;
    padding-right: var(--msgGap);
    justify-content: flex-end;
    text-align: right;
}

.msgGroup.other .msgTime {
    left: 100%;
    padding-left: var(--msgGap);
    justify-content: flex-start;
}

.msgList:not(.timeMy)    .msgGroup.my    .msgTime,
.msgList:not(.timeOther) .msgGroup.other .msgTime { display: none; }

.msgObject:not(:last-child) .msgTime { opacity: 0; }

.msgObject:hover .msgTime { opacity: 1; }





/* Radius */

.msgContentIn:not(:first-child),
.msgItem + .msgKeyboard,
.msgGroup.other .msgObject:not(:first-child) .msgKeyboard
{ border-top-left-radius: 0; }

.msgContentIn:not(:first-child),
.msgItem + .msgKeyboard,
.msgGroup.my .msgObject:not(:first-child) .msgKeyboard
{ border-top-right-radius: 0; }

.msgContentIn:not(:last-child),
.msgGroup.other .msgObject:not(:last-child) .msgKeyboard
{ border-bottom-left-radius: 0; }

.msgContentIn:not(:last-child),
.msgGroup.my .msgObject:not(:last-child) .msgKeyboard
{ border-bottom-right-radius: 0; }



.msgGroup.other .msgObject:not(:first-child) .msgContentIn:first-child
{ border-top-left-radius: var(--msgRadSmall); }

.msgGroup.my .msgObject:not(:first-child) .msgContentIn:first-child
{ border-top-right-radius: var(--msgRadSmall); }

.msgGroup.other .msgObject:not(:last-child) .msgContentIn:last-child,
.msgItem:not(:last-child) .msgContentIn:last-child
{ border-bottom-left-radius: var(--msgRadSmall); }

.msgGroup.my .msgObject:not(:last-child) .msgContentIn:last-child,
.msgItem:not(:last-child) .msgContentIn:last-child
{ border-bottom-right-radius: var(--msgRadSmall); }





/* Links */

.msgDiaLink { padding: var(--msgLP); }

.msgDiaIc {
    position: relative;
    width:  1em;
    height: 1em;
    top: 1px;
    display: inline-flex;
    vertical-align: text-top;
}

@-moz-document url-prefix() { .msgDiaIc { top: 0; } }





/* Date */

.msgDate {
    position: sticky;
    top: var(--msgGap);
    padding: var(--msgPadSmall) var(--msgPad);
    font-size: var(--msgFontSmall);
    z-index: 5;
}





/* Await animation */

.msgDiaWait {
    animation-name: msgDiaWaitAnim;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    width: 200%;
    opacity: 0.8;
    background:
            radial-gradient(circle at 20% 30%, #ff4400, transparent 50%),
            radial-gradient(circle at 80% 70%, #0080ff, transparent 50%),
            radial-gradient(circle at 50% 50%, #00ff00, transparent 50%),
            radial-gradient(circle at 30% 80%, #ff0080, transparent 50%);
}

@keyframes msgDiaWaitAnim {
    0%   { transform: translate(0%,     0%); }
    5%   { transform: translate(20%,  -25%); }
    10%  { transform: translate(-25%,  25%); }
    15%  { transform: translate(25%,   15%); }
    20%  { transform: translate(-20%, -25%); }
    25%  { transform: translate(15%,   25%); }
    30%  { transform: translate(-25%,  10%); }
    35%  { transform: translate(25%,  -20%); }
    40%  { transform: translate(-15%,  25%); }
    45%  { transform: translate(20%,  -25%); }
    50%  { transform: translate(-25%,  15%); }
    55%  { transform: translate(25%,  -25%); }
    60%  { transform: translate(-20%,  25%); }
    65%  { transform: translate(15%,  -20%); }
    70%  { transform: translate(-25%,  25%); }
    75%  { transform: translate(25%,  -15%); }
    80%  { transform: translate(-15%,  25%); }
    85%  { transform: translate(20%,  -25%); }
    90%  { transform: translate(-25%,  20%); }
    95%  { transform: translate(25%,  -25%); }
    100% { transform: translate(0%,     0%); }
}




/* Media */

@media (max-width: 440px) {
    @media (pointer: coarse) {
        :root {
            --msgFont:      14px;
            --msgFontSmall: 12px;
            --msgLH:        20px;
            --msgPadSmall:  10px;
            --msgMinSize:   40px;
            --msgRad:       20px;
            --msgRadSmall:   6px;
        }
    }
    .msgJournalWrap { width: 100%; }
}

@media (min-width: 769px) { :root { --msgMaxSize: 640px; } }





/* Simulation */

.msgSimCheck { display: none; }
.msgSimulate .msgSimCheck:not(:checked) + .msgGroup + .msgGroup,
.msgSimulate .msgSimCheck:not(:checked) + .msgGroup + .msgGroup + .msgSimCheck:not(:checked) + .msgGroup { display: none; }