/*
Generic stylesheets for chat pages
*/


/* Messages container */

#chatMessagesContainer {
    height:16rem;
    max-height:calc(100vh - 6rem);
	padding:1rem;
	margin-bottom:0.4rem;
	overflow-y:scroll;
	background-color:#f4f4f4;
    border-top-left-radius:0.5rem;
    border-bottom-left-radius: 0.5rem;
}

#chatMessagesContainer {
    position:relative;
}

#chatMessagesContainer div.msg {
    display:flex;
    margin-bottom:0.7rem;
}

#chatMessagesContainer div.msg .avatar-container {
    margin-right: 0.5rem;
}

#chatMessagesContainer div.msg .avatar-container .avatar {
    display: block;
    width:2rem;
    height:2rem;
    background-color:#ddd;
    border-radius:100%;
    position:relative;
    background-size: 100% 100%;
    background-size: cover;
    background-position: center;
}

#chatMessagesContainer div.msg .avatar-container .avatar.active::after {
    content: "";
    position: absolute;
    bottom:0;
    right:0;
    width:30%;
    height:30%;
    border-radius: 100%;
    background-color: green;
    border:1px solid white;
    opacity:0.5;
}

#chatMessagesContainer div.msg .content {
    display:block;
    padding:0.5rem;
    background-color:white;
    border-radius:0.5rem;
    line-height:1.25;
    color:#222;
    width:calc(100% - 0.5rem);
}

#chatMessagesContainer div.msg .content .author {
    opacity:0.5;
    margin-bottom: 0.3rem;
}

#chatMessagesContainer div.msg.staff .content .author {
    color: var(--color-primary);
    opacity: 1;
    font-weight: 600;
}

#chatMessagesContainer div.msg.staff .content .author::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.2rem;
    width: 1em;
    height: 1em;
    background-image:url("../img/icons/verified.8cf7946202f2.svg");
    background-size: 100% 100%;
    opacity: 0.3;
}

#chatMessagesContainer div.msg .avatar-container .avatar .placeholder-initials {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    text-align: center;
    font-weight:bold;
    opacity:0.5;
    text-transform: uppercase;
    font-size:1.2rem;
}

#chatMessagesContainer div.msg:last-child {
    margin-bottom:0;
}

#chatMessagesContainer div.msg span.text {
    display:block;
    margin-top:0.3rem;
}

#chatMessagesContainer div.msg span.date {
    float:right;
    color:#aaa;
}

#chatMessagesContainer div.msg img.avatar {
    width:2rem;
    height:2rem;
    float:left;
    margin-right:0.2rem;
}

#chatMessagesContainer div.msg.own .content-container {
    margin-right:0;
    margin-left:auto;
}

#chatMessagesContainer div.msg.own .content-container .content {
    background-color:var(--color-primary);
    color:white;
}

#chatMessagesContainer div.msg.own .content-container .content .author {
    display:none;
}

#chatMessagesContainer div.msg.own .avatar-container {
    order:2;
    margin-right:0;
    margin-left:1rem;
}

#chatMessagesContainer div.msg .content-container .emoticon {
    display:inline-block;
    width:1rem;
    height:1rem;
}

#chatMessagesContainer div.msg.same-author .avatar-container {
    opacity: 0;
}

#chatMessagesContainer div.msg.same-author .content .author {
    display:none;
}

#chatMessagesContainer div.msg.same-author {
    margin-top: -0.5rem;
}

#chatMessagesContainer > .someone-typing img {
    width:2rem;
    height:2rem;
    margin-left:2.5rem;
    position:absolute;
    bottom:0;
}

#chatMessagesContainer > img.loading {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    opacity:0.5;
    width:1.5rem;
    height:1.5rem;
}


/* Chat input */

#chatForm {
    width:100%;
    content: "";
    clear: both;
    display: table;
}

#chatForm input {
    display:block;
    float:left;
    font-size:1rem;
    border:0px none transparent;
    border-radius:0.5rem;
}

#chatForm input[type=text] {
    width:calc(100% - 6rem - 0.5rem);
    background-color:#eee;
    padding:0.5rem 1rem;
    margin-right:0.5rem;
}

#chatForm input[role=send] {
    background-color: var(--color-primary);
    color:white;
    padding:0.5rem 1rem;
    width:6rem;
    transition: 0.1s;
}

#chatForm input[role=send]:hover {
    opacity: 0.8;
}