/* =============================================================================
   Unified attachments — dropzone + chips + lightbox
   Used by shared--file-upload / shared--lightbox across PM, mail, CRM, admin.
   Token-only values (var(--accent) etc.) so brand + dark theme just work.
   Chip/lightbox visuals live in Tailwind utility strings inside the JS
   controllers; this file owns the brand states utilities can't express
   (token-driven accent on hover/drag) + motion.
   ============================================================================= */

.te-dropzone {
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.te-dropzone:hover {
  border-color: var(--color-accent);
}

.te-dropzone:hover .te-dropzone__icon {
  color: var(--color-accent);
  transform: translateY(-2px);
}

.te-dropzone:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Drag-active — toggled by shared--file-upload#_setActive */
.te-dropzone--active {
  border-color: var(--color-accent);
  background-color: color-mix(in oklch, var(--color-accent) 12%, transparent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-accent) 18%, transparent);
}

.te-dropzone--active .te-dropzone__icon {
  color: var(--color-accent);
  transform: scale(1.06);
}

.te-dropzone__icon {
  transition: color 0.2s ease, transform 0.2s ease;
}

/* Chip enter animation (respects reduced-motion) */
.te-attach-chip {
  animation: te-attach-in 0.18s ease-out;
}

@keyframes te-attach-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Server-rendered image card hover lift */
.te-attach-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.te-attach-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft, 0 4px 20px -4px rgba(0, 0, 0, 0.15));
}

.te-attach-card__img {
  transition: transform 0.3s ease;
}

.te-attach-card:hover .te-attach-card__img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .te-attach-chip,
  .te-attach-card,
  .te-attach-card__img,
  .te-dropzone__icon,
  .te-lightbox,
  .te-lightbox__img {
    animation: none !important;
    transition: none !important;
  }
}