:root {
  --bg: #141821;
  --bg-soft: #1b2130;
  --card: #212939;
  --line: #313b50;
  --text: #e8ecf4;
  --muted: #98a3b8;
  --accent: #4f8cff;
  --accent-soft: rgba(79, 140, 255, 0.14);
  --bubble-self: #3f77e0;
  --bubble-other: #2a3346;
  --ok: #34c38f;
  --warn: #e6a23c;
  --err: #ef5b5b;
  --radius: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(79, 140, 255, 0.12), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(52, 195, 143, 0.08), transparent 55%),
    var(--bg);
  overscroll-behavior-y: none;
}

button, input, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; }
[hidden] { display: none !important; }

/* ============ 登录 / 注册 ============ */
.auth-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.auth-brand h1 { margin: 0; font-size: 20px; }
.auth-brand p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }

.brand-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 14px;
  background: linear-gradient(145deg, #4f8cff, #2f6ae0);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 8px 20px rgba(79, 140, 255, 0.32);
}

.brand-mark.small {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 10px;
  font-size: 15px;
  box-shadow: none;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 18px;
}

.segmented.small { margin-bottom: 12px; }

.segmented button {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 9px;
  padding: 9px 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.segmented button.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(79, 140, 255, 0.25);
}

.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; }

.field input,
.add-friend input {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field input:focus,
.add-friend input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.primary-btn {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(145deg, #4f8cff, #2f6ae0);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 13px;
  margin-top: 4px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(79, 140, 255, 0.28);
}

.primary-btn:disabled { opacity: 0.6; cursor: default; }

.form-error {
  min-height: 18px;
  margin: 2px 0 8px;
  color: var(--err);
  font-size: 13px;
}

.form-hint {
  min-height: 17px;
  margin: 8px 2px 6px;
  color: var(--muted);
  font-size: 12.5px;
}

.form-hint.ok { color: var(--ok); }
.form-hint.bad { color: var(--err); }

.auth-foot {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.auth-recover {
  display: block;
  margin: 10px auto 0;
}

/* ============ 主界面 ============ */
.main-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  /* 手机键盘弹出时由 app.js 写入 visualViewport 高度 */
  height: var(--app-height, 100dvh);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(20, 24, 33, 0.75);
  backdrop-filter: blur(12px);
}

.brand-mini { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mini-text { display: flex; flex-direction: column; min-width: 0; }
.brand-mini-text strong { font-size: 15px; }
.brand-mini-text span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-actions { display: flex; align-items: center; gap: 8px; }

.conn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.conn-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
}

.conn-pill b { font-weight: 600; }
.conn-pill[data-state="online"] i { background: var(--ok); }
.conn-pill[data-state="online"] b { color: var(--ok); }
.conn-pill[data-state="offline"] i { background: var(--err); }
.conn-pill[data-state="offline"] b { color: var(--err); }

/* 断网 / 重连提示条 */
.net-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  font-size: 12.5px;
  line-height: 1.4;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 176, 32, 0.1);
  color: var(--warn);
}

.net-banner[hidden] { display: none; }

.net-banner-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
}

.net-banner[data-state="offline"] {
  background: rgba(255, 92, 92, 0.1);
  color: var(--err);
}

.net-banner[data-state="offline"] .net-banner-dot { background: var(--err); }

.net-banner[data-state="online"] {
  background: rgba(52, 199, 89, 0.1);
  color: var(--ok);
}

.net-banner[data-state="online"] .net-banner-dot { background: var(--ok); }

.net-banner-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.net-banner-pending {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 11.5px;
}

.net-banner-pending[hidden] { display: none; }

.net-banner-btn {
  flex: 0 0 auto;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

.net-banner-btn:active { background: rgba(255, 255, 255, 0.06); }

.e2e-pill {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
}

.e2e-pill[data-state="on"] { color: var(--ok); border-color: rgba(52, 199, 89, 0.35); }
.e2e-pill[data-state="locked"] { color: var(--warn); border-color: rgba(255, 176, 32, 0.35); }
.e2e-pill[data-state="none"] { color: var(--err); border-color: rgba(255, 92, 92, 0.35); }

.ghost-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 12.5px;
  cursor: pointer;
}

.ghost-btn:active { background: var(--bg-soft); }

.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 300px 1fr;
}

/* ============ 侧边栏 ============ */
.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: rgba(27, 33, 48, 0.5);
  padding: 12px;
}

.tab-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tab-panel[hidden] { display: none; }

