html, body
{
    color: var(--acent);
    background-color: var(--neutral1);
    height: 100svh;
    width: 100svw;
}
*.hidden
{
    display: none;
}
main
{
    display: grid;
    grid-template-columns: minmax(5rem, max-content) minmax(5rem, max-content) auto;
    height: 100%;
}
main > div
{
    outline: 1px solid var(--primary);
}

#call-rooms
{
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
#call-chats
{
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

#call-active
{
    display: grid;
    grid-template-rows: max-content auto max-content;
}
#call-header
{
    padding: .5rem 1rem;
    display: grid;
    grid-template-columns: auto max-content;
}
#call-actions
{
    display: flex;
    gap: .5rem;
}
#call-conversation
{

}

#chat-input
{
    display: grid;
    grid-template-columns: auto 5rem;
    place-items: center;
}

button, input, textarea, select
{
    margin: 0;
}

.panel
{

}
.panel-inset
{

}

.list-element
{
    background-color: var(--secondary);
    border: 1px solid var(--alternative);
    padding: .5rem 1rem;
}
.list-element.selected
{
    border-left: 4px solid var(--acent);
    padding-left: calc(1rem - 3px);
}
.list-element:hover
{
    background-color: var(--hover);
}

.icon
{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--bg-color-dark);
    display: inline-flex;
    place-items: center;
    place-content: center;
    cursor: pointer;
}
.icon:hover
{
    background-color: var(--bg-color-light);
}
.icon:active
{
    background-color: var(--bg-color-light);
}

.message-separator
{
    display: grid;
    grid-template-columns: 6rem auto;
}
.group-separator
{
    display: grid;
    grid-template-columns: 6rem auto;
    grid-auto-rows: max-content;
    grid-gap: .5rem 0;
}
.group-separator.selected
{
    background-color: color-mix(in lab, var(--button-color-hover), #000000 20% );
    color: #000;
}

textarea
{
    min-height: unset;
}



h1
{
    font-size: 200%;
    margin: 0;
}


body > .flash-messages
{
    display: none;
    position: fixed;
    top: 20%;
    width: 100%;
    pointer-events: none;
}
body > .flash-messages:has(.message)
{
    display: block;
}
body > .flash-messages .message
{
    color: var(--font-color);
    background-color: var(--bg-color-base);
    padding: var(--border-width);
    border: 4px outset color-mix(in lab, var(--border-color), #000 10% );
    border-top-color: color-mix(in lab, var(--border-color), #FFFFFF 20% );
    border-bottom-color: color-mix(in lab, var(--border-color), #000000 20% );
    box-shadow: 0px 0px 3px 0px #201815;
    margin: 0 auto;
    width: max-content;
    opacity: 1;
    -webkit-animation: hideAnimation 2s forwards;
    animation: hideAnimation 2s forwards;
}
@keyframes hideAnimation {
    0%   {opacity: 1;}
    80%  {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes hideAnimation {
    0%   {opacity: 1;}
    80%  {opacity: 1;}
    100% {opacity: 0;}
}