/* RAG AI Connector 0.20.1 — conversations, médias, pièces jointes et personas */
#rayan-ai-modal { position:relative; }
.rai-chat-tools {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 18px; border-bottom:1px solid rgba(88,255,114,.16);
  background:linear-gradient(180deg,rgba(2,18,7,.88),rgba(0,10,3,.84));
}
.rai-chat-tools-left { display:flex; gap:8px; flex-wrap:wrap; }
.rai-tool-button,
.rai-new-conversation,
.rai-media-item button {
  border:1px solid rgba(88,255,114,.34); border-radius:9px; background:rgba(14,80,29,.20);
  color:#dfffe5; font:700 10px/1.2 "Courier New",monospace; letter-spacing:.05em;
  padding:8px 10px; cursor:pointer;
}
.rai-tool-button:hover,.rai-new-conversation:hover,.rai-media-item button:hover { border-color:#72ff89; box-shadow:0 0 14px rgba(88,255,114,.14); }
.rai-persona-control { display:flex; align-items:center; gap:8px; margin:0; color:rgba(217,255,224,.68); font:700 9px/1 "Courier New",monospace; text-transform:uppercase; letter-spacing:.12em; }
.rai-persona-control select { min-width:205px; margin:0; border:1px solid rgba(88,255,114,.30); border-radius:8px; background:#021006; color:#dcffe2; padding:7px 30px 7px 9px; font:600 10px/1.2 "Courier New",monospace; }
.rai-persona-control select:disabled { opacity:.60; cursor:not-allowed; }
.rai-chat-drawer { position:absolute; z-index:30; top:0; right:0; width:min(430px,92%); height:100%; background:rgba(0,12,4,.985); border-left:1px solid rgba(88,255,114,.42); box-shadow:-15px 0 40px rgba(0,0,0,.42),0 0 25px rgba(88,255,114,.08); }
.rai-chat-drawer[hidden] { display:none !important; }
.rai-chat-drawer-head { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid rgba(88,255,114,.16); }
.rai-chat-drawer-head strong { color:#72ff89; font:800 13px/1 "Courier New",monospace; letter-spacing:.10em; text-transform:uppercase; }
.rai-drawer-close { width:34px; height:34px; border:1px solid rgba(88,255,114,.28); border-radius:50%; background:transparent; color:#e8ffec; font-size:20px; cursor:pointer; }
.rai-chat-drawer-body { height:calc(100% - 72px); overflow:auto; padding:14px; }
.rai-drawer-loading { color:rgba(217,255,224,.55); font:11px "Courier New",monospace; }
.rai-new-conversation { width:100%; margin-bottom:12px; color:#72ff89; }
.rai-history-row { display:grid; grid-template-columns:minmax(0,1fr) 34px; gap:7px; align-items:stretch; margin-bottom:8px; }
.rai-history-open { min-width:0; text-align:left; border:1px solid rgba(88,255,114,.16); border-radius:10px; background:rgba(8,42,16,.22); color:#eaffee; padding:10px 11px; cursor:pointer; }
.rai-history-open strong,.rai-history-open span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rai-history-open strong { font:700 10.5px/1.35 "Courier New",monospace; }
.rai-history-open span { margin-top:4px; color:rgba(217,255,224,.48); font:8.5px/1.2 "Courier New",monospace; }
.rai-history-delete { border:1px solid rgba(255,110,110,.18); border-radius:9px; background:rgba(80,10,10,.16); color:#ff9e9e; cursor:pointer; }
.rai-media-upload { display:flex; align-items:center; justify-content:center; min-height:48px; margin:0 0 12px; border:1px dashed rgba(88,255,114,.34); border-radius:10px; color:#72ff89; cursor:pointer; font:700 10px "Courier New",monospace; }
.rai-media-upload input { display:none; }
.rai-media-list { display:grid; gap:8px; }
.rai-media-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:9px; border:1px solid rgba(88,255,114,.13); border-radius:9px; background:rgba(4,28,10,.18); }
.rai-media-item a { min-width:0; color:#dfffe5; text-decoration:none; font:9.5px/1.3 "Courier New",monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rai-message-media { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0; }
.rai-message-media a { display:inline-flex; padding:5px 8px; border:1px solid rgba(88,255,114,.18); border-radius:999px; color:#aaffba; background:rgba(29,100,42,.14); text-decoration:none; font:8.5px/1 "Courier New",monospace; }

/* Backoffice personas */
.rai-persona-grid { display:grid; gap:18px; }
.rai-persona-card { border:1px solid #c3d8c7; border-left:4px solid #19a843; border-radius:10px; background:#fff; padding:18px; }
.rai-persona-card-head { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:14px; }
.rai-persona-card h3 { margin:0; }
.rai-persona-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.rai-persona-fields .wide { grid-column:1/-1; }
.rai-persona-fields label { display:flex; flex-direction:column; gap:5px; font-weight:600; }
.rai-persona-fields textarea { min-height:110px; }
.rai-persona-help { padding:12px 14px; border-radius:8px; background:#eef9f0; border:1px solid #c8e8cf; }

@media (max-width:760px) {
  .rai-chat-tools { align-items:stretch; flex-direction:column; padding:9px 12px; }
  .rai-chat-tools-left { width:100%; }
  .rai-tool-button { flex:1; }
  .rai-persona-control { justify-content:space-between; width:100%; }
  .rai-persona-control select { min-width:0; width:68%; }
  .rai-chat-drawer { width:100%; }
  .rai-persona-fields { grid-template-columns:1fr; }
  .rai-persona-fields .wide { grid-column:auto; }
}


/* Média lié au prochain message : bandeau explicite au-dessus de la conversation */
.rai-pending-media[hidden] { display:none !important; }
.rai-pending-media {
  margin:0; padding:10px 18px 11px;
  border-bottom:1px solid rgba(88,255,114,.18);
  background:linear-gradient(180deg,rgba(4,34,12,.88),rgba(1,19,7,.90));
  box-shadow:inset 0 -14px 26px rgba(0,0,0,.12),0 0 18px rgba(88,255,114,.035);
}
.rai-pending-media-head {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:7px;
  color:rgba(218,255,226,.72); font:600 8.5px/1.25 "Courier New",monospace;
  letter-spacing:.04em;
}
.rai-pending-media-head strong {
  color:#7dff95; font-size:9px; letter-spacing:.10em; text-transform:uppercase;
}
.rai-pending-media-head small { color:rgba(218,255,226,.45); font:400 8px/1.25 "Courier New",monospace; }
.rai-pending-media-signal {
  display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px;
  border:1px solid rgba(88,255,114,.30); background:rgba(26,112,44,.20); color:#72ff89;
  box-shadow:0 0 10px rgba(88,255,114,.10);
}
.rai-pending-media-items { display:flex; flex-wrap:wrap; gap:7px; }
.rai-pending-media-chip {
  min-width:0; max-width:min(100%,360px); display:inline-flex; align-items:center;
  border:1px solid rgba(88,255,114,.30); border-radius:9px; overflow:hidden;
  background:rgba(2,30,10,.78); box-shadow:inset 0 0 16px rgba(88,255,114,.035);
}
.rai-pending-media-chip a {
  display:block; min-width:0; padding:7px 9px; color:#dfffe5; text-decoration:none;
  font:600 9px/1.2 "Courier New",monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rai-pending-media-chip a::before { content:"▣ "; color:#72ff89; }
.rai-pending-media-remove {
  align-self:stretch; width:31px; min-width:31px; border:0; border-left:1px solid rgba(255,120,120,.18);
  background:rgba(95,10,14,.14); color:#ff9a9a; cursor:pointer; font:700 18px/1 "Courier New",monospace;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.rai-pending-media-remove:hover,.rai-pending-media-remove:focus-visible {
  background:rgba(145,20,25,.30); color:#ffd1d1; box-shadow:inset 0 0 14px rgba(255,80,80,.08); outline:none;
}
.rai-media-item button.is-linked {
  border-color:rgba(88,255,114,.66); color:#72ff89; background:rgba(20,112,38,.28);
  box-shadow:0 0 13px rgba(88,255,114,.10);
}

@media (max-width:760px) {
  .rai-pending-media { padding:9px 12px 10px; }
  .rai-pending-media-head small { flex-basis:100%; padding-left:28px; }
  .rai-pending-media-items { display:grid; grid-template-columns:1fr; }
  .rai-pending-media-chip { max-width:100%; width:100%; }
}


/* ========================================================================== */
/* RAG AI Connector 0.20.2 — Matrix controls, active states, media remove UX  */
/* ========================================================================== */

/* Conversations / Médias : toujours Matrix, jamais rouge. */
#rayan-ai-root #rayan-ai-modal .rai-chat-tools .rai-tool-button,
#rayan-ai-root #rayan-ai-modal .rai-chat-tools button.rai-tool-button {
  appearance:none !important;
  -webkit-appearance:none !important;
  border:1px solid rgba(88,255,114,.44) !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,rgba(7,48,18,.52),rgba(1,22,7,.78)) !important;
  color:#8dffa0 !important;
  box-shadow:inset 0 0 18px rgba(88,255,114,.035),0 0 10px rgba(88,255,114,.045) !important;
  text-shadow:0 0 8px rgba(88,255,114,.18) !important;
  outline:none !important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease,transform .16s ease !important;
}

#rayan-ai-root #rayan-ai-modal .rai-chat-tools .rai-tool-button:hover,
#rayan-ai-root #rayan-ai-modal .rai-chat-tools .rai-tool-button:focus-visible {
  border-color:#7dff95 !important;
  background:linear-gradient(180deg,rgba(10,72,27,.64),rgba(2,31,10,.88)) !important;
  color:#e8ffed !important;
  box-shadow:inset 0 0 22px rgba(88,255,114,.055),0 0 16px rgba(88,255,114,.14) !important;
  transform:translateY(-1px) !important;
}

/* Mode actif PC : le panneau ouvert reste clairement identifié. */
@media (min-width:761px) {
  #rayan-ai-root #rayan-ai-modal .rai-chat-tools .rai-tool-button.is-active,
  #rayan-ai-root #rayan-ai-modal .rai-chat-tools .rai-tool-button[aria-pressed="true"] {
    border-color:#72ff89 !important;
    background:linear-gradient(180deg,rgba(15,105,38,.76),rgba(4,48,16,.94)) !important;
    color:#f0fff3 !important;
    box-shadow:
      inset 0 0 0 1px rgba(132,255,151,.08),
      inset 0 0 28px rgba(88,255,114,.09),
      0 0 12px rgba(88,255,114,.30),
      0 0 26px rgba(88,255,114,.10) !important;
    text-shadow:0 0 9px rgba(88,255,114,.42) !important;
  }

  #rayan-ai-root #rayan-ai-modal .rai-chat-tools .rai-tool-button.is-active::before,
  #rayan-ai-root #rayan-ai-modal .rai-chat-tools .rai-tool-button[aria-pressed="true"]::before {
    content:"●";
    margin-right:7px;
    color:#72ff89;
    font-size:8px;
    text-shadow:0 0 8px #72ff89;
  }
}

/* Mobile : même DA verte, actif un peu plus doux. */
@media (max-width:760px) {
  #rayan-ai-root #rayan-ai-modal .rai-chat-tools .rai-tool-button.is-active,
  #rayan-ai-root #rayan-ai-modal .rai-chat-tools .rai-tool-button[aria-pressed="true"] {
    border-color:#72ff89 !important;
    background:rgba(11,83,29,.58) !important;
    color:#eaffee !important;
    box-shadow:0 0 13px rgba(88,255,114,.16) !important;
  }
}

/* Bandeau média : même langage visuel que le texte d'état. */
#rayan-ai-root #rayan-ai-modal .rai-pending-media-head strong {
  color:#7dff95 !important;
  text-shadow:0 0 9px rgba(88,255,114,.18) !important;
}

/* Le fichier lié reste Matrix. Seule la croix est destructive/rouge. */
#rayan-ai-root #rayan-ai-modal .rai-pending-media-chip {
  overflow:visible !important;
  border-color:rgba(88,255,114,.34) !important;
  border-radius:11px !important;
  padding:4px !important;
  gap:4px !important;
  background:rgba(2,30,10,.78) !important;
}

#rayan-ai-root #rayan-ai-modal .rai-pending-media-chip a {
  flex:1 1 auto !important;
  padding:7px 9px !important;
  border-radius:7px !important;
}

#rayan-ai-root #rayan-ai-modal .rai-pending-media-remove,
#rayan-ai-root #rayan-ai-modal button.rai-pending-media-remove {
  align-self:center !important;
  width:34px !important;
  min-width:34px !important;
  height:34px !important;
  padding:0 !important;
  border:1px solid rgba(255,63,88,.84) !important;
  border-radius:9px !important;
  background:rgba(66,4,12,.46) !important;
  color:#ff5269 !important;
  box-shadow:inset 0 0 12px rgba(255,82,105,.035),0 0 8px rgba(255,82,105,.08) !important;
  font:700 16px/1 "Courier New",monospace !important;
}

#rayan-ai-root #rayan-ai-modal .rai-pending-media-remove:hover,
#rayan-ai-root #rayan-ai-modal .rai-pending-media-remove:focus-visible {
  border-color:#ff6b80 !important;
  border-radius:9px !important;
  background:rgba(126,8,22,.54) !important;
  color:#ffdce1 !important;
  box-shadow:inset 0 0 14px rgba(255,82,105,.06),0 0 13px rgba(255,82,105,.20) !important;
  outline:none !important;
}

/* Médiathèque : Joindre / Joint reste vert. Rouge réservé aux suppressions. */
#rayan-ai-root #rayan-ai-modal .rai-media-item button:not(.rai-history-delete) {
  border-color:rgba(88,255,114,.36) !important;
  border-radius:9px !important;
  background:rgba(14,80,29,.20) !important;
  color:#baffc5 !important;
}

#rayan-ai-root #rayan-ai-modal .rai-media-item button.is-linked {
  border-color:#72ff89 !important;
  border-radius:9px !important;
  background:rgba(17,108,37,.35) !important;
  color:#eaffee !important;
  box-shadow:0 0 12px rgba(88,255,114,.14) !important;
}

