.connection-banner {
  position: sticky;
  top: var(--safe-top);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  border: 1px solid #34415e;
  border-radius: 16px;
  background: #18233bf2;
  backdrop-filter: blur(12px);
}
.connection-caption { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.connection-caption strong { font-size: 0.8125rem; line-height: 1.35; }
.connection-caption small { color: var(--text-secondary); font-size: .8125rem; line-height: 1.45; overflow-wrap: anywhere; }
.connection-retry { flex-shrink: 0; background: #263554; color: var(--accent); border-radius: 10px; min-height: 44px; max-width: 90px; padding: 8px; font-size: .8125rem; font-weight: 600; }
.connection-banner[data-status=recovered] { border-color: #28654d; background: #183329f2; }
@media (prefers-reduced-transparency: reduce) { .connection-banner { backdrop-filter: none; background: #18233b; } }