/* -------------------------------------------------
   B‑viewer — styles.css  (v2025‑05‑14 • corrected‑3)
   ------------------------------------------------- */

/* ---------- Onglets / layout de base ---------- */
.tab-button{
  background:#2b3e50;
  color:#fff;
  padding:10px;
  margin-bottom:15px;
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-size:14px;
  transition:background-color .3s ease;
}
.tab-button:hover        {background:#9dbdd3}
.tab-button.active       {background:#3f8ccb}

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

.dashboard-container{
  font-family:'Inter',sans-serif;
  color:#2d3748;
  background:#f7fafc;
}

/* ---------- Effets sur boutons importants ---------- */
#generate-visual-btn:hover,
#save-prompt-btn-analysis:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 15px rgba(66,153,225,.4);
}

/* ----- Effet d’enfoncement SANS décalage global ----- */
button{
  position:relative;
  overflow:hidden;
  transition:transform .12s,box-shadow .12s,background-color .2s !important;
}

/* effet ripple */
.ripple-effect{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  opacity:0;
  pointer-events:none;
  transform:scale(0);
  animation:ripple .6s linear;
}
@keyframes ripple{
  0%{transform:scale(0);opacity:.5}
  100%{transform:scale(2);opacity:0}
}

button:active{
  transform:none !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.2) !important;
}

/* cas particuliers : on garde juste le fondu sombre */
#generate-visual-btn:active,
#load-data-btn:active,
#login-btn:active,
#submit-signup-btn:active,
#subscribe-monthly-btn:active,
#subscribe-yearly-btn:active{
  background-image:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15));
}

/* sidebar tab pressé */
.tab-button:active{
  background:rgba(255,255,255,.15)!important;
}

/* boutons désactivés */
button[disabled],
button[disabled]:active{
  transform:none !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
  opacity:.65 !important;
}

/* ---------- Dropdowns & inputs ---------- */
.Select-control:hover{
  border-color:#4299e1 !important;
  box-shadow:0 0 0 1px #4299e1 !important;
}
input:focus,
textarea:focus{
  border-color:#4299e1 !important;
  box-shadow:0 0 0 1px #4299e1 !important;
  outline:none !important;
}

/* ---------- Cartes d’analyse ---------- */
.analysis-card{
  margin-bottom:30px;
  padding:5px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
  transition:transform .3s,box-shadow .3s;
}
.analysis-card:hover{
  box-shadow:0 12px 40px rgba(0,0,0,.12);
  transform:translateY(-5px);
}

/* apparition depuis le bas (conversation) */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px)}
  to  {opacity:1;transform:translateY(0)}
}
.analysis-card.fade-in-up{
  animation:fadeInUp .6s cubic-bezier(.16,1,.3,1) both;
}

/* ---------- Conteneurs graph / reco (styles) ---------- */
.analysis-graph{
  /* height:380px !important;   ← hauteur fixe supprimée */
  transition:all .3s;
}
.recommendations-content{
  /* height:380px !important;   ← hauteur fixe supprimée */
  font-size:14px;
  line-height:1.6;
}

/* ---------- Timeline ---------- */
.analysis-timeline-separator{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:15px 0;
  height:20px;
  position:relative;
}
.separator-line{
  height:1px;
  background:linear-gradient(90deg,rgba(49,130,206,0),rgba(49,130,206,.5),rgba(49,130,206,0));
  width:100%;
  position:absolute;
}
.separator-dot{
  width:8px;
  height:8px;
  background:#fff;
  border:1px solid #3182ce;
  border-radius:50%;
  z-index:1;
  box-shadow:0 0 0 2px rgba(49,130,206,.1);
}

/* ---------- Typing indicator ---------- */
.typing-indicator{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:6px 12px;
  background:#f0f4f8;
  border-radius:20px;
  margin:0 auto;
  width:fit-content;
}
.typing-dot{
  height:8px;
  width:8px;
  background:#3182ce;
  border-radius:50%;
  margin:0 2px;
  display:inline-block;
  opacity:.7;
}
.typing-dot:nth-child(1){animation:bounce 1.3s ease-in-out infinite}
.typing-dot:nth-child(2){animation:bounce 1.3s ease-in-out .2s infinite}
.typing-dot:nth-child(3){animation:bounce 1.3s ease-in-out .4s infinite}
@keyframes bounce{
  0%,60%,100%{transform:translateY(0)}
  30%{transform:translateY(-6px)}
}

