:root {
  --bg: #0f172a;
  --bg2: #111827;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-soft: rgba(255, 255, 255, 0.78);
  --text: #0f172a;
  --muted: #64748b;
  --line: rgba(15, 23, 42, 0.08);
  --accent: #f59e0b;
  --accent2: #6366f1;
  --danger: #ef4444;
  --ok: #10b981;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  --radius: 24px;
}

* { box-sizing: border-box; }

html, body, #app {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 4%, rgba(245, 158, 11, 0.25), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(99, 102, 241, 0.34), transparent 28%),
    linear-gradient(150deg, #020617, #111827 48%, #172554);
}

button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { opacity: 0.55; cursor: not-allowed; }

.app-shell {
  width: 100%;
  max-width: 520px;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  position: relative;
  overflow: hidden;
}

.boot-screen,
.identity-screen {
  min-height: 100vh;
  padding: 42px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

.planet {
  width: 92px;
  height: 92px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), var(--shadow);
  color: #fde68a;
  font-size: 44px;
  margin-bottom: 20px;
}

.boot-screen h1,
.identity-screen h1 {
  margin: 0 0 10px;
  font-size: 34px;
  letter-spacing: -0.05em;
}

.boot-screen p,
.identity-screen p {
  margin: 0;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
}

.identity-card {
  width: 100%;
  margin-top: 28px;
  padding: 22px;
  border-radius: 30px;
  background: rgba(255,255,255,0.92);
  color: var(--text);
  box-shadow: var(--shadow);
  text-align: left;
}

.label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0 8px;
}

.input, .textarea, .select {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255,255,255,0.88);
  color: var(--text);
  border-radius: 18px;
  outline: none;
  padding: 14px 16px;
  transition: border .2s ease, box-shadow .2s ease;
}

