:root {
  --bg: #fcfcfc;
  --bg2: #f5f5f4;
  --side: #fcfcfc; /* fond de la barre latérale */
  --conv-active: #efefef; /* conversation ouverte */
  --t1: #1c1c1c;
  --t2: #6b6b6b;
  --line: #e5e5e5;
  --accent: #1c1c1c;
  --accent-fg: #ffffff;
  --error: #c0392b;
  --surface: #ffffff;
  --surface-border: #e6e6e4;
  --surface-shadow: 0 2px 6px rgb(0 0 0 / .05), 0 10px 32px rgb(0 0 0 / .09);
  --thumb: #ffffff; /* curseur des choix segmentés */
  --raised: #ffffff; /* élément en relief sur la barre latérale */
  --table-head: color-mix(in srgb, var(--t1) 7%, var(--bg2));
  --table-stripe: color-mix(in srgb, var(--bg) 55%, var(--bg2));
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161616;
    --bg2: #212121;
    --side: #212121;
  --conv-active: color-mix(in srgb, var(--t1) 9%, transparent);
    --t1: #ececec;
    --t2: #9a9a9a;
    --line: #2e2e2e;
    --accent: #ececec;
    --accent-fg: #161616;
    --surface: #222222;
    --surface-border: rgb(255 255 255 / .1);
    --surface-shadow: 0 10px 32px rgb(0 0 0 / .45);
    --thumb: #3a3a3a;
    --raised: #2c2c2c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #161616;
  --bg2: #212121;
  --side: #212121;
  --conv-active: color-mix(in srgb, var(--t1) 9%, transparent);
  --t1: #ececec;
  --t2: #9a9a9a;
  --line: #2e2e2e;
  --accent: #ececec;
  --accent-fg: #161616;
  --surface: #222222;
  --surface-border: rgb(255 255 255 / .1);
  --surface-shadow: 0 10px 32px rgb(0 0 0 / .45);
  --thumb: #3a3a3a;
  --raised: #2c2c2c;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* iOS agrandit le texte des blocs larges en paysage : la taille reste celle qu'on a choisie. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } /* pas de flash gris au toucher sur iOS */
/* Tirer vers le bas ne recharge pas la page (Chrome Android) : une app ou une carte de validation
   ouverte serait perdue. Les zones qui défilent gardent leur rebond sans le transmettre à la page. */
html, body { overscroll-behavior-y: none; }
.messages, .side-scroll, .settings-nav, .settings-body, .apps-home { overscroll-behavior-y: contain; }
body {
  background: var(--bg);
  color: var(--t1);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
[hidden] { display: none !important; }
h1, h2 { margin: 0 0 4px; font-weight: 600; }
.muted { color: var(--t2); margin: 0; font-size: 14px; }
.error { color: var(--error); margin: 0; font-size: 14px; }

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  background: var(--accent);
  color: var(--accent-fg);
  transition: background .15s, color .15s;
}
:where(button:not(:disabled)):hover { background: color-mix(in srgb, var(--accent) 86%, var(--bg)); }
:where(button):focus-visible { outline: 2px solid color-mix(in srgb, var(--t1) 35%, transparent); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: default; }
button.secondary { background: var(--bg2); color: var(--t1); }
button.secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--t1) 9%, var(--bg2)); }
button.link { background: none; color: var(--t2); padding: 4px 0; text-align: left; }
button.link:hover { color: var(--t1); }

input, textarea, select {
  font: inherit;
  color: var(--t1);
  background: var(--bg2);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 11px;
  width: 100%;
}
input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
/* Champs sans bordure : le focus se voit à un léger halo, jamais à un trait. */
input:focus, textarea:focus, select:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--t1) 12%, transparent); }
.composer textarea:focus, .conv-rename:focus { box-shadow: none; }
label { display: grid; gap: 4px; font-size: 14px; color: var(--t2); }

.card { display: grid; gap: 14px; width: min(380px, 100%); }
.row { display: flex; gap: 8px; justify-content: flex-end; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
table.users { width: 100%; border-collapse: collapse; font-size: 14px; }
table.users th { text-align: left; font-weight: 500; color: var(--t2); padding: 0 8px 6px 0; }
table.users td { padding: 6px 8px 6px 0; vertical-align: middle; }
table.users td.email { color: var(--t2); overflow-wrap: anywhere; }
table.users select { padding: 5px 8px; width: auto; }
table.users td:last-child { text-align: right; }
table.users button.link { padding: 0; }

/* Identité de l'entreprise */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 2px 2px 4px; }
.brand-logo { max-height: 28px; max-width: 140px; width: auto; height: auto; object-fit: contain; }
.brand-name { max-width: 100%; }
/* Le nom Clik'Pilote dans la police du site clikpilote.fr (Bricolage Grotesque, OFL, fonts/). */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url("fonts/bricolage-grotesque-800.woff2") format("woff2"); }
.brand-name { font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; font-weight: 800; letter-spacing: -.02em; font-size: 16px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-auth { gap: 12px; padding: 0; }
.brand-auth .brand-logo { max-height: 40px; max-width: 160px; }
.brand-auth .brand-name { font-size: 24px; white-space: normal; }
.hint { margin-top: 0 !important; font-size: 13px; }
/* Cartes des réglages (Entreprise…) : même fond que les cartes de connecteurs. */
.settings-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--t1) 3.5%, transparent);
}
.settings-row-title { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--t1); }
.settings-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.settings-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.settings-field { display: grid; gap: 12px; }
/* Formulaire à un seul champ : le bouton sur la ligne du champ, à sa hauteur. */
.field-inline { display: flex; gap: 10px; align-items: center; }
.field-inline input { flex: 1; min-width: 0; }
.settings-body .field-inline button[type="submit"] { height: 38px; }
.settings-card .form { gap: 14px; }
.settings-card textarea { background: var(--raised); }
/* Tous les boutons d'envoi des Paramètres en pastille, comme ceux des cartes : jamais de gros
   rectangle plein. */
.settings-body button[type="submit"]:not(.link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}
/* Un texte d'aide juste avant une zone de saisie : un peu d'air entre les deux. */
.field > .hint + textarea, .field > .hint + input { margin-top: 6px; }
.settings-card input { background: var(--raised); height: 38px; }
/* Bouton en pastille (même gabarit que ceux des cartes de connecteurs), version foncée pour l'action principale. */
.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--t1) 7%, transparent);
  color: var(--t1);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}
/* Bouton qui commence par une icône : le dessin a sa propre marge (3 px), retirée à gauche pour que
   les deux bords paraissent égaux. */
.pill-button:has(> svg:first-child) { padding-left: 13px; }
.pill-button:hover:not(:disabled) { background: color-mix(in srgb, var(--t1) 12%, transparent); }
.pill-button.primary { background: var(--accent); color: var(--accent-fg); }
.pill-button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 85%, var(--bg)); }
.logo-edit { display: flex; gap: 14px; align-items: center; }
.settings-body .logo-edit .hint { margin: 0; }
.settings-card > .switch { padding-top: 14px; border-top: 1px solid var(--line); width: 100%; }
.logo-preview {
  width: 96px;
  height: 56px;
  padding: 6px;
  border-radius: 10px;
  background: var(--raised);
  border: 1px solid color-mix(in srgb, var(--t1) 10%, transparent);
  font-size: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

.switch { display: flex; align-items: center; gap: 10px; color: var(--t1); cursor: pointer; width: fit-content; }
/* Le rond centré par flex, pas par top : il reste au milieu quel que soit l'arrondi des pixels. */
.switch-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  border: 0;
  cursor: pointer;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--t1) 22%, transparent); /* éteint : visible sur tous les fonds */
  flex-shrink: 0;
  transition: background .15s;
}
.switch-track::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  transition: transform .15s;
}
.switch-track[aria-checked="true"] { background: var(--accent); }
.switch-track[aria-checked="true"]::after { transform: translateX(16px); }
.switch-track.instant, .switch-track.instant::after { transition: none !important; }
.switch-track:focus-visible { outline: 2px solid var(--t2); outline-offset: 2px; }
.switch-track:disabled { opacity: .5; cursor: default; }


.connector-list { display: grid; gap: 10px; }
/* Carte : fond gris très léger, sans bordure. */
.connector {
  background: color-mix(in srgb, var(--t1) 3.5%, transparent);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 14px;
}
.connector-form:not([hidden]) { animation: card-open .2s ease; }
.connector-form.static { animation: none; }
@keyframes card-open { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .connector-form:not([hidden]) { animation: none; } }
/* Icône du connecteur, en pastille ; le tableur d'Excel occupe toute la pastille. */
.connector-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--raised);
  border: 1px solid color-mix(in srgb, var(--t1) 8%, transparent);
  color: var(--t2);
}
.connector-icon svg { width: 20px; height: 20px; }
.connector-icon.brand { background: none; border: 0; }
.connector-icon.brand svg { width: 32px; height: 32px; }
/* En-tête de carte (cardHead) : une grille, identique sur ordinateur et téléphone.
     [icône]  Titre · étiquettes          (interrupteur dans le coin de la carte)
     Description, sur toute la largeur, sous le logo
     ● État                                [boutons]
   Rien ne se chevauche quelle que soit la largeur. */
.card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title side" "desc desc" "foot foot";
  column-gap: 12px;
  align-items: center;
}
.card-head.has-icon {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon title side" "desc desc desc" "foot foot foot";
}
.card-icon { grid-area: icon; align-self: start; }
.card-title { grid-area: title; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; min-height: 36px; }
.card-head:not(.has-icon) .card-title { min-height: 0; }
.card-title strong { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.card-side { grid-area: side; display: flex; align-items: center; align-self: start; min-height: 36px; }
.card-head:not(.has-icon) .card-side { min-height: 0; }
/* Interrupteur : dans le coin supérieur droit de la carte, hors de la grille ; le titre lui laisse la place. */
.card-head:has(.card-side.corner) { position: relative; }
.card-side.corner { position: absolute; top: 0; right: 0; min-height: 0; }
.card-head:has(.card-side.corner) .card-title { padding-right: 52px; }
.card-head.has-icon .card-desc { margin-top: 10px; }
.card-desc { grid-area: desc; margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--t2); overflow-wrap: anywhere; }
.card-foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.card-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.card-foot > .tag { padding-left: 4px; } /* le point ne colle pas au bord du texte au-dessus */
/* Connecteur coupé par l'utilisateur pour lui-même : estompé, l'interrupteur reste net. */
.connector.user-off .card-head > :not(.card-side) { opacity: .5; transition: opacity .15s; }
/* Étiquette d'état (tag) : du texte précédé d'un point, jamais un bouton. Vert : actif ou pseudonymisé. */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; line-height: 1.2; color: var(--t2); white-space: nowrap; }
.tag::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--t1) 30%, transparent); }
.tag.on::before, .tag.anon::before { background: #1f9d55; }
.tag.on { color: var(--t1); }
.tag.anon { color: #1f7a45; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag.anon { color: #5fd08e; } }
:root[data-theme="dark"] .tag.anon { color: #5fd08e; }
/* Valeurs pseudonymisées dans le fil (markMasked) : vertes quand l'IA choisie pseudonymise. */
mark.masked { background: none; color: inherit; }
#messages.anon-on mark.masked {
  color: #1f7a45; font-weight: 600; padding: 0 3px; margin: 0 -1px; border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, #1f9d55 16%, transparent), color-mix(in srgb, #1f9d55 9%, transparent)) no-repeat left / 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Arrivée : le fond vert glisse sous le mot, qui s'éclaire un instant. */
#messages.anon-on mark.masked.fresh { animation: masked-in .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes masked-in {
  0% { background-size: 0% 100%; text-shadow: none; }
  55% { background-size: 100% 100%; text-shadow: 0 0 10px color-mix(in srgb, #1f9d55 55%, transparent); }
  100% { background-size: 100% 100%; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { #messages.anon-on mark.masked.fresh { animation: none; } }
/* « Réponse générée par » sous la réponse : logo et nom du fournisseur (addSignature). */
.msg-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 760px; width: 100%; margin: -6px auto 0; font-size: 12px; color: var(--t2); }
/* Masqués dans les Préférences (data-hide-by, data-hide-masked, theme.js). */
[data-hide-by="on"] .msg-by { display: none; }
.msg-by.fresh { animation: msg-by-in .5s cubic-bezier(.2, .7, .2, 1) .15s both; }
@keyframes msg-by-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .msg-by.fresh { animation: none; } }
.msg-by-logo { display: inline-flex; width: 14px; height: 14px; }
.msg-by-logo > * { width: 100%; height: 100%; }
.msg-by-name { font-weight: 600; color: var(--t1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #messages.anon-on mark.masked { color: #5fd08e; } }
:root[data-theme="dark"] #messages.anon-on mark.masked { color: #5fd08e; }
/* Surlignage masqué : :root le rend aussi fort que les couleurs du thème sombre, juste au-dessus. */
:root[data-hide-masked="on"] #messages.anon-on mark.masked { color: inherit; font-weight: inherit; padding: 0; margin: 0; background: none; animation: none; }
.card-title .tag { font-size: 12px; }
.connector-form input, .connector-form textarea { background: var(--bg); }
/* Bouton secondaire d'une carte (Gérer, Modifier…) : pastille arrondie, gris doux, sans contour. */
.connector button.secondary {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--t1) 7%, transparent);
  font-size: 12.5px;
  font-weight: 500;
  line-height: normal;
}
.connector button.secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--t1) 12%, transparent); }
.row .link { margin-right: auto; }
.row { align-items: center; }
.link.danger { color: var(--error); font-size: 13.5px; }
.link.danger:hover { color: var(--error); text-decoration: underline; }
.empty-note { text-align: center; padding: 18px 0; }
/* Membres d'un groupe : liste en carte blanche, une ligne par utilisateur. */
.member-list {
  display: grid;
  max-height: 280px;
  overflow-y: auto;
  border-radius: 12px;
  background: var(--raised);
  border: 1px solid color-mix(in srgb, var(--t1) 8%, transparent);
}
.member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--t1);
  transition: background .12s;
}
.member + .member { border-top: 1px solid color-mix(in srgb, var(--t1) 6%, transparent); }
.member:hover { background: color-mix(in srgb, var(--t1) 4%, transparent); }
.member-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--t1) 8%, transparent);
  font-size: 11px;
  font-weight: 600;
}
.member-text { display: grid; min-width: 0; font-size: 14px; line-height: 1.3; }
.member-text .muted { margin: 0 !important; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connector-form .row .pill-button { height: 34px; }

.access { display: grid; gap: 8px; }
.access > .segmented { justify-self: start; font-size: 13.5px; }
.access > .segmented button { padding: 5px 14px; }
.check { display: flex; align-items: center; gap: 10px; color: var(--t1); cursor: pointer; width: fit-content; }
.picker { display: grid; gap: 6px; margin-left: 26px; padding: 10px 12px; border-radius: 8px; background: var(--bg); }
.picker-title { font-size: 12px; color: var(--t2); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.picker-title:first-child { margin-top: 0; }
.connector-form .check span, .picker .check span { font-size: 14px; }
.check.covered { color: var(--t2); cursor: default; }
.check .via { font-size: 12px; color: var(--t2); }

/* Connexion */
.auth { min-height: 100%; display: grid; place-items: center; padding: 16px; }

/* Application */
.app { --side-w: 260px; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); height: 100%; }
.sidebar {
  position: relative;
  background: var(--side);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  min-height: 0;
}
/* Liste des conversations, groupée par date. */
/* Navigation et conversations défilent ensemble, comme sur ChatGPT. */
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -14px 0 -6px; padding: 0 8px 10px 6px; } /* barre de défilement collée au bord droit ; un peu d'air sous la dernière conversation, qui défile avec elle */
#conv-list { list-style: none; margin: 0; padding: 0; }
/* Titres de groupe (Épinglées, Aujourd'hui…) : même taille que les conversations, en gris,
   avec un vrai espace au-dessus pour séparer nettement les groupes. */
.conv-group {
  padding: 20px 10px 6px;
  font: normal 500 14px/20px system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--t2);
}
.conv-group:first-child { padding-top: 6px; }
.conv-icon { flex: none; width: 16px; height: 16px; color: var(--t1); }
.conv {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin-bottom: 2px; /* deux lignes en surbrillance (ouverte, survolée) ne se touchent pas */
  padding: 0 10px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--t1);
  font: normal 400 14px/20px system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: background .12s;
}
.conv span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le titre remonte d'un pixel : centré à la règle, un texte en minuscules paraît trop bas. */
.conv > span:not(.conv-dot) { position: relative; top: -1px; }
/* Point d'état d'une conversation : vert qui pulse pendant un tour, orange s'il attend une
   validation, fixe quand la réponse est arrivée sans avoir été lue. */
