/* 微信式对话页布局：左联系人 / 右会话；员工设置从会话顶部展开 */
.chat-app { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: 100vh; max-width: 1360px; margin: 0 auto; background:var(--surface-hover); box-shadow: 0 0 40px rgba(0,0,0,.08); }
@media (max-width: 700px) { .chat-app { grid-template-columns: 1fr; } .contact-column { display: none; } }

/* 左：联系人 */
.contact-column { display: flex; flex-direction: column; background:var(--surface-hover); border-right: 1px solid var(--line); min-height: 0; }
.column-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.column-head b { font-size: 16px; }
.column-head small { display: block; color: var(--muted); font-size: 12px; }
.column-head nav { display: flex; gap: 10px; }
.column-head nav a { color: var(--ink-2); font-size: 12px; text-decoration: none; background:#fff; border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; }
.contact-search { display: flex; align-items: center; gap: 7px; margin: 0 12px 8px; background:var(--n-200); border-radius: 8px; padding: 6px 10px; color: var(--muted); }
.contact-search input { flex: 1; border: 0; background: transparent; outline: none; font-size: 13px; }
.contact-list { flex: 1; overflow-y: auto; min-height: 0; }
.list-hint { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 13px; }
.contact { display: flex; gap: 11px; padding: 10px 14px; cursor: pointer; align-items: center; }
.contact:hover { background:var(--canvas); }
.contact.active { background:var(--n-200); }
.contact-avatar { position: relative; flex: none; width: 42px; height: 42px; border-radius: 8px; background:var(--n-200); color:var(--text-secondary); display: grid; place-items: center; font-size: 14px; font-weight: 650; overflow: hidden; }
.contact-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-copy { flex: 1; min-width: 0; }
.contact-row1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.contact-row1 b { font-size: 14px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-row1 time { flex: none; color:var(--text-muted); font-size: 11px; }
.contact-row2 { display: flex; gap: 6px; align-items: center; color:var(--text-muted); font-size: 12px; }
.contact-row2 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-employee { flex: none; background:var(--accent-soft-bg); color:var(--g-500); border-radius: 5px; padding: 0 5px; font-size: 10px; line-height: 1.7; }
.badge-stranger { flex: none; background:var(--warning-bg); color:var(--warning-fg); border-radius: 5px; padding: 0 5px; font-size: 10px; line-height: 1.7; }

/* 中：会话 */
.thread-column { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--wx-bg); }
.thread-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 20px; background:var(--surface-hover); border-bottom: 1px solid var(--line); }
.thread-title b { font-size: 16px; font-weight: 600; }
.thread-title small { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; margin-top: 2px; }
.thread-title .chip { font-style: normal; border-radius: 5px; padding: 0 6px; font-size: 10px; line-height: 1.7; background:var(--warning-bg); color:var(--warning-fg); }
.thread-title .chip.on { background:var(--accent-soft-bg); color: var(--green); }
.thread-actions { display: flex; gap: 8px; }
.thread-actions .active { background:var(--accent-soft-bg); border-color:var(--accent-soft-border); color: var(--green); }

