/**
 * Clavardage / Coach NDL (#chat-screen) — en-tête aligné sur la page
 * Notes / Photos : barre claire, flou, bordure, encoches. Les anciennes
 * règles .chatroom-header (fond noir) ne s’appliquent plus au HTML actuel
 * (on utilise .formulaire-header-feuille-temps + .coach-header).
 */

/* Même schéma que la feuille de temps : #chat-screen en flex dans #app-container (.chatroom.screen.active),
 * en-tête .formulaire-header fixed (base.css). Le dégagement sous l’en-tête est sur .formulaire-main-feuille-temps
 * (pas padding-top sur #chat-screen) pour que le fond texturé du fil remonte jusqu’au header sans bande « vide ». */
#chat-screen.chatroom.screen.formulaire-has-bottom-bar {
  position: relative;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
  box-sizing: border-box;
  /* Bas du header fixe ≈ safe-area + 10 + min-height 48 + padding bas 12 (− léger collage pour éviter la bande sous l’en-tête). */
  --chat-header-stack: calc(var(--app-safe-top, env(safe-area-inset-top, 0px)) + 67px);
  /* Réserve sous le fil pour la barre d’émission (position absolute) — sinon WebKit iOS la rogne. */
  --chat-composer-reserve: calc(78px + env(safe-area-inset-bottom, 0px));
}

.app-ios #chat-screen.chatroom.screen.formulaire-has-bottom-bar {
  padding-top: 0 !important;
  --chat-header-stack: calc(var(--app-safe-top, env(safe-area-inset-top, 0px)) + 84px);
  --chat-composer-reserve: calc(92px + env(safe-area-inset-bottom, 0px));
}

/* Clavier ouvert : même décalage vertical que l’en-tête (--chat-vv-offset-top) pour le fil et le menu slider. */
#chat-screen.chat-vv-keyboard.chatroom.screen.formulaire-has-bottom-bar {
  --chat-composer-reserve: 88px !important;
  --chat-header-stack: calc(var(--app-safe-top, env(safe-area-inset-top, 0px)) + var(--chat-vv-offset-top, 0px) + 67px);
  padding-top: 0 !important;
}

html.app-ios #chat-screen.chat-vv-keyboard.chatroom.screen.formulaire-has-bottom-bar {
  --chat-header-stack: calc(var(--app-safe-top, env(safe-area-inset-top, 0px)) + var(--chat-vv-offset-top, 0px) + 84px);
  padding-top: 0 !important;
}

.app-android #chat-screen.chatroom.screen.formulaire-has-bottom-bar {
  padding-top: 0 !important;
}

#chat-screen.chatroom.screen.active {
  -webkit-overflow-scrolling: auto;
  z-index: 100;
  /* Garder le fond app-bg du #app-container .screen (base.css) — ne pas forcer transparent. */
  width: 100%;
  flex: 1 1 auto;
  align-self: stretch;
  height: 100%;
  min-height: 0;
}

/* WebKit iOS : backdrop-filter sur bandeaux fixed peut rendre toute la colonne vide (calque GPU). */
@supports (-webkit-touch-callout: none) {
  #chat-screen.chatroom.screen.active .coach-header.formulaire-header-feuille-temps {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #ffffff;
  }
  #chat-screen .coach-footer {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #f3f4f6;
  }
}

/* Chat ouvert : padding bas html/body = bande du dégradé sous la zone utile ; on l’ôte (Safari / PWA). */
html:has(#chat-screen.active),
html:has(#chat-screen.active) body {
  padding-bottom: 0 !important;
}

#app-container:has(#chat-screen.active) {
  min-height: 100%;
  height: 100%;
  /* Pas de 100dvh ici : le « d » suit le clavier et rétrécit le layout (≠ feuille de temps en flux). */
  padding-bottom: 0 !important;
}

/* Chaîne hauteur : % (pas de dvh sur ces ancêtres) pour éviter le « rétrécissement » au clavier. */
html:has(#chat-screen.active),
body:has(#chat-screen.active) {
  height: 100%;
  min-height: 100%;
}

#simulator-wrapper.app-mode:has(#chat-screen.active),
.phone-scale-wrap:has(#chat-screen.active),
#phone-frame.app-mode:has(#chat-screen.active) {
  min-height: 100%;
  height: 100%;
}

/* En-tête « collante » au visual viewport ; JS peut surcharger top/z-index sur iOS (WKWebView). */
#chat-screen.chatroom.screen.active .coach-header.formulaire-header-feuille-temps {
  position: fixed !important;
  top: var(--chat-vv-offset-top, 0px);
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  flex-shrink: 0;
  z-index: 250;
  pointer-events: auto;
  /* max(…) = hauteur d’origine ; pas 10px + safe (ça grossissait le blanc). */
  padding: max(10px, var(--app-safe-top, env(safe-area-inset-top, 0px))) max(8px, var(--app-safe-right, env(safe-area-inset-right, 0px))) 12px max(8px, var(--app-safe-left, env(safe-area-inset-left, 0px)));
  min-height: 48px;
  border-bottom: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  align-items: center;
  gap: 8px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: none !important;
  animation: none !important;
  -webkit-transform: none !important;
  transform: none !important;
}

#chat-screen .coach-header .formulaire-back.coach-header-back {
  color: var(--text, #1a1a1a);
  padding: 6px 4px;
  flex-shrink: 0;
}

#chat-screen .coach-header .coach-header-arrow {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

/* Même rôle qu’avant .coach-title-archive-row : titre fluide entre retour et actions (gabarit « Choisir un projet »). */
#chat-screen .coach-header > h1.formulaire-title {
  min-width: 0;
}

#chat-screen .coach-header-title {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  font-size: 1.1rem;
}

/* Icône (robot ou utilisateur) directement à côté du nom — pas d’espace avec les boutons archive */
#chat-screen .coach-header-title-label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 0 1 auto;
  max-width: 100%;
}

/* En-tête : photo + bulle présence (conversation employé) */
#chat-screen .chatroom-header-peer-visual {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
#chat-screen .chatroom-header-peer-visual[hidden] {
  display: none !important;
}
#chat-screen .chatroom-header-avatar-img,
#chat-screen .chatroom-header-avatar-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-sizing: border-box;
}
#chat-screen .chatroom-header-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.22);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
}
#chat-screen .chatroom-header-avatar-img {
  display: block;
  object-fit: cover;
  background: rgba(148, 163, 184, 0.15);
}
#chat-screen .chatroom-header-avatar-img[hidden],
#chat-screen .chatroom-header-avatar-fallback[hidden] {
  display: none !important;
}
#chat-screen .chatroom-header-peer-visual .chat-slider-presence {
  position: absolute;
  right: -1px;
  bottom: -1px;
  margin: 0;
  width: 10px;
  height: 10px;
  min-width: 10px;
  border: 2px solid var(--bg-dark, #1e293b);
  box-sizing: border-box;
  box-shadow: none;
}
#chat-screen .chatroom-header-peer-visual .chat-slider-presence--online {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

#chat-screen .coach-header-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-muted, #6b7280);
}

/* L’attribut HTML hidden doit gagner sur display:inline-flex (sinon les 2 icônes restent visibles). */
#chat-screen .coach-header-icon[hidden] {
  display: none !important;
}

#chat-screen .coach-header-icon svg {
  width: 22px;
  height: 22px;
}

#chat-screen #chatroom-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chat-screen .coach-archive-box {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

/* L’attribut hidden doit rester effectif (sinon display:flex du bloc l’emporte dans certains moteurs). */
#chat-screen .coach-archive-box[hidden] {
  display: none !important;
}

#chat-screen .coach-archive-box-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text, #1a1a1a);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

#chat-screen .coach-archive-box-btn:hover,
#chat-screen .coach-archive-box-btn:focus-visible {
  background: rgba(0, 0, 0, 0.08);
  outline: none;
}

#chat-screen .coach-archive-box-btn svg {
  width: 20px;
  height: 20px;
}

/* Ancien style « burger blanc sur fond noir » : inadapté ici. */
#chat-screen .chatroom-burger.coach-burger {
  color: var(--text, #1a1a1a);
  background: transparent;
  border-radius: 10px;
}

#chat-screen .chatroom-burger.coach-burger:hover,
#chat-screen .chatroom-burger.coach-burger:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  outline: none;
}

/* Fermeture type fenêtre plein écran (mobile ; sur grand écran on garde Retour à gauche) */
#chat-screen .chatroom-close-btn.coach-header-close {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text, #1a1a1a);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#chat-screen .chatroom-close-icon {
  width: 22px;
  height: 22px;
  display: block;
}
#chat-screen .chatroom-close-btn.coach-header-close:hover,
#chat-screen .chatroom-close-btn.coach-header-close:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  outline: none;
}

