/* ========================================================================== */
/* RAG AI Connector 0.20.8 — barre OUTILS extensible universelle             */
/* PC + tablette + téléphone + mini-téléphone                                 */
/* ========================================================================== */

#rayan-ai-root #rayan-ai-modal .rai-composer-dock{
  position:relative!important;
  overflow:visible!important;
}

/* La languette OUTILS devient visible sur tous les formats. */
#rayan-ai-root #rayan-ai-modal .rai-mobile-tools-handle,
#rayan-ai-root #rayan-ai-modal .rai-tools-handle{
  appearance:none!important;
  width:100%!important;
  height:30px!important;
  min-height:30px!important;
  margin:0!important;
  padding:4px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:0!important;
  border-top:1px solid rgba(88,255,114,.16)!important;
  border-bottom:1px solid rgba(88,255,114,.13)!important;
  border-radius:0!important;
  background:linear-gradient(180deg,rgba(5,34,12,.68),rgba(1,18,6,.92))!important;
  color:rgba(151,255,167,.82)!important;
  box-shadow:inset 0 1px 0 rgba(139,255,156,.025)!important;
  font:700 8px/1 "Courier New",monospace!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
  user-select:none!important;
  -webkit-tap-highlight-color:transparent!important;
}

#rayan-ai-root #rayan-ai-modal .rai-mobile-tools-handle:hover,
#rayan-ai-root #rayan-ai-modal .rai-tools-handle:hover,
#rayan-ai-root #rayan-ai-modal .rai-mobile-tools-handle:focus-visible,
#rayan-ai-root #rayan-ai-modal .rai-tools-handle:focus-visible{
  background:linear-gradient(180deg,rgba(8,48,18,.80),rgba(2,24,8,.96))!important;
  color:#b8ffc3!important;
  outline:none!important;
  box-shadow:inset 0 -1px 0 rgba(88,255,114,.09),0 -5px 16px rgba(0,0,0,.12)!important;
}

#rayan-ai-root #rayan-ai-modal .rai-mobile-tools-grip{
  width:32px!important;
  height:12px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  flex:0 0 auto!important;
}
#rayan-ai-root #rayan-ai-modal .rai-mobile-tools-grip i{
  display:block!important;
  width:27px!important;
  height:1px!important;
  border-radius:999px!important;
  background:rgba(109,255,131,.72)!important;
  box-shadow:0 0 5px rgba(88,255,114,.20)!important;
}
#rayan-ai-root #rayan-ai-modal .rai-mobile-tools-grip i:nth-child(2){width:21px!important;opacity:.76!important}
#rayan-ai-root #rayan-ai-modal .rai-mobile-tools-grip i:nth-child(3){width:15px!important;opacity:.55!important}

#rayan-ai-root #rayan-ai-modal .rai-mobile-tools-label{
  display:inline-block!important;
  opacity:.68!important;
  font-size:7px!important;
  line-height:1!important;
  letter-spacing:.16em!important;
}

#rayan-ai-root #rayan-ai-modal .rai-mobile-tools-chevron{
  font-size:12px!important;
  color:#77ff8d!important;
  text-shadow:0 0 7px rgba(88,255,114,.28)!important;
  transform:translateY(-1px)!important;
}

/* Fermé sur tous les écrans : seuls la languette et le champ restent visibles. */
#rayan-ai-root #rayan-ai-modal .rai-composer-dock:not(.is-tools-open) .rai-chat-tools{
  display:none!important;
}

/* Ouvert : les outils se développent vers le haut du composer. */
#rayan-ai-root #rayan-ai-modal .rai-composer-dock.is-tools-open .rai-chat-tools{
  display:flex!important;
  animation:raiToolsUniversalOpen .18s ease-out both!important;
  max-height:min(48vh,380px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(88,255,114,.36) rgba(0,0,0,.18)!important;
}

#rayan-ai-root #rayan-ai-modal .rai-composer-dock.is-tools-open .rai-mobile-tools-handle,
#rayan-ai-root #rayan-ai-modal .rai-composer-dock.is-tools-open .rai-tools-handle{
  background:linear-gradient(180deg,rgba(7,48,17,.84),rgba(2,24,8,.96))!important;
  color:#b9ffc5!important;
}

/* Desktop : panneau horizontal/respirant, mais toujours repliable. */
@media(min-width:761px){
  #rayan-ai-root #rayan-ai-modal .rai-mobile-tools-handle,
  #rayan-ai-root #rayan-ai-modal .rai-tools-handle{
    height:28px!important;
    min-height:28px!important;
  }
  #rayan-ai-root #rayan-ai-modal .rai-composer-dock.is-tools-open .rai-chat-tools{
    max-height:min(42vh,320px)!important;
  }
}

/* Tablettes : même mécanique, zone d’outils un peu plus haute. */
@media(min-width:761px) and (max-width:1100px){
  #rayan-ai-root #rayan-ai-modal .rai-composer-dock.is-tools-open .rai-chat-tools{
    max-height:min(46vh,350px)!important;
  }
}

/* Téléphones : conserver le geste tactile et la compacité V0.20.6. */
@media(max-width:760px){
  #rayan-ai-root #rayan-ai-modal .rai-mobile-tools-handle,
  #rayan-ai-root #rayan-ai-modal .rai-tools-handle{
    touch-action:pan-x!important;
  }
  #rayan-ai-root #rayan-ai-modal .rai-composer-dock.is-tools-open .rai-chat-tools{
    max-height:min(46vh,330px)!important;
  }
}

/* Mini-téléphone : le texte Outils reste visible mais réduit. */
@media(max-width:430px){
  #rayan-ai-root #rayan-ai-modal .rai-mobile-tools-handle,
  #rayan-ai-root #rayan-ai-modal .rai-tools-handle{
    height:27px!important;
    min-height:27px!important;
    padding:3px 7px!important;
    gap:5px!important;
  }
  #rayan-ai-root #rayan-ai-modal .rai-mobile-tools-label{
    display:inline-block!important;
    font-size:6.5px!important;
    letter-spacing:.13em!important;
  }
  #rayan-ai-root #rayan-ai-modal .rai-mobile-tools-grip{
    width:27px!important;
  }
  #rayan-ai-root #rayan-ai-modal .rai-mobile-tools-grip i{width:23px!important}
  #rayan-ai-root #rayan-ai-modal .rai-mobile-tools-grip i:nth-child(2){width:18px!important}
  #rayan-ai-root #rayan-ai-modal .rai-mobile-tools-grip i:nth-child(3){width:13px!important}
  #rayan-ai-root #rayan-ai-modal .rai-composer-dock.is-tools-open .rai-chat-tools{
    max-height:min(48vh,300px)!important;
  }
}

@keyframes raiToolsUniversalOpen{
  from{opacity:.2;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  #rayan-ai-root #rayan-ai-modal .rai-composer-dock.is-tools-open .rai-chat-tools{
    animation:none!important;
  }
}