/* Liste & conteneur des notifications */
.compilot-notifications-list {display: flex;flex-direction: column;gap: 15px; /* espace entre chaque notification */}

/* Style de base des notifications */
.compilot-notification-item {position: relative;background: var(--card-background-color, #fff);margin: 0 0 .5rem 0;padding: 1rem 2.5rem 1rem 1rem; /* espace pour le bouton croix */border-radius: 8px;box-shadow: 1px 1px 3px rgba(0,0,0,0.2);transition: transform 0.3s ease, opacity 0.3s ease;color:var(--color);}

/* 🔹 Nouveau : classe .important (remplace .urgent) */
.compilot-notification-item.important {border-left: 4px solid #cc0000;background: var(--notification-background-color);}

/* Titre et badge éventuel */
.compilot-notification-item h2 {margin: 0 0 5px;display: flex;align-items: start;justify-content: space-between;font-size: 18px;}

/* 🔹 Nouveau : lien sur le titre */
.compilot-notification-title a {text-decoration: none;color: var(--link-color);transition: color 0.2s ease;margin: 0 0 .5rem 0;}

.compilot-notification-title a:hover {color:var(--link-color-hover);}

/* Badge (priorité importante) */
.compilot-notification-item h2 span + span {color: #fff;background: #c00;padding: 2px 6px;border-radius: 3px;font-size: 12px;}

/* Métadonnées & contenu */
.compilot-notification-item .notification-dates {font-size: 13px;color: #555;margin-bottom: 10px;}

.compilot-notification-item .notification-content {font-size: 14px;line-height: 1.5;}

.compilot-notification-read-more {white-space: nowrap;font-weight: 500;margin-left: 4px;}

/* Bouton croix */
.compilot-notification-close {position: absolute;top: 0.5rem;right: 0.7rem;background: transparent;border: none;font-size: 18px;font-weight: bold;color: #666;cursor: pointer;line-height: 1;transition: color 0.2s ease;}

.compilot-notification-close:hover {color: #cc0000;}

/* Animation du compteur */
.counter-bump {animation: bump 0.3s ease;}

@keyframes bump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Boutons d’action (Tout fermer / Tout réactiver) */
.notification-actions {display: flex;justify-content: space-between;gap: 0.5rem;margin: 1rem 0;padding: 0.5rem 0;border-top: 1px solid #ddd;}
.notification-actions button {flex: 1; /* chaque bouton prend la même largeur */padding: 0.6rem 1rem;border: none;border-radius: 6px;font-size: 0.9rem;cursor: pointer;transition: background 0.2s ease, transform 0.1s ease;}

/* Style "Tout fermer" */
.notification-close-all {background: #f44336;color: #fff;}
.notification-close-all:hover {background: #d32f2f;transform: scale(1.03);}

/* Style "Tout réactiver" */
.notification-reset {background: #4caf50;color: #fff;}
.notification-reset:hover {background: #388e3c;transform: scale(1.03);}

/* Responsive */
@media (max-width: 768px) {
  .compilot-notification-item h2 {flex-direction: column;align-items: flex-start;}
  .compilot-notification-item h2 span + span {margin-top: 5px;}
}

@media (max-width: 600px) {
  .compilot-notification-item {font-size: 14px;padding: 0.8rem 2rem 0.8rem 0.8rem;}
  .compilot-notification-close {font-size: 16px;}
}

@media (max-width: 480px) {
  .notification-actions {flex-direction: column;}
  .notification-actions button {flex: none;width: 100%;}
}