/* ShareCardLink App experience - full-screen prompts */
html.scl-app-locked, html.scl-app-locked body { overflow: hidden !important; }

#scl-app-screen {
  position: fixed; inset: 0; z-index: 2147483647;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(6, 18, 28, .55);          /* page stays visible behind the popup */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: scl-app-fade .25s ease-out;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
#scl-app-screen * { box-sizing: border-box; }

.scl-app-card {
  animation: scl-app-pop .3s ease-out;
  width: 100%; max-width: 380px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: #fff; color: #10212b;
  border-radius: 20px; padding: 28px 22px 22px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.scl-app-logo { width: 72px; height: 72px; display: block; margin: 0 auto 14px; }
.scl-app-card h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.3; font-weight: 700; color: #10212b; }
.scl-app-card p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: #44545e; }

.scl-app-btn {
  display: block; width: 100%;
  padding: 15px 18px; border: 0; border-radius: 12px;
  background: #00a0e3; color: #fff !important; text-decoration: none !important;
  font-size: 17px; font-weight: 700; line-height: 1.2; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 160, 227, .35);
}
.scl-app-btn:active { transform: scale(.98); }
.scl-app-btn:disabled { opacity: .7; }

.scl-app-link { display: inline-block; margin-top: 14px; font-size: 14px; color: #0077b6 !important; text-decoration: underline; }

.scl-app-steps {
  margin-top: 16px; padding: 14px; border-radius: 12px;
  background: #f1f8fc; text-align: left; font-size: 14px; line-height: 1.5; color: #10212b;
}
.scl-app-steps[hidden] { display: none; }
.scl-app-steps ol { margin: 8px 0 0; padding-left: 20px; }
.scl-app-steps li { margin-bottom: 4px; }

.scl-app-perms { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; }
.scl-app-perms li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 8px;
  border-radius: 10px; background: #f1f8fc; font-size: 15px; line-height: 1.35;
}
.scl-app-perms li span { font-size: 20px; flex: 0 0 auto; }
.scl-app-note { margin: 12px 0 0 !important; font-size: 13px !important; color: #6b7a83 !important; }

@keyframes scl-app-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scl-app-pop  { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.scl-app-out { display: block; margin-top: 16px; padding-top: 12px; border-top: 1px solid #e6eef3; font-size: 13px; color: #6b7a83 !important; text-decoration: none !important; }
.scl-app-out:hover { color: #c0392b !important; }
/* Chrome's "Open in app" button, drawn the same way, and an arrow pointing at it */
.scl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 4px; margin: 0 2px; border-radius: 999px; background: #e3edfb; color: #0b57d0; font-weight: 600; font-size: 14px; white-space: nowrap; vertical-align: middle; line-height: 1.4; }
.scl-chip img { width: 18px; height: 18px; border-radius: 50%; display: block; margin: 0; }
#scl-app-arrow { position: fixed; top: 6px; right: 30%; z-index: 2147483647; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
#scl-app-arrow i { font-style: normal; font-size: 40px; line-height: 1; color: #ffd166; text-shadow: 0 2px 10px rgba(0,0,0,.6); animation: scl-arrow-up 1s ease-in-out infinite; }
#scl-app-arrow > span { background: #fff; color: #10212b; padding: 8px 12px; border-radius: 12px; font-size: 14px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
#scl-app-arrow.go > span { animation: scl-arrow-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes scl-arrow-up { 50% { transform: translateY(-8px); } }
@keyframes scl-arrow-pop { from { transform: scale(.7); opacity: 0; } }