main:has(.chat-panel), .container:has(.chat-panel) {
    padding: 0 !important;
}

.chat-panel .message-panel {
    flex-grow:1;
}
.chat-panel {
    display: flex;
    /*chat panel*/
    --chat-header: 56px;
    --chat-panel-spacing: calc(100dvh - var(--topnav-minheight) - var(--topnav-sidebar-space) - var(--chat-header));
    box-shadow: var(--chat-panel-right-shadow);
}
.chat-panel .chat-header {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    color: var(--text-color-subdued);
    background-color: var(--white);
    padding: var(--spacing-3) var(--spacing-2);
    border-radius: 8px 0 0 0;
    height: var(--chat-header);
}
.chat-panel .chat-area-header {
    display: flex;
    gap: var(--spacing-4);
    align-items: center;
    color: var(--text-color-subdued);
    background-color: var(--white);
    padding: var(--spacing-3);
    border-right: 0.5px solid var(--color-grey-light);
    border-radius: 8px 8px 0 0;
    height: var(--chat-header);
}
.chat-panel .chat-area-header-action-button{
    display:flex;
    align-items:center;
    gap:var(--spacing-2);
    margin-left:auto;
}
.chat-panel .chat-contact-opened {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}
.chat-panel .chat-side-panel {
    height:var(--chat-panel-spacing);
    width: 100%;
    border-bottom: 0.5px solid var(--color-grey-light);
    border-top: 0.5px solid var(--color-grey-light);
}
.chat-panel .chat-area {
    border-left: 0;
    height: var(--chat-panel-spacing);
}
.chat-panel .chat-head {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background-color: var(--white);
    color: var(--text-color-subdued);
    border-bottom: 0.5px solid var(--color-grey-light);
    transition: background-color 600ms ease-out, color 100ms ease-out, width 400ms ease-in-out;
}
.chat-panel .chat-head:hover {
   background-color: var(--rgba-hover-light);
}
.chat-panel .chat-head.active {
    background-color: var(--menu-selected-color);
}

.chat-panel .chat-head:first-child {
    border-top: 0;
}
.chat-panel .chat-avatar-group{
    display:flex;
    gap:var(--spacing-2);
    align-items:center;
}
.chat-panel .chat-head-title {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}
.chat-panel .chat-contact-person {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}
.chat-panel .chat-head-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}
.chat-panel .chat-username {
    color: var(--text-color-main);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-default);
}
.chat-panel .chat-time {
    color: var(--color-grey-medium);
    font-size: var(--font-size-smaller);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-small);
    margin-left: auto;
}
.chat-panel .chat-contact-person span:first-child {
    color: var(--text-color-subdued);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-small);
}
/*.chat-panel .chat-contact-person > div:first-child span:first-child {
    color: var(--text-color-subdued);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-small);
}*/
.chat-panel .chat-contact-person span:nth-child(2) {
    color: var(--text-color-main);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-small);
}
.chat-panel .chat-contact-person .badge-num {
    margin-left:auto
}
/*.chat-panel .chat-contact-person > div:first-child span:last-child {
    color: var(--text-color-main);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-small);
}*/
/*Add ellipsis on two lines*/
.chat-panel .chat-head-message {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.chat-panel .chat-head-message p {
    color: var(--text-color-subdued);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-small);
    margin-bottom:0;
}
.chat-panel .chat-contacts {
    max-width: 311px;
    border-right: 0.5px solid var(--color-grey-light);
}

@media(min-width:576px){
    .message-panel .btn-icon:has(.ph-arrow-left){
        display:none;
    }
    .message-panel {
        display:block;
    }
}
@media(max-width:575px){
    .message-panel .btn-icon:has(.ph-arrow-left){
        display:block;
    }
    .message-panel{
        display:none;
    }
    .chat-contacts{
        display:block;
    }
    .chat-panel .chat-contacts {
        max-width: 100%;
        border-right: 0.5px solid var(--color-grey-light);
    }
    .chat-panel .chat-area-header {
        gap: var(--spacing-2);
        padding: var(--spacing-2);
    }
    .message-panel {
        border-left: 0.5px solid var(--color-grey-light);
        border-radius: 8px 0 8px;
    }
    .chat-panel {
        box-shadow: var(--chat-panel-double-shadow);
    }
}