/* ========================================================================== */
/* RAG AI Connector 0.20.3 — Conversations / Médias : hiérarchie UX Matrix   */
/* ========================================================================== */

/* Les actions normales du drawer sont Matrix vertes. */
#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-new-conversation,
#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-history-open,
#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-media-upload {
  appearance:none !important;
  -webkit-appearance:none !important;
  border:1px solid rgba(88,255,114,.42) !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,rgba(7,47,18,.54),rgba(1,23,7,.82)) !important;
  color:#cffff7 !important;
  box-shadow:inset 0 0 18px rgba(88,255,114,.035),0 0 10px rgba(88,255,114,.045) !important;
  text-shadow:0 0 7px rgba(88,255,114,.14) !important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease,transform .16s ease !important;
}

#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-new-conversation:hover,
#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-new-conversation:focus-visible,
#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-history-open:hover,
#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-history-open:focus-visible,
#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-media-upload:hover,
#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-media-upload:focus-within {
  border-color:#72ff89 !important;
  background:linear-gradient(180deg,rgba(11,76,28,.68),rgba(2,34,11,.92)) !important;
  color:#f0fff3 !important;
  box-shadow:inset 0 0 22px rgba(88,255,114,.055),0 0 15px rgba(88,255,114,.13) !important;
  transform:translateY(-1px) !important;
  outline:none !important;
}

