/* TPL DIGITWIN */
:root {
    --fakeborder-gradient: linear-gradient(281.4deg, rgb(248, 45, 152) -2.34%, rgb(88, 51, 239) 114.41%);
}

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
html {font-size: 75%}
body {
    background-image: url('./images/digitwin-back.jpg');
    background-size: cover;
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-feature-settings: "kern";
    animation: waitAnim .5s forwards;
    animation-delay: .5s; /* wait for loading */
    opacity: 0;
}
@keyframes glitch{
    2%,64%{
        transform: translate(2px,0) skew(0deg);
    }
    4%,60%{
        transform: translate(-2px,0) skew(0deg);
    }
    62%{
        transform: translate(0,0) skew(5deg);
    }
}
@keyframes waitAnim {
    0% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
}
.avt {
    width: 7rem;
    left: 0
}
.me .avt {
    top: -.2rem;
    right: 0
}
.heightWrp {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 5rem;
    animation: openingChat .5s forwards;
    animation-delay: 2s;
    opacity: 0;
}
@keyframes openingChat {
    0% {
        opacity: 0;
        transform: scale(0.8, 0);
    }
    
    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}
#chatSpawn {
    display: flex;
    /* to fit back the positioned absolute .answersWrp */
    position: relative;
    justify-content: center;
    padding: 2rem;
    background: rgba(0,0,0,.9);
    border-radius: 3rem;
    width: 100%;
}
.has3dAvatar #chatSpawn {
    justify-content: end;
}
#chatSpawn::before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    top: 0;
    left: 0;
    transition: all 1s;
    background: url(./images/digitwin-plasma-spinicci.png) 50% 50% no-repeat;
    background-size: 76%;
    animation: backgroundZoomAnim 6s linear infinite;
}
.has3dAvatar #chatSpawn::before {
    width: 55%;
    background-position: 50% 0;
    background-size: 100%
}
@keyframes backgroundZoomAnim {
    50% {
        opacity: .8;
        transform: rotate(10deg) skew(10deg) scale(.9);
    }
}
/*@keyframes glitch{
    2%,64%{
        transform: translate(2px,0) skew(0deg);
    }
    4%,60%{
        transform: translate(-2px,0) skew(0deg);
    }
    62%{
        transform: translate(0,0) skew(5deg);
    }
}*/