.textarea { min-height: 92px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus {
  border-color: rgba(99, 102, 241, 0.48);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.primary-btn, .secondary-btn, .ghost-btn, .danger-btn {
  border-radius: 18px;
  padding: 13px 16px;
  font-weight: 700;
}

.primary-btn {
  background: linear-gradient(135deg, #111827, #312e81);
  color: white;
  box-shadow: 0 12px 30px rgba(49, 46, 129, 0.28);
}
.secondary-btn {
  background: rgba(15, 23, 42, 0.08);
  color: var(--text);
}
.ghost-btn {
  background: transparent;
  color: var(--text);
}
.danger-btn {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}
.full { width: 100%; }

.screen {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.header {
  padding: calc(env(safe-area-inset-top) + 18px) 18px 14px;
  color: white;
}
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.header h1, .header h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.04em;
}
.header h2 { font-size: 20px; }
.header small { display: block; color: rgba(255,255,255,0.66); margin-top: 4px; }
.header-actions { display: flex; gap: 8px; align-items: center; }
.circle-btn {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: rgba(255,255,255,0.14);
  color: white;
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  font-size: 22px;
}
.back-btn { font-size: 18px; }

.content {
  flex: 1;
  min-height: 0;
  margin-top: 6px;
  padding: 18px;
  background: rgba(248, 250, 252, 0.94);
  border-radius: 34px 34px 0 0;
  overflow: auto;
}

.chat-list { display: flex; flex-direction: column; gap: 12px; }
.chat-card, .contact-card, .form-card, .empty-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.05);
}
.chat-card {
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background: linear-gradient(135deg, #111827, #6366f1 70%, #f59e0b);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 900;
  flex: 0 0 auto;
}
.chat-main { flex: 1; min-width: 0; }
.chat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.chat-title { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.chat-preview { color: var(--muted); font-size: 13px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { font-size: 11px; color: #4338ca; background: #eef2ff; padding: 4px 8px; border-radius: 999px; }

.empty-card {
  padding: 34px 20px;
  text-align: center;
  color: var(--muted);
}
.empty-card strong { display:block; color: var(--text); margin-bottom: 6px; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 20;
  padding: 16px;
}
.modal {
  width: 100%;
  max-width: 520px;
  background: white;
  border-radius: 28px;
  padding: 16px;
  box-shadow: var(--shadow);
  animation: rise .18s ease;
}
@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  background: transparent;
  border-radius: 18px;
  text-align: left;
}
.menu-item:hover { background: rgba(15,23,42,0.05); }
.menu-icon { width: 38px; height: 38px; border-radius: 15px; display:grid; place-items:center; background:#f1f5f9; }

.form-card { padding: 18px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.row > * { flex: 1; }
.hint { color: var(--muted); font-size: 13px; line-height: 1.6; }
.notice { padding: 12px 14px; border-radius: 18px; background: #fef3c7; color: #92400e; font-size: 13px; line-height: 1.55; }
.error { padding: 12px 14px; border-radius: 18px; background: #fee2e2; color: #991b1b; font-size: 13px; line-height: 1.55; }
.success { padding: 12px 14px; border-radius: 18px; background: #dcfce7; color: #166534; font-size: 13px; line-height: 1.55; }

.contact-card {
  padding: 13px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.checkbox-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
}
.checkbox-line input { width: 18px; height: 18px; }

.chat-room .content {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  flex: 1 1 auto;
}
.messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px 20px;
}
.message-row {
  display: flex;
  margin: 8px 0;
  width: 100%;
}
.message-row.mine { justify-content: flex-end; }
.message-row.theirs { justify-content: flex-start; }
.message-row > div {
  max-width: 78%;
  min-width: 76px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.message-row.mine > div { align-items: flex-end; }
.bubble {
  display: inline-block;
  width: fit-content;
  min-width: 76px;
  max-width: 100%;
  border-radius: 20px;
  padding: 10px 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  box-shadow: 0 8px 24px rgba(15,23,42,0.06);
}
.mine .bubble {
  color: white;
  border-bottom-right-radius: 7px;
  background: linear-gradient(135deg, #111827, #4f46e5);
}
.theirs .bubble {
  background: white;
  border-bottom-left-radius: 7px;
}
.msg-meta { font-size: 11px; opacity: 0.65; margin-top: 5px; }
.sender-name { font-size: 11px; color: var(--muted); margin: 0 0 3px 6px; }
.composer {
  position: sticky;
  bottom: 0;
  z-index: 9;
  padding: 10px 12px calc(env(safe-area-inset-bottom) + 12px);
  background: rgba(255,255,255,0.86);
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.composer textarea {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,0.12);
  padding: 12px 14px;
  outline: none;
  resize: none;
}
.send-btn { width: 48px; height: 44px; border-radius: 18px; background: #111827; color: white; font-weight: 900; }
.password-bar {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: #fffbeb;
}
.password-grid { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }

.settings-list { display: flex; flex-direction: column; gap: 12px; }
.kv {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.kv span:first-child { color: var(--muted); }
.code-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  padding: 8px 10px;
  border-radius: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@media (min-width: 700px) {
  body { padding: 18px; }
  .app-shell { border-radius: 34px; min-height: calc(100vh - 36px); box-shadow: var(--shadow); }
  .screen, .boot-screen, .identity-screen { min-height: calc(100vh - 36px); }
}

/* v2 Pro additions */
.tab-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  padding: 16px;
  background: rgba(255,255,255,0.72);
}
.tab-card p { color: var(--muted); line-height: 1.55; margin: 8px 0 14px; }
.divider { text-align: center; color: var(--muted); font-size: 13px; margin: 2px 0; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 16px; }
.summary-card { text-align: left; padding: 14px; border-radius: 20px; background: rgba(255,255,255,0.82); border: 1px solid rgba(15,23,42,.08); box-shadow: 0 8px 24px rgba(15,23,42,.06); color: var(--text); }
.summary-card strong { display: block; font-size: 22px; letter-spacing: -0.04em; }
.summary-card span { color: var(--muted); font-size: 12px; }
.online-ring { position: relative; box-shadow: 0 0 0 3px rgba(16,185,129,.22), inset 0 0 0 1px rgba(255,255,255,.45); }
.online-ring::after { content: ''; position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 99px; background: var(--ok); border: 2px solid white; }
.tiny-btn { padding: 8px 10px; border-radius: 14px; background: rgba(99,102,241,.1); color: #3730a3; font-weight: 650; white-space: nowrap; }
.search { margin-bottom: 12px; background: rgba(255,255,255,.94); }
.checkbox-line small { color: var(--muted); margin-left: 6px; }
.danger-btn { background: rgba(239, 68, 68, .1); color: #991b1b; padding: 14px 16px; font-weight: 750; }
.code-pill { user-select: all; }
@media (max-width: 380px) { .summary-grid { grid-template-columns: 1fr; } .contact-card { grid-template-columns: auto 1fr; } }

/* v2.4: keep short Chinese messages horizontal instead of one character per line */
.message-row .bubble, .message-row .bubble * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}
@media (max-width: 430px) {
  .message-row > div { max-width: 82%; min-width: 88px; }
  .bubble { min-width: 88px; }
}


/* v2.5 Chat UX fixes: fixed composer, desktop Enter-to-send support, preserve draft */
.chat-room { overflow: hidden; }
.chat-room .header { flex: 0 0 auto; }
.chat-room .password-bar { flex: 0 0 auto; }
@media (min-width: 700px) {
  .app-shell { height: calc(100vh - 36px); }
  .screen, .boot-screen, .identity-screen { height: calc(100vh - 36px); }
  .chat-room .content { height: auto; }
  .messages { padding-bottom: 24px; }
}
@media (display-mode: standalone) {
  .composer { padding-bottom: calc(env(safe-area-inset-bottom) + 14px); }
}

/* v2.7 Stable Input + Mobile Keyboard fixes */
html, body { overscroll-behavior: none; }
.chat-room .content { overflow: hidden !important; }
.messages {
  overflow-anchor: none;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.composer {
  flex: 0 0 auto;
  will-change: transform;
}
.composer textarea {
  font-size: 16px; /* prevents iOS Safari zoom/jump */
  line-height: 1.45;
}
@supports (height: 100svh) {
  .app-shell, .screen { height: 100svh; min-height: 100svh; }
}


/* v2.8 Built-in emoji/sticker pack */
.emoji-btn {
  width: 46px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.07);
  color: var(--text);
  font-size: 22px;
  display: grid;
  place-items: center;
}
.emoji-btn:active { transform: scale(.96); }
.sticker-panel {
  flex: 0 0 auto;
  max-height: 38vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--line);
  padding: 12px 12px 10px;
  box-shadow: 0 -16px 40px rgba(15,23,42,.08);
}
.sticker-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.sticker-panel-head strong { font-size: 15px; }
.sticker-panel-head small { color: var(--muted); font-size: 12px; flex: 1; }
.sticker-section { margin: 10px 0 12px; }
.sticker-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin: 0 0 8px 4px;
}
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 7px;
}
.sticker-btn {
  min-height: 42px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.07);
  font-size: 22px;
  display: grid;
  place-items: center;
  padding: 6px;
  box-shadow: 0 3px 10px rgba(15,23,42,.03);
}
.sticker-btn:active { transform: scale(.96); background: #eef2ff; }
.sticker-btn.sticker-text {
  grid-column: span 2;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  background: linear-gradient(135deg, #fff7ed, #eef2ff);
}
.sticker-bubble {
  font-size: 24px;
  line-height: 1.3;
}
.sticker-bubble .msg-meta { font-size: 11px; }
@media (max-width: 430px) {
  .sticker-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sticker-btn.sticker-text { grid-column: span 3; }
  .sticker-panel { max-height: 42vh; padding-bottom: calc(env(safe-area-inset-bottom) + 10px); }
}

/* v2.9 reset tools */
.text-btn {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.82);
  text-decoration: underline;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 10px 8px;
}
.identity-card .text-btn { color: #637089; }
.danger-mini { color: #a33 !important; background: #fff1f1 !important; }

/* v3.1 管理增强美化版：更高级的首页与管理体验 */
:root {
  --gold: #fbbf24;
  --violet: #7c3aed;
  --ink: #0b1220;
}

.app-shell {
  max-width: 560px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 28px 90px rgba(2,6,23,.42);
}

.header {
  padding-left: 22px;
  padding-right: 22px;
}

.header h1 {
  font-size: 31px;
  line-height: 1.08;
}

.primary-circle {
  background: linear-gradient(135deg, rgba(99,102,241,.95), rgba(124,58,237,.95));
  box-shadow: 0 16px 40px rgba(99,102,241,.28);
}

.content {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.95), transparent 26%),
    linear-gradient(180deg, rgba(248,250,252,.97), rgba(226,232,240,.94));
  border-radius: 38px 38px 0 0;
  padding: 20px;
}

.hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  margin-bottom: 14px;
  color: white;
  border-radius: 28px;
  background:
    radial-gradient(circle at 15% 10%, rgba(251,191,36,.38), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(129,140,248,.48), transparent 30%),
    linear-gradient(135deg, #111827, #312e81 62%, #4c1d95);
  box-shadow: 0 18px 44px rgba(49,46,129,.22);
}
.hero-card strong { display: block; font-size: 17px; letter-spacing: -.02em; }
.hero-card p { margin: 5px 0 0; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.5; }
.hero-card span { font-size: 11px; color: rgba(255,255,255,.68); white-space: nowrap; }

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 4px 10px;
  color: var(--text);
  font-weight: 900;
}
.section-title small { color: var(--muted); font-weight: 700; }

.pro-summary {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pro-summary .summary-card {
  position: relative;
  overflow: hidden;
  text-align: left;
  padding: 16px 14px;
  border: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px);
}
.pro-summary .summary-card:after {
  content: '';
  position: absolute;
  inset: auto -20px -28px auto;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: rgba(99,102,241,.12);
}
.summary-icon { display: block; font-size: 18px; margin-bottom: 4px; }

.chat-card-new {
  position: relative;
  border: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  transition: transform .18s ease, box-shadow .18s ease, border .18s ease;
}
.chat-card-new:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 46px rgba(15,23,42,.09);
  border-color: rgba(99,102,241,.18);
}
.chat-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  flex: 0 0 auto;
}
.chat-action-chip {
  border-radius: 999px;
  padding: 6px 10px;
  color: #4338ca;
  background: #eef2ff;
  font-size: 12px;
  font-weight: 800;
}
.chat-action-chip:hover { background: #e0e7ff; }

.settings-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.05);
  margin-bottom: 14px;
}
.settings-hero strong { display: block; font-size: 18px; }
.settings-hero p { margin: 4px 0 0; color: var(--muted); }
.tool-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.strong-danger {
  background: linear-gradient(135deg, #991b1b, #ef4444);
  color: white;
}
.danger-hint { color: #b91c1c; }

.chat-room .content {
  padding-left: 0;
  padding-right: 0;
}
.chat-room .password-bar,
.chat-room .composer,
.sticker-panel {
  margin-left: 14px;
  margin-right: 14px;
}
.messages {
  padding-left: 14px;
  padding-right: 14px;
}

@media (min-width: 780px) {
  .app-shell { max-width: 760px; }
  .header h1 { font-size: 36px; }
  .content { padding: 24px; }
  .chat-room .content { padding-left: 0; padding-right: 0; }
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v3.2 玻璃防重复版：Apple 风液态玻璃 UI */
:root {
  --glass-bg: rgba(255, 255, 255, 0.13);
  --glass-bg-strong: rgba(255, 255, 255, 0.22);
  --glass-line: rgba(255, 255, 255, 0.24);
  --glass-dark: rgba(9, 14, 32, 0.52);
  --neon: #7c6cff;
  --neon2: #4f46e5;
  --warm: #f6b25e;
}

html, body, #app {
  background:
    radial-gradient(circle at 18% 5%, rgba(246, 178, 94, .32), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(91, 91, 255, .48), transparent 34%),
    radial-gradient(circle at 55% 78%, rgba(255,255,255,.09), transparent 26%),
    linear-gradient(160deg, #050816 0%, #0b1224 42%, #121c44 100%) !important;
}

.app-shell {
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 198, 109, .14), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(124, 108, 255, .22), transparent 32%),
    rgba(7, 13, 30, .35) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 120px rgba(0,0,0,.48) !important;
}

.app-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 28%, rgba(255,255,255,.035));
  z-index: 0;
}
.screen, .boot-screen, .identity-screen { position: relative; z-index: 1; }

.planet {
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.07)) !important;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -18px 44px rgba(0,0,0,.18),
    0 26px 80px rgba(0,0,0,.34) !important;
}

.identity-card,
.tab-card,
.form-card,
.empty-card,
.chat-card,
.contact-card,
.summary-card,
.settings-hero,
.modal,
.password-bar,
.sticker-panel {
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.56)) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    0 18px 48px rgba(8, 13, 30, .14) !important;
}

