/* 基础样式 */
body {
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
    background-color: white;
}

/* 响应式容器 */
#app-container {
    display: flex;
    flex-direction: column;
    box-sizing:border-box;
    max-height: 100vh;
}

/* 聊天式布局 */
#chat-container {
    padding: 20px 0 0 0;
    display: flex;
    flex: 1;
    flex-direction: column-reverse;
    overflow-y: scroll;
    scrollbar-width: none;
    min-height: 0;
    max-height: 100vh;

    transition: padding-bottom 0.3s ease;
}

::-webkit-scrollbar{
    display: none;
}

/* 消息组 - 相同用户的连续消息 */
.message-group {
    margin-bottom: 0;
    position: relative;
    display: flex; /* 添加flex布局 */
}

/* 用户名区域 */
.username-area {
    margin-bottom: 4px;
    flex-shrink: 0; /* 防止压缩 */
    padding-right: 12px; /* 与内容区域的间距 */
    text-align: right; /* 用户名右对齐 */
    position: sticky; /* 粘性定位 */
    top: 0; /* 顶部对齐 */
    align-self: flex-start; /* 顶部对齐 */
    max-width: 80px;
}

.username {
    font-weight: bold;
    color: #2c3e50;
    font-size: 15px;
    position: sticky; /* 粘性定位 */
    top: 0; /* 顶部对齐 */
    word-break: break-all;
}

/* 消息内容区域 */
.message-content-area {
    display: flex;
    flex: 1;
    flex-direction: column-reverse;
}

/* 单条消息 */
.message-item {
    margin-bottom: 8px;
    position: relative;
    /*animation: pushUp 0.2s ease-out;*/
}

/*@keyframes pushUp {*/
/*    from {*/
/*        transform: translateY(8px);*/
/*        opacity: 0.6;*/
/*    }*/
/*    to {*/
/*        transform: translateY(0);*/
/*        opacity: 1;*/
/*    }*/
/*}*/

/* 消息内容 - 使用p标签样式 */
.message-content {
    padding: 0;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    font-size: 15px;
    line-height: 1.5;
}

/* 时间戳 */
.message-time {
    display:none;
    /*font-size: 12px;*/
    /*color: #6c757d;*/
    /*margin-top: 2px;*/
}

/* 输入区域 */

.input-container {
    position: fixed;
    box-sizing: border-box;
    transition: bottom 0.3s ease;
    bottom:0;
    background-color: white;
    max-width: 700px;
    width: 100%;
    padding:0 20px 20px 0;
}


/* 输入控制区域 */
.input-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

/* 桌面端提示 */
.desktop-hint {
    font-size: 12px;
    color: #6c757d;
}

/* 发送按钮 */
.send-button {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 8px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.send-button:hover {
    background-color: #0056b3;
}

.send-button:active {
    background-color: #004085;
}

.send-button:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

#message-input {
    margin-bottom: 8px;
    padding:0;
    border: hidden;
    box-sizing: border-box;
    resize:none;
    position:relative;
    width:100%;
    overflow-y:auto;
    line-height: 24px;
    font-size: 14px;
}

#message-input:focus{
    outline: none;
    border:none;
}

/* 加载指示器 */
#loading-indicator {
    text-align: center;
    padding: 20px;
    color: #666;
}

/* 新内容提示 */
#new-content-notice {
    position: absolute;
    right: 20px;
    background: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    display: none;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 初始加载样式 */
#initial-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

/* 错误状态 */
.error-state {
    text-align: center;
    padding: 20px;
    color: #dc3545;
    background-color: #f8d7da;
    border-radius: 8px;
    margin: 20px;
}


/* 移动端：按钮在提示位置 */
@media (pointer:coarse) {
    #app-container {
        width: 100%;
        padding: 10px;
    }

    .input-controls {
        gap: 0;
        justify-content: flex-end;
    }

    #send-button {
        position: static;
        width: 45px;
        height: 45px;
        display: flex;
    }

    #desktop-hint {
        display: none;
    }

    #message-input {
        padding-right: 15px;
    }

    /* 在竖屏时，如果屏幕宽度超过一定值，也限制每行字符数 */
    @media (min-width: 480px) {
        .post-content {
            max-width: 100%;
        }
    }
    @media(orientation: portrait){

    }
}

/* 桌面端隐藏发送按钮 */
@media (pointer:fine) {
    #send-button {
        display: none;
    }

    .input-controls {
        justify-content: flex-end;
    }

    #desktop-hint {
        display: inline;
    }

    #app-container {
        max-width: 700px;
        margin: 0 auto;
        padding: 20px;
    }

    /* 在横屏时，如果屏幕太宽，限制每行字符数以提高可读性 */
    .post-content {
        max-width: 600px;
    }
}