.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.section-heading h2, .conversation-title h2 { margin: 0; }
.conversation-list { display: grid; gap: 9px; margin-top: 14px; }
.conversation-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}
.conversation-item:hover { border-color: #7899eb; background: #f7faff; }
.conversation-item.unread { background: var(--soft); border-color: #7397f3; }
.conversation-item .subject { font-weight: 850; }
.conversation-preview {
  display: block;
  max-width: 100%;
  margin-top: 4px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation-meta { color: #64748b; font-size: 12px; text-align: right; }
.conversation-title { margin: 15px 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.conversation-history { display: grid; gap: 10px; max-height: 55vh; overflow-y: auto; padding: 8px 3px 15px; }
.chat-message { max-width: 82%; padding: 11px 13px; border-radius: 15px 15px 15px 4px; background: #eef3fa; }
.chat-message.mine { justify-self: end; border-radius: 15px 15px 4px 15px; background: #dfeaff; }
.chat-message p { margin: 5px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message small { display: block; }
.mini-delete { padding: 6px 9px; margin-top: 5px; font-size: 12px; }
.reply-box { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.reply-box textarea { min-height: 80px; }
@media (max-width: 750px) {
  .section-heading { flex-direction: column; }
  .section-heading button { width: 100%; }
  .conversation-item { grid-template-columns: auto minmax(0, 1fr); }
  .conversation-meta { grid-column: 2; text-align: left; }
  .chat-message { max-width: 94%; }
}