/* ==========================================================================
   WhatsApp settings (AI-1825): the connection as sections, its details as
   label/value pairs in two columns, and the debug output.
   ========================================================================== */

.wa-settings > * + * {
    margin-top: 16px;
}

.wa-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin: 0;
}

.wa-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wa-fact dt {
    color: var(--ui-text-2);
    font-size: 0.75rem;
}

.wa-fact dd {
    margin: 0;
    color: var(--ui-text);
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

.wa-fact dd.wa-fact__meta {
    color: var(--ui-text-2);
    font-size: 0.75rem;
}

.wa-break {
    overflow-wrap: anywhere;
}

.wa-debug {
    margin: 8px 0 0;
    padding: 12px;
    overflow: auto;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-bg-sunken);
    color: var(--ui-text);
    font-size: 0.75rem;
    white-space: pre-wrap;
}

.wa-templates-link {
    margin-top: 16px;
}

@media (max-width: 600px) {
    .wa-facts {
        grid-template-columns: minmax(0, 1fr);
    }
}