.conv-dot {
  --dot: #1f9d55;
  margin-right: 4px; /* un peu d'air avant le titre */
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot);
}
.conv-dot.waiting { --dot: #d97706; }
.conv-dot.unseen { --dot: var(--wait, #2f6fde); } /* réponse finie, pas encore vue : bleu, fixe */
/* Pendant un tour ou une validation : le point respire (opacité), sans halo autour. */
.conv-dot.running, .conv-dot.waiting { animation: conv-pulse 1.4s ease-in-out infinite alternate; }
@keyframes conv-pulse { to { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .conv-dot { animation: none !important; }
}
/* Au survol, l'épingle et « … » se superposent à la fin du titre (fondu), sans le décaler. */
.conv:hover span, .conv:focus-within span, .conv.menu-open span { padding-right: 52px; }
.conv:hover, .conv.menu-open { background: color-mix(in srgb, var(--t1) 6%, transparent); }
.conv.active { background: var(--conv-active); }
.conv:focus-visible { outline: 2px solid var(--t2); outline-offset: -2px; }
.conv-actions {
  position: absolute;
  top: 0;
  right: 4px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity .12s;
}
.conv:hover .conv-actions, .conv:focus-within .conv-actions, .conv.menu-open .conv-actions { opacity: 1; }
.conv-more, .conv-pin {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  background: none;
  color: var(--t2);
  transition: background .12s, color .12s;
}
.conv-more svg, .conv-pin svg { width: 16px; height: 16px; }
.conv-more:hover, .conv-pin:hover, .conv.menu-open .conv-more { color: var(--t1); background: color-mix(in srgb, var(--t1) 8%, transparent); }
/* Renommage : la ligne elle-même devient le champ (liseré discret), le texte reste exactement en place. */
.conv.editing {
  background: var(--raised);
  color: var(--t1);
  cursor: text;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--t1) 18%, transparent), 0 2px 8px rgb(0 0 0 / .12);
}
.conv-rename,
.conv-rename:focus {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 500;
  outline: none;
}
.conv.editing .conv-actions { display: none; }
.conv-rename::selection { background: color-mix(in srgb, var(--t1) 22%, transparent); }

/* Menu d'une conversation : carte blanche arrondie, icônes et libellés en noir, Supprimer en rouge. */
.conv-menu {
  position: fixed;
  z-index: 50;
  min-width: 168px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  box-shadow: 0 8px 28px rgb(0 0 0 / .12), 0 1px 3px rgb(0 0 0 / .06);
  display: grid;
  gap: 1px;
  animation: menu-in .12s ease;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: none;
  color: var(--t1);
  font-size: 14px;
  text-align: left;
}
.menu-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--t1); }
.menu-item:hover, .menu-item:focus-visible { background: color-mix(in srgb, var(--t1) 6%, transparent); outline: none; }
.menu-item.danger, .menu-item.danger svg { color: var(--error); }
.menu-item.danger:hover, .menu-item.danger.armed { background: color-mix(in srgb, var(--error) 10%, transparent); }
.menu-sep { height: 1px; margin: 5px 8px; background: var(--line); }
.conv-empty { margin: 8px 10px; font-size: 13px; color: var(--t2); }
/* Navigation en tête de barre : des lignes comme les conversations (icône, libellé, survol
   discret), sans cadre ni trait, un peu d'air avant la liste. */
.side-nav { display: grid; gap: 2px; margin-bottom: 8px; }
.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  background: none;
  color: var(--t1);
  font: normal 500 14px/20px system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
}
.side-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.side-link span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.side-link:not(:disabled)):hover { background: color-mix(in srgb, var(--t1) 6%, transparent); }
.side-link:active { background: color-mix(in srgb, var(--t1) 9%, transparent); }


/* Compte, en bas de la barre latérale : ouvre les paramètres. Le trait de séparation reste fixe,
   seule la carte du compte s'éclaire au survol. */
.sidebar-foot { border-top: 1px solid var(--line); margin: -12px -14px 0; padding: 10px 14px 0; } /* trait d'un bord à l'autre de la barre ; la liste défile jusqu'à lui (sans l'écart de 12 px de la barre) */
.account {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  background: none;
  color: var(--t1);
  text-align: left;
  transition: background .15s;
}
.account:hover, .account:focus-visible { background: color-mix(in srgb, var(--t1) 6%, transparent); }
.avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}
.account-text { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.account-name, .account-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-name { font-size: 14px; font-weight: 600; }
.account-role { font-size: 12px; color: var(--t2); }

.chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; } /* un bloc de code large défile, n'élargit pas la page */
/* Occupe la place du fil quand il est vide : centré entre le haut et la zone de saisie. */
.empty {
  flex: 1;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 8px;
  padding: 16px 16px var(--composer-h, 110px); /* centré dans l'espace au-dessus de la zone de saisie */
  pointer-events: none;
}
.empty-title { font-size: 28px; line-height: 1.3; font-weight: 600; margin: 0; }
.empty-text { margin: 0; color: var(--t2); font-size: 16px; }

/* --- Le personnage de Clik'Pilote (pilot.js) --- */
/* Un assistant épuré : coque blanche, écran noir, deux yeux lumineux. C'est toute sa tête qui suit le
   regard (--lx, --ly, de -1 à 1, posés par pilot.js) : elle s'incline et se décale, l'écran glisse
   un peu plus, les yeux encore un peu plus ; ce décalage donne l'impression qu'il tourne la tête.
   Tout ne bouge que par transform et opacity. */
