.engagement-nav .page-nav-bar { justify-content: space-between; }
.engagement-nav-space,
.engagement-nav-action { width: 36px; min-width: 36px; }
.engagement-nav-action { height: 36px; border: 0; background: transparent; color: var(--text-primary); display: grid; place-items: center; }

.engagement-page { min-height: 100%; padding: 14px var(--space-page) 42px; box-sizing: border-box; }
.engagement-intro,
.group-safety {
  display: grid; gap: 3px; margin-bottom: 12px; padding: 11px 12px; border-radius: 11px;
  border: 1px solid rgba(44, 113, 232, .22); background: rgba(44, 113, 232, .08);
  color: var(--text-secondary); font-size: 11px; line-height: 1.55;
}
.engagement-intro strong { color: var(--text-primary); font-size: 13px; }

.engagement-compose { margin-bottom: 15px; }
.engagement-compose textarea,
.engagement-reply-box textarea,
.group-compose textarea {
  width: 100%; box-sizing: border-box; resize: none; border: 1px solid var(--divider); border-radius: 10px;
  background: var(--bg-elevated); color: var(--text-primary); padding: 10px 11px; font: inherit; outline: 0;
}
.engagement-compose textarea { min-height: 82px; }
.engagement-compose textarea:focus,
.engagement-reply-box textarea:focus,
.group-compose textarea:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 2px rgba(44, 113, 232, .14); }
.engagement-compose > view { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; color: var(--text-tertiary); font-size: 11px; }
.engagement-compose button,
.engagement-reply-box button.primary,
.group-compose button {
  border: 0; border-radius: 9px; background: var(--brand-blue); color: #fff; min-height: 34px;
  padding: 0 14px; font: inherit; font-weight: 700;
}
.engagement-compose button:disabled,
.engagement-reply-box button:disabled,
.group-compose button:disabled { opacity: .55; }

.engagement-list { display: grid; gap: 11px; }
.engagement-question { padding: 14px; }
.engagement-author { display: flex; align-items: center; gap: 8px; }
.engagement-avatar,
.group-avatar { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: grid; place-items: center; flex: 0 0 auto; font-size: 12px; font-weight: 700; }
.engagement-author-name { color: var(--text-primary); font-size: 12px; font-weight: 650; }
.engagement-badge,
.engagement-verified,
.group-sender span { margin-left: 6px; padding: 2px 5px; border-radius: 5px; background: rgba(255, 121, 63, .12); color: var(--brand-orange); font-size: 9px; font-weight: 700; }
.engagement-verified { background: rgba(44, 113, 232, .11); color: var(--brand-blue); }
.engagement-content { color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; font-size: 13px; }
.question-content { margin: 10px 0 8px; font-size: 14px; }
.engagement-question-footer { display: flex; align-items: center; justify-content: space-between; color: var(--text-tertiary); font-size: 10px; }
.engagement-question-footer button,
.engagement-reply-box button { border: 0; background: transparent; color: var(--brand-blue); font: inherit; font-weight: 650; padding: 5px 0 5px 10px; }
.engagement-answers { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--divider); display: grid; gap: 10px; }
.engagement-answer { padding: 9px 10px; border-radius: 10px; background: var(--bg-elevated); }
.engagement-answer .engagement-avatar { width: 24px; height: 24px; font-size: 10px; }
.engagement-answer .engagement-content { margin-top: 7px; }
.engagement-time,
.engagement-no-answer { margin-top: 5px; color: var(--text-tertiary); font-size: 10px; }
.engagement-no-answer { padding-top: 8px; border-top: 1px solid var(--divider); }
.engagement-reply-box { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--divider); }
.engagement-reply-box textarea { min-height: 70px; }
.engagement-reply-box > view { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 7px; }
.engagement-more { display: block; margin: 13px auto 0; border: 1px solid var(--divider); border-radius: 999px; background: var(--bg-card); color: var(--text-secondary); padding: 8px 18px; font: inherit; font-size: 12px; }

.group-page { padding-bottom: 92px; }
.group-safety { margin-bottom: 14px; }
.group-empty { padding: 45px 20px; text-align: center; color: var(--text-tertiary); font-size: 12px; }
.group-messages { display: grid; gap: 14px; }
.group-message { display: flex; align-items: flex-start; gap: 8px; max-width: 90%; }
.group-message.mine { margin-left: auto; flex-direction: row-reverse; }
.group-message-main { min-width: 0; }
.group-sender { margin-bottom: 4px; color: var(--text-tertiary); font-size: 10px; }
.group-message.mine .group-sender { text-align: right; }
.group-bubble { padding: 9px 11px; border-radius: 4px 13px 13px; background: var(--bg-card); border: 1px solid var(--divider); color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; font-size: 13px; }
.group-message.mine .group-bubble { border-radius: 13px 4px 13px 13px; background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.group-time { margin-top: 4px; color: var(--text-tertiary); font-size: 9px; }
.group-message.mine .group-time { text-align: right; }
.group-message.pending { opacity: 0.65; }
.group-message.pending .group-time::after { content: ' · 发送中…'; color: var(--brand-orange); }
.group-message.failed { opacity: 0.9; }
.group-message.failed .group-time::after { content: ' · 发送失败'; color: #EF4444; }
.group-compose-spacer { height: 12px; }
.group-compose {
  position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 8px;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid var(--divider);
  background: color-mix(in srgb, var(--bg-primary) 92%, transparent); backdrop-filter: blur(16px);
}
.group-compose textarea { min-height: 38px; max-height: 96px; }
.group-compose button { min-height: 40px; flex: 0 0 auto; }

@media (prefers-reduced-motion: no-preference) {
  .engagement-compose button,
  .engagement-more,
  .group-compose button { transition: transform .15s ease, opacity .15s ease; }
  .engagement-compose button:active,
  .engagement-more:active,
  .group-compose button:active { transform: scale(.97); }
}