:where([class^="ri-"])::before { content: "\f3c2"; }
html, body {
    width: 375px;
    height: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    position: relative;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #ededed;
}
.chat-time {
    position: relative;
    text-align: center;
    margin: 16px 0;
}
.chat-time span {
    background-color: rgba(0,0,0,0.05);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    color: #888;
}
.message-bubble {
    position: relative;
    max-width: 85%;
    border-radius: 4px;
    padding: 10px 12px;
    word-break: break-word;
}
.message-bubble::before {
    content: '';
    position: absolute;
    top: 14px;
    width: 0;
    height: 0;
    border-style: solid;
}
.message-left {
    background-color: #fff;
    margin-right: auto;
}
.message-left::before {
    left: -8px;
    border-width: 8px 10px 8px 0;
    border-color: transparent #fff transparent transparent;
}
.message-right {
    background-color: #95ec69;
    margin-left: auto;
}
.message-right::before {
    right: -8px;
    border-width: 8px 0 8px 10px;
    border-color: transparent transparent transparent #95ec69;
}
/* 顶部导航栏样式 */
.top-nav {
    width: 375px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border-bottom: 1px solid #e5e7eb;
}
/* 底部导航栏样式 */
.bottom-nav {
    width: 375px;
    left: 50%;
    transform: translateX(-50%);
}