/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@keyframes attention-megaphone-shake {
  0%,
  9%,
  100% {
    transform: rotate(0deg) scale(1);
  }

  1% {
    transform: rotate(-10deg) scale(1.05);
  }

  2% {
    transform: rotate(8deg) scale(1.05);
  }

  3% {
    transform: rotate(-7deg) scale(1.04);
  }

  4% {
    transform: rotate(5deg) scale(1.03);
  }

  5% {
    transform: rotate(-3deg) scale(1.02);
  }

  6% {
    transform: rotate(2deg) scale(1.01);
  }

  7% {
    transform: rotate(-1deg) scale(1.01);
  }

  8% {
    transform: rotate(0.5deg) scale(1.01);
  }
}

.attention-megaphone {
  animation: attention-megaphone-shake 10s ease-in-out infinite;
  transform-origin: center;
}

/* Tiptap editor */
.tiptap {
  outline: none;
}

.tiptap p.is-editor-empty:first-child::before {
  color: oklch(var(--bc) / 0.3);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

/* Raise feedback widget above mobile dock (family layout only) */
@media (max-width: 767px) {
  body:has(.dock) #kaktus-feedback-widget {
    bottom: 5rem;
  }
}

/* Onboarding photo area fixed height to prevent layout shift */
.onboarding-photo-area {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}