/* Plein viewport : téléphones + tablettes (768 px exclut iPad portrait / plusieurs Android) ;
 * modaux archives @ z-index 1200 restent au-dessus. */
#app-container.app-theme-night #chat-screen.chatroom.screen.active {
  background: #0f172a;
}

@media screen and (max-width: 1024px) {
  #chat-screen.chatroom.screen.active {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Chaîne shell : % uniquement — pas de 100dvh lié au clavier. */
  #simulator-wrapper.app-mode:has(#chat-screen.active),
  #phone-frame.app-mode:has(#chat-screen.active),
  .phone-scale-wrap:has(#chat-screen.active) {
    flex: 1 1 auto;
    min-height: 0 !important;
    height: 100% !important;
  }

  #chat-screen .chat-slider {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1000;
    max-height: none !important;
  }

  #chat-screen .chat-slider-panel {
    max-height: none !important;
  }

  /* × à gauche (premier contrôle) ; flèche Retour masquée sur petit viewport */
  #chat-screen .chatroom-close-btn.coach-header-close {
    display: flex;
  }
  #chat-screen #chatroom-back.formulaire-back.coach-header-back {
    display: none;
  }
}

/* iPhone / PWA WebKit : plein viewport — top/bottom + hauteur explicite pour coller au shell (pas min-height en dvh : clavier). */
.app-ios #chat-screen.chatroom.screen.active {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 150;
}

.app-ios #chat-screen .coach-footer {
  z-index: 1100;
  pointer-events: auto;
}

.app-ios #chat-screen #chat-widget-input-native {
  min-height: 48px !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #111827 !important;
  color: #111827 !important;
}

html.app-ios #app-container.app-theme-night #chat-screen #chat-widget-input-native {
  -webkit-text-fill-color: #f1f5f9 !important;
  color: #f1f5f9 !important;
}

/* Zone de messages (marge sous l’en-tête : padding-top du main + en-tête fixed). */
#chat-screen .chatroom-messages.coach-messages,
#chat-screen .coach-content .chatroom-messages {
  padding-top: 12px;
}

#chat-screen .formulaire-main-feuille-temps {
  position: relative;
  /* Collé sous le header : identique à top du slider (.chat-slider). */
  padding-top: var(--chat-header-stack);
  padding-bottom: var(--chat-composer-reserve, calc(78px + env(safe-area-inset-bottom, 0px)));
  box-sizing: border-box;
  /* Une seule zone flexible : header/footer sortent du flux (fixed / absolute). */
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Fil Coach et collègues : même pile que body::before (base.css). */
  background-color: #e4e2de;
  background-image:
    url('../../images/app-bg.png'),
    radial-gradient(ellipse 120% 75% at 50% 100%, rgba(196, 177, 85, 0.42) 0%, rgba(196, 177, 85, 0.12) 42%, transparent 68%),
    radial-gradient(ellipse 55% 40% at 78% 92%, rgba(255, 228, 150, 0.35) 0%, transparent 60%),
    linear-gradient(168deg, #e4e2de 0%, #e0ddd8 38%, #d2cfc9 100%);
  background-size: cover, 100% 100%, 100% 100%, 100% 100%;
  background-position: center bottom, center bottom, center bottom, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Coach NDL — image semi-transparente au-dessus du fond (sous les bulles), ancrée au bas. */
#chat-screen .coach-thread-bg-figure {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 460px);
  height: min(72vh, 560px);
  max-height: calc(100% - 12px);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  visibility: hidden;
}

#chat-screen .coach-thread-bg-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0.32;
  mix-blend-mode: normal;
}

#chat-screen.chat-screen--coach-thread .coach-thread-bg-figure {
  display: block !important;
  visibility: visible !important;
  opacity: 1;
}

#chat-screen .coach-content {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}

#app-container.app-theme-night #chat-screen.chat-screen--coach-thread .coach-thread-bg-figure img {
  opacity: 0.16;
  filter: brightness(1.05) contrast(1.02);
}

#app-container.app-theme-night #chat-screen .formulaire-main-feuille-temps {
  background-color: #0f172a;
  background-image:
    linear-gradient(180deg, rgba(15, 23, 42, 0.86) 0%, rgba(15, 23, 42, 0.94) 100%),
    url('../../images/app-bg.png'),
    radial-gradient(ellipse 120% 75% at 50% 100%, rgba(196, 177, 85, 0.22) 0%, transparent 52%),
    linear-gradient(168deg, #1e293b 0%, #0f172a 55%, #0c1222 100%);
  background-size: cover, cover, 100% 100%, 100% 100%;
  background-position: center, center bottom, center bottom, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

/* Sidebar employés : pleine hauteur fenêtre ; --chat-composer-reserve sert au fil — ne pas la réutiliser ici sinon bande vide au-dessus du composer quand il est réellement moins haut que la réserve. */
#chat-screen .chat-slider {
  top: 0;
  bottom: 0;
  max-height: none !important;
  z-index: 1000; /* sous le composer tant que fermé ; ouvert voir .chat-slider.open */
}
/* Menu ouvert : au-dessus du composer (z-index plus bas) aussi ; pas de fenêtre trop courte. */
#chat-screen .chat-slider.open {
  z-index: 13000 !important;
}
#chat-screen .chat-slider-panel {
  /* Encoche statut ; enlever le plafond 100dvh de chatroom.css pour coller au conteneur parent. */
  padding-top: var(--app-safe-top, env(safe-area-inset-top, 0px));
  padding-bottom: 0;
  max-height: none !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}
#chat-screen .chat-slider-body {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
#chat-screen .chat-slider-section-title {
  margin: 0;
  padding: 10px 16px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
#chat-screen .chat-slider-section .chat-slider-list {
  padding-top: 0;
  padding-bottom: 4px;
}
#chat-screen .chat-slider-coach-block {
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin-bottom: 4px;
}
#chat-screen .chat-slider-individual-tab-panel {
  padding-top: 4px;
}
#chat-screen .chat-slider-list--coach {
  padding-top: 4px;
  padding-bottom: 8px;
}
/* Bulle de présence : vert = actif / « connecté », gris = hors ligne */
#chat-screen .chat-slider-presence {
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 10px;
  align-self: center;
}
#chat-screen .chat-slider-presence--online {
  background: #22c55e;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
#chat-screen .chat-slider-presence--offline {
  background: #94a3b8;
}
html.app-ios #app-container.app-theme-night #chat-screen .chat-slider-presence--online {
  background: #4ade80;
}
html.app-ios #app-container.app-theme-night #chat-screen .chat-slider-presence--offline {
  background: #64748b;
}
/* Photo de profil + bulle présence (coin bas-droite de l’avatar) */
#chat-screen .chat-slider-item-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
#chat-screen .chat-slider-item-text-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}
#chat-screen .chat-slider-avatar-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
#chat-screen .chat-slider-avatar-img,
#chat-screen .chat-slider-avatar-fallback {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-sizing: border-box;
}
#chat-screen .chat-slider-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.22);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
}
#chat-screen .chat-slider-avatar-img {
  display: block;
  object-fit: cover;
  background: rgba(148, 163, 184, 0.15);
}
#chat-screen .chat-slider-avatar-wrap .chat-slider-presence {
  position: absolute;
  right: -1px;
  bottom: -1px;
  margin: 0;
  width: 11px;
  height: 11px;
  min-width: 11px;
  border: 2px solid var(--bg-dark, #1e293b);
  box-sizing: border-box;
  box-shadow: none;
}
#chat-screen .chat-slider-avatar-wrap .chat-slider-presence--online {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

#chat-screen .chat-slider-item-main .chat-slider-item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#chat-screen .chat-slider-item-offline-meta {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--text-muted, #64748b);
  white-space: normal;
}

/* Ligne groupe : icône bulle, ligne 1 auteur du dernier message + heure, ligne 2 texte du message */
#chat-screen .chat-slider-list-item--group-plain {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 2px;
  box-sizing: border-box;
}
#chat-screen .chat-slider-list-item--group-plain .chat-slider-item-main.chat-slider-group-summary {
  align-items: center;
  flex: 1;
  gap: 10px;
  min-height: 48px;
  min-width: 0;
}

#chat-screen .chat-slider-group-bubble-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #64748b);
  background: rgba(148, 163, 184, 0.18);
}

#chat-screen .chat-slider-group-bubble-icon svg {
  display: block;
}

#chat-screen .chat-slider-group-text-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}

