.dpfm-interactive-root { display: contents; }
.dpfm-connection-status {
    position: fixed;
    z-index: 1100;
    right: 1rem;
    bottom: 1rem;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
    padding: .5rem .75rem;
    border-radius: 6px;
    background: var(--dpfm-background);
    color: var(--dpfm-text);
    font-size: .875rem;
}
.dpfm-connection-status[hidden], .dpfm-connection-status [hidden] { display: none !important; }
.dpfm-connection-status button { margin-left: .5rem; }
:root[data-theme="dark"] .dpfm-connection-status {
    background: var(--dpfm-dark-surface);
    color: var(--dpfm-dark-text);
}

.dpfm-reconnect {
    box-sizing: border-box;
    width: min(38rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    padding: 1.5rem;
    border: 1px solid var(--dpfm-border);
    border-radius: 12px;
    background: var(--dpfm-background);
    color: var(--dpfm-text);
}

.dpfm-reconnect::backdrop { background: rgb(0 0 0 / 55%); }
.dpfm-circuit-error { display: none; padding: 1rem; border: 1px solid var(--dpfm-red); }
.dpfm-reconnect-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; }
.dpfm-reconnect [hidden] { display: none !important; }
.dpfm-reconnect textarea { box-sizing: border-box; width: 100%; resize: vertical; }

:root[data-theme="dark"] .dpfm-reconnect,
:root[data-theme="dark"] .dpfm-reconnect textarea {
    background: var(--dpfm-dark-surface);
    color: var(--dpfm-dark-text);
    border-color: var(--dpfm-dark-border);
}