:root {
  --bg: #0c1519;
  --panel: #122128;
  --panel-2: #0f1b21;
  --line: #28414a;
  --ink: #e7f4f1;
  --muted: #88a29f;
  --accent: #4fd1c5;
  --danger: #ff9b9b;
  --warn: #f3c77a;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(60% 40% at 85% 0%, rgba(79,209,197,.08), transparent 60%), var(--bg); color: var(--ink); font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
.admin-top { display: flex; align-items: center; justify-content: space-between; max-width: 1500px; margin: 0 auto; padding: 18px 28px; border-bottom: 1px solid var(--line); }
.admin-top strong { letter-spacing: .16em; font-size: 13px; }
.admin-top span { margin-left: 12px; color: var(--muted); font-size: 11px; }
.admin-top nav { display: flex; gap: 16px; align-items: center; color: var(--muted); font-size: 11px; }
.admin-top button { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); padding: 7px 10px; cursor: pointer; }
.admin-shell { max-width: 1500px; margin: 0 auto; padding: 22px 28px 40px; }
.eyebrow { margin: 0 0 7px; color: var(--accent); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .16em; }
h1, h2 { font-weight: 600; }
.login-card { max-width: 440px; margin: 80px auto; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(160deg, #162a31, #0f1b20); }
.login-card h1 { margin: 0 0 8px; font-size: 30px; }
.muted { color: var(--muted); font-size: 12px; line-height: 1.7; }
form label { display: block; margin-top: 14px; color: #c5d8d5; font-size: 11px; }
form input, form textarea, form select { display: block; width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 9px; background: #0d1b21; color: var(--ink); padding: 9px 10px; outline: none; }
form input:focus, form textarea:focus, form select:focus { border-color: #4fafa5; }
.primary { border: 0; border-radius: 9px; background: var(--accent); color: #06201d; font-weight: 800; padding: 9px 13px; cursor: pointer; }
.ghost { border: 1px solid var(--line); border-radius: 8px; background: #14252b; color: var(--ink); padding: 7px 10px; cursor: pointer; }
.primary:disabled, .ghost:disabled { opacity: .5; cursor: wait; }
.error { min-height: 16px; color: var(--danger); font-size: 11px; }
.fine { color: var(--muted); font-size: 10px; line-height: 1.6; }
.workspace { display: grid; grid-template-columns: 290px minmax(0, 1fr) 300px; gap: 16px; min-height: 690px; }
.conversation-pane, .detail-pane, .kb-pane { border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); min-width: 0; }
.conversation-pane, .kb-pane { padding: 14px; }
.detail-pane { padding: 18px; display: flex; flex-direction: column; min-height: 690px; }
.pane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pane-head h2 { margin: 0; font-size: 20px; }
.filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 13px 0; }
.filter { border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); padding: 5px 8px; font-size: 10px; cursor: pointer; }
.filter.is-active { border-color: #4c948b; background: rgba(79,209,197,.12); color: var(--accent); }
.conversation-list { display: flex; flex-direction: column; gap: 7px; max-height: 600px; overflow: auto; }
.conv-item { text-align: left; border: 1px solid var(--line); border-radius: 10px; background: #102027; color: var(--ink); padding: 10px; cursor: pointer; }
.conv-item:hover, .conv-item.is-active { border-color: #4b8e86; background: #152b31; }
.conv-item strong { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item span { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.empty-detail { display: flex; flex-direction: column; gap: 6px; margin: auto; color: var(--muted); font-size: 12px; text-align: center; }
.empty-detail strong { color: var(--ink); font-size: 15px; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.detail-head h2 { margin: 0; font-size: 21px; }
.detail-actions { display: flex; gap: 7px; }
.consent-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.consent-chip { border: 1px solid var(--line); border-radius: 99px; padding: 4px 8px; color: var(--muted); font-size: 9px; }
.consent-chip.on { border-color: #417b72; color: #9ce5da; background: rgba(79,209,197,.08); }
.transcript-note { margin: 8px 0; border-left: 2px solid var(--warn); background: rgba(243,199,122,.07); padding: 8px 10px; color: var(--warn); font-size: 10px; line-height: 1.6; }
.admin-messages { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 9px; padding: 10px 2px; min-height: 260px; }
.admin-msg { max-width: 78%; border: 1px solid var(--line); border-radius: 10px; background: #12242a; padding: 8px 10px; font-size: 11px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-msg.visitor { align-self: flex-end; border-color: #376b64; background: #18352f; }
.admin-msg.human { align-self: flex-end; border-color: #4e5378; background: #242640; }
.admin-msg span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 8px; }
.reply-form { display: flex; gap: 8px; align-items: flex-end; border-top: 1px solid var(--line); padding-top: 10px; }
.reply-form textarea { flex: 1; resize: vertical; min-height: 42px; margin: 0; }
.kb-list { display: flex; flex-direction: column; gap: 8px; max-height: 390px; overflow: auto; margin: 12px 0; }
.kb-item { border: 1px solid var(--line); border-radius: 9px; padding: 8px; background: #102027; }
.kb-item strong { display: block; font-size: 10px; }
.kb-item span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.kb-editor { border-top: 1px solid var(--line); padding: 10px 0; }
.kb-editor summary { cursor: pointer; color: #c6dad7; font-size: 11px; }
.kb-editor form { padding-top: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
@media (max-width: 1050px) {
  .workspace { grid-template-columns: 1fr; }
  .detail-pane { min-height: 560px; }
  .conversation-pane, .kb-pane { min-height: auto; }
}
@media (max-width: 600px) {
  .admin-shell, .admin-top { padding-left: 12px; padding-right: 12px; }
  .admin-top span { display: none; }
  .login-card { margin: 30px auto; padding: 22px; }
  .detail-head { flex-direction: column; }
  .admin-messages { max-height: 420px; }
}

[hidden] { display: none !important; }