.identity-card {
  border-radius: 34px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.62)) !important;
}

.input, .textarea, .select, .composer textarea {
  background: rgba(255,255,255,.64) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 10px 28px rgba(15,23,42,.05) !important;
}
.input:focus, .textarea:focus, .select:focus, .composer textarea:focus {
  border-color: rgba(124,108,255,.48) !important;
  box-shadow: 0 0 0 4px rgba(124,108,255,.14), inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.header .circle-btn,
.circle-btn {
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.07)) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 42px rgba(0,0,0,.18);
}
.primary-circle,
.send-btn,
.primary-btn {
  background: linear-gradient(135deg, #171c3e, #3d37d7 55%, #8b5cf6) !important;
  color: white !important;
  box-shadow: 0 18px 46px rgba(79,70,229,.34), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.secondary-btn, .tiny-btn, .chat-action-chip, .badge {
  background: rgba(238,242,255,.72) !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.content {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.62), transparent 24%),
    radial-gradient(circle at 92% 100%, rgba(124,108,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(246,248,252,.82), rgba(226,232,240,.74)) !important;
  border: 1px solid rgba(255,255,255,.42);
  border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.56);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.hero-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 12%, rgba(255,210,124,.34), transparent 24%),
    radial-gradient(circle at 80% 10%, rgba(148,113,255,.45), transparent 24%),
    linear-gradient(135deg, rgba(17,24,39,.92), rgba(49,46,129,.88) 56%, rgba(88,28,135,.86)) !important;
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.hero-card::after {
  content: '✦';
  position: absolute;
  right: 24px;
  bottom: -18px;
  font-size: 96px;
  color: rgba(255,255,255,.08);
  transform: rotate(-16deg);
}

.pro-summary .summary-card {
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.48)) !important;
}
.chat-card-new {
  background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.52)) !important;
  border-radius: 26px !important;
}
.chat-card-new:active { transform: scale(.992); }
.avatar {
  background: linear-gradient(135deg, #1c2451, #4f46e5 58%, #f6b25e) !important;
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 34px rgba(79,70,229,.22);
}
.online-ring::after { border-color: rgba(255,255,255,.92) !important; }

.notice, .success, .error {
  border: 1px solid rgba(255,255,255,.58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.glass-notice { background: rgba(254,243,199,.68) !important; }

.modal-backdrop {
  align-items: center !important;
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  background: rgba(5, 8, 22, .56) !important;
}
.modal {
  background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.13)) !important;
  color: white !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 32px 110px rgba(0,0,0,.44) !important;
}
.modal .menu-item { color: white; }
.modal .menu-item small { color: rgba(255,255,255,.62); }
.modal .menu-icon { background: rgba(255,255,255,.12); }
.modal .secondary-btn { color: white !important; background: rgba(255,255,255,.12) !important; }

.chat-room .content {
  background: linear-gradient(180deg, rgba(241,245,249,.78), rgba(226,232,240,.72)) !important;
}
.password-bar {
  background: linear-gradient(145deg, rgba(255,251,235,.82), rgba(255,255,255,.48)) !important;
  border-radius: 24px;
  margin-top: 6px;
}
.composer {
  margin: 10px 12px calc(env(safe-area-inset-bottom) + 10px) !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.76) !important;
  border: 1px solid rgba(255,255,255,.64) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 18px 54px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.emoji-btn {
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(255,255,255,.62) !important;
}
.sticker-panel {
  margin: 8px 12px 0 !important;
  border-radius: 28px 28px 18px 18px !important;
}
.sticker-btn {
  background: rgba(255,255,255,.64) !important;
  border: 1px solid rgba(255,255,255,.68) !important;
}
.mine .bubble {
  background: linear-gradient(135deg, #111a46, #4038d6 58%, #6d5cff) !important;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 36px rgba(79,70,229,.22) !important;
}
.theirs .bubble {
  background: rgba(255,255,255,.84) !important;
  border: 1px solid rgba(255,255,255,.66);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 430px) {
  .header h1 { font-size: 30px; }
  .content { border-radius: 34px 34px 0 0; padding: 18px; }
  .hero-card { border-radius: 28px; }
  .summary-grid.pro-summary { grid-template-columns: repeat(3, 1fr); }
  .pro-summary .summary-card { padding: 12px 10px; }
  .pro-summary .summary-card strong { font-size: 20px; }
  .chat-title { font-size: 17px; }
}

/* ===== V4.0 聊天体验统一系统 ===== */
:root {
  --chat-font-size: 16px;
  --chat-line-height: 1.45;
  --small-font-size: 12px;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body, input, textarea, button, select {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.input, .select, textarea, #messageInput, .bubble, .message-text {
  font-size: var(--chat-font-size);
  line-height: var(--chat-line-height);
  font-weight: 400;
}
.chat-preview, .hint, .label, .msg-meta, .chat-time {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.chat-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.unread-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}
.pinned-card {
  border-color: rgba(245, 158, 11, 0.36);
  box-shadow: 0 16px 40px rgba(245, 158, 11, 0.12);
}
.message-row .bubble {
  user-select: text;
  -webkit-user-select: text;
  word-break: break-word;
  white-space: normal;
}
.message-text {
  white-space: normal;
}
.reply-quote, .composer-reply {
  border-left: 3px solid rgba(99, 102, 241, 0.58);
  background: rgba(99, 102, 241, 0.10);
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 8px;
  color: rgba(15, 23, 42, 0.72);
  font-size: 13px;
  line-height: 1.35;
}
.mine .reply-quote {
  background: rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.86);
  border-left-color: rgba(255,255,255,0.60);
}
.composer-reply {
  margin: 0 0 8px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.composer-reply p { margin: 3px 0 0; }
.chat-image {
  display: block;
  max-width: min(260px, 68vw);
  max-height: 360px;
  border-radius: 18px;
  object-fit: cover;
  cursor: zoom-in;
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.image-caption { margin-top: 8px; }
.voice-message {
  min-width: 190px;
  display: grid;
  gap: 8px;
}
.voice-message audio {
  width: 100%;
  max-width: 260px;
}
.day-separator {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}
.day-separator span {
  font-size: 12px;
  color: rgba(255,255,255,.82);
  background: rgba(15,23,42,.24);
  backdrop-filter: blur(12px);
  padding: 5px 10px;
  border-radius: 999px;
}
.message-menu-preview {
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(15,23,42,.06);
  color: var(--text);
  margin-bottom: 8px;
  word-break: break-word;
  line-height: 1.45;
}
.danger-item strong { color: var(--danger); }
.image-preview-backdrop {
  align-items: center;
  padding: 22px;
}
.image-preview {
  max-width: 94vw;
  max-height: 86vh;
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.recording {
  background: rgba(239,68,68,.18) !important;
  color: #ef4444 !important;
  animation: pulseRecord 1s infinite ease-in-out;
}
@keyframes pulseRecord {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.chat-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 14px;
  padding: 0 18px 18px;
}
.chat-room > .header + .chat-layout .content {
  margin-top: 0;
}
.desktop-sidebar { display: none; }
.chat-content {
  position: relative;
  background-size: cover;
  background-position: center;
}
.chat-bg-space {
  background:
    radial-gradient(circle at 20% 10%, rgba(99,102,241,.34), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(245,158,11,.20), transparent 24%),
    linear-gradient(150deg, rgba(15,23,42,.94), rgba(30,41,59,.88));
}
.chat-bg-warm {
  background:
    radial-gradient(circle at 20% 10%, rgba(251,146,60,.42), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(244,63,94,.25), transparent 26%),
    linear-gradient(150deg, rgba(67,20,7,.86), rgba(120,53,15,.78));
}
.chat-bg-blue {
  background:
    radial-gradient(circle at 15% 20%, rgba(56,189,248,.40), transparent 30%),
    radial-gradient(circle at 92% 14%, rgba(124,58,237,.32), transparent 26%),
    linear-gradient(150deg, rgba(15,23,42,.94), rgba(30,64,175,.78));
}
.chat-bg-light {
  background:
    radial-gradient(circle at 10% 10%, rgba(203,213,225,.55), transparent 30%),
    linear-gradient(180deg, rgba(248,250,252,.96), rgba(226,232,240,.92));
}
.chat-bg-light .day-separator span { color: var(--muted); background: rgba(255,255,255,.72); }
.chat-bg-family {
  background:
    radial-gradient(circle at 12% 12%, rgba(252,211,77,.38), transparent 28%),
    radial-gradient(circle at 88% 20%, rgba(244,114,182,.24), transparent 26%),
    linear-gradient(160deg, rgba(255,247,237,.96), rgba(254,226,226,.88));
}
.chat-bg-family .day-separator span { color: #92400e; background: rgba(255,255,255,.72); }
.password-bar, .composer, .sticker-panel, .composer-reply {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.chat-bg-space .password-bar,
.chat-bg-warm .password-bar,
.chat-bg-blue .password-bar {
  color: white;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
}
.chat-bg-space .password-bar .hint,
.chat-bg-warm .password-bar .hint,
.chat-bg-blue .password-bar .hint { color: rgba(255,255,255,.72); }
.chat-bg-space .empty-card,
.chat-bg-warm .empty-card,
.chat-bg-blue .empty-card {
  background: rgba(255,255,255,.78);
}
.settings-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
}
.settings-hero strong { display: block; font-size: 18px; }
.settings-hero p { margin: 4px 0 0; color: var(--muted); }
.pin-input {
  text-align: center;
  font-size: 22px !important;
  letter-spacing: .22em;
}

@media (min-width: 860px) {
  .app-shell {
    max-width: 1180px;
  }
  .home-screen .content {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  .chat-layout {
    padding: 0 24px 24px;
  }
  .desktop-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 350px;
    min-width: 350px;
    overflow: auto;
    padding: 14px;
    border-radius: 30px;
    background: rgba(248,250,252,.84);
    backdrop-filter: blur(18px);
  }
  .desktop-sidebar .chat-card {
    box-shadow: none;
  }
  .desktop-sidebar-title {
    font-weight: 900;
    color: var(--text);
    padding: 4px 4px 8px;
  }
  .chat-content {
    border-radius: 30px;
    margin: 0;
  }
  .chat-image { max-width: 340px; }
}

/* ===== V4.0 手机端体验修复：微信式移动聊天 + 移除主界面聊天密码栏 ===== */
.chat-toast {
  flex: 0 0 auto;
  margin: 8px 12px 0;
  border-radius: 16px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 10px 28px rgba(15,23,42,.10);
}

@media (max-width: 859px) {
  body { padding: 0 !important; }
  .app-shell {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  .screen { height: 100dvh !important; min-height: 100dvh !important; }

  /* 聊天页手机端独立布局：不再像电脑端压缩版 */
  .chat-room .header {
    padding: calc(env(safe-area-inset-top) + 8px) 12px 8px !important;
    color: #fff;
    background: linear-gradient(180deg, rgba(8,13,30,.54), rgba(8,13,30,.10));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .chat-room .header-row {
    min-height: 42px;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 8px;
  }
  .chat-room .header-actions { justify-content: flex-end; }
  .chat-room .header h1 {
    font-size: 20px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .chat-room .header small {
    margin-top: 2px !important;
    font-size: 12px !important;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255,255,255,.68) !important;
  }
  .chat-room .circle-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    font-size: 19px !important;
  }
  .chat-room .back-btn { font-size: 20px !important; }

  .chat-layout {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 !important;
    gap: 0 !important;
  }
  .desktop-sidebar { display: none !important; }
  .chat-room .content,
  .chat-content {
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* 主聊天页不显示聊天密码栏；密钥只放到聊天设置的高级区 */
  .chat-room .password-bar { display: none !important; }

  .messages {
    padding: 10px 10px 8px !important;
    flex: 1 1 auto;
    min-height: 0;
  }
  .empty-card {
    margin: 8px 6px;
    padding: 28px 16px !important;
    border-radius: 22px !important;
  }
  .message-row { margin: 6px 0 !important; }
  .message-row > div { max-width: 78% !important; min-width: 0 !important; }
  .bubble {
    min-width: 0 !important;
    padding: 8px 11px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
  .msg-meta { font-size: 10.5px !important; margin-top: 4px !important; }
  .sender-name { font-size: 10.5px !important; }
  .day-separator { margin: 8px 0 !important; }
  .day-separator span { font-size: 11px !important; padding: 4px 9px !important; }

  /* 底部输入栏改成轻量微信式，不再一排大玻璃按钮 */
  .composer {
    margin: 0 !important;
    padding: 7px 8px calc(env(safe-area-inset-bottom) + 7px) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    gap: 6px !important;
    align-items: center !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 -8px 28px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.76) !important;
  }
  .composer textarea {
    min-height: 38px !important;
    max-height: 92px !important;
    border-radius: 16px !important;
    padding: 8px 11px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    background: rgba(255,255,255,.86) !important;
  }
  .emoji-btn {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    border-radius: 15px !important;
    font-size: 20px !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: none !important;
  }
  .send-btn {
    width: 42px !important;
    height: 38px !important;
    border-radius: 15px !important;
    font-size: 16px !important;
    flex: 0 0 42px;
  }
  .sticker-panel {
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 38vh !important;
    padding: 10px 10px calc(env(safe-area-inset-bottom) + 8px) !important;
  }
  .sticker-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

  .chat-toast {
    margin: 7px 10px 0 !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
  }
}

@media (max-width: 380px) {
  .chat-room .header h1 { font-size: 18px !important; }
  .chat-room .circle-btn { width: 36px !important; height: 36px !important; }
  .emoji-btn { width: 34px !important; height: 36px !important; flex-basis: 34px !important; }
  .send-btn { width: 38px !important; flex-basis: 38px !important; }
  .composer { gap: 5px !important; padding-left: 6px !important; padding-right: 6px !important; }
}

/* V4.0 mobile header structure fix: current header has left group + right group */
@media (max-width: 859px) {
  .chat-room .header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .chat-room .header-row > .header-actions:first-child {
    flex: 1 1 auto;
    min-width: 0;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }
  .chat-room .header-row > .header-actions:first-child > div {
    min-width: 0;
  }
  .chat-room .header-row > .header-actions:last-child {
    flex: 0 0 42px;
    justify-content: flex-end;
  }
}

/* V4.0 final local-first minimal chat polish */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.message-text, .composer textarea, .bubble { font-size: 16px; line-height: 1.45; }
.chat-room .header h1 { letter-spacing: -0.03em; }
.simple-composer { position: relative; }
.simple-composer .send-btn {
  min-width: 48px;
  width: auto;
  padding: 0 12px;
  font-weight: 800;
  border-radius: 18px;
}
.simple-composer .send-btn:not(.has-text) {
  color: #0f172a;
  background: rgba(255,255,255,.80);
  box-shadow: none;
  border: 1px solid rgba(148,163,184,.20);
  font-size: 22px;
}
.simple-composer .send-btn.has-text { font-size: 14px; }
.attach-panel {
  margin: 0 10px 8px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.80);
  box-shadow: 0 18px 48px rgba(15,23,42,.14);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  padding: 14px 14px 12px;
}
.attach-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.attach-item {
  border: 0;
  background: transparent;
  color: #111827;
  display: grid;
  place-items: center;
  gap: 8px;
  font: inherit;
}
.attach-item span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 8px 22px rgba(15,23,42,.08);
  font-size: 24px;
}
.attach-item small { font-size: 12px; color: #475569; }
.attach-hint { margin: 12px 2px 0; font-size: 11.5px; color: #64748b; text-align: center; }
.media-card {
  display: grid;
  gap: 6px;
  min-width: min(260px, 70vw);
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(148,163,184,.22);
  color: #0f172a;
  text-decoration: none;
}
.mine .media-card { background: rgba(255,255,255,.18); color: white; border-color: rgba(255,255,255,.22); }
.media-card strong { font-size: 15px; }
.media-card small { color: inherit; opacity: .75; }
.media-card em { font-style: normal; font-size: 11px; opacity: .65; }
.chat-image.tiny-thumb { filter: blur(.4px); opacity: .9; max-height: 160px; object-fit: cover; }
.media-note { margin-top: 6px; font-size: 11px; opacity: .72; }
.withdrawn-msg {
  font-size: 14px;
  color: #64748b;
  font-style: italic;
  padding: 2px 0;
}
.mine .withdrawn-msg { color: rgba(255,255,255,.82); }
.audit-badge {
  margin-bottom: 8px;
  padding: 6px 8px;
  border-radius: 12px;
  font-size: 11.5px;
  color: #7f1d1d;
  background: rgba(254,226,226,.92);
  border: 1px solid rgba(248,113,113,.28);
}
.mine .audit-badge { color: #fff7ed; background: rgba(251,146,60,.18); border-color: rgba(255,255,255,.18); }
@media (max-width: 859px) {
  .chat-room .content.chat-content { padding-top: 0 !important; }
  .attach-panel { margin: 0 0 0; border-radius: 24px 24px 0 0; padding-bottom: calc(env(safe-area-inset-bottom) + 12px); }
  .simple-composer .send-btn { min-width: 46px !important; height: 38px !important; flex-basis: auto !important; }
  .simple-composer .send-btn.has-text { min-width: 54px !important; }
  .simple-composer textarea { flex: 1 1 auto !important; min-width: 0 !important; }
  .media-card { min-width: min(238px, 76vw); }
}

.media-action-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 9px 13px;
  font-weight: 800;
  font-size: 13px;
  background: rgba(79,70,229,.12);
  color: #3730a3;
  justify-self: start;
  cursor: pointer;
}
.mine .media-action-btn {
  background: rgba(255,255,255,.22);
  color: #fff;
}
.media-action-btn:active { transform: scale(.98); }

/* V4.0 微信式短语音 + 通知修复 */
.voice-mode-on textarea { display: none; }
.voice-hold-btn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(148,163,184,.18);
  color: #111827;
  font-weight: 800;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.voice-hold-btn:active {
  background: rgba(226,232,240,.95);
  transform: scale(.995);
}
.mic-btn.keyboard-mode { font-size: 18px !important; }
.voice-record-mask {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  color: white;
  pointer-events: auto;
}
.voice-record-bubble {
  width: min(70vw, 330px);
  height: 128px;
  border-radius: 30px;
  background: linear-gradient(135deg, #94f06d, #7ee85f);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  display: grid;
  place-items: center;
  position: relative;
}
.voice-record-bubble::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 50%;
  width: 34px;
  height: 34px;
  background: #7ee85f;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 6px;
}
.voice-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 44px;
  z-index: 1;
}
.voice-wave i {
  width: 4px;
  height: calc(8px + (var(--i) % 7) * 4px);
  border-radius: 999px;
  background: rgba(22,101,52,.55);
  animation: voiceWave .72s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.035s);
}
@keyframes voiceWave {
  0%, 100% { transform: scaleY(.45); opacity: .55; }
  50% { transform: scaleY(1.3); opacity: 1; }
}
.voice-record-tip {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom) + 118px);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.75);
  font-size: 20px;
  letter-spacing: .04em;
}
.voice-cancel-area, .voice-send-area {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom) + 72px);
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: rgba(15,23,42,.55);
  color: rgba(255,255,255,.78);
  display: grid;
  place-items: center;
  font-size: 52px;
}
.voice-cancel-area { left: 9vw; }
.voice-send-area { right: 9vw; }
.voice-cancel-area span, .voice-send-area span {
  font-size: 13px;
  margin-top: -28px;
}
.voice-player-card {
  min-width: min(280px, 72vw);
  padding: 10px 12px;
  border-radius: 18px;
}
.voice-player-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  margin-bottom: 8px;
}
.voice-player-title small { font-size: 12px; opacity: .78; font-weight: 700; }
.voice-player-card audio {
  display: block;
  width: 100%;
  max-width: 280px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
}
.mine .voice-player-card audio { filter: saturate(.9); }
.voice-receive-card .media-action-btn { justify-self: stretch; text-align: center; }
@media (max-width: 859px) {
  .voice-player-card { min-width: min(260px, 72vw); }
  .voice-record-bubble { width: min(64vw, 310px); height: 112px; }
  .voice-cancel-area, .voice-send-area { width: 96px; height: 96px; font-size: 46px; }
}

