: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%; }
.brand-name { font-weight: 600; 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;
}
.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; }
.switch-track {
  position: relative;
  padding: 0;
  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: "";
  position: absolute;
  top: 2px;
  left: 2px;
  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: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; }
@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; }
.card-title .tag { font-size: 12px; }
.connector-form input { 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); }
.option-field { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.option-field legend { padding: 0; margin-bottom: 8px; font-size: 13px; color: var(--t2); }
.option-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr)); gap: 10px; min-width: 0; }
.option-card { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px; border: 2px solid transparent; border-radius: 10px; background: var(--bg); cursor: pointer; font-size: 13px; }
.option-card:hover { border-color: var(--line); }
.option-card:has(input:checked) { border-color: var(--accent); }
.option-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.option-card input { position: absolute; opacity: 0; pointer-events: none; }
.option-card strong { color: var(--t1); font-weight: 600; }
.settings-body .option-card .muted { font-size: 11.5px; line-height: 1.3; margin: 0; }
.option-preview svg { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); margin-bottom: 5px; }
.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; }
.radio, .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(--t1); }
/* 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-logo { justify-self: center; max-height: 72px; max-width: min(260px, 70vw); margin-bottom: 8px; }
.empty-title { font-size: 28px; line-height: 1.3; font-weight: 600; margin: 0; }
.empty-text { margin: 0; color: var(--t2); font-size: 16px; }
.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; }
/* 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; }
.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); }
/* Tableaux : fond doux et lignes alternées plutôt que des bordures. */
.msg.assistant .table { overflow-x: auto; border-radius: 10px; background: var(--bg2); }
.msg.assistant table { border-collapse: collapse; font-size: 15px; width: 100%; }
.msg.assistant th { text-align: left; font-weight: 600; background: var(--table-head); }
.msg.assistant th, .msg.assistant td { padding: 9px 14px; vertical-align: top; }
.msg.assistant tbody tr:nth-child(even) { background: var(--table-stripe); }
.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;
}
/* Comme sur Claude : fichiers joints, puis le texte sur toute la largeur, puis une ligne d'outils,
   trombone, fournisseur et niveau (usage.css) à gauche, envoi à droite. */
.composer-box {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto auto;
  grid-template-areas: "files files files files files files" "dictation dictation dictation dictation dictation dictation" "text text text text text text" "attach provider mode . 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;
}
@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-box.dragging { border-color: var(--t2); border-style: dashed; }
.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; }
/* 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: 200px; 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 {
  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; }
.dictation-level { display: none; align-items: center; gap: 2px; height: 18px; flex: none; }
.dictation[data-kind="live"] .dictation-level { display: inline-flex; }
.dictation-level i { width: 3px; border-radius: 2px; background: var(--error); height: calc(3px + var(--level, 0) * 15px * var(--k, 1)); transition: height .08s linear; }
.dictation-level i:nth-child(1), .dictation-level i:nth-child(5) { --k: .45; }
.dictation-level i:nth-child(2), .dictation-level i:nth-child(4) { --k: .75; }
@media (max-width: 600px) { .dictation-hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .attach.mic.busy svg { animation: none; opacity: .5; }
  .attach.mic, .dictation-level i { transition: 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 en douceur (hauteur posée par app.js). */
.composer textarea { transition: height .16s ease; }
/* 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(820px, calc(100% - 32px));
  height: min(600px, 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-size: 17px; font-weight: 700; letter-spacing: -.01em; }
/* 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-size: 12px;
  font-weight: 700;
  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); }

/* 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, agents.css). */
.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 agents.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 > » :
     plus fort que la marge commune posée pour les bulles des agents, agents.css.) */
  .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 les bulles des agents,
     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, mode, 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) 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 { max-width: 760px; width: 100%; margin: 0 auto; background: var(--bg2); border-radius: 12px; padding: 14px; display: grid; gap: 12px; }
