:root {
  --bg: #ffffff;
  --rail: #f7f8fa;
  --line: #e2e2e0;
  --divider: #ececea;
  --ink: #191919;
  --muted: #5f5f5f;
  --faint: #9a9a97;
  --accent: #2a5fe0;
  --accent-ink: #1f4fc2;
  --accent-tint: #d6e4ff;
  --accent-soft: #e6edff;
  --selected: #eef3ff;
  --bubble: #f2f3f5;
  --danger: #b42318;
  --badge: #d92d20;
  --pending: #b5400b;
  --mine-bg: #dde7ff;
  --theirs-bg: #ddefe8;
  --theirs-ink: #1f6f5c;
  --chip: #2b2b2b;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
button { font: inherit; cursor: pointer; }
a { color: var(--accent); }

.app { display: flex; min-height: 100vh; }

.rail {
  flex: 0 0 60px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 0; background: var(--rail); border-right: 1px solid var(--line);
}
.me {
  width: 36px; height: 36px; margin-bottom: 14px; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; background: var(--mine-bg); color: var(--accent-ink);
  font-weight: 700;
}
.rail-btn {
  position: relative; width: 44px; height: 44px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; color: var(--muted);
}
.rail-btn[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.badge {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--badge); color: #fff; font-size: 11px; line-height: 18px; font-weight: 500; text-align: center;
}

.list { flex: 0 1 300px; min-width: 240px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.list-head { height: 60px; flex-shrink: 0; padding: 0 16px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.list-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.item {
  height: 64px; padding: 0 12px; display: flex; gap: 10px; align-items: center;
  text-decoration: none; color: var(--ink);
}
.item[aria-current="true"] { background: var(--selected); }
.item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.item-row { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.item-name { font-size: 14px; line-height: 20px; }
.item-time { flex-shrink: 0; font-size: 12px; color: var(--muted); }
.item-preview { font-size: 12px; line-height: 17px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-pending { color: var(--pending); }
.empty { padding: 24px 16px; font-size: 13px; color: var(--muted); }

.avatar {
  position: relative; flex-shrink: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; line-height: 1;
}
.avatar.mine { background: var(--mine-bg); color: var(--accent-ink); }
.avatar.theirs { background: var(--theirs-bg); color: var(--theirs-ink); }
.avatar .client {
  position: absolute; right: -4px; bottom: -4px; height: 16px; padding: 0 3px; border: 2px solid #fff; border-radius: 5px;
  display: flex; align-items: center; background: var(--chip); color: #fff;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8px; font-weight: 500;
}

.chat { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; }
.chat-head {
  height: 60px; flex-shrink: 0; padding: 0 24px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.chat-head h1 { margin: 0; font-size: 16px; font-weight: 600; }
.chat-head .topic { font-size: 13px; color: var(--muted); }
.log { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.time, .system { align-self: center; font-size: 12px; line-height: 16px; color: var(--muted); text-align: center; }
.row { display: flex; gap: 10px; align-items: flex-start; }
.row.mine { flex-direction: row-reverse; }
.bubble {
  max-width: min(520px, 75%); padding: 9px 12px; border-radius: 6px; font-size: 14px; line-height: 22px;
  white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bubble);
}
.row.mine .bubble { background: var(--accent-tint); }
.filtered { display: block; margin-top: 6px; font-size: 12px; color: var(--accent-ink); }
.typing { display: flex; gap: 5px; align-items: center; height: 40px; padding: 0 14px; border-radius: 6px; background: var(--accent-tint); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); }
.typing i:nth-child(2) { opacity: .6; }
.typing i:nth-child(3) { opacity: .3; }

.card {
  width: 100%; max-width: 440px; border: 1px solid #e6e6e4; border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(25, 25, 25, .06); background: #fff;
}
.card-body { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.card-body h2 { margin: 0; font-size: 15px; font-weight: 600; }
.card-body p { margin: 0; font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.scope {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 10px 16px;
  border-top: 1px solid var(--divider); font-size: 13px; color: #555;
}
.scope label { display: flex; gap: 4px; align-items: center; }
.scope input {
  width: 56px; height: 32px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; color: var(--ink);
}
.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--divider); }
.actions button { height: 44px; border: none; background: #fff; font-size: 14px; color: var(--ink); }
.actions button + button { border-left: 1px solid var(--divider); font-weight: 600; color: var(--accent); }
.error { color: var(--danger); font-size: 13px; padding: 0 16px 10px; }

.foot {
  height: 64px; flex-shrink: 0; padding: 0 16px 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); font-size: 13px; color: #555;
}
.foot button { height: 36px; min-width: 72px; padding: 0 16px; border: 1px solid #cfcfcc; border-radius: 6px; background: #fff; color: var(--ink); }

.placeholder { margin: auto; color: var(--faint); font-size: 14px; }
.profile { padding: 72px 24px; display: flex; justify-content: center; }
.profile-inner { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 16px; }
.profile-head { display: flex; gap: 16px; align-items: center; }
.profile-head h1 { margin: 0; font-size: 20px; font-weight: 600; }
.profile-meta { font-size: 13px; color: var(--muted); }

@media (max-width: 760px) {
  .app { flex-wrap: wrap; }
  .list { flex: 1 1 100%; max-height: 40vh; }
  .chat { flex: 1 1 100%; }
}

.app[hidden], .gate[hidden] { display: none; }
.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--rail); }
.panel {
  width: 100%; max-width: 400px; padding: 28px 28px 24px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  display: flex; flex-direction: column; gap: 14px;
}
.panel .brand { font-size: 13px; font-weight: 600; color: var(--accent); }
.panel h1 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.panel p { margin: 0; font-size: 14px; line-height: 22px; color: var(--muted); }
.panel .error { padding: 0; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.field input {
  height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 15px; color: var(--ink);
}
.field input:focus, .scope input:focus { outline: 2px solid var(--accent-tint); border-color: var(--accent); }
.buttons { display: flex; gap: 10px; justify-content: flex-end; }
.btn {
  height: 40px; padding: 0 18px; border: 1px solid #cfcfcc; border-radius: 6px; background: #fff; color: var(--ink); font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.btn.primary { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: .5; cursor: default; }
.code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 28px; letter-spacing: 2px; color: var(--ink); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.copy { display: flex; flex-direction: column; gap: 8px; }
.copy pre {
  margin: 0; padding: 10px 12px; border-radius: 6px; background: var(--bubble); font-size: 13px; line-height: 20px;
  white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit;
}
.list-head { justify-content: space-between; }
.list-head .btn { height: 30px; padding: 0 12px; font-size: 13px; }
.section { padding: 14px 16px 6px; font-size: 12px; color: var(--muted); }
.rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; }
.rows > div { min-height: 56px; padding: 10px 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.rows > div + div { border-top: 1px solid var(--divider); }
.rows .meta { font-size: 12px; color: var(--muted); }
.waiting { align-self: flex-start; font-size: 13px; color: var(--muted); padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; }
.panel form { display: flex; flex-direction: column; gap: 14px; }
.profile-inner > h1 { margin: 0; font-size: 20px; font-weight: 600; }
.profile-inner p, .profile-inner h2 { margin: 0; }