public/custom.css

/* =============================================================================
   CUSTOM STYLES - AGENT COLLABORATIF UGE
   Basé sur le dark template fourni
   ============================================================================= */

:root {
  /* Couleurs principales du dark template */
  /*--primary-violet: #7C3AED;
  --primary-violet-light: #A78BFA;
  --accent-pink: #EC4899;
  --bg-dark: #0F0F23;
  --bg-card: #1A1B2E;
  --bg-card-hover: #252641;
  --text-primary: #F9FAFB;
  --text-secondary: #9CA3AF;
  --text-tertiary: #6B7280;
  --border-color: rgba(124, 58, 237, 0.2);
  --shadow-primary: rgba(124, 58, 237, 0.3);
  --shadow-glow: rgba(124, 58, 237, 0.5);
*/
  --primary-violet: #016157; /* Vert-Cyan dominant */
  --primary-violet-light: #34857c; /* Version plus claire du vert-cyan */
  --accent-pink: #296383; /* Bleu secondaire pour l'accentuation (Bleu acier/Bleu céruléen) */
  --bg-dark: #0F0F23; /* Fond sombre (inchangé, fonctionne bien avec le vert/bleu) */
  --bg-card: #1A1B2E; /* Fond de carte (inchangé, neutre sombre) */
  --bg-card-hover: #252641; /* Hover de carte (inchangé, neutre sombre) */
  --text-primary: #F9FAFB; /* Texte principal (blanc/clair, inchangé) */
  --text-secondary: #9CA3AF; /* Texte secondaire (gris moyen, inchangé) */
  --text-tertiary: #6B7280; /* Texte tertiaire (gris foncé, inchangé) */
  --border-color: rgba(0, 168, 150, 0.2); /* Bordure (Basée sur le nouveau --primary-green) */
  --shadow-primary: rgba(0, 168, 150, 0.3); /* Ombre (Basée sur le nouveau --primary-green) */
  --shadow-glow: rgba(0, 168, 150, 0.5); /* Effet lumineux (Basé sur le nouveau --primary-green) */
}
.logo{opacity:1!important;}
.-ml-1\.5 {
  margin-top:.375rem!important;
  margin-left: -.375rem;
}
/* Body et fond principal */
body {
  background-color: var(--bg-dark) !important;
  color: var(--text-primary) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif !important;
}

/* Container principal */
#root {
  background-color: var(--bg-dark);
}

/* Cartes et panneaux */
.MuiPaper-root {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s ease !important;
}

.MuiPaper-root:hover {
  background-color: var(--bg-card-hover) !important;
  border-color: var(--primary-violet) !important;
  box-shadow: 0 12px 48px var(--shadow-primary) !important;
}

/* Messages */
/*
.step {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(26, 27, 46, 0.8) 100%) !important;
  border-left: 3px solid var(--primary-violet) !important;
  border-radius: 12px !important;
  */
  /*margin: 12px 0 !important;*/
/*  padding: 16px !important;
  backdrop-filter: blur(10px) !important;
}*/
/*
.step:hover {
  border-left-color: var(--accent-pink) !important;
  transform: translateX(4px) !important;
}
*/

/* Boutons principaux */
button, .MuiButton-root {
  background: linear-gradient(135deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: 0 4px 16px var(--shadow-primary) !important;
  transition: all 0.3s ease !important;
}
button[data-sidebar="rail"],button[id^="step-"] {
  background: transparent !important;
  color: white !important;
  border: none !important;
  border-radius: 0px !important;
  padding: 0px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: 0 0 0 var(--shadow-primary) !important;
  transition: all 0.3s ease !important;
}
button:hover, .MuiButton-root:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px var(--shadow-glow) !important;
}
button[data-sidebar="rail"]:hover,button[id^="step-"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 2px 26px var(--shadow-glow) !important;
}

/* Starters - Style des cartes de démarrage */
.starter {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.starter::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
  transform: scaleX(0) !important;
  transition: transform 0.3s ease !important;
}

.starter:hover::before {
  transform: scaleX(1) !important;
}

.starter:hover {
  background-color: var(--bg-card-hover) !important;
  border-color: var(--primary-violet) !important;
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 32px var(--shadow-primary) !important;
}

