.grid{display: grid}
.flex{display: flex}

*{padding: 0;margin: 0;box-sizing: border-box}
html,body{width: 100vw;height: 100vh;background-color: var(--bgColor);}
a{
    text-decoration: none;
    color: var(--linkColor);
}

/* 暗黑模式 */
body[data-theme="dark"]{
    --bgColor: #000;
    --textColor: #fff;
    --textHoverColor: rgb(30, 30, 30);
    --containerWidth: 600px;
    --containerColor: rgb(30, 30, 30);
    --hoverColor: #cc12fa;
    --linkColor: #22dd87;
}
/* 默认 */
:root{
    --bgColor: #fff;
    --textColor: #000;
    --textHoverColor: #fff;
    --containerWidth: 600px;
    --containerColor: #eeeeee;
    --hoverColor: #cc12fa;
    --linkColor: #2280dd;
}

/* 主体 */
.main{
    width: var(--containerWidth);
    height: 100vh;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--containerColor);
}

/* 控制栏 */
.main .control-bar{
    --width: 40px;
    position: fixed;
    width: var(--width);
    height: 100vh;
    left: calc((-1 * var(--width)) - 20px);
    background-color: #00000000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.main .control-bar > .items{
    width: var(--width);
    height: var(--width);
    background-color: var(--containerColor);
    border-radius: 50%;
    margin: 8px 0px;
    transition: all 0.5s;
}
.main .control-bar > .items:hover{
    cursor: pointer;
    background-color: var(--hoverColor);
    padding: 4px;
}
.main .control-bar > .items i{
    color: var(--textColor);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.5s;
}
.main .control-bar > .items i:hover{
    color: var(--textHoverColor);
}

.main > section{
    display: none;
}

/* 主页 */
.main[data-page="index"] section.index{
    display: block;
}
.main section.index .chat-list{
    width: 240px;
    height: 100vh;
    overflow-y: scroll;
    border-right: 1px solid var(--bgColor);
}
.main section.index .chat-list::-webkit-scrollbar {
    display: none;
}
.main section.index .chat-list {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.main section.index .chat-list .users{
    --height: 60px;
    --reduce: 12px;
    --padding: 12px;
    padding: var(--padding);
    width: 100%;
    height: var(--height);
    border-bottom: 1px solid var(--bgColor);
    display: flex;
    transition: all 0.5s;
}
.main section.index .chat-list .users:hover{
    cursor: pointer;
    background-color: var(--hoverColor);
}
.main section.index .chat-list .users span {
    transition: all 0.5s;
}
.main section.index .chat-list .users:hover span{
    color: var(--textHoverColor);
}
.main section.index .chat-list .users .user-avatar{
    width: calc(var(--height) - var(--reduce) * 2);
    height: calc(var(--height) - var(--reduce) * 2);
    margin-right: 8px;
}
.main section.index .chat-list .users .user-name{
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: var(--textColor);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.main section.index .chat-list .users .last-message{
    display: inline-block;
    font-size: 12px;
    color: var(--textColor);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 添加好友 */
.main[data-page="addFriend"] section.addFriend{
    display: block;
}