/* Rayan AI Connector 0.25.5 — P11 UIX, verrouillage, navigation et Markdown. */

/* Les nouveaux visuels persona restent dans la vignette carrée validée, mais
   leur format 300 × 121 utilise désormais toute la largeur utile. */
#rayan-ai-root #rayan-ai-modal .rai-persona-image-cue {
  width: 188px !important;
  height: 82px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

#rayan-ai-root #rayan-ai-modal .rai-persona-image-cue img {
  width: 188px !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 300 / 121 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 8px rgba(var(--rai-selector-rgb), .2));
}

/* Dans le panneau, chaque bouton conserve l'image à gauche et le texte à
   droite. Le rectangle gagne en largeur sans réduire la description. */
#rayan-ai-root #rayan-ai-modal .rai-selector-surface .rai-persona-options > button {
  grid-template-columns: minmax(150px, 176px) minmax(0, 1fr) !important;
  min-height: 122px !important;
}

#rayan-ai-root #rayan-ai-modal .rai-selector-surface .rai-persona-options .rai-context-selector-option-visual {
  width: 176px !important;
  height: 78px !important;
  max-width: 100% !important;
}

#rayan-ai-root #rayan-ai-modal .rai-selector-surface .rai-persona-option-image {
  width: 174px !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 300 / 121 !important;
  object-fit: contain !important;
}

/* Chaque ligne reprend exactement la famille chromatique du nouveau bouton. */
#rayan-ai-root #rayan-ai-modal .rai-persona-options > button[data-persona-slug="bibliothecaire"] {
  --rai-selector-accent: #fabf05;
  --rai-selector-rgb: 250, 191, 5;
}

#rayan-ai-root #rayan-ai-modal .rai-persona-options > button[data-persona-slug="redacteur"] {
  --rai-selector-accent: #f87818;
  --rai-selector-rgb: 248, 120, 24;
}

#rayan-ai-root #rayan-ai-modal .rai-persona-options > button[data-persona-slug="scientifique"] {
  --rai-selector-accent: #85aad0;
  --rai-selector-rgb: 133, 170, 208;
}

#rayan-ai-root #rayan-ai-modal .rai-persona-options > button[data-persona-slug="therapeute"] {
  --rai-selector-accent: #eb11f9;
  --rai-selector-rgb: 235, 17, 249;
}

#rayan-ai-root #rayan-ai-modal .rai-persona-options > button[data-persona-slug="travailleur-social"] {
  --rai-selector-accent: #0490fb;
  --rai-selector-rgb: 4, 144, 251;
}

#rayan-ai-root #rayan-ai-modal .rai-persona-options > button[data-persona-slug="assistant-matrice"] {
  --rai-selector-accent: #19f219;
  --rai-selector-rgb: 25, 242, 25;
}

/* Après le premier message, les trois cartes restent visibles comme repères,
   mais ne sont plus des commandes ouvrables, y compris au clavier. */
#rayan-ai-root #rayan-ai-modal .rai-persona-selector.is-locked .rai-persona-summary:disabled,
#rayan-ai-root #rayan-ai-modal .rai-response-mode-selector.is-locked .rai-response-mode-summary:disabled,
#rayan-ai-root #rayan-ai-modal .rai-privacy-switcher.is-locked .rai-privacy-current:disabled {
  cursor: not-allowed !important;
  opacity: .88 !important;
  transform: none !important;
}

#rayan-ai-root #rayan-ai-modal .rai-persona-selector.is-locked .rai-persona-summary:disabled:hover,
#rayan-ai-root #rayan-ai-modal .rai-response-mode-selector.is-locked .rai-response-mode-summary:disabled:hover,
#rayan-ai-root #rayan-ai-modal .rai-privacy-switcher.is-locked .rai-privacy-current:disabled:hover {
  transform: none !important;
}

/* Markdown sûr : la structure est créée par le DOM, jamais injectée comme
   HTML. Les styles restent sobres afin de préserver la DA terminal Matrix. */
#rayan-ai-root .rayan-ai-bubble > :first-child {
  margin-top: 0 !important;
}

#rayan-ai-root .rayan-ai-bubble > :last-child {
  margin-bottom: 0 !important;
}

#rayan-ai-root .rayan-ai-bubble h2,
#rayan-ai-root .rayan-ai-bubble h3,
#rayan-ai-root .rayan-ai-bubble h4,
#rayan-ai-root .rayan-ai-bubble h5,
#rayan-ai-root .rayan-ai-bubble h6 {
  margin: 1.05em 0 .48em !important;
  color: #d9ffe2 !important;
  font: 800 1em/1.35 "Courier New", ui-monospace, monospace !important;
  letter-spacing: .035em !important;
}