.pilot { --lx: 0; --ly: 0; --glow: #bff3ff; position: relative; display: inline-block; flex: none; width: 40px; height: 40px; line-height: 0; }
.pilot.sm { width: 38px; height: 38px; }
.pilot.xl { width: 112px; height: 112px; }
.pilot svg { width: 100%; height: 100%; overflow: visible; }
.pilot :is(.pilot-float, .pilot-move, .pilot-pose, .pilot-head) { transform-box: view-box; transform-origin: 60px 96px; }
.pilot-s1 { stop-color: #fbfbfc; }
.pilot-s2 { stop-color: #d9d9de; }
.pilot-g1 { stop-color: #1c2232; }
.pilot-g2 { stop-color: #07090f; }
.pilot-ear { stroke: rgb(0 0 0 / .1); stroke-width: 1; } /* collées à la coque, de la même matière ; elles suivent la tête */
.pilot-shell { stroke: rgb(0 0 0 / .08); stroke-width: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.pilot-shell, .pilot-ear) { stroke: rgb(255 255 255 / .15); } }
:root[data-theme="dark"] :is(.pilot-shell, .pilot-ear) { stroke: rgb(255 255 255 / .15); }
.pilot-gloss { fill: none; stroke: #fff; stroke-opacity: .14; stroke-width: 3; stroke-linecap: round; transform: translateX(calc(var(--lx) * -3px)); }
/* La tête et ses parties, chacune d'une part différente du regard. */
.pilot-head { transform: translate(calc(var(--lx) * 2.5px), calc(var(--ly) * 2px)) rotate(calc(var(--lx) * 5deg)); }
.pilot-visor { transform: translate(calc(var(--lx) * 3.5px), calc(var(--ly) * 3px)); }
.pilot-face { transform: translate(calc(var(--lx) * 4.5px), calc(var(--ly) * 3px)); }
/* Il flotte à peine. */
.pilot-float { animation: pilot-float 5s ease-in-out infinite; }
@keyframes pilot-float { 50% { transform: translateY(-2.5px); } }
/* La lumière de l'écran : les yeux et le sourire, avec leur halo. */
.pilot-light { filter: drop-shadow(0 0 3px rgb(120 220 255 / .85)); transition: opacity .5s ease; }
.pilot-eye { fill: var(--glow); transform-box: fill-box; transform-origin: 50% 50%; transition: transform .12s ease; }
.pilot-happy { fill: none; stroke: var(--glow); stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .18s; }
.pilot-eyes { transition: opacity .18s; }
/* Son attitude : la tête penchée, posée par son humeur (sur un autre groupe que le regard). */
.pilot-pose { transition: transform .5s cubic-bezier(.3, .7, .3, 1); }

/* Content (survolé, cliqué, réponse finie) : les yeux sourient, la tête se penche un peu. */
.pilot[data-mood="happy"] .pilot-eyes { opacity: 0; }
.pilot[data-mood="happy"] .pilot-happy { opacity: 1; }
.pilot[data-mood="happy"] .pilot-pose { transform: rotate(-5deg); }
/* Il cherche (l'IA réfléchit, appelle ses outils) : les yeux un peu plissés, la tête penchée, la
   lumière qui pulse doucement. */
.pilot[data-mood="think"] .pilot-eye { transform: scaleY(.8); }
.pilot[data-mood="think"] .pilot-pose { transform: rotate(4deg); }
.pilot[data-mood="think"] .pilot-light { animation: pilot-pulse 1.6s ease-in-out infinite; }
@keyframes pilot-pulse { 50% { opacity: .6; } }
/* Il lit la réponse qui s'écrit : la tête légèrement baissée. */
.pilot[data-mood="write"] .pilot-pose { transform: translateY(1px) rotate(-2deg); }
/* Une action attend votre validation : la tête penchée, comme une question. */
.pilot[data-mood="ask"] .pilot-pose { transform: rotate(9deg); }
/* En veille : la tête basse, les yeux mi-clos, la lumière baissée qui respire lentement. */
.pilot[data-mood="sleep"] .pilot-pose { transform: translateY(3px) rotate(6deg); }
.pilot[data-mood="sleep"] .pilot-eye { transform: scaleY(.2); }
.pilot[data-mood="sleep"] .pilot-light { animation: pilot-doze 4.5s ease-in-out infinite; }
.pilot[data-mood="sleep"] .pilot-float { animation-duration: 7s; }
@keyframes pilot-doze { 0%, 100% { opacity: .3; } 50% { opacity: .55; } }
/* Clignement : après les humeurs, il les remplace le temps d'un battement. */
.pilot.blink .pilot-eye { transform: scaleY(.08); transition-duration: .06s; }

/* Ses gestes (pilot.js, play). Arrivée à l'accueil : il monte en douceur, puis ses yeux s'allument,
   d'abord un trait qui s'ouvre. */
.pilot.enter .pilot-move { animation: pilot-enter .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pilot-enter { from { opacity: 0; transform: translateY(10px) scale(.95); } }
.pilot.enter .pilot-eye { animation: pilot-eyes-on 1s ease-out both; }
@keyframes pilot-eyes-on { 0%, 45% { opacity: 0; transform: scaleY(.06); } 60% { opacity: 1; transform: scaleY(.06); } 80% { transform: scaleY(1.08); } 100% { transform: none; } }
/* Cliqué, ou réponse finie : il se soulève un instant. */
.pilot.lift .pilot-move { animation: pilot-lift .7s cubic-bezier(.3, .7, .3, 1); }
@keyframes pilot-lift { 40% { transform: translateY(-7px) rotate(-2deg); } 75% { transform: translateY(1px); } }
/* Il hoche la tête (vous écrivez, il lit). */
.pilot.nod .pilot-move { animation: pilot-nod .36s ease-in-out; }
@keyframes pilot-nod { 45% { transform: translateY(2px) rotate(1.5deg); } }
/* Réveillé : la tête se relève d'un coup. */
.pilot.jolt .pilot-move { animation: pilot-jolt .45s cubic-bezier(.3, .7, .3, 1); }
@keyframes pilot-jolt { 30% { transform: translateY(-4px); } 60% { transform: translateY(1px); } }

/* Animations réduites : il reste immobile, les yeux ouverts. */
@media (prefers-reduced-motion: reduce) {
  .pilot, .pilot * { animation: none !important; transition: none !important; }
}

/* À l'accueil, au centre, à la place du logo de l'entreprise : on peut le survoler et cliquer dessus
   (l'accueil laisse passer les clics, .empty). */
.empty-pilot { justify-self: center; margin-bottom: -10px; pointer-events: auto; -webkit-tap-highlight-color: transparent; } /* le bas du dessin est vide (plus d'ombre) : le texte se rapproche */
/* Dans une conversation : sous la dernière réponse, aligné sur le fil ; à côté de lui, ce qu'il est
   en train de faire (pilot.js), avec le même reflet qui balaie que les étapes du fil. */
.thread-pilot { display: flex; align-items: center; gap: 8px; max-width: 760px; width: 100%; min-height: 38px; margin: -4px auto 0; }
.thread-pilot .pilot { margin-left: -4px; }
/* top : la tête du robot est un peu au-dessus du centre de son dessin ; la phrase se cale sur ses yeux. */
.thread-pilot-say { position: relative; top: -2px; overflow: hidden; min-width: 0; color: var(--t2); font-size: 14px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.thread-pilot-say[hidden] { display: none; }
/* Le logo de l'étape en cours, avant sa phrase (pilotIcon). */
.thread-pilot-say .tool-icon { display: inline-flex; vertical-align: -2px; margin-right: 6px; }
/* Petit robot masqué (réglage par appareil, theme.js) : sa phrase reste. */
:root:not([data-pilot="on"]) .thread-pilot .pilot, :root:not([data-pilot="on"]) .empty-pilot { display: none; }
:root[data-pilot="on"] .empty-logo { display: none; }
.thread-pilot.working .thread-pilot-say::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--bg) 50%, transparent); opacity: .7; transform: translateX(-100%); animation: sweep 1.6s ease-in-out infinite; }
.thread-pilot-say.fresh { animation: say-step .35s ease-out; }
@keyframes say-step { from { opacity: 0; transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .thread-pilot-say.fresh, .thread-pilot.working .thread-pilot-say::after { animation: none; } }
/* Les étapes en cours (attente, réflexion, outil) ne s'affichent pas dans le fil : il les dit à côté
   de lui. Une fois faites, elles y reviennent pour l'historique (la réflexion, dépliable par un
   administrateur : « A réfléchi pendant… »). */
.messages .activity.live { display: none; }
.notice { margin: 14px auto 0; padding: 0 16px; color: var(--t2); font-size: 14px; }
/* Bandeau qui mène à un réglage (updateNotice) : un bouton qui garde l'allure du texte. */
.notice > button { padding: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: inherit; }
@media (hover: hover) { .notice > button:hover { color: var(--t1); text-decoration: underline; text-underline-offset: 2px; } }
.messages {
  flex: 1;
  overflow-y: auto;
  /* La zone de saisie flotte en bas, par-dessus le fil : le bas du fil lui laisse sa place
     (--composer-h, mesurée par app.js). */
  padding: 24px 16px calc(var(--composer-h, 110px) + 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.msg { font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; max-width: 760px; width: 100%; margin: 0 auto; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { background: var(--bg2); border-radius: 12px; padding: 10px 14px; width: auto; margin-right: max(0px, calc((100% - 760px) / 2)); align-self: flex-end; max-width: min(760px, 85%); }
.msg.error { color: var(--error); }
.msg pre { background: var(--bg2); border-radius: 8px; padding: 10px; overflow-x: auto; white-space: pre; }
.msg code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

/* Réflexion et outils : blocs sans cadre, chevron, voile qui balaye le libellé pendant l'activité. */
.activity { max-width: 760px; width: 100%; margin: 0 auto; color: var(--t2); font-size: 14px; }
/* Actions à la suite : une ligne (« 7 actions »), qui déplie leurs lignes, chacune dépliant son détail.
   Une seule action faite : sa ligne seule. */
.action-group { max-width: 760px; width: 100%; margin: 0 auto; color: var(--t2); font-size: 14px; }
.action-group-head { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.action-group-head > * { flex-shrink: 0; }
.action-group-head > .action-group-label { flex-shrink: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.action-group-head::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(0) rotate(-45deg); transition: transform .15s; flex-shrink: 0; }
.action-group.open > .action-group-head::before { transform: translateY(-2px) rotate(45deg); }
@media (hover: hover) { .action-group-head:hover { color: var(--t1); } }
.action-group-body { display: none; flex-direction: column; gap: 10px; margin: 10px 0 0 14px; }
.action-group.open > .action-group-body { display: flex; }
.action-group.single > .action-group-head { display: none; }
.action-group.single > .action-group-body { display: flex; margin: 0; }
.action-group .activity { margin: 0; max-width: 100%; }
/* Le navigateur en direct : un cadre au-dessus du fil, agrandi d'un clic. */
.browser-live { position: absolute; top: 12px; left: 12px; z-index: 5; width: min(340px, calc(100% - 24px)); border-radius: 12px; overflow: hidden; background: var(--raised); box-shadow: 0 8px 28px rgba(0, 0, 0, .28); transition: width .18s; }
.browser-live[hidden] { display: none; }
.browser-live.large { width: min(960px, calc(100% - 24px)); }
.browser-live-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 12px; }
.browser-live-head { cursor: grab; touch-action: none; user-select: none; }
.browser-live.dragging { transition: none; }
.browser-live.dragging .browser-live-head { cursor: grabbing; }
.browser-live-title { flex: 1; padding: 0; border: 0; border-radius: 0; background: none; color: var(--t2); font: inherit; font-size: 13px; text-align: left; cursor: inherit; touch-action: none; }
.browser-live-close { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--t2); font-size: 18px; line-height: 1; cursor: pointer; }
.browser-live-page { display: block; width: 100%; aspect-ratio: 1280 / 800; object-fit: contain; background: #fff; cursor: zoom-in; }
.browser-live.large .browser-live-page { cursor: zoom-out; }
/* Résultat d'outil que l'IA montre (show) : la carte seule, dans le fil. */
.shown-result { max-width: 760px; width: 100%; margin: 0 auto; }
/* Un long texte montré ne repousse pas la réponse de plusieurs écrans (ticket 118) : il défile dans sa carte. */
.shown-result .tool-card-text { max-height: 50vh; overflow-y: auto; }
/* Un fichier montré par l'IA (shownFile) : sa carte seule, comme dans une réponse. */
.shown-file { margin: 4px 0; }
/* Une image montrée par l'IA ou liée dans sa réponse (imageFigure, images.js) : l'image, puis sa carte pour la télécharger. */
.shown-image { margin: 4px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.shown-image-link { display: block; max-width: 100%; border-radius: 14px; }
.shown-image .picture { border-radius: 14px; border: 1px solid color-mix(in srgb, var(--t1) 8%, transparent); }
.shown-image .picture img { max-width: 100%; max-height: 420px; }
/* En attendant l'image, un cadre de la taille d'une photo (pas de saut quand elle arrive, ou si peu). */
.shown-image .picture.loading, .shown-image .picture.broken { width: min(360px, 100%); aspect-ratio: 4 / 3; }
@media (hover: hover) { .shown-image-link:hover .picture img { filter: brightness(1.05); } }
.shown-image-link { cursor: zoom-in; }
/* Photos proposées par l'IA (photosCard) : des vignettes, leur nom dessous ; un clic l'ouvre en grand. */
.photos-card { padding: 12px; }
.photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.photo-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--t2); text-decoration: none; cursor: zoom-in; }
.photo-tile .picture { aspect-ratio: 4 / 3; border-radius: 10px; }
.photo-tile .picture img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease, transform .3s ease, filter .2s ease; }
.photo-tile-name { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) { .photo-tile:hover { color: var(--t1); } .photo-tile:hover .picture img { transform: scale(1.03); filter: brightness(1.06); } }
.photos-card .tool-card-note { margin: 10px 0 0; }
/* Aperçu d'un PDF montré par l'IA (pdfPreview, images.js) : ses premières pages, puis sa carte. */
.pdf-preview { padding: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pdf-pages { display: flex; gap: 10px; max-width: 100%; overflow-x: auto; padding: 2px 2px 6px; }
.pdf-page { flex: none; display: block; width: 132px; aspect-ratio: 210 / 297; border-radius: 6px; overflow: hidden; background: #fff; cursor: zoom-in;
  box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 4px 14px rgb(0 0 0 / .14); transition: transform .2s ease, box-shadow .2s ease; }
.pdf-page .picture { width: 100%; height: 100%; }
.pdf-page .picture:not(.loading):not(.broken) { background: #fff; }
.pdf-page .picture img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (hover: hover) { .pdf-page:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(0 0 0 / .14), 0 8px 22px rgb(0 0 0 / .2); } }
.pdf-more { flex: none; width: 96px; aspect-ratio: 210 / 297; border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: 0 8px;
  background: color-mix(in srgb, var(--t1) 6%, transparent); color: var(--t2); font-size: 13px; text-align: center; }
@media (hover: hover) { .pdf-more:hover { color: var(--t1); background: color-mix(in srgb, var(--t1) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pdf-page { transition: none; } }
/* Une image qui charge (pictureBox, images.js) : le reflet des squelettes, puis un fondu. */
.picture { position: relative; display: block; overflow: hidden; background: var(--skel); }
.picture img { display: block; transition: opacity .3s ease; }
.picture.loading { background: linear-gradient(90deg, var(--skel) 30%, var(--skel-hi) 50%, var(--skel) 70%) 0 0 / 300% 100%; animation: skel-shine 1.5s ease-in-out infinite; }
.picture.loading img { opacity: 0; }
.picture:not(.loading):not(.broken) { background: none; }
.picture.broken img { display: none; }
.picture-broken { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; color: var(--t2); font-size: 12px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .picture.loading { animation: none; } .picture img, .photo-tile .picture img { transition: none; } }

.activity summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
}
.activity summary::-webkit-details-marker { display: none; }
.activity summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
  transition: transform .15s;
  flex-shrink: 0;
}
.activity[open] summary::before { transform: translateY(-4px) rotate(45deg); }
.activity summary:hover { color: var(--t1); }
.activity-label { flex-shrink: 0; position: relative; overflow: hidden; }
.tool-icon { flex-shrink: 0; display: inline-flex; align-self: center; margin-right: -2px; }
.tool-icon svg { width: 15px; height: 15px; display: block; }
.activity-detail {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.activity.live .activity-label::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--bg) 50%, transparent);
  opacity: .7;
  transform: translateX(-100%);
  animation: sweep 1.6s ease-in-out infinite;
}
@keyframes sweep { to { transform: translateX(100%); } }
.activity.waiting summary, .activity.locked summary { cursor: default; }
.activity.waiting summary::before, .activity.locked summary::before { display: none; }
.activity.locked summary:hover { color: inherit; }
.activity-body { margin: 8px 0 4px 14px; display: grid; gap: 8px; }
.thinking .activity-body { display: block; white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; max-height: 360px; overflow-y: auto; }
.activity pre { background: var(--bg2); border-radius: 8px; padding: 10px; overflow-x: auto; max-height: 320px; font-size: 13px; margin: 0; }
.tool-input { color: var(--t2); }
/* Résultat d'un outil : carte arrondie et ombrée qui apparaît en douceur. */
.tool-card {
  background: var(--raised);
  border: 1px solid color-mix(in srgb, var(--t1) 8%, transparent);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 6px 20px rgb(0 0 0 / .07);
  color: var(--t1);
  overflow: hidden;
  animation: tool-pop .22s ease-out;
}
@keyframes tool-pop { from { opacity: 0; transform: translateY(4px) scale(.99); } }
@media (prefers-reduced-motion: reduce) { .tool-card { animation: none; } }
.tool-card pre { background: none; border-radius: 0; padding: 12px 14px; margin: 0; max-height: 320px; white-space: pre-wrap; word-break: break-word; font-size: 13px; }
.tool-card > p { margin: 0; padding: 12px 14px; font-size: 14px; }
.tool-card-text { white-space: pre-wrap; line-height: 1.55; }
/* « Paramètres » de l'appel (administrateur) : simple lien replié, sans la flèche des lignes d'outil. */
.activity .tool-args > summary { all: unset; cursor: pointer; font-size: 12.5px; color: var(--t2); }
.activity .tool-args > summary::before { content: none; }
.activity .tool-args > summary:hover { color: var(--t1); text-decoration: underline; }
.tool-args pre { margin-top: 6px !important; }
.tool-card.error { background: color-mix(in srgb, var(--error) 7%, var(--raised)); border-color: color-mix(in srgb, var(--error) 25%, transparent); }
.tool-card.error > p { color: var(--error); }
.tool-card-empty { color: var(--t2); }
.tool-card-head { display: grid; gap: 6px; padding: 12px 14px 10px; border-bottom: 1px solid color-mix(in srgb, var(--t1) 7%, transparent); }
.tool-card-title { font-size: 13.5px; font-weight: 600; }
.tool-list { list-style: none; margin: 0; padding: 4px 0; max-height: 360px; overflow-y: auto; }
.tool-row { display: flex; gap: 12px; align-items: baseline; padding: 8px 14px; }
.tool-row + .tool-row { border-top: 1px solid color-mix(in srgb, var(--t1) 5%, transparent); }
.tool-row:hover { background: color-mix(in srgb, var(--t1) 3%, transparent); }
.tool-row-meta { flex: none; width: 112px; font-size: 12.5px; color: var(--t2); font-variant-numeric: tabular-nums; }
.tool-row-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.tool-row-main { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.tool-row-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tool-tag { font-size: 12px; padding: 1px 8px; border-radius: 999px; color: var(--t2); background: color-mix(in srgb, var(--t1) 6%, transparent); }
.tool-tag.bad { color: var(--error); background: color-mix(in srgb, var(--error) 10%, transparent); }
.tool-tag.good { color: #1a7f45; background: color-mix(in srgb, #1f9d55 12%, transparent); }
.tool-card-note { padding: 10px 14px !important; font-size: 13px !important; color: var(--t2); border-top: 1px solid color-mix(in srgb, var(--t1) 7%, transparent); }
/* Enregistrement 3CX */
.rec-when { font-size: 12.5px; color: var(--t2); font-variant-numeric: tabular-nums; margin-right: 4px; }
.rec-body { display: grid; gap: 10px; padding: 12px 14px; }
.rec-body > p, .rec-summary p { margin: 0; font-size: 14px; line-height: 1.5; }
.rec-note { color: var(--t2); font-size: 13px !important; }
.rec-note.bad { color: var(--error); }
.rec-label { display: block; font-size: 12px; color: var(--t2); margin-bottom: 2px; }
.rec-transcript > summary { cursor: pointer; font-size: 13px; color: var(--t2); }
.activity .rec-transcript:not([open]) > summary::before { transform: translateY(-2px) rotate(-45deg); }
.activity .rec-transcript[open] > summary::before { transform: translateY(-4px) rotate(45deg); }
.rec-transcript pre { margin-top: 6px; padding: 10px 12px; max-height: 280px; overflow-y: auto; border-radius: 10px; background: var(--bg2); white-space: pre-wrap; font: inherit; font-size: 13px; line-height: 1.5; }
.tool-file { color: var(--t1); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) {
  .tool-row { flex-direction: column; gap: 2px; }
  .tool-row-meta { width: auto; }
}

/* Markdown des réponses */
.msg.assistant { white-space: normal; }
.msg.assistant > :first-child { margin-top: 0; }
.msg.assistant > :last-child { margin-bottom: 0; }
.msg.assistant p, .msg.assistant ul, .msg.assistant ol, .msg.assistant blockquote, .msg.assistant .code, .msg.assistant .table { margin: 0 0 12px; }
.msg.assistant h1, .msg.assistant h2, .msg.assistant h3, .msg.assistant h4 { margin: 20px 0 8px; line-height: 1.3; font-weight: 600; }
.msg.assistant h1 { font-size: 1.4em; }
.msg.assistant h2 { font-size: 1.25em; }
.msg.assistant h3 { font-size: 1.1em; }
.msg.assistant h4, .msg.assistant h5, .msg.assistant h6 { font-size: 1em; }
.msg.assistant ul, .msg.assistant ol { padding-left: 22px; }
.msg.assistant li { margin: 3px 0; }
.msg.assistant a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.msg.assistant blockquote { padding-left: 12px; color: var(--t2); box-shadow: inset 2px 0 0 var(--line); }
.msg.assistant hr { border: 0; height: 1px; background: var(--line); margin: 16px 0; }
.msg.assistant :not(pre) > code { background: var(--bg2); border-radius: 5px; padding: 1px 5px; font-size: .88em; }
.msg.assistant .code { position: relative; }
.msg.assistant .code pre { margin: 0; }
.code-lang { position: absolute; top: 6px; right: 10px; font-size: 11px; color: var(--t2); }
/* Texte à recopier ailleurs (mail corrigé…) : une carte, son titre et Copier en tête. */
.msg.assistant .copy-text { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--raised, var(--bg)); overflow: hidden; }
.copy-text-head { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--line); }
.copy-text-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-text-button { flex: none; }
.msg.assistant .copy-text-body { padding: 14px 16px 2px; }
.msg.assistant .copy-text-body p { margin: 0 0 12px; }
/* Copier la réponse : dans sa signature, discret. */
.msg-copy { margin-left: auto; padding: 2px 8px; border: 0; border-radius: 6px; background: none; color: var(--t2); font: inherit; font-size: 12px; cursor: pointer; }
.msg-copy:hover { background: var(--bg2); color: var(--t1); }
.copy-button { display: inline-flex; align-items: center; gap: 6px; }
.copy-button svg { flex: none; }
.copy-button.copied, .copy-button.copied:hover { color: #1f9d55; }
.copy-button.copied svg { animation: copy-check .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes copy-check { from { transform: scale(.4); opacity: 0; } }
/* Tableaux : fond doux et lignes alternées plutôt que des bordures. */
.msg.assistant .table, .script-return .table { overflow-x: auto; border-radius: 10px; background: var(--bg2); }
.msg.assistant table, .script-return table { border-collapse: collapse; font-size: 15px; width: 100%; }
.msg.assistant th, .script-return th { text-align: left; font-weight: 600; background: var(--table-head); }
.msg.assistant th, .msg.assistant td, .script-return th, .script-return td { padding: 9px 14px; vertical-align: top; }
.msg.assistant tbody tr:nth-child(even), .script-return tbody tr:nth-child(even) { background: var(--table-stripe); }
.script-return p { margin: 10px 0 0; color: var(--t2); font-size: 14px; }
.msg.stopped { color: var(--t2); font-size: 14px; }

/* Zone de saisie : une carte arrondie, le bouton d'envoi rond à l'intérieur. */
.composer {
  max-width: 808px; /* 8 px de plus que le fil de chaque côté : rien de ce qui défile ne dépasse à côté */
  width: 100%;
  margin: 0 auto;
  padding: 0 8px 9px;
  /* Toujours fixée en bas du fil, centrée, par-dessus les messages. Fond plein à partir du milieu
     de la zone (--composer-cut) : le texte qui défile passe derrière elle, sans fondu, et la limite
     tombe là où les bords de la zone sont droits, invisible. */
  background: linear-gradient(to bottom, transparent var(--composer-cut, 30px), var(--bg) var(--composer-cut, 30px));
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  /* Toujours sur son propre calque : sous Windows, Chrome passait le texte et les icônes de la zone
     du lissage couleur au lissage gris dès qu'une animation la recouvrait (liste des fournisseurs,
     panneau latéral), et tout paraissait glisser d'une fraction de pixel vers la gauche. */
  will-change: transform;
}
/* Comme sur Claude : fichiers joints, puis le texte sur toute la largeur, puis une ligne d'outils,
   trombone et fournisseur à gauche, envoi à droite. */
.composer-box {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  grid-template-areas: "files files files files files" "dictation dictation dictation dictation dictation" "text text text text text" "attach provider . mic send";
  align-items: center;
  column-gap: 6px;
  row-gap: 0; /* l'écart sous le texte vient de son padding : une ligne de fichiers vide n'en ajoute pas */
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 24px;
  padding: 7px;
  box-shadow: 0 0 10px rgb(0 0 0 / .04); /* légère, tout autour, sans effet de profondeur vers le bas */
  transition: border-color .2s;
}
/* Une demande y vient d'être préparée (crayon d'une tâche) : un halo qui pulse deux fois puis s'efface. */
.composer-box.draft-flash { animation: draft-flash 2.4s ease-out; }
@keyframes draft-flash {
  0%, 40% { border-color: var(--t1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--t1) 16%, transparent); }
  20%, 60% { border-color: var(--t2); box-shadow: 0 0 0 7px color-mix(in srgb, var(--t1) 7%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .composer-box.draft-flash { animation-duration: 1.6s; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .composer-box { box-shadow: 0 0 10px rgb(0 0 0 / .04); } }
:root[data-theme="dark"] .composer-box { box-shadow: 0 0 10px rgb(0 0 0 / .04); }
.composer textarea {
  font-weight: 400;
  display: block;
  grid-area: text;
  min-width: 0;
  resize: none;
  max-height: 200px;
  background: none;
  border: 0;
  padding: 4px 10px 12px;
  font-size: 16px;
  line-height: 24px;
}
.composer textarea:focus { border: 0; }
.composer textarea::placeholder { color: var(--t2); }
/* Choix du fournisseur d'IA : discret, un cadenas quand il pseudonymise. */
.provider-pick-wrap { grid-area: provider; position: relative; display: inline-flex; justify-self: start; align-self: center; }
.provider-pick { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; font-size: 13.5px; border-radius: 999px; background: color-mix(in srgb, var(--t1) 6%, transparent); color: var(--t1); cursor: pointer; }
.provider-pick.anon { color: #1f7a45; background: color-mix(in srgb, #1f9d55 13%, transparent); }
.provider-pick::after { content: ""; width: 5px; height: 5px; margin: -2px 0 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
.provider-pick:focus-visible { outline: 2px solid var(--t2); outline-offset: 1px; }
.provider-logo-slot:empty { display: none; }
.provider-logo-slot, .provider-logo { display: inline-flex; }
.provider-logo svg { width: 15px; height: 15px; display: block; }
.provider-item { display: inline-flex; align-items: center; gap: 8px; }
.provider-glyph { color: currentColor; }
.provider-glyph svg { width: 14px; height: 14px; }
/* Le menu des fournisseurs : l'icône dans une tuile, le nom, dessous où il tourne (et « pseudonymisé »,
   en vert), une coche sur celui du message. */
.provider-menu .provider-option { display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; align-items: center; gap: 0 10px; padding: 7px 8px; }
.provider-option-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--bg2); color: var(--t2); }
.provider-option-icon svg { width: 15px; height: 15px; }
/* Hauteurs de ligne en pixels entiers : avec 1.3, chaque ligne faisait 47,78 px, le haut du menu tombait
   entre deux pixels, et la fin de l'animation d'ouverture le recalait d'un coup (tout remontait un peu). */
.provider-option-text { display: grid; min-width: 0; line-height: 18px; }
.provider-option-name { overflow: hidden; font-size: 14px; line-height: 18px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.provider-option-sub { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--t2); }
.provider-option-sub.anon { color: #1f7a45; }
.provider-option-check { display: grid; color: var(--t1); opacity: 0; }
.provider-option-check svg { width: 15px; height: 15px; }
.provider-option.selected { font-weight: inherit; }
.provider-option.selected .provider-option-check { opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .provider-option-sub.anon { color: #5fd08e; } }
:root[data-theme="dark"] .provider-option-sub.anon { color: #5fd08e; }
/* Menu des fournisseurs : au-dessus du bouton, la zone de saisie étant en bas de l'écran. */
.combo-menu.provider-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; min-width: 240px; line-height: normal; text-align: left; transform-origin: bottom left; animation: menu-up .22s var(--ease-out-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .provider-pick.anon { color: #5fd08e; } }
:root[data-theme="dark"] .provider-pick.anon { color: #5fd08e; }
#send-more {
  grid-area: send;
  justify-self: start;
  transform: translateX(-42px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  display: grid;
  place-items: center;
}
#send-more[hidden] { display: none; }
#send-more svg { width: 18px; height: 18px; }
.queued-note { display: block; margin-top: 4px; font-size: 12px; opacity: .7; }
#send {
  grid-area: send;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: opacity .15s, transform .1s;
}
#send:not(:disabled):active { transform: scale(.94); }

.attach {
  grid-area: attach;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--t1) 6%, transparent); /* même fond que le choix du fournisseur */
  color: var(--t2);
  transition: background .15s, color .15s;
}
.attach:hover { background: color-mix(in srgb, var(--t1) 11%, transparent); color: var(--t1); }
.attach svg { width: 20px; height: 20px; }
/* Micro (dictée) : même bouton rond que le trombone ; rouge et pulsant pendant l'écoute. */
.attach.mic { grid-area: mic; }
.attach.mic.starting { color: #d93a3a; }
.attach.mic.listening { color: #fff; background: #d93a3a; animation: mic-pulse 1.4s ease-in-out infinite; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, #d93a3a 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .attach.mic.listening { animation: none; } }

/* Dictée par le fournisseur réglé (POST /api/transcribe) : le même micro, teinté pendant l'enregistrement,
   avec un halo qui suit le niveau sonore (--level, de 0 à 1) ; il patiente pendant la transcription. */
.attach.mic { transition: background .15s, color .15s, box-shadow .08s linear; }
.attach.mic:disabled { opacity: 1; cursor: default; }
.attach.mic.recording, .attach.mic.recording:hover {
  background: color-mix(in srgb, var(--error) 14%, transparent);
  color: var(--error);
  box-shadow: 0 0 0 calc(2px + var(--level, 0) * 7px) color-mix(in srgb, var(--error) 18%, transparent);
}
.attach.mic.busy svg { animation: dictate-wait 1s ease-in-out infinite alternate; }
@keyframes dictate-wait { to { opacity: .3; } }
/* Bandeau au-dessus du texte : niveau sonore, durée, et les erreurs du micro. */
.dictation { grid-area: dictation; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 2px 6px 8px; font-size: 13px; color: var(--t2); }
.dictation[data-kind="error"] { color: var(--error); }
.dictation #dictation-text { min-width: 0; font-variant-numeric: tabular-nums; }
.dictation[data-kind="live"] #dictation-text { color: var(--t1); }
.dictation-hint { color: var(--t2); }
.dictation:not([data-kind="live"]) .dictation-hint { display: none; }
.dictation .link { margin-left: auto; flex: none; font-size: 13px; }
/* Pendant l'écoute : point rouge qui pulse, puis l'onde de la voix qui défile de droite à gauche
   (voiceWave, app.js), comme un message vocal. Le bandeau s'ouvre en grandissant vers le haut. */
/* Même hauteur en attente (« Ouverture du micro… ») qu'à l'écoute, onde comprise : le bandeau
   s'ouvre d'un seul mouvement. */
.dictation { overflow: hidden; min-height: 38px; }
.dictation-dot, .dictation-wave { display: none; flex: none; }
.dictation[data-kind="live"] .dictation-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--error); animation: dictation-dot 1.2s ease-in-out infinite; }
@keyframes dictation-dot { 50% { opacity: .35; } }
.dictation[data-kind="live"] .dictation-wave { display: block; flex: 1 1 auto; min-width: 60px; max-width: 360px; height: 26px; }
.dictation[data-kind="live"] #dictation-text { flex: none; }
@media (max-width: 900px) { .dictation-hint { display: none; } }
@media (max-width: 600px) { .dictation-hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .attach.mic.busy svg { animation: none; opacity: .5; }
  .attach.mic { transition: none; }
  .dictation[data-kind="live"] .dictation-dot { animation: none; }
}

/* Pastilles des fichiers joints : dans la zone de saisie (retirables) et sous un message envoyé. */
.attachments { grid-area: files; display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 8px; }
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  padding: 6px 8px 6px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--t1) 7%, var(--surface));
  font-size: 13px;
  overflow: hidden;
}
.chip-text { display: grid; min-width: 0; line-height: 1.25; }
.chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-meta { font-size: 11.5px; color: var(--t2); }
.chip.error .chip-meta { color: var(--error); }
.chip-remove {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: none;
  color: var(--t2);
}
.chip-remove:hover { background: color-mix(in srgb, var(--t1) 10%, transparent); color: var(--t1); }
.chip-remove svg { width: 12px; height: 12px; }
.chip-progress { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--t2); transition: width .15s; }
.msg.user .attachments { padding: 0; }
.msg.user .attachments:not(:last-child) { margin-bottom: 8px; }
.msg.user .chip { background: color-mix(in srgb, var(--t1) 7%, var(--bg)); }
#send:disabled { opacity: .25; }
#send svg { width: 18px; height: 18px; }
/* Envoyer ↔ Stop : les deux icônes superposées, fondu et légère rotation au changement. */
#send svg { grid-area: 1 / 1; transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1); }
#send .icon-stop { opacity: 0; transform: scale(.5) rotate(-90deg); }
#send.stop .icon-send { opacity: 0; transform: scale(.5) rotate(90deg); }
#send.stop .icon-stop { opacity: 1; transform: none; }
/* La zone de saisie s'agrandit d'un coup : animer sa hauteur recalculait toute la page à chaque
   image pendant la frappe. */
/* Message envoyé : monte et apparaît depuis la zone de saisie. */
.msg.sent { animation: msg-sent .32s cubic-bezier(.2, .8, .2, 1); transform-origin: bottom right; }
@keyframes msg-sent { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  #send svg, .composer textarea { transition: none; }
  .msg.sent { animation: none; }
}

/* Paramètres */
/* La fenêtre ne défile jamais elle-même (coins arrondis intacts) : seul le contenu défile. */
dialog.settings {
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--t1);
  box-shadow: var(--surface-shadow);
  width: min(920px, calc(100% - 32px));
  height: min(680px, calc(100% - 32px));
}
dialog::backdrop { background: rgb(0 0 0 / .5); backdrop-filter: blur(2px); }

/* Ouverture et fermeture en fondu, avec un léger zoom. */
dialog.settings, dialog.settings::backdrop {
  transition: opacity .2s ease, transform .2s cubic-bezier(.3, .7, .2, 1), overlay .2s allow-discrete, display .2s allow-discrete;
}
dialog.settings { opacity: 0; transform: translateY(8px) scale(.98); }
dialog.settings::backdrop { opacity: 0; }
dialog.settings[open] { opacity: 1; transform: none; }
dialog.settings[open]::backdrop { opacity: 1; }
@starting-style {
  dialog.settings[open] { opacity: 0; transform: translateY(8px) scale(.98); }
  dialog.settings[open]::backdrop { opacity: 0; }
}
/* Fermeture animée par une classe (voir closeSettings) : Safari ne sait pas animer la sortie d'un dialog. */
dialog.settings.closing { animation: settings-out .2s ease forwards; pointer-events: none; }
dialog.settings.closing::backdrop { animation: backdrop-out .2s ease forwards; }
@keyframes settings-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes backdrop-out { to { opacity: 0; } }
.settings-layout { display: grid; grid-template-columns: 240px 1fr; height: 100%; min-height: 0; }
.settings-nav, .settings-body { min-height: 0; overflow-y: auto; }
.settings-nav {
  background: var(--bg2);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-nav h2 { font-size: 16px; padding: 0 10px 12px; }
/* Logotype du menu : l'icône de l'appli et son nom. */
.app-mark { display: flex; align-items: center; gap: 10px; }
.app-mark img { flex: none; border-radius: 7px; }
.app-mark span { font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -.02em; } /* police du site clikpilote.fr */
/* Version, en tout petit dans le coin inférieur droit de la fenêtre. */
.version { position: absolute; z-index: 2; right: 12px; bottom: 8px; font-size: 10.5px; color: var(--t2); opacity: .6; pointer-events: none; }
.settings-nav button {
  background: none;
  color: var(--t2);
  text-align: left;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
/* Icône devant chaque entrée du menu, pour reconnaître la section d'un coup d'œil. */
.nav-icon { flex: none; width: 18px; height: 18px; opacity: .85; }
.settings-nav button.active .nav-icon, .settings-nav button:hover .nav-icon { opacity: 1; }
.settings-nav button:hover { color: var(--t1); }
/* Catégories du menu : titre bien marqué, et une séparation nette avant « Administration ». */
.nav-group {
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; /* police du site clikpilote.fr */
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--t1);
  padding: 6px 10px 6px;
}
.nav-group:first-of-type { padding-top: 0; }
.nav-group + button { margin-top: 2px; }
.nav-group.admin-group {
  margin-top: 12px;
  padding-top: 14px;
  background: linear-gradient(var(--line), var(--line)) top / 100% 1px no-repeat;
}
.settings-nav button.active { background: var(--bg); color: var(--t1); }
/* Bas du menu : déconnexion. */
.nav-foot {
  margin-top: auto;
  padding-top: 12px;
  display: grid;
  background: linear-gradient(var(--line), var(--line)) top / 100% 1px no-repeat;
}
.settings-nav button.logout:hover { color: var(--error); }
/* Lien vers la page « Licences » (licences.html), discret, sous « Se déconnecter ». */
.nav-licences { justify-self: start; display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; font-size: 12.5px; color: var(--t2); text-decoration: none; }
.nav-licences:hover { color: var(--t1); text-decoration: underline; text-underline-offset: 2px; }
@media (pointer: coarse) { .nav-licences { min-height: 44px; } }
.settings-body { position: relative; padding: 28px 32px; }
.settings-body section { display: grid; gap: 16px; align-content: start; }
.settings-body h3 { margin: 0; font-size: 18px; font-weight: 600; }
.settings-body .muted { margin-top: -10px; }
/* Fixée au coin de la fenêtre, hors de la zone qui défile. */
.close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg); /* le texte qui défile passe derrière sans gêner la lecture */
  color: var(--t2);
}
.close svg { width: 18px; height: 18px; }
.close:hover { color: var(--t1); background: var(--bg2); }

/* Retour au menu des paramètres : mobile seulement. */
.back {
  display: none;
  align-items: center;
  gap: 2px;
  width: fit-content;
  margin: 0 0 14px -6px;
  padding: 6px 8px 6px 2px;
  background: none;
  color: var(--t2);
  font-size: 15px;
}
.back svg { width: 20px; height: 20px; }
.back:hover { color: var(--t1); }
@keyframes section-in { from { opacity: 0; transform: translateX(12px); } }
@keyframes section-back { from { opacity: 0; transform: translateX(-12px); } }

.form { display: grid; gap: 14px; }
.field { display: grid; gap: 8px; }
.field-label { font-size: 14px; color: var(--t1); font-weight: 500; }
.inline { display: flex; gap: 8px; }
.inline input { flex: 1; }
.status { margin: 0; font-size: 14px; color: var(--t2); }
.status.error { color: var(--error); }
/* Journal d'un serveur SSH (connectorJournal) : la date, qui, quoi à gauche, le résultat à droite. */
.connector-journal-box { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.connector-journal { width: 100%; max-height: 360px; overflow-y: auto; }
.connector-journal .tool-row-main { flex: 1; font-weight: 400; font-size: 13px; }
.connector-journal .tool-row-meta { width: auto; max-width: 45%; overflow-wrap: anywhere; }
.connector-journal .error { color: var(--error); }

/* Choix segmenté : un curseur unique glisse sous l'option active (--i : son rang, --n : le nombre d'options). */
.segmented {
  --gap: 2px;
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--gap);
  padding: 3px;
  border-radius: 10px;
  /* Rail légèrement creusé : se distingue aussi sur une carte de même fond (--bg2). */
  background: color-mix(in srgb, var(--t1) 6%, var(--bg2));
  box-shadow: inset 0 0 0 1px var(--line);
  width: fit-content;
}
.segmented::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px - (var(--n) - 1) * var(--gap)) / var(--n));
  border-radius: 8px;
  background: var(--thumb);
  box-shadow: 0 1px 3px rgb(0 0 0 / .12);
  transform: translateX(calc(var(--i) * (100% + var(--gap))));
  transition: transform .25s cubic-bezier(.3, .7, .2, 1);
}
.segmented button { position: relative; background: none; color: var(--t2); padding: 7px 16px; border-radius: 8px; transition: color .2s; }
.segmented button.active { color: var(--t1); }

/* Changement de thème : fondu de toute la page d'un seul bloc (View Transitions), sans faire
   transiter chaque élément un par un, ce qui provoquait un léger clignotement. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; animation-timing-function: ease; }
/* Le sélecteur de thème reste vivant pendant le fondu : son curseur glisse sans être dédoublé. */
#theme-choice { view-transition-name: theme-choice; }
::view-transition-old(theme-choice) { display: none; }
::view-transition-new(theme-choice) { animation: none; }
::view-transition-group(theme-choice) { animation: none; }


/* Barre du haut et menu burger : mobile seulement */
.topbar { display: none; }
.backdrop { display: none; }
.burger {
  background: none;
  width: 40px;
  height: 40px;
  padding: 10px;
  display: grid;
  align-content: center;
  gap: 4px;
}
.burger span { display: block; height: 2px; border-radius: 2px; background: var(--t1); }

/* Bord droit de la barre latérale : glisser pour changer sa largeur, double-clic pour revenir à
   la largeur d'origine. Sa ligne de séparation fonce au survol. */
.side-resize {
  position: absolute;
  top: 0;
  right: -7px; /* surtout hors de la barre : la barre de défilement, collée au bord, reste attrapable */
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 5;
  touch-action: none;
}
/* La ligne de séparation elle-même fonce au survol : la poignée déborde de 1 px avant elle et de 7
   après (barre latérale), ou de 7 avant et 1 après (panneau des tâches). */
.side-resize::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1px;
  width: 1px;
  background: color-mix(in srgb, var(--t1) 30%, transparent);
  opacity: 0;
  transition: opacity .15s;
}
.side-resize:hover::after, .side-resize:focus-visible::after, .side-resize.dragging::after { opacity: 1; }
.side-resize:focus-visible { outline: none; }
.app.resizing { cursor: col-resize; user-select: none; }

/* Téléphone : moins de 720 px de large, ou tourné en paysage (écran tactile de moins de 500 px de
   haut ; une tablette en paysage dépasse 1000 px de large et garde la mise en page d'ordinateur).
   Même condition dans apps.css et tasks.css. Les marges env(safe-area-inset-*) (viewport-fit=cover,
   index.html) écartent l'encoche, la barre d'état et la barre d'accueil ; elles valent 0 ailleurs. */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) {
  .side-resize { display: none; }
  .conv-actions { opacity: .7; } /* pas de survol sur écran tactile */
  /* Sur téléphone : seulement les trois points, à la verticale ; épingler se fait depuis leur menu. */
  .conv-pin { display: none; }
  .conv-more svg { transform: rotate(90deg); }
  .conv span, .conv:hover span, .conv:focus-within span, .conv.menu-open span { padding-right: 28px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(280px, 85vw);
    z-index: 20;
    transform: translateX(-100%);
    transition: transform .22s ease;
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }
  .sidebar-foot { margin-left: calc(-1 * max(14px, env(safe-area-inset-left))); padding-left: max(14px, env(safe-area-inset-left)); }
  .app.menu-open .sidebar { transform: none; }
  .backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10;
    background: rgb(0 0 0 / .4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .app.menu-open .backdrop { opacity: 1; pointer-events: auto; }
  /* Sur téléphone, pas de barre : un bouton menu flottant, en haut à gauche, par-dessus le fil. */
  .topbar { display: block; position: absolute; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); z-index: 3; }
  .burger { background: var(--surface); border: 1px solid var(--surface-border); border-radius: 12px; }
  /* Le premier message commence sous le bouton menu ; sur les côtés, l'encoche en paysage. */
  .chat > .messages { padding: calc(62px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(var(--composer-h, 110px) + 40px) max(16px, env(safe-area-inset-left)); }
  /* Bandeau (double authentification…) : une carte sous le bouton menu et le bouton des tâches,
     jamais dessous ; tout entière cliquable quand elle mène à un réglage. Le fil commence juste après. */
  .chat > .notice {
    margin: calc(max(10px, env(safe-area-inset-top)) + 50px) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--bg2);
    color: var(--t1);
    font-size: 13.5px;
    line-height: 1.35;
    text-wrap: balance;
  }
  .chat > .notice:has(> button) { padding: 0; }
  .notice > button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 14px 6px 12px; }
  .notice > button::after { content: ""; flex: none; margin-left: auto; width: 7px; height: 7px; border-top: 1.5px solid var(--t2); border-right: 1.5px solid var(--t2); transform: rotate(45deg); }
  .chat > .notice:not([hidden]) ~ .messages { padding-top: 12px; }
  /* Fournisseur choisi : son nom sur une ligne, raccourci s'il le faut, jamais hors de la pastille ; la
     pastille cède la place aux boutons voisins (trombone, micro, envoi) au lieu de pousser
     l'envoi hors de l'écran (320 px, tous les boutons affichés). */
  .composer-box { grid-template-columns: auto minmax(0, auto) 1fr auto auto; }
  .provider-pick-wrap { display: flex; min-width: 0; max-width: 100%; }
  .provider-pick { min-width: 0; max-width: 100%; }
  #provider-name { min-width: 0; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Tableaux des réponses : les cellules ne descendent pas sous 7 caractères (un montant tient sur
     une ligne), le tableau défile ; un fondu au bord droit dit qu'il en reste à voir. */
  .msg.assistant th, .msg.assistant td { min-width: 7em; }
  @supports (animation-timeline: scroll()) {
    .msg.assistant .table {
      mask-image: linear-gradient(to left, transparent, #000 var(--table-fade));
      animation: table-fade linear both;
      animation-timeline: scroll(self inline);
    }
  }
  /* Paramètres en plein écran, sur deux niveaux : le menu, puis la section choisie. */
  dialog.settings { width: 100%; height: 100%; max-width: none; max-height: none; border: 0; border-radius: 0; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { padding: max(20px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .settings-nav button { padding: 11px 10px; font-size: 15px; gap: 12px; }
  .nav-icon { width: 20px; height: 20px; }
  .settings-nav button.active { background: none; color: var(--t2); }
  .settings-body { padding: 0 max(16px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  /* Fermer : dans la barre du retour, sous la barre d'état ; sans fond, la barre en a un. */
  dialog.settings > .close { top: env(safe-area-inset-top); right: max(6px, env(safe-area-inset-right)); z-index: 4; width: 44px; height: 44px; background: none; }
  /* Version : sous « Se déconnecter », jamais sur le contenu d'une section. */
  .version { position: static; padding: 12px 10px 0; }
  .settings:not(.section-open) .settings-body, .settings.section-open .settings-nav { display: none; }
  .settings.section-open .settings-body { animation: section-in .2s ease; }
  /* Retour au menu : même glissement, dans l'autre sens. */
  .settings.going-back .settings-nav { animation: section-back .2s ease; }
  /* Plein écran : la fenêtre monte du bas, comme une feuille iOS, sans fondu ni zoom. */
  dialog.settings, dialog.settings::backdrop {
    transition: transform .32s cubic-bezier(.32, .72, 0, 1), opacity .32s ease, overlay .32s allow-discrete, display .32s allow-discrete;
  }
  dialog.settings, dialog.settings[open] { opacity: 1; }
  dialog.settings { transform: translateY(100%); }
  dialog.settings[open] { transform: none; }
  @starting-style {
    dialog.settings[open] { opacity: 1; transform: translateY(100%); }
  }
  dialog.settings.closing { animation: sheet-out .28s cubic-bezier(.4, 0, .8, .6) forwards; }
  @keyframes sheet-out { from { transform: none; } to { transform: translateY(100%); } }
  /* Retour au menu : une barre collée en haut de la section, qui ne part pas avec le défilement ;
     son fond couvre toute la largeur (ombre portée, découpée à la hauteur de la barre). */
  .back {
    display: inline-flex;
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: calc(44px + env(safe-area-inset-top));
    /* 6 px dans la marge de la section, jamais dans celle de l'encoche (paysage). */
    margin: 0 0 8px calc(max(10px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-left)));
    padding-block: env(safe-area-inset-top) 0;
    background: var(--bg);
    box-shadow: 0 0 0 100vmax var(--bg);
    clip-path: inset(0 -100vmax);
  }
  .grid2 { grid-template-columns: 1fr; }
  .composer { padding: 0 max(10px, env(safe-area-inset-right)) max(4px, calc(env(safe-area-inset-bottom) - 22px)) max(10px, env(safe-area-inset-left)); } /* en bas : juste la barre d'accueil de l'iPhone, sans marge en plus */
  table.users td.email, table.users th:nth-child(2) { display: none; }
  /* Tiroir : des lignes de 44 px, à la taille du doigt. */
  .conv, .side-link { height: 44px; }
  .conv-actions { right: 0; }
  .conv-more { width: 44px; height: 44px; }
}
/* Fondu au bord droit d'un tableau qui défile (voir le bloc ci-dessus) : il s'efface en fin de course. */
@property --table-fade { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes table-fade { 0%, 92% { --table-fade: 28px; } 100% { --table-fade: 0px; } }

/* Validation d'une action sensible demandée par l'IA */
.confirm {
  --cpad: 18px;
  max-width: 760px; width: 100%; margin: 0 auto; box-sizing: border-box;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: var(--cpad);
  display: grid; gap: 12px;
}
.confirm-title { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; }
/* La provenance colle au titre qu'elle introduit. */
.confirm > .card-from + .confirm-title { margin-top: -8px; }
/* Refuser a le focus à l'ouverture (approvals.js, focusRefuse) sans anneau, tant que le clavier ne sert pas. */
.confirm .quiet-focus:focus, .confirm .quiet-focus:focus-visible { outline: none; box-shadow: none; }
/* Les champs dans un panneau encadré, une ligne par champ. */
.confirm dl {
  margin: 0; display: grid; grid-template-columns: auto 1fr; font-size: 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.confirm dt, .confirm dd { padding: 9px 14px; border-top: 1px solid var(--line); }
.confirm dt:first-of-type, .confirm dt:first-of-type + dd { border-top: 0; }
.confirm dt { color: var(--t2); padding-right: 6px; }
.confirm dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
/* Un changement « avant → après » : l'ancienne valeur barrée, la nouvelle en pastille. */
.confirm dd.confirm-change { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; white-space: normal; }
.confirm-old { color: var(--t2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--t2) 60%, transparent); }
.confirm-arrow { color: var(--t2); }
.confirm-new { font-weight: 500; padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--t1) 8%, transparent); }
/* Boutons : Refuser discret, Autoriser franc ; le délai d'armement en fondu, pas en saut. */
.confirm .card-actions { gap: 8px; }
.confirm .card-actions button { min-height: 38px; padding: 8px 18px; border-radius: 10px; font-weight: 500; }
.confirm .card-actions button.secondary { background: transparent; }
.confirm .card-actions button.secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--t1) 7%, transparent); }
.confirm .card-actions .card-approve:not(.secondary) { box-shadow: 0 1px 2px rgb(0 0 0 / .12); transition: opacity .25s, transform .1s; }
.confirm.danger .card-actions .card-approve:not(.secondary) { background: var(--alert, #d0322b); color: #fff; }
.confirm .card-actions button:active:not(:disabled) { transform: scale(.98); }
.confirm p { margin: 0; }
/* Un texte long (le message d'un mail, une commande) : un bloc à lire, sous son intitulé. */
.confirm-block { display: grid; gap: 6px; min-width: 0; }
.confirm-block > span { font-size: 12.5px; color: var(--t2); }
.confirm-block > div { max-height: 260px; overflow-y: auto; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.confirm-mark { font-size: 12px; color: var(--t2); }
.confirm-more { margin-right: auto; padding: 6px 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--t2); cursor: pointer; }
.confirm-more:hover { color: var(--t1); text-decoration: underline; }
.confirm-raw { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--bg); font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow-y: auto; }
.card-from { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12.5px; color: var(--t2); }
.card-from span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-note { width: 100%; box-sizing: border-box; font-size: 13.5px; }
.card-approve[aria-disabled="true"] { opacity: .45; cursor: default; }
.card-status { font-size: 13.5px; overflow-wrap: anywhere; }
/* Carte relue avec le fil, déjà tranchée : repliée sur son titre et son issue (pastCard, app.js). */
.confirm.past { gap: 8px; padding: 10px 14px; }

.confirm.past .confirm-title { cursor: pointer; font-size: 14px; }
.confirm.past .confirm-title::after { content: " ▸"; color: var(--t2); font-weight: 400; }
.confirm.past:not(.folded) .confirm-title::after { content: " ▾"; }
.confirm.past.folded > :not(.confirm-title, .card-status, .card-from) { display: none; }
.confirm.past .card-status { font-size: 13px; color: var(--t2); }
.confirm.past.autorisee .card-status { color: var(--done, #1a7f46); }
.confirm.past.refusee .card-status, .confirm.past.impossible .card-status { color: var(--alert, #d0322b); }
/* Carte de validation sur un petit écran : chaque libellé au-dessus de sa valeur, qui prend toute la
   largeur (une adresse ne se coupe plus en trois lignes). */
@media (max-width: 480px) {
  .confirm { --cpad: 14px; }
  .confirm dl { grid-template-columns: minmax(0, 1fr); }
  .confirm dt { font-size: 12.5px; padding-bottom: 0; }
  .confirm dd { border-top: 0; padding-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, dialog::backdrop { transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Lien de téléchargement d'un fichier du dossier de travail, dans une réponse de l'IA. */
.file-link { font-weight: 500; }
.file-link::before { content: "↓ "; }

/* Menus « ⋮ » (Mes fichiers, Applications), fil d'Ariane et champ de renommage, communs aux pages
   (Mes fichiers : files.css). */
.file-menu { position: absolute; top: 28px; right: 3px; z-index: 5; min-width: 170px; display: grid; padding: 4px; border-radius: 10px; background: var(--bg); border: 1px solid var(--bg2); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); text-align: left; }
.file-menu[hidden] { display: none; }
.file-menu-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; background: none; color: var(--t1); font-size: 13px; text-decoration: none; white-space: nowrap; }
.file-menu-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.file-menu-item:hover, .file-menu-item:focus-visible { background: var(--bg2); }
.file-menu-item.danger { color: var(--error); }
.file-menu-item.armed { background: color-mix(in srgb, var(--error) 14%, transparent); font-weight: 600; }
.file-generic { color: var(--t2); }
.crumb.drop { background: var(--bg2); outline: 1.5px dashed var(--t2); outline-offset: -2px; }
.file-input { font: inherit; font-size: 12px; text-align: center; padding: 4px 8px; border-radius: 8px; min-width: 0; width: 100%; }
.crumbs { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.crumb { background: none; padding: 4px 8px; border-radius: 8px; color: var(--t2); font-size: 14px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb:hover { background: var(--bg2); color: var(--t1); }
.crumb.current { color: var(--t1); font-weight: 600; }
.crumb-sep { color: var(--t2); }
.icon-btn {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: 8px;
  background: none;
  color: var(--t2);
  font-size: 13px;
  transition: background .15s, color .15s;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--bg); color: var(--t1); }
.icon-btn.danger:hover, .icon-btn.armed { color: var(--error); }
.icon-btn.armed { background: color-mix(in srgb, var(--error) 12%, transparent); padding: 0 10px; }

/* Préférences */
#preferences-form textarea { resize: vertical; min-height: 160px; line-height: 1.5; }
#memory-list { display: contents; }
#memory-list textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
#preferences-count.error { color: var(--error); }
#company-memory-length.error { color: var(--error); }
#company-memory-form textarea { resize: vertical; min-height: 140px; line-height: 1.5; }

/* Écran tactile : iOS zoome sur tout champ écrit en moins de 16 px quand on le touche. */
@media (pointer: coarse) {
  input, textarea, select { font-size: 16px !important; }
}

/* Option repliée des paramètres (termes masqués) : une ligne, dépliée au clic. */
.fold { margin-top: 28px; border-radius: 14px; background: color-mix(in srgb, var(--t1) 3.5%, transparent); }
.fold + .fold { margin-top: 0; } /* deux replis à la suite : l'espacement de la section suffit */
.fold > summary { list-style: none; display: grid; gap: 6px; padding: 16px 44px 16px 16px; cursor: pointer; position: relative; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 7px; height: 7px;
  border-right: 1.8px solid var(--t2); border-bottom: 1.8px solid var(--t2);
  transform: translateY(-70%) rotate(45deg); transition: transform .15s;
}
.fold[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.fold-title { font-size: 14px; font-weight: 500; color: var(--t1); }
.fold-sub { font-size: 13px; line-height: 1.45; margin: 0 !important; }
.fold > form, #voice-settings > form { padding: 0 16px 16px; }
#voice-settings .field { gap: 10px; }
#voice-settings .field .hint { margin: 0; }
.voice-fields { display: grid; gap: 14px; }
.voice-fields[hidden] { display: none; }
.fold textarea { background: var(--bg); }
/* Une URL longue sans espace ne doit pas élargir le panneau (colonne de grille). */
.settings-body section > * { min-width: 0; }
/* Texte long d'une fiche (description, notes) : sous le titre, deux lignes au plus. */
.tool-row-text { font-size: 13px; color: var(--t2); line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Champ sans <label> (choix en boutons) : même présentation qu'un libellé de formulaire. */
.field { display: grid; gap: 6px; font-size: 14px; color: var(--t2); }
.field .segmented { font-size: 14px; }

/* Champ avec menu de suggestions (comboEl), à la place de la liste du navigateur. */
.combo { position: relative; flex: 1; min-width: 0; }
.combo input { padding-right: 34px; }
.combo-toggle {
  position: absolute; top: 0; right: 0; bottom: 0; width: 34px; padding: 0;
  background: none; color: var(--t2); border-radius: 0 8px 8px 0;
}
.combo-toggle::after {
  content: ""; display: block; width: 7px; height: 7px; margin: -3px auto 0;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.combo-toggle:hover { color: var(--t1); }
.combo-menu {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto; padding: 4px;
  background: var(--raised); border: 1px solid color-mix(in srgb, var(--t1) 10%, transparent);
  border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / .12);
  animation: combo-in .12s ease-out;
}
@keyframes combo-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .combo-menu { animation: none; } }
.combo-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 10px; border-radius: 7px; font-size: 14px; color: var(--t1); cursor: pointer;
}
.combo-item:hover, .combo-item.active { background: color-mix(in srgb, var(--t1) 6%, transparent); }
.combo-item.selected { font-weight: 600; }
.combo-hint { font-size: 12.5px; color: var(--t2); font-weight: 400; white-space: nowrap; }

/* Option à interrupteur d'un formulaire : un bloc par réglage, son explication dessous, sur toute la largeur. */
.option-block {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; row-gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--raised); border: 1px solid color-mix(in srgb, var(--t1) 8%, transparent);
}
.option-title { color: var(--t1); font-size: 14px; font-weight: 600; cursor: pointer; }
.option-block .hint { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.5; }
/* Bascule vers un fournisseur de secours (providerCard, app.js) : le délai et le secours sur une ligne. */
.fallback-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; }
.fallback-row[hidden] { display: none; }
.fallback-row .fallback-after { width: 76px; height: 34px; }
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) { .option-block { padding: 10px 12px; } }

/* Fiche Odoo (serveur MCP) : champs en deux colonnes, libellé discret. */
.odoo-fields { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; padding: 12px 14px; font-size: 14px; }
.odoo-fields dt { color: var(--t2); }
.odoo-fields dd { margin: 0; overflow-wrap: anywhere; }
.odoo-fields + .tool-list { border-top: 1px solid color-mix(in srgb, var(--t1) 7%, transparent); }
.tool-card-toggle { display: block; padding: 10px 14px !important; font-size: 13px; border-top: 1px solid color-mix(in srgb, var(--t1) 7%, transparent); width: 100%; text-align: left; }
.tool-card-head + .tool-card-toggle { border-top: 0; }

/* Lecteur audio maison (enregistrements 3CX) : lecture ronde, barre fine, temps, téléchargement. */
.player { display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 6px; border-radius: 999px; background: var(--bg2); max-width: 460px; }
.player audio { display: none; }
.player-play {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg);
}
.player-play svg { width: 16px; height: 16px; }
.player-play:hover { background: color-mix(in srgb, var(--accent) 85%, var(--bg)); }
.player-bar { position: relative; flex: 1; min-width: 60px; height: 18px; cursor: pointer; touch-action: none; }
.player-bar::before, .player-fill { content: ""; position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; }
.player-bar::before { right: 0; background: color-mix(in srgb, var(--t1) 14%, transparent); }
.player-fill { width: 0; background: var(--t1); }
.player-fill::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--t1); opacity: 0; transition: opacity .15s; }
.player-bar:hover .player-fill::after, .player-bar:focus-visible .player-fill::after { opacity: 1; }
.player-bar:focus-visible { outline: none; }
.player-time { flex: none; font-size: 12.5px; color: var(--t2); font-variant-numeric: tabular-nums; }
.player-download { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--t2); }
.player-download:hover { color: var(--t1); background: color-mix(in srgb, var(--t1) 7%, transparent); }
.player-download svg { width: 17px; height: 17px; }

/* Carte d'un fichier créé ou modifié par l'IA (réponse et résultat d'outil) : icône, nom, détail,
   ouvrir et télécharger. En ligne, pour tenir dans une phrase. */
.file-card {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; vertical-align: middle;
  padding: 8px 14px 8px 10px; margin: 2px 0; border-radius: 12px; text-decoration: none; cursor: pointer;
  background: var(--raised); border: 1px solid color-mix(in srgb, var(--t1) 10%, transparent);
  transition: background .15s, border-color .15s;
}
.file-card:hover { background: color-mix(in srgb, var(--t1) 5%, var(--raised)); border-color: color-mix(in srgb, var(--t1) 18%, transparent); }
.file-card .tool-icon { flex: none; }
.file-card .tool-icon svg { width: 22px; height: 22px; }
.file-card-text { display: grid; min-width: 0; line-height: 1.3; }
.file-card-name { font-size: 14px; font-weight: 500; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card-meta { font-size: 12px; color: var(--t2); }
.tool-card.file-result { background: none; border: 0; box-shadow: none; border-radius: 0; animation: none; overflow: visible; }
.file-result-line { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 !important; font-size: 13px !important; color: var(--t2); }
.file-result-line strong { color: var(--t1); font-weight: 500; }
.file-result-line .tool-icon svg { width: 16px; height: 16px; }
.tool-card.file-result > .tool-card-note { border-top: 0; padding: 6px 2px 0 !important; }

/* Sur ordinateur, les boutons de la zone de saisie un peu plus petits (au doigt, sur téléphone,
   ils gardent 36 px). */
@media (min-width: 1001px), (min-width: 721px) and (min-height: 501px), (min-width: 721px) and (pointer: fine) {
  .attach { width: 32px; height: 32px; }
  .attach svg { width: 18px; height: 18px; }
  /* Micro et envoi, à droite, un peu plus grands que le trombone. */
  .attach.mic, #send { width: 34px; height: 34px; }
  .attach.mic svg { width: 19px; height: 19px; }
  #send svg { width: 17px; height: 17px; }
  .provider-pick { height: 32px; padding: 0 11px; font-size: 13px; }
}

/* Double authentification : QR code, clé à saisir, codes de secours */
.totp-enroll { display: grid; gap: 12px; }
.totp-enroll p { margin: 0; }
.totp-qr { width: 196px; height: 196px; image-rendering: pixelated; border-radius: 8px; background: #fff; padding: 8px; justify-self: center; }
.totp-secret { font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
/* « Ouvrir dans l'application d'authentification » : discret sous le QR code à la souris ; au toucher
   (le téléphone qui affiche la page porte l'application), en premier, pleine largeur. */
.totp-open { justify-self: center; }
/* Dans les Paramètres : pastille gris doux, comme « Gérer » ou « Modifier » des cartes. */
.settings-body .totp-open { border-radius: 999px; font-size: 13px; font-weight: 500; background: color-mix(in srgb, var(--t1) 7%, transparent); }
.settings-body .totp-open:hover { background: color-mix(in srgb, var(--t1) 12%, transparent); }
.totp-enroll .totp-copy, #totp-recovery { padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.totp-copy { margin-left: 4px; }
.totp-copied { margin-left: 6px; font-size: 13px; }
@media (pointer: coarse) {
  .totp-intro { order: -2; }
  .totp-open { order: -1; justify-self: stretch; }
  :is(#totp-form, .totp-enroll) button:not(.link, .code-submit) { min-height: 44px; }
  /* Liens « Copier la clé », « Code de secours », « Retour » : zone de toucher de 44 px, sans décaler le texte. */
  :is(#totp-form, .totp-enroll, #totp-setup-card) button.link { padding-block: 12px; margin-block: -12px; }
}
.recovery-codes { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; border: 1px solid var(--line); border-radius: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 14px; }
#totp-account-box:not([hidden]) { padding-top: 14px; border-top: 1px solid var(--line); }
#totp-card { gap: 10px; }
#totp-card > p { margin: 0; }
.activity-error { margin-left: 8px; font-size: 12px; color: var(--error); opacity: .8; }

/* Transparence (AI Act, article 50) : l'utilisateur sait toujours qu'il échange avec une IA.
   Mention sous la zone de saisie et sur l'écran de connexion ; chaque réponse porte aussi
   data-ai-generated (lisible par machine, app.js). */
.ai-notice { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--t2); text-align: center; }
.composer-note { margin-top: 6px; font-size: 11px; line-height: 15px; color: color-mix(in srgb, var(--t2) 75%, transparent); }
@media (max-width: 720px) { .composer-note { margin-top: 7px; font-size: 10px; line-height: 13px; } }

/* Écran tactile : des cibles d'au moins 44 × 44 px (recommandation Apple, WCAG 2.5.5). Les petits
   boutons gardent leur dessin : leur zone de toucher déborde autour d'eux, invisible (::before
   centré, jamais plus petit que le bouton). Mêmes règles pour apps.css (panneau d'une app). */
@media (pointer: coarse) {
  :is(.burger, .attach, #send, .provider-pick, .pill-button, .connector button.secondary, .icon-btn) { position: relative; }
  :is(.burger, .attach, #send, .provider-pick, .pill-button, .connector button.secondary, .icon-btn, .segmented button, .switch-track)::before {
    content: "";
    position: absolute;
    inset: min(0px, calc(50% - 22px));
  }
  /* Retirer une pièce jointe : la croix reste petite, le bouton prend toute la hauteur de la pastille. */
  .chip { min-height: 44px; }
  .chip-remove { width: 44px; height: 44px; margin: -12px -8px -12px -8px; }
  /* Menu « ⋮ » d'un fichier : même icône, zone agrandie autour (le bouton n'a pas de fond). */
  /* Lignes repliables (outil, « Détails techniques », « Annuler » de la dictée) : la zone de toucher
     s'étend au-dessus et au-dessous du texte, sans décaler le fil. */
  .activity > summary, .action-group-head, .confirm-more { padding-block: 12px; margin-block: -12px; }
  .dictation .link { padding-block: 12px; margin-block: -12px; }
  .confirm .row button { min-height: 44px; }
  .menu-item { min-height: 44px; }
  /* Zone de saisie : 44 px de haut pour une ligne (40 px à la souris). */
  .composer textarea { padding-block: 6px 14px; }
}

/* Clavier virtuel (mobile.js). Chrome Android réduit la page au-dessus du clavier (balise viewport) ;
   Safari iOS la recouvre. Tant qu'il la recouvre (classe « kbd »), Clik'Pilote et ses fenêtres
   tiennent dans la zone visible (--vvh, décalée de --vvt si Safari l'a fait glisser) : la zone de
   saisie reste au-dessus du clavier, le bouton menu en haut, et la page ne glisse plus. */
:root.kbd, :root.kbd body { height: var(--vvh); overflow: hidden; }
:root.kbd .app { position: relative; top: var(--vvt); height: var(--vvh); }
:root.kbd dialog:modal { top: var(--vvt); bottom: calc(100% - var(--vvt) - var(--vvh)); max-height: calc(var(--vvh) - 32px); }
:root.kbd dialog.app-view { height: var(--vvh); max-height: none; }
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) {
  :root.kbd dialog.settings { height: var(--vvh); max-height: none; }
  :root.kbd dialog.app-sheet { max-height: calc(var(--vvh) * .9); }
  /* Fichiers joints de la zone de saisie : une seule ligne, qui défile, pour laisser la place au texte. */
  #attachments { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #attachments .chip { flex: none; }
}
/* Écran tactile : la zone de saisie grandit au plus jusqu'au tiers de la hauteur visible (clavier
   ouvert : 278 px sur un iPhone SE, 200 px en paysage), jamais au-delà de 200 px. */
@media (pointer: coarse) {
  .composer textarea { max-height: min(200px, calc(var(--vvh, 100vh) / 3)); }
}
/* Pas même une ligne de place sous le bouton menu (paysage, clavier ouvert, fichiers joints) : bouton
   et bandeau s'effacent pendant la frappe, sans rien déplacer (mobile.js). */
:root.kbd-tight :is(.topbar, .tasks-peek, .chat > .notice) { visibility: hidden; }

/* --- Composants maison (ui.js) --- */
/* Liste de choix (selectEl), à la place du <select> du navigateur. */
.select { position: relative; min-width: 0; }
.select-button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: 8px; background: var(--bg2); color: var(--t1); font: inherit; text-align: left;
}
:where(.select-button:not(:disabled)):hover { background: color-mix(in srgb, var(--t1) 7%, var(--bg2)); }
.select-button::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: -4px;
  border-right: 1.5px solid var(--t2); border-bottom: 1.5px solid var(--t2); transform: rotate(45deg);
}
.select-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-menu { min-width: max(100%, 180px); right: auto; }
.select-menu.align-right { left: auto; right: 0; }
/* Case à cocher (checkEl) : un bouton, jamais la case du navigateur. */
.check-box {
  display: grid; place-content: center; flex-shrink: 0; width: 18px; height: 18px; padding: 0;
  border: 1.5px solid color-mix(in srgb, var(--t1) 35%, transparent); border-radius: 5px; background: var(--surface);
}
:where(.check-box:not(:disabled)):hover { background: var(--surface); }
.check-box[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.check-box[aria-checked="true"]::after {
  content: ""; width: 5px; height: 9px; margin-top: -2px;
  border-right: 2px solid var(--accent-fg); border-bottom: 2px solid var(--accent-fg); transform: rotate(45deg);
}
:where(.check-box[aria-checked="true"]:not(:disabled)):hover { background: var(--accent); }
.check-box:focus-visible { outline: 2px solid var(--t2); outline-offset: 2px; }
.check.covered .check-box { opacity: .5; }
/* Champ dont le contrôle n'est pas un <input> (liste maison) : même mise en page qu'un <label>. */
.field-col { display: grid; gap: 4px; font-size: 14px; color: var(--t2); }
/* Confirmation (askConfirm). */
dialog.ask {
  width: min(400px, calc(100% - 32px)); padding: 20px; border: 1px solid var(--surface-border);
  border-radius: 14px; background: var(--surface); color: var(--t1); box-shadow: var(--surface-shadow);
}
.ask-text { margin: 0 0 18px; line-height: 1.5; overflow-wrap: anywhere; }
.ask-actions { justify-content: flex-end; gap: 8px; }
.ask button.danger { background: var(--error); color: #fff; }

/* Compte : lecture d'abord, champs après « Modifier ». */
.account-actions { display: flex; align-items: center; gap: 8px; }
.account-card { gap: 12px; }
.settings-card-head > :first-child { align-self: flex-start; }
/* Mêmes cases en lecture et en modification : seule la valeur devient un champ, à la même place. */
.account-view { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 20px; }
.account-cell { display: grid; grid-template-rows: auto 32px; align-items: center; gap: 2px; min-width: 0; font-size: 14px; color: var(--t1); }
.account-label { align-self: end; font-size: 12.5px; color: var(--t2); white-space: nowrap; }
.account-cell > span:not(.account-label) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-card .account-cell input { height: 32px; padding: 0 10px; font-size: 14px; min-width: 0; }
.account-cell .link { padding: 0; font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }
/* Passage lecture ↔ modification : ce qui apparaît glisse et se fond, sans à-coup. */
@keyframes swap-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* backwards, pas both : une fois jouée, l'animation ne reste pas appliquée (Safari iOS gardait la fiche
   modifiée sur un calque à part, et un geste commencé dessus ne faisait plus défiler la page). */
.swap-in { animation: swap-in .22s ease backwards; }
@media (prefers-reduced-motion: reduce) { .swap-in { animation: none; } }
/* Activation dans Compte : QR code à gauche, étapes à droite, sans pleine largeur. */
#totp-card .totp-enroll { grid-template-columns: 156px minmax(0, 1fr); gap: 0 20px; grid-template-rows: auto minmax(10px, 1fr) auto minmax(10px, 1fr) auto; align-items: start; }
/* Consigne, clé et champ du code répartis à intervalles égaux sur la hauteur du QR code. */
#totp-card .totp-intro { grid-row: 1; }
#totp-card .totp-key { grid-row: 3; }
#totp-card .code-label, #totp-card .totp-enroll > label:not(.code-label) { grid-row: 5; }
#totp-card .totp-enroll:has(input[name="current"]) { grid-template-rows: auto minmax(10px, 1fr) auto minmax(10px, 1fr) auto 10px auto; }
#totp-card .totp-enroll:has(input[name="current"]) .code-label { grid-row: 7; }
#totp-card .totp-enroll > .error { margin-top: 10px; }
#totp-card .totp-enroll > * { grid-column: 2; }
#totp-card .totp-qr { grid-column: 1; grid-row: 1 / -1; width: 156px; height: 156px; padding: 6px; justify-self: start; }
#totp-card .totp-enroll label { display: grid; gap: 6px; }
#totp-card .totp-open { justify-self: start; }
@media (pointer: fine) { #totp-card .totp-open { display: none; } }
@media (max-width: 560px) {
  #totp-card .totp-enroll, #totp-card .totp-enroll:has(input[name="current"]) { grid-template-columns: 1fr; grid-template-rows: none; gap: 10px; }
  #totp-card .totp-enroll .code-label { grid-row: auto; }
  #totp-card .totp-enroll > *, #totp-card .totp-qr { grid-column: 1; grid-row: auto; }
  #totp-card .totp-qr { justify-self: center; }
  #totp-card .totp-enroll label { max-width: none; }
}
/* Champ du code de double authentification : arrondi, « Activer » dedans à droite. */
.code-field { position: relative; display: block; }
.settings-body .code-field input, .code-field input { display: block; margin: 0; width: 100%; height: 40px; box-sizing: border-box; border-radius: 999px; padding: 0 92px 0 16px; }
.settings-body .code-field button.code-submit[type="submit"], .code-field .code-submit { position: absolute; top: 4px; bottom: 4px; right: 4px; height: auto; min-height: 0; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 500; }
/* Profil : « Modifier » glisse à gauche et devient « Annuler » ; la place s'ouvre à sa droite et
   « Enregistrer » y apparaît en fondu, une fois le glissement presque fini. */
.save-slot { display: grid; grid-template-columns: 0fr; margin-left: -8px; overflow: hidden; pointer-events: none;
  transition: grid-template-columns .3s cubic-bezier(.2, .8, .2, 1), margin-left .3s cubic-bezier(.2, .8, .2, 1); }
.editing .save-slot { grid-template-columns: 1fr; margin-left: 0; pointer-events: auto; }
.settings-body .save-slot > button[type="submit"] { height: 32px; min-width: 0; padding: 0; overflow: hidden; opacity: 0;
  transition: padding .3s cubic-bezier(.2, .8, .2, 1), opacity .1s ease; }
.settings-body .editing .save-slot > button[type="submit"] { padding: 0 16px; opacity: 1;
  transition: padding .3s cubic-bezier(.2, .8, .2, 1), opacity .25s ease .18s; }
@media (prefers-reduced-motion: reduce) { .save-slot, .settings-body .save-slot > button[type="submit"] { transition: none !important; } }
/* Aperçu du logo : un clic dessus ouvre le choix du fichier. */
button.logo-preview { cursor: pointer; color: var(--t2); transition: border-color .15s ease, background .15s ease; }
button.logo-preview:hover { border-color: color-mix(in srgb, var(--t1) 25%, transparent); background: color-mix(in srgb, var(--t1) 5%, var(--raised)); }
.settings-body button.logo-preview .muted { margin: 0; font-size: 12px; }

/* Barres de défilement : fines, arrondies, aux couleurs de l'app (clair et sombre), partout.
   Chrome, Edge et Safari : ::-webkit-scrollbar (ne pas poser scrollbar-width ni scrollbar-color
   ailleurs : Chrome les préférerait et reviendrait à sa barre). Firefox : couleur et finesse. */
:root { --scroll: color-mix(in srgb, var(--t1) 16%, transparent); --scroll-hover: color-mix(in srgb, var(--t1) 32%, transparent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--scroll) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-hover); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
}

/* Rechargement sur l'adresse d'une page (theme.js, router.js) : le fil apparaît en fondu une fois
   la page ouverte, sans montrer l'accueil avant. Le panneau des tâches aussi : une page (Mes fichiers,
   Applications) le cache, il ne doit pas paraître le temps qu'elle s'ouvre. */
.chat > :is(#empty, .messages, .apps-home, .composer, .tasks-side, .tasks-resize, .tasks-peek) { transition: opacity .18s ease; }
.routing .chat > :is(#empty, .messages, .apps-home, .composer, .tasks-side, .tasks-resize, .tasks-peek) { opacity: 0; transition: none; pointer-events: none; } /* la zone de saisie aussi : son invitation dépend de la page (« Écrivez à Léa… ») */

/* Messages retrouvés dans les conversations (outils historique et conversations, historyCard) :
   une ligne par message, qui et quand en tête, l'extrait sur deux lignes au plus. */
.history-list { list-style: none; margin: 0; padding: 4px 16px; display: grid; }
.history-item { display: grid; gap: 3px; padding: 10px 0; min-width: 0; }
.history-item + .history-item { border-top: 1px solid var(--line); }
.history-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13px; }
.history-head strong { font-weight: 600; }
.history-item.mine .history-head strong { color: var(--t2); }
.history-head .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-head time { margin-left: auto; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.history-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--t1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.history-more { margin: 0; padding: 0 16px 12px; font-size: 12.5px; }
/* Résultats Atera (ateraCard) : étiquettes sous le nom, fiche d'une machine en tableau. */
.atera-card .history-item .tool-row-tags { margin-top: 2px; }
.atera-fields { margin: 0; padding: 12px 16px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; }
.atera-fields dt { color: var(--t2); }
.atera-fields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .atera-fields { grid-template-columns: minmax(0, 1fr); gap: 2px; } .atera-fields dd { margin-bottom: 6px; } }
/* Liste de mails (mailListCard) : pastille des non lus, expéditeur en gras. */
.mail-unread { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--t1); align-self: center; }
.mail-card .history-item:not(.unread) .history-head strong { font-weight: 500; }
/* Mail ouvert (mailCard). */
.mail-open { padding: 16px 18px; display: grid; gap: 6px; }
.mail-subject { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.mail-meta { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.mail-meta time { margin-left: auto; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mail-to { margin: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.mail-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.mail-att { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--bg2); color: var(--t1); }
.mail-body { margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto; }
/* Fichiers enregistrés par un outil (savedFilesCard) : leurs cartes, côte à côte. */
.saved-files { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }

/* Fluidité du choix du fournisseur (smooth.js, Smooth) : la pastille glisse vers sa nouvelle
   largeur, ses couleurs passent en fondu, le nom et le logo arrivent d'un léger glissé, le menu
   s'ouvre et se referme en douceur. */
:root { --ease-out-soft: cubic-bezier(.22, 1, .36, 1); }
.provider-pick {
  transition: width .34s var(--ease-out-soft), background-color .3s var(--ease-out-soft), color .3s var(--ease-out-soft), transform .16s var(--ease-out-soft);
}
.provider-pick:active { transform: scale(.96); }
.provider-pick.morphing { overflow: hidden; white-space: nowrap; }
#provider-name { display: inline-block; }
.text-in { animation: text-in .3s var(--ease-out-soft); }
@keyframes text-in { from { opacity: 0; transform: translateY(3px); } }
@keyframes menu-up { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.combo-menu.provider-menu.closing { animation: menu-down .16s ease-in forwards; pointer-events: none; }
@keyframes menu-down { to { opacity: 0; transform: translateY(4px) scale(.98); } }
.provider-menu .combo-item { transition: background-color .15s ease; }
@media (prefers-reduced-motion: reduce) {
  .provider-pick, .provider-menu .combo-item { transition: none; }
  .provider-pick:active { transform: none; }
  .text-in, .combo-menu.provider-menu, .combo-menu.provider-menu.closing { animation: none; }
}

/* Résultats d'une recherche web : le titre en lien, le site à côté. */
.web-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--t1); text-decoration: none; }
.web-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Squelettes de chargement (app.js, skeleton) : des barres à la forme du contenu attendu, avec un
   reflet qui les traverse. Largeurs variées d'une ligne à l'autre (--i), pour un air naturel. */
:root { --skel: color-mix(in srgb, var(--t1) 7%, transparent); --skel-hi: color-mix(in srgb, var(--t1) 13%, transparent); }
/* Le reflet glisse (transform, sur la carte graphique) au lieu de déplacer le dégradé du fond, qui
   redessinait toute la surface à chaque image. */
.skel {
  position: relative; display: block; height: 12px; overflow: hidden; border-radius: 6px;
  background: var(--skel);
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 20%, var(--skel-hi) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: skel-sweep 1.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes skel-sweep { to { transform: translateX(100%); } }
@keyframes skel-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skeleton { pointer-events: none; animation: skel-in .25s ease both; }
@keyframes skel-in { from { opacity: 0; } }
.skel-line { width: 80%; width: calc(88% - mod(var(--i, 0) * 17, 40) * 1%); } /* sans mod() : 80 % */
.skel-line.short { width: calc(46% - mod(var(--i, 0) * 11, 20) * 1%); }
.skel-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; }
.skel-icon.small { width: 20px; height: 20px; border-radius: 5px; }
.skel-icon.round { border-radius: 50%; }
.skel-lines { display: grid; gap: 9px; flex: 1; min-width: 0; }
.skel-conv { list-style: none; padding: 10px 12px; }
.skel-card { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; background: var(--raised); border: 1px solid color-mix(in srgb, var(--t1) 8%, transparent); }
.skel-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.skel-bubble { display: grid; gap: 9px; width: min(760px, 100%); margin: 0 auto; }
/* Calées en bas du fil, comme le vrai fil qui s'affiche calé en bas : pas de saut du haut vers le bas. */
.skel-bubble:first-child { margin-top: auto; }
.skel-bubble.mine { justify-items: end; }
.skel-bubble.mine .skel-line { width: min(260px, 50%); height: 40px; border-radius: 12px; }
.skel-bubble.theirs .skel-line { width: calc(92% - mod(var(--i, 0) * 13, 30) * 1%); }
.skel-bubble.theirs .skel-line.short { width: 40%; }
/* Ce qui remplace les squelettes arrive en fondu, l'un après l'autre (app.js, fadeIn). */
.list-in { animation: list-in .32s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(min(var(--i, 0), 10) * 25ms); }
@keyframes list-in { from { opacity: 0; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .skel, .skel::after, .skeleton, .list-in { animation: none; } }

/* Logo de l'entreprise : un aperçu par thème (Paramètres, Entreprise), sur un fond de sa couleur. */
.logo-edit { flex-wrap: wrap; align-items: flex-start; } /* les deux aperçus à la même hauteur, « Retirer » ou non */
.logo-slot { display: grid; justify-items: start; gap: 6px; }
.logo-slot-label { font-size: 12.5px; color: var(--t2); }
.logo-slot .logo-remove { padding: 0; font-size: 13px; }
.logo-preview.dark { background: #1e1e1e; border-color: rgb(255 255 255 / .14); color: rgb(255 255 255 / .6); }
button.logo-preview.dark:hover { background: #262626; border-color: rgb(255 255 255 / .25); }
.settings-body button.logo-preview.dark .muted { color: rgb(255 255 255 / .6); }
.logo-slot[data-logo="light"] .logo-preview { background: #fff; border-color: rgb(0 0 0 / .12); color: rgb(0 0 0 / .55); }
.logo-slot[data-logo="light"] button.logo-preview:hover { background: #f4f4f4; border-color: rgb(0 0 0 / .22); }
.settings-body .logo-slot[data-logo="light"] button.logo-preview .muted { color: rgb(0 0 0 / .55); }
/* Image glissée au-dessus d'un aperçu : la tuile qui la recevra s'éclaire. */
.logo-preview.drop-over { outline: 2px dashed var(--t1); outline-offset: 3px; }

/* Carte d'un fournisseur (app.js, providerCard) : le reste replié sous « Plus d'options » (prix,
   secours, dictée), dans la carte. */
.connector-form .provider-more { margin-top: 0; }
.provider-more-body { display: grid; gap: 14px; padding: 0 16px 16px; }

/* Sous-pages d'une page des Paramètres : celle choisie arrive en glissant (app.js). */
.sub-pane { display: grid; gap: 16px; align-content: start; }
.settings-body .sub-pane > .muted:first-child { margin-top: 0; }
.sub-pane:not([hidden]) { animation: pane-in .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes pane-in { from { opacity: 0; transform: translateX(var(--from, 0)); } }
@media (prefers-reduced-motion: reduce) { .sub-pane:not([hidden]) { animation: none; } }

/* Procédure lue par l'IA (app.js, procedureResultCard) : titre avec l'icône, étapes mises en forme. */
.procedure-card .tool-card-head { display: flex; align-items: center; gap: 8px; }
.procedure-card-icon { display: inline-flex; color: var(--t2); }
.procedure-card-icon svg { width: 16px; height: 16px; stroke-width: 1.8; }
.procedure-card-body { padding: 10px 14px 12px; font-size: 14px; line-height: 1.55; }
.procedure-card-body > :first-child { margin-top: 0; }
.procedure-card-body > :last-child { margin-bottom: 0; }
.procedure-card-body :is(p, ul, ol) { margin: 0 0 8px; }
.procedure-card-body :is(ul, ol) { padding-left: 20px; }

/* Charte graphique (Paramètres, Entreprise) : réglages à gauche, aperçu de deux premières pages à droite. */
.design-actions { gap: 8px; flex-wrap: wrap; }
.charte-card .design-pop { width: min(440px, calc(100vw - 64px)); }
.charte-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 4px; }
.charte-fields { display: grid; gap: 12px; min-width: 0; }
.charte-field { display: grid; gap: 6px; min-width: 0; }
.charte-field .account-label { align-self: start; }
.charte-color { position: relative; display: block; }
.charte-color input { width: 100%; padding-left: 40px; font-variant-numeric: tabular-nums; }
.charte-swatch { position: absolute; left: 10px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 6px; border: 1px solid var(--line); pointer-events: none; transition: background .2s ease; }
/* Couleur secondaire automatique : la principale assombrie, montrée hachurée. */
.charte-swatch.auto { background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(255, 255, 255, .35) 3px 5px) !important; }
.charte-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 180px; border-radius: 12px; transition: opacity .25s ease; }
.charte-preview img { display: block; width: 100%; aspect-ratio: 210 / 297; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; }

.charte-preview.loading:empty { opacity: 1; background: linear-gradient(90deg, var(--skel) 30%, var(--skel-hi) 50%, var(--skel) 70%) 0 0 / 300% 100%; animation: skel-shine 1.5s ease-in-out infinite; aspect-ratio: 420 / 297; }
.charte-foot { display: flex; justify-content: flex-end; gap: 8px; }
/* Rien à enregistrer : les boutons attendent un changement. */
.charte-card:not(.dirty) .charte-foot button { opacity: .45; pointer-events: none; }
.charte-models-title { margin: 28px 0 4px; font-size: 15px; }
@media (max-width: 640px) { .charte-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .charte-preview, .charte-swatch { transition: none; } .charte-preview.loading:empty { animation: none; } }

/* Générer une charte : le formulaire sous les boutons, le choix du logo sur une ligne. */
.design-actions { position: relative; }
.design-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; width: min(440px, 100%); display: grid; gap: 10px; padding: 14px; border: 1px solid var(--surface-border); border-radius: 16px; background: var(--surface); box-shadow: var(--surface-shadow); transform-origin: calc(100% - 60px) 0; }
.design-pop[hidden] { display: none; }
.design-pop.in { animation: plan-pop-in .22s cubic-bezier(.2, .8, .2, 1); }
.design-pop textarea { resize: none; min-height: 0; }
.design-pop input[name="url"] { height: 38px; }
.design-pop-foot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.design-pop-foot #design-logo-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-pop :is(textarea, input, .design-pop-foot > :not(#design-generate-go)) { transition: opacity .3s ease; }
.design-pop.busy :is(textarea, input, #design-logo-button, #design-logo-name) { opacity: .4; pointer-events: none; }
.design-pop.busy #design-generate-cancel { opacity: 0; pointer-events: none; }
#model-list .just-added { animation: design-landed 1.8s ease; }
@keyframes design-landed { 0%, 40% { box-shadow: 0 0 0 2px var(--t1); background: color-mix(in srgb, var(--t1) 8%, var(--raised)); } }
@media (prefers-reduced-motion: reduce) { .design-pop.in, #model-list .just-added { animation: none; } }
/* L'animation de génération : repliée au repos, elle se déplie quand l'IA travaille. */
.design-forge { display: grid; gap: 12px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s ease, opacity .4s ease; }
.design-pop.busy .design-forge { max-height: 120px; opacity: 1; }
.design-forge-swatches { display: flex; gap: 8px; justify-content: center; padding-top: 10px; }
.design-forge-swatches i { width: 20px; height: 20px; border-radius: 50%; background: #e4572e; animation: forge-wave 1.6s ease-in-out infinite, forge-hue 8s linear infinite; }
.design-forge-swatches i:nth-child(2) { background: #f3a712; animation-delay: .12s, 0s; }
.design-forge-swatches i:nth-child(3) { background: #29bf12; animation-delay: .24s, 0s; }
.design-forge-swatches i:nth-child(4) { background: #2e86de; animation-delay: .36s, 0s; }
.design-forge-swatches i:nth-child(5) { background: #8e44ad; animation-delay: .48s, 0s; }
@keyframes forge-wave { 0%, 100% { transform: translateY(0) scale(.8); } 50% { transform: translateY(-8px) scale(1); } }
@keyframes forge-hue { to { filter: hue-rotate(360deg); } }
.design-forge-bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.design-forge-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #e4572e, #f3a712, #29bf12, #2e86de, #8e44ad); }
.design-pop.busy .design-forge-bar span { animation: forge-fill 110s cubic-bezier(.1, .6, .3, 1) forwards; }
@keyframes forge-fill { to { width: 95%; } }
.design-forge-step { margin: 0; text-align: center; font-size: 13px; color: var(--t2); }
.design-forge-step.in { animation: forge-step .4s ease; }
@keyframes forge-step { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .design-forge-swatches i, .design-forge-step.in, .design-pop.busy .design-forge-bar span { animation: none; } .design-forge { transition: none; } }

/* Guide d'un format (excel_help, word_help, pdf_help) : ses éléments en étiquettes. */
.format-guide { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.format-guide-tag { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--t1) 7%, transparent); font-size: 12.5px; color: var(--t1); }

/* Modèles de document (models.js) : par catégorie, une ligne par modèle, dépliable ; la bulle
   « Créer un modèle » reprend celle de « Générer une charte ». */
.model-list { display: grid; gap: 22px; }
.model-group { display: grid; gap: 10px; }
.model-group h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--t2); }
.model-group[hidden], .model-card[hidden] { display: none; }
.model-search { margin-right: auto; max-width: 320px; }
.design-pop-foot .hint { flex: 1; min-width: 0; margin: 0; }
.design-pop.busy #model-new-cancel { opacity: 0; pointer-events: none; }
.model-rows { display: grid; border-radius: 14px; background: var(--raised); border: 1px solid color-mix(in srgb, var(--t1) 8%, transparent); overflow: hidden; }
.model-card + .model-card { border-top: 1px solid var(--line); }
.model-card.just-added { animation: design-landed 1.8s ease; }
.model-line { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; transition: background .15s; }
.model-line:hover { background: color-mix(in srgb, var(--t1) 4%, transparent); }
.model-line:focus-visible { outline: 2px solid var(--t1); outline-offset: -2px; }
.model-line .switch { flex: none; }
.model-info { flex: 1; min-width: 0; display: grid; gap: 1px; }
.model-info strong { font-size: 14px; font-weight: 600; color: var(--t1); }
.model-info span { font-size: 12.5px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-card.off .model-info { opacity: .45; }
.model-tag { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; color: var(--t2); background: color-mix(in srgb, var(--t1) 7%, transparent); }
.model-chevron { flex: none; display: inline-flex; width: 16px; height: 16px; color: var(--t2); transition: transform .2s ease; }
.model-chevron svg { width: 100%; height: 100%; }
.model-card.open .model-chevron { transform: rotate(90deg); }

/* Le détail déplié : un encadré, une partie titrée par usage, le pied (retour à l'origine, suppression). */
.model-detail { display: grid; gap: 16px; margin: 0 14px 14px; padding: 14px 16px 12px; border-radius: 12px; background: var(--bg); }
.model-detail:not([hidden]) { animation: card-open .2s ease; }
.model-part { display: grid; gap: 8px; }
.model-part h5 { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t2); }
.model-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.model-files { display: flex; gap: 8px; }
.model-foot .pill-button { display: inline-flex; align-items: center; gap: 7px; }
.model-foot .pill-button svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Retour à l'origine, suppression : discrets, à droite ; la suppression rougit au survol. */
.model-foot .pill-button.quiet { background: transparent; color: var(--t2); }
.model-foot .pill-button.quiet:hover { color: var(--t1); background: var(--raised); }
.model-foot .pill-button.quiet.danger:hover { color: var(--error); background: color-mix(in srgb, var(--error) 12%, transparent); }
.model-foot:empty { display: none; }

/* Aperçu : les vraies pages, côte à côte ; un clic ouvre le PDF. */
.model-pages { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.model-page { flex: none; width: 150px; height: 212px; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 6px 16px rgb(0 0 0 / .12); cursor: zoom-in; transition: transform .15s ease; object-fit: cover; }
.model-page:hover { transform: translateY(-2px); }
.model-page.skeleton { cursor: default; background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--line) 40%, transparent), var(--line)); background-size: 200% 100%; animation: model-skel 1.2s linear infinite; }
@keyframes model-skel { to { background-position: -200% 0; } }

/* Modifier avec l'IA : une pilule autour du bouton rond, le contour des autres champs au focus. */
.model-composer { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 18px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s; }
.model-composer:focus-within { border-color: transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--t1) 12%, transparent); }
.settings-body .model-composer input { flex: 1; min-width: 0; height: 30px; padding: 0; border: 0; background: none; box-shadow: none; font-size: 14px; }
.model-send { flex: none; width: 32px; height: 32px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--t1); color: var(--bg); border: 0; transition: transform .15s ease, opacity .15s; }
.model-send svg { width: 16px; height: 16px; }
.model-send:hover { transform: translateY(-1px); }
.model-send:disabled { opacity: .5; }

/* « Garder cette mise en page ? » sous un PDF du chat (models.js). */
.model-ai-icon { display: inline-flex; width: 16px; height: 16px; }
.model-ai-icon svg { width: 100%; height: 100%; }
.tpl-offer { display: grid; gap: 8px; max-width: 760px; width: 100%; box-sizing: border-box; margin: 10px auto 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; animation: card-open .25s ease; transition: opacity .18s, transform .18s; }
.tpl-offer p { margin: 0; color: var(--t2); line-height: 1.45; }
.tpl-offer-head { display: flex; align-items: center; gap: 8px; color: var(--t1); }
.tpl-offer.busy .tpl-row { opacity: .4; pointer-events: none; }
.tpl-offer.done { background: color-mix(in srgb, #1f9d55 8%, var(--surface)); border-color: color-mix(in srgb, #1f9d55 30%, var(--line)); }
.tpl-offer.done .model-ai-icon { color: #1f9d55; }
.tpl-offer.leaving { opacity: 0; transform: translateY(-4px); }
.tpl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

@media (max-width: 600px) { .model-detail { margin: 0 8px 10px; padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .model-detail:not([hidden]), .model-page.skeleton, .tpl-offer { animation: none; } .tpl-offer { transition: none; } }

/* L'IA retouche une mise en page (models.js) : une carte à bordure lumineuse qui tourne, une étoile
   qui scintille, les étapes qui se cochent, une barre fine ; les pages de l'aperçu pulsent. */
@property --mw-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.model-work {
  position: relative; display: grid; gap: 14px; padding: 16px 18px; border-radius: 18px;
  background: linear-gradient(var(--raised), var(--raised)) padding-box,
    conic-gradient(from var(--mw-angle), #8e44ad, #2e86de, #29bf12, #f3a712, #e4572e, #8e44ad) border-box;
  border: 1.5px solid transparent;
  animation: mw-in .35s cubic-bezier(.2, .8, .2, 1), mw-spin 3s linear infinite;
}
@keyframes mw-spin { to { --mw-angle: 360deg; } }
@keyframes mw-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.mw-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mw-spark { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #8e44ad, #2e86de); box-shadow: 0 4px 14px rgb(46 134 222 / .35); }
.mw-spark svg { width: 18px; height: 18px; animation: mw-twinkle 1.8s ease-in-out infinite; }
@keyframes mw-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(12deg); } }
.mw-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mw-title strong { font-size: 14px; color: var(--t1); }
.mw-ask { font-size: 13px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-stop { flex: none; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--t2); font-size: 12.5px; transition: color .15s, border-color .15s, background .15s; }
.mw-stop:hover { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent); background: color-mix(in srgb, var(--error) 6%, transparent); }
.mw-steps { list-style: none; margin: 0; padding: 0 0 0 48px; display: grid; gap: 8px; }
.mw-steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t2); opacity: .45; transition: opacity .3s, color .3s; }
.mw-steps li.active, .mw-steps li.done { opacity: 1; }
.mw-steps li.active { color: var(--t1); font-weight: 500; }
.mw-dot { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; }
.mw-steps li.active .mw-dot { border-color: #2e86de; border-right-color: transparent; animation: round-spin .8s linear infinite; }
.mw-steps li.done .mw-dot { border-color: #1f9d55; background: #1f9d55; }
.mw-steps li.done .mw-dot::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.mw-bar { height: 3px; margin-left: 48px; border-radius: 3px; background: var(--line); overflow: hidden; }
.mw-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #8e44ad, #2e86de, #29bf12); animation: forge-fill 90s cubic-bezier(.1, .6, .3, 1) forwards; }
.model-pages.reworking .model-page { animation: mw-pulse 1.8s ease-in-out infinite; pointer-events: none; }
.model-pages.reworking .model-page:nth-child(2) { animation-delay: .2s; }
.model-pages.reworking .model-page:nth-child(3) { animation-delay: .4s; }
@keyframes mw-pulse { 0%, 100% { opacity: 1; filter: none; } 50% { opacity: .55; filter: blur(1.5px) saturate(.6); } }
img.model-page { animation: mw-page-in .45s ease both; }
img.model-page:nth-child(2) { animation-delay: .06s; }
img.model-page:nth-child(3) { animation-delay: .12s; }
@keyframes mw-page-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .model-work, .mw-spark svg, .mw-steps li.active .mw-dot, .mw-bar span, .model-pages.reworking .model-page, img.model-page { animation: none; } }
/* Un résultat d'outil sans espace où couper (JSON, chemin long) passe à la ligne au lieu de déborder. */
.tool-card > p { overflow-wrap: anywhere; }
.tool-card.error > p { max-height: 240px; overflow-y: auto; white-space: pre-wrap; }

/* Sélecteur de couleur (charte graphique) : zone teinte et luminosité, barre des teintes, couleurs prêtes. */
.charte-color { cursor: pointer; }
.cp-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; width: 236px; display: grid; gap: 10px; padding: 12px; border: 1px solid var(--surface-border); border-radius: 14px; background: var(--surface); box-shadow: var(--surface-shadow); cursor: default; }
.cp-pop[hidden] { display: none; }
.cp-area { position: relative; height: 140px; border-radius: 10px; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--hue, red)); touch-action: none; cursor: crosshair; }
.cp-hue { position: relative; height: 14px; border-radius: 7px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); touch-action: none; cursor: pointer; }
.cp-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none; }
.cp-hue .cp-dot { top: 50%; }
.cp-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cp-preset { aspect-ratio: 1; padding: 0; border-radius: 7px; border: 1px solid var(--line); cursor: pointer; }
.cp-preset:hover { transform: scale(1.08); }
/* Le sélecteur se déplie depuis le champ. */
.cp-pop { transform-origin: 24px 0; animation: plan-pop-in .2s cubic-bezier(.2, .8, .2, 1); }
.cp-pop.closing { pointer-events: none; }
/* Aperçu de la charte en recomposition : un reflet balaie les pages, qui s'estompent ; les nouvelles
   arrivent en fondu. */
.charte-preview { position: relative; }
.charte-preview img { transition: opacity .3s ease, filter .3s ease; animation: charte-page-in .45s cubic-bezier(.2, .8, .2, 1); }
.charte-preview.loading img { opacity: .45; filter: blur(1.5px); }
.charte-preview.loading:not(:empty)::after { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%) 0 0 / 300% 100%; animation: skel-shine 1.1s ease-in-out infinite; }
@keyframes charte-page-in { from { opacity: 0; transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { .cp-pop, .charte-preview img, .charte-preview.loading:not(:empty)::after { animation: none; } }
/* Angles : le sélecteur prend la largeur des champs, chaque choix centré dans sa case. */
.charte-field .segmented { width: 100%; }
.charte-field .segmented button { padding: 7px 6px; text-align: center; white-space: nowrap; }

/* Visionneuse (viewPages) : les pages d'un document en grand, par-dessus les réglages. */
dialog.viewer { width: min(860px, calc(100vw - 32px)); height: calc(100vh - 48px); max-height: none; padding: 0; border: 1px solid var(--surface-border); border-radius: 18px;
  background: var(--bg2); color: var(--t1); box-shadow: var(--surface-shadow); display: flex; flex-direction: column; overflow: hidden; animation: viewer-in .22s cubic-bezier(.2, .8, .2, 1); }
dialog.viewer:not([open]) { display: none; }
dialog.viewer::backdrop { background: rgb(0 0 0 / .55); animation: viewer-fade .2s ease; }
.viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--line); }
.viewer-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-actions { display: flex; align-items: center; gap: 8px; }
.viewer-actions .pill-button { display: inline-flex; align-items: center; gap: 7px; }
.viewer-actions svg { width: 16px; height: 16px; }
.viewer-close { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.viewer-close svg { width: 18px; height: 18px; }
dialog.viewer > .status { margin: 10px 20px 0; }
.viewer-pages { flex: 1; overflow: auto; display: grid; justify-items: center; align-content: start; gap: 18px; padding: 22px; }
.viewer-page { display: block; width: min(100%, 640px); aspect-ratio: 210 / 297; border-radius: 6px; background: #fff; box-shadow: 0 4px 18px rgb(0 0 0 / .25); animation: charte-page-in .4s cubic-bezier(.2, .8, .2, 1); }
.viewer-page.skeleton { background: linear-gradient(90deg, var(--skel) 30%, var(--skel-hi) 50%, var(--skel) 70%) 0 0 / 300% 100%; animation: skel-shine 1.5s ease-in-out infinite; box-shadow: none; }
@keyframes viewer-in { from { opacity: 0; transform: scale(.97); } }
@keyframes viewer-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.viewer, dialog.viewer::backdrop, .viewer-page { animation: none; } }
/* Visionneuse d'images (viewImages, images.js) : plein écran sur fond sombre, l'image en grand. */
dialog.lightbox { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgb(10 10 12 / .92); color: #fff; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); overflow: hidden; transition: background-color .2s ease; animation: lightbox-in .2s ease; }
dialog.lightbox:not([open]) { display: none; }
dialog.lightbox::backdrop { background: transparent; }
dialog.lightbox.closing { background-color: transparent; }
dialog.lightbox.closing .lightbox-bar, dialog.lightbox.closing .lightbox-nav { opacity: 0; }
.lightbox-bar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left)); transition: opacity .15s ease; }
.lightbox-title { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.lightbox-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lightbox-count { flex: none; color: rgb(255 255 255 / .6); font-size: 13px; font-variant-numeric: tabular-nums; }
.lightbox-actions { flex: none; display: flex; align-items: center; gap: 8px; }
/* Télécharger : la hauteur du bouton Fermer à côté (38 px), le texte centré sur ses majuscules. */
.lightbox-actions .lightbox-action { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 17px 0 14px; text-decoration: none; color: #fff; background: rgb(255 255 255 / .12); }
.lightbox-action span { text-box: trim-both cap alphabetic; }
.lightbox-action:hover:not(:disabled) { background: rgb(255 255 255 / .22); }
.lightbox-action svg { width: 16px; height: 16px; }
.lightbox-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgb(255 255 255 / .1); }
.lightbox-btn svg { width: 18px; height: 18px; }
.lightbox-stage { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px 72px max(24px, env(safe-area-inset-bottom)); touch-action: none; }
/* Sa taille est posée par fit (images.js) dès la vignette ; l'animation d'ouverture et de fermeture part
   de son coin haut gauche (transform-origin). */
.lightbox-img { display: block; flex: none; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 48px rgb(0 0 0 / .5);
  transform-origin: 0 0; transition: filter .35s ease; user-select: none; -webkit-user-drag: none; }
.lightbox-img.low { filter: blur(8px); }
.lightbox-stage.loading::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .85), transparent) 0 0 / 40% 100% no-repeat; animation: lightbox-load 1.1s ease-in-out infinite; }
.lightbox-nav { position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  color: #fff; background: rgb(255 255 255 / .12); transition: background-color .15s ease, opacity .15s ease; }
.lightbox-nav[hidden] { display: none; }
.lightbox-nav.prev { left: 14px; }
.lightbox-nav.next { right: 14px; }
.lightbox-nav svg { width: 22px; height: 22px; }
@media (hover: hover) { .lightbox-nav:hover, .lightbox-btn:hover { background: rgb(255 255 255 / .22); } }
@media (max-width: 640px) {
  .lightbox-stage { padding: 4px 8px max(72px, env(safe-area-inset-bottom)); }
  .lightbox-nav { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); margin-top: 0; }
  .lightbox-nav.prev { left: calc(50% - 56px); }
  .lightbox-nav.next { right: calc(50% - 56px); }
  .lightbox-actions .lightbox-action { width: 38px; height: 38px; padding: 0; } /* sans la marge des boutons à icône (.pill-button:has(> svg)) : icône centrée */
  .lightbox-action span { display: none; }
}
@keyframes lightbox-in { from { background-color: transparent; } }
@keyframes lightbox-load { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { dialog.lightbox, .lightbox-stage.loading::after { animation: none; } dialog.lightbox, .lightbox-img { transition: none; } }
/* Une page chargée garde le format de son image (le 210 / 297 ne sert qu'au squelette) : forcé, il
   la déformait d'un pixel et laissait voir le fond sur un bord. */
img.viewer-page { aspect-ratio: auto; height: auto; background: none; }
/* Modèle sans mise en page : des pages en attente pendant que l'IA l'écrit. */
.model-empty { display: grid; gap: 10px; }
.model-tag.writing { animation: model-writing 1.6s ease-in-out infinite; }
@keyframes model-writing { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .model-tag.writing { animation: none; } }

/* Importer depuis votre IA : le message à copier, lisible et sélectionnable. */
.import-prompt { margin: 0; padding: 12px 14px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font: 13px/1.5 var(--mono, ui-monospace, monospace); background: var(--surface-2, rgba(127,127,127,.08)); border-radius: 12px; user-select: text; }
.procedure-import .connector-form { display: grid; gap: 14px; }
.procedure-import .connector-form > p { margin: 0; }
.import-actions { display: flex; gap: 8px; }
.api-keys-box { display: grid; gap: 6px; }
.api-keys { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; }
.api-key { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }
.api-key + .api-key { border-top: 1px solid var(--line); }
.api-key-text { display: grid; gap: 2px; font-size: 13px; min-width: 0; }
.api-key .pill-button { height: 30px; }
.api-key .pill-button.danger { color: var(--error); }

/* Résultat d'un connecteur personnalisé (apiResultCard) : une fiche par élément, ses valeurs en
   sections côte à côte (libellé : valeur). */
.api-card { padding: 14px 16px; display: grid; gap: 14px; }
.api-card > .tool-card-head { padding: 0; }
.api-item + .api-item { border-top: 1px solid var(--line); padding-top: 14px; }
.api-item-title { margin: 0 0 10px; font-weight: 600; font-size: 14.5px; }
.api-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.api-section { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--t1) 4%, transparent); min-width: 0; }
.api-section h4 { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t2); }
.api-fields { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 12.5px; }
.api-fields dt { color: var(--t2); white-space: nowrap; }
.api-fields dd { margin: 0; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Changement de conversation : l'ancien fil est masqué le temps de lire le nouveau (openConversation,
   threadReady) ; le squelette de chargement, lui, reste visible. */