#chat-screen .chat-slider-group-msg-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

#chat-screen .chat-slider-group-sender-meta {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

#chat-screen .chat-slider-group-sender-meta-sep {
  flex-shrink: 0;
  font-size: 0.938rem;
  font-weight: 600;
  color: var(--text, #111827);
}

#chat-screen .chat-slider-group-row-sender-name {
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  font-size: 0.938rem;
  font-weight: 600;
  color: var(--text, #111827);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chat-screen .chat-slider-group-row-time {
  flex-shrink: 0;
  margin-left: 0;
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #64748b);
}

#chat-screen .chat-slider-group-row-body {
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text, #374151);
  line-height: 1.28;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

#chat-screen .chat-slider-group-row-body.chat-slider-group-row-body--muted {
  color: var(--text-muted, #64748b);
  font-weight: 480;
}

#app-container.app-theme-night #chat-screen .chat-slider-group-row-time {
  color: #94a3b8;
}
#app-container.app-theme-night #chat-screen .chat-slider-group-row-sender-name,
#app-container.app-theme-night #chat-screen .chat-slider-group-sender-meta-sep {
  color: #f1f5f9;
}
#app-container.app-theme-night #chat-screen .chat-slider-group-row-body {
  color: #cbd5e1;
}
#app-container.app-theme-night #chat-screen .chat-slider-group-row-body.chat-slider-group-row-body--muted {
  color: #94a3b8;
}
#app-container.app-theme-night #chat-screen .chat-slider-group-bubble-icon {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
}
#chat-screen .chat-slider-group-leave-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.08);
  color: #1e293b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
#chat-screen .chat-slider-group-leave-btn:active {
  background: rgba(0, 0, 0, 0.15);
}
#app-container.app-theme-night #chat-screen .chat-slider-group-leave-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}
#chat-screen .chat-slider-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 8px 10px 8px 16px;
  min-height: 48px;
  box-sizing: border-box;
  background: #c9a227;
  color: #111827;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
#chat-screen .chat-slider-title-leading {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
#chat-screen .chat-slider-title.chat-slider-heading-main-text {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #111827;
}
#chat-screen .chat-slider-mode-toggle {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
}
#chat-screen .chat-slider-mode-btn {
  width: 40px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #292524;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
#chat-screen .chat-slider-mode-btn svg {
  display: block;
  opacity: 0.72;
}
#chat-screen .chat-slider-mode-btn.is-active {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
#chat-screen .chat-slider-mode-btn.is-active svg {
  opacity: 1;
}
#chat-screen .chat-slider-icon-action.chat-slider-new-group-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
  color: #111827;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
/* Sinon display:flex du bloc ci-dessus écrase l’effet HTML [hidden]. */
#chat-screen .chat-slider-new-group-btn[hidden] {
  display: none !important;
}
#chat-screen .chat-slider-icon-action.chat-slider-new-group-btn:active {
  background: rgba(0, 0, 0, 0.2);
}
#chat-screen .chat-slider-groups-empty {
  margin: 0;
  padding: 16px 18px;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-align: center;
}
#chat-screen .chat-slider-groups-empty.is-hidden {
  display: none;
}
#chat-screen .chat-slider-group-tabs {
  display: flex;
  gap: 8px;
  padding: 0 14px 12px;
  margin: 0 0 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
#chat-screen .chat-slider-group-tab {
  flex: 1;
  min-height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.07);
  color: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#chat-screen .chat-slider-group-tab.is-active {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
#chat-screen .chat-slider-list--groups .chat-slider-item-main {
  width: 100%;
}
#chat-screen .coach-header-icon-group {
  flex-shrink: 0;
}

/* Modal création groupe */
#chat-group-create-modal .chat-group-create-modal-box,
.chat-group-create-modal-box {
  max-width: min(440px, 96vw);
}
#chat-screen .chat-group-create-desc {
  margin-top: 0;
}
.chat-group-create-name-label {
  display: block;
  margin: 12px 0 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text, #111827);
}
.chat-group-create-optional {
  font-weight: 500;
  color: var(--text-muted);
}
.chat-group-create-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb);
  font-size: 1rem;
}
.chat-group-create-members-heading {
  margin: 14px 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.chat-group-create-member-list {
  max-height: min(52vh, 360px);
  overflow-y: auto;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: 10px;
}
.chat-group-create-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.06));
}
.chat-group-create-member-row:last-child {
  border-bottom: none;
}
.chat-group-create-member-row input[type='checkbox'] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

#app-container.app-theme-night #chat-screen .chat-slider-title-row {
  background: #c9a227;
}
#app-container.app-theme-night #chat-screen .chat-slider-heading-main-text {
  background: transparent;
  color: #111827;
}
#app-container.app-theme-night #chat-screen .chat-slider-group-tabs {
  border-bottom-color: rgba(17, 24, 39, 0.15);
}
#app-container.app-theme-night #chat-screen .chat-slider-group-tab {
  background: rgba(0, 0, 0, 0.1);
  color: #111827;
}
#app-container.app-theme-night #chat-screen .chat-slider-group-tab.is-active {
  background: rgba(255, 255, 255, 0.95);
}

#app-container.app-theme-night #chat-screen .coach-header.formulaire-header-feuille-temps {
  background: rgba(30, 41, 59, 0.92);
  border-bottom: none;
  box-shadow: none;
}

#app-container.app-theme-night #chat-screen .formulaire-back.coach-header-back,
#app-container.app-theme-night #chat-screen .chatroom-burger.coach-burger,
#app-container.app-theme-night #chat-screen .chatroom-close-btn.coach-header-close,
#app-container.app-theme-night #chat-screen .coach-header-title,
#app-container.app-theme-night #chat-screen .coach-archive-box-btn {
  color: #f1f5f9;
}

#app-container.app-theme-night #chat-screen .coach-archive-box-btn {
  background: rgba(255, 255, 255, 0.08);
}

#app-container.app-theme-night #chat-screen .coach-archive-box-btn:hover,
#app-container.app-theme-night #chat-screen .coach-archive-box-btn:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

#app-container.app-theme-night #chat-screen .chatroom-burger.coach-burger:hover,
#app-container.app-theme-night #chat-screen .chatroom-burger.coach-burger:focus-visible,
#app-container.app-theme-night #chat-screen .chatroom-close-btn.coach-header-close:hover,
#app-container.app-theme-night #chat-screen .chatroom-close-btn.coach-header-close:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

/* Barre de saisie native en bas (clavier système) — le clavier in-app a été retiré du HTML. */
#chat-screen.chat-native-composer #chat-widget-input.coach-input-virtual {
  display: none !important;
}
/* #chat-widget-input-native : zone de saisie native (écran clavardage). */
#chat-screen #chat-widget-input-native {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.5rem;
  max-height: 120px;
  padding: 10px 16px;
  border-radius: 1.25rem;
  border: 1px solid #e5e7eb;
  background: #f0f2f5;
  color: #111;
  font-size: 16px;
  line-height: 1.35;
  resize: none;
  overflow-y: hidden;
  outline: none;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
}
#chat-screen #chat-widget-input-native:focus {
  border-color: #0084ff;
  background: #fff;
}

/* Barre d’émission : position basse + décalage visual viewport (clavier) via --chat-vv-inset-bottom (chat.js). */
#chat-screen .coach-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--chat-vv-inset-bottom, 0px);
  z-index: 999;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: 8px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Avec le clavier ouvert : padding vertical égal ; min-height à 0 pour éviter les grilles @container ; ligne centrée dans le bandeau si surplus de hauteur. */
#chat-screen.chat-vv-keyboard .coach-footer {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  min-height: 0 !important;
  justify-content: center;
}

/* iOS : clavier ouvert → top JS (syncChatComposerTopDock). */
html.app-ios #chat-screen.chatroom.screen.active .coach-footer,
html.app-android #chat-screen.chatroom.screen.active .coach-footer {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1100;
}

html.app-ios #chat-screen:not(.chat-vv-keyboard) .coach-footer,
html.app-android #chat-screen:not(.chat-vv-keyboard) .coach-footer {
  bottom: 0 !important;
  top: auto !important;
}

html.app-ios #chat-screen.chat-vv-keyboard .coach-footer {
  bottom: auto !important;
  padding-bottom: 10px !important;
}

/* Android : clavier ouvert → bottom inline !important (syncChatComposerAndroidDock). */
html.app-android #chat-screen.chat-vv-keyboard .coach-footer {
  top: auto !important;
  padding-bottom: 10px !important;
}

html.app-ios #chat-screen.chat-vv-keyboard.chatroom.screen.formulaire-has-bottom-bar {
  --chat-composer-reserve: 80px !important;
}