/* ===== V4.0 管理员登录页手机滚动修复 ===== */
.identity-screen {
  justify-content: flex-start !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + 120px) !important;
}
.identity-card {
  flex: 0 0 auto;
  margin-bottom: 44px;
}
@media (max-width: 859px) {
  html, body, #app {
    overflow: hidden !important;
  }
  .identity-screen {
    padding-top: calc(env(safe-area-inset-top) + 28px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 10px;
  }
  .identity-screen .planet {
    width: 74px !important;
    height: 74px !important;
    border-radius: 24px !important;
    font-size: 36px !important;
    margin-bottom: 8px !important;
  }
  .identity-screen h1 {
    font-size: 30px !important;
    margin-bottom: 4px !important;
  }
  .identity-screen > p {
    font-size: 15px !important;
  }
  .identity-card {
    margin-top: 14px !important;
    border-radius: 28px !important;
    padding: 14px !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.22), 0 16px 40px rgba(15,23,42,.18) !important;
  }
  .identity-card .tab-card {
    padding: 16px !important;
    border-radius: 22px !important;
  }
  .identity-card .tab-card p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  .identity-card .input {
    min-height: 48px !important;
    height: 48px !important;
    font-size: 16px !important;
  }
  .identity-card .primary-btn,
  .identity-card .secondary-btn {
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
  }
}