.add-friend { display: flex; gap: 8px; }

.add-friend input { flex: 1; padding: 10px 12px; font-size: 14px; }

.add-friend button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 4px -4px 0;
  padding: 0 4px;
}

.empty-tip {
  padding: 32px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.friend-item,
.request-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.friend-item:hover,
.friend-item.active { background: var(--bg-soft); }
.request-item { cursor: default; }

.avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(145deg, #3d4f75, #2b3550);
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 个人资料 / 好友备注 */
.profile-card { max-width: 420px; }

.profile-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-avatar {
  width: 88px;
  height: 88px;
  align-self: center;
  border-radius: 24px;
  border: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 26px;
  color: #fff;
  background: linear-gradient(145deg, #3d4f75, #2b3550);
  cursor: pointer;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-body input[type="text"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--text);
  padding: 11px 12px;
  font-size: 14px;
}

.profile-body input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-label { font-size: 12.5px; color: var(--muted); }

.friend-main { flex: 1; min-width: 0; }
.friend-name { font-size: 14.5px; font-weight: 600; }
.friend-last {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-side { flex: 0 0 auto; text-align: right; }
.friend-time { font-size: 11.5px; color: var(--muted); }

.request-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.request-actions button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
}

.request-actions .accept {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
  font-weight: 700;
}

.request-actions .reject:active { color: var(--err); }

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--err);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: 1px;
}

/* ============ 聊天区 ============ */
.chat-panel { display: flex; flex-direction: column; min-height: 0; }

.chat-empty {
  flex: 1;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--muted);
}

.chat-empty-icon { font-size: 40px; margin-bottom: 10px; }
.chat-empty p { margin: 0; font-size: 14px; }

.chat-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  min-height: 56px;
}

.back-btn {
  display: none;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.chat-head-text { min-width: 0; }
.chat-title { font-size: 15.5px; font-weight: 700; }
.chat-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.msg-row {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  align-self: flex-start;
}

.msg-row.self { align-self: flex-end; align-items: flex-end; }

.bubble {
  padding: 9px 13px;
  border-radius: 14px;
  background: var(--bubble-other);
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  border-bottom-left-radius: 5px;
}

.msg-row.self .bubble {
  background: var(--bubble-self);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 5px;
}

.msg-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.msg-row.self .msg-meta { flex-direction: row-reverse; }

.msg-status.pending { color: var(--muted); }
.msg-status.queued { color: var(--warn); }
.msg-status.failed { color: var(--err); font-weight: 700; cursor: pointer; }

.composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(20, 24, 33, 0.65);
}

.composer textarea {
  flex: 1;
  resize: none;
  max-height: 120px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.45;
  outline: none;
}

.composer textarea:focus { border-color: var(--accent); }

.send-btn {
  flex: 0 0 auto;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(145deg, #4f8cff, #2f6ae0);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 18px;
  cursor: pointer;
}

.send-btn:disabled { opacity: 0.55; cursor: default; }

/* ============ 图片 / 语音 ============ */
.media-btn {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--muted);
  border-radius: 11px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.media-btn:active { background: var(--accent-soft); color: var(--accent); }
.media-btn:disabled { opacity: 0.5; cursor: default; }

.media-btn.recording {
  background: rgba(239, 91, 91, 0.16);
  border-color: rgba(239, 91, 91, 0.5);
  color: var(--err);
}

.recording-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(239, 91, 91, 0.1);
  border-top: 1px solid rgba(239, 91, 91, 0.28);
  font-size: 13px;
  color: var(--text);
}

.rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--err);
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

.rec-time { font-weight: 700; color: var(--err); }
.rec-tip { margin-left: auto; color: var(--muted); font-size: 11.5px; }

.bubble.media {
  padding: 5px;
  background: transparent;
  border-radius: 12px;
}

.msg-row.self .bubble.media { background: transparent; }

.bubble.media img {
  display: block;
  max-width: 220px;
  max-height: 280px;
  border-radius: 10px;
  cursor: zoom-in;
  object-fit: cover;
  background: var(--bg-soft);
}

.voice-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 190px;
}

.voice-player audio {
  width: 190px;
  height: 36px;
}

.voice-duration {
  font-size: 12px;
  color: var(--muted);
  flex: 0 0 auto;
}