#chat-screen.chat-vv-keyboard .coach-input-row {
  align-items: flex-end;
}

#chat-screen .coach-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}

/* Bulles au-dessus du fond métal (Coach et collègues). */
#chat-screen #chat-widget-messages {
  background: transparent;
}

#chat-screen .chat-peer-hidden-inputs {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#chat-screen .coach-input-row--chat-composer {
  align-items: flex-end;
  flex-wrap: nowrap;
  width: 100%;
}

#chat-screen .chat-composer-emoji-slot {
  position: relative;
  flex-shrink: 0;
}

#chat-screen .chat-composer-emoji-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: min(340px, 92vw);
  max-height: min(240px, 42vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  z-index: 25;
}

#app-container.app-theme-night #chat-screen .chat-composer-emoji-popover {
  background: rgba(30, 41, 59, 0.98);
  border-color: rgba(255, 255, 255, 0.12);
}

#chat-screen .chat-composer-emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

#chat-screen .chat-composer-emoji-pick {
  margin: 0;
  padding: 0;
  min-height: 40px;
  border: none;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.15);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

#app-container.app-theme-night #chat-screen .chat-composer-emoji-pick {
  background: rgba(255, 255, 255, 0.08);
}

#chat-screen .chat-composer-emoji-pick:active {
  opacity: 0.85;
}

/* Sourire 😊 : uniquement en conversation entre collègues (#chat-screen.chat-screen--peer) */
#chat-screen:not(.chat-screen--peer) .chat-composer-smiley-btn {
  display: none !important;
}

#chat-screen .chat-composer-smiley-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  font-size: 1.45rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.app-ios #app-container.app-theme-night #chat-screen .chat-composer-smiley-btn {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
}

#chat-screen .chat-peer-send-slot {
  position: relative;
  flex-shrink: 0;
}

#chat-screen .chat-peer-photo-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 200px;
  padding: 6px 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  z-index: 20;
}
#chat-screen .chat-peer-photo-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  cursor: pointer;
  color: inherit;
}
#chat-screen .chat-peer-photo-menu-item:active {
  background: rgba(0, 0, 0, 0.06);
}

/* Champ vide + collègue : « + » au lieu de la flèche (Photothèque / Appareil photo) */
#chat-screen .coach-send .coach-send-icon--plus {
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}
#chat-screen.chat-screen--peer.chat-peer-empty-input .coach-send .coach-send-icon--arrow {
  display: none !important;
}
#chat-screen.chat-screen--peer.chat-peer-empty-input .coach-send .coach-send-icon--plus {
  display: flex !important;
}
#chat-screen:not(.chat-screen--peer) .coach-send .coach-send-icon--plus {
  display: none !important;
}

#chat-screen .coach-send {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c4b155;
  color: #1a1a1a;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
#chat-screen .coach-send:hover,
#chat-screen .coach-send:focus-visible {
  background: #b8a44a;
  outline: none;
}
#chat-screen .coach-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Icône flèche uniquement : ne pas cibler .coach-send-icon--plus (sinon display:block écrase le masquage). */
#chat-screen .coach-send .coach-send-icon:not(.coach-send-icon--plus) {
  display: block;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  flex-shrink: 0;
  color: #1a1a1a;
  overflow: visible;
  pointer-events: none;
}
#chat-screen .coach-send .coach-send-icon:not(.coach-send-icon--plus) line,
#chat-screen .coach-send .coach-send-icon:not(.coach-send-icon--plus) polyline {
  stroke: #1a1a1a;
  fill: none;
}
#chat-screen .coach-send:hover .coach-send-icon line,
#chat-screen .coach-send:hover .coach-send-icon polyline,
#chat-screen .coach-send:focus-visible .coach-send-icon line,
#chat-screen .coach-send:focus-visible .coach-send-icon polyline {
  stroke: #0f0f0f;
}

#chat-screen .coach-messages,
#chat-screen .chatroom-messages {
  min-height: 0;
  flex: 1 1 0;
  /* Le main porte --chat-composer-reserve ; ici petit dégagement du dernier message au-dessus du composer. */
  padding-bottom: 12px;
  /* Glissement vertical fiable + fin de course utile pour « tirer » vers le haut/ bas (PWA iOS). */
  touch-action: pan-y;
  overscroll-behavior-y: auto;
}

/* Heure et crayon sous la bulle (employés / groupe) */
#chat-screen .chatroom-messages .chat-msg-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  font-size: 0.72rem;
  line-height: 1.2;
  color: rgba(71, 85, 105, 0.92);
}
#chat-screen .chatroom-messages .chat-msg.user .chat-msg-meta {
  justify-content: flex-end;
}
#chat-screen .chatroom-messages .chat-msg.assistant .chat-msg-meta {
  justify-content: flex-start;
}
#chat-screen .chatroom-messages .chat-msg-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.78;
  cursor: pointer;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
#chat-screen .chatroom-messages .chat-msg-edit:active,
#chat-screen .chatroom-messages .chat-msg-edit:focus-visible {
  opacity: 1;
}
#chat-screen .chatroom-messages .chat-msg-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.72;
  cursor: pointer;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
#chat-screen .chatroom-messages .chat-msg-pin.is-active {
  opacity: 1;
  color: #2563eb;
}
#chat-screen .chatroom-messages .chat-msg-pin:active,
#chat-screen .chatroom-messages .chat-msg-pin:focus-visible {
  opacity: 1;
}
#chat-screen .chatroom-messages .chat-msg--search-hit {
  outline: 2px dashed rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}
#chat-screen .chatroom-messages .chat-msg--search-curr {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
@keyframes chat-msg-flash-highlight {
  0%,
  100% {
    filter: brightness(1);
  }
  25% {
    filter: brightness(1.08);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
  }
}
#chat-screen .chatroom-messages .chat-msg--flash {
  animation: chat-msg-flash-highlight 1.2s ease;
}
#app-container.app-theme-night #chat-screen .chatroom-messages .chat-msg-pin.is-active {
  color: #60a5fa;
}
#app-container.app-theme-night #chat-screen .chatroom-messages .chat-msg--search-hit {
  outline-color: rgba(96, 165, 250, 0.55);
}
#app-container.app-theme-night #chat-screen .chatroom-messages .chat-msg--search-curr {
  outline-color: #60a5fa;
}
#app-container.app-theme-night #chat-screen .chatroom-messages .chat-msg-meta {
  color: rgba(148, 163, 184, 0.95);
}

#app-container.app-theme-night #chat-screen .coach-footer {
  background: rgba(30, 41, 59, 0.75);
  border-top-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.25);
}
#app-container.app-theme-night #chat-screen #chat-widget-input-native {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}
#app-container.app-theme-night #chat-screen #chat-widget-input-native:focus {
  border-color: #38bdf8;
  background: rgba(15, 23, 42, 0.85);
}
#app-container.app-theme-night #chat-screen .coach-send {
  background: #c4b155;
  color: #0f172a;
}
#app-container.app-theme-night #chat-screen .coach-send:hover,
#app-container.app-theme-night #chat-screen .coach-send:focus-visible {
  background: #d4c068;
  color: #0f172a;
}
#app-container.app-theme-night #chat-screen .coach-send .coach-send-icon,
#app-container.app-theme-night #chat-screen .coach-send .coach-send-icon line,
#app-container.app-theme-night #chat-screen .coach-send .coach-send-icon polyline {
  color: #0f172a;
  stroke: #0f172a;
}
#app-container.app-theme-night #chat-screen .coach-send:hover .coach-send-icon line,
#app-container.app-theme-night #chat-screen .coach-send:hover .coach-send-icon polyline,
#app-container.app-theme-night #chat-screen .coach-send:focus-visible .coach-send-icon line,
#app-container.app-theme-night #chat-screen .coach-send:focus-visible .coach-send-icon polyline {
  stroke: #0a0f1a;
}

/* Même grille de hauteur / rebords que #note-screen .note-bottom-bar (device-adaptive.css)
 * : règles ici pour qu’elles s’appliquent après la base du footer (chat.css charge après
 * device-adaptive). */
@container app (min-width: 320px) {
  #chat-screen .coach-footer {
    min-height: 48px;
    padding-top: 8px;
    padding-left: 6px;
    padding-right: 6px;
  }
}

@container app (min-width: 430px) {
  #chat-screen .coach-footer {
    min-height: 54px;
  }
}

@container app (min-width: 600px) {
  #chat-screen .coach-footer {
    min-height: 56px;
    padding-top: 10px;
  }
}

