:root {
    --brand: #2563eb;
    --brand-dark: #1d4ed8;
    --brand-soft: #eff6ff;
    --text: #0f172a;
    --text-soft: #64748b;
    --line: #e2e8f0;
    --bg: #f1f5f9;
    --panel: #ffffff;
    --green: #16a34a;
    --orange: #f59e0b;
    --red: #dc2626;
    --radius: 12px;
    --shadow: 0 10px 30px rgba(15, 23, 42, .12);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    font-size: 14px;
    line-height: 1.6;
}

button { font-family: inherit; cursor: pointer; }

input, textarea {
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
}

/* ============ 访客演示站点 ============ */
.demo-nav {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 14px 32px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.demo-nav .logo { font-size: 18px; font-weight: 700; color: var(--brand); }
.demo-nav .links { display: flex; gap: 20px; color: var(--text-soft); }
.demo-nav .links span:hover { color: var(--brand); cursor: pointer; }

.demo-hero {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 24px;
    text-align: center;
}

.demo-hero h1 { font-size: 34px; margin: 0 0 12px; }
.demo-hero p { color: var(--text-soft); margin: 0 0 24px; }

/* ---------- 嵌入代码展示 ---------- */
.demo-embed {
    max-width: 760px;
    margin: 0 auto 96px;
    padding: 0 24px;
}

.demo-embed h2 { font-size: 22px; margin: 0 0 10px; }
.demo-embed > p { color: var(--text-soft); font-size: 14px; line-height: 1.8; margin: 0 0 18px; }

.demo-embed .inline {
    background: #f1f5f9;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12.5px;
}

.code-box {
    position: relative;
    background: #0f172a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}

.code-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #1e293b;
}

.code-head .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #475569;
}

.code-head .code-title {
    margin-left: 6px;
    font-size: 12px;
    color: #94a3b8;
}

.code-box pre {
    margin: 0;
    padding: 16px 16px 60px;
    overflow-x: auto;
}

.code-box code {
    color: #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.8;
    white-space: pre;
    word-break: break-all;
}

.copy-btn { position: absolute; right: 12px; bottom: 12px; }

.copy-tip {
    position: absolute;
    right: 100px;
    bottom: 18px;
    font-size: 12px;
    color: #cbd5e1;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}

.copy-tip.show { opacity: 1; }
.copy-tip.err { color: #fca5a5; }

.embed-tips {
    margin: 14px 0 0;
    padding-left: 18px;
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 2;
}

/* ============ 悬浮客服按钮 ============ */
#chat-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: transform .2s;
}

#chat-launcher svg { width: 26px; height: 26px; }

#chat-launcher:hover { transform: scale(1.06); }

#chat-launcher .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--red);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    display: none;
}

#chat-launcher .badge.show { display: block; }

/* ============ 访客聊天窗口 ============ */
#chat-panel {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 340px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 48px);
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
}

#chat-panel.open { display: flex; }

.chat-header {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-header .title { font-weight: 600; font-size: 15px; }
.chat-header .status { font-size: 12px; opacity: .85; }
.chat-header .spacer { flex: 1; }
.chat-header .icon-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    padding: 4px;
    opacity: .85;
}

.chat-header .icon-btn:hover { opacity: 1; }

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

/* 消息区 */
.chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.msg.mine { flex-direction: row-reverse; }