/* ---------- Divers ---------- */
@keyframes fadeIn{
  from{opacity:0;transform:translateY(-10px)}
  to  {opacity:1;transform:translateY(0)}
}
.message-visible{
  display:flex !important;
  animation:fadeIn .5s ease;
}

/* responsive tweaks */
@media(max-width:1200px){
  .graph-container,
  .analysis-flex-container{
    flex:1 1 100% !important;
  }
}

/* ---------- Layout (sidebar & chat) ---------- */
.sidebar{
  width:20%;
  float:left;
  padding:10px;
  background:#f4f4f4;
  height:100vh;
  overflow-y:auto;
}
.main-panel{
  width:80%;
  float:right;
  padding:10px;
}
.conv-item{
  padding:8px;
  cursor:pointer;
}
.conv-item.selected{
  background:#d0e2ff;
}
.timeline .msg.user{
  text-align:right;
  margin:8px 0;
}
.timeline .msg.bot{
  text-align:left;
  margin:8px 0;
}
.chat-input{
  position:fixed;
  bottom:0;
  width:78%;
  background:#fff;
  padding:10px;
  box-shadow:0 -2px 5px rgba(0,0,0,0.1);
}

/* ----------------------------------------------------------------------
   Patch unique Graph / Recommendations (14 May 2025 • v3)
   ---------------------------------------------------------------------- */
.analysis-flex-row{
  display:flex;
  align-items:stretch;          /* même hauteur pour les 2 colonnes */
}

.graph-container,
.recommendations-container{
  flex:1 1 50%;                 /* parts égales + rétractables      */
  min-width:300px;
  display:flex;
  flex-direction:column;
  min-height:0;                 /* lève la contrainte interne       */
}

.analysis-graph{
  flex:1 1 auto;                /* le graph dicte la hauteur réelle */
  height:auto !important;
  min-height:0;
}

.recommendations-content{
  flex:1 1 auto;                /* remplit tout l’espace restant    */
  min-height:0;
  overflow-y:auto;              /* scroll interne si nécessaire     */
  display:flex;                 /* ← colonne flex                   */
  flex-direction:column;
}

/* l’élément Markdown (enfant direct) prend 100 % de hauteur            */
.recommendations-content > *{
  flex:1 1 auto;
}
.recommendations-content{
  padding-bottom:0;
  margin-bottom:0;
}
.recommendations-content p:last-child{margin-bottom:0;}

/* Masquer le texte d’un champ désactivé tout en gardant la valeur */
input.disabled-mask {
  -webkit-text-security: disc;  /* navigateurs Chromium */
}
/* Carte Fichier lorsque sélectionnée */
.data-source-card.active#file-source-card {
  background: #ffffff !important;            /* fond blanc */
  border: 2px solid #e2e8f0 !important;      /* même gris que la carte BDD */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;  /* ombre neutre */
}

/* Styles pour RAG Layout */
.upload-zone:hover {
    border-color: #667eea !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
}

.upload-zone:hover .fa-cloud-upload-alt {
    color: #667eea !important;
}

.file-type-badge {
    background: #edf2f7;
    color: #4a5568;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
}

.btn-danger-outline:hover {
    background: #fff5f5 !important;
    border-color: #fc8181 !important;
}

.btn-secondary-outline:hover {
    background: #f7fafc !important;
    border-color: #cbd5e0 !important;
}

/* Animation de chargement personnalisée */
.rag-loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    border-top-color: #667eea;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Scrollbar personnalisée */
#rag-docs-list::-webkit-scrollbar {
    width: 8px;
}

#rag-docs-list::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

#rag-docs-list::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

#rag-docs-list::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}
/* ===== Chat stream (fenêtre d'apparition) ===== */
#analysis-timeline, .timeline-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Lignes de message (gauche/droite) */
.msg { display: flex; gap: 12px; align-items: flex-start; }
.msg.ai   { justify-content: flex-start; }  /* Réponse IA à gauche   */
.msg.user { justify-content: flex-end;   }  /* Prompt user à droite  */

/* Bulle et espace latéral */
.msg .spacer { flex: 1 1 0; }
.bubble {
  max-width: 88%;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(2,6,23,.06);
}
.msg.user .bubble { background: #eff6ff; border-color: #dbeafe; }

/* ========= Variante 1 : grille responsive ========= */
.graphs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}
.chat-graph { min-width: 0; height: 440px; }

