/* Discuter avec une IA (03/10) : la liste des discussions à gauche, le fil à droite, la saisie en bas. */
.chat { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.chat-liste { background: var(--carte); border-radius: var(--radius); box-shadow: var(--ombre); padding: 14px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 180px); position: sticky; top: 16px; }
.chat-nouvelle { justify-content: center; }
.chat-liste-items { display: flex; flex-direction: column; gap: 4px; overflow: auto; min-height: 0; }
.chat-item { display: flex; align-items: center; gap: 4px; border-radius: 12px; }
.chat-item.on { background: var(--ok-fond); }
.chat-item:hover { background: var(--doux); }
.chat-item.on:hover { background: var(--ok-fond); }
.chat-item-btn { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border: 0; background: none; color: var(--bx); font: inherit; text-align: left; cursor: pointer; }
.chat-item-btn b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-btn small { font-size: 14px; color: var(--encre2); }
.chat-item-x { flex: none; width: 30px; height: 30px; margin-right: 4px; border: 0; border-radius: 50%; background: none; color: var(--encre2); cursor: pointer; font-size: 14px; }
.chat-item-x:hover { background: var(--bx2); color: #fff; }
.chat-fil { background: var(--carte); border-radius: var(--radius); box-shadow: var(--ombre); padding: 16px 18px 14px; display: flex; flex-direction: column; min-width: 0; min-height: calc(100vh - 220px); }
.chat-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--ligne); }
.chat-choix { flex: 1 1 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; min-width: 0; }
.chat-voir-liste { display: none; }
.chat-modele { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--encre2); }
.chat-modele select { font: inherit; font-size: 15px; color: var(--bx); background: #fff; border: 1px solid rgba(27,33,31,.18); border-radius: 999px; padding: 8px 12px; max-width: 240px; }
.chat-identite { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; cursor: pointer; }
.chat-identite input { width: 18px; height: 18px; margin: 0; accent-color: var(--bx2); }
.chat-messages { flex: 1 1 auto; min-height: 240px; max-height: calc(100vh - 420px); overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 12px; }
.chat-vide { margin: auto; max-width: 440px; text-align: center; color: var(--encre2); font-size: 15px; }
.chat-vide b { display: block; color: var(--bx); font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.chat-msg { display: flex; flex-direction: column; gap: 4px; max-width: min(720px, 92%); min-width: 0; }
.chat-msg.moi { align-self: flex-end; align-items: flex-end; }
.chat-msg.ia { align-self: flex-start; }
.chat-qui { font-size: 14px; color: var(--or-texte); font-weight: 500; }
.chat-bulle { padding: 11px 15px; border-radius: 18px; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.chat-msg.moi .chat-bulle { background: var(--bx2); color: #fff; border-bottom-right-radius: 6px; }
.chat-msg.ia .chat-bulle { background: var(--fond); color: var(--bx); border-bottom-left-radius: 6px; }
.chat-jointe { display: block; margin-top: 6px; font-size: 14px; opacity: .85; }
.chat-riche p { margin: 0; }
.chat-riche p + p, .chat-riche p + ul, .chat-riche p + ol, .chat-riche ul + p, .chat-riche ol + p, .chat-riche pre + p, .chat-riche p + pre { margin-top: 10px; }
.chat-riche ul, .chat-riche ol { margin: 0; padding-left: 22px; }
.chat-riche li + li { margin-top: 4px; }
.chat-riche b { font-weight: 600; }
.chat-riche .chat-titre { font-weight: 600; font-size: 17px; margin-top: 12px; }
.chat-riche .chat-titre:first-child { margin-top: 0; }
.chat-riche code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; background: rgba(31,91,82,.09); padding: 1px 5px; border-radius: 6px; }
.chat-riche pre { margin: 0; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--ligne); overflow: auto; }
.chat-riche pre code { background: none; padding: 0; white-space: pre; }
.chat-riche a { color: var(--bx2); font-weight: 600; text-decoration: underline; }
.chat-actions { display: flex; gap: 6px; }
.chat-actions .btn.lien { padding: 4px 6px; color: var(--encre2); }
.chat-erreur { margin: 6px 0 0; max-width: 100%; }
.chat-erreur .btn { margin-top: 8px; }
.chat-ecrit { display: inline-flex; gap: 5px; align-items: center; min-height: 24px; }
.chat-ecrit span { width: 8px; height: 8px; border-radius: 50%; background: var(--bx2); opacity: .35; animation: chat-point 1.2s infinite ease-in-out; }
.chat-ecrit span:nth-child(2) { animation-delay: .15s; } .chat-ecrit span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-point { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.chat-saisie { border-top: 1px solid var(--ligne); padding-top: 12px; }
.chat-jointes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chat-saisie-ligne { display: flex; align-items: flex-end; gap: 8px; }
.chat-saisie textarea { flex: 1 1 auto; min-width: 0; min-height: 46px; max-height: 220px; resize: none; border: 1px solid rgba(27,33,31,.18); border-radius: 16px; padding: 11px 14px; background: #fff; color: var(--bx); font: inherit; font-size: 16px; line-height: 1.45; }
.chat-saisie textarea:focus { outline: 2px solid var(--bx2); outline-offset: 1px; border-color: transparent; }
.chat-photo { flex: none; cursor: pointer; }
.chat-saisie .btn[type=submit] { flex: none; }
.chat-note { margin: 8px 0 0; font-size: 14px; }
@media (max-width: 900px) {
  .chat { grid-template-columns: minmax(0, 1fr); }
  .chat-liste { display: none; position: static; max-height: 46vh; }
  .chat.liste-ouverte .chat-liste { display: flex; }
  .chat-voir-liste { display: inline-flex; }
  .chat-fil { min-height: 60vh; padding: 14px 12px 12px; }
  .chat-messages { max-height: none; }
  .chat-msg { max-width: 100%; }
  .chat-saisie-ligne { flex-wrap: wrap; }
  .chat-saisie textarea { flex-basis: 100%; order: -1; }
  .chat-saisie .btn[type=submit] { margin-left: auto; }
  .chat-modele select { max-width: 200px; }
}

/* Les IA pas encore branchées : visibles, grisées, un clic mène aux clés (03/10). */
.chat-ia-off { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px dashed rgba(23,70,63,.3); color: var(--encre2); font-size: 15px; font-weight: 500; text-decoration: none; margin-left: 6px; }
.chat-ia-off:hover { border-color: var(--bx2); color: var(--bx2); }
.chat-note-ia { margin: 0 0 12px; font-size: 14.5px; color: var(--encre2); }
.chat-note-ia a { color: var(--bx2); font-weight: 500; }
.chat-modele select { max-width: 280px; }

/* La barre du haut, 08/10 (proposition A « contrôle segmenté », validée par Lisa) : les IA dans un seul bloc beige, l'active en pilule vert
   sapin ; le modèle en petite pilule à chevron ; l'identité en interrupteur poussé à droite. */
.chat-seg { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--surface); }
.chat-seg button { border: 0; background: transparent; color: var(--bx); font: inherit; font-size: 15px; font-weight: 500; padding: 8px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.chat-seg button:hover { background: rgba(31,91,82,.08); }
.chat-seg button.on { background: var(--bx2); color: #fff; }
.chat-seg-off { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; color: var(--encre2); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.chat-seg-off:hover { color: var(--bx2); background: rgba(31,91,82,.08); }
.chat-mod { position: relative; }
.chat-mod-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(27,33,31,.14); background: #fff; color: var(--encre2); font: inherit; font-size: 14px; font-weight: 500; padding: 7px 12px; border-radius: 999px; cursor: pointer; max-width: 260px; }
.chat-mod-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-mod-btn:hover, .chat-mod-btn[aria-expanded="true"] { border-color: var(--bx2); color: var(--bx); }
.chat-mod-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; min-width: 250px; padding: 6px; border-radius: 16px; background: #fff; border: 1px solid var(--ligne); box-shadow: 0 18px 40px -18px rgba(23,70,63,.35); display: flex; flex-direction: column; gap: 2px; }
.chat-mod-menu[hidden] { display: none; }
.chat-mod-menu button { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 0; background: transparent; color: var(--bx); font: inherit; font-size: 15px; text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.chat-mod-menu button:hover { background: var(--doux); }
.chat-mod-menu button.on { background: rgba(31,91,82,.09); font-weight: 600; }
.chat-mod-menu small { font-size: 14px; color: var(--encre2); font-weight: 400; }
.chat-switch { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--bx); cursor: pointer; white-space: nowrap; }
.chat-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chat-switch-piste { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: rgba(27,33,31,.2); transition: background .15s ease; }
.chat-switch-piste::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; }
.chat-switch input:checked + .chat-switch-piste { background: var(--bx2); }
.chat-switch input:checked + .chat-switch-piste::after { transform: translateX(16px); }
.chat-switch input:focus-visible + .chat-switch-piste { outline: 2px solid var(--bx2); outline-offset: 2px; }
@media (max-width: 640px) { .chat-switch { margin-left: 0; } .chat-mod-menu { min-width: 220px; } }

/* Le lot du 08/10 : recherche et dossiers, pastille de mémoire, actions sous une réponse, fichiers, dictée et vocal, rappels. */
.chat-q { width: 100%; font: inherit; font-size: 15px; color: var(--bx); background: #fff; border: 1px solid rgba(27,33,31,.16); border-radius: 999px; padding: 9px 14px; }
.chat-q:focus { outline: 2px solid var(--bx2); outline-offset: 1px; border-color: transparent; }
.chat-liste-titre { margin: 8px 4px 2px; font-size: 14px; font-weight: 500; color: var(--encre2); border-radius: 8px; padding: 2px 6px; }
.chat-dossier { display: flex; align-items: center; gap: 2px; border-radius: 12px; margin-top: 4px; }
.chat-dossier.vise, .chat-liste-titre.vise { background: var(--ok-fond); outline: 2px dashed var(--bx2); outline-offset: -2px; }
.chat-dossier-btn { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 8px; border: 0; background: none; color: var(--bx); font: inherit; font-size: 15px; text-align: left; cursor: pointer; border-radius: 12px; }
.chat-dossier-btn:hover { background: var(--doux); }
.chat-dossier-btn b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-dossier-btn small { font-size: 14px; color: var(--encre2); margin-left: auto; }
.chat-dossier-btn svg { flex: none; transition: transform .15s ease; }
.chat-dossier.ferme .chat-dossier-btn svg { transform: rotate(-90deg); }
.chat-dossier .chat-item-x { opacity: 0; } .chat-dossier:hover .chat-item-x, .chat-dossier .chat-item-x:focus-visible { opacity: 1; }
.chat-dossier-items { display: flex; flex-direction: column; gap: 4px; margin-left: 12px; padding-left: 8px; border-left: 2px solid var(--ligne); min-height: 12px; }
.chat-dossier-items .indice { margin: 4px 0; font-size: 14px; }
.chat-item[draggable=true] { cursor: grab; }
.chat-item .chat-item-x { display: inline-flex; align-items: center; justify-content: center; margin-right: 0; }
.chat-item .chat-item-x:last-child { margin-right: 4px; }
.chat-ranger { display: flex; flex-direction: column; gap: 2px; margin: 0 4px 6px 14px; padding: 6px; border-radius: 12px; background: var(--fond); }
.chat-ranger button { border: 0; background: none; color: var(--bx); font: inherit; font-size: 14.5px; text-align: left; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.chat-ranger button:hover { background: #fff; } .chat-ranger button.on { font-weight: 600; background: #fff; }
.chat-plus-dossier { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; color: var(--encre2); }
.chat-jauge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(27,33,31,.14); background: #fff; color: var(--bx2); font: inherit; font-size: 14px; font-weight: 500; padding: 5px 11px 5px 7px; border-radius: 999px; cursor: pointer; }
.chat-jauge span { color: var(--encre2); }
.chat-jauge:hover, .chat-jauge[aria-expanded="true"] { border-color: var(--bx2); }
.chat-jauge-menu { width: min(400px, 86vw); padding: 14px 16px; gap: 8px; white-space: normal; }
.chat-jauge-menu p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--bx); }
.chat-jauge-menu p b { font-weight: 600; }
.chat-usage { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid var(--ligne); font-size: 14.5px; color: var(--bx); }
.chat-usage small { display: block; font-size: 14px; color: var(--encre2); margin-top: 2px; }
.chat-usage b { font-weight: 600; white-space: nowrap; }
.chat-actions { flex-wrap: wrap; gap: 2px 6px; }
.chat-faits { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.chat-fait { display: inline-block; align-self: flex-start; padding: 8px 12px; border-radius: 12px; background: var(--ok-fond); color: var(--bx); font-size: 14.5px; line-height: 1.45; }
.chat-fait a { color: var(--bx2); font-weight: 600; }
.chat-fait .btn.lien { padding: 0 2px; }
.chat-rappel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px; border-radius: 14px; background: var(--fond); margin-top: 4px; }
.chat-rappel label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--encre2); }
.chat-rappel label.large { flex: 1 1 220px; }
.chat-rappel input { font: inherit; font-size: 15px; color: var(--bx); background: #fff; border: 1px solid rgba(27,33,31,.18); border-radius: 10px; padding: 8px 10px; }
.chat-relais { align-self: center; text-align: center; font-size: 14.5px; color: var(--encre2); padding: 6px 12px; border-radius: 12px; background: var(--fond); }
.chat-amorces { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.chat-amorces button { border: 1px solid rgba(27,33,31,.14); background: #fff; color: var(--bx); font: inherit; font-size: 14.5px; padding: 9px 14px; border-radius: 999px; cursor: pointer; }
.chat-amorces button:hover { border-color: var(--bx2); color: var(--bx2); }
.chat-vide { max-width: 620px; }
.chat-puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chat-puce { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-puce.pleine { background: var(--fond); color: var(--bx); padding: 7px 8px 7px 12px; }
.chat-puce.pleine button { border: 0; background: none; color: var(--encre2); cursor: pointer; font-size: 14px; padding: 0 4px; }
.chat-jointes { align-items: center; }
.chat-relire { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--fond); font-size: 14.5px; color: var(--bx); }
.chat-relire.fort { background: var(--ok-fond); }
.chat-relire label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.chat-relire input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--bx2); }
.chat-relire small { display: block; font-size: 14px; color: var(--encre2); margin-top: 4px; }
.chat-relire label + small { margin-left: 28px; }
.chat-rond { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(27,33,31,.16); background: #fff; color: var(--bx2); cursor: pointer; }
.chat-rond:hover { border-color: var(--bx2); background: var(--doux); }
.chat-rond.on { background: var(--bx2); color: #fff; border-color: var(--bx2); animation: chat-ecoute 1.4s infinite ease-in-out; }
@keyframes chat-ecoute { 0%, 100% { box-shadow: 0 0 0 0 rgba(31,91,82,.35); } 50% { box-shadow: 0 0 0 8px rgba(31,91,82,0); } }
.chat-saisie-ligne[hidden], .chat-vocal-barre[hidden] { display: none; }
.chat-vocal-barre { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 6px 8px 14px; border: 1px solid rgba(27,33,31,.16); border-radius: 999px; background: #fff; font-size: 15px; color: var(--bx); }
.chat-vocal-point { width: 10px; height: 10px; border-radius: 50%; background: #B4532A; animation: chat-point 1.2s infinite ease-in-out; }
.chat-vocal-mot { flex: 1 1 auto; color: var(--encre2); }
.rappel-bandeau { position: fixed; z-index: 1000; left: 50%; top: 18px; transform: translateX(-50%); width: min(520px, calc(100vw - 32px)); display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #fff; color: #17463F; box-shadow: 0 24px 60px -20px rgba(23,70,63,.45); border: 1px solid rgba(23,70,63,.12); font-size: 15px; }
.rappel-bandeau div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rappel-bandeau b { font-weight: 600; font-size: 14px; color: #8A6D2F; }
@media (max-width: 900px) { .chat-rond { width: 42px; height: 42px; } .chat-saisie-ligne { align-items: center; } .chat-dossier .chat-item-x { opacity: 1; } }
.chat-tout { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--bx); cursor: pointer; }
.chat-tout input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--bx2); }
.chat-tete { position: relative; }
.chat-mod-droit { position: static; }
.chat-mod-droit .chat-jauge-menu { left: auto; right: 0; top: calc(100% - 4px); max-width: calc(100% - 4px); }

/* 08/10 (Lisa) : la colonne des discussions et le fil dans UN seul encadré blanc, collés ; la colonne se réduit pour laisser toute la place à la discussion. */
.chat { gap: 0; align-items: stretch; background: var(--carte); border-radius: var(--radius); box-shadow: var(--ombre); }
.chat-liste, .chat-fil { background: none; box-shadow: none; border-radius: 0; }
.chat-liste { border-right: 1px solid var(--ligne); align-self: start; padding: 16px 14px; }
.chat.repliee { grid-template-columns: minmax(0, 1fr); }
.chat.repliee .chat-liste { display: none; }
.chat-plier { width: 40px; height: 40px; }
.chat-plier[aria-expanded="true"] { background: var(--doux); }
@media (max-width: 900px) { .chat-plier { display: none; } .chat-liste { border-right: 0; border-bottom: 1px solid var(--ligne); } .chat.repliee.liste-ouverte .chat-liste { display: flex; } }
.chat-tete > .chat-choix { flex: 1 1 0; }
.chat-plus { display: none; width: 40px; height: 40px; background: var(--bx2); color: #fff; border-color: var(--bx2); }
.chat-plus:hover { background: var(--bx); border-color: var(--bx); }
.chat.repliee .chat-plus { display: inline-flex; }
.chat-cloche { padding: 6px 12px 6px 10px; }
.chat-usage .btn.lien { padding: 0 2px; white-space: nowrap; }
@media (max-width: 900px) { .chat.repliee .chat-plus { display: none; } }
.chat-mod .chat-jauge { position: relative; width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
.chat-pastille { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bx2); color: #fff !important; font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; }
/* Les trois gestes d'une discussion (renommer, ranger, supprimer) : au survol, sur la discussion ouverte, et toujours au doigt. */
.chat-item .chat-item-x { width: 28px; height: 28px; opacity: 0; }
.chat-item:hover .chat-item-x, .chat-item.on .chat-item-x, .chat-item .chat-item-x:focus-visible, .chat-item .chat-item-x[aria-expanded="true"] { opacity: 1; }
.chat-item:not(:hover):not(.on) .chat-item-x:not(:focus-visible):not([aria-expanded="true"]) { width: 0; margin: 0; overflow: hidden; }
@media (hover: none) { .chat-item .chat-item-x { opacity: 1; width: 28px !important; } }
/* Sous une réponse (08/10, Lisa) : une icône pour copier, un petit bouton « Utiliser » qui déroule les destinations. */
.chat-actions { align-items: center; gap: 4px; }
.chat-act { display: inline-flex; align-items: center; gap: 6px; height: 32px; min-width: 32px; padding: 0 7px; border: 0; border-radius: 999px; background: none; color: var(--encre2); font: inherit; font-size: 14px; cursor: pointer; }
.chat-act.large { padding: 0 10px 0 8px; }
.chat-act:hover, .chat-act[aria-expanded="true"] { background: var(--fond); color: var(--bx2); }
.chat-act.fait { color: var(--bx2); background: var(--ok-fond); }
.chat-act svg:last-child:not(:first-child) { transition: transform .15s ease; }
.chat-act[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.chat-vers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.chat-vers[hidden] { display: none; }
.chat-vers button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(27,33,31,.14); background: #fff; color: var(--bx); font: inherit; font-size: 14.5px; padding: 8px 14px 8px 11px; border-radius: 999px; cursor: pointer; }
.chat-vers button:hover { border-color: var(--bx2); color: var(--bx2); }
/* Les dossiers en tuiles (08/10, variante C). */
.chat-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
.chat-tuile { position: relative; border-radius: 14px; background: #E7F0EC; color: #17463F; outline: 2px solid transparent; outline-offset: -2px; }
.chat-tuile.t1 { background: #F6EEDB; color: #6B5320; } .chat-tuile.t2 { background: var(--surface); } .chat-tuile.t3 { background: #EAEFE3; }
.chat-tuile.on, .chat-tuile.vise { outline-color: var(--bx2); }
.chat-tuile-btn { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 10px 9px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 14px; }
.chat-tuile-btn svg { width: 19px; height: 19px; margin-bottom: 4px; }
.chat-tuile-btn b { max-width: 100%; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-tuile-btn small { font-size: 14px; opacity: .8; }
.chat-tuile-gestes { position: absolute; top: 5px; right: 5px; display: flex; gap: 1px; opacity: 0; }
.chat-tuile:hover .chat-tuile-gestes, .chat-tuile-gestes:focus-within { opacity: 1; }
.chat-tuile-gestes button { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.7); color: inherit; font-size: 12px; cursor: pointer; }
.chat-tuile-gestes button:hover { background: #fff; }
.chat-liste-titre { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-liste-titre .btn.lien { padding: 0 2px; }
@media (hover: none) { .chat-tuile-gestes { opacity: 1; } }
/* La colonne, affinée (08/10) : les gestes d'une discussion seulement au survol (le titre garde toute la place), la tuile « + Dossier » dans la grille. */
.chat-item.on:not(:hover) .chat-item-x:not(:focus-visible):not([aria-expanded="true"]) { width: 0; margin: 0; overflow: hidden; opacity: 0; }
.chat-item-btn b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.chat-tuile-plus { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 78px; border: 1.5px dashed rgba(23,70,63,.28); border-radius: 14px; background: none; color: var(--encre2); font: inherit; font-size: 14px; cursor: pointer; }
.chat-tuile-plus:hover { border-color: var(--bx2); color: var(--bx2); }
@media (hover: none) { .chat-item.on .chat-item-x { opacity: 1 !important; } }
/* « Utiliser » : un vrai menu déroulant (08/10, Lisa), et « Copié » qui s'affiche au clic. */
.chat-msg.ia { position: relative; }
.chat-vers { position: absolute; z-index: 30; flex-direction: column; flex-wrap: nowrap; gap: 2px; margin: 0; min-width: 230px; padding: 6px; border-radius: 16px; background: #fff; border: 1px solid var(--ligne); box-shadow: 0 18px 40px -18px rgba(23,70,63,.35); }
.chat-vers button { border: 0; border-radius: 10px; padding: 10px 12px; gap: 10px; white-space: nowrap; }
.chat-vers button:hover { background: var(--doux); color: var(--bx); }
.chat-vers button svg { color: var(--bx2); flex: none; }
.chat-act.fait { padding: 0 10px 0 8px; font-weight: 500; }
/* Les tuiles des dossiers, affinées (08/10, Lisa : « légèrement moins mastoc ») : une seule ligne, l'icône, le nom, le nombre. */
.chat-tuile-btn { flex-direction: row; align-items: center; gap: 7px; padding: 9px 10px; }
.chat-tuile-btn svg { width: 16px; height: 16px; margin: 0; flex: none; }
.chat-tuile-btn b { flex: 1 1 auto; min-width: 0; font-size: 14.5px; }
.chat-tuile-btn small { flex: none; font-size: 14px; }
.chat-tuile { border-radius: 12px; } .chat-tuile-btn { border-radius: 12px; }
.chat-tuile-gestes { top: 50%; right: 4px; transform: translateY(-50%); background: inherit; }
.chat-tuile:hover .chat-tuile-btn small { visibility: hidden; }
.chat-tuile-plus { flex-direction: row; min-height: 0; padding: 8px 10px; gap: 6px; border-radius: 12px; }
.chat-tuile-plus svg { width: 15px; height: 15px; }
.chat-tous { align-self: flex-start; padding: 2px 4px; color: var(--encre2); }
.chat-q { padding-left: 38px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6C67' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.500 4.500'/%3E%3C/svg%3E") 13px center / 17px no-repeat; }
.chat-act.large { padding: 0 8px 0 10px; }
/* 08/10 : plus de blanc sous la saisie. Le fil a une hauteur fixe à l'écran, et c'est la zone des messages qui prend toute la place restante. */
@media (min-width: 901px) { .chat-fil { height: calc(100vh - 200px); min-height: 420px; padding-bottom: 16px; } .chat-messages { max-height: none; min-height: 0; flex: 1 1 0; } .chat-liste { max-height: calc(100vh - 200px); } }
/* Lot du 08/10 soir : en-tête réduit, identité compacte, modifier / refaire / arrêter, épingle, couleur des dossiers, dépôt de fichiers, « + » au téléphone. */
.chat-entete { margin-bottom: 12px; } .chat-entete h1 { font-size: 22px; }
.chat-switch-ico { display: none; color: var(--bx2); }
@media (max-width: 1360px) { .chat-switch-mot { display: none; } .chat-switch-ico { display: inline-flex; } .chat-switch { gap: 6px; } }
.chat-msg.moi { position: relative; }
.chat-modifier { opacity: 0; align-self: flex-end; height: 28px; min-width: 28px; margin-bottom: -2px; order: 2; }
.chat-msg.moi:hover .chat-modifier, .chat-modifier:focus-visible { opacity: 1; }
@media (hover: none) { .chat-modifier { opacity: 1; } }
.chat-epingle { display: inline-flex; vertical-align: -2px; margin-right: 4px; color: var(--or-texte); }
.chat-item .chat-item-x { width: 26px; height: 26px; }
.chat-pot { display: block; width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(#E7F0EC 0 25%, #F6EEDB 0 50%, #EDE6D8 0 75%, #EAEFE3 0); border: 1px solid rgba(23,70,63,.35); }
.chat-fil.depot { outline: 2px dashed var(--bx2); outline-offset: -8px; background: var(--ok-fond); }
#chat-stop { flex: none; }
@media (min-width: 901px) { .chat-fil { height: calc(100vh - 150px); } .chat-liste { max-height: calc(100vh - 150px); } }
@media (max-width: 900px) { .chat .chat-plus, .chat.repliee .chat-plus { display: inline-flex; } }
/* Sous son propre message : copier, modifier (au survol ; toujours visibles au doigt). */
.chat-msg.moi .chat-actions.moi { order: 2; justify-content: flex-end; gap: 2px; opacity: 0; }
.chat-msg.moi:hover .chat-actions.moi, .chat-actions.moi:focus-within { opacity: 1; }
.chat-actions.moi .chat-act { height: 28px; min-width: 28px; padding: 0 5px; }
@media (hover: none) { .chat-msg.moi .chat-actions.moi { opacity: 1; } }
/* Trois petits points (08/10, Lisa) : une seule icône par discussion et par dossier, les options se déroulent dessous. */
.chat-ranger { margin: 2px 0 8px; padding: 6px; background: var(--fond); border-radius: 14px; }
.chat-ranger button { display: flex; align-items: center; gap: 10px; width: 100%; }
.chat-ranger button svg { width: 16px; height: 16px; flex: none; color: var(--bx2); }
.chat-ranger button.danger, .chat-ranger button.danger svg { color: #A0472B; }
.chat-ranger p { margin: 8px 10px 2px; font-size: 14px; color: var(--encre2); }
.chat-ranger p:first-child { margin-top: 4px; }
.chat-couleurs { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 10px 6px; }
.chat-ranger .chat-pastille-c { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid rgba(23,70,63,.18); justify-content: center; }
.chat-ranger .chat-pastille-c:hover { transform: scale(1.08); }
.chat-pastille-c i { display: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chat-pastille-c.on { outline: 2px solid var(--bx2); outline-offset: 2px; } .chat-pastille-c.on i { display: block; }
.chat-tuile-gestes button { width: 26px; height: 26px; background: rgba(255,255,255,.75); color: inherit; }
.chat-item .chat-points { width: 30px; height: 30px; }
/* Les réponses respirent (08/10, Lisa : « trop mastoc, on ne comprend rien entre les idées »). */
.chat-riche { line-height: 1.6; }
.chat-riche p + p { margin-top: 12px; }
.chat-riche li + li { margin-top: 6px; }
.chat-riche ol, .chat-riche ul { padding-left: 24px; }
.chat-riche ol > li { font-weight: 500; } .chat-riche ol > li b { font-weight: 600; }
.chat-riche ol + ul { padding-left: 44px; margin-top: 6px; }
.chat-riche ul + ol, .chat-riche ol + ol, .chat-riche p + ol { margin-top: 18px; }
.chat-riche ul + p, .chat-riche ol + p { margin-top: 16px; }
.chat-riche .chat-titre { margin-top: 18px; margin-bottom: 4px; }
.chat-riche i { font-style: italic; }
/* Le titre d'une discussion tient sur UNE ligne (08/10, Lisa) ; trop long, il défile au survol pour se lire en entier. */
.chat-item-btn b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; container-type: inline-size; }
.chat-defile { display: inline-block; white-space: nowrap; transition: transform .2s ease; }
.chat-item:hover .chat-item-btn b, .chat-item-btn:focus-visible b { text-overflow: clip; }
.chat-item:hover .chat-defile, .chat-item-btn:focus-visible .chat-defile { transform: translateX(min(0px, calc(100cqw - 100%))); transition: transform 2.4s linear .25s; }
@media (prefers-reduced-motion: reduce) { .chat-defile { transition: none !important; } }
.chat-item:not(:hover) .chat-item-btn:not(:focus-visible) b { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
/* Le menu d'une discussion, resserré (08/10) : les dossiers se déplient seulement quand on veut ranger. */
.chat-ranger button { padding: 8px 10px; }
.chat-ranger [data-ranger-voir] svg:last-child { width: 14px; height: 14px; color: var(--encre2); transition: transform .15s ease; }
.chat-ranger [data-ranger-voir][aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.chat-ranger-sous { display: flex; flex-direction: column; gap: 1px; margin: 0 0 4px 14px; padding-left: 8px; border-left: 2px solid var(--ligne); }
.chat-point-c { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(23,70,63,.2); }
/* Le menu d'une discussion en trois lignes et un sélecteur de dossier (08/10, Lisa : « c'est mastoc », « en sélecteur plutôt »). */
.chat-ranger-choix { display: flex; align-items: center; gap: 10px; padding: 4px 10px; }
.chat-ranger-choix svg { width: 16px; height: 16px; flex: none; color: var(--bx2); }
.chat-ranger-choix select { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14.5px; color: var(--bx); background: #fff; border: 1px solid rgba(27,33,31,.16); border-radius: 999px; padding: 6px 10px; cursor: pointer; }
/* Variante A (08/10) : un dossier par ligne, déplié sur place. */
.chat-tuiles { grid-template-columns: minmax(0, 1fr); gap: 5px; }
.chat-tuile-btn { padding: 9px 12px; }
.chat-tuile-btn b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-tuile.on { outline: 0; border-radius: 12px 12px 0 0; }
.chat-tuile.vise { outline: 2px dashed var(--bx2); outline-offset: -2px; }
.chat-dossier-corps { display: flex; flex-direction: column; gap: 3px; margin-top: -5px; padding: 6px; border-radius: 0 0 12px 12px; }
.chat-dossier-corps.vise { outline: 2px dashed var(--bx2); outline-offset: -2px; }
.chat-dossier-corps .chat-item { background: rgba(255,255,255,.75); }
.chat-dossier-corps .chat-item.on { background: #fff; box-shadow: 0 0 0 1.5px var(--bx2) inset; }
.chat-dossier-corps .indice { margin: 4px 6px; font-size: 14px; }
.chat-tuile-plus { justify-content: flex-start; padding: 8px 12px; }
.chat-couleurs { gap: 6px; align-items: center; }
.chat-ranger .chat-pastille-c { width: 24px; height: 24px; }
.chat-couleurs-sep { width: 1px; height: 20px; background: rgba(23,70,63,.2); margin: 0 2px; }
/* « Ranger dans… » : un bouton comme les autres lignes du menu, et son menu blanc flottant. */
.chat-ranger [data-ranger-dans] svg:last-child { width: 14px; height: 14px; color: var(--encre2); }
.chat-vers.flottant { position: fixed; z-index: 1200; display: flex; max-width: 280px; max-height: 60vh; overflow: auto; }
.chat-vers.flottant button { display: flex; align-items: center; width: 100%; background: none; font: inherit; font-size: 14.5px; color: var(--bx); cursor: pointer; text-align: left; }
.chat-vers.flottant button.on { font-weight: 600; background: var(--fond); }
/* Le dossier ouvert, allégé (08/10, Lisa : « trop mastoc ») : plus de bloc de couleur, un simple filet à gauche dans la couleur du dossier, des lignes sans cartes. */
.chat-tuile.on { border-radius: 12px; }
.chat-dossier-corps { background: none !important; margin: 0 0 4px 10px; padding: 0 0 0 6px; border-left: 3px solid; border-radius: 0; gap: 1px; }
.chat-dossier-corps .chat-item { background: none; }
.chat-dossier-corps .chat-item:hover { background: var(--doux); }
.chat-dossier-corps .chat-item.on { background: var(--ok-fond); box-shadow: none; }
.chat-dossier-corps .chat-item-btn { padding: 6px 8px; }
/* La palette d'un dossier : l'ajence, l'identité, une couleur au choix. */
.chat-couleur-libre { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 10px 4px; font-size: 14.5px; color: var(--bx); cursor: pointer; }
.chat-couleur-libre input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.chat-pastille-c.plus { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px dashed rgba(23,70,63,.4); }
.chat-pastille-c.plus svg { width: 13px; height: 13px; }
.chat-place { margin: 0; padding: 9px 11px; border-radius: 12px; background: var(--fond); font-size: 14px; line-height: 1.4; color: var(--bx); }
.chat-place.plein { background: #F8E3DA; color: #7A3320; }
/* La place des discussions : l'alerte dans la colonne, et la fenêtre de tri. */
button.chat-place { display: flex; flex-direction: column; gap: 2px; width: 100%; border: 0; text-align: left; font: inherit; cursor: pointer; background: #FBF1DC; color: #5C4718; }
button.chat-place b { font-weight: 600; font-size: 14.5px; } button.chat-place span { font-size: 14px; }
button.chat-place.plein { background: #F8E3DA; color: #7A3320; }
.chat-tri { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(23,70,63,.38); }
.chat-tri-boite { width: min(620px, 100%); max-height: min(86vh, 760px); display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 22px; background: #fff; color: #17463F; box-shadow: 0 30px 80px -30px rgba(23,70,63,.6); }
.chat-tri-boite h2 { margin: 0; font-size: 20px; font-weight: 600; } .chat-tri-boite p { margin: 0; font-size: 15px; line-height: 1.5; }
.chat-tri-barre { height: 10px; border-radius: 999px; background: var(--surface); overflow: hidden; } .chat-tri-barre i { display: block; height: 100%; border-radius: 999px; background: var(--bx2); }
.chat-tri-barre.plein i { background: #B4532A; }
.chat-tri-liste { flex: 1 1 auto; min-height: 120px; overflow: auto; display: flex; flex-direction: column; gap: 2px; margin: 4px -6px; padding: 0 6px; }
.chat-tri-ligne { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; cursor: pointer; }
.chat-tri-ligne:hover { background: var(--doux); }
.chat-tri-ligne input { width: 18px; height: 18px; flex: none; accent-color: var(--bx2); }
.chat-tri-ligne span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.chat-tri-ligne b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-tri-ligne small { font-size: 14px; color: var(--encre2); }
.chat-tri-ligne em { flex: none; font-style: normal; font-size: 14px; color: var(--encre2); }
/* « Une autre couleur » : une ligne du menu comme les autres, qui ouvre le nuancier. */
.chat-ranger button.chat-couleur-libre { padding: 6px 10px 4px; background: none; border: 0; width: 100%; font: inherit; font-size: 14.5px; color: var(--bx); cursor: pointer; }
/* Le nuancier (nuancier.js) : le rectangle, la réglette des teintes, la case du code. */
.nuancier { position: fixed; z-index: 1600; width: 248px; padding: 12px; border-radius: 18px; background: #fff; border: 1px solid rgba(23,70,63,.12); box-shadow: 0 24px 60px -22px rgba(23,70,63,.5); display: flex; flex-direction: column; gap: 12px; }
.nuancier-carre { position: relative; height: 150px; border-radius: 12px; cursor: crosshair; touch-action: none; background-image: linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.nuancier-carre:focus-visible { outline: 2px solid #1F5B52; outline-offset: 2px; }
.nuancier-carre i { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 5px rgba(0,0,0,.3); pointer-events: none; }
.nuancier-teinte { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; margin: 0; border-radius: 999px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); cursor: pointer; }
.nuancier-teinte::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.25); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.nuancier-teinte::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.25); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.nuancier-bas { display: flex; align-items: center; gap: 10px; }
.nuancier-apercu { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(23,70,63,.15); }
.nuancier-code { flex: 1 1 auto; display: flex; align-items: center; gap: 4px; border: 1px solid rgba(27,33,31,.18); border-radius: 10px; padding: 0 10px; color: #5E6C67; font-size: 15px; }
.nuancier-code input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: #17463F; padding: 8px 0; text-transform: uppercase; letter-spacing: .03em; }
.nuancier-code:focus-within { border-color: #1F5B52; box-shadow: 0 0 0 2px rgba(31,91,82,.18); }
.nuancier-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* Plusieurs IA répondent à la même question (08/10) : le mode « Comparer », les réponses côte à côte. */
.chat-comparer.on { background: var(--bx2); color: #fff; border-color: var(--bx2); }
.chat-seg.multi button { display: inline-flex; align-items: center; gap: 5px; }
.chat-seg.multi button svg { width: 14px; height: 14px; }
.chat-seg.multi button:not(.on) { opacity: .7; }
.chat-mod[hidden] { display: none; }
.chat-groupe { display: grid; gap: 12px; align-items: start; width: 100%; }
.chat-groupe.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chat-groupe.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chat-groupe .chat-msg { max-width: 100%; }
.chat-groupe .chat-bulle { font-size: 15px; }
@media (max-width: 1100px) { .chat-groupe.n3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .chat-groupe.n2 { grid-template-columns: minmax(0, 1fr); } }
/* Répondre à un passage précis : le bouton qui flotte au-dessus de la sélection, la citation au-dessus de la saisie et dans le message. */
.chat-repondre-a { position: fixed; z-index: 1300; border: 0; border-radius: 999px; padding: 8px 14px; background: #17463F; color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 10px 26px -10px rgba(23,70,63,.7); }
.chat-citation { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; padding: 9px 12px; border-left: 3px solid var(--bx2); background: var(--fond); border-radius: 0 12px 12px 0; font-size: 14.5px; color: var(--bx); }
.chat-citation span { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.chat-citation small { display: block; font-size: 14px; color: var(--encre2); }
.chat-citation button { flex: none; border: 0; background: none; color: var(--encre2); cursor: pointer; font-size: 14px; }
.chat-cite { display: block; margin: 0 0 8px; padding: 0 0 0 10px; border-left: 2px solid rgba(255,255,255,.55); font-size: 14.5px; opacity: .9; }
/* Partager une discussion (08/10) : le panneau, la discussion à deux. */
.chat-part { padding: 14px; border-radius: 16px; background: var(--fond); display: flex; flex-direction: column; gap: 8px; }
.chat-part > b { font-size: 15.5px; font-weight: 600; } .chat-part > b small { font-weight: 400; font-size: 14px; color: var(--encre2); margin-left: 6px; }
.chat-part p { font-size: 14.5px !important; color: var(--bx); }
.chat-part-ligne { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-part-ligne input { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 15px; color: var(--bx); background: #fff; border: 1px solid rgba(27,33,31,.18); border-radius: 12px; padding: 9px 12px; }
.chat-part-membres { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-part-membres span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px; background: #fff; font-size: 14.5px; }
.chat-part-membres button { border: 0; background: none; color: var(--encre2); cursor: pointer; font-size: 14px; }
.chat-part-ok { padding: 9px 12px; border-radius: 12px; background: var(--ok-fond); font-size: 14.5px !important; }
.chat-tri-boite { overflow: auto; }
.chat-bandeau-deux { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; background: #E6EFEA; color: var(--bx); font-size: 14.5px; line-height: 1.45; }
.chat-bandeau-deux svg { flex: none; margin-top: 2px; } .chat-bandeau-deux b { font-weight: 600; }
.chat-a-deux { display: inline-flex; align-items: center; gap: 4px; color: var(--bx2); } .chat-a-deux svg { width: 13px; height: 13px; }
.chat-msg.moi.autre { align-self: flex-start; align-items: flex-start; }
.chat-msg.moi.autre .chat-bulle { background: #DCE9E3; color: var(--bx); border-bottom-right-radius: 18px; border-bottom-left-radius: 6px; }
.chat-msg.moi.autre .chat-cite { border-left-color: rgba(23,70,63,.4); }
.chat-msg.moi .chat-qui { color: var(--encre2); }
/* 08/10 nuit (Lisa) : la barre du haut respire. Le bouton de la colonne vit dans la colonne (à côté de « Nouvelle discussion ») ; colonne
   réduite, il reste une fine réglette à gauche avec deux ronds : rouvrir, et nouvelle discussion. « Comparer » s'écrit en toutes lettres. */
.chat-liste-haut { display: flex; align-items: center; gap: 8px; }
.chat-liste-haut .chat-nouvelle { flex: 1 1 auto; min-width: 0; }
.chat-liste-haut .chat-plier, .chat-mini .chat-rond { width: 38px; height: 38px; flex: none; }
.chat-mini { display: none; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0; border-right: 1px solid var(--ligne); }
.chat-mini-plus { background: var(--bx2); color: #fff; border-color: var(--bx2); }
.chat-mini-plus:hover { background: var(--bx); border-color: var(--bx); }
@media (min-width: 901px) {
  .chat.repliee { grid-template-columns: 58px minmax(0, 1fr); }
  .chat.repliee .chat-mini { display: flex; }
  .chat .chat-plus, .chat.repliee .chat-plus { display: none; }
}
@media (max-width: 900px) { .chat-liste-haut .chat-plier { display: none; } }
.chat-tete, .chat-tete > .chat-choix { align-items: center; }
.chat-tete .chat-switch { align-self: center; }
.chat-mod .chat-jauge, .chat-choix > .chat-jauge { flex: none; }
.chat-choix > .chat-comparer { width: auto; height: 38px; padding: 0 13px 0 10px; border-radius: 999px; gap: 7px; display: inline-flex; align-items: center; border: 1px solid rgba(27,33,31,.14); background: #fff; color: var(--bx); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.chat-choix > .chat-comparer span { color: inherit; }
.chat-choix > .chat-comparer.on { background: var(--bx2); color: #fff; border-color: var(--bx2); }
/* Le sélecteur d'IA à cocher (08/10 nuit) : une mini-coche sur chaque IA choisie, les autres en clair. */
.chat-seg.multi button:not(.on) { opacity: 1; color: var(--encre2); }
.chat-seg.multi button svg { width: 13px; height: 13px; margin-left: -3px; }

/* 11/10 (Lisa : « sur téléphone c'est inutilisable, les boutons sont excentrés, il faut alléger ») : le téléphone, refait.
   - en haut, UNE ligne : mes discussions, le menu « IA et modèle » (qui porte le nom du modèle), la cloche, nouvelle discussion ;
   - le menu réunit ce qui était éparpillé : les IA, les modèles, « Mon identité », la mémoire de la discussion ;
   - le fil défile seul, la saisie reste collée en bas, au-dessus de la barre de l'app (hauteur posée par caler() dans chat.js) ;
   - « Mes discussions » remplace le fil le temps de choisir (plus de boîte qui défile dans la page) ;
   - toutes les cibles font 44 px au moins. À l'ordinateur, rien ne bouge : .chat-regl ne fait que regrouper sans se voir. */
.chat-regl { display: contents; }
.chat-regl > .chat-switch { order: 2; }
.chat-regl-btn, .chat-regl-mot, .chat-regl-chevron, .chat-regl-attente, .chat-rond.chat-liste-fermer { display: none; }
@media (min-width: 901px) { .chat-rond.chat-voir-liste { display: none; } }
@media (max-width: 900px) {
  .chat-entete { margin-bottom: 10px; }
  .chat-fil { height: var(--chat-h, calc(100dvh - 230px)); min-height: 0; padding: 10px 12px 12px; }
  .chat-messages { flex: 1 1 0; min-height: 0; max-height: none; gap: 10px; padding: 4px 0 10px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  /* La barre du haut, sur une ligne. */
  .chat-tete { flex-wrap: nowrap; gap: 6px; padding-bottom: 10px; margin-bottom: 8px; }
  .chat-tete > .chat-choix { display: contents; }
  .chat-tete .chat-rond, .chat .chat-tete .chat-plus, .chat-tete .chat-mod .chat-cloche { width: 44px; height: 44px; padding: 0; flex: none; }
  .chat-rond.chat-voir-liste { display: inline-flex; order: 1; }
  .chat-regl-btn { order: 2; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; flex: 1 1 0; min-width: 0; height: 44px; padding: 0 11px 0 14px; border: 1px solid rgba(27,33,31,.14); border-radius: 999px; background: var(--fond); color: var(--bx); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
  .chat-regl-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-regl-btn svg { flex: none; color: var(--encre2); transition: transform .15s ease; }
  .chat.reglages .chat-regl-btn { border-color: var(--bx2); background: #fff; }
  .chat.reglages .chat-regl-btn svg { transform: rotate(180deg); }
  .chat-regl-attente { display: block; order: 2; flex: 1 1 0; min-width: 0; margin: 0; }
  .chat-tete .chat-mod-droit { order: 3; }
  .chat .chat-tete .chat-plus { order: 4; }
  /* Le menu « IA et modèle ». */
  .chat-regl { display: none; position: absolute; z-index: 45; left: 0; right: 0; top: calc(100% - 4px); flex-direction: column; gap: 6px; padding: 10px; border-radius: 18px; background: #fff; border: 1px solid var(--ligne); box-shadow: 0 18px 40px -18px rgba(23,70,63,.35); max-height: calc(var(--chat-h, 80vh) - 76px); overflow-y: auto; }
  .chat.reglages .chat-regl { display: flex; }
  .chat-regl .chat-seg { display: flex; }
  .chat-regl .chat-seg button, .chat-regl .chat-seg-off { flex: 1 1 0; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 6px; margin: 0; }
  .chat-regl > .chat-mod { position: static; order: 1; }
  .chat-regl #chat-modele-btn { display: none; }
  .chat-regl #chat-modele-menu { display: flex; position: static; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .chat-regl .chat-mod-menu button[data-modele] { min-height: 46px; white-space: normal; }
  .chat-tete .chat-regl > .chat-switch { order: 2; display: flex; align-self: stretch; margin: 0; min-height: 48px; padding: 0 12px; gap: 10px; font-size: 15px; border-top: 1px solid var(--ligne); white-space: normal; }
  .chat-regl .chat-switch-ico { display: inline-flex; order: 0; }
  .chat-regl .chat-switch-mot { display: inline; order: 1; flex: 1 1 auto; }
  .chat-regl .chat-switch-piste { order: 2; }
  .chat-regl > .chat-mod-droit { order: 3; border-top: 1px solid var(--ligne); }
  .chat-regl .chat-jauge { width: 100%; height: 48px; padding: 0 12px; gap: 10px; justify-content: flex-start; border: 0; border-radius: 10px; font-size: 15px; }
  .chat-regl .chat-regl-mot { display: inline; flex: 1 1 auto; text-align: left; color: var(--bx); }
  .chat-regl .chat-regl-chevron { display: inline-flex; transition: transform .15s ease; }
  .chat-regl .chat-jauge[aria-expanded="true"] .chat-regl-chevron { transform: rotate(180deg); }
  .chat-regl .chat-jauge-menu { position: static; width: auto; max-width: none; padding: 2px 12px 8px; border: 0; border-radius: 0; box-shadow: none; }
  /* La cloche : son panneau prend la largeur de la barre. */
  .chat-tete > .chat-choix > .chat-mod-droit .chat-jauge-menu { left: 0; right: 0; width: auto; max-width: none; }
  .chat-rappel label, .chat-rappel label.large { flex: 1 1 100%; }
  .chat-rappel input, .chat-part-ligne input { font-size: 16px; min-height: 44px; }
  .chat-mod-menu .chat-rappel .btn { width: 100%; justify-content: center; background: var(--bx2); color: #fff; border-radius: 999px; }
  /* « Mes discussions » remplace le fil. */
  .chat.liste-ouverte .chat-fil { display: none; }
  .chat-liste, .chat.liste-ouverte .chat-liste { max-height: none; border-bottom: 0; padding: 12px; }
  .chat-liste-items { overflow: visible; }
  .chat-rond.chat-liste-fermer { display: inline-flex; width: 44px; height: 44px; }
  .chat-liste-haut .chat-nouvelle { min-height: 44px; }
  .chat-q { font-size: 16px; min-height: 44px; }
  .chat-item-btn { min-height: 48px; justify-content: center; }
  .chat-item .chat-item-x.chat-points { width: 44px !important; height: 44px; margin: 0 !important; opacity: 1 !important; }
  .chat-tuile-btn { min-height: 48px; padding-right: 50px; }
  .chat-tuile:hover .chat-tuile-btn small { visibility: visible; }
  .chat-tuile-gestes { opacity: 1; right: 2px; background: none; }
  .chat-tuile-gestes button { width: 44px; height: 44px; background: none; }
  .chat-tuile-gestes button:hover { background: rgba(255,255,255,.5); }
  .chat-tuile-plus, .chat-tous, .chat-liste-titre .btn.lien { min-height: 44px; }
  .chat-liste-titre .btn.lien { padding: 0 8px; }
  .chat-ranger button, .chat-vers button { min-height: 44px; }
  .chat-ranger .chat-pastille-c { width: 44px; height: 44px; }
  /* Le fil. */
  .chat-msg.moi { max-width: 88%; }
  .chat-vide { margin: auto 0; }
  .chat-vide p { display: none; }
  .chat-amorces { margin-top: 12px; }
  .chat-amorces button { min-height: 44px; }
  .chat-actions { gap: 0; }
  .chat-act, .chat-actions.moi .chat-act { height: 44px; min-width: 44px; justify-content: center; }
  .chat-actions.moi { margin-bottom: -6px; }
  .chat .btn.petit:not(.lien), .chat-tri .btn.petit:not(.lien) { min-height: 44px; }
  /* La saisie : un seul encadré, le texte en haut, les outils et l'envoi dessous. */
  .chat-saisie { padding-top: 10px; }
  .chat-saisie-ligne { flex-wrap: wrap; align-items: center; gap: 0 2px; padding: 4px 6px 6px; border: 1px solid rgba(27,33,31,.18); border-radius: 22px; background: #fff; }
  .chat-saisie-ligne:focus-within { border-color: var(--bx2); box-shadow: 0 0 0 1px var(--bx2); }
  .chat-saisie textarea { flex-basis: 100%; order: -1; min-height: 44px; max-height: 132px; padding: 10px 10px 4px; border: 0; border-radius: 16px; background: none; }
  .chat-saisie textarea:focus { outline: 0; }
  .chat-saisie-ligne .chat-rond { width: 44px; height: 44px; border-color: transparent; background: none; }
  .chat-saisie-ligne .chat-rond.on { background: var(--bx2); }
  .chat-saisie .btn[type=submit], #chat-stop { margin-left: auto; min-height: 44px; padding: 10px 20px; }
  .chat-vocal-barre { border-radius: 22px; padding: 8px 8px 8px 14px; }
  .chat-puce.pleine { padding: 0 0 0 12px; }
  .chat-puce.pleine button, .chat-citation button, .chat-part-membres button { min-width: 44px; min-height: 44px; }
  /* Les fenêtres (partager, faire le tri). */
  .chat-tri { padding: 10px; }
  .chat-tri-boite { padding: 18px; max-height: 88dvh; }
  .chat-tri-ligne { min-height: 48px; }
}
/* Clavier ouvert au téléphone (12/10, Lisa : « un grand vide gris, je ne vois plus le champ »). L'iPhone ne réduit pas la page quand le clavier s'ouvre : il la fait
   glisser dessous. Le temps de la saisie, le fil est donc épinglé sur la partie visible de l'écran (hauteur et décalage posés par caler() dans chat.js, classe
   « chat-clavier » sur <html>) : la barre du haut, les derniers messages, et le champ collé au clavier. La barre du bas de l'app s'efface pendant ce temps. */
@media (max-width: 900px) {
  html.chat-clavier .rail { display: none; }
  html.chat-clavier .chat-fil { position: fixed; z-index: 900; left: 0; right: 0; top: var(--chat-haut, 0px); height: var(--chat-h, 100dvh); margin: 0; padding: max(8px, env(safe-area-inset-top)) 12px 8px; background: var(--carte); border-radius: 0; box-shadow: none; }
  html.chat-clavier .chat-fil .chat-regl { max-height: calc(var(--chat-h, 80vh) - 84px); }
}