/**
 * White Screen Error Fallback - Mobile-first
 *
 * Two layouts share the same card shell:
 *   .ws-card             — generic error
 *   .ws-card.ws-card--friendly — in-app browser "Quase lá!" guidance
 *
 * Brand colors:
 *   Primary: #5260ff (Social Sport blue)
 *   Success: #69bb7b
 *   Surface: #f8f8fb
 */

/* ---------- Overlay ---------- */

#white-screen-error {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  min-height: -webkit-fill-available;
  background: #f8f8fb;
  z-index: 99999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  color: #1a1a2e;
  padding: 1rem;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
}

#white-screen-error.show {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@supports (padding: max(0px)) {
  #white-screen-error {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
}

/* ---------- Card ---------- */

.ws-card {
  width: 100%;
  max-width: 28rem;
  text-align: center;
  background: #fff;
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
  margin: auto;
  box-shadow: 0 8px 32px rgba(82, 96, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  animation: ws-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  .ws-card { padding: 2.5rem 2rem; }
}

@keyframes ws-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Logo ---------- */

.ws-logo {
  width: 132px;
  max-width: 50%;
  height: auto;
  margin: 0 auto 1rem;
  display: block;
}

/* ---------- Friendly variant: rocket + title ---------- */

.ws-rocket {
  font-size: 3rem;
  line-height: 1;
  margin: 0.5rem 0 1rem;
  animation: ws-rocket-float 2.4s ease-in-out infinite;
}

@keyframes ws-rocket-float {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-6px) rotate(0deg); }
}

.ws-title {
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 800;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.02em;
  color: #1a1a2e;
}

.ws-subtitle {
  font-size: clamp(0.9375rem, 3.5vw, 1.0625rem);
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
  color: #5a5a7a;
}
.ws-subtitle strong { color: #1a1a2e; font-weight: 700; }

/* ---------- URL display ---------- */

.ws-url {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.875rem 1rem;
  margin: 0 0 1rem 0;
  background: #f4f5fa;
  border: 1px solid #e2e4f0;
  border-radius: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  color: #1a1a2e;
  text-align: center;
  word-break: break-all;
  line-height: 1.4;
  user-select: all;
  -webkit-user-select: all;
}

/* ---------- Steps ---------- */

.ws-steps {
  list-style: none;
  margin: 1.25rem 0 0 0;
  padding: 1.25rem 1rem;
  background: linear-gradient(135deg, #f0f2ff 0%, #f8f8fb 100%);
  border-radius: 1rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.ws-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #1a1a2e;
}

.ws-step__num {
  flex: 0 0 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #5260ff;
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ws-step__text { padding-top: 0.125rem; }
.ws-step__text strong { color: #5260ff; font-weight: 700; }

.ws-dots {
  display: inline-block;
  padding: 0 0.4rem;
  margin: 0 0.125rem;
  background: #5260ff;
  color: #fff;
  border-radius: 0.375rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ---------- Buttons ---------- */

.ws-btn {
  appearance: none;
  border: 0;
  width: 100%;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.ws-btn + .ws-btn { margin-top: 0.625rem; }
.ws-btn:active { transform: scale(0.98); }

.ws-btn--primary {
  background: #5260ff;
  color: #fff;
  box-shadow: 0 4px 16px rgba(82, 96, 255, 0.3);
}
@media (hover: hover) {
  .ws-btn--primary:hover { background: #6370ff; box-shadow: 0 6px 20px rgba(82, 96, 255, 0.4); }
}

.ws-btn--lg {
  padding: 1.125rem 1.25rem;
  font-size: 1.0625rem;
}

.ws-btn--copied {
  background: #69bb7b !important;
  box-shadow: 0 4px 16px rgba(105, 187, 123, 0.3) !important;
}

.ws-btn--ghost {
  background: transparent;
  color: #5260ff;
  border: 1.5px solid #dee2f7;
  font-weight: 600;
}
@media (hover: hover) {
  .ws-btn--ghost:hover { background: rgba(82, 96, 255, 0.06); border-color: #5260ff; }
}

.ws-btn__icon { font-size: 1.125rem; line-height: 1; }
.ws-btn__label { line-height: 1.2; }

.ws-hint {
  margin: 0.5rem 0 1rem 0;
  font-size: 0.8125rem;
  color: #8a8aa8;
  text-align: center;
}

/* ---------- Success banner (after copy) ---------- */

.ws-banner {
  margin: 0.75rem 0 0 0;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-align: left;
  animation: ws-banner-in 0.3s ease-out;
}
.ws-banner--success {
  background: #eaf8ee;
  color: #2d6e3e;
  border: 1px solid #c5e9cf;
}
.ws-banner strong { font-weight: 700; }

@keyframes ws-banner-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Fallback (menu ⋯) details ---------- */

.ws-fallback {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  text-align: left;
}
.ws-fallback summary {
  cursor: pointer;
  color: #5260ff;
  font-weight: 600;
  list-style: none;
  padding: 0.5rem 0;
  text-align: center;
}
.ws-fallback summary::-webkit-details-marker { display: none; }
.ws-fallback summary::after {
  content: ' ›';
  display: inline-block;
  transition: transform 0.2s ease;
}
.ws-fallback[open] summary::after { transform: rotate(90deg); }
.ws-fallback__text {
  margin: 0.5rem 0 0 0;
  padding: 0.75rem 0.875rem;
  background: #f4f5fa;
  border-radius: 0.625rem;
  color: #5a5a7a;
  line-height: 1.5;
}
.ws-fallback__text strong { color: #1a1a2e; }

/* ---------- Generic-error extras ---------- */

.ws-link {
  appearance: none;
  background: transparent;
  border: 0;
  color: #8a8aa8;
  font-size: 0.8125rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.5rem;
  margin-top: 0.5rem;
}
.ws-link:active { color: #5260ff; }

.ws-details {
  margin-top: 1rem;
  padding: 0.875rem;
  background: #f8f8fb;
  border-radius: 0.75rem;
  border: 1px solid #e7e7f0;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 12rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: #5a5a7a;
}

/* ---------- Spinner ---------- */

.ws-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  border-top-color: #fff;
  animation: ws-spin 0.8s linear infinite;
  vertical-align: -2px;
  margin-right: 0.375rem;
}

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