.msg .bubble-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.msg.them .bubble-avatar { background: #0ea5e9; }
.msg.system .bubble-avatar { background: #94a3b8; }

.msg .bubble {
    padding: 9px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    max-width: 100%;
    width: fit-content;
    word-break: break-word;
    white-space: pre-wrap;
}

.msg.mine .bubble {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.msg .meta { font-size: 11px; color: var(--text-soft); margin-top: 3px; }
.msg.mine .meta { text-align: right; }

.msg-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    max-width: 76%;
}
.msg.mine .msg-row { align-items: flex-end; }

/* 开场欢迎语 */
.system-tip.welcome {
    background: var(--brand-soft);
    color: var(--brand-dark);
    text-align: left;
}

/* 快捷回复标签：欢迎语下方，点击即发送 */
.quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-self: flex-start;
    max-width: 96%;
}

.qr-chip {
    border: 1px solid #bfdbfe;
    background: #fff;
    color: var(--brand);
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 13px;
    line-height: 1.4;
    transition: background .15s, border-color .15s, color .15s;
}

.qr-chip:hover { background: var(--brand-soft); border-color: var(--brand); }
.qr-chip:active { background: var(--brand); color: #fff; }

.system-tip, .time-tip {
    align-self: center;
    font-size: 12px;
    color: var(--text-soft);
    background: rgba(148, 163, 184, .16);
    padding: 4px 10px;
    border-radius: 10px;
    max-width: 88%;
    text-align: center;
}

/* 时间分割线（会话开始 / 间隔超过 5 分钟） */
.time-divider {
    align-self: center;
    margin: 2px auto;
    padding: 3px 10px;
    font-size: 11px;
    color: #94a3b8;
    background: rgba(148, 163, 184, .14);
    border-radius: 10px;
}

.typing-tip { font-size: 12px; color: var(--text-soft); height: 16px; padding: 0 12px 6px; }

/* 消息区细滚动条 */
.chat-body::-webkit-scrollbar { width: 8px; }
.chat-body::-webkit-scrollbar-thumb { background: #d7dee8; border-radius: 4px; }
.chat-body::-webkit-scrollbar-track { background: transparent; }
.chat-body { scrollbar-width: thin; scrollbar-color: #d7dee8 transparent; }

/* 输入区 */
.chat-footer { border-top: 1px solid var(--line); padding: 10px; background: #fff; }
.composer { display: flex; gap: 8px; align-items: flex-end; }

.composer textarea {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    resize: none;
    height: 42px;
    max-height: 120px;
    outline: none;
    font-size: 14px;
    line-height: 20px;
    overflow-y: auto;
}

.composer textarea:focus { border-color: var(--brand); }

/* 细滚动条（无箭头） */
.composer textarea::-webkit-scrollbar { width: 6px; }
.composer textarea::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.composer textarea::-webkit-scrollbar-track { background: transparent; }
.composer textarea { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

.composer button {
    border: none;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    padding: 0 16px;
    height: 42px;
    font-size: 14px;
    flex-shrink: 0;
}

.composer button:disabled { background: #cbd5e1; cursor: not-allowed; }
.composer button:hover:not(:disabled) { background: var(--brand-dark); }

.composer .file-btn {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    color: #64748b;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, border-color .15s, background .15s;
}

.composer .file-btn svg { width: 20px; height: 20px; }

.composer .file-btn:hover:not(:disabled) {
    border-color: var(--brand);
    color: var(--brand);
    background: #f5f8ff;
}

.composer .file-btn:disabled { color: #cbd5e1; cursor: not-allowed; }

/* 图片消息 */
.msg .bubble.image-bubble { padding: 4px; overflow: hidden; }
.msg.mine .bubble.image-bubble { background: #fff; border-color: var(--line); }

.chat-image {
    display: block;
    max-width: 180px;
    max-height: 240px;
    border-radius: 8px;
    cursor: zoom-in;
    background: #f1f5f9;
    transition: transform .15s, box-shadow .15s;
}

.chat-image:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
}

.image-viewer {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    cursor: zoom-out;
}

.image-viewer img { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: var(--shadow); }

.viewer-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
}

.viewer-close svg { width: 22px; height: 22px; }
.viewer-close:hover { background: rgba(255, 255, 255, .25); }

.hint { font-size: 11px; color: var(--text-soft); margin-top: 6px; text-align: right; }

/* ============ 客服工作台 ============ */
#login-mask {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.login-box {
    width: 340px;
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    box-shadow: var(--shadow);
}

.login-box h2 { margin: 0 0 4px; font-size: 20px; }
.login-box .sub { color: var(--text-soft); font-size: 13px; margin-bottom: 18px; }
.login-box label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--text-soft); }

.login-box input,
.login-box textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
}

.login-box textarea { resize: vertical; line-height: 1.6; }

.login-box input:focus,
.login-box textarea:focus { border-color: var(--brand); }

.login-box button {
    width: 100%;
    border: none;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    padding: 11px;
    font-size: 15px;
}

.login-box button:hover { background: var(--brand-dark); }
.login-box .err { color: var(--red); font-size: 13px; min-height: 20px; margin-top: 8px; }
.login-box .tip { font-size: 12px; color: var(--text-soft); margin-top: 12px; text-align: center; }

/* 修改资料弹窗 */
#profile-mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 60;
}

#profile-mask.show { display: flex; }
#profile-mask .login-box { width: 440px; padding: 26px 28px 22px; max-height: 92vh; overflow-y: auto; }
#profile-mask .login-box input,
#profile-mask .login-box textarea { box-sizing: border-box; }
#profile-mask .login-box .sub { margin-bottom: 20px; }

/* 修改资料：分区与留白 */
.form-section {
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid var(--line);
}

.form-section.plain { padding-top: 0; margin-top: 0; border-top: none; }

.form-section .section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.form-section .section-title::before {
    content: '';
    width: 3px;
    height: 13px;
    border-radius: 2px;
    background: var(--brand);
}

/* 每个字段自带下边距，分区最后一个字段不留空 */
.form-section .field { margin-bottom: 14px; }
.form-section > .field:last-child,
.form-section > .grid-2:last-child { margin-bottom: 0; }
.grid-2 .field { margin-bottom: 0; }

.form-section .field label { margin-bottom: 7px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* 分区内间距统一交给 .field 控制，避免与 input 自带下边距叠加 */
.form-section input,
.form-section textarea { margin-bottom: 0; }

#profile-mask .tip,
#quick-mask .tip { text-align: left; margin-top: 10px; }
.login-box button.small { margin-top: 8px; }
.quick-list { gap: 10px; }

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.form-actions button { flex: 1; padding: 12px; font-size: 15px; }

.login-box .divider {
    font-size: 12px;
    color: var(--text-soft);
    margin: 2px 0 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}

/* ---------- 快捷回复：列表 + 编辑弹窗 ---------- */
#quick-mask {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .45);
    z-index: 70; /* 叠在修改资料弹窗之上 */
}

#quick-mask.show { display: flex; }
#quick-mask .login-box { width: 420px; padding: 26px 28px 22px; max-height: 92vh; overflow-y: auto; }
#quick-mask .login-box input,
#quick-mask .login-box textarea { box-sizing: border-box; }
#quick-mask .login-box .row button { flex: 1; }

.quick-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }

.quick-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafc;
}