.msg-row.self .voice-duration { color: rgba(255, 255, 255, 0.78); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(5, 7, 12, 0.92);
  display: grid;
  place-items: center;
  padding: 20px;
  cursor: zoom-out;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

/* ============ 已读 / 撤回 / 本端删除 ============ */
.chat-head-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.chat-head-actions .ghost-btn {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;
}

.msg-more {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0.75;
}

.msg-more:hover { color: var(--text); opacity: 1; }
.msg-row.self .msg-more { color: rgba(255, 255, 255, 0.7); }

.msg-status.read { color: var(--ok); }

.bubble.revoked {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 12.5px;
  font-style: normal;
  padding: 5px 10px;
}

.msg-row.self .bubble.revoked {
  background: transparent;
  color: var(--muted);
}

.msg-row.flash .bubble {
  animation: flash 1.4s ease;
}

@keyframes flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 140, 255, 0); }
  30% { box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.55); }
}

.unread-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}

.friend-side .unread-badge { display: grid; margin-left: auto; }

/* ============ 搜索面板 ============ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(5, 7, 12, 0.62);
  display: grid;
  place-items: center;
  padding: 20px;
  backdrop-filter: blur(3px);
}

.overlay-card {
  width: 100%;
  max-width: 520px;
  max-height: min(86vh, 720px);
  max-height: min(86dvh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.overlay-head h2 { margin: 0; font-size: 15.5px; }

.overlay-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

/* 通知与主屏幕 */
.notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.notify-card { max-width: 440px; }

/* 访客二维码 */
.guest-qr-btn { width: 100%; margin-top: 8px; }
.guest-qr-card { max-width: 380px; }
.guest-qr-card .unlock-desc { padding: 14px 16px 0; }

.guest-qr-box {
  display: flex;
  justify-content: center;
  padding: 14px 16px 0;
  overflow-y: auto;
}

.guest-qr-box svg {
  width: 100%;
  max-width: 240px;
  height: auto;
  padding: 8px;
  border-radius: 10px;
  background: #ffffff;
}

.guest-qr-link {
  margin: 10px 16px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  word-break: break-all;
}

.guest-qr-copy { align-self: center; margin: 10px 0 4px; }
.guest-qr-card .form-hint { padding: 0 16px 16px; margin: 0; text-align: center; }

.notify-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.notify-state {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
}

.notify-state[data-state="on"] { color: var(--ok); }
.notify-state[data-state="warn"] { color: var(--warn); }
.notify-state[data-state="off"] { color: var(--err); }

.notify-body .primary-btn { width: 100%; }

.notify-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.notify-section h3 { margin: 0; font-size: 13.5px; }
.notify-section .ghost-btn { align-self: flex-start; }

/* 端到端加密解锁 */
.unlock-card { max-width: 420px; }

.unlock-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.unlock-desc {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
}

.unlock-body .field { margin-bottom: 0; }
.unlock-body .primary-btn { width: 100%; }
.unlock-later { align-self: center; }
.unlock-body .form-hint { margin: 0; line-height: 1.55; }

.bubble.locked {
  color: var(--muted);
  cursor: pointer;
  font-style: normal;
}

/* 身份恢复码 */
.recovery-card { max-width: 440px; }

.recovery-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.recovery-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recovery-body .field { margin-bottom: 0; }
.recovery-body .primary-btn { width: 100%; }

.recovery-warn {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 176, 32, 0.12);
  border: 1px solid rgba(255, 176, 32, 0.35);
  color: var(--warn);
  font-size: 13px;
  line-height: 1.6;
}

.recovery-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 16px 10px;
  border: 1px dashed rgba(79, 140, 255, 0.5);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--text);
  user-select: all;
  word-break: break-all;
}

.recovery-code-actions { display: flex; gap: 8px; }
.recovery-code-actions .primary-btn,
.recovery-code-actions .ghost-btn {
  flex: 1;
  margin: 0;
}

.check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.check-line input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.recovery-ok {
  margin: 0;
  color: var(--ok);
  font-weight: 700;
  font-size: 15px;
}

.search-fields {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 16px 10px;
}

.search-fields input[type="search"],
.search-fields input[type="date"],
.search-fields select {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

.search-fields input[type="search"]:focus,
.search-fields input[type="date"]:focus,
.search-fields select:focus { border-color: var(--accent); }

.search-row { display: flex; gap: 8px; }
.search-row select,
.search-row input { flex: 1; min-width: 0; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }

.chips button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  cursor: pointer;
}

.chips button.active {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
  font-weight: 700;
}

.search-fields .primary-btn { margin-top: 2px; padding: 11px; font-size: 14px; }
.search-fields .form-hint { margin: 0; }

.search-results {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  padding: 10px 10px 16px;
}