@container app (min-width: 1024px) {
  #chat-screen .coach-footer {
    min-height: 64px;
  }
}

/* ——— Repères de zones (bouton ⌗ + barre cliquable) ——— */
#chat-screen .chat-landmarks-ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 1050;
  pointer-events: none;
}
#chat-screen .chat-landmarks-ui .chat-landmarks-fab,
#chat-screen .chat-landmarks-ui .chat-landmarks-dock {
  pointer-events: auto;
}

#chat-screen .chat-landmarks-fab {
  position: absolute;
  left: max(10px, env(safe-area-inset-left, 0px));
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
  color: #1e3a5f;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
#chat-screen .chat-landmarks-fab:hover,
#chat-screen .chat-landmarks-fab:focus-visible {
  background: #fff;
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

#chat-screen.chat-screen--landmarks .chat-landmarks-fab {
  background: #3b82f6;
  color: #fff;
  box-shadow: 0 2px 14px rgba(59, 130, 246, 0.45);
}

#chat-screen .chat-landmarks-dock {
  position: absolute;
  left: max(8px, env(safe-area-inset-left, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: calc(138px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
#chat-screen .chat-landmarks-dock[hidden] {
  display: none !important;
}

#chat-screen .chat-landmarks-dock__btn {
  flex: 1 1 auto;
  min-width: 5.5rem;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 2px solid rgba(59, 130, 246, 0.5);
  border-radius: 10px;
  background: rgba(239, 246, 255, 0.9);
  color: #1e3a8a;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#chat-screen .chat-landmarks-dock__btn:hover,
#chat-screen .chat-landmarks-dock__btn:focus-visible {
  background: #dbeafe;
  outline: none;
}

#chat-screen .chat-landmarks-dock__close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
  color: #374151;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#chat-screen .chat-landmarks-dock__close:hover,
#chat-screen .chat-landmarks-dock__close:focus-visible {
  background: rgba(0, 0, 0, 0.1);
  outline: none;
}

#chat-screen.chat-screen--landmarks.active header[data-chat-zone='header'] {
  outline: 3px solid rgba(59, 130, 246, 0.9);
  outline-offset: -2px;
}
#chat-screen.chat-screen--landmarks.active main[data-chat-zone='thread'] {
  outline: 3px solid rgba(22, 163, 74, 0.9);
  outline-offset: -2px;
}
#chat-screen.chat-screen--landmarks.active footer[data-chat-zone='composer'] {
  outline: 3px solid rgba(202, 138, 4, 0.95);
  outline-offset: -2px;
}

@keyframes chat-landmark-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(59, 130, 246, 0);
  }
}
#chat-screen.chat-screen--landmarks [data-chat-zone].chat-landmark--pulse {
  animation: chat-landmark-pulse 0.75s ease-out 1;
}
#chat-screen.chat-screen--landmarks main[data-chat-zone].chat-landmark--pulse {
  animation-name: chat-landmark-pulse;
}
#chat-screen.chat-screen--landmarks footer[data-chat-zone].chat-landmark--pulse {
  animation-name: chat-landmark-pulse;
}

#app-container.app-theme-night #chat-screen .chat-landmarks-fab {
  color: #e2e8f0;
  background: rgba(30, 41, 59, 0.96);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
#app-container.app-theme-night #chat-screen.chat-screen--landmarks .chat-landmarks-fab {
  background: #2563eb;
  color: #fff;
}
#app-container.app-theme-night #chat-screen .chat-landmarks-dock {
  background: rgba(30, 41, 59, 0.98);
  border-color: rgba(255, 255, 255, 0.12);
}
#app-container.app-theme-night #chat-screen .chat-landmarks-dock__btn {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(30, 58, 138, 0.5);
  color: #e0e7ff;
}
#app-container.app-theme-night #chat-screen .chat-landmarks-dock__close {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

/* Visionneuse média chat : vignette plus petite que l’écran (captures incluses), barre Photos / Fermer sous l’aperçu */
.chat-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.chat-media-lightbox.chat-media-lightbox--open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}
.chat-media-lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.88);
  cursor: pointer;
}
.chat-media-lightbox-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(96vw, 460px);
  max-height: min(92vh, 720px);
  padding: var(--app-safe-top, env(safe-area-inset-top, 0px)) 12px calc(10px + var(--app-safe-bottom, env(safe-area-inset-bottom, 0px)))
    calc(12px + var(--app-safe-left, env(safe-area-inset-left, 0px)));
  pointer-events: none;
  box-sizing: border-box;
}
.chat-media-lightbox-inner .chat-media-lightbox-frame {
  pointer-events: auto;
}
.chat-media-lightbox-frame {
  display: flex;
  flex-direction: column;
  width: min(92vw, 400px);
  max-width: 100%;
  max-height: min(86vh, 640px);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.55);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}

.chat-media-lightbox-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 10px;
  box-sizing: border-box;
}
.chat-media-lightbox-img {
  max-width: 100%;
  max-height: min(50vh, 380px);
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
}
.chat-media-lightbox-video {
  max-width: 100%;
  max-height: min(50vh, 380px);
  border-radius: 10px;
  background: #000;
}

.chat-media-lightbox-overlay-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: stretch;
  gap: 10px;
  flex-shrink: 0;
  padding: 12px 12px 14px;
  background: rgba(12, 12, 16, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.chat-media-lightbox-save {
  flex: 1 1 120px;
  min-height: 44px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: none;
  border-radius: 10px;
  background: rgba(212, 175, 55, 0.9);
  color: #14110a;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.chat-media-lightbox-save:hover,
.chat-media-lightbox-save:focus-visible {
  background: rgb(229, 199, 90);
  outline: none;
}
.chat-media-lightbox-save[hidden] {
  display: none !important;
}

.chat-media-lightbox-close {
  flex: 1 1 120px;
  min-height: 44px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  color: #f8fafc;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-media-lightbox-close:hover,
.chat-media-lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.26);
  outline: none;
}

body.chat-media-lightbox-open {
  overflow: hidden;
  touch-action: none;
}

/* ——— Fil conversation groupe (#chat-screen) : avatar au bord extérieur, nom au-dessus de la bulle ——— */
#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg-group-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg-group-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  max-width: calc(100% - 44px);
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg--group-mine .chat-msg-group-body {
  align-items: flex-end;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg--group-peer .chat-msg-group-body {
  align-items: flex-start;
}

/* Bulles groupe : même rembourrage que 1:1 (le flux générique visait encore .chat-msg > .chat-msg-column). */
#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg:not(.chat-msg-image) .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  padding: 10px 14px;
  box-sizing: border-box;
}
#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg-image .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  padding: 4px;
  box-sizing: border-box;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg-group-sender-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
  line-height: 1.15;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg--group-peer .chat-msg-group-sender-name {
  text-align: left;
  padding-left: 2px;
  padding-right: 0;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg--group-mine .chat-msg-group-sender-name {
  text-align: right;
  padding-right: 2px;
  padding-left: 0;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg-group-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.32);
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg-group-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg-group-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: hsl(222, 28%, 28%);
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-mine {
  align-self: flex-end;
  margin-left: auto;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-peer {
  align-self: flex-start;
  margin-right: auto;
}

/* Désaccentue les bulles génériques (.user / .assistant) : la couleur vient du couple mine/peer × palette pal-0…5 */
#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-mine.chat-msg-image,
#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-peer.chat-msg-image {
  background: transparent;
  border: none;
  padding: 4px 0;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg-image.chat-msg--group-mine .chat-msg-group-body > .chat-msg-column > .chat-msg-content,
#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg-image.chat-msg--group-peer .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  border-radius: 14px;
  overflow: hidden;
}

/* Palettes « moi » : fond sur la bulle seulement ; ligne heure+sous crayon sous la bulle */
#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-mine.chat-msg--group-pal-0 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(217, 88%, 48%);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  border: none;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-mine.chat-msg--group-pal-1 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(142, 64%, 36%);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  border: none;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-mine.chat-msg--group-pal-2 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(280, 55%, 44%);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  border: none;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-mine.chat-msg--group-pal-3 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(24, 90%, 44%);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  border: none;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-mine.chat-msg--group-pal-4 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(199, 88%, 40%);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  border: none;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-mine.chat-msg--group-pal-5 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(340, 72%, 48%);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  border: none;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-peer.chat-msg--group-pal-0 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(217, 70%, 94%);
  color: hsl(222, 40%, 16%);
  border: 1px solid hsl(217, 32%, 86%);
  border-radius: 18px 18px 18px 4px;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-peer.chat-msg--group-pal-1 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(142, 45%, 92%);
  color: hsl(150, 35%, 16%);
  border: 1px solid hsl(142, 35%, 82%);
  border-radius: 18px 18px 18px 4px;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-peer.chat-msg--group-pal-2 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(280, 40%, 95%);
  color: hsl(280, 38%, 20%);
  border: 1px solid hsl(280, 26%, 86%);
  border-radius: 18px 18px 18px 4px;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-peer.chat-msg--group-pal-3 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(32, 85%, 94%);
  color: hsl(24, 50%, 16%);
  border: 1px solid hsl(32, 42%, 86%);
  border-radius: 18px 18px 18px 4px;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-peer.chat-msg--group-pal-4 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(199, 60%, 93%);
  color: hsl(200, 40%, 16%);
  border: 1px solid hsl(199, 35%, 84%);
  border-radius: 18px 18px 18px 4px;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-peer.chat-msg--group-pal-5 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(340, 55%, 94%);
  color: hsl(330, 40%, 20%);
  border: 1px solid hsl(340, 38%, 86%);
  border-radius: 18px 18px 18px 4px;
}

/* Mode nuit */
#app-container.app-theme-night #chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg-group-sender-name {
  color: #94a3b8;
}

