/* Connection details are available on demand; the work remains the focus. */
.writing-setup{display:none!important}
.connection-status{position:fixed;right:18px;bottom:14px;z-index:1100;color:#5a6579;font-family:var(--font-mono);font-size:11px;line-height:1.5;max-width:calc(100vw - 28px)}
.connection-status details{position:relative}
.connection-status summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:30px;padding:7px 11px;border:1px solid #dce1e9;border-radius:7px;background:#ffffffed;box-shadow:0 2px 9px #17223b08;cursor:pointer;user-select:none}
.connection-status summary::-webkit-details-marker{display:none}
.connection-status summary:focus-visible,.connection-status button:focus-visible{outline:2px solid #485aff;outline-offset:3px}
.connection-status summary img{display:block;width:38px;height:auto;opacity:.72}
.connection-status-dot{width:5px;height:5px;border-radius:50%;background:#8a95a7;flex-shrink:0}
.connection-status[data-state=verified] .connection-status-dot{background:#546be3}
.connection-status[data-state=error] .connection-status-dot,.connection-status[data-state=unavailable] .connection-status-dot{background:#a8786e}
.connection-status-caret{color:#9da6b8;font:12px/1 sans-serif;margin-left:1px;transform:translateY(2px)}
.connection-status details[open] .connection-status-caret{transform:rotate(180deg) translateY(1px)}
.connection-status-panel{position:absolute;bottom:calc(100% + 8px);right:0;width:286px;max-width:calc(100vw - 28px);padding:18px;background:#fff;border:1px solid #dce1e9;border-radius:10px;box-shadow:0 8px 35px #15234216;box-sizing:border-box;font:12px/1.65 var(--font-sans);color:#758197}
.connection-status-panel strong{font-weight:550;color:#253149;font-size:13px}
.connection-status-panel p{margin:8px 0 14px}
.connection-status-panel button{width:100%;display:flex;align-items:center;justify-content:space-between;border:1px solid #dfe3ed;border-radius:5px;background:#f8f9fc;color:#405acd;padding:9px 11px;font:11px var(--font-mono);cursor:pointer}
.connection-status-panel button:disabled{color:#8c96a8;cursor:default}
@media(max-width:700px){.connection-status{right:12px;bottom:max(10px,env(safe-area-inset-bottom))}.connection-status summary{font-size:11px;min-height:30px;padding:6px 9px}.connection-status summary img{width:32px}}
/* V6.7.3 phone width: a healthy connection needs no badge over the controls at
   the bottom of a small screen. Any problem state still shows it. */
@media(max-width:700px){.connection-status[data-state=ready],.connection-status[data-state=verified]{display:none}}