/* TempMail custom styles (beyond Tailwind utilities) */

/* ---------- FAQ chevron rotation ---------- */
.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* ---------- Toast ---------- */
.toast {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.125rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.25);
  animation: toast-in 200ms ease-out both;
  pointer-events: auto;
}

.toast--success { background: #059669; }
.toast--error   { background: #DC2626; }
.toast--info    { background: #4F46E5; }

.toast.is-leaving {
  animation: toast-out 140ms ease-in both;
}

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

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(0.96); }
}

/* ---------- New message entrance ---------- */
.msg-enter {
  animation: msg-in 250ms ease-out both;
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Refresh icon spin (only while loading) ---------- */
.is-spinning {
  animation: spin 800ms linear infinite;
}

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

/* ---------- Message list item states ---------- */
.msg-item {
  transition: background-color 150ms ease-out;
}

.msg-item:focus-visible {
  outline: 2px solid #6366F1;
  outline-offset: -2px;
}

/* ---------- Inbox scrollbar ---------- */
#message-list::-webkit-scrollbar {
  width: 8px;
}

#message-list::-webkit-scrollbar-thumb {
  background: rgb(148 163 184 / 0.4);
  border-radius: 4px;
}

#message-list::-webkit-scrollbar-thumb:hover {
  background: rgb(148 163 184 / 0.7);
}

/* ---------- Detail iframe ---------- */
#detail-body {
  border: 0;
  display: block;
}

/* ---------- Skeleton shimmer for address loading ---------- */
@keyframes shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .toast,
  .msg-enter {
    animation: none;
  }
}