#app-container.app-theme-night #chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg-group-avatar {
  background: rgba(51, 65, 85, 0.55);
}

#app-container.app-theme-night #chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg-group-avatar-fallback {
  color: #e2e8f0;
}

#app-container.app-theme-night #chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-peer.chat-msg--group-pal-0 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(217, 32%, 22%);
  color: #e2e8f0;
  border-color: hsl(217, 26%, 32%);
}

#app-container.app-theme-night #chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-peer.chat-msg--group-pal-1 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(142, 26%, 20%);
  color: #ecfdf5;
  border-color: hsl(142, 22%, 30%);
}

#app-container.app-theme-night #chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-peer.chat-msg--group-pal-2 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(280, 26%, 24%);
  color: #faf5ff;
  border-color: hsl(280, 22%, 34%);
}

#app-container.app-theme-night #chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-peer.chat-msg--group-pal-3 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(28, 32%, 22%);
  color: #fff7ed;
  border-color: hsl(28, 28%, 34%);
}

#app-container.app-theme-night #chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-peer.chat-msg--group-pal-4 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(199, 30%, 22%);
  color: #ecfeff;
  border-color: hsl(199, 26%, 32%);
}

#app-container.app-theme-night #chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-peer.chat-msg--group-pal-5 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(340, 28%, 24%);
  color: #fce7f3;
  border-color: hsl(340, 24%, 34%);
}

#app-container.app-theme-night #chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-mine.chat-msg--group-pal-0 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(217, 76%, 42%);
  color: #fff;
}

#app-container.app-theme-night #chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-mine.chat-msg--group-pal-1 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(142, 55%, 32%);
  color: #fff;
}

#app-container.app-theme-night #chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-mine.chat-msg--group-pal-2 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(280, 48%, 40%);
  color: #fff;
}

#app-container.app-theme-night #chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-mine.chat-msg--group-pal-3 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(24, 82%, 40%);
  color: #fff;
}

#app-container.app-theme-night #chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-mine.chat-msg--group-pal-4 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(199, 78%, 36%);
  color: #fff;
}

#app-container.app-theme-night #chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-mine.chat-msg--group-pal-5 .chat-msg-group-body > .chat-msg-column > .chat-msg-content {
  background: hsl(340, 65%, 42%);
  color: #fff;
}

#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-peer .chat-msg-file {
  color: inherit;
}

/* Préférence locale : masquer « vu » dans un groupe serveur */
#chat-screen.chat-thread--prefs-hide-read-receipt.chat-screen--group-thread #chat-widget-messages .chat-msg-seen {
  display: none !important;
}

/* Bulle groupe : couleur personnalisée (champs inline prioritaires sur les thèmes jour / nuit) */
#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-custom-bubble .chat-msg-content a,
#chat-screen.chat-screen--group-thread .chatroom-messages .chat-msg.chat-msg--group-custom-bubble .chat-msg-content .chat-msg-edit {
  color: inherit;
}

/* Paramètres groupe / galerie : overlay plein viewport comme « fonction indisponible » du tableau de bord
   (.dashboard-feature-unavail-wrap + .chat-unread-popover.note-item-popover — menu-popover.css + note.css). */
.dashboard-feature-unavail-wrap.chat-group-settings-modal-wrap,
.dashboard-feature-unavail-wrap.chat-group-media-gallery-modal-wrap {
  z-index: 10050;
  align-items: stretch;
  justify-content: stretch;
}

.dashboard-feature-unavail-wrap.chat-group-settings-nested-modal-wrap {
  z-index: 10120;
  align-items: stretch;
  justify-content: stretch;
}

.dashboard-feature-unavail-wrap.chat-group-settings-nested-modal-wrap .chat-group-settings-sheet.chat-unread-popover {
  margin: 0;
  align-self: stretch;
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  animation: none;
  display: flex;
  flex-direction: column;
}

.dashboard-feature-unavail-wrap.chat-group-settings-nested-modal-wrap .chat-group-settings-sheet.chat-unread-popover::before {
  content: none !important;
  display: none !important;
}

.chat-group-settings-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.chat-group-settings-actions-stack .feuille-temps-modal-btn {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

#chat-group-settings-body .chat-group-settings-stack-btn,
#chat-group-settings-notify-body .chat-group-settings-stack-btn {
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

#app-container.app-theme-night #chat-group-settings-body .chat-group-settings-stack-btn,
#app-container.app-theme-night #chat-group-settings-notify-body .chat-group-settings-stack-btn {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.chat-group-add-member-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.chat-group-add-member-foot .annonces-notif-popover-link-btn {
  flex: 1 1 auto;
  min-width: 120px;
}

.chat-group-add-member-pick-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chat-group-add-member-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.92rem;
}

#app-container.app-theme-night .chat-group-add-member-pick-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.chat-group-add-member-pick-row input[type='checkbox']:disabled {
  opacity: 0.9;
  cursor: default;
}

.chat-group-add-member-pick-row span.chat-group-member-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
  color: inherit;
}

.chat-group-add-member-pick-row span {
  flex: 1;
  min-width: 0;
}

.chat-group-settings-note-textarea {
  width: 100%;
  min-height: 180px;
  max-height: 40vh;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.45;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}

#app-container.app-theme-night .chat-group-settings-note-textarea {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
}

.chat-group-settings-reaction-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.chat-group-settings-reaction-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 6px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.12);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

#app-container.app-theme-night .chat-group-settings-reaction-cell {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

.chat-group-settings-reaction-cell.is-selected {
  border-color: #b45309;
  background: rgba(180, 83, 9, 0.15);
}

.dashboard-feature-unavail-wrap.chat-group-settings-modal-wrap .chat-group-settings-sheet.chat-unread-popover,
.dashboard-feature-unavail-wrap.chat-group-media-gallery-modal-wrap .chat-group-media-gallery-sheet.chat-unread-popover {
  margin: 0;
  align-self: stretch;
  width: 100%;
  height: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  animation: none;
  display: flex;
  flex-direction: column;
}

.dashboard-feature-unavail-wrap.chat-group-settings-modal-wrap .chat-group-settings-sheet.chat-unread-popover::before,
.dashboard-feature-unavail-wrap.chat-group-media-gallery-modal-wrap .chat-group-media-gallery-sheet.chat-unread-popover::before {
  content: none !important;
  display: none !important;
}

#chat-screen:has(.chat-group-settings-modal-wrap.dashboard-feature-unavail-wrap--open),
#chat-screen:has(.chat-group-media-gallery-modal-wrap.dashboard-feature-unavail-wrap--open),
#chat-screen:has(.chat-group-settings-nested-modal-wrap.dashboard-feature-unavail-wrap--open) {
  overflow: hidden !important;
  touch-action: none;
}

.chat-group-settings-sheet-body,
#chat-group-settings-body.chat-group-settings-modal-body.chat-group-settings-sheet-body,
.chat-group-settings-modal-body.chat-group-settings-sheet-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 18px;
  max-height: none;
  text-align: left;
}

.dashboard-feature-unavail-wrap.chat-group-settings-modal-wrap .chat-group-settings-sheet-foot,
.dashboard-feature-unavail-wrap.chat-group-media-gallery-modal-wrap .chat-group-settings-sheet-foot {
  flex-shrink: 0;
}

#app-container.app-theme-night .dashboard-feature-unavail-close {
  color: #e5e7eb;
}

#app-container.app-theme-night .dashboard-feature-unavail-close:hover {
  background: rgba(255, 255, 255, 0.08);
}