#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-new-conversation {
  min-height:46px !important;
  padding:10px 14px !important;
  color:#84ff99 !important;
  font-size:10px !important;
}

#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-history-row {
  grid-template-columns:minmax(0,1fr) 48px !important;
  gap:9px !important;
  margin-bottom:10px !important;
}

#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-history-open {
  min-height:52px !important;
  padding:10px 13px !important;
}

#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-history-open strong {
  color:#eaffee !important;
}

#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-history-open span {
  color:rgba(205,255,217,.54) !important;
}

/* Suppression d'une conversation : seul ce bouton reste rouge. */
#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-history-delete {
  appearance:none !important;
  -webkit-appearance:none !important;
  width:48px !important;
  min-width:48px !important;
  min-height:52px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(255,63,88,.82) !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,rgba(65,5,14,.42),rgba(37,3,9,.68)) !important;
  color:#ff536b !important;
  font:800 21px/1 "Courier New",monospace !important;
  box-shadow:inset 0 0 13px rgba(255,82,105,.035),0 0 8px rgba(255,82,105,.07) !important;
  text-shadow:0 0 8px rgba(255,82,105,.18) !important;
  cursor:pointer !important;
  transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease !important;
}

#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-history-delete:hover,
#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-history-delete:focus-visible {
  border-color:#ff7185 !important;
  background:linear-gradient(180deg,rgba(121,8,24,.58),rgba(64,4,14,.80)) !important;
  color:#ffe5e9 !important;
  box-shadow:0 0 14px rgba(255,82,105,.22),inset 0 0 14px rgba(255,82,105,.05) !important;
  transform:translateY(-1px) !important;
  outline:none !important;
}

