/* Pulse animation for the sidebar AI Actions badge.
   Triggered when the unread count increases (new pending proposal). */

@keyframes nav-badge-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

/* Respect prefers-reduced-motion (WCAG 2.3.3). Pattern from
   frontend/src/index.css:117-121. */
@media (prefers-reduced-motion: no-preference) {
  .nav-badge-pulse {
    animation: nav-badge-pulse 1000ms ease-out;
    transform-origin: center;
  }
}
.dashboard-input-wrapper {
  transition: box-shadow 300ms;
  position: relative;
  isolation: isolate;
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  overflow: visible;

  /* kill tailwind ring tint completely */
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

.dashboard-input-wrapper:focus-within {
  box-shadow: 0px 1px 12px 0
    color-mix(in srgb, var(--color-brand-600) 24%, transparent);
}

/* No border by default */
.dashboard-input-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0;
  pointer-events: none;
  z-index: 1;
}

/* Add the gradient border ONLY on focus */
.dashboard-input-wrapper:focus-within::before {
  padding: 1px;
  background: linear-gradient(
    90deg,
    var(--color-gray-400) 0%,
    color-mix(in srgb, var(--color-brand-600) 65%, transparent) 80%,
    color-mix(in srgb, var(--color-brand-600) 85%, transparent) 90%,
    var(--color-brand-600) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.dashboard-input-wrapper:focus-within::after {
  opacity: 1;
}

/* ensure input + button sit above border stroke */
.dashboard-input-wrapper > * {
  position: relative;
  z-index: 2;
}

/* Dashboard panels fade-in on mount */
@keyframes dashboard-panels-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard-panels-enter {
  animation: dashboard-panels-enter 400ms ease-out both;
}

/* Email preview content - renders HTML emails in a clean, constrained style */
.email-preview-content {
  /* Reset common email HTML styles */
  font-family: inherit;
  font-size: 11px;
  line-height: 1.4;
  color: inherit;
}

.email-preview-content p {
  margin: 0 0 0.5em 0;
}

.email-preview-content p:last-child {
  margin-bottom: 0;
}

.email-preview-content br {
  display: block;
  content: '';
  margin-top: 0.25em;
}

.email-preview-content a {
  color: var(--color-brand-600);
  text-decoration: underline;
}

.email-preview-content strong,
.email-preview-content b {
  font-weight: 600;
}

.email-preview-content em,
.email-preview-content i {
  font-style: italic;
}

.email-preview-content ul,
.email-preview-content ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.email-preview-content li {
  margin: 0.25em 0;
}

/* Constrain images in email previews */
.email-preview-content img {
  max-width: 100%;
  height: auto;
}

/* Hide common email tracking pixels (true 1x1 images only) */
.email-preview-content img[width='1'][height='1'] {
  display: none;
}
/* New proposal entrance animation:
   1. Slide down + fade in simultaneously
   2. Icon pops/bounces after slide completes */

@keyframes proposal-slide-in {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes proposal-icon-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

.proposal-enter {
  animation: proposal-slide-in 400ms ease-out forwards;
}

.proposal-enter .proposal-icon {
  animation: proposal-icon-pop 300ms ease-out 400ms both;
}

/* Route-level page enter — a subtle fade/rise when navigating between the
   actions list, the action detail page, and the agent feed. */
@media (prefers-reduced-motion: no-preference) {
  .page-enter {
    animation: page-enter 180ms ease-out;
  }

  @keyframes page-enter {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}
/* Decorative ring-buoy background artwork: serves the compressed WebP where
   supported, falling back to the PNG (see FP3 — 601KB PNG optimization). */
.ring-buoy-patent-bg {
  background-image: image-set(url('/assets/self-service/img/ring-buoy-patent.webp') type('image/webp'), url('/assets/self-service/img/ring-buoy-patent.png') type('image/png'));
}