.chat-group-settings-section {
  margin-bottom: 18px;
}

.chat-group-settings-block-title {
  margin: 0 0 14px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.chat-group-settings-block-title--sub {
  margin-top: 22px;
  margin-bottom: 14px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
}

#app-container.app-theme-night .chat-group-settings-block-title {
  color: #9ca3af;
}

#app-container.app-theme-night .chat-group-settings-block-title--sub {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.chat-group-settings-pref-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.chat-group-settings-pref-btn {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 7px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.chat-group-settings-pref-btn:hover:not(:disabled):not(.is-selected) {
  background: #f9fafb;
  border-color: #9ca3af;
}

.chat-group-settings-pref-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.chat-group-settings-pref-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.chat-group-settings-pref-btn.is-selected {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3);
}

#app-container.app-theme-night .chat-group-settings-pref-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  color: #e5e7eb;
  box-shadow: none;
}

#app-container.app-theme-night .chat-group-settings-pref-btn:hover:not(:disabled):not(.is-selected) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
}

#app-container.app-theme-night .chat-group-settings-pref-btn.is-selected {
  background: #3b82f6;
  border-color: #60a5fa;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

#app-container.app-theme-night .chat-group-settings-pref-btn:focus-visible {
  outline-color: #93c5fd;
}

.chat-group-settings-muted-row .chat-group-settings-stack-btn {
  flex: 1 1 auto;
  min-width: 108px;
}

.chat-group-settings-section-title {
  font-size: 0.95rem;
  margin: 0 0 8px;
  font-weight: 600;
}

.chat-group-settings-note,
.chat-group-settings-hint {
  font-size: 0.85rem;
  line-height: 1.45;
  color: #4b5563;
  margin: 0 0 10px;
}

#app-container.app-theme-night .chat-group-settings-note,
#app-container.app-theme-night .chat-group-settings-hint {
  color: #adb5c9;
}

.chat-group-settings-member-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chat-group-settings-member-row {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.92rem;
}

#app-container.app-theme-night .chat-group-settings-member-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.chat-group-settings-member-row--muted {
  opacity: 0.8;
  font-style: italic;
}

.chat-group-settings-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.chat-group-settings-color-label {
  flex: 1;
  min-width: 120px;
  font-size: 0.9rem;
}

.chat-group-settings-color-input {
  width: 44px;
  height: 34px;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
}

#app-container.app-theme-night .chat-group-settings-color-input {
  border-color: rgba(255, 255, 255, 0.2);
}

.chat-group-settings-muted-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

#chat-screen .chat-group-settings-danger {
  background: #b91c1c !important;
  color: #fff !important;
  border-color: #991b1b !important;
}

#chat-screen .chat-group-settings-danger:hover,
#chat-screen .chat-group-settings-danger:focus-visible {
  filter: brightness(1.06);
}

.chat-group-media-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}

.chat-group-media-gallery-tile {
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  background: rgba(0, 0, 0, 0.06);
  position: relative;
}

#app-container.app-theme-night .chat-group-media-gallery-tile {
  background: rgba(255, 255, 255, 0.08);
}

.chat-group-media-gallery-img {
  width: 100%;
  height: 92px;
  object-fit: cover;
  display: block;
}

.chat-group-media-gallery-video {
  width: 100%;
  height: 92px;
  object-fit: cover;
  display: block;
}

.chat-group-media-gallery-file {
  display: block;
  padding: 10px;
  word-break: break-word;
  font-size: 0.88rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
}

#app-container.app-theme-night .chat-group-media-gallery-file {
  background: rgba(255, 255, 255, 0.06);
}

/* Recherche dans le fil : barre sous l’en-tête (dans #chat-screen main). */
#chat-screen .chat-thread-search-bar {
  flex-shrink: 0;
  padding: 6px 10px 8px;
  background: rgba(249, 250, 251, 0.97);
  border-bottom: 1px solid #e5e7eb;
  box-sizing: border-box;
}

#chat-screen .chat-thread-search-bar[hidden] {
  display: none !important;
}

#chat-screen .chat-thread-search-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

#chat-screen .chat-thread-search-bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#chat-screen .chat-thread-search-step-btn {
  padding: 6px 10px;
  font-size: 0.8rem;
  min-height: 0;
}

#chat-screen .chat-thread-search-bar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
  color: #374151;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

#chat-screen .chat-thread-search-bar-close:hover,
#chat-screen .chat-thread-search-bar-close:focus-visible {
  background: rgba(0, 0, 0, 0.1);
}

#app-container.app-theme-night #chat-screen .chat-thread-search-bar {
  background: rgba(30, 41, 59, 0.96);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

#app-container.app-theme-night #chat-screen .chat-thread-search-bar-close {
  background: rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
}

#app-container.app-theme-night #chat-screen .chat-thread-search-bar-close:hover,
#app-container.app-theme-night #chat-screen .chat-thread-search-bar-close:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

.chat-thread-search-field {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 1rem;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  margin: 0 0 6px;
}

#chat-screen .chat-thread-search-field.chat-thread-search-field--bar {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

#app-container.app-theme-night .chat-thread-search-field {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(255, 255, 255, 0.18);
  color: #f1f5f9;
}

.chat-thread-search-status {
  margin: 4px 0 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: #6b7280;
}

#app-container.app-theme-night .chat-thread-search-status {
  color: #94a3b8;
}

.chat-thread-pinned-body {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  margin: 0 0 10px;
}

.chat-thread-pinned-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chat-thread-pinned-list li {
  margin-bottom: 8px;
}

.chat-thread-pinned-row {
  width: 100%;
  text-align: left;
  white-space: normal;
  line-height: 1.35;
}

/* Coach NDL — indicateur « réfléchit » (points animés) */
#chat-screen .chatroom-messages .chat-msg.chat-msg--coach-typing {
  align-self: flex-start;
  max-width: min(88%, 420px);
  margin: 4px 12px 8px;
}
#chat-screen .chatroom-messages .chat-msg-content.chat-msg-content--coach-typing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 6px;
  background: rgba(255, 248, 231, 0.92);
  border: 1px solid rgba(201, 162, 39, 0.35);
  box-shadow: 0 1px 0 rgba(107, 79, 10, 0.06);
}
.coach-typing-label {
  font-size: 12px;
  font-weight: 650;
  color: #6b4f0a;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.coach-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 14px;
}
.coach-typing-dots > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b8860b;
  opacity: 0.35;
  animation: coachTypingDot 1.05s ease-in-out infinite;
}
.coach-typing-dots > span:nth-child(2) {
  animation-delay: 0.15s;
}
.coach-typing-dots > span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes coachTypingDot {
  0%,
  80%,
  100% {
    opacity: 0.28;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
#app-container.app-theme-night #chat-screen .chatroom-messages .chat-msg-content.chat-msg-content--coach-typing {
  background: rgba(30, 41, 59, 0.88);
  border-color: rgba(201, 162, 39, 0.4);
}
#app-container.app-theme-night .coach-typing-label {
  color: #e8c547;
}
#app-container.app-theme-night .coach-typing-dots > span {
  background: #e8c547;
}

/* Coach NDL — suggestions conversationnelles */
.coach-suggestion-bar {
  margin: 6px 12px 12px;
  padding: 10px 12px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(201, 162, 39, 0.28);
  box-shadow: none;
  box-sizing: border-box;
}
.coach-suggestion-bar--conversational {
  background: linear-gradient(180deg, rgba(255, 248, 231, 0.75) 0%, rgba(255, 255, 255, 0.5) 100%);
}
.coach-suggestion-bar--enter {
  animation: coachSugBarIn 0.14s ease-out both;
}
.coach-suggestion-bar__title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 650;
  color: #6b4f0a;
  letter-spacing: 0.01em;
  animation: coachSugTitleIn 0.12s ease-out both;
}
@keyframes coachSugBarIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes coachSugTitleIn {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes coachSugBtnIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.coach-suggestion-bar__hint {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 500;
  color: #78716c;
  line-height: 1.35;
  text-align: center;
}
.coach-suggestion-bar__row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 7px;
  opacity: 1;
}
.coach-suggestion-btn--enter {
  animation: coachSugBtnIn 0.14s ease-out both;
}
.coach-suggestion-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 39, 0.45);
  background: rgba(26, 26, 26, 0.92);
  color: #f5e6c8;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.coach-suggestion-btn:hover,
