.compose-card {
  width: min(860px, 94vw);
  min-height: min(660px, 88svh);
  display: flex;
  flex-direction: column;
}

.compose-header { padding: 22px 28px 18px; }
.compose-header .eyebrow { margin-bottom: 7px; color: var(--accent); }
.compose-header h2 { font-size: 28px; }

.compose-card .compose-fields {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: 10px 28px 0;
}

.compose-from,
.compose-line {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 14px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.compose-from > span,
.compose-line > label {
  flex: 0 0 54px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.compose-card .compose-from select,
.compose-card .compose-line input {
  min-width: 0;
  flex: 1;
  border: 0;
  padding: 10px 0;
  box-shadow: none;
}

.compose-option {
  border: 0;
  padding: 6px;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.compose-subject { border-bottom: 0; }
.compose-card .message-field { display: flex; min-height: 0; flex: 1; flex-direction: column; margin: 14px 0 0; }
.compose-card .message-field > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.compose-card .compose-fields textarea { min-height: 230px; flex: 1; margin-top: 9px; padding: 16px; border-radius: 10px; }
.compose-card .form-error { margin: 8px 0; }
.compose-card footer { margin-top: auto; padding: 15px 28px; }

@media (max-width: 680px) {
  .compose-card { min-height: 100svh; }
  .compose-header, .compose-card .compose-fields, .compose-card footer { padding-inline: 20px; }
  .compose-card .compose-fields textarea { min-height: 34vh; }
}