/* Fermeture du drawer : action neutre/Matrix, croix plus visible. */
#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-drawer-close {
  appearance:none !important;
  -webkit-appearance:none !important;
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(88,255,114,.48) !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,rgba(8,52,20,.52),rgba(2,27,9,.78)) !important;
  color:#dffff0 !important;
  font:800 26px/1 "Courier New",monospace !important;
  box-shadow:inset 0 0 14px rgba(88,255,114,.04),0 0 10px rgba(88,255,114,.08) !important;
  text-shadow:0 0 8px rgba(88,255,114,.30) !important;
  cursor:pointer !important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease,transform .16s ease !important;
}

#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-drawer-close:hover,
#rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-drawer-close:focus-visible {
  border-color:#7dff95 !important;
  background:linear-gradient(180deg,rgba(12,84,31,.68),rgba(3,39,13,.92)) !important;
  color:#ffffff !important;
  box-shadow:0 0 16px rgba(88,255,114,.18),inset 0 0 18px rgba(88,255,114,.055) !important;
  transform:translateY(-1px) !important;
  outline:none !important;
}

/* Médiathèque : miniature 42px pour les images, glyph Matrix pour les autres. */
#rayan-ai-root #rayan-ai-modal .rai-media-item {
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:9px !important;
  padding:9px !important;
  border-color:rgba(88,255,114,.24) !important;
  border-radius:12px !important;
  background:rgba(3,28,10,.52) !important;
}

