.teq-connection-status[hidden],
.teq-connection-status button[hidden] {
    display: none !important;
}

.teq-connection-status {
    position: fixed;
    z-index: 2147483647;
    inset: auto 16px max(16px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 760px;
    margin-inline: auto;
    padding: 14px 18px;
    border: 1px solid #c7d3df;
    border-radius: 10px;
    background: #f8fafc;
    color: #25384a;
    box-shadow: 0 4px 20px #0003;
    font: 400 14px/1.5 system-ui, sans-serif;
}

.teq-connection-status p { margin: 0; flex: 1; }
.teq-connection-indicator {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #9c6800;
}
.teq-connection-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.teq-connection-status button {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #74879b;
    border-radius: 6px;
    background: #fff;
    color: #25384a;
    font: inherit;
    cursor: pointer;
}
.teq-connection-status button:hover { background: #e8eef5; }
.teq-connection-status button:focus-visible { outline: 3px solid #2563a6; outline-offset: 2px; }
.teq-connection-status button:disabled { opacity: .6; cursor: wait; }
@media (max-width: 560px) {
    .teq-connection-status { inset-inline: 8px; flex-wrap: wrap; padding: 12px; }
    .teq-connection-actions { margin-left: 21px; }
}