/* Icônes des starters */
.starter svg, .starter img {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 12px !important;
  filter: drop-shadow(0 4px 8px var(--shadow-primary)) !important;
}

/* Input de message */
.MuiTextField-root, textarea, input {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  padding: 12px !important;
}

.MuiTextField-root:focus, textarea:focus, input:focus {
  border-color: var(--primary-violet) !important;
  box-shadow: 0 0 0 3px var(--shadow-primary) !important;
  outline: none !important;
}

/* Steps (Chain of Thought) */
.step-header {
  background: linear-gradient(90deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  margin-bottom: 8px !important;
}

/* Badges et tags */
.MuiChip-root {
  background: linear-gradient(135deg, var(--primary-violet-light) 0%, var(--primary-violet) 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* Scrollbar personnalisée */
::-webkit-scrollbar {
  width: 2px !important;
  /*height: 10px !important;*/
}

::-webkit-scrollbar-track {
  width: 2px !important;
  background: var(--bg-dark) !important;
  /*border-radius: 10px !important;*/
}

::-webkit-scrollbar-thumb {
  width: 2px !important;
  background: linear-gradient(180deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
  /*border-radius: 10px !important;*/
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-violet-light) !important;
}

/* Headers */
h1,h2, h3, h4, h5, h6 {
  font-size:90%!important;color: var(--text-primary) !important;
  font-weight: 700 !important;
}
/*
h1 {
  background: linear-gradient(135deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
*/
/* Liens */
a {
  color: var(--primary-violet-light) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

a:hover {
  color: var(--accent-pink) !important;
  text-decoration: underline !important;
}

/* Code blocks */
pre, code {
  background-color: rgba(15, 15, 35, 0.8) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  color: var(--primary-violet-light) !important;
  padding: 12px !important;
  font-family: 'Fira Code', 'Courier New', monospace !important;
}

/* Citations */
blockquote {
  border-left: 4px solid var(--primary-violet) !important;
  background-color: var(--bg-card) !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  border-radius: 0 8px 8px 0 !important;
}

/* Messages utilisateur */
.user-message {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%) !important;
  border: 1px solid var(--primary-violet) !important;
  border-radius: 16px 16px 4px 16px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}

/* Messages assistant */
.assistant-message {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 16px 16px 16px 4px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}

/* Loader animé */
.loader {
  border: 3px solid var(--bg-card) !important;
  border-top: 3px solid var(--primary-violet) !important;
  border-radius: 50% !important;
  animation: spin 1s linear infinite !important;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Effet de glow sur les éléments importants */
.glow-effect {
  box-shadow: 0 0 20px var(--shadow-glow) !important;
  animation: pulse-glow 2s ease-in-out infinite !important;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px var(--shadow-glow);
  }
  50% {
    box-shadow: 0 0 30px var(--shadow-glow);
  }
}

/* Sidebar */
.sidebar {
  background-color: var(--bg-card) !important;
  border-right: 1px solid var(--border-color) !important;
}

/* Tooltips */
.MuiTooltip-tooltip {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--primary-violet) !important;
  color: var(--text-primary) !important;
  font-size: 0.875rem !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px var(--shadow-primary) !important;
}

/* Avatar */
.avatar {
  border: 2px solid var(--primary-violet) !important;
  box-shadow: 0 4px 12px var(--shadow-primary) !important;
}

/* Tables */
table {
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
}

th {
  background: linear-gradient(135deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
  color: white !important;
  padding: 12px !important;
  font-weight: 600 !important;
  border-radius: 8px 8px 0 0 !important;
}

td {
  background-color: var(--bg-card) !important;
  padding: 12px !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

tr:hover td {
  background-color: var(--bg-card-hover) !important;
}

/* Animations d'entrée */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.5s ease-out !important;
}

/* Responsive */
@media (max-width: 768px) {
  .starter {
    padding: 16px !important;
  }
  
  button, .MuiButton-root {
    padding: 10px 20px !important;
  }
}
div#message-composer div:nth-child(2){margin-top:5px}
button#user-nav-button > span > span{background-color:transparent!important}
button#readme-button, button#theme-toggle, button#upload-button, div.watermark{display:none!important}
div.max-w-\[600px\].h-\[400px\]{height:850px!important}
div.inline-plotly.js-plotly-plot{width:850px!important;height:800px!important}