/* vbxchat.css — Brucity Digital Assistant
 * Ville de Bruxelles
 * le CSS ne couvre que ce que styleOptions ignore.
 * L'intérieur du "canvas" se règle d'abord par styleOptions en JS */


#iframeChatbot {
  --vbx-black: #000;
  --vbx-white: #fff;
  --vbx-grey: #6e6e6e;
  --vbx-rule: #dcdcdc;
  --vbx-surface: #f2f2f2;

  --vbx-font: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --vbx-radius: 2px;
  --vbx-gutter: .85rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--vbx-white);
  color: var(--vbx-black);
  font-family: var(--vbx-font);
}

#webchat {
  flex: 1 1 auto;
  min-height: 0; /* sans quoi le flex enfant refuse de défiler */
}

/* Seul aplat noir. position/z-index évitent que l'infobulle du bouton
   ne soit rognée par le canvas. */
#iframeChatbot .chatbot__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem var(--vbx-gutter);
  background: var(--vbx-black);
  color: var(--vbx-white);
}

#iframeChatbot .chatbot__title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Bouton carré à icône ; le libellé vit dans aria-label. */
#iframeChatbot .chatbot__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  color: var(--vbx-white);
  background: none;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--vbx-radius);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  /* Infobulle maison. Pas d'attribut title : il en afficherait une
   seconde, native, par-dessus. */
  position: relative;
}

#iframeChatbot .chatbot__download svg {
  display: block;
  width: 1rem;
  height: 1rem;
}


#iframeChatbot .chatbot__download::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  z-index: 2;
  padding: .3rem .5rem;
  font-size: .7rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--vbx-black);
  background: var(--vbx-white);
  border: 1px solid var(--vbx-black);
  border-radius: var(--vbx-radius);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease .25s, visibility 0s linear .37s;
}

#iframeChatbot .chatbot__download:hover::after,
#iframeChatbot .chatbot__download:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transition-delay: .25s, 0s;
}

#iframeChatbot .chatbot__download:hover {
  color: var(--vbx-black);
  background: var(--vbx-white);
  border-color: var(--vbx-white);
}

#iframeChatbot .chatbot__download:focus-visible {
  outline: 2px solid var(--vbx-white);
  outline-offset: 2px;
}

#iframeChatbot .chatbot__download[hidden] { display: none; }

#iframeChatbot .chatbot__error {
  margin: 0;
  padding: var(--vbx-gutter);
  font-size: .85rem;
  line-height: 1.5;
  background: var(--vbx-surface);
  border-top: 1px solid var(--vbx-rule);
}

#iframeChatbot .chatbot__error[hidden] { display: none; }

/* === Intérieur du canvas WebChat === */
#iframeChatbot .webchat__basic-transcript {
  font-family: var(--vbx-font);
}

/* Interlignage plus généreux que le défaut. */
#iframeChatbot .webchat__bubble__content {
  font-size: .92rem;
  line-height: 1.55;
  /* Respiration interne des bulles. */
  padding: .1rem .25rem;
}

/* Liens soulignés, jamais colorés. */
#iframeChatbot .webchat__bubble__content a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

#iframeChatbot .webchat__bubble__content a:hover {
  text-decoration-thickness: 2px;
}

/* Horodatages et libellés secondaires. */
#iframeChatbot .webchat__stacked-layout__status {
  font-size: .7rem;
  color: var(--vbx-grey);
}

/* Avatar retiré (avatarSize: 0) ; filet de sécurité si une version le rend. */
#iframeChatbot .webchat__initialsAvatar,
#iframeChatbot .webchat__imageAvatar {
  display: none;
}

/* min(82%, bubbleMaxWidth). Ne contraignez jamais
   .webchat__stacked-layout__main : il porte l'alignement des tours. */
#iframeChatbot .webchat__bubble {
  max-width: 82%;
}

/* Largeur pleine, sans marge parasite. */
#iframeChatbot .webchat__basic-transcript__transcript {
  padding-inline: .5rem;
}



/* Zone de saisie. */
#iframeChatbot .webchat__send-box-text-box__input,
#iframeChatbot .webchat__send-box__text-box textarea {
  font-family: var(--vbx-font);
  font-size: .92rem;
}

/* Actions suggérées : cernées, remplies au survol. */
#iframeChatbot .webchat__suggested-action {
  font-size: .8rem;
  letter-spacing: .02em;
  transition: background-color .15s ease, color .15s ease;
}

#iframeChatbot .webchat__suggested-action:hover {
  color: var(--vbx-white) !important; /* WebChat pose ces couleurs en inline */
  background: var(--vbx-black) !important;
}

/* Cartes adaptatives. */
#iframeChatbot .ac-adaptiveCard {
  font-family: var(--vbx-font) !important;
  padding: 0 !important;
}

#iframeChatbot .ac-textBlock {
  font-family: var(--vbx-font) !important;
}

#iframeChatbot .ac-pushButton {
  border-radius: var(--vbx-radius) !important;
  border: 1px solid var(--vbx-black) !important;
  background: var(--vbx-white) !important;
  color: var(--vbx-black) !important;
  font-family: var(--vbx-font) !important;
}

#iframeChatbot .ac-pushButton:hover {
  background: var(--vbx-black) !important;
  color: var(--vbx-white) !important;
}

/* Bouton « défiler vers le bas ». */
#iframeChatbot .webchat__scrollToEndButton {
  border-radius: var(--vbx-radius);
  font-size: .72rem;
  letter-spacing: .04em;
}

/* Ascenseur discret. */
#iframeChatbot .webchat__basic-transcript__scrollable {
  scrollbar-width: thin;
  scrollbar-color: var(--vbx-rule) transparent;
}

#iframeChatbot .webchat__basic-transcript__scrollable::-webkit-scrollbar {
  width: 8px;
}

#iframeChatbot .webchat__basic-transcript__scrollable::-webkit-scrollbar-thumb {
  background: var(--vbx-rule);
}

/* === Accessibilité === */
/* Focus visible, y compris sur les éléments internes de WebChat. */
#iframeChatbot :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #iframeChatbot *,
  #iframeChatbot *::before,
  #iframeChatbot *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

@media (prefers-contrast: more) {
  #iframeChatbot { --vbx-grey: #3d3d3d; --vbx-rule: #000; }
}

/* === Mobile === */

/* Sous 480px, le panneau occupe l'écran. */
@media (width <= 480px) {
  #iframeChatbot {
    position: fixed;
    inset: 0;
    z-index: 1050;
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    border: 0;
  }
}