/* Signalement de bogue : modale de capture + annotation.
   Fichier séparé plutôt qu'un ajout à alyahub.css : l'arbre est partagé entre
   plusieurs sessions, et un fichier neuf ne peut pas entrer en conflit.
   Palette : --alya-blue est un CYAN DE FOND, jamais du texte (cf. alyahub.css) ;
   le bleu de texte est --alya-ink. */

.afb-overlay {
  position: fixed;
  inset: 0;
  /* Le voile est enfant direct de body pour garder son propre z-index,
     même devant une modale Bootstrap ouverte. */
  pointer-events: auto;
  /* Le plafond des entiers, et c'est mesuré, pas décoratif : la bulle ALYA Chat
     (plugin distinct) pose son voile à 2147483646, donc à 20000 le panneau de
     signalement était CRÉÉ puis enterré dessous. Mesure avec le chat ouvert :
     le clic au centre du panneau tombait sur un <p> du chat, et celui du bouton
     « Envoyer » sur .no-conversation-selected. Le panneau est le dernier écran
     que l'utilisateur doit pouvoir atteindre : il ne peut pas être second.
     Effet de bord voulu : il passe aussi devant la barre d'administration
     WordPress (99999, épinglée en bas par ce thème), qui recouvrait son pied
     sur une fenêtre courte. */
  z-index: 2147483647;
  background: rgba(20, 20, 20, .62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  overflow: auto;
}

.afb-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .32);
  width: 100%;
  max-width: 1160px;
  max-height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: #232222;
}

