/* View-specific styles — added incrementally per phase */

/* ── Comms view (Phase 6) ─────────────────────────────────────────────── */

.section-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 12px;
  margin-top: 4px;
}

/* Template cards */
.template-card { margin-bottom: 12px; }
.template-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.template-title { font-weight: 700; font-size: 0.95rem; flex: 1; }
.template-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.recommended-badge { }
.template-description { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.4; }
.compose-btn { font-size: 0.82rem; padding: 8px 14px; min-height: 36px; }

/* Compose area */
.compose-area {
  border: 1px solid var(--accent);
  border-radius: var(--radius-card);
  padding: 20px;
  margin-bottom: 16px;
  background: rgba(76,201,240,0.04);
}
.compose-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 8px;
  flex-wrap: wrap;
}
.compose-title { font-weight: 700; font-size: 0.95rem; }
.compose-close { font-size: 0.8rem; padding: 6px 12px; min-height: 32px; }

/* Template preview box (read-only, shows raw template) */
.template-preview-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-btn);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 16px;
}

/* Live preview box */
.compose-preview-box {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-btn);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 16px;
  line-height: 1.5;
}

.compose-fields { margin-bottom: 4px; }
.compose-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.compose-error {
  color: var(--danger);
  font-size: 0.82rem;
  margin-top: 8px;
}

/* Message history */
.history-section { margin-top: 24px; }
.message-history-card { margin-bottom: 10px; }
.msg-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.msg-title { font-weight: 700; font-size: 0.9rem; }
.msg-time { font-size: 0.75rem; color: var(--text-muted); }
.msg-preview { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.4; }
.msg-status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-sent-time { font-size: 0.75rem; color: var(--text-muted); }
.btn-sm { font-size: 0.8rem; padding: 7px 12px; min-height: 34px; }