/*************************************************************

@hagalnaud&nothingale for dead blonde
MESSENGER STYLES

**************************************************************/

/*************************************************************
main color messenger
**************************************************************/

:root {--color: #e1d6ea;}

/*************************************************************
fonts messenger
**************************************************************/

@font-face {
    font-family: 'IBMPlexSans';
    src: url('https://forumstatic.ru/files/001b/9b/e5/60634.eot');
    src: url('https://forumstatic.ru/files/001b/9b/e5/60634.eot?#iefix') format('embedded-opentype'),
        url('https://forumstatic.ru/files/001b/9b/e5/78111.woff2') format('woff2'),
        url('https://forumstatic.ru/files/001b/9b/e5/72018.woff') format('woff'),
        url('https://forumstatic.ru/files/001b/9b/e5/80978.ttf') format('truetype'),
        url('https://forumstatic.ru/files/001b/9b/e5/44792.svg') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
}
@font-face {
    font-family: fa-solid;
    src: url("https://forumstatic.ru/files/001b/73/d1/43250.ttf?v=1") format("truetype");
}
@font-face {
    font-family: fa-regular;
    src: url("https://forumstatic.ru/files/001b/73/d1/37687.ttf?v=1") format("truetype");
}

/*************************************************************
base messenger
**************************************************************/

.messenger {
    width: 500px;
    height: auto;
    margin: 10px!important;
    /* outline: 1px solid red; */
    font-family: 'IBMPlexSans';
}

.head {
    display: inline-flex;
    gap: 10px;
    width: 460px;
    background: var(--color);
    padding: 3px 20px;
    border-radius: 20px 20px 0px 0px;
    /* outline: 1px solid red; */
    height: 37px;
    align-items: center;
}

.head p {
    padding: 4px 0 0!important;
    color: white;
    text-transform: uppercase;
    line-height: 9px!important;
    font-size: 7px;
    width: 343px;
}

.head p strong {
    font-size: 12px;
}

.mess {
    width: 500px;
    display: inline-flex;
    /* outline: 1px solid red; */
    background: #f8f8f8;
    flex-direction: column;
    align-items: center;
    padding: 10px 0px;
}

.mess span.emoji {
    border: none;
}

.mess span.emoji img {
    max-width: 30px;
}

.mess span.emoji mark {
    margin-top: 34px;
}

img.ava {
    border-radius: 100%;
    width: 27px;
cursor: pointer;}

.mess span {
    padding: 7px 6px;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    max-width: 192px;
    font-size: 9px;
    color: #acacac;
    letter-spacing: 0.7px;
}

.send {
    width: 500px;
    height: 37px;
    display: inline-flex;
    background: #e7e7e7;
    border-radius: 0px 0px 20px 20px;
    /* outline: 1px solid red; */
    justify-content: center;
    gap: 10px;
    align-items: center;
}

.send span {
    display: inline-flex;
    background: #f0f0f0;
    height: 19px;
    border-radius: 13px;
    width: 350px;
    align-items: center;
    padding: 1px 10px;
    justify-content: space-between;
    color: #919191;
    font-size: 9px;
}

.answer {
    display: block;
    border-left: 3px solid var(--color);
    padding-left: 6px;
    margin: 3px;
}

.mess span img {
    max-height: 188px;
    border-radius: 5px;
}

.mess mark {
    background: none;
    display: block;
    float: right;
    margin-left: -13px;
    margin-top: 16px;
    font-size: 6px;
    color: #919191cf;
}

.left, .right {
    width: 480px;
    /* outline: 1px solid red; */
    padding: 9px 10px;
    display: inline-flex;
    align-items: flex-end;
    gap: 7px;
}

.left {
    justify-content: flex-start;
}

.right {
    justify-content: flex-end;
}

/*************************************************************
icons messenger
**************************************************************/

.taps {
    display: inline-flex;
    gap: 5px;
}

.tap:before {
    font-family: 'fa-solid';
    position: relative;
    color: #ffffff;
    background-image: none!important;
    font-size: 13px;
    cursor: pointer;
}

.tap.back:before {
    content: "\f053";
    padding-right: 7px;
}

.tap.video:before {
    content: "\f03d";
}

.tap.call:before {
    content: "\f095";
}

.tap.options:before {
    content: "\f142";
}

.tap.smile:before {
    content: "\f118";
    padding: 4px;
    font-family: fa-regular;
    background: #f2f2f2;
    border-radius: 100%;
    color: #919191;
}

.tap.add:before {
    content: "\f0c6";
    color: #919191;
}

.tap.photo:before {
    content: "\f030";
    color: #919191;
}

.tap.mic:before {
    content: "\f130";
    display: inline-flex;
    width: 20px;
    height: 20px;
    color: white!important;
    background: var(--color);
    border-radius: 100%;
    justify-content: center;
    align-items: center;
}
/*************************************************************
spoiler messenger
**************************************************************/

summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;} 
summary {
    width: 200px;
    padding: 0.3em 0.6em 0.3em 1.7em!important;
    display: inline-block;
    cursor: pointer;
    position: relative;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0px;
    margin-top: 25px!important;
    text-transform: uppercase;
    font-family: 'IBMPlexSans';
}
summary:before {
    left: 0.3em;
    top: 0.4em;
    color: transparent;
    background: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=) no-repeat 47% 47% / 2em 2em;
    opacity: 0.6;
    width: 1em;
    height: 1em;
    content: "";
    position: absolute;
    transition: transform .5s;
}
details[open] > summary:before {
  transform: rotateZ(90deg);
}
summary ~ * {
   padding:0 1em 0 1em;
}
details[open] summary ~ *{ 
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}
summary:focus {
  outline:0;
}
details {
    display: block;
    margin-bottom: 0.5rem;
    background: url(https://forumstatic.ru/files/001b/d5/6a/62216.png) no-repeat left top;
}
/*************************************************************

@hagalnaud&nothingale for dead blonde
MESSENGER STYLES

**************************************************************/