/* ===== V4.0 语音稳定版：点击开始 / 点击发送，适配 iPhone 网页 ===== */
.voice-hold-btn.voice-start-btn {
  cursor: pointer;
  touch-action: manipulation !important;
  user-select: none;
  -webkit-user-select: none;
}
.voice-hold-btn.voice-start-btn.is-recording,
.voice-hold-btn.voice-start-btn:disabled {
  opacity: .72;
  color: #64748b;
}
.voice-record-mask { display: none !important; }
.voice-record-panel {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) + 76px);
  z-index: 45;
  margin: 0 10px 10px;
  padding: 14px;
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 18px 55px rgba(15,23,42,.20);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  color: #0f172a;
  display: grid;
  gap: 12px;
}
.voice-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 900;
  font-size: 15px;
}
.voice-record-head strong {
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  color: #4f46e5;
}
.voice-record-mini-wave {
  height: 42px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(148,240,109,.72), rgba(126,232,95,.55));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.voice-record-mini-wave i {
  width: 4px;
  height: calc(8px + (var(--i) % 6) * 4px);
  border-radius: 999px;
  background: rgba(22,101,52,.62);
  animation: voiceWave .72s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.04s);
}
.voice-record-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.voice-record-actions button {
  border: 0;
  border-radius: 18px;
  min-height: 44px;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
}
.voice-record-cancel {
  background: rgba(248,113,113,.14);
  color: #991b1b;
}
.voice-record-send {
  background: linear-gradient(135deg, #1b235d, #4f46e5 58%, #8b5cf6);
  color: white;
  box-shadow: 0 10px 28px rgba(79,70,229,.24);
}
@media (max-width: 859px) {
  .voice-record-panel {
    margin: 0 8px 8px;
    bottom: calc(env(safe-area-inset-bottom) + 70px);
    border-radius: 24px;
  }
}


/* V4.0 语音可播放版 */
.voice-play-row { display:flex; align-items:center; gap:10px; margin:8px 0; }
.voice-play-button { border:0; border-radius:999px; padding:10px 16px; min-width:120px; font-weight:800; cursor:pointer; background:rgba(255,255,255,.88); color:#1b1e55; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.message.mine .voice-play-button { background:rgba(255,255,255,.9); color:#22237a; }
.voice-player-card audio { width:100%; max-width:320px; display:block; margin-top:6px; }
.voice-receive-card small { line-height:1.5; }