/* 在线客服工作台 · 样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body, #app { height: 100%; }
body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #F1F5F9; color: #1F2937; }

/* 登录页 */
.login-wrap { height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #EFF6FF, #F8FAFC); }
.login-card { width: 360px; background: #fff; border-radius: 14px; padding: 36px 32px; box-shadow: 0 12px 36px rgba(0,0,0,.08); border: 1px solid #E5E7EB; }
.login-title { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 26px; color: #1D4ED8; }
.login-tip { margin-top: 16px; font-size: 12px; color: #9CA3AF; text-align: center; }

/* 布局 */
.layout { height: 100%; display: flex; flex-direction: column; }
.topbar { height: 50px; background: #fff; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; flex-shrink: 0; }
.topbar-left { font-weight: 700; color: #1D4ED8; font-size: 16px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.agent-name { font-size: 14px; color: #374151; }
.main { flex: 1; display: flex; min-height: 0; }

/* 左栏 */
.sidebar { width: 264px; background: #fff; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; flex-shrink: 0; }
.tabs { display: flex; border-bottom: 1px solid #E5E7EB; }
.tab { flex: 1; text-align: center; padding: 10px 4px; font-size: 13px; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; }
.tab.active { color: #2563EB; font-weight: 600; border-bottom-color: #2563EB; }
.tab .count { background: #E5E7EB; border-radius: 8px; padding: 0 6px; font-size: 11px; color: #374151; }
.tab .count.warn { background: #FEF3C7; color: #B45309; }
.search { padding: 10px 12px 6px; }
.conv-list { flex: 1; overflow-y: auto; padding: 6px; }
.conv-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; margin-bottom: 2px; border: 1px solid transparent; }
.conv-item:hover { background: #F8FAFC; }
.conv-item.active { background: #EFF6FF; border-color: #BFDBFE; }
.conv-item-top { display: flex; justify-content: space-between; align-items: center; }
.conv-name { font-size: 13.5px; font-weight: 600; color: #111827; }
.badge { background: #EF4444; color: #fff; border-radius: 9px; min-width: 18px; height: 18px; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.conv-item-sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.site-tag { background: #EEF2FF; color: #4338CA; font-size: 10.5px; border-radius: 4px; padding: 1px 5px; flex-shrink: 0; }
.last-msg { font-size: 12px; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-item-title { font-size: 11px; color: #9CA3AF; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { text-align: center; color: #9CA3AF; font-size: 13px; padding: 40px 0; }

/* 中栏聊天 */
.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #F8FAFC; }
.chat-header { padding: 10px 16px; background: #fff; border-bottom: 1px solid #E5E7EB; flex-shrink: 0; }
.chat-header .header-site { margin-left: 8px; background: #EEF2FF; color: #4338CA; font-size: 11px; border-radius: 4px; padding: 1px 6px; }
.chat-header .header-queued { margin-left: 8px; background: #FEF3C7; color: #B45309; font-size: 11px; border-radius: 4px; padding: 1px 6px; }
.chat-header .header-title { font-size: 12px; color: #6B7280; margin-top: 3px; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 76%; display: flex; flex-direction: column; }
.msg-who { font-size: 11px; color: #9CA3AF; margin-bottom: 3px; }
.msg-bubble { padding: 9px 13px; border-radius: 10px; font-size: 14px; line-height: 1.55; word-break: break-word; white-space: pre-wrap; }
.msg-visitor { align-self: flex-start; }
.msg-visitor .msg-bubble { background: #fff; border: 1px solid #E5E7EB; border-top-left-radius: 2px; }
.msg-agent { align-self: flex-end; align-items: flex-end; }
.msg-agent .msg-bubble { background: #2563EB; color: #fff; border-top-right-radius: 2px; }
.msg-ai { align-self: flex-start; }
.msg-ai .msg-bubble { background: #F3E8FF; border: 1px solid #E9D5FF; color: #581C87; border-top-left-radius: 2px; }
.msg-system { align-self: center; max-width: 100%; }
.msg-system .msg-who { display: none; }
.msg-system .msg-bubble { background: #EEF2FF; color: #4B5563; font-size: 12.5px; border-radius: 14px; padding: 5px 14px; }
.msg-img { max-width: 240px; border-radius: 8px; display: block; }
.chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: #9CA3AF; font-size: 14px; }
.chat-input { background: #fff; border-top: 1px solid #E5E7EB; padding: 10px 14px; flex-shrink: 0; }
.quick-row { margin-bottom: 8px; }
.input-row { display: flex; gap: 10px; align-items: flex-end; }
.input-row .el-button { height: 46px; }
.quick-list { max-height: 320px; overflow-y: auto; }
.quick-item { padding: 8px 10px; border-bottom: 1px solid #F3F4F6; font-size: 13px; color: #374151; cursor: pointer; border-radius: 6px; }
.quick-item:hover { background: #F8FAFC; }
.quick-cat { display: inline-block; background: #EEF2FF; color: #4338CA; font-size: 11px; border-radius: 4px; padding: 0 6px; margin-right: 6px; }

/* 右栏 */
.side-info { width: 246px; background: #fff; border-left: 1px solid #E5E7EB; padding: 14px; overflow-y: auto; flex-shrink: 0; }
.info-title { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 8px; }
.info-card { background: #F8FAFC; border: 1px solid #E5E7EB; border-radius: 8px; padding: 10px 12px; }
.info-row { display: flex; flex-direction: column; margin: 5px 0; }
.info-row .k { font-size: 11px; color: #9CA3AF; }
.info-row .v { font-size: 12.5px; color: #374151; margin-top: 1px; word-break: break-all; }
.info-row .v.mono { font-family: monospace; }
.info-row .v.small { font-size: 11.5px; }
.history-list { display: flex; flex-direction: column; gap: 6px; }
.history-item { border: 1px solid #E5E7EB; border-radius: 6px; padding: 6px 8px; font-size: 11.5px; }
.history-title { color: #374151; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-meta { color: #9CA3AF; font-size: 10.5px; }
.history-rating { color: #F59E0B; }
.info-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }