@charset 'utf-8';

.messenger-top > div {display: flex; gap: .7em;}
.messenger-top div div {position: relative;width: 1.2em;height: 1.2em;}
.messenger-top .search .glass {
    position: absolute;
    top: .05em;
    left: .05em;
    display: block;
    width: .88em;
    height: .88em;
    border: 2px solid;
    border-radius: 50%;
}
.messenger-top .search .grib {
    position: absolute;
    display: block;
    bottom: .2em;
    right: .02em;
    width: .45em;
    height: 0;
    border-top: 2px solid;
    transform: rotate(45deg);
}
.messenger-top .toggle-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.messenger-top .toggle-menu span {
    width: 100%;
    height: 2px;
    background: #565a66;
}

.messages-wrapper {
    height: calc(88% - 3.2em);
    overflow: auto;
    position: relative;
}
.messages {
    padding: 0 var(--screen-x-padding);
}

.enter-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
}
.enter-box .input-item {width: calc(100% - 54px - 2 * var(--screen-x-padding));}
.enter-box input[type="text"] {
    display:block;
    color:#000;
    background: #ffffff;
    border-radius: 1em;
    padding: 3px .7em;
    font-size: 14px;
}
.enter-box button {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.enter-box button#emo {
    display:block;
    position: absolute;
    right: .5em;
    top: 0;
    line-height: 2.2;
    width: unset;
}

.emo-list-wrapper {
    width: 100%;
    height: 165px;
    background: #fff;
    padding: 1em var(--screen-x-padding);
    display: none;
}
.emo-show .emo-list-wrapper {display: block;}
.emo-list ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: .7em;
}
.emo-list ul li {
    cursor: pointer;
}
.emo-list ul li img {float: left;}

.emo-show .bottom-wrapper {padding-bottom: var(--screen-x-padding);}

.phone-screen .talk-box {position:absolute; top:0; left:0; right:0; bottom:0;}
.phone-screen .talk-box .inner {position:relative;height:100%;box-sizing:border-box;}

.phone-screen .chat-item {display:block;position:relative;width:80%;margin:15px 0;clear: both;}
.phone-screen .chat-item:first-child {margin-top: 0;}
.phone-screen .chat-item .talk {display:block;position:relative;font-size: 14px;}
.phone-screen .chat-item .talk .txt {display:inline-block;position:relative;max-width: 80%;text-align:left;border-radius: 1em;padding: .5em .75em;z-index:0;border: 1px solid;}

.phone-screen .chat-item.my:has(.emo) {display: flex; justify-content: end;}
.phone-screen .chat-item .emo {width: 100px;}
.phone-screen .chat-item .emo img {float: left;}

.phone-screen .chat-item.my {float:right; text-align:right;}
.phone-screen .chat-item.my .name,
.phone-screen .chat-item.my .profile-thumb {display:none;}
.phone-screen .chat-item.my .talk .txt {background: var(--chat-my-bak);box-shadow: var(--chat-my-shadow);border-top-right-radius: 0.4em;}
.phone-screen .chat-item.my .talk .txt:after {right:-6px;}

.phone-screen .chat-item.you {padding-left: 2.9em;}
.phone-screen .chat-item.you .profile-thumb {position:absolute;width: 2.5em;height: 2.5em;overflow:hidden;border-radius: 50%; corner-shape: squircle; top:0;left:0;}
.phone-screen .chat-item.you .profile-thumb img {display:block;position:absolute;width: calc(100% + 2px);max-width: unset;top:50%;left:0;transform:translateY(-50%);-webkit-transform:translateY(-50%);}
.phone-screen .chat-item.you .name {font-size: .9em;padding-bottom: .2em;opacity: .7;font-weight: 600;padding-left: .9em;}
.phone-screen .chat-item.you .talk .txt {background: var(--chat-you-bak);margin-left:6px;border-top-left-radius: .4em;box-shadow: var(--chat-you-shadow);}
.phone-screen .chat-item.you .talk .txt:after {left:-6px; background-position:0 0;}

.phone-screen .chat-item .time {
    font-size: var(--small-font-size);
    position: absolute;
    bottom: 0;
    text-wrap: nowrap;
    opacity: .7;
}
.phone-screen .chat-item.my .time {
    left: 0;
    margin-left: -5em;
}
.phone-screen .chat-item.you .time  {
    right: 0;
    margin-right: -5em;
}

/* chat css */
.chat-list {padding: 15px var(--screen-x-padding) 0;}
.chat-list ul li {
    position: relative;
    padding: 1em 0;
    display: flex;
    align-items: center;
    height: 4em;
    text-indent: 1em;
    cursor: pointer;
}
.chat-list ul li .profile-thumb {width: 2.5em;height: 2.5em;overflow:hidden;border-radius: 50%; corner-shape: squircle; top:0;left:0;}
.chat-list ul li .profile-thumb img {display:block;position:absolute;width: calc(100% + 2px);max-width: unset;top:50%;left:0;transform:translateY(-50%);-webkit-transform:translateY(-50%);}
.chat-list ul li .name {font-size: .9em;}
.chat-list ul li .recent-message {font-size: .8em;}

.chat-list ul li .thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 2.5em;
    height: 2.5em;
    gap: 3px;
}
.chat-list ul li .thumbs .profile-thumb {width: 100%;height: 100%;}
.chat-list ul li .name {font-size: .9em;}
.chat-list ul li .recent-message {font-size: .8em;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}

.messenger-bottom-btns {
    height: 67%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.messenger-bottom-btns button {width: 2em; height: 2em;}
.messenger-bottom-btns button:not(.point-btn) {color: var(--default-color);}

.edit-form {display: none;}
.edit-form.show {display: block;}

/* edit-form */
.edit-form input {border-bottom: 1px solid; text-align: center;}