#messages.switching > :not(.skeleton) { visibility: hidden; }

/* Choix des outils d'un connecteur personnalisé MCP (toolPicker, app.js). */
.tool-picker { display: grid; gap: 10px; }
.tool-picker-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tool-picker-head .hint { flex: 1; }
.tool-picker-list { display: grid; gap: 2px; max-height: 420px; overflow-y: auto; }
.tool-picker-list:empty { display: none; }
.tool-picker-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; }
.tool-picker-row:hover { background: color-mix(in srgb, var(--t1) 4%, transparent); }
.tool-picker-text { display: grid; gap: 2px; min-width: 0; }
.tool-picker-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.tool-picker-name { font-weight: 500; font-size: 14px; }
.tool-picker-weight { font-size: 12px; font-variant-numeric: tabular-nums; }
.tool-picker-row.off .tool-picker-text, .tool-picker-row.off .tool-picker-weight { opacity: .45; }
.tool-picker-row.off > :last-child { visibility: hidden; }
@media (max-width: 640px) {
  .tool-picker-row { grid-template-columns: auto 1fr; }
  .tool-picker-weight { display: none; }
  .tool-picker-row > :last-child { grid-column: 2; justify-self: start; }
}

/* Écran tactile : pas d'anneau de focus sous le doigt. Une fenêtre qui s'ouvre donne le focus à son
   premier bouton (la croix des Paramètres), et Safari iOS l'entourait comme au clavier. L'anneau
   revient dès qu'on navigue au clavier (Tab sur un clavier branché : classe key-nav, mobile.js). */
