/* dashboard-support-compose.css */
/* ADMIN ONLY (2026-09-13) — the "New message" composer in the support
   center. Companion to dashboard-support-compose.js. Reuses the support
   center's input look (dashboard-support.css .sup-search) so it reads as
   part of the same block. */

.sc-card{
  margin-top:14px;padding:16px 18px 14px;border:1px solid var(--line-2);
  border-radius:14px;background:#0C1119;
}
.sc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sc-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sc-grid .sc-full{grid-column:1 / -1}
.sc-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.sc-field label{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.sc-input,.sc-select,.sc-text{
  width:100%;min-width:0;background:#0B0F16;border:1px solid var(--line-2);border-radius:11px;
  padding:10px 14px;color:var(--ink);font-family:var(--sans);font-size:14px;
  transition:border-color .16s var(--ease);
}
.sc-input:focus,.sc-select:focus,.sc-text:focus{outline:none;border-color:var(--red-2)}
.sc-input::placeholder,.sc-text::placeholder{color:#4A5566}
.sc-text{min-height:260px;line-height:1.55;resize:vertical}
.sc-select{appearance:auto}
.sc-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.sc-actions .sc-status{flex:1 1 200px;min-width:0}
.sc-confirm{
  margin-top:12px;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(232,67,31,.35);background:rgba(232,67,31,.07);
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.sc-confirm-text{font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.sc-confirm-actions{display:flex;gap:8px}
.sc-hint{margin:8px 0 0;font-size:12px;color:var(--faint)}
@media (max-width:640px){ .sc-grid{grid-template-columns:1fr} }