/* PWA update UI is rendered inside the mobile navigation menu. */

.flowmo-connectivity-notice {
  position: fixed;
  z-index: 2147483000;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(560px, calc(100vw - 24px));
  min-height: 54px;
  padding: 10px 12px;
  color: #162238;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #cfe2df;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(29, 50, 64, 0.18);
  transform: translateX(-50%);
}

.flowmo-connectivity-notice[hidden] {
  display: none !important;
}

.flowmo-connectivity-indicator {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border: 2px solid #9ccfc8;
  border-top-color: #0f8f83;
  border-radius: 50%;
}

.flowmo-connectivity-notice[data-state="offline"] .flowmo-connectivity-indicator,
.flowmo-connectivity-notice[data-state="unavailable"] .flowmo-connectivity-indicator {
  border-color: #f2a74b;
  background: #fff3df;
}

.flowmo-connectivity-notice[data-state="checking"] .flowmo-connectivity-indicator {
  animation: flowmo-connectivity-spin 0.8s linear infinite;
}

.flowmo-connectivity-notice[data-state="restored"] .flowmo-connectivity-indicator {
  border-color: #13a58f;
  background: #13a58f;
}

.flowmo-connectivity-copy {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
}

.flowmo-connectivity-copy strong,
.flowmo-connectivity-copy small {
  overflow-wrap: anywhere;
  letter-spacing: 0;
}

.flowmo-connectivity-copy strong {
  font-size: 13px;
  line-height: 1.25;
}

.flowmo-connectivity-copy small {
  color: #607087;
  font-size: 11px;
  line-height: 1.35;
}

.flowmo-connectivity-notice button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 10px;
  color: #087f74;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  background: #effbf9;
  border: 1px solid #85d8cf;
  border-radius: 7px;
  cursor: pointer;
}

.flowmo-connectivity-notice button:disabled {
  cursor: wait;
  opacity: 0.65;
}

@keyframes flowmo-connectivity-spin {
  to { transform: rotate(360deg); }
}