.afb-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid #e7e7ea;
  background: #fcfcfd;
  flex: none;
}
.afb-head h2 { margin: 0; font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.afb-head .afb-sub { font-size: .78rem; color: #6b6a6a; }
.afb-x {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: #6b6a6a; padding: 2px 6px; border-radius: 6px;
}
.afb-x:hover { background: #ececef; color: #232222; }

.afb-body { display: flex; gap: 0; min-height: 0; flex: 1; }
.afb-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 14px 16px 16px; }
.afb-right {
  flex: 0 0 340px; border-left: 1px solid #e7e7ea; background: #fcfcfd;
  padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; overflow: auto;
}

/* Barre d'outils d'annotation */
.afb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.afb-tool {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #dcdce0; background: #fff; border-radius: 8px;
  padding: 6px 10px; font-size: .8rem; font-weight: 600; cursor: pointer; color: #4c4a4a;
}
.afb-tool:hover { border-color: #b9b9c0; background: #f7f7f9; }
.afb-tool svg { display: block; flex: none; }
/* Outils : icône seule, bouton carré. Le sens passe par title + aria-label. */
.afb-tool--icon { padding: 7px 9px; }
.afb-tool[disabled] svg { opacity: .6; }
.afb-tool.is-on { background: var(--alya-blue, #34bcde); border-color: var(--alya-blue, #34bcde); color: #1a1a1a; }
.afb-tool[disabled] { opacity: .45; cursor: default; }
.afb-sep { width: 1px; height: 22px; background: #e7e7ea; margin: 0 3px; }
/* Annuler / Supprimer / Tout effacer restent groupes a droite : quand la barre
   passe sur deux lignes (5 outils + 6 couleurs + epaisseur), ils basculent
   ensemble au lieu de se disperser. */
.afb-acts { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.afb-swatch {
  width: 24px; height: 24px; border-radius: 6px; border: 2px solid #fff;
  box-shadow: 0 0 0 1px #cfcfd4; cursor: pointer; padding: 0;
}
.afb-swatch.is-on { box-shadow: 0 0 0 2px #232222; }
.afb-size { font-size: .8rem; color: #4c4a4a; display: inline-flex; align-items: center; gap: 5px; }
.afb-size input { width: 74px; }

/* Toile */
.afb-canvas-wrap {
  flex: 1; min-height: 0; border: 1px solid #e7e7ea; border-radius: 10px;
  background: #f3f3f5 repeating-conic-gradient(#eaeaee 0% 25%, #f3f3f5 0% 50%) 0 0 / 18px 18px;
  display: flex; align-items: center; justify-content: center; overflow: auto; padding: 8px;
}
.afb-canvas-wrap canvas { max-width: 100%; max-height: 100%; display: block; box-shadow: 0 2px 10px rgba(0,0,0,.14); cursor: crosshair; }
.afb-canvas-wrap.is-text canvas { cursor: text; }
/* En mode déplacement le curseur est posé en JS au survol (main sur une forme,
   flèche sur le vide) : la croix de traçage y serait mensongère. */
.afb-canvas-wrap.is-move canvas { cursor: default; }
/* min-height : la ligne est reservee MEME vide. Sans elle, la premiere
   annotation faisait apparaitre ce texte et remontait toute la capture de
   9 px sous le curseur, pile au moment ou l'utilisateur regarde ce qu'il
   vient de poser (mesure : la toile passait de y=330,48 a y=321,59). */
.afb-shot-note { font-size: .74rem; color: #6b6a6a; margin-top: 8px; line-height: 1.35; min-height: 1.35em; }

/* Toile écartée : l'image est grisée SUR PLACE plutôt que retirée. Elle reste
   la preuve de ce qui ne partira pas ; la faire disparaître laisserait un trou
   et ferait douter que la capture ait eu lieu. `pointer-events` en plus du
   grisage : les contrôles sont déjà `disabled` côté JS, mais la toile elle-même
   n'est pas un contrôle et resterait dessinable. */
.afb-canvas-wrap.is-muted canvas { filter: grayscale(1); opacity: .34; pointer-events: none; cursor: default; }
.afb-tools.is-off { opacity: .5; }

/* Le compteur d'annotations et la case partagent une ligne : la case appartient
   à l'image, pas au panneau de droite. `align-items: flex-start` + la même
   marge haute que .afb-shot-note gardent les deux sur la même ligne de base
   quand le compteur passe sur deux lignes (l'aide de l'outil Déplacer). */
.afb-shot-foot { display: flex; align-items: flex-start; gap: 14px; }
.afb-shot-foot .afb-shot-note { flex: 1 1 auto; min-width: 0; }
.afb-noimg {
  flex: none; margin: 8px 0 0; display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; color: #4c4a4a; cursor: pointer; user-select: none;
}
.afb-noimg input { margin: 0; cursor: pointer; }
.afb-noimg:hover { color: #232222; }

/* Retirer une image TÉLÉVERSÉE. Volontairement discret et à la place exacte de
   la case « ne pas joindre » (les deux s'excluent, cf. applyImageState) : la
   capture automatique s'écarte, une image importée se retire. */
.afb-linkbtn {
  flex: none; margin: 8px 0 0; border: 0; background: transparent; padding: 0;
  font: inherit; font-size: .76rem; color: #4c4a4a; cursor: pointer; text-decoration: underline;
}
.afb-linkbtn:hover { color: #a3121f; }

/* Bande de vignettes. Un signalement porte la capture automatique PLUS ce que
   l'utilisateur importe : la bande est ce qui rend les images présentes
   visibles et sélectionnables une par une. Elle défile horizontalement plutôt
   que de passer sur deux lignes, sinon la toile perd de la hauteur dès la
   troisième image. */
.afb-strip {
  display: flex; align-items: center; gap: 9px;
  margin-top: 10px; padding-bottom: 4px; overflow-x: auto; overflow-y: hidden;
}
.afb-thumb-wrap { position: relative; flex: none; padding-top: 5px; padding-right: 5px; }
.afb-thumb {
  display: block; position: relative; width: 88px; height: 58px; padding: 0;
  border: 2px solid #dcdce0; border-radius: 8px; background: #fff;
  cursor: pointer; overflow: hidden;
}
.afb-thumb:hover { border-color: #b9b9c0; }
.afb-thumb.is-on { border-color: var(--alya-ink, #096dd9); box-shadow: 0 0 0 2px rgba(9, 109, 217, .18); }
.afb-thumb-img { display: block; width: 100%; height: 100%; }
/* Même grisage que la toile écartée : la vignette dit d'un coup d'œil ce qui ne
   partira pas, sans quitter la bande. */
.afb-thumb.is-off .afb-thumb-img { filter: grayscale(1); opacity: .34; }
.afb-thumb-badge {
  position: absolute; right: 3px; bottom: 3px; max-width: calc(100% - 8px);
  background: rgba(20, 20, 20, .82); color: #fff; border-radius: 6px;
  padding: 1px 5px; font-size: .64rem; font-weight: 700; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.afb-thumb-x {
  position: absolute; top: 0; right: 0; width: 19px; height: 19px; padding: 0;
  border: 1px solid #dcdce0; border-radius: 50%; background: #fff; color: #4c4a4a;
  font-size: .95rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.afb-thumb-x:hover { background: #fdecee; color: #a3121f; border-color: #f6ccd1; }
/* Tuile d'ajout : trait discontinu, la convention d'une place à remplir. */
.afb-thumb--add {
  flex: none; width: auto; min-width: 92px; height: 58px; padding: 0 11px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-style: dashed; color: #4c4a4a; font-size: .7rem; font-weight: 700; line-height: 1.2; text-align: center;
}
.afb-thumb--add:hover { background: #f7f7f9; }
.afb-thumb--add[disabled] { opacity: .45; cursor: default; }
.afb-strip-hint { flex: none; max-width: 250px; font-size: .71rem; color: #6b6a6a; line-height: 1.35; }

/* Survol d'un fichier au-dessus du panneau. Le liseré est sur la TOILE, là où
   l'image va atterrir, alors que le dépôt est accepté sur tout le voile (sans
   quoi un fichier lâché à côté serait ouvert par le navigateur, qui remplacerait
   la page et le texte déjà rédigé). */
.afb-canvas-wrap.is-drop { outline: 2px dashed var(--alya-ink, #096dd9); outline-offset: -5px; }

/* Panneau de droite */
.afb-label { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6b6a6a; margin-bottom: 5px; display: block; }
.afb-right textarea {
  width: 100%; min-height: 132px; resize: vertical; border: 1px solid #dcdce0;
  border-radius: 8px; padding: 9px 11px; font: inherit; font-size: .88rem; line-height: 1.5;
}
.afb-right textarea:focus { outline: 2px solid var(--alya-ink, #096dd9); outline-offset: 1px; border-color: transparent; }
.afb-meta { font-size: .76rem; color: #4c4a4a; line-height: 1.65; word-break: break-word; }
.afb-meta b { color: #232222; }
.afb-logs summary { cursor: pointer; font-size: .78rem; color: var(--alya-ink, #096dd9); font-weight: 600; }
.afb-logs pre {
  margin: 7px 0 0; max-height: 168px; overflow: auto; background: #232222; color: #e9e9ec;
  border-radius: 8px; padding: 9px 10px; font-size: .69rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.afb-logs .afb-empty { font-size: .76rem; color: #6b6a6a; margin-top: 6px; }

.afb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.afb-btn {
  border: 0; border-radius: 9px; padding: 11px 16px; font: inherit; font-weight: 700;
  font-size: .88rem; cursor: pointer;
}
.afb-btn-primary { background: var(--alya-ink, #096dd9); color: #fff; }
.afb-btn-primary:hover { background: var(--alya-ink-hover, #06498f); }
.afb-btn-primary[disabled] { background: #b9b9c0; cursor: default; }
.afb-btn-ghost { background: transparent; color: #4c4a4a; border: 1px solid #dcdce0; }
.afb-btn-ghost:hover { background: #f1f1f4; }
/* Pendant l'envoi, Annuler est inerte : la tâche est en vol et fermer priverait
   l'utilisateur du verdict. L'aspect doit le dire. */
.afb-btn[disabled] { opacity: .5; cursor: default; }
.afb-btn-ghost[disabled]:hover { background: transparent; }
.afb-msg { font-size: .8rem; line-height: 1.5; border-radius: 8px; padding: 9px 11px; }
.afb-msg.err { background: #fdecee; color: #a3121f; border: 1px solid #f6ccd1; }
.afb-msg.ok  { background: #eaf7ee; color: #1a6b34; border: 1px solid #c3e6ce; }
.afb-msg a { color: inherit; font-weight: 700; }

/* État de capture */
.afb-loading { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 58px 20px; color: #4c4a4a; font-size: .9rem; }
.afb-spin {
  width: 18px; height: 18px; border: 2px solid #d5d5da; border-top-color: var(--alya-ink, #096dd9);
  border-radius: 50%; animation: afb-spin .8s linear infinite;
}
@keyframes afb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .afb-spin { animation-duration: 2.4s; } }

/* Le bouton dans la navbar suit le gabarit .navbar-profile a (100px de large) */
#hub .navbar .navbar-menu .afb-trigger {
  height: var(--alya-navbar-h, 100px); width: 100px;
  display: flex; align-items: center; justify-content: center;
  background: var(--alya-grey, #2a2a2a); border: 0; cursor: pointer; padding: 0;
}
#hub .navbar .navbar-menu .afb-trigger:hover { background: var(--alya-grey-hover, #434343); }
/* Le survol arrive par le bouclier, qui intercepte le curseur a la place du
   bouton (cf. le commentaire « bouclier » dans js/alya-feedback.js). Meme
   valeur que :hover, pas une nuance approchante : c'est le meme etat. */
#hub .navbar .navbar-menu .afb-trigger.afb-trigger--hover { background: var(--alya-grey-hover, #434343); }

/* Bouclier de clic. Transparent et sans decoration : c'est le VRAI bouton qu'on
   voit dessous, assombri par le voile de la modale comme le reste de la page.
   Au-dessus des voiles du Hub (1050 bootstrap, 9999-10000 faits main) mais
   VOLONTAIREMENT sous .afb-overlay et sous le voile du chat : monte plus haut,
   il deviendrait un piege a clics invisible sur le panneau qui est au-dessus de
   lui. Le script le retire de toute facon des que notre panneau est monte. */
.afb-shield {
  position: fixed;
  z-index: 20001;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Acces au meme signalement depuis les modales Bootstrap et React. La classe
   propre au widget evite de dependre des variantes de boutons de chaque module. */
body button.afb-modal-trigger {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 7px 11px;
  border: 1px solid #b9c3cc;
  border-radius: 6px;
  background: #fff;
  color: #344454;
  font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
body button.afb-modal-trigger:hover { background: #eef5f8; border-color: #65899d; color: #173b50; }
body button.afb-modal-trigger:focus-visible { outline: 2px solid var(--alya-ink, #096dd9); outline-offset: 2px; }
body .genai-product-list-header > button.afb-modal-trigger { margin-left: 0; }
body .genai-product-list-header > .genai-product-list-actions { margin-left: auto; }
body button.afb-modal-trigger--standalone {
  display: block;
  width: max-content;
  margin: 0 0 8px auto;
}

@media (max-width: 900px) {
  .afb-body { flex-direction: column; }
  .afb-right { flex: none; border-left: 0; border-top: 1px solid #e7e7ea; }
  .afb-canvas-wrap { min-height: 240px; }
  .afb-strip-hint { display: none; }
  #hub .navbar .navbar-menu .afb-trigger { width: 64px; }
}