/* CSS Interface Unifiée V2 - Design simplifié */

/* Conteneurs principaux */
.vue-principale-unifiee {
  display: block;
  height: 100%;
  overflow-y: auto;
  padding: 8px;
}

.vue-detail-unifiee {
  display: none;
  flex-direction: column;
  height: 100%;
}

.vue-detail-unifiee[style*="flex"] {
  display: flex;
}

/* Header détail */
.detail-header {
  padding: 12px;
  border-bottom: 1px solid var(--bordure);
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-retour-detail {
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 18px;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.btn-retour-detail:hover {
  background: var(--hover-overlay);
}

.detail-titre {
  font-weight: 600;
  font-size: 16px;
  color: var(--texte-principal);
}

.detail-card {
  padding: 16px;
  border-bottom: 1px solid var(--bordure);
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-conversations-container {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.detail-conversations-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 8px;
}

.detail-conversations-titre {
  font-size: 12px;
  font-weight: 600;
  color: var(--texte-tertiaire);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-conversations-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Item unifié (IA, contact, conversation) */
.item-unifie {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 6px;
  background: var(--fond-secondaire);
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.item-unifie:hover {
  background: var(--hover-overlay);
  border-color: var(--accent);
}

/* Conversation actuellement sélectionnée */
.item-unifie.conversation-active {
  background: var(--accent-bg, rgba(99, 102, 241, 0.15));
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.item-unifie:hover .contact-actions {
  opacity: 1;
  visibility: visible;
}

/* Avatar IA - forme carrée */
.avatar-ia-carre {
  width: 44px;
  height: 44px;
  border-radius: 10px; /* Carré arrondi */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  letter-spacing: 1px;
}

/* Avatar humain - cercle */
.item-unifie .avatar-humain,
.avatar-humain {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: white !important;
  flex-shrink: 0;
  position: relative;
}

/* Avatar conversation */
.item-unifie .avatar-conversation,
.avatar-conversation {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white !important;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* Avatar assistant personnalisé */
.avatar-assistant {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Statut badge */
.statut-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--fond-principal);
}

.statut-en-ligne {
  background: #10b981;
}

.statut-absent {
  background: #f59e0b;
}

.statut-occupe {
  background: #ef4444;
}

.statut-hors-ligne {
  background: #6b7280;
}

/* Info item */
.item-info {
  flex: 1;
  min-width: 0;
}

.item-nom {
  font-weight: 600;
  font-size: 14px;
  color: var(--texte-principal);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-dernier-message {
  font-size: 12px;
  color: var(--texte-tertiaire);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge messages non lus */
.badge-non-lus {
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Actions contact (au survol) - en position absolute pour ne pas réduire l'espace du nom */
.contact-actions,
.conversation-actions {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  background: linear-gradient(90deg, transparent, var(--fond-secondaire) 30%, var(--fond-secondaire));
  padding: 4px 4px 4px 24px;
  border-radius: 8px;
  z-index: 10;
}

.item-unifie:hover .contact-actions,
.item-unifie:hover .conversation-actions {
  opacity: 1;
  visibility: visible;
}

/* Item conversation sans avatar (plus d'espace pour le texte) */
.item-info-conversation {
  flex: 1;
  min-width: 0;
  padding-right: 8px;
}

.item-info-conversation .item-dernier-message {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-info-conversation .item-dernier-message.est-resume {
  font-style: italic;
  color: var(--accent);
}

/* Bouton message - style distinct */
.btn-action-message {
  background: var(--accent) !important;
  color: white !important;
  border-color: var(--accent) !important;
}

.btn-action-message:hover {
  background: var(--accent-hover) !important;
}

/* Bouton générer résumé */
.btn-generer-resume {
  font-size: 10px;
}

/* Boutons d'action dans la sidebar uniquement */
.contact-actions .btn-action {
  background: transparent;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--texte-secondaire);
  transition: all 0.2s;
}

.contact-actions .btn-action:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Bouton danger (suppression) */
.btn-action.btn-danger:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
}

/* Section titre */
.section-titre {
  font-size: 11px;
  font-weight: 600;
  color: var(--texte-tertiaire);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 12px 8px;
  margin-top: 8px;
}

/* Section titre avec bouton */
.section-avec-bouton {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-avec-bouton .btn-nouvelle-conversation {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

/* Bouton nouvelle conversation */
.btn-nouvelle-conversation {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}

.btn-nouvelle-conversation:hover {
  transform: scale(1.1);
}

/* Liste vide */
.liste-vide {
  padding: 40px 20px;
  text-align: center;
  color: var(--texte-tertiaire);
  font-size: 13px;
}

/* ========================================
   CONTINUUM DE COULEURS (basé sur log)
   ======================================== */

/* Messages REÇUS - Vert → Gris */

/* < 5min : Vert vif pulsant */
.activite-recue-1 {
  border-left: 4px solid #10b981;
  animation: pulse-border 1.5s infinite;
}

@keyframes pulse-border {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
}

/* < 1h : Vert clair */
.activite-recue-2 {
  border-left: 4px solid #34d399;
}

/* < 24h : Vert pâle */
.activite-recue-3 {
  border-left: 4px solid #6ee7b7;
}

/* < 7j : Vert très pâle */
.activite-recue-4 {
  border-left: 4px solid #a7f3d0;
}

/* Messages ENVOYÉS - Bleu → Gris */

/* < 5min : Bleu vif */
.activite-envoyee-1 {
  border-left: 4px solid #3b82f6;
}

/* < 1h : Bleu clair */
.activite-envoyee-2 {
  border-left: 4px solid #60a5fa;
}

/* < 24h : Bleu pâle */
.activite-envoyee-3 {
  border-left: 4px solid #93c5fd;
}

/* < 7j : Bleu très pâle */
.activite-envoyee-4 {
  border-left: 4px solid #bfdbfe;
}

/* > 7j : Gris (commun aux deux) */
.activite-ancienne {
  border-left: 4px solid #d1d5db;
}

/* ========================================
   RESPONSIVE MOBILE
   ======================================== */

@media (max-width: 768px) {
  /* Bouton toggle TOUJOURS visible en haut à gauche */
  .btn-toggle-sidebar {
    position: fixed !important;
    top: 12px;
    left: 12px;
    z-index: 1001;
    background: var(--fond-principal) !important;
    box-shadow: var(--ombre-moyenne);
  }

  /* Sidebar repliée = cachée avec LEFT au lieu de TRANSFORM */
  /* (transform casse le position fixed des enfants) */
  .sidebar.repliee {
    left: -260px !important;
    width: 260px !important;
    transform: none !important; /* Pas de transform pour garder fixed qui fonctionne */
  }

  /* Item unifié plus compact */
  .item-unifie {
    padding: 8px 10px;
    margin-bottom: 4px;
    position: relative;
  }

  /* Avatars plus petits */
  .avatar-ia-carre,
  .avatar-humain,
  .avatar-conversation {
    width: 36px;
    height: 36px;
  }

  .avatar-ia-carre {
    font-size: 12px;
    border-radius: 8px;
  }

  .item-nom {
    font-size: 13px;
  }

  .item-dernier-message {
    font-size: 11px;
  }

  /* Mobile: ajustements boutons action */
  .contact-actions,
  .conversation-actions {
    right: 8px;
    padding: 4px 4px 4px 16px;
  }

  .item-unifie:active .contact-actions,
  .item-unifie:active .conversation-actions,
  .item-unifie:focus-within .contact-actions,
  .item-unifie:focus-within .conversation-actions {
    opacity: 1;
    visibility: visible;
  }

  /* Boutons d'action plus petits sur mobile */
  .contact-actions .btn-action,
  .conversation-actions .btn-action {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  /* Vues unifiées */
  .vue-principale-unifiee {
    padding: 4px;
  }

  .detail-conversations-container {
    padding: 4px;
  }

  .section-titre {
    padding: 8px 8px 6px;
    margin-top: 4px;
    font-size: 10px;
  }
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
  .item-unifie {
    background: var(--fond-secondaire, #2a2a2a);
    border-color: var(--bordure, #444);
  }

  .item-unifie:hover {
    background: var(--hover-overlay, #353535);
  }

  .item-nom {
    color: var(--texte-principal, #eee);
  }
}