.search-result {
  padding: 10px;
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.15s;
}

.search-result:hover { background: var(--bg-soft); }

.search-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.search-result-name { color: var(--text); font-weight: 600; font-size: 13px; }
.search-result-body { margin-top: 5px; font-size: 13.5px; line-height: 1.5; word-break: break-word; }
.search-result-body mark { background: rgba(230, 162, 60, 0.32); color: #ffd58a; border-radius: 3px; padding: 0 2px; }
.search-result-type {
  display: inline-block;
  margin-right: 5px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--muted);
  vertical-align: 1px;
}

/* ============ 消息操作面板 ============ */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: rgba(5, 7, 12, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.sheet {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.sheet-title {
  margin: 4px 6px 10px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

.sheet-actions { display: flex; flex-direction: column; gap: 8px; }

.sheet-actions button {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--text);
  border-radius: 11px;
  padding: 12px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

.sheet-actions button:active { background: var(--accent-soft); }
.sheet-actions button.danger { color: var(--err); }

.sheet-cancel {
  width: 100%;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 11px;
  padding: 11px;
  font-size: 14px;
  cursor: pointer;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  z-index: 90;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(33, 41, 57, 0.96);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============ 移动端 ============ */
/* 手机竖屏、窄窗口，以及手机横屏（高度很小）都使用单列移动布局 */
@media (max-width: 820px), (max-height: 520px) {
  .workspace { grid-template-columns: 1fr; }

  .chat-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 30;
    background: var(--bg);
    transform: translateX(100%);
    transition: transform 0.2s ease;
    height: 100vh;
    height: 100dvh;
    height: var(--app-height, 100dvh);
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* iOS 上输入框字号小于 16px 会在聚焦时自动放大页面 */
  .field input,
  .add-friend input,
  .search-fields input,
  .search-fields select,
  .composer textarea {
    font-size: 16px;
  }

  .workspace.chat-open .chat-panel { transform: translateX(0); }
  .back-btn { display: grid; place-items: center; }
  .chat-empty { display: none; }

  .topbar { padding-left: 12px; padding-right: 12px; }
  .net-banner { padding-left: 12px; padding-right: 12px; }
  .net-banner-btn { padding: 4px 8px; }
  .top-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
  .sidebar { border-right: 0; }
  .msg-row { max-width: 85%; }

  #unlockOverlay { place-items: center; padding: 16px; }
  #unlockOverlay .overlay-card {
    height: auto;
    max-height: 88vh;
    max-height: 88dvh;
    border: 1px solid var(--line);
    border-radius: 18px;
  }

  #recoveryOverlay { place-items: center; padding: 16px; }
  #recoveryOverlay .overlay-card {
    height: auto;
    max-height: 88vh;
    max-height: 88dvh;
    border: 1px solid var(--line);
    border-radius: 18px;
  }

  #guestQrOverlay { place-items: center; padding: 16px; }
  #guestQrOverlay .overlay-card {
    height: auto;
    max-height: 88vh;
    max-height: 88dvh;
    border: 1px solid var(--line);
    border-radius: 18px;
  }

  #notifyOverlay { place-items: center; padding: 16px; }
  #notifyOverlay .overlay-card {
    height: auto;
    max-height: 88vh;
    max-height: 88dvh;
    border: 1px solid var(--line);
    border-radius: 18px;
  }

  .overlay { padding: 0; place-items: stretch; }
  .overlay-card {
    max-width: none;
    max-height: none;
    height: 100vh;
    height: 100dvh;
    height: var(--app-height, 100dvh);
    border-radius: 0;
    border: 0;
    padding-top: env(safe-area-inset-top);
  }

  .sheet { max-width: none; }
}

@media (max-width: 400px) {
  .brand-mini-text strong { font-size: 14px; }
  .conn-pill b { display: none; }
  .notify-btn-text { display: none; }
  .auth-card { padding: 22px 18px; }
}

/* ============ 微信风格浅色主题 ============ */
:root {
  --bg: #ededed;
  --bg-soft: #f7f7f7;
  --card: #ffffff;
  --line: #dadada;
  --text: #191919;
  --muted: #8a8a8a;
  --accent: #07c160;
  --accent-soft: rgba(7, 193, 96, 0.12);
  --bubble-self: #95ec69;
  --bubble-other: #ffffff;
  --ok: #07c160;
  --warn: #fa9d3b;
  --err: #fa5151;
  --radius: 8px;
}

