/* 全局科技风样式 + 全端自适应 */
* {margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",sans-serif}
body {background:#0F172A;display:flex;align-items:center;justify-content:center;min-height:100vh}
html,body{max-width:100%;overflow-x:hidden}

/* 聊天容器 - 自适应 */
.chat-container {
    width:100%;
    max-width:450px;
    height:100vh;
    max-height:700px;
    background:#1E293B;
    border-radius:16px;
    box-shadow:0 0 30px #7E22CE;
    overflow:hidden;
    position:relative;
    border:1px solid #3B82F6;
    margin:10px;
}

/* 头部 */
.chat-header {
    height:60px;
    background:linear-gradient(90deg,#7E22CE,#3B82F6);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
    font-weight:bold;
}

/* 聊天区域 */
.chat-box {
    height:calc(100% - 150px);
    padding:15px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.chat-box::-webkit-scrollbar {width:6px}
.chat-box::-webkit-scrollbar-thumb {background:#7E22CE;border-radius:10px}

/* 消息气泡 */
.msg-item {display:flex;align-items:flex-end;gap:8px;max-width:75%}
.msg-left {align-self:flex-start}
.msg-right {align-self:flex-end;flex-direction:row-reverse}
.msg-avatar {width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #3B82F6}
.msg-content {padding:10px 14px;border-radius:18px;position:relative;font-size:14px;line-height:1.4}
.msg-left .msg-content {background:#334155;color:#fff;border-bottom-left-radius:4px}
.msg-right .msg-content {background:linear-gradient(90deg,#3B82F6,#7E22CE);color:#fff;border-bottom-right-radius:4px}
.msg-img {max-width:150px;border-radius:8px}

/* 输入区域 */
.chat-input {
    height:90px;
    background:#273449;
    padding:10px;
    display:flex;
    align-items:center;
    gap:8px;
}
.tool-bar {display:flex;gap:10px;color:#fff;font-size:20px}
.tool-bar i {cursor:pointer;transition:.3s}
.tool-bar i:hover {color:#7E22CE}
#msgInput {
    flex:1;
    height:40px;
    border:none;
    border-radius:20px;
    padding:0 15px;
    background:#334155;
    color:#fff;
    outline:none;
    font-size:14px;
}
#sendBtn {
    width:70px;
    height:40px;
    border:none;
    border-radius:20px;
    background:linear-gradient(90deg,#3B82F6,#7E22CE);
    color:#fff;
    cursor:pointer;
    font-weight:bold;
}

/* 表情面板 */
.emoji-box {
    position:absolute;
    bottom:100px;
    left:10px;
    width:200px;
    height:150px;
    background:#273449;
    border-radius:8px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:5px;
    padding:10px;
    display:none;
    z-index:999;
}
.emoji-box span {color:#fff;cursor:pointer;text-align:center;padding:5px}
.emoji-box span:hover {background:#7E22CE;border-radius:4px}

/* 登录页美化样式 */
.login-box{
    width:100%;
    max-width:400px;
    background:#1E293B;
    padding:30px;
    border-radius:16px;
    border:1px solid #3B82F6;
    box-shadow:0 0 30px #7E22CE;
    margin:20px;
}
.login-box h2{
    color:#fff;
    text-align:center;
    margin-bottom:30px;
    font-size:24px;
    background:linear-gradient(90deg,#3B82F6,#7E22CE);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.login-box input{
    width:100%;
    height:45px;
    background:#273449;
    border:1px solid #3B82F6;
    border-radius:8px;
    padding:0 15px;
    color:#fff;
    margin-bottom:15px;
    outline:none;
    font-size:14px;
}
.login-box button{
    width:100%;
    height:45px;
    background:linear-gradient(90deg,#3B82F6,#7E22CE);
    border:none;
    border-radius:8px;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}
.login-box button:hover{box-shadow:0 0 15px #7E22CE}

/* 移动端适配 */
@media (max-width:768px){
    .chat-container{max-height:100vh;margin:0;border-radius:0}
    .admin-container{flex-direction:column}
    .sidebar{width:100%;height:auto}
    .customer-list{width:100%;height:200px}
}