/* WhatsApp settings use Forma's existing panels and controls. */
.wa-settings { display: grid; gap: 24px; min-width: 0; }
.wa-settings .panel { min-width: 0; margin: 0; padding: 24px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.wa-settings .panel > p { margin-top: 4px; color: var(--muted); }
.wa-settings h2 { font-size: 18px; line-height: 1.4; }
.wa-settings h3 { margin-top: 12px; font-size: 16px; }
.wa-settings h3 + p { margin-top: 4px; }
.wa-settings .note { margin-top: 16px; }
.wa-settings form { margin-top: 16px; }
.wa-settings .form-grid { gap: 16px; }
.wa-settings .row.wrap { flex-wrap: wrap; gap: 8px; }
.wa-settings .wa-actions { margin-top: 12px; }
.wa-settings .wa-submit { margin-top: 16px; }
.wa-settings .wa-confirm { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; }
.wa-settings .wa-confirm input { flex: 0 0 auto; margin-top: 4px; }
.wa-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.wa-heading > div { flex: 1 1 240px; min-width: 0; }
.wa-heading h2 { font-size: 24px; margin: 0; }
.wa-heading p { margin-top: 4px; color: var(--muted); }
.wa-brand { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 8px; background: #e8f5ee; color: #16774b; }
.wa-brand svg { width: 28px; height: 28px; }
.wa-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.wa-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.wa-status.is-connected { color: #16774b; }
.wa-account { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 16px 0; border-top: 1px solid var(--line); }
.wa-account > div { min-width: 0; }
.wa-account h3 { margin: 0; }
.wa-account p { margin-top: 4px; color: var(--muted); max-width: 560px; }
.wa-account-number { display: grid; gap: 4px; }
.wa-account-number strong { font-size: 18px; }
.wa-account-number span, .wa-account-number small { color: var(--muted); }
.wa-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wa-count { color: var(--muted); font-size: 12px; }
.wa-settings .wa-footnote { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font-size: 12px; color: var(--muted); }
.wa-footnote svg { flex: 0 0 16px; width: 16px; height: 16px; }
.wa-settings .wa-feedback { margin-top: 16px; padding: 12px 16px; border-left: 2px solid var(--line); font-size: 13px; background: var(--canvas); }
.wa-empty { padding: 16px 0; color: var(--muted); font-size: 13px; }
.wa-records { margin-top: 16px; }
.wa-record { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.wa-record > div:first-child { min-width: 0; flex: 1 1 240px; }
.wa-settings p, .wa-settings small, .wa-record strong { overflow-wrap: anywhere; }
.wa-record p { margin-top: 4px; }
.wa-record .row.wrap { margin-top: 12px; }
.wa-settings .setting-row { gap: 12px; }
.wa-settings .setting-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.wa-settings .btn { letter-spacing: 0; }
.wa-settings h2, .wa-settings h3 { letter-spacing: 0; }
.wa-settings textarea { resize: vertical; }
.wa-settings input:not([type="checkbox"]), .wa-settings select, .wa-settings textarea { max-width: 100%; min-width: 0; }
@media (max-width: 700px) {
    .wa-heading { gap: 12px; }
    .wa-status { margin-left: 0; }
    .wa-account { gap: 16px; }
    .wa-settings input:not([type="checkbox"]), .wa-settings select, .wa-settings textarea { font-size: 16px; }
    .wa-settings .form-grid { grid-template-columns: minmax(0, 1fr); }
    .wa-settings .field.wide { grid-column: auto; }
    .wa-settings .section-title { flex-wrap: wrap; gap: 8px; }
}