/* ========================================================================== */
/* RAG AI Connector 0.20.10 — contexte Persona/Périmètre recentré            */
/* ========================================================================== */

/* Le résumé actif devient un repère visuel centré et lisible, quelle que soit
   la largeur. Il ne doit plus rester collé arbitrairement à droite. */
#rayan-ai-root #rayan-ai-modal .rai-context-preview,
#rayan-ai-root #rayan-ai-modal .rai-chat-tools.is-context-locked .rai-context-preview{
  display:flex!important;
  width:100%!important;
  flex-basis:100%!important;
  justify-content:center!important;
  align-items:center!important;
  align-content:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin:0 auto!important;
  padding:2px 0!important;
  text-align:center!important;
}

#rayan-ai-root #rayan-ai-modal .rai-context-preview span{
  justify-content:center!important;
  text-align:center!important;
  color:#ffffff!important;
  font-size:10px!important;
  line-height:1.35!important;
}

#rayan-ai-root #rayan-ai-modal .rai-context-preview b{
  color:#a8ffb5!important;
}

/* Desktop large : une fois Persona/Périmètre verrouillés, le résumé remonte
   sur la même ligne que les boutons Outils. On évite ainsi la troisième ligne
   isolée vue dans la 0.20.9. */
@media(min-width:1200px){
  #rayan-ai-root #rayan-ai-modal .rai-chat-tools.is-context-locked{
    display:grid!important;
    grid-template-columns:auto minmax(300px,1fr)!important;
    grid-template-rows:auto!important;
    align-items:center!important;
    column-gap:18px!important;
    row-gap:0!important;
    width:100%!important;
  }

  #rayan-ai-root #rayan-ai-modal .rai-chat-tools.is-context-locked .rai-chat-tools-left{
    grid-column:1!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
    width:auto!important;
  }

  #rayan-ai-root #rayan-ai-modal .rai-chat-tools.is-context-locked .rai-context-preview{
    grid-column:2!important;
    grid-row:1!important;
    width:auto!important;
    min-width:0!important;
    flex-basis:auto!important;
    justify-content:center!important;
    margin:0!important;
    padding:0!important;
  }
}

/* Écrans intermédiaires : chaque ligne est vraiment centrée. */
@media(min-width:761px) and (max-width:1199px){
  #rayan-ai-root #rayan-ai-modal .rai-chat-tools,
  #rayan-ai-root #rayan-ai-modal .rai-chat-tools.is-context-locked{
    justify-content:center!important;
  }

  #rayan-ai-root #rayan-ai-modal .rai-chat-tools-left,
  #rayan-ai-root #rayan-ai-modal .rai-chat-tools.is-context-locked .rai-chat-tools-left{
    width:100%!important;
    justify-content:center!important;
  }

  #rayan-ai-root #rayan-ai-modal .rai-context-controls{
    width:100%!important;
    justify-content:center!important;
  }

  #rayan-ai-root #rayan-ai-modal .rai-context-preview,
  #rayan-ai-root #rayan-ai-modal .rai-chat-tools.is-context-locked .rai-context-preview{
    width:100%!important;
    justify-content:center!important;
    margin-inline:auto!important;
  }
}

/* Mobile : même principe, mais avec des chips pouvant passer proprement sur
   plusieurs lignes. */
@media(max-width:760px){
  #rayan-ai-root #rayan-ai-modal .rai-context-preview,
  #rayan-ai-root #rayan-ai-modal .rai-chat-tools.is-context-locked .rai-context-preview{
    justify-content:center!important;
    text-align:center!important;
  }

  #rayan-ai-root #rayan-ai-modal .rai-context-preview span{
    white-space:normal!important;
    max-width:100%!important;
    font-size:9.5px!important;
  }
}

@media(max-width:430px){
  #rayan-ai-root #rayan-ai-modal .rai-context-preview span{
    font-size:9px!important;
  }
}
/* Rayan AI Connector 0.20.14 — mode basique pour les rôles ordinaires. */
#rayan-ai-root #rayan-ai-modal .rai-composer-dock.rai-basic-tools .rai-chat-tools{
  justify-content:center!important;
}

#rayan-ai-root #rayan-ai-modal .rai-composer-dock.rai-basic-tools .rai-chat-tools-left{
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:8px!important;
}