#rayan-ai-root #rayan-ai-modal .rai-media-preview {
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:0 !important;
  color:#dfffe5 !important;
  text-decoration:none !important;
}

#rayan-ai-root #rayan-ai-modal .rai-media-thumb {
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  border:1px solid rgba(88,255,114,.30) !important;
  border-radius:9px !important;
  background:rgba(2,20,7,.84) !important;
  color:#72ff89 !important;
  font:700 15px/1 "Courier New",monospace !important;
  box-shadow:inset 0 0 12px rgba(88,255,114,.035) !important;
}

#rayan-ai-root #rayan-ai-modal .rai-media-thumb img {
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
}

#rayan-ai-root #rayan-ai-modal .rai-media-info {
  min-width:0 !important;
  display:block !important;
}

#rayan-ai-root #rayan-ai-modal .rai-media-info strong,
#rayan-ai-root #rayan-ai-modal .rai-media-info small {
  display:block !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

#rayan-ai-root #rayan-ai-modal .rai-media-info strong {
  color:#e8ffec !important;
  font:600 9.5px/1.25 "Courier New",monospace !important;
}

#rayan-ai-root #rayan-ai-modal .rai-media-info small {
  margin-top:3px !important;
  color:rgba(209,255,220,.46) !important;
  font:400 8px/1.15 "Courier New",monospace !important;
}

@media (max-width:760px) {
  #rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-history-row {
    grid-template-columns:minmax(0,1fr) 46px !important;
  }
  #rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-history-delete {
    width:46px !important;
    min-width:46px !important;
  }
  #rayan-ai-root #rayan-ai-modal .rai-chat-drawer .rai-drawer-close {
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
  }
  #rayan-ai-root #rayan-ai-modal .rai-media-thumb {
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }
}