/* "Add Ln2CRM extension" breathes and glows while we have never seen the
   extension for this user (/auth/me extension_seen === false). account.js sets
   .cta-install--needed. Motion uses opacity + transform only. */
.cta-install.cta-install--needed {
  position: relative;
  isolation: isolate;
  background: #6d4aff;
  color: #fff;
  border-color: #6d4aff;
  animation: ln2-install-breathe 2.6s ease-in-out infinite;
}
.cta-install.cta-install--needed::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  box-shadow: 0 0 0 5px rgba(124, 92, 255, 0.22), 0 0 26px 8px rgba(124, 92, 255, 0.55);
  animation: ln2-install-aura 2.6s ease-in-out infinite;
}
.cta-install.cta-install--needed:hover { animation-play-state: paused; }
@keyframes ln2-install-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
@keyframes ln2-install-aura {
  0%, 100% { opacity: 0.35; transform: scale(0.98); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-install.cta-install--needed,
  .cta-install.cta-install--needed::before { animation: none; }
  .cta-install.cta-install--needed::before { opacity: 0.8; }
}

/* Row: hint on the left, button on the right (account header). */
.install-row { display: flex; align-items: flex-start; gap: 14px; }
.install-btn-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.install-hint { padding-top: 11px; }
.install-hint {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #4b2fd6;
  white-space: nowrap;
}
/* When the header wraps (the CTA drops under the title), line it up with
   the title on the left instead of floating it right. */
@media (max-width: 1240px) {
  .install-ext-wrap { align-items: flex-start; max-width: none; width: 100%; }
  .install-row { justify-content: flex-start; }
  .cta-install-sub { padding-right: 0; }
}
/* Phones: hint above, full width button. */
@media (max-width: 600px) {
  .install-row { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .install-hint { white-space: normal; font-size: 14px; padding-top: 0; }
  .install-btn-col { align-items: stretch; }
  .install-row .cta-install { justify-content: center; }
  .cta-install-sub { text-align: center; }
  .cta-install.cta-install--needed { animation-name: ln2-install-breathe-sm; }
}
@keyframes ln2-install-breathe-sm {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}