* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #f5f5f5;
    font-family: "微软雅黑";
}
/* 电脑端样式（完全保留你的原有代码，无任何修改） */
.chat-container {
    width: 800px;
    margin: 50px auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.chat-header {
    padding: 15px;
    background: #409EFF;
    color: #fff;
    font-size: 18px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.chat-messages {
    height: 500px;
    padding: 15px;
    overflow-y: auto;
    border-bottom: 1px solid #eee;
}
.chat-item {
    margin-bottom: 10px;
    padding: 8px;
    background: #f9f9f9;
    border-radius: 4px;
}
.chat-nick {
    color: #409EFF;
    font-weight: bold;
}
.chat-content {
    margin-left: 5px;
}
.chat-img {
    max-width: 200px;
    max-height: 200px;
    margin-top: 5px;
    border-radius: 4px;
}
.chat-input {
    padding: 15px;
    display: flex;
    gap: 10px;
}
.chat-input input[type="text"] {
    flex: 1;
    padding: 8px;
    border: 1px solid #eee;
    border-radius: 4px;
}
.chat-input button {
    padding: 8px 20px;
    background: #409EFF;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


@media (max-width: 375px) {
    /* 容器适配iPhone X屏幕 */
    .chat-container {
        width: 100vw;        /* 占满iPhone X屏幕宽度（375px） */
        height: 100vh;       /* 占满iPhone X屏幕高度（812px） */
        margin: 0;           /* 去掉上下边距，全屏显示 */
        border-radius: 0;    /* 去掉圆角，贴合手机屏幕 */
        box-shadow: none;    /* 去掉阴影，更简洁 */
    }
    /* 头部适配 */
    .chat-header {
        padding: 12px 15px;  /* 微调内边距，适配小屏 */
        font-size: 16px;     /* 字体略缩小，适配iPhone X */
        border-radius: 0;
    }
    /* 消息区适配iPhone X高度 */
    .chat-messages {
        height: calc(100vh - 120px); /* 高度=屏幕高度-头部-输入区，刚好占满剩余空间 */
        padding: 12px 15px;
        -webkit-overflow-scrolling: touch; /* iPhone X顺滑滚动 */
    }
    /* 消息项适配 */
    .chat-item {
        margin-bottom: 8px;
        padding: 10px;
        font-size: 14px;     /* 适配iPhone X文字大小 */
    }
    /* 图片适配iPhone X屏幕宽度 */
    .chat-img {
        max-width: 100%;     /* 图片占满消息区宽度，最大不超200px（继承电脑端max-width） */
        max-height: 180px;   /* 略缩小图片高度，适配iPhone X */
    }
    /* 输入区适配iPhone X底部 */
    .chat-input {
        padding: 10px 15px;
        gap: 8px;
        position: sticky;
        bottom: 0;           /* 固定在底部，避免被键盘顶起 */
        background: #fff;
    }
    /* 输入框适配 */
    .chat-input input[type="text"] {
        padding: 10px;
        font-size: 14px;
        border-radius: 20px; /* 圆角更贴合手机交互 */
    }
    /* 发送按钮适配 */
    .chat-input button {
        padding: 10px 18px;
        font-size: 14px;
        border-radius: 20px; /* 圆角适配手机 */
        white-space: nowrap; /* 按钮文字不换行 */
    }
}