/* Canal « Demandes » du Chat (05/11/2026, drapeau chat_demandes). */

/* Le bouton du bas du menu remplace l'entrée Support & suggestions */
html.dem-on #navFeedback { display: none !important; }

/* Sur ce canal : les filtres à la place des onglets, pas d'appel */
html.dem-canal #s27 #cpChatTabs,
html.dem-canal #cpCallBtn, html.dem-canal #cpVisioBtn,
html.dem-canal #chatCallBtn, html.dem-canal #chatVisioBtn { display: none !important; }

.dem-filtres { display: none; }
html.dem-canal #s27 .dem-filtres {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 8px 18px; border-bottom: 1px solid var(--line); background: var(--card);
  overflow-x: auto; scrollbar-width: none;
}
.dem-f {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 30px; padding: 0 11px; border-radius: 9px; border: 1px solid transparent;
  background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--mut); white-space: nowrap;
}
.dem-f:hover { background: var(--card2); }
.dem-f.on { background: var(--card2); color: var(--ink); }
.dem-f b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 20px; border-radius: 7px;
  font-size: 11.5px; font-weight: 700; background: var(--card2); color: var(--mut);
}
.dem-f.on b { background: var(--card); }
.dem-f b.alerte { background: #fdf6e7; color: #92400e; }
html.theme-dark .dem-f b.alerte { background: rgba(241,197,109,.16); color: #f1c56d; }

/* Sous chaque demande : son état, le lien du fil, le contexte */
.dem-pied { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; margin-top: 5px; }
.dem-etat {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px 0 8px; box-sizing: border-box;
  border-radius: 8px; border: 1px solid var(--line); background: var(--card);
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--mut);
}
.dem-etat svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dem-etat.dem-peut { cursor: pointer; padding-right: 5px; }
.dem-etat.dem-peut > svg:last-child { width: 12px; height: 12px; opacity: .6; margin-left: -2px; }
.dem-etat.fait { color: #15803d; border-color: #bbe5c8; background: #f0faf3; }
.dem-etat.cours { color: #1f4a7a; border-color: #c9d9ea; background: #f2f6fb; }
.dem-etat.question { color: #92400e; border-color: #f0d49c; background: #fdf6e7; }
html.theme-dark .dem-etat { background: transparent; }
html.theme-dark .dem-etat.fait { color: #6fd08f; border-color: #2c5a3c; }
html.theme-dark .dem-etat.cours { color: #9ec2ea; border-color: #33506f; }
html.theme-dark .dem-etat.question { color: #f1c56d; border-color: #6b5426; }
.dem-pied .cb-thread {
  margin-top: 0; height: 22px; padding: 0 9px; box-sizing: border-box;
  color: var(--mut); border: 1px solid var(--line); background: transparent;
  border-radius: 8px; font-size: 12px; font-weight: 600;
}
.dem-pied .cb-thread:hover { background: var(--card2); }
.dem-ctx {
  display: inline-flex; align-items: center; gap: 5px; height: 22px;
  font-size: 12px; color: var(--mut); text-decoration: none; white-space: nowrap;
}
a.dem-ctx span { text-decoration: underline; text-underline-offset: 2px; }
.dem-ctx svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Le menu d'état : l'auteur et la direction */
.dem-menu {
  position: fixed; z-index: 100000; min-width: 150px; padding: 5px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(10, 30, 40, .18);
}
.dem-menu button {
  display: block; width: 100%; height: 32px; padding: 0 10px; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 7px; font: inherit; font-size: 13px; color: var(--ink);
}
.dem-menu button:hover { background: var(--card2); }

/* Avatars et réponse de l'IA : violet par ses jetons */
.dem-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; background: var(--card2); color: var(--ink);
}
.dem-av svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dem-nav-av svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dem-ia-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--ia);
}
.dem-ia-av svg { width: 20px; height: 20px; fill: #fff; }
.thr-msg.dem-ia .thr-head b { color: var(--ia-ink, var(--ia)); }
html.theme-dark .thr-msg.dem-ia .thr-head b { color: var(--ia); }

/* Une question attend : ambre, le rouge reste pour le retard */
#s27.cat-on .cat-cnt.dem-q { background: #b45309; color: #fff; }

/* Depuis un écran : ce qui part avec la demande, retirable d'un clic */
.dem-contexte {
  display: flex; align-items: center; gap: 7px; flex: none;
  margin: 8px 12px 0; padding: 6px 8px 6px 10px; border-radius: 9px;
  background: var(--card2); font-size: 12.5px; color: var(--ink);
}
.dem-contexte > svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .65; }
.dem-contexte .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dem-contexte .t a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dem-contexte .x {
  flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 7px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--mut);
}
.dem-contexte .x:hover { background: var(--card); }
.dem-contexte .x svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.dem-vide { padding: 40px 20px; text-align: center; }