.has3dAvatar #chatViewportWrp {
    width: 55%;
}
.scrollWrp {
    width: 100%;
    padding-right: 1rem;
}
.has3dAvatar .answersWrp {
    width: 52%;
    background: transparent !important;
    padding: 2rem;
    left: auto;
    right: 0;
}
.answersWrp form {
    border-radius: 50px;
    position: relative;
    /* border effect change to increase fake border size */
    padding: 1px;
    background: var(--fakeborder-gradient);
    max-width: 1100px;
    margin: 0 auto;
}
.answersWrp form fieldset div {
    border-radius: 35px;
    background-image: linear-gradient(90.83deg, rgb(8, 8, 30) 11.84%, rgb(33, 5, 12) 111.32%) !important;
}
canvas {
    margin-left: -4%;
    margin-top: 10%;
    position: absolute;
    width: 70% !important;
    height: 70% !important;
    pointer-events: none;
    animation: enteringAvatar 1s forwards 5s;
    opacity: 0;
    z-index: 9;
}
@keyframes enteringAvatar {
    0% {
        opacity: 0;
        transform: scale(.2);
    }
    
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.msgWrp, .chatMsg {
    transition: all 1s
}
.msgWrp .chatMsg {
    padding: 2.2rem 2.8rem;
    border-radius: 1.6rem;
    border-top-left-radius: 0;
    font-size: 1.6rem;
    line-height: 150%;
    letter-spacing: -0.01em;
    max-width: none;
    margin: .5rem;
}
.me .msgWrp .chatMsg {
    border-bottom-right-radius: 0;
    border-top-left-radius: 1rem;
}
.chat .merged .chatMsg {
    margin-top: -0.6rem !important;
}
.withAvatar2.me .msgWrp {
    display: block;
}
.withAvatar1 .msgWrp,
html[dir=rtl] .withAvatar2.me .msgWrp {
    margin: .6rem 0 .6rem 7.2rem;
}
.msgWrp .chatMsg p:last-child {
    margin-bottom: 0
}
li:not(.me) .msgWrp .chatMsg:after {
    left: 0;
    border-left: 0
}
.me .msgWrp .chatMsg:after {
    right: 0;
    margin-right: -.6rem;
    margin-left: 0;
    border-left-color: rgb(217, 253, 211);
    border-right: 0
}
.chat .merged .chatMsg {
    border-top-left-radius: 1rem;
    margin-top: -1.6rem;
}
.chat .typing .chatMsg {
    background: rgba(var(--cfg_typing_bckg_color), var(--cfg_typing_bckg_color_alpha)) !important;
}
.chat .typing .msgWrp,
.chat .merged .msgWrp,
.chat .me .msgWrp {
    background: transparent !important;
}
.chat .merged .chatMsg:after,
.chat .typing .chatMsg:after {
    border-right-color: transparent;
}
.chatMsg .imgCaption {
    font-size: 1.419rem
}
#screenShare button,
.chat .answers {
    box-shadow: none;
}
.chat .openAns {
    justify-content: center;
}
.chat .openAnsWrp {
    align-items: center;
}
.chat .openAns input,
.chat .openAns textarea {
    border-radius: 2.4rem;
    border: 0;
    background: rgb(241, 241, 244);
    font-size: 1.7rem; /* avoid zooming on ios */
    font-stretch: normal;
    font-style: normal;
    font-variant-caps: normal;
    font-weight: 400;
    line-height: 2rem;
    padding: .9rem 2.2rem 1.1rem
}
.chat .openAns input {
    height: 4.5rem
}
.butt,
button,
.uploader label {
    color: #fff;
    background: var(--fakeborder-gradient) !important;
    border-radius: 2rem;
    height: 4rem;
    padding: 0 2rem;
}
.loaderWrp {
    margin-top: -.7rem
}
.spinner.circles div {
    background: #fff
}
#floatButts {
    right: auto;
    left: 5rem;
    top: 39%;
    opacity: 0;
    animation: waitAnim 1s forwards;
    animation-delay: 6s;
}
#floatButts button {
    width: 4rem;
}
#floatButts button,
.scrollButt {
    background: var(--fakeborder-gradient);
}
.chat .answers button:hover,
.answers .butt:hover,
.uploader label:hover,
#floatButts button:hover {
    background: linear-gradient(281.4deg, rgb(88, 51, 239) -2.34%, rgb(248, 45, 152) 114.41%);
}
#voiceBtn,
#screenShare .shareButt {
    border-bottom-right-radius: 2rem;
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
#voiceBtn {
    display: flex;
    justify-content: center;
}
#voiceBtn svg,
.scrollButt svg,
#voiceInputBtn svg,
.shareButt svg,
.chatMsg .imgLink span svg,
.chat .answers .send svg,
.uploader button svg {
    fill: #fff;
}
.uploader button svg {
    width: 2.5rem
}
#voiceInputBtn,
button.send,
.uploader button {
    position: absolute;
}
.uploader .delete {
    width: 6rem
}
#voiceInputBtn {
    right: 8.5rem;
}
button.send {
    right: 1.5rem;
}
.uploader button {
    right: 1rem;
    top: 0.8rem;
}
.chat .answers .send svg {
    width: 2rem;
    height: 2rem
}
.chat .answers button span {
    display: none
}
.scrollButt {
    width: 4.2rem;
    height: 4.2rem;
    right: 1.1rem;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.scrollButt svg {
    width: 1.9rem
}
#chatInput {
    background-image: linear-gradient(90.83deg, rgb(8, 8, 30) 11.84%, rgb(33, 5, 12) 111.32%) !important;
    height: 6.6rem !important;
    border-radius: 6rem;
    padding-right: 15rem;
    color: #fff;
    font-size: 1.8rem;
    margin: 0;
    width: 100%;
}
#multiCheckbox {
    flex-wrap: wrap;
    padding-right: 7.5rem;
}
.previewWrapper {
    background-image: linear-gradient(90.83deg, rgb(8, 8, 30) 11.84%, rgb(33, 5, 12) 111.32%);
}
input[type="file"]::-webkit-file-upload-button{
    height: 5.4rem !important;
}
.chat .msgWrp {
    /* maing this inlineblock for the below border effect, making all inline-block to avoid undesired renderings */
    display: inline-block;
}
.chatViewport li:last-of-type .msgWrp {
    background: var(--fakeborder-gradient);
    border-radius: 1.6rem;
    border-top-left-radius: 0;
}
.chatViewport li:last-of-type .msgWrp .chatMsg {
    background: #fff;
    color: #333;
}
footer {
    background: rgba(var(--cfg_bckg_color), var(--cfg_bckg_color_alpha))
}
@media screen and (max-width: 1200px) {
    html {font-size: 68%}
    .has3dAvatar #chatSpawn::before {
        width: 65%;
        height: 100%;
        top: 5%;
    }
}
/* fix animation on wide screens with low height */
@media (max-height: 600px) and (min-width: 912px) {
    .has3dAvatar #chatSpawn::before {
        height: 100%;
        background-size: 64%;
        background-position: 30% 37%;
        top: 0;
    }
}
@media screen and (max-width: 912px) {
    html {font-size: 53%}
}
@media screen and (max-width: 720px) {
    html {font-size: 51%}
    #chatInput {
        font-size: 2rem; /* this results in 16px with the current font-size on body */
    }
    .has3dAvatar .scrollWrp {
        padding-right: 0;
        position:relative;
    }
    .avt {
        width: 6rem;
    }
    #chatViewportWrp {
        width: 100% !important;
        display: flex;
        align-items: end;
    }
    #chatSpawn::before {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-size: 120%;
        background-position: 50% 50%;
    }
    .has3dAvatar .heightWrp {
        align-items: end;
    }
    .has3dAvatar #chatSpawn {
        height: 73%
    }
    .has3dAvatar #chatSpawn::before {
        height: 100%;
        background-size: 50%;
        background-position: center top;
        width: 100%;
        top: 0;
    }
    .has3dAvatar #chatViewportWrp::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: -2px;
        height: 100%;
        background: linear-gradient(to top, transparent 97%, rgba(0,0,0,.9) 100%);
        pointer-events: none;
    }
    canvas {
        width: 30% !important;
        height: 30% !important;
        margin-left: 33%;
        margin-top: 0;
    }
    #chatSpawn {
        position: static;
        border-radius: .9rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        justify-content: start;
        background-image: none;
        animation: none;
    }
    .heightWrp, #chatSpawn {
        padding: 0.25rem;
    }
    .answersWrp {
        width: 100% !important;
        padding: 1rem;
    }
    .withAvatar1 .msgWrp, html[dir=rtl] .withAvatar2.me .msgWrp {
        margin-left: 5.2rem;
    }
    .msgWrp .chatMsg {
        padding: 1.3rem 2rem;
        font-size: 2rem;
    }
    #floatButts {
        top: 9%;
        left: 0;
    }
}
@media screen and (max-width: 640px) {
    html {font-size: 50%}
    #chatSpawn::before {
        width: 100%;
        height: 100%;
        background-size: 123%;
    }
    .has3dAvatar #chatSpawn::before {
        width: 100%;
        background-size: 52%;
        top: 0;
    }
}