#connection-status{position:fixed;z-index:6;left:calc(24px + var(--safe-left));bottom:calc(12px + var(--safe-bottom));display:flex;align-items:center;gap:8px;max-width:calc(50vw - 70px);padding:7px 10px;border:1px solid var(--border);border-radius:12px;background:#fffffff0;color:var(--ink);pointer-events:none;font:12px/1.25 system-ui,-apple-system,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums}
#connection-status[hidden]{display:none}.connection-copy{display:flex;flex-direction:column;gap:2px;min-width:0}#connection-ping{white-space:nowrap;font-weight:600}#connection-warning{font-size:10px;line-height:1.2}.connection-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--muted)}.connection-alert{display:none;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.connection-alert circle{fill:currentColor;stroke:none}
#connection-status[data-quality=good] .connection-dot{background:var(--green)}#connection-status[data-quality=fair]{border-color:#f6c27a}#connection-status[data-quality=fair] .connection-dot{background:#f58d07}#connection-status[data-quality=poor],#connection-status[data-quality=offline]{color:var(--red);border-color:var(--red)}#connection-status[data-quality=poor] .connection-dot,#connection-status[data-quality=offline] .connection-dot{display:none}#connection-status[data-quality=poor] .connection-alert,#connection-status[data-quality=offline] .connection-alert{display:block}
body.touch #connection-status{left:calc(12px + var(--safe-left));bottom:calc(10px + var(--safe-bottom));max-width:calc(50vw - 65px);font-size:11px;padding:6px 8px;gap:6px}body.touch .connection-alert{width:17px;height:17px}