/**
 * Notification Badge Responsive Styles
 * Ensures optimal display across all device sizes
 */

/* Base notification badge styles */
#unread-badge,
#thread-notification-badge,
[id^="thread-notification-badge-"] {
  min-width: 1.4rem !important;
  height: 1.4rem !important;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border: 2px solid white;
  top: -6px !important;
  right: -6px !important;
  z-index: 10 !important;
  padding: 0 !important;
}

/* Only show as flex when visible */
#unread-badge:not([style*="display: none"]),
#thread-notification-badge:not([style*="display: none"]),
[id^="thread-notification-badge-"]:not([style*="display: none"]) {
  display: flex !important;
}

/* Responsive adjustments for different screen sizes */
@media (max-width: 576px) {
  /* Mobile phones */
  #unread-badge,
  #thread-notification-badge,
  [id^="thread-notification-badge-"] {
    font-size: 0.75rem !important;
    padding: 0.35em 0.55em !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    right: -10px !important;
    top: -4px !important;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Tablets */
  #unread-badge,
  #thread-notification-badge,
  [id^="thread-notification-badge-"] {
    font-size: 0.8rem !important;
    padding: 0.38em 0.58em !important;
    min-width: 1.6rem !important;
    height: 1.6rem !important;
    right: -12px !important;
    top: -5px !important;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  /* Small desktops */
  #unread-badge,
  #thread-notification-badge,
  [id^="thread-notification-badge-"] {
    font-size: 0.8rem !important;
    padding: 0.35em 0.55em !important;
    min-width: 1.4rem !important;
    height: 1.4rem !important;
    right: -12px !important;
    top: -4px !important;
  }
}

@media (min-width: 993px) {
  /* Large desktops */
  #unread-badge,
  #thread-notification-badge,
  [id^="thread-notification-badge-"] {
    font-size: 0.85rem !important;
    padding: 0.38em 0.58em !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    right: -14px !important;
    top: -5px !important;
  }
}

/* Hover effect for better user interaction */
#userDropdown:hover #unread-badge,
#myThreadsBtn:hover #thread-notification-badge,
.thread-item:hover [id^="thread-notification-badge-"] {
  transform: scale(1.1);
  transition: transform 0.2s ease-in-out;
}

/* Animation for new notifications */
@keyframes badge-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

#unread-badge.new-notification,
#thread-notification-badge.new-notification,
[id^="thread-notification-badge-"].new-notification {
  animation: badge-pulse 0.6s ease-in-out;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  #unread-badge,
  #thread-notification-badge,
  [id^="thread-notification-badge-"] {
    border-width: 3px;
    font-weight: 900;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  #unread-badge,
  #thread-notification-badge,
  [id^="thread-notification-badge-"],
  #userDropdown:hover #unread-badge,
  #myThreadsBtn:hover #thread-notification-badge,
  .thread-item:hover [id^="thread-notification-badge-"] {
    transition: none;
    animation: none;
  }
}