/* ===== 通用 ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;
    background:#f5f5f5;
    height:100vh; height:-webkit-fill-available;
    overflow:hidden;
}

/* ===== 弹窗/登录 ===== */
.modal {
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.5);
    display:flex; align-items:center; justify-content:center;
    z-index:999;
}
.modal-box {
    background:#fff; border-radius:12px; padding:30px 25px;
    width:320px; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,0.2);
}
.modal-box h3, .modal-box h4 { font-size:18px; margin-bottom:10px; color:#333; }
.modal-box p { color:#888; font-size:14px; margin-bottom:20px; }
.modal-box input {
    width:100%; padding:12px; border:1px solid #ddd; border-radius:8px;
    font-size:15px; margin-bottom:15px; outline:none;
}
.modal-box input:focus { border-color:#07c160; }
.modal-box button {
    width:100%; padding:12px; border:none; border-radius:8px;
    background:#07c160; color:#fff; font-size:15px; cursor:pointer;
}
.modal-box button:hover { background:#06ad56; }
.modal-box button.cancel { background:#999; }
.modal-box button.cancel:hover { background:#777; }
.pass-hint { font-size:12px; color:#888; margin-top:8px; }
.pass-hint a { color:#07c160; cursor:pointer; text-decoration:underline; }

/* ===== 客户端页面 ===== */
.client-wrap {
    max-width:480px; margin:0 auto; height:100vh; height:-webkit-fill-available;
    display:flex; flex-direction:column;
    background:#f5f5f5;
}
.client-header {
    height:50px; background:#fff;
    display:flex; align-items:center; justify-content:center;
    border-bottom:1px solid #e5e5e5; position:relative;
    flex-shrink:0;
}
.client-status {
    width:8px; height:8px; border-radius:50%; background:#07c160;
    margin-right:8px; display:inline-block;
}
.client-title { font-size:16px; font-weight:500; color:#333; }

.chat-body {
    flex:1; overflow-y:auto; padding:15px; scroll-behavior:smooth;
}
.sys-msg {
    text-align:center; color:#999; font-size:12px; margin:10px 0;
}

/* ===== 聊天消息带头像 ===== */
.msg-row {
    display:flex; margin-bottom:16px;
    align-items:flex-start;
}
.msg-row.me { justify-content:flex-end; }
.msg-row.other { justify-content:flex-start; }

.msg-avatar {
    width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:bold; color:#fff;
    flex-shrink:0; margin:0 8px;
}
.msg-avatar.customer { background:#07c160; }
.msg-avatar.admin { background:#1e88e5; }
.msg-avatar.system { background:#ff9800; display:none; }

.msg-content { max-width:65%; }
.msg-row.me .msg-content { order:-1; }

.bubble {
    padding:8px 12px; border-radius:14px;
    font-size:14px; line-height:1.5; word-break:break-all;
}
.bubble.me {
    background:#95ec69; color:#000; border-bottom-right-radius:4px;
}
.bubble.other {
    background:#fff; color:#333; border-bottom-left-radius:4px;
    box-shadow:0 1px 2px rgba(0,0,0,0.06);
}
.bubble.system {
    background:#fff3e0; color:#666; border-radius:8px;
    text-align:center;
}
.bubble-time {
    font-size:10px; color:#888; opacity:0.7;
    text-align:center; margin-bottom:3px;
}
.bubble.me .bubble-time { color:#333; }

.client-input-area {
    background:#fff; border-top:1px solid #e5e5e5; padding:8px 12px;
    flex-shrink:0;
    position:relative; z-index:10;
}
.file-row {
    display:flex; gap:8px; align-items:center;
}
.file-row input[type="file"] { display:none; }
.file-row label {
    padding:8px 12px; background:#e8e8e8; border-radius:20px;
    font-size:12px; cursor:pointer; color:#666; white-space:nowrap;
}
.file-row label:hover { background:#ddd; }
.file-row input[type="text"] {
    flex:1; padding:10px 14px; border:1px solid #e5e5e5;
    border-radius:20px; font-size:14px; outline:none;
}
.file-row input[type="text"]:focus { border-color:#07c160; }
.file-row button {
    padding:10px 18px; border:none; border-radius:20px;
    background:#07c160; color:#fff; font-size:14px; cursor:pointer;
}
.file-row button:hover { background:#06ad56; }

/* 移动端适配 */
@media (max-width: 768px) {
    .client-wrap {
        height:100%;
        position:fixed; top:0; left:0; right:0; bottom:0;
    }
}
.sound-toggle {
    position:absolute; right:50px; top:50%; transform:translateY(-50%);
    background:none; border:none; font-size:18px; cursor:pointer;
    padding:4px; opacity:0.7;
}
.sound-toggle:hover { opacity:1; }
.sound-toggle.off { opacity:0.3; }

/* ===== Admin 后台 ===== */
.admin-wrap {
    display:flex; height:100vh;
}
.sidebar {
    width:300px; background:#f7f7f7; border-right:1px solid #d6d6d6;
    display:flex; flex-direction:column; flex-shrink:0;
}
.sidebar-header {
    padding:15px; background:#e8e8e8; border-bottom:1px solid #d6d6d6;
    flex-shrink:0;
}
.sidebar-header h3 { font-size:14px; color:#333; margin-bottom:10px; }
.sidebar-header input {
    width:100%; padding:8px 12px; border:1px solid #d6d6d6;
    border-radius:4px; font-size:13px; outline:none;
}
.customer-list {
    flex:1; overflow-y:auto;
}
.empty-tip {
    text-align:center; color:#999; padding:40px 20px; font-size:14px;
}
.customer-item {
    display:flex; align-items:center; padding:12px 15px;
    cursor:pointer; border-bottom:1px solid #ededed;
    transition:background 0.2s;
}
.customer-item:hover { background:#e3e3e3; }
.customer-item.active { background:#c6c6c6; }

.item-avatar {
    width:40px; height:40px; border-radius:50%; background:#07c160;
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:bold; margin-right:12px; flex-shrink:0;
}
.item-info { flex:1; min-width:0; }
.item-top {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:4px;
}
.item-name { font-size:14px; font-weight:500; color:#333; }
.item-time { font-size:11px; color:#999; flex-shrink:0; }
.item-bottom {
    display:flex; justify-content:space-between; align-items:center;
}
.item-preview {
    font-size:12px; color:#888; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; flex:1; margin-right:8px;
}
.item-ip {
    font-size:11px; color:#aaa;
}
.unread-badge {
    background:#fa5151; color:#fff; font-size:11px; min-width:18px;
    height:18px; border-radius:9px; display:flex; align-items:center;
    justify-content:center; padding:0 5px; flex-shrink:0;
}

/* 聊天面板 */
.chat-panel {
    flex:1; display:flex; flex-direction:column;
    background:#f5f5f5;
}
.chat-header {
    height:50px; background:#f7f7f7; border-bottom:1px solid #d6d6d6;
    display:flex; align-items:center; padding:0 20px;
    justify-content:space-between; flex-shrink:0;
}
.chat-header span { font-size:15px; font-weight:500; color:#333; }
.chat-header small { color:#999; font-size:12px; }
.chat-header .back-btn {
    display:none; background:none; border:none; font-size:20px;
    cursor:pointer; margin-right:10px; color:#666;
}

.empty-chat {
    text-align:center; color:#bbb; font-size:16px; padding:80px 20px;
}

.chat-input-bar {
    height:60px; background:#f7f7f7; border-top:1px solid #d6d6d6;
    display:flex; align-items:center; padding:0 15px; gap:10px;
    flex-shrink:0;
}
.chat-input-bar input[type="file"] { display:none; }
.chat-input-bar label {
    padding:8px 12px; background:#e8e8e8; border-radius:6px;
    font-size:13px; cursor:pointer; color:#666; white-space:nowrap;
}
.chat-input-bar label:hover { background:#ddd; }
.chat-input-bar input[type="text"] {
    flex:1; padding:10px 15px; border:1px solid #d6d6d6;
    border-radius:6px; font-size:14px; outline:none;
}
.chat-input-bar input[type="text"]:focus { border-color:#07c160; }
.chat-input-bar button {
    padding:10px 24px; border:none; border-radius:6px;
    background:#07c160; color:#fff; font-size:14px; cursor:pointer;
}
.chat-input-bar button:hover { background:#06ad56; }

/* 图片通用 */
.bubble img {
    max-width:200px; max-height:200px; border-radius:8px;
    cursor:pointer; display:block; margin-top:2px;
}

/* ===== H5 响应式 Admin ===== */
@media (max-width: 768px) {
    .admin-wrap {
        position:relative;
    }
    .sidebar {
        width:100%;
    }
    .chat-panel {
        position:absolute; top:0; left:0; right:0; bottom:0;
        z-index:10; display:none;
    }
    .admin-wrap.chat-open .sidebar {
        display:none;
    }
    .admin-wrap.chat-open .chat-panel {
        display:flex;
    }
    .chat-header .back-btn {
        display:block;
    }
    .chat-input-bar {
        padding:0 10px;
    }
    .chat-input-bar button {
        padding:10px 16px;
    }
}

/* 系统消息 */
.msg-row.system-row {
    justify-content:center;
}
.msg-row.system-row .msg-avatar {
    display:none;
}
.msg-row.system-row .msg-content {
    max-width:90%;
}