/* Styles pour les conversations LLM - Attaques et Défenses */

/* Conteneur principal de conversation */
.conv-box {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Messages de conversation avec classes simples */
.conv-context {
  background: #e3f2fd;
  border-left: 4px solid #2196f3;
  padding: 12px 16px;
  margin: 8px 0;
  border-radius: 6px;
}

.conv-user {
  background: #e8f5e9;
  border-left: 4px solid #4caf50;
  padding: 12px 16px;
  margin: 8px 0;
  border-radius: 6px;
}

.conv-attacker {
  background: #ffebee;
  border-left: 4px solid #f44336;
  padding: 12px 16px;
  margin: 8px 0;
  border-radius: 6px;
}

.conv-llm {
  background: #fff3e0;
  border-left: 4px solid #ff9800;
  padding: 12px 16px;
  margin: 8px 0;
  border-radius: 6px;
}

.conv-developer {
  background: #f3e5f5;
  border-left: 4px solid #9c27b0;
  padding: 12px 16px;
  margin: 8px 0;
  border-radius: 6px;
}

/* Préfixes automatiques avec icônes */
.conv-context::before {
  content: "📋 Context: ";
  font-weight: bold;
  opacity: 0.8;
}

.conv-user::before {
  content: "👤 User: ";
  font-weight: bold;
  opacity: 0.8;
}

.conv-attacker::before {
  content: "💀 Attacker: ";
  font-weight: bold;
  opacity: 0.8;
}

.conv-llm::before {
  content: "🤖 LLM: ";
  font-weight: bold;
  opacity: 0.8;
}

.conv-developer::before {
  content: "💻 Developer: ";
  font-weight: bold;
  opacity: 0.8;
}

/* Mise en évidence du contenu malveillant */
.malicious {
  background: #ff5252;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
}

/* Style alternatif avec structure complète (pour compatibilité) */
.conversation-box {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.chat-message {
  margin: 15px 0;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid;
}

.chat-message.context {
  background: #e3f2fd;
  border-left-color: #2196f3;
}

.chat-message.user {
  background: #e8f5e9;
  border-left-color: #4caf50;
}

.chat-message.attacker {
  background: #ffebee;
  border-left-color: #f44336;
}

.chat-message.llm {
  background: #fff3e0;
  border-left-color: #ff9800;
}

.message-header {
  font-weight: bold;
  font-size: 0.9em;
  margin-bottom: 8px;
  opacity: 0.8;
}

.message-content {
  font-family: 'Courier New', monospace;
  line-height: 1.6;
}