.connection-banner {
  position: fixed; z-index: 10000; left: 16px; right: 16px; bottom: 80px;
  display: flex; align-items: center; gap: 16px; max-width: 900px;
  margin: auto; padding: 16px 20px; background: #fff4d9; color: #583d0c;
  border: 1px solid #d2a852; border-radius: 14px; box-shadow: 0 6px 30px #20352f20;
  font: 500 15px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-align: left;
}
.connection-banner[hidden] { display: none; }
.connection-banner[data-kind="success"] { background: #eaf5ec; color: #225936; border-color: #7fa58b; }
.connection-banner button { flex-shrink: 0; min-height: 44px; border: 1px solid currentColor; border-radius: 8px; background: white; color: inherit; padding: 8px 12px; cursor: pointer; font: inherit; }
@media (max-width: 600px) { .connection-banner { flex-direction: column; align-items: stretch; gap: 10px; font-size: 14px; padding: 14px; } }