:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --line: #e3e5e8;
  --text: #1f2328;
  --muted: #7a808a;
  --accent: #06c755;
  --accent-dark: #05a647;
  --bubble-in: #ffffff;
  --bubble-out: #b6f0b0;
  --selected: #e9f8ee;
  --danger: #d1242f;
  --tag-bg: #fff1c7;
  --tag-text: #7a5b00;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a;
    --panel: #1d2024;
    --line: #2d3137;
    --text: #e6e8eb;
    --muted: #8b929c;
    --bubble-in: #262a30;
    --bubble-out: #1f5e33;
    --selected: #1f3326;
    --tag-bg: #4a3d12;
    --tag-text: #f3d77b;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}
button, input, textarea { font: inherit; color: inherit; }
button {
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 8px 16px; cursor: pointer;
}
button:hover { background: var(--accent-dark); }
button:disabled { opacity: .5; cursor: default; }
button.link { background: none; color: var(--muted); padding: 4px 8px; }
button.link:hover { color: var(--text); background: none; }
input, textarea {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%;
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.hint { color: var(--muted); font-size: 12px; }
.error { color: var(--danger); }

/* Login */
.login-page { display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 28px; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px;
}
.login-card h1 { margin: 0 0 8px; font-size: 20px; }

/* Layout */
.app { display: flex; height: 100vh; height: 100dvh; }
.sidebar {
  width: 320px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.sidebar-head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 8px 16px; }
.sidebar-head strong { font-size: 16px; }
.quota { margin-left: auto; font-size: 12px; color: var(--muted); }
.search { margin: 0 12px 8px; width: auto; }
.chat-list { overflow-y: auto; flex: 1; padding-bottom: 12px; }
.section-label { padding: 10px 16px 4px; font-size: 12px; color: var(--muted); }

.chat-item {
  display: flex; gap: 10px; align-items: center; padding: 8px 16px; cursor: pointer;
}
.chat-item:hover { background: var(--bg); }
.chat-item.selected { background: var(--selected); }
.chat-item.inactive { opacity: .55; }
.chat-item .meta { flex: 1; min-width: 0; }
.chat-item .row { display: flex; align-items: baseline; gap: 6px; }
.chat-item .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item .time { margin-left: auto; font-size: 11px; color: var(--muted); flex-shrink: 0; }
.chat-item .preview { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.badge {
  background: var(--accent); color: #fff; border-radius: 10px; font-size: 11px;
  min-width: 18px; padding: 0 6px; text-align: center; flex-shrink: 0;
}
.tag {
  background: var(--tag-bg); color: var(--tag-text); font-size: 11px; border-radius: 4px;
  padding: 1px 6px; white-space: nowrap; font-weight: normal;
}

.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.small { width: 30px; height: 30px; font-size: 12px; }

/* Chat */
.chat { flex: 1; display: flex; min-width: 0; }
.empty { margin: auto; text-align: center; color: var(--muted); padding: 16px; }
.chat-view { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-view[hidden] { display: none; }
.chat-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.chat-title { flex: 1; min-width: 0; }
.chat-title > div:first-child { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-title .sub { font-size: 12px; color: var(--muted); }
.back { display: none; background: none; color: var(--text); font-size: 24px; padding: 0 8px 0 0; }
.back:hover { background: none; }
.role-notes {
  padding: 6px 16px; font-size: 12px; color: var(--muted); background: var(--panel);
  border-bottom: 1px solid var(--line); white-space: pre-wrap;
}

.messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.load-more { align-self: center; }
.day { align-self: center; font-size: 12px; color: var(--muted); }
.msg { display: flex; gap: 8px; max-width: 75%; }
.msg.out { align-self: flex-end; flex-direction: row-reverse; }
.msg .body { display: flex; flex-direction: column; min-width: 0; }
.msg.out .body { align-items: flex-end; }
.msg .sender { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.msg .bubble {
  background: var(--bubble-in); border: 1px solid var(--line); border-radius: 14px;
  padding: 7px 12px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.msg.out .bubble { background: var(--bubble-out); border-color: transparent; }
.msg .bubble.media { color: var(--muted); font-style: italic; }
.msg .bubble.bare { background: none; border: none; padding: 0; }
.msg .bubble.attach { padding: 6px 8px; }
.msg .photo { display: block; max-width: min(320px, 100%); max-height: 360px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.msg .sticker { display: block; width: 120px; height: auto; }
.msg .file { color: inherit; overflow-wrap: anywhere; }
.msg audio { display: block; max-width: 100%; }
.msg .time { font-size: 11px; color: var(--muted); margin-top: 2px; }
.msg .failed { font-size: 12px; color: var(--danger); margin-top: 2px; }
.event { align-self: center; font-size: 12px; color: var(--muted); background: var(--panel); border-radius: 10px; padding: 2px 10px; }

.composer { background: var(--panel); border-top: 1px solid var(--line); padding: 10px 16px; }
.composer-hint { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.composer-row { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { resize: none; max-height: 160px; }
.composer button { flex-shrink: 0; white-space: nowrap; }

dialog {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text);
  width: min(420px, calc(100vw - 32px)); padding: 20px;
}
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog form { display: flex; flex-direction: column; gap: 8px; }
dialog h3 { margin: 0 0 4px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* Phone: list and chat take turns */
@media (max-width: 760px) {
  .sidebar { width: 100%; border-right: 0; }
  .chat { display: none; }
  body.show-chat .sidebar { display: none; }
  body.show-chat .chat { display: flex; }
  .back { display: block; }
  .msg { max-width: 88%; }
}