/* 员工设置：从顶部展开的面板，把设置留在对话上方（列表与对话都不动） */
.employee-drawer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; padding: 14px 20px 16px; background:var(--surface-hover); border-bottom: 1px solid var(--line); box-shadow: 0 6px 14px rgba(0,0,0,.05); max-height: 42vh; overflow-y: auto; }
.employee-drawer[hidden] { display: none; }
.employee-drawer h3 { margin: 0 0 8px; font-size: 12px; color: var(--ink-2); }
.drawer-employee-row { display: grid; gap: 8px; background:var(--warning-bg); border:1px solid var(--warning-border); border-radius: 10px; padding: 11px 13px; }
.drawer-employee-row.on { background:var(--accent-soft-bg); border-color:var(--accent-soft-border); }
.drawer-employee-row b { font-size: 13px; }
.drawer-employee-row small { display: block; color: var(--muted); font-size: 11px; line-height: 1.6; margin-top: 2px; }
.drawer-employee-row button { justify-self: start; padding: 6px 14px; font-size: 12px; border-radius: 7px; }
@media (max-width: 980px) { .employee-drawer { grid-template-columns: 1fr; } }
.thread-stream { flex: 1; overflow-y: auto; min-height: 0; padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 4px; }
.thread-empty { margin: auto; text-align: center; color:var(--text-muted); }
.thread-empty span { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 14px; background:var(--n-200); font-size: 22px; color:var(--text-muted); }
.msg-time { align-self: center; margin: 10px 0 4px; color:var(--text-muted); font-size: 11px; background:var(--n-100); border-radius: 5px; padding: 1px 8px; }
.msg { display: flex; gap: 9px; margin: 3px 0; max-width: 82%; }
.msg.theirs { align-self: flex-start; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar { flex: none; width: 34px; height: 34px; border-radius: 6px; background:var(--n-200); color:var(--text-secondary); display: grid; place-items: center; font-size: 12px; font-weight: 650; overflow: hidden; position: relative; }
.msg-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.msg-body { min-width: 0; }
.msg-sender { color:var(--text-muted); font-size: 11px; margin: 0 4px 2px; }
.bubble { position: relative; border-radius: 8px; padding: 8px 12px; font-size: 14px; line-height: 1.55; word-break: break-word; white-space: pre-wrap; background:#fff; box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.msg.mine .bubble { background: var(--wx-mine); }
.bubble .quoted { margin-top: 6px; padding: 5px 8px; border-radius: 6px; background: rgba(0,0,0,.06); color:var(--text-muted); font-size: 12px; }
.bubble img.msg-image { display: block; max-width: 240px; max-height: 260px; border-radius: 6px; cursor: zoom-in; }
.bubble video { display: block; max-width: 260px; border-radius: 6px; }
.bubble audio { display: block; max-width: 220px; }
.bubble a.msg-file { color:var(--info-fg); text-decoration: none; }
.msg-status { margin: 2px 6px 0; font-size: 11px; color:var(--text-muted); text-align: right; }
.msg-status.failed { color:var(--danger-fg); }
.composer { display: flex; gap: 10px; align-items: flex-end; padding: 12px 16px; background:var(--surface-hover); border-top: 1px solid var(--line); }
.composer textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; background:#fff; outline: none; max-height: 120px; }
.send-mode-note { margin: 0; padding: 6px 16px 10px; background:var(--surface-hover); color:var(--warning-fg); font-size: 12px; }

/* 备注与提问史卡片（员工设置面板内） */
.panel-facts .fact { background:#fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; font-size: 12px; position: relative; }
.panel-facts .fact small { display: block; color:var(--text-muted); margin-top: 3px; font-size: 10px; }
.panel-facts .fact button { position: absolute; top: 4px; right: 6px; border: 0; background: none; color:var(--text-muted); font-size: 12px; }
.fact-form { display: flex; gap: 6px; margin-top: 8px; }
.fact-form input { flex: 1; border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; font-size: 12px; }
.fact-form button { padding: 5px 10px; font-size: 12px; }
.panel-questions .qa { background:#fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; font-size: 12px; }
.panel-questions .qa b { display: block; font-weight: 550; }
.panel-questions .qa small { color:var(--text-muted); }
.panel-questions .qa p { margin: 4px 0 0; color:var(--text-muted); }

/* 图片内嵌预览弹层（与主控台 #image-viewer 同款，不再开新窗口） */
.image-viewer { max-width: 94vw; max-height: 94vh; padding: 38px 16px 16px; border: 0; border-radius: 12px; background:var(--d-bg); box-shadow: var(--shadow-3); }
.image-viewer::backdrop { background: var(--overlay); }
.image-viewer img { display: block; max-width: 88vw; max-height: 82vh; min-width: 240px; object-fit: contain; }
#image-viewer-close { position: absolute; right: 8px; top: 4px; border: 0; background: transparent; color:#fff; font-size: 27px; cursor: pointer; }