.quick-item .qi-text { flex: 1; min-width: 0; }
.quick-item .qi-text b { display: block; font-size: 13.5px; color: var(--text); }
.quick-item .qi-text span {
    display: block;
    font-size: 12px;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-item .qi-btn,
.login-box button.small {
    width: auto;
    flex: none;
    padding: 6px 12px;
    font-size: 12.5px;
    border-radius: 8px;
    background: #fff;
    color: var(--brand);
    border: 1px solid #bfdbfe;
}

.quick-item .qi-btn:hover { background: var(--brand-soft); }
.quick-item .qi-btn.danger { color: var(--red); border-color: #fecaca; }
.quick-item .qi-btn.danger:hover { background: #fee2e2; }

.login-box button.small:hover { background: var(--brand-soft); color: var(--brand); }

.quick-empty { font-size: 12.5px; color: var(--text-soft); padding: 6px 2px; }

.login-box .row { display: flex; gap: 10px; }
.login-box button.ghost {
    background: #fff;
    color: var(--text);
    border: 1px solid var(--line);
}

.login-box button.ghost:hover { background: #f8fafc; border-color: var(--brand); color: var(--brand); }

.sidebar .btn.icon {
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    background: #fff;
}

.sidebar .btn.icon svg { width: 16px; height: 16px; }
.sidebar .btn.icon:hover { color: var(--brand); border-color: var(--brand); }

.workbench { display: none; height: 100vh; height: var(--app-height, 100vh); }
.workbench.active { display: flex; }

.sidebar {
    width: 300px;
    background: #fff;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}

.sidebar .me {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar .me .avatar { background: var(--brand); }
.sidebar .me .name { font-weight: 600; }
.sidebar .me .sub { font-size: 12px; color: var(--text-soft); }
.sidebar .me .spacer { flex: 1; }

.sidebar .filters {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.chip {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--text-soft);
}

.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.conv-list { flex: 1; overflow-y: auto; }

.conv-item {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: center;
}

.conv-item:hover { background: #f8fafc; }
.conv-item.selected { background: var(--brand-soft); }

.conv-item .avatar { background: #0ea5e9; }
.conv-item .main { flex: 1; min-width: 0; }
.conv-item .row1 { display: flex; align-items: center; gap: 6px; }
.conv-item .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .time { margin-left: auto; font-size: 11px; color: var(--text-soft); flex-shrink: 0; }
.conv-item .preview { font-size: 12px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 会话项右侧的删除按钮：常显（浅灰），hover 加深 */
.conv-del {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .55;
    transition: opacity .15s, color .15s, background .15s;
}

.conv-del svg { width: 16px; height: 16px; }

.conv-item:hover .conv-del,
.conv-item.selected .conv-del { opacity: 1; }

.conv-del:hover { color: #fff; background: var(--red); opacity: 1; }

@media (hover: none) {
    .conv-del { opacity: .8; }
}

/* 撤回提示：居中灰条 */
.system-tip.recall {
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    padding: 4px 0;
}

/* ---------- 消息操作菜单（右键 / 长按） ---------- */
.msg-menu {
    position: fixed;
    z-index: 3000;
    min-width: 116px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
}

.msg-menu-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.msg-menu-item:hover { background: #f1f5f9; }
.msg-menu-item.danger { color: var(--red); }
.msg-menu-item.danger:hover { background: #fee2e2; }

/* 发送中（等待服务端回执）与发送失败状态 */
.msg.pending { opacity: .55; }
.msg.failed .bubble { background: #fee2e2; border-color: var(--red); }
.msg.failed .meta { color: var(--red); }

.tag {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

.tag.waiting { background: #fef3c7; color: #92400e; }
.tag.active { background: #dcfce7; color: #166534; }
.tag.closed { background: #f1f5f9; color: #64748b; }

.unread {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--red);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    flex-shrink: 0;
}

.main-area { flex: 1; display: flex; flex-direction: column; background: #f8fafc; }

.main-header {
    height: 58px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.main-header .title { font-weight: 600; }
.main-header .sub { font-size: 12px; color: var(--text-soft); }
.main-header .spacer { flex: 1; }

.btn {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text);
}

.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); color: #fff; }
.btn.danger:hover { border-color: var(--red); color: var(--red); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.quick {
    display: flex;
    gap: 6px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    flex-wrap: wrap;
}

.quick .chip { cursor: pointer; }

.info-panel {
    display: none;
    width: 250px;
    border-left: 1px solid var(--line);
    background: #fff;
    padding: 16px;
    overflow-y: auto;
}

/* 选中会话后才展示 */
.info-panel.show { display: block; }

.info-panel h4 { margin: 0 0 10px; font-size: 14px; }
.info-panel .kv { margin-bottom: 10px; font-size: 12px; }
.info-panel .kv .k { color: var(--text-soft); }
.info-panel .kv .v { word-break: break-all; }

.empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    gap: 8px;
}

.empty .big { line-height: 0; color: #cbd5e1; }
.empty .big svg { width: 52px; height: 52px; }

@media (max-width: 900px) {
    .info-panel { display: none; }
    .sidebar { width: 240px; }
}

/* ============ 嵌入模式（被 widget.js 以 iframe 加载） ============ */
body.embed .demo-nav,
body.embed .demo-hero,
body.embed .demo-embed,
body.embed #chat-launcher { display: none; }

body.embed { background: #fff; }

body.embed #chat-panel {
    position: static;
    width: 100%;
    height: 100vh;
    height: var(--app-height, 100vh);
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
}

/* ==================== 自适应：平板 / 手机 ==================== */

/* 汉堡按钮、访客信息按钮与遮罩：默认（桌面）不显示 */
#menu-btn, #info-btn { display: none; }

#sidebar-mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .42);
    z-index: 70;
}

body.nav-open #sidebar-mask,
body.info-open #sidebar-mask { display: block; }

@media (max-width: 900px) {
    .sidebar { width: 240px; }
    .demo-hero { margin: 40px auto; }
    .demo-hero h1 { font-size: 28px; }

    /* 访客信息：移动端改为底部弹出面板 */
    #info-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        flex-shrink: 0;
    }

    #info-btn svg { width: 17px; height: 17px; }

    .info-panel,
    .info-panel.show {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-height: 62%;
        border-left: none;
        border-top: 1px solid var(--line);
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -10px 28px rgba(15, 23, 42, .18);
        z-index: 90;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    }

    /* 移动端：点「访客信息」按钮才从底部升起 */
    body.info-open .info-panel.show { display: block; }
}

@media (max-width: 768px) {
    /* 演示站点：紧凑导航 */
    .demo-nav { padding: 12px 16px; gap: 14px; }
    .demo-nav .links { display: none; }
    .demo-hero { margin: 28px auto 40px; }
    .demo-hero h1 { font-size: 24px; }

    /* 嵌入代码块：窄屏紧凑 */
    .demo-embed { padding: 0 16px; margin-bottom: 72px; }
    .demo-embed h2 { font-size: 18px; }
    .code-box pre { padding: 14px 14px 58px; }
    .code-box code { font-size: 12px; }

    /* 悬浮按钮避开 iPhone 底部安全区 */
    #chat-launcher {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        width: 52px;
        height: 52px;
    }

    #chat-launcher svg { width: 24px; height: 24px; }

    /* 聊天窗小屏：宽度铺满，高度占可视区九成（贴底） */
    #chat-panel {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-width: none;
        height: 90%;
        height: calc(var(--app-height, 100vh) * .9);
        max-height: none;
        border-radius: 12px 12px 0 0;
    }

    /* ---------- 客服工作台：会话列表改为抽屉 ---------- */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 82%;
        max-width: 300px;
        z-index: 80;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 4px 0 20px rgba(15, 23, 42, .18);
    }

    body.nav-open .sidebar { transform: none; }

    /* 抽屉内容避开刘海与底部手势区 */
    .sidebar {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* 会话项：更大的触摸区 */
    .conv-item { padding: 14px 16px; gap: 12px; }
    .conv-item .avatar { width: 36px; height: 36px; font-size: 14px; }

    /* 标题区可压缩，避免把操作按钮挤出屏幕 */
    .main-header > div { min-width: 0; }

    .main-header .title,
    .main-header .sub {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 登录 / 资料弹窗：键盘弹出时可滚动，不被遮挡 */
    #login-mask, #profile-mask {
        align-items: flex-start;
        padding: 24px 0 calc(24px + env(safe-area-inset-bottom));
        overflow-y: auto;
    }

    #menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        flex-shrink: 0;
    }

    #menu-btn svg { width: 20px; height: 20px; }

    /* 标题栏常驻：未选会话时也显示，保证汉堡按钮始终可点 */
    .main-header { display: flex !important; height: 56px; padding: 0 12px; gap: 8px; }
    /* 窄屏标题栏按钮较多，删除走会话列表里的图标 */
    #btn-delete { display: none !important; }
    .main-header .title { font-size: 15px; }

    /* 搜索框占满一行，筛选 chip 自动换行 */
    .filters { padding: 10px 12px; }
    #search-input { width: 100% !important; flex: 1 0 100%; }

    /* 快捷回复横向滑动，避免挤成多行 */
    .quick {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 8px 12px;
        -webkit-overflow-scrolling: touch;
    }

    .quick .chip { flex-shrink: 0; }
}

@media (max-width: 480px) {
    body { font-size: 14px; }

    /* iOS：输入框小于 16px 会触发自动放大 */
    .composer textarea, .composer button { font-size: 16px; }
    .composer textarea { height: 44px; padding: 10px 12px; }
    .composer button { padding: 0 14px; height: 44px; }

    /* 消息气泡在窄屏多留一些宽度 */
    .msg-row { max-width: 84%; }
    .chat-image { max-width: 58vw; max-height: 42vh; }

    .chat-body { padding: 12px; gap: 10px; }
    .chat-header { padding: 12px 14px; }

    /* 底部避开安全区，安卓返回手势条不压住输入框 */
    .chat-footer { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }

    .main-header { gap: 6px; }
    .main-header .btn { padding: 6px 10px; font-size: 12px; }
    .empty .big svg { width: 44px; height: 44px; }
    .empty div { font-size: 13px; padding: 0 24px; text-align: center; }

    /* 快捷回复与筛选 chip：加大触摸区 */
    .quick .chip, .filters .chip { padding: 6px 14px; font-size: 13px; }

    /* 图片查看器关闭按钮更大更好点 */
    .viewer-close { width: 44px; height: 44px; top: 12px; right: 12px; }

    /* 登录/资料弹窗自适应宽度 */
    .login-box {
        width: auto;
        max-width: calc(100vw - 32px);
        padding: 22px 20px;
    }

    .login-box input { font-size: 16px; }
    #profile-mask .login-box { max-height: calc(var(--app-height, 100vh) - 32px); }

    /* 资料 / 快捷回复弹窗：窄屏紧凑，两列改单列 */
    #profile-mask .login-box,
    #quick-mask .login-box { width: auto; padding: 22px 18px 18px; }
    .grid-2 { grid-template-columns: 1fr; gap: 14px; }
    .form-section { padding-top: 16px; margin-top: 16px; }
}