.coach-suggestion-btn:focus-visible {
  background: #2a2a2a;
  border-color: #d4af37;
  color: #fff8e7;
  outline: none;
}
.coach-suggestion-btn:active {
  transform: scale(0.98);
}
.coach-suggestion-btn--navigate {
  background: linear-gradient(135deg, #c9a227 0%, #b8860b 100%);
  border-color: #8a6a10;
  color: #1a1a1a;
  font-weight: 700;
}
.coach-suggestion-btn--navigate:hover,
.coach-suggestion-btn--navigate:focus-visible {
  background: linear-gradient(135deg, #d4af37 0%, #c9a227 100%);
  color: #111;
}
.coach-suggestion-btn--other-question {
  background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
  border: 1px solid #922b21;
  color: #fff;
  font-weight: 700;
}
.coach-suggestion-btn--other-question:hover,
.coach-suggestion-btn--other-question:focus-visible {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border-color: #7b241c;
  color: #fff;
  outline: none;
}
.coach-suggestion-btn--continue {
  background: transparent;
  border: 1.5px dashed rgba(107, 79, 10, 0.45);
  color: #6b4f0a;
  font-weight: 700;
}
.coach-suggestion-btn--continue:hover,
.coach-suggestion-btn--continue:focus-visible {
  background: rgba(201, 162, 39, 0.12);
  border-color: #b8860b;
  border-style: solid;
  color: #4a3506;
}
.coach-suggestion-bar--wrong-only {
  padding-top: 8px;
}
.coach-suggestion-btn--wrong {
  background: transparent;
  border: 1.5px solid rgba(107, 79, 10, 0.4);
  color: #6b4f0a;
  font-weight: 700;
}
.coach-suggestion-btn--wrong:hover,
.coach-suggestion-btn--wrong:focus-visible {
  background: rgba(201, 162, 39, 0.14);
  border-color: #b8860b;
  color: #4a3506;
}

/* Coach NDL — documents liés (isolé de l’Aide) */
.coach-related-docs-bar {
  margin: 6px 12px 12px;
  padding: 10px 12px 8px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.85) 0%, rgba(255, 255, 255, 0.55) 100%);
  border: 1px solid rgba(15, 118, 110, 0.28);
  box-sizing: border-box;
}
.coach-related-docs-bar--enter {
  animation: coachSugBarIn 0.14s ease-out both;
}
.coach-related-docs-bar__title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 650;
  color: #0f766e;
  letter-spacing: 0.01em;
}
.coach-related-docs-bar__row {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.coach-related-docs-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 118, 110, 0.35);
  background: rgba(15, 23, 42, 0.9);
  color: #ecfdf5;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.coach-related-docs-btn--enter {
  animation: coachSugBtnIn 0.14s ease-out both;
}
.coach-related-docs-btn:hover,
.coach-related-docs-btn:focus-visible {
  background: #134e4a;
  border-color: #14b8a6;
  outline: none;
}
.coach-related-docs-btn--dismiss {
  background: transparent;
  border: 1.5px dashed rgba(15, 118, 110, 0.45);
  color: #0f766e;
  font-weight: 700;
}
.coach-related-docs-btn--dismiss:hover,
.coach-related-docs-btn--dismiss:focus-visible {
  background: rgba(15, 118, 110, 0.08);
  border-style: solid;
  color: #115e59;
}
#app-container.app-theme-night .coach-related-docs-bar {
  background: rgba(15, 53, 50, 0.72);
  border-color: rgba(45, 212, 191, 0.35);
}
#app-container.app-theme-night .coach-related-docs-bar__title {
  color: #5eead4;
}
#app-container.app-theme-night .coach-related-docs-btn--dismiss {
  border-color: rgba(45, 212, 191, 0.45);
  color: #5eead4;
}

/* Coach NDL — plus de détails sur un document ciblé */
.coach-doc-detail-bar {
  margin: 6px 12px 12px;
  padding: 10px 12px 8px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 248, 231, 0.9) 0%, rgba(255, 255, 255, 0.55) 100%);
  border: 1px solid rgba(201, 162, 39, 0.35);
  box-sizing: border-box;
}
.coach-doc-detail-bar--enter {
  animation: coachSugBarIn 0.14s ease-out both;
}
.coach-doc-detail-bar__title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 650;
  color: #8a6a10;
  letter-spacing: 0.01em;
}
.coach-doc-detail-bar__row {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.coach-doc-detail-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(201, 162, 39, 0.4);
  background: rgba(15, 23, 42, 0.9);
  color: #fff8e7;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.coach-doc-detail-btn--more {
  background: linear-gradient(135deg, #c9a227 0%, #a8841a 100%);
  color: #1a1a1a;
  border-color: #c9a227;
}
.coach-doc-detail-btn--refine {
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid rgba(201, 162, 39, 0.65);
  color: #6b5210;
  font-weight: 700;
}
.coach-doc-detail-btn--enough {
  background: transparent;
  border: 1.5px dashed rgba(201, 162, 39, 0.5);
  color: #8a6a10;
  font-weight: 700;
}
.coach-doc-detail-btn:hover,
.coach-doc-detail-btn:focus-visible {
  outline: none;
  filter: brightness(1.05);
}
#app-container.app-theme-night .coach-doc-detail-bar {
  background: rgba(40, 32, 12, 0.75);
  border-color: rgba(201, 162, 39, 0.4);
}
#app-container.app-theme-night .coach-doc-detail-bar__title {
  color: #e8c547;
}
#app-container.app-theme-night .coach-doc-detail-btn--refine {
  background: rgba(40, 32, 12, 0.55);
  border-color: rgba(232, 197, 71, 0.55);
  color: #f0d56a;
}
#app-container.app-theme-night .coach-doc-detail-btn--enough {
  border-color: rgba(232, 197, 71, 0.45);
  color: #e8c547;
}

#app-container.app-theme-night .coach-suggestion-bar,
#app-container.app-theme-night .coach-suggestion-bar--conversational {
  background: rgba(30, 41, 59, 0.72);
  border-color: rgba(201, 162, 39, 0.35);
}
#app-container.app-theme-night .coach-suggestion-bar__title {
  color: #e8c547;
}
#app-container.app-theme-night .coach-suggestion-bar__hint {
  color: #94a3b8;
}
#app-container.app-theme-night .coach-suggestion-btn--other-question {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border-color: #922b21;
  color: #fff;
}
#app-container.app-theme-night .coach-suggestion-btn--other-question:hover,
#app-container.app-theme-night .coach-suggestion-btn--other-question:focus-visible {
  background: linear-gradient(135deg, #ff6b5a 0%, #e74c3c 100%);
  color: #fff;
}
#app-container.app-theme-night .coach-suggestion-btn--continue {
  border-color: rgba(232, 197, 71, 0.45);
  color: #e8c547;
}
#app-container.app-theme-night .coach-suggestion-btn--continue:hover,
#app-container.app-theme-night .coach-suggestion-btn--continue:focus-visible {
  background: rgba(232, 197, 71, 0.12);
  color: #fde68a;
}
#app-container.app-theme-night .coach-suggestion-btn--wrong {
  border-color: rgba(232, 197, 71, 0.4);
  color: #e8c547;
}
#app-container.app-theme-night .coach-suggestion-btn--wrong:hover,
#app-container.app-theme-night .coach-suggestion-btn--wrong:focus-visible {
  background: rgba(232, 197, 71, 0.12);
  color: #fde68a;
}

/* Coach NDL — relances conversation (aidé ? / autre question ?) */
.coach-followup-bar {
  margin: 4px 12px 14px;
  padding: 10px 12px 8px;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-sizing: border-box;
}
.coach-followup-bar__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 650;
  color: #334155;
  line-height: 1.35;
}
.coach-followup-bar__hint {
  margin: 8px 0 0;
  font-size: 11px;
  color: #64748b;
}
.coach-followup-bar__row {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.coach-followup-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid #94a3b8;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
}
.coach-followup-btn--yes {
  background: #0f172a;
  border-color: #0f172a;
  color: #f8fafc;
}
.coach-followup-btn--no {
  background: #fff;
  border-color: #94a3b8;
  color: #334155;
}
.coach-followup-btn--continue {
  background: linear-gradient(135deg, #c9a227 0%, #b8860b 100%);
  border-color: #8a6a10;
  color: #1a1a1a;
  font-weight: 700;
}
.coach-followup-btn:active {
  transform: scale(0.98);
}
#app-container.app-theme-night .coach-followup-bar {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(148, 163, 184, 0.35);
}
#app-container.app-theme-night .coach-followup-bar__title {
  color: #e2e8f0;
}
#app-container.app-theme-night .coach-followup-btn--no {
  background: rgba(15, 23, 42, 0.6);
  color: #e2e8f0;
  border-color: #64748b;
}