/**
 * Styles pour le toggle entre historique et éléments mémorisés dans Ped'IA
 */

/* Bouton toggle mémoire dans le titre */
.memory-toggle-btn {
  background: none;
  border: none;
  padding: 6px;
  margin-left: 8px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  vertical-align: middle;
  line-height: 1;
}

.memory-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.15) rotate(45deg);
}

.memory-toggle-btn:active {
  transform: scale(0.95);
}

/* Conteneur des éléments mémorisés */
.memory-items-container {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  animation: fadeIn 0.3s ease-out;
}

.memory-items-list-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Groupe de catégorie */
.memory-category-group {
  margin-bottom: 12px;
}

.memory-category-title {
  color: var(--text, #fff);
  margin: 0 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.95em;
  font-weight: 600;
}

/* Item mémorisé */
.memory-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
  animation: slideInUp 0.3s ease-out backwards;
}

.memory-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateX(2px);
}

.memory-item-content {
  flex: 1;
  min-width: 0;
}

.memory-item-text {
  font-size: 0.9em;
  color: var(--text, #fff);
  margin-bottom: 4px;
  line-height: 1.4;
}

.memory-item-source {
  font-size: 0.75em;
  color: var(--muted, rgba(255, 255, 255, 0.5));
  font-style: italic;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-item-date {
  font-size: 0.7em;
  color: var(--muted, rgba(255, 255, 255, 0.4));
  margin-top: 4px;
}

/* Bouton de suppression - style rouge moderne */
.memory-item-delete {
  background: rgba(239, 71, 111, 0.8);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 600;
  transition: all 0.2s ease;
  margin-left: 12px;
  flex-shrink: 0;
  opacity: 0.7;
}

.memory-item:hover .memory-item-delete {
  opacity: 1;
}

.memory-item-delete:hover {
  background: rgba(239, 71, 111, 1);
  transform: scale(1.1);
}

.memory-item-delete:active {
  transform: scale(0.95);
}

/* Retirer le gras des résumés IA de l'historique pour harmoniser avec les éléments mémorisés */
.chat-history-item .chat-history-title,
.chat-history-item .chat-history-preview {
  font-weight: 400 !important; /* Même poids que memory-item-text */
}

/* Appliquer le même style au bouton de suppression de l'historique */
.chat-history-delete {
  background: rgba(239, 71, 111, 0.8) !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 0.9em !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  opacity: 0.7 !important;
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  line-height: 1 !important;
}

.chat-history-item:hover .chat-history-delete {
  opacity: 1 !important;
}

.chat-history-delete:hover,
.chat-history-delete:focus-visible {
  background: rgba(239, 71, 111, 1) !important;
  transform: scale(1.1) !important;
  color: white !important;
}

.chat-history-delete:active {
  transform: scale(0.95) !important;
}

.chat-history-delete:disabled {
  opacity: 0.5 !important;
  cursor: default !important;
}

/* Message vide */
.memory-items-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted, rgba(255, 255, 255, 0.5));
  font-size: 0.9em;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .memory-toggle-btn {
    padding: 4px;
    margin-left: 6px;
    font-size: 18px;
  }

  .memory-item {
    padding: 8px 10px;
  }

  .memory-item-text {
    font-size: 0.85em;
  }

  .memory-item-delete {
    padding: 5px 8px;
    font-size: 0.85em;
    margin-left: 8px;
  }

  .chat-history-delete {
    padding: 5px 8px !important;
    font-size: 0.85em !important;
  }

  .memory-category-title {
    font-size: 0.9em;
  }

  /* 🔥 FIX: Forcer le header à rester en haut du panneau */
  aside#chat-history-panel.chat-history-panel .chat-history-header {
    order: -1 !important; /* Toujours en premier */
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
  }

  /* 🔥 FIX CRITIQUE MOBILE: Forcer le h3 en flex row - spécificité maximale */
  .chat-history-panel .chat-history-header h3,
  aside.chat-history-panel .chat-history-header h3,
  aside#chat-history-panel.chat-history-panel .chat-history-header h3 {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }

  /* S'assurer que le span titre vient en premier */
  #chat-history-panel h3 span#history-panel-title,
  aside#chat-history-panel .chat-history-header h3 span#history-panel-title {
    display: inline-block !important;
    -webkit-box-ordinal-group: 2 !important;
    -ms-flex-order: 1 !important;
    order: 1 !important;
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    float: none !important;
  }

  /* S'assurer que le bouton vient en second */
  #chat-history-panel h3 button#toggle-memory-view,
  aside#chat-history-panel .chat-history-header h3 button#toggle-memory-view {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-ordinal-group: 3 !important;
    -ms-flex-order: 2 !important;
    order: 2 !important;
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    float: none !important;
  }
}

/* Intégration avec le panneau d'historique existant - règles globales */
aside#chat-history-panel .chat-history-header h3,
.chat-history-panel .chat-history-header h3,
.chat-history-header h3 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}

#history-panel-title {
  flex: 0 1 auto !important;
  order: 1 !important;
  margin: 0 !important;
  display: inline-block !important;
}

#toggle-memory-view.memory-toggle-btn {
  order: 2 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: inline-flex !important;
}

/* Fix desktop: le chat doit s'ajuster quand l'historique est ouvert */
@media (min-width: 769px) {
  body.ped-ia-chat-active .chat-fullscreen-layout {
    display: flex !important;
    gap: 0 !important;
  }

  body.ped-ia-chat-active .chat-history-panel {
    flex-shrink: 0 !important;
  }

  /* 🔥 CRITIQUE: Annuler le position: absolute pour permettre flexbox */
  body.ped-ia-chat-active .chat-fullscreen-stage {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }
}