* { box-sizing: border-box }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: #f6f7fb; color: #222 }
.container { max-width: 980px; margin: 0 auto; padding: 24px; height: 100vh; display:flex; flex-direction: column }
header h1 { margin: 0 0 16px; font-size: 24px }
.headerbar { display:flex; align-items:center; justify-content: space-between; gap: 16px; margin: 0 0 16px }
.headerbar .left { display:flex; align-items:center; gap:12px }
.headerbar .right { display:flex; align-items:center; gap:8px }
.headerbar .name { font-size: 18px; font-weight: 700; color: #1f2a44 }
.headerbar .role { font-size: 12px; color: #6b7280 }
.card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 6px 20px rgba(0,0,0,0.06) }
.login-container{ flex: 1; display: flex; justify-content: center; align-items: center; }
.login-card { max-width: 420px; width: 98%; }
.login-card .primary { width: 100%; margin-top: 30px }
.form { display: grid; gap: 16px }
.form-group { display: grid; gap: 6px }
.form-group label { font-size: 13px; color: #555 }
.form-group input { padding: 10px; border-radius: 10px; border: 1px solid #ddd; width: 100% }
.roles { display: flex; gap: 12px; margin: 12px 0 24px }
.roles button { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid #ddd; background: #fafafa; cursor: pointer }
.roles button.active { border-color: #4b7bec; background: #eef4ff }
.hint { color: #666; margin-bottom: 16px }
.primary { background: #4b7bec; color: #fff; border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer }

.chat { display: flex; gap: 16px; flex:1; min-height:0; }
.sidebar { width: 240px; height: 100%; overflow-y: auto; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.06) }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: #4b7bec; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700 }
.presence { color: #555; display: grid; gap: 6px }

.messages { background: #fff; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); flex:1; min-height:0; overflow: auto; padding: 16px; display:flex; flex-direction:column; gap:10px }
.msg { max-width: 70%; padding: 10px 12px; border-radius: 10px; background: #f0f3ff; align-self: flex-start }
.msg.agent { background: #fff7e6 }
.msg.me { border: 1px solid #4b7bec; align-self: flex-end }
.msg .meta { font-size: 12px; color: #666; margin-bottom: 6px; display: flex; gap: 8px }
.msg .text { display:block; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word }

.composer { display: flex; gap: 8px; margin-top: 16px; background:#fff; border-radius:12px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); padding:12px }
.composer input { flex: 1; padding: 10px; border-radius: 10px; border: none; outline: none; background: #f8f9fd }
.composer button { padding: 10px 16px }

.chat-user { display:flex; flex-direction: column; flex:1; min-height:0 }
.content { flex:1; display:flex; flex-direction: column }
.presence .item { padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; cursor:pointer; background:#fafafa; display:flex; align-items:center; justify-content:space-between; gap:12px; transition: box-shadow .2s ease, transform .2s ease }
.presence .item:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.06); transform: translateY(-1px) }
.presence .item.active { border-color:#4b7bec; background:#eef4ff }
.presence .item .title { font-size:14px; font-weight:600; color:#1f2a44 }
.presence .item .meta { font-size:12px; color:#6b7280; margin-top:4px }
.badge-online { display:inline-block; padding:2px 8px; border-radius:999px; background:#e6ffed; color:#1f9042; font-size:12px; font-weight:600 }
.badge-offline { display:inline-block; padding:2px 8px; border-radius:999px; background:#fff1f0; color:#c0392b; font-size:12px; font-weight:600 }
.badge-unread { display:inline-block; min-width:20px; height:20px; line-height:20px; padding:0 6px; border-radius:999px; background:#ff4d4f; color:#fff; font-size:12px; font-weight:700; text-align:center }

.home { display:flex; align-items:center; justify-content:center; flex:1 }
.home-card { max-width: 520px }
.home-card .title { font-size: 24px; margin: 0 0 8px }
.home-card .desc { color:#666; margin:0 0 16px }
.home-card .actions { display:grid; grid-template-columns: 1fr 1fr; gap:12px }
.home-card .primary { text-decoration:none; text-align:center }

* { scrollbar-width: thin; scrollbar-color: #b6c0d8 #eef2f7 }
*::-webkit-scrollbar { width: 8px; height: 8px }
*::-webkit-scrollbar-track { background: #eef2f7; border-radius: 8px }
*::-webkit-scrollbar-thumb { background: #b6c0d8; border-radius: 8px; border: 2px solid #eef2f7 }
*::-webkit-scrollbar-thumb:hover { background: #8ea0c8 }

.reply-mode-switch { display: flex; align-items: center; gap: 4px }
.mode-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid #ddd; background: #fafafa; cursor: pointer; font-size: 13px; transition: all 0.2s }
.mode-btn:hover { background: #f0f0f0 }
.mode-btn.active { background: #4b7bec; color: #fff; border-color: #4b7bec }
.reply-mode-tag { display: inline-block; padding: 2px 6px; border-radius: 4px; background: #e6f7ff; color: #1890ff; font-size: 11px; margin-left: 4px }

.chat { position: relative }
.ai-sidebar { width: 280px; height: 100%; overflow-y: auto; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); margin-left: 16px }
.ai-sidebar-header { font-size: 14px; font-weight: 600; color: #1f2a44; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb }
.ai-suggestions { display: flex; flex-direction: column; gap: 8px }
.suggestion-item { padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafafa; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; gap: 8px }
.suggestion-item:hover { border-color: #4b7bec; background: #f0f7ff; transform: translateY(-1px) }
.suggestion-text { font-size: 13px; color: #333; line-height: 1.5 }
.suggestion-btn { padding: 4px 12px; border-radius: 6px; border: 1px solid #4b7bec; background: #4b7bec; color: #fff; cursor: pointer; font-size: 12px; align-self: flex-end }
.suggestion-btn:hover { background: #3a6bd8 }

.knowledge-sidebar { width: 400px; height: 100%; overflow-y: auto; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); margin-left: 16px; display: flex; flex-direction: column }
.knowledge-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb }
.knowledge-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #1f2a44 }
.close-btn { width: 24px; height: 24px; border: none; background: #f0f0f0; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; color: #666; display: flex; align-items: center; justify-content: center }
.close-btn:hover { background: #e0e0e0 }
.knowledge-search { display: flex; gap: 8px; margin-bottom: 16px }
.knowledge-search input { flex: 1; padding: 8px 12px; border-radius: 8px; border: 1px solid #ddd; font-size: 13px }
.knowledge-search button { padding: 8px 16px; white-space: nowrap }
.knowledge-content { flex: 1; overflow-y: auto; min-height: 0 }
.knowledge-list { display: flex; flex-direction: column; gap: 12px }
.knowledge-item { padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafafa; cursor: pointer; transition: all 0.2s }
.knowledge-item:hover { border-color: #4b7bec; background: #f0f7ff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(75, 123, 236, 0.1) }
.knowledge-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px }
.knowledge-title { font-size: 14px; font-weight: 600; color: #1f2a44; flex: 1 }
.knowledge-score { font-size: 12px; color: #4b7bec; font-weight: 600; margin-left: 8px }
.knowledge-item-content { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.knowledge-item-meta { font-size: 11px; color: #999 }
.knowledge-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e5e7eb }
.knowledge-pagination button { padding: 6px 12px; border-radius: 6px; border: 1px solid #ddd; background: #fafafa; cursor: pointer; font-size: 12px }
.knowledge-pagination button:hover:not(:disabled) { background: #f0f0f0; border-color: #4b7bec }
.knowledge-pagination button:disabled { opacity: 0.5; cursor: not-allowed }
.knowledge-pagination span { font-size: 13px; color: #666 }