/* ========= Variante 2 : bande horizontale (activée par le helper) ========= */
.graphs-grid.band {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}
.graphs-grid.band .chat-graph {
  min-width: 600px;       /* ← plus long pour lisibilité */
  height: 460px;          /* ← plus haut pour lisibilité */
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Texte d’analyse sous les graphes */
.analysis-text { margin-top: 10px; font-size: 15px; line-height: 1.65; }

/* Séparateur optionnel entre tours */
.analysis-timeline-separator {
  display:flex; align-items:center; gap:8px; margin: 6px 0;
}
.analysis-timeline-separator .separator-line { flex:1; height:1px; background:#e5e7eb; }
.analysis-timeline-separator .separator-dot  { width:6px; height:6px; background:#cbd5e1; border-radius:999px; }

/* ===== Bulle "réflexion" (typing indicator) ===== */
.typing {
  display: inline-flex; align-items: center; gap: 8px;
  color: #475569;
}
.typing .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #94a3b8; opacity: .6; animation: blink 1.2s infinite ease-in-out;
}
.typing .dot:nth-child(2) { animation-delay: .15s; }
.typing .dot:nth-child(3) { animation-delay: .3s; }
@keyframes blink {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40%          { transform: translateY(-3px); opacity: 1; }
}

/* Responsive tweaks */
@media (max-width: 880px) {
  .bubble { max-width: 96%; }
  .graphs-grid.band .chat-graph { min-width: 88vw; height: 420px; }
  .chat-graph { height: 420px; }
}
/* === Graphs : large + empilés (1 colonne) ================================= */

/* Une seule colonne, pleine largeur du conteneur */
.graphs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* Chaque graphe prend 100% de la largeur disponible et une bonne hauteur */
.chat-graph {
  width: 100%;
  min-width: 0;   /* évite les débordements */
  height: 560px;  /* plus grand pour la lisibilité */
}

/* Optionnel : un peu plus large pour la bulle sur desktop */
@media (min-width: 1100px) {
  .bubble { max-width: 1100px; }
}

/* Mobile : on réduit la hauteur pour garder le scroll confortable */
@media (max-width: 880px) {
  .chat-graph { height: 420px; }
}
/* === Styles améliorés pour la conversation (sans effets gênants) === */

/* Animation d'entrée des messages (subtile) */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Animation pour l'avatar qui réfléchit (subtile) */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Animation des points de chargement */
@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* Amélioration du conteneur de timeline */
#analysis-timeline {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 20px !important;
    border-radius: 12px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Scrollbar personnalisée pour la timeline */
#analysis-timeline::-webkit-scrollbar {
    width: 8px;
}

#analysis-timeline::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

#analysis-timeline::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cbd5e0 0%, #a0aec0 100%);
    border-radius: 10px;
}

#analysis-timeline::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a0aec0 0%, #718096 100%);
}

/* PAS d'effet de hover sur les bulles utilisateur */
.user-bubble {
    transition: none !important;
}

.user-bubble:hover {
    transform: none !important;
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3) !important;
}

/* Effet de hover très subtil sur les bulles AI */
.ai-bubble:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

/* Amélioration des graphiques dans les bulles */
.graph-wrapper {
    position: relative;
    transition: box-shadow 0.3s ease;
}

.graph-wrapper:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Style pour les cartes Markdown dans les réponses */
.analysis-text h4 {
    color: #2d3748;
    font-size: 16px;
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid #e2e8f0;
}

.analysis-text h5 {
    color: #4a5568;
    font-size: 14px;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 6px;
}

.analysis-text ul {
    margin-left: 0;
    padding-left: 20px;
}

.analysis-text li {
    margin-bottom: 6px;
    color: #4a5568;
}

.analysis-text code {
    background: #f7fafc;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    color: #2d3748;
    font-family: 'Monaco', 'Courier New', monospace;
}

/* PAS d'effet de brillance animée */
.msg.user .bubble::after,
.msg.ai .bubble::after {
    display: none !important;
}

/* Transition fluide lors du scroll */
.timeline-container {
    scroll-behavior: smooth;
}

/* Amélioration visuelle des erreurs */
.error-bubble {
    background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%) !important;
    border: 1px solid #fc8181 !important;
}

.error-bubble .analysis-text {
    color: #742a2a;
}

/* Entrée en fondu simple pour les nouveaux messages */
.msg {
    animation: fadeIn 0.3s ease-out;
}

/* Séparateur fixe (pas d'animation) */
.analysis-timeline-separator {
    opacity: 0.6;
}

/* Avatar B-viewer style */
.ai-avatar {
    font-family: 'Montserrat', 'Poppins', sans-serif;
}
#analysis-timeline{
  overflow-y: auto;
  height: calc(100vh - 220px); /* ajuste selon ton header */
  scroll-behavior: smooth;      /* douceur par défaut */
}