@charset "UTF-8";

/* 읽지 않은 채팅 배지 */
.account-menu-trigger__avatar{
    position:relative;
}

.chat-unread-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    min-width:15px;
    height:15px;
    padding:0 3px;
    border-radius:999px;
    color:#fff!important;
    background:#ef3f5d;
    box-shadow:
        0 0 0 1px #fff,
        0 2px 5px rgba(239,63,93,.22);
    font-family:Arial,sans-serif;
    font-size:7px;
    font-style:normal;
    font-weight:800;
    line-height:15px;
    white-space:nowrap;
}

.chat-unread-badge[hidden]{
    display:none!important;
}

.chat-unread-badge--profile{
    position:absolute;
    z-index:3;
    top:-3px;
    right:-4px;
    min-width:14px;
    height:14px;
    padding:0 3px;
    font-size:7px;
    line-height:14px;
}

.account-menu-trigger.has-chat-unread{
    border-color:#f4a5b3;
    box-shadow:
        0 4px 12px rgba(26,36,68,.08),
        0 0 0 3px rgba(239,63,93,.07);
}

.chat-menu-tail{
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    gap:5px;
}

.chat-menu-tail>em:last-child{
    color:#a5acb8;
    font-size:18px;
    font-style:normal;
    font-weight:400;
}

.chat-unread-badge--menu{
    min-width:15px;
    height:15px;
    padding:0 3px;
    color:#fff!important;
    box-shadow:none;
    font-size:7px;
    font-weight:800;
    line-height:15px;
}

.mobile-chat-nav{
    position:relative;
}

.chat-unread-badge--mobile{
    position:absolute;
    top:3px;
    left:calc(50% + 7px);
    min-width:14px;
    height:14px;
    padding:0 3px;
    color:#fff!important;
    box-shadow:0 0 0 1px #fff;
    font-size:6px;
    font-weight:800;
    line-height:14px;
}

/* 새 채팅 도착 토스트 */
.chat-new-toast{
    position:fixed;
    z-index:5200;
    top:82px;
    right:22px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    width:min(360px,calc(100vw - 30px));
    align-items:center;
    gap:11px;
    box-sizing:border-box;
    padding:12px 13px;
    border:1px solid #e2e5ec;
    border-radius:14px;
    color:#292f3b;
    background:rgba(255,255,255,.98);
    box-shadow:0 16px 42px rgba(24,32,58,.20);
    opacity:0;
    transform:translateY(-10px);
    transition:
        opacity .20s ease,
        transform .20s ease;
}

.chat-new-toast.is-visible{
    opacity:1;
    transform:translateY(0);
}

.chat-new-toast__icon{
    display:grid;
    width:38px;
    height:38px;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:#5b5bd6;
}

.chat-new-toast__icon svg{
    width:21px;
    height:21px;
}

.chat-new-toast__body{
    min-width:0;
}

.chat-new-toast__body strong,
.chat-new-toast__body small{
    display:block;
}

.chat-new-toast__body strong{
    color:#252b36;
    font-size:12px;
}

.chat-new-toast__body small{
    margin-top:3px;
    overflow:hidden;
    color:#747d8b;
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.chat-new-toast>em{
    display:inline-flex;
    min-height:30px;
    align-items:center;
    padding:0 9px;
    border-radius:7px;
    color:#4f4fc7;
    background:#f0efff;
    font-size:9px;
    font-style:normal;
    font-weight:900;
}

@media(max-width:760px){
    .chat-new-toast{
        top:66px;
        right:12px;
        width:calc(100vw - 24px);
    }

    .chat-unread-badge--profile{
        top:-4px;
        right:-5px;
    }
}