#rayan-ai-root .rayan-ai-bubble h2 { font-size: 1.12em !important; }
#rayan-ai-root .rayan-ai-bubble h3 { font-size: 1.07em !important; }
#rayan-ai-root .rayan-ai-bubble h4 { font-size: 1.03em !important; }

#rayan-ai-root .rayan-ai-bubble p {
  margin: 0 0 .8em !important;
}

#rayan-ai-root .rayan-ai-bubble ul,
#rayan-ai-root .rayan-ai-bubble ol {
  margin: .35em 0 .85em !important;
  padding-left: 1.55em !important;
}

#rayan-ai-root .rayan-ai-bubble li {
  margin: .2em 0 !important;
  padding-left: .15em !important;
}

#rayan-ai-root .rayan-ai-bubble blockquote {
  margin: .7em 0 !important;
  padding: .5em .8em !important;
  border-left: 2px solid rgba(72, 255, 101, .62) !important;
  background: rgba(22, 85, 37, .13) !important;
  color: #ccebd2 !important;
}

#rayan-ai-root .rayan-ai-bubble code {
  padding: .08em .32em !important;
  border: 1px solid rgba(72, 255, 101, .24) !important;
  border-radius: 4px !important;
  background: rgba(0, 8, 2, .72) !important;
  color: #8cff9d !important;
  font-family: "Courier New", ui-monospace, monospace !important;
}

#rayan-ai-root .rayan-ai-bubble pre {
  max-width: 100% !important;
  margin: .7em 0 !important;
  padding: .7em .8em !important;
  overflow: auto !important;
  border: 1px solid rgba(72, 255, 101, .28) !important;
  border-radius: 7px !important;
  background: rgba(0, 7, 2, .92) !important;
  white-space: pre !important;
}

#rayan-ai-root .rayan-ai-bubble pre code {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #c9ffd3 !important;
}

#rayan-ai-root .rayan-ai-bubble hr {
  height: 1px !important;
  margin: .9em 0 !important;
  border: 0 !important;
  background: rgba(72, 255, 101, .28) !important;
}

/* La réponse terminée reçoit un bref signal lumineux puis la zone défile vers
   le début du tour, afin de cadrer la question et le commencement de réponse. */
@keyframes rai-p11-answer-arrival {
  0% { opacity: .72; filter: brightness(.82); }
  55% { opacity: 1; filter: brightness(1.12); }
  100% { opacity: 1; filter: brightness(1); }
}

#rayan-ai-root .rayan-ai-message-row.assistant.rai-answer-arrived .rai-message-shell {
  animation: rai-p11-answer-arrival .72s cubic-bezier(.2, .8, .2, 1) both;
}

/* La barre Persona suit les couleurs lumineuses des nouveaux fichiers ON. */
#rayan-ai-root .rai-message-persona-bar.is-gold { --rai-persona-accent: #fabf05; }
#rayan-ai-root .rai-message-persona-bar.is-orange { --rai-persona-accent: #f87818; }
#rayan-ai-root .rai-message-persona-bar.is-cyan { --rai-persona-accent: #85aad0; }
#rayan-ai-root .rai-message-persona-bar.is-violet { --rai-persona-accent: #eb11f9; }
#rayan-ai-root .rai-message-persona-bar.is-blue { --rai-persona-accent: #0490fb; }
#rayan-ai-root .rai-message-persona-bar.is-matrix { --rai-persona-accent: #19f219; }

@media (max-width: 420px) {
  #rayan-ai-root #rayan-ai-modal .rai-selector-surface .rai-persona-options > button {
    grid-template-columns: 116px minmax(0, 1fr) !important;
    min-height: 112px !important;
  }

  #rayan-ai-root #rayan-ai-modal .rai-selector-surface .rai-persona-options .rai-context-selector-option-visual,
  #rayan-ai-root #rayan-ai-modal .rai-selector-surface .rai-persona-option-image {
    width: 114px !important;
    height: auto !important;
  }
}

@media (max-width: 360px) {
  #rayan-ai-root #rayan-ai-modal .rai-persona-image-cue,
  #rayan-ai-root #rayan-ai-modal .rai-persona-image-cue img {
    width: 158px !important;
    height: auto !important;
  }

  #rayan-ai-root #rayan-ai-modal .rai-selector-surface .rai-persona-options > button {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }

  #rayan-ai-root #rayan-ai-modal .rai-selector-surface .rai-persona-options .rai-context-selector-option-visual,
  #rayan-ai-root #rayan-ai-modal .rai-selector-surface .rai-persona-option-image {
    width: 94px !important;
    height: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #rayan-ai-root .rayan-ai-message-row.assistant.rai-answer-arrived .rai-message-shell {
    animation: none !important;
  }
}