.confirm dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; }
.confirm dt { color: var(--t2); }
.confirm dd { margin: 0; white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow-y: auto; }
.confirm p { margin: 0; }
.confirm-raw summary { cursor: pointer; color: var(--t2); font-size: 13px; }
.confirm-raw pre { margin: 6px 0 0; 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: .5; cursor: default; }
.card-status { font-size: 13.5px; overflow-wrap: anywhere; }
/* 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 dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .confirm dt { font-size: 12.5px; }
  .confirm dd + dt { margin-top: 8px; }
}

@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: "↓ "; }

/* Mes fichiers */
/* Tuiles : icône, nom sur deux lignes au plus, menu « ⋮ » au survol. */
.file-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; }
.file-row { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 8px; border-radius: 10px; text-align: center; min-width: 0; }
.file-row:hover, .file-row.menu-open { background: var(--bg2); }
.file-row .tool-icon { margin: 0; align-self: center; }
.file-row .tool-icon svg { width: 30px; height: 30px; }
.file-text { display: grid; line-height: 1.25; width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1px; }
.file-name { max-width: 100%; overflow: hidden; font-size: 12px; white-space: normal; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.file-meta { font-size: 10.5px; color: var(--t2); }
.file-kebab { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 6px; background: none; color: var(--t2); opacity: 0; transition: opacity .15s, background .15s; }
.file-kebab svg { width: 16px; height: 16px; }
.file-kebab:hover { background: var(--bg); color: var(--t1); }
.file-row:hover .file-kebab, .file-row:focus-within .file-kebab, .file-row.menu-open .file-kebab { opacity: 1; }
@media (hover: none) { .file-kebab { opacity: 1; } }
.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); }
.folder-icon { color: var(--t2); }
.uploads-icon { color: var(--t1); }
.file-row.folder { cursor: pointer; }
.file-row.folder:focus-visible { outline: 2px solid var(--t2); outline-offset: -2px; }
.file-row.dragging { opacity: .5; }
.file-row.drop, .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 { padding: 0 16px 16px; }
.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; }
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) { .option-block { padding: 10px 12px; } }

/* Icône « serveur » : fournisseur choisi hébergé par l'entreprise (Ollama…), dans la pastille. */
.icon-server { display: inline-flex; flex: none; }
.icon-server svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.icon-server .dot { fill: currentColor; stroke: none; }
.provider-pick .icon-server { display: none; }
.provider-pick.local .icon-server { display: inline-flex; }

/* 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, .mode-pick, .pill-button, .connector button.secondary, .icon-btn) { position: relative; }
  :is(.burger, .attach, #send, .provider-pick, .mode-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). */
  .file-kebab { top: -7px; right: -7px; width: 44px; height: 44px; }
  /* 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, .confirm-raw summary { 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 :is(dialog.app-view, dialog.agent-drawer) { 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,
   bulles des agents et bandeau s'effacent pendant la frappe, sans rien déplacer (mobile.js). */
:root.kbd-tight :is(.topbar, .agent-bubbles, .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.compact { width: fit-content; max-width: 100%; }
.select.compact .select-button { padding: 6px 10px; font-size: 13.5px; }
.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; } }
.swap-in { animation: swap-in .22s ease both; }
@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. */
.chat > :is(#empty, .messages, .apps-home, .composer) { transition: opacity .18s ease; }
.routing .chat > :is(#empty, .messages, .apps-home, .composer) { opacity: 0; transition: 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; }
/* 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 et du niveau (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é, l'icône du mode d'un petit rebond, le menu s'ouvre et se referme en douceur. */
:root { --ease-out-soft: cubic-bezier(.22, 1, .36, 1); }
.provider-pick, .mode-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, .mode-pick:active { transform: scale(.96); }
.provider-pick.morphing, .mode-pick.morphing { overflow: hidden; white-space: nowrap; }
#provider-name, #mode-name { display: inline-block; }
.text-in { animation: text-in .3s var(--ease-out-soft); }
@keyframes text-in { from { opacity: 0; transform: translateY(3px); } }
.icon-pop { animation: icon-pop .3s var(--ease-out-soft); transform-origin: center; }
@keyframes icon-pop { from { opacity: 0; transform: scale(.7); } }
@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; }
/* Le bouton des niveaux qui paraît après le glissé du fournisseur (Smooth.show), ou qui s'en va. */
.pill-in { animation: pill-in .4s var(--ease-out-soft); }
@keyframes pill-in { from { opacity: 0; transform: translateX(-8px) scale(.92); } }
.pill-out { animation: pill-out .2s ease-in forwards; pointer-events: none; }
@keyframes pill-out { to { opacity: 0; transform: translateX(-6px) scale(.92); } }
@media (prefers-reduced-motion: reduce) {
  .provider-pick, .mode-pick, .provider-menu .combo-item { transition: none; }
  .provider-pick:active, .mode-pick:active { transform: none; }
  .text-in, .icon-pop, .pill-in, .pill-out, .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); }
.skel {
  display: block; height: 12px; border-radius: 6px;
  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;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@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, .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; }

/* Niveaux d'un fournisseur (app.js, levelsEditor) : une ligne par niveau, nom, modèle, réflexion. */
.levels { display: grid; gap: 8px; }
.level-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.level-row > input { height: 38px; min-width: 0; }
.level-row .segmented[hidden] + .combo { grid-column: span 2; }
.level-row .level-remove { color: var(--t2); width: 32px; height: 32px; }
.level-row .level-remove svg { width: 14px; height: 14px; }
@media (max-width: 720px) {
  .level-row { grid-template-columns: minmax(0, 1fr) auto; }
  .level-row > .segmented, .level-row > .combo { grid-column: 1 / -1; }
  .level-row .level-remove { grid-row: 1; grid-column: 2; }
}