@media (pointer: coarse) {
  :root:not(.key-nav) :focus-visible { outline: none !important; }
}
.thread-pilot.away .thread-pilot-say { visibility: hidden; }
.empty-logo { justify-self: center; max-height: 72px; max-width: min(260px, 70vw); margin-bottom: 8px; }

/* Heure des messages, dans chaque bulle de toutes les conversations, en
   bas à droite, en petit. Un message qui vient d'arriver : en fondu, la bulle grandit en douceur. */
.msg > .msg-time { display: block; margin: 2px -4px -4px 16px; text-align: right; font-size: 11px; line-height: 14px; color: var(--t2); white-space: nowrap; user-select: none; }
.msg > .msg-time.time-in { animation: time-in .3s cubic-bezier(.22, 1, .36, 1); }
@keyframes time-in { from { opacity: 0; margin-top: -14px; } }
@media (prefers-reduced-motion: reduce) { .msg > .msg-time.time-in { animation: none; } }
/* Sans la marge du dernier paragraphe : l'heure suit le texte, sans ligne vide entre les deux. */
.msg:has(> .msg-time) > :nth-last-child(2), .msg:has(> .msg-time) > :nth-last-child(2) > :last-child { margin-bottom: 0; }

/* iOS 27 floute le haut d'une app installée : une bande fixe tout en haut de l'écran évite cet effet,
   sans rien peindre (background-clip: text). Contournement sans API d'Apple : à revérifier sur iPhone
   à chaque version d'iOS. */
.ios-top-blur { display: none; }
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) {
    .ios-top-blur {
      display: block;
      position: fixed;
      inset: 0 0 auto;
      height: 11px;
      pointer-events: none;
      background: var(--bg);
      -webkit-background-clip: text;
      background-clip: text;
    }
  }
}

/* Images jointes : vignette dans le message, petite image dans la zone de saisie. */
.attachment-thumb { display: block; border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.attachment-thumb .picture { min-width: 80px; min-height: 80px; }
.attachment-thumb img { display: block; width: auto; height: auto; max-width: 220px; max-height: 160px; }
.chip-thumb { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: none; cursor: zoom-in; }
.chip-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }