/* Shared by sign-in, email confirmation and the workspace. */
.app-connection-banner {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid #e9b9bc;
  background: #fff0f1;
  color: #842c34;
  font: 14px/1.5 var(--ui-font, Arial, sans-serif);
}
.app-connection-banner p { margin: 0; max-width: 75ch; color: inherit; font: inherit; }
.app-connection-banner strong { font-weight: 700; }
.app-connection-banner button {
  flex-shrink: 0;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.app-connection-banner button:hover { background: #842c3410; }
.app-connection-banner button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.app-connection-banner button:disabled { opacity: .65; cursor: wait; }
:root[data-workspace-theme=dark] .app-connection-banner { background: #391f24; color: #ffb8c0; border-color: #743f48; }
:root[data-workspace-theme=dark] .app-connection-banner button:hover { background: #ffb8c012; }
@media (max-width: 600px) {
  .app-connection-banner { gap: 12px; padding: 10px 12px; }
  .app-connection-banner button { min-height: 44px; }
}