body { background: #ededed; }

/* 顶栏 */
.topbar {
  background: #f7f7f7;
  border-bottom-color: #d9d9d9;
  backdrop-filter: none;
}

.brand-mark,
.brand-mark.small {
  background: linear-gradient(145deg, #2fd06f, #07c160);
  box-shadow: 0 8px 20px rgba(7, 193, 96, 0.2);
}

.brand-mark.small { box-shadow: none; }

.conn-pill,
.e2e-pill {
  background: #ffffff;
  border-color: #e0e0e0;
}

.ghost-btn {
  background: #ffffff;
  border-color: #e0e0e0;
  color: #444444;
}

.ghost-btn:active { background: #f2f2f2; }

.net-banner { background: #fff6e5; }

/* 侧边栏（会话列表） */
.sidebar {
  background: #ededed;
  border-right-color: #d9d9d9;
}

.segmented {
  background: #e4e4e4;
  border-color: #dcdcdc;
  border-radius: 8px;
}

.segmented button { border-radius: 6px; color: #666666; }

.segmented button.active {
  background: #ffffff;
  color: #07c160;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.add-friend input {
  background: #ffffff;
  border-color: #e0e0e0;
  border-radius: 6px;
}

.add-friend button {
  background: #ffffff;
  border-color: #e0e0e0;
  color: #07c160;
  border-radius: 6px;
}

.guest-qr-btn {
  background: #ffffff;
  border-color: #e0e0e0;
  border-radius: 6px;
}

.list {
  margin: 4px -6px 0;
  padding: 0 6px;
}

.friend-item,
.request-item {
  border-radius: 6px;
  padding: 10px 8px;
  gap: 12px;
}

.friend-item:hover { background: #e3e3e3; }
.friend-item.active { background: #d9d9d9; }

.avatar { border-radius: 6px; }

.friend-name {
  font-size: 15px;
  font-weight: 500;
  color: #191919;
}

.friend-last { color: #9a9a9a; }
.unread-badge { background: #fa5151; color: #ffffff; }

/* 聊天区 */
.chat-panel { background: #f5f5f5; }

.chat-empty {
  background: #ededed;
  color: #9a9a9a;
}

.chat-head {
  background: #ededed;
  border-bottom-color: #d9d9d9;
}

.chat-title { font-size: 16px; font-weight: 600; }
.back-btn { color: #333333; }

.messages {
  background: #ededed;
  gap: 14px;
  padding: 16px 16px 20px;
}

.bubble {
  position: relative;
  border-radius: 6px;
  padding: 10px 12px;
  color: #191919;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
}

.msg-row.self .bubble {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 4px;
}

/* 气泡小尖角，更像微信 */
.bubble:not(.media)::after {
  content: "";
  position: absolute;
  top: 13px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}

.msg-row:not(.self) .bubble:not(.media)::after {
  left: -6px;
  border-left: 0;
  border-right-color: #ffffff;
}

.msg-row.self .bubble:not(.media)::after {
  right: -6px;
  border-right: 0;
  border-left-color: #95ec69;
}

.msg-meta { color: #9a9a9a; }
.msg-row.self .msg-more { color: #9a9a9a; }

/* 输入栏 */
.composer {
  background: #f7f7f7;
  border-top-color: #d9d9d9;
}

.composer textarea {
  background: #ffffff;
  border-color: #e0e0e0;
  border-radius: 6px;
  color: #191919;
}

.composer textarea:focus { border-color: #07c160; }

.send-btn {
  background: #07c160;
  border-radius: 6px;
  box-shadow: none;
}

.send-btn:active { background: #06ad56; }

.media-btn {
  background: #ffffff;
  border-color: #e0e0e0;
  color: #555555;
  border-radius: 6px;
}

.primary-btn {
  background: #07c160;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(7, 193, 96, 0.2);
}

/* 登录卡片与弹层 */
.auth-card { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08); }
.overlay { background: rgba(0, 0, 0, 0.45); }
.overlay-card { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25); }

/* 撤回气泡不加尖角；自己发的语音时长改深色，避免绿底上看不清 */
.bubble.revoked::after { content: none; }
.msg-row.self .voice-duration { color: rgba(0, 0, 0, 0.55); }

/* 每条消息旁的小头像（微信样式） */
.msg-row {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  max-width: 86%;
}

.msg-row.self {
  flex-direction: row;
  align-items: flex-start;
}

.msg-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.msg-row.self .msg-body { align-items: flex-end; }

.msg-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(145deg, #3d4f75, #2b3550);
}

.msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}