/* ── Réglages d'un bot : dans la colonne de droite, au-dessus de l'écran / questions / routines (W.34). UN seul Valider. ── */
#side .bot-cfg { margin: 0 0 var(--s4); padding: 0 0 var(--s3); border-bottom: 1px solid var(--line); }
#side .bot-cfg h2 { margin: var(--s4) 0 var(--s2); font-size: var(--t-body); font-weight: 600; }
#side .bot-cfg h2:first-of-type { margin-top: 0; }
#side .bot-cfg .form, #side .bot-cfg .form.two { grid-template-columns: minmax(0, 1fr); }
#side .bot-cfg .cfg-id { flex-direction: column; gap: var(--s3); }
#side .bot-cfg .cfg-id .form { flex: none; width: 100%; }
#side .bot-cfg .model-field { min-width: 0; width: 100%; }
#side .bot-cfg .model-menu { width: 100%; max-height: 40vh; }
#side .bot-cfg .mode-list { max-width: none; }
#side .bot-cfg .cfg-list, #side .bot-cfg .cfg-list.three { grid-template-columns: minmax(0, 1fr); }
#side .bot-cfg textarea.field { min-height: 80px; }
#side .bot-cfg .cfg-foot { margin-top: var(--s3); }
/* Le nom de la conversation est un bouton (ses réglages) : la zone de titre recule de son padding pour que l'icône reste au x du contenu. */
.conv:has(.ttl-btn) { padding-left: 0; }
.conv h1:has(.ttl-btn) { overflow: visible; }
.ttl-btn { display: inline-flex; align-items: center; gap: var(--s2); padding: 3px var(--s2); border-radius: var(--r2); font: inherit; }
.ttl-btn:hover { background: var(--hover); }
.ttl-btn .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-head .spacer { flex: 1; }
.cfg-id { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s5); }
.cfg-id .form { flex: 1 1 420px; }
.cfg-av { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.cfg-list { display: grid; grid-template-columns: max-content max-content; align-items: center; column-gap: var(--s5); margin-bottom: var(--s2); }
.cfg-list.three { grid-template-columns: max-content max-content max-content; }
.cfg-list > .tr { display: contents; }
.cfg-list > .tr > * { display: flex; align-items: center; gap: var(--s2); min-height: 44px; border-top: 1px solid var(--line); font-size: var(--t-body); }
.cfg-list > .tr:first-child > * { border-top: 0; }
.cfg-list .dim { color: var(--ink-2); font-size: var(--t-meta); }
.cfg-list .tile { width: 28px; height: 28px; border-radius: 7px; } .cfg-list .tile .icon { width: 16px; height: 16px; }
.mem-row { display: flex; align-items: center; gap: var(--s2); min-height: 40px; border-top: 1px solid var(--line); font-size: var(--t-body); }
.mem-row:first-child { border-top: 0; }
.mem-row .mini { opacity: 0; transition: opacity var(--move) ease-out; } /* oublier : discret, révélé au survol ou au clavier */
.mem-row:hover .mini, .mem-row:focus-within .mini { opacity: 1; }
.seg.sm button { height: 26px; padding: 0 12px; font-size: var(--t-meta); }
.seg button:disabled { color: var(--ink-2); cursor: default; }
.lock { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: var(--t-meta); }
.lock .icon { width: 12px; height: 12px; }
.skills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s2); }
.new-rt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.new-rt .field { width: auto; flex: 0 1 280px; }
.danger-zone { margin-top: var(--s6, 32px); padding-top: var(--s4); border-top: 1px solid var(--line); }
.link.danger { color: var(--err); }
.del-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s3); border-radius: var(--r2); background: color-mix(in oklab, var(--err) 8%, var(--surface)); font-size: var(--t-body); }
.del-confirm span { margin-right: auto; }
.cfg-foot { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); margin-top: var(--s5); padding: var(--s3) 0; background: var(--surface); border-top: 1px solid var(--line); }
.cfg-foot .ok-note { margin-right: auto; }
/* Question du harnais : réponses façon Claude Code ; colonne droite : une ligne par question (renvoie à sa carte). */
.q-answers { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
/* Demande de l'hote : l'outil en titre, un argument par ligne. La valeur
   est en chasse fixe — c'est une commande, on doit pouvoir la lire au
   caractere pres. Couleurs heritees, donc les deux themes suivent. */
.req-tool { margin: 0 0 6px; font-weight: 600; font-size: 13px; }
.req-field { display: flex; gap: 8px; align-items: baseline; margin-top: 4px; }
.req-field .rk { flex: none; opacity: .6; font-size: 12px; min-width: 76px; }
.req-field .rv { font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-word; }
/* Un `content` de Write, c'est un FICHIER ENTIER. Sans borne il remplissait
   l'ecran, poussait la barre de saisie hors du cadre, et aucune barre de
   defilement ne s'armait : plus rien a cliquer, plus rien a ecrire.
   La valeur se clampe donc a six lignes, avec les trois points natifs.
   Elle n'est pas TRONQUEE : le texte reste entier dans le DOM (copie,
   recherche, lecteur d'ecran), la carte defile, et le champ s'ouvre au
   clic ou au clavier. Une carte de permission ou l'humain ne pourrait pas
   lire la fin d'une commande serait un piege a approbation. */
.req-field .rv { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.req-field .rv:focus { -webkit-line-clamp: unset; overflow: visible; }
/* Avis de l'assistant, a cote du libelle du bouton : discret, monochrome,
   il herite de la couleur du bouton donc il suit les deux themes. */
.q-odds { margin-left: 8px; opacity: .62; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; }
.q-other { display: flex; align-items: center; gap: var(--s1); margin-top: var(--s2); }
.req .hint { margin-top: var(--s2); }
.mail-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s3); row-gap: 2px; font-size: var(--t-body); }
.mail-dl .k { color: var(--ink-2); font-size: var(--t-meta); padding-top: 2px; }
.q-list { margin-bottom: var(--s3); }
.q-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s2); width: 100%; min-height: 40px; text-align: left; font-size: var(--t-body); border-top: 1px solid var(--line); }
.q-row:first-child { border-top: 0; } .q-row:hover { background: var(--hover); }
.q-row .hs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .q-row .hat { color: var(--ink-2); font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
.q-row .icon { width: 14px; height: 14px; color: var(--ink-2); }
#side .q-row.leaving { overflow: hidden; opacity: 0; min-height: 0; border-width: 0; transition: height 220ms ease-out, opacity 150ms ease-out; }
/* Mode de permission : libellé cliquable dans l'en-tête de la conversation, sélecteur segmenté dans les réglages. */
.mode-opt { height: auto; align-items: flex-start; padding: 8px 10px; white-space: normal; }
.mode-opt b { display: block; font-weight: 600; } .mode-opt .hint { margin: 2px 0 0; }
.mode-opt[aria-checked="true"] { background: var(--current); }
.sub-h { margin: var(--s4) 0 var(--s2); color: var(--ink-2); font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
/* Sous-barre (comme la ligne d'état de Claude Code) : une ligne sobre sous la saisie. À gauche le mode de CETTE conversation
   (Maj+Tab le fait défiler, un clic ouvre la liste) ; à droite sous-agents, cache de prompt, contexte. */
.sub { position: relative; max-width: var(--read); margin: 6px auto 0; display: flex; align-items: center; gap: var(--s3); min-width: 0; height: 22px; color: var(--ink-2); font-size: var(--t-meta); white-space: nowrap; }
.sub-mode, .sub-agents { position: relative; display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.sub-btn { display: inline-flex; align-items: center; gap: 5px; min-width: 0; height: 22px; padding: 0 6px; margin-left: -6px; border-radius: var(--r2); color: inherit; font: inherit; }
.sub-btn:hover, .sub-btn[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.sub-btn .icon { width: 14px; height: 14px; } .sub-btn .nm { overflow: hidden; text-overflow: ellipsis; }
.sub-btn.risky, .sub-btn.risky:hover, .mode-opt.risky b, .sub .low { color: var(--err); }
.sub-mode .kbd { opacity: .85; }
.sub-agents .sub-btn { margin-left: 0; }
@keyframes sub-work { to { transform: rotate(1turn); } }
.sub-agents.working > .sub-btn > .icon { transform-origin: center; animation: sub-work 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .sub-agents.working > .sub-btn > .icon { animation: none; }
}
.sub .num { font-variant-numeric: tabular-nums; }
.sub-model .icon { width: 14px; height: 14px; }

#mode-menu { bottom: calc(100% + 6px); left: -6px; width: min(340px, calc(100vw - 32px)); }
/* La carte s'ancre sur la sous-barre entiere (.sub, deja en position relative) et en prend la largeur :
   ancree au petit bouton, ses 640 px debordaient sous la barre laterale (mesure du 2026-10-09). */
.sub-agents { position: static; }
#agents-menu { bottom: calc(100% + 6px); left: 0; right: 0; white-space: normal; }
.ag-head { padding: 6px 10px 2px; color: var(--ink-2); font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ag-hint { padding: 0 10px 10px; color: var(--ink-2); font-size: var(--t-meta); }
/* Carte des agents : le bot a gauche, ses sous-agents a droite, relies par un trait (comme l'« Agent map »
   de Claude Code). Les traits sont des bordures : rien a recalculer quand une carte se deplie. */
.ag-graph { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: 28px; padding: 0 10px 10px; }
.ag-kids { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ag-card { position: relative; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
.ag-parent::after { content: ''; position: absolute; top: 18px; right: -15px; width: 14px; border-top: 1px solid var(--line); }
.ag-kids > .ag-card::before { content: ''; position: absolute; top: 18px; left: -15px; width: 14px; border-top: 1px solid var(--line); }
.ag-kids > .ag-card:not(:last-child)::after { content: ''; position: absolute; top: 18px; left: -15px; height: calc(100% + 8px); border-left: 1px solid var(--line); }
.ag-top { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--t-body); font-weight: 600; text-align: left; }
button.ag-top { cursor: pointer; }
.ag-mission { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-2); }
.ag-dot.run { background: var(--ok); } .ag-dot.wait { background: var(--warn); } .ag-dot.err { background: var(--err); }
.ag-meta { margin: 2px 0 0 16px; color: var(--ink-2); font-size: var(--t-meta); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* An executor's panel, in place of the map (Claude Code's agent panel): who it is, what it does now and for how
   long, its prompt and its tool calls; the two buttons stay at the bottom while the rest scrolls. */
.ag-scroll { max-height: min(62vh, 560px); overflow-y: auto; padding: 4px 10px 8px; }
.ag-head2 { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
.ag-title { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-size: var(--t-body); font-weight: 600; }
.ag-title .ag-close { margin-left: auto; }
.ag-line { color: var(--ink-2); font-size: var(--t-meta); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ag-id { user-select: all; }
.ag-now { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 6px 0; font-size: var(--t-meta); }
.ag-now-k, .ag-quiet { color: var(--ink-2); font-size: var(--t-meta); }
.ag-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.ag-since { flex: none; margin-left: auto; color: var(--ink-2); }
.ag-sec { margin-top: 4px; }
.ag-sec > summary { padding: 4px 0; color: var(--ink-2); font-size: var(--t-meta); font-weight: 600; cursor: pointer; }
.ag-prompt { max-height: 280px; overflow: auto; margin: 4px 0 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--bg); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font: var(--t-meta)/1.5 var(--mono); }
.ag-step { position: relative; display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 3px 0 3px 14px; font-size: var(--t-meta); }
.ag-step.run::before { content: ''; position: absolute; left: 2px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ok); }
.ag-step.err b { color: var(--err); }
.ag-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 10px 10px; border-top: 1px solid var(--line); }
.ag-foot .ag-stop { color: var(--err); }
.ag-err { grid-column: 1 / -1; margin: 0; color: var(--err); font-size: var(--t-meta); }
/* An executor's whole transcript in a modal (Claude Code's "Open transcript"): its head, then its prompt and a
   timeline of its model's answers and its tool calls, each with its input and output. */
.ag-transcript { width: min(1000px, 94vw); height: min(86vh, 900px); padding: 0; border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); color: var(--ink); }
.ag-transcript[open] { display: flex; flex-direction: column; }
.ag-transcript::backdrop { background: rgba(0, 0, 0, .35); }
.ag-transcript .ag-head2 { padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.ag-tl-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 18px 26px; }
.ag-tl-prompt { margin-bottom: 12px; }
.ag-tl-time { margin-bottom: 4px; color: var(--ink-2); font-size: var(--t-label); text-align: right; }
.ag-tl-prompt pre { max-height: 200px; overflow: auto; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--bg); white-space: pre-wrap; overflow-wrap: anywhere; font: var(--t-meta)/1.5 var(--sans); }
.ag-tl { margin: 0; padding: 0 0 0 16px; border-left: 1px solid var(--line); list-style: none; }
.ag-tl-row { position: relative; padding: 6px 0 10px; }
.ag-tl-row::before { content: ''; position: absolute; left: -20px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); }
.ag-tl-row.run::before { background: var(--ok); }
.ag-tl-row.err::before { background: var(--err); }
.ag-tl-h { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: var(--t-body); }
.ag-tl-text { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-body); }
.ag-io { display: grid; grid-template-columns: 52px minmax(0, 1fr); margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r1); background: var(--bg); }
.ag-io-k { padding: 8px 0 0 10px; color: var(--ink-2); font-size: var(--t-label); font-weight: 600; }
.ag-io pre { max-height: 220px; overflow: auto; margin: 0; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--t-meta)/1.5 var(--mono); }
@media (max-width: 600px) {
  .ag-graph { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .ag-kids { padding-left: 14px; border-left: 1px solid var(--line); margin-left: 14px; }
  .ag-parent::after, .ag-kids > .ag-card::before, .ag-kids > .ag-card:not(:last-child)::after { display: none; }
}
.mode-opt { gap: 10px; }
.mode-opt > .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--ink-2); } .mode-opt .ck { margin-left: auto; color: var(--accent); }
.mode-opt .warn { display: block; margin-top: 2px; color: var(--err); font-size: var(--t-meta); }
.mode-opt:disabled, .mode-opt[aria-disabled="true"] { opacity: .45; cursor: default; }
.mode-opt .soon { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--t-meta); }
.mode-list { display: grid; gap: 2px; max-width: 620px; margin-bottom: var(--s2); }
.sub-act { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sub-act .toggle { --track-w: 32px; --track-h: 18px; --knob: 14px; width: var(--track-w); height: 22px; }
.sub-act .nm { color: inherit; }
.act { margin: 2px 0 2px 40px; max-width: var(--read); color: var(--ink-2); font-size: var(--t-meta); }
.act summary { cursor: pointer; display: flex; align-items: center; gap: 6px; list-style: none; height: 22px; }
.act summary::-webkit-details-marker, .act summary::marker { display: none; }
.act summary .icon { width: 14px; height: 14px; }
.act .act-body { padding: 2px 0 8px 20px; color: var(--ink); font-size: var(--t-body); white-space: pre-wrap; word-break: break-word; }
.act .act-body p { margin: 0; }
@media (max-width: 600px) { .sub .kbd, .sub-ctx, .sub-agents .w { display: none; } .sub { gap: var(--s2); } }
/* Jetons de la saisie (skill en tête, mentions) et du fil : discrets, teintés de la couleur du bot. */
.tok { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 24px; padding: 0 2px 0 7px; margin: 2px 4px 2px 2px; border-radius: 6px; background: color-mix(in oklab, var(--tc, var(--accent)) 16%, var(--surface)); color: var(--ink); font-size: var(--t-body); font-weight: 500; white-space: nowrap; }
.tok > .icon { width: 13px; height: 13px; color: var(--ink-2); } .tok .mini { width: 20px; height: 20px; }
.composer.listening .tok { display: none; }
.bubble .tok, .m .body .tok { height: 22px; padding: 0 7px; margin: 0; vertical-align: 1px; }
.reply-tok { max-width: 100%; } .reply-tok > .icon { width: 13px; height: 13px; color: var(--ink-2); }
.reply-tok .rq { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
button.tok:hover { background: color-mix(in oklab, var(--tc, var(--accent)) 28%, var(--surface)); }
/* Liste « / » (commandes puis skills) et « @ » (membres puis autres bots) : au-dessus de la saisie, une ligne par entrée. */
.ta { bottom: calc(100% + 8px); left: 0; right: 0; max-height: min(380px, 50vh); overflow-y: auto; }
.ta-group { padding: 8px 10px 4px; color: var(--ink-2); font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ta-item { display: grid; grid-template-columns: 20px max-content minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r2); font-size: var(--t-body); cursor: pointer; }
.ta-item:hover, .ta-item[aria-selected="true"] { background: var(--hover); }
.ta-item > .icon { width: 16px; height: 16px; color: var(--ink-2); }
.ta-name { font-weight: 500; } .ta-desc { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ta-meta { color: var(--ink-2); font-size: var(--t-label); }
@media (max-width: 600px) { .ta-meta { display: none; } }
.confirm-bar { max-width: var(--read); margin: 0 auto var(--s2); }
.link-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.composer > .thumb { z-index: 21; } /* au-dessus de la liste « / » et « @ » */
.ttl-btn .tag { color: var(--ink-2); font-size: var(--t-meta); font-weight: 500; }
/* Ordinateur du bot (réglages) : écran, état, ressources. */
.vm { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 360px); gap: var(--s4); align-items: start; }
.vm .frame { margin: 0; }
.vm-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px var(--s3); align-items: center; font-size: var(--t-body); }
.vm-rows .k { color: var(--ink-2); } .vm-state { display: flex; align-items: center; gap: var(--s3); }
.vm .meter { margin-top: 4px; }
@media (max-width: 700px) { .vm { grid-template-columns: minmax(0, 1fr); } }
.skill-row { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto var(--mini); align-items: center; gap: var(--s3); min-height: 36px; border-top: 1px solid var(--line); font-size: var(--t-body); }
.skill-row:first-child { border-top: 0; } .skill-row .ta-desc { white-space: normal; } .skill-row .ta-meta { white-space: nowrap; }
.skill-row .mini { opacity: 0; } .skill-row:hover .mini, .skill-row .mini:focus-visible { opacity: 1; }
/* Liste : ligne = bouton principal + « … » discret au survol ; blocs Épinglés, sections de l'utilisateur, Masqués. */
.nav-row { position: relative; }
.row-more { position: absolute; right: var(--s3); top: 6px; width: 26px; height: 22px; border-radius: var(--r2); display: none; align-items: center; justify-content: center; color: var(--ink-2); background: var(--hover); }
.row-more:hover { color: var(--ink); }
.nav-row:hover .row-more, .row-more:focus-visible, .row-more[aria-expanded="true"] { display: inline-flex; }
.nav-row:hover .when, .nav-row:focus-within .when { visibility: hidden; }
#app.l-off .row-more { display: none !important; }
.xfer { display: block; margin: 0 var(--s3) 2px var(--nav-pad); padding: 0; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-label); text-align: left; cursor: pointer; }
.xfer:hover { color: var(--ink); background: var(--hover); }
#app.l-off .xfer { display: none; }
.l1 .pin, #sec-pinned .mono-s { color: var(--err); } /* l'epingle est rouge (Nicolas, 2026-10-15) : on voit d'un coup d'oeil ce qui est fige */
.l1 .pin { width: 12px; height: 12px; align-self: center; }
.nav-sec { height: 30px; text-align: left; color: var(--ink-2); }
.nav-sec .text { font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.nav-sec .mono-s { width: var(--mono-w); display: inline-flex; justify-content: center; }
.nav-sec .icon { width: 14px; height: 14px; transition: transform var(--move) ease-out; } .nav-sec[aria-expanded="true"] .icon.chev { transform: rotate(90deg); }
button.nav-sec:hover { color: var(--ink); }
.nav-rename .field { height: 30px; }
.nav-div { height: 1px; margin: 6px var(--s3) 6px var(--nav-pad); background: var(--line); }
/* Menu contextuel maison : au curseur, jamais hors écran ; un sous-menu « Déplacer vers » ; confirmation inline. */
#ctx { position: fixed; z-index: 40; min-width: 250px; max-width: calc(100vw - 16px); }
#ctx:has(.react-row) { min-width: 0; } /* le menu d'un message prend la largeur de ses 7 colonnes */
#ctx .pop-item .icon { width: 16px; height: 16px; color: var(--ink-2); }
#ctx .pop-item.danger, #ctx .pop-item.danger .icon { color: var(--err); }
#ctx .pop-item .sub-arrow { margin-left: auto; width: 14px; height: 14px; }
.ctx-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.ctx-sub { top: -5px; left: calc(100% - 4px); min-width: 200px; } .ctx-sub.flip { left: auto; right: calc(100% - 4px); }
.ctx-in { padding: 4px 6px; } .ctx-in .field { width: 100%; }
.ctx-confirm { width: 280px; padding: 8px 10px; white-space: normal; font-size: var(--t-body); }
.ctx-confirm .row { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s3); }
.ctx-done { color: var(--ok); }
/* Reactions : la rangee en tete du menu d'un message, et sa grille derriere le « + ». */
.react-row, .react-grid { display: grid; grid-template-columns: repeat(7, 32px); gap: 2px; padding: 4px 6px; } /* 7 colonnes : web.ReactionPalette */
.react-grid { padding-top: 0; }
.react-pick { width: 32px; height: 32px; border-radius: var(--r2); font-size: 20px; line-height: 1; }
.react-pick:hover, .react-pick:focus-visible, .react-pick[aria-checked="true"] { background: var(--hover); }
.react-more { width: 32px; height: 32px; color: var(--ink-2); } .react-more[aria-pressed="true"] { background: var(--hover); color: var(--ink); }
.nav-row.leaving { overflow: hidden; opacity: 0; transition: height 220ms ease-out, opacity 150ms ease-out; }
/* Changement de thème : les surfaces glissent d'une couleur à l'autre (150 ms), c'est l'état qui change. */
html, .bar, #center, .composer, .req, .mono, .btn, #lang, .field, .pop, .bubble { transition: background-color var(--move) ease-out, border-color var(--move) ease-out, color var(--move) ease-out; }


/* ── Fenetre des reglages : rail de categories + panneau ──
   Motif de Synap Mail, porte a la main. La fenetre est BORNEE a dessein : c'est
   une modale, pas la zone principale de l'application — la regle qui interdit de
   borner le contenu vise la page, pas une fenetre posee par-dessus.
   Les ecrans eux-memes (formulaires, tableaux, offres) gardent leurs styles : ils
   n'ont pas bouge, seule leur coquille a change. */
.set-modal { width: min(1000px, calc(100vw - 2 * var(--s4))); height: min(86vh, 760px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: var(--r3); background: var(--bg); color: var(--ink); box-shadow: var(--shadow); overflow: hidden; }
.set-modal[open] { display: flex; }
.set-modal::backdrop { background: var(--scrim); }
.set-rail { flex: none; width: 208px; display: flex; flex-direction: column; gap: 2px; padding: var(--s2); border-right: 1px solid var(--line); background: var(--surface); overflow-y: auto; }
/* Meme motif qu'une entree de navigation : une seule facon de dessiner « la
   categorie courante » dans toute l'application. */
.set-cat { display: flex; align-items: center; gap: var(--s3); height: var(--row); padding: 0 var(--s3); border-radius: var(--r2); text-align: left; color: var(--ink-2); font-size: var(--t-body); white-space: nowrap; }
.set-cat:hover { background: var(--hover); color: var(--ink); }
.set-cat[aria-current="true"] { background: var(--current); color: var(--accent); font-weight: 600; }
.set-cat svg { flex: none; }
.set-panel { position: relative; flex: 1; min-width: 0; overflow-y: auto; }
.set-panel { scrollbar-width: none; }
.set-panel::-webkit-scrollbar { display: none; }
.set-close { position: absolute; top: var(--s2); right: var(--s2); z-index: 2; }
.set-body { padding: var(--s5) var(--s5) var(--s5); }
.set-body > :first-child { padding-right: var(--field); } /* la premiere ligne ne passe pas sous la croix */
/* Telephone : la fenetre prend l'ecran, le rail devient une bande horizontale. */
@media (max-width: 640px) {
  .set-modal { width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; flex-direction: column; }
  .set-rail { width: auto; flex-direction: row; gap: var(--s1); border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .set-rail::-webkit-scrollbar { display: none; } /* le rail defile au doigt et a la molette, sans barre */
  .set-body { padding: var(--s4); }
}

/* ── Une ligne de reglage : titre a GAUCHE, commande a DROITE ──
   Forme demandee par Nicolas le 2026-10-04. L'aide vit sous le titre, jamais a
   cote de la commande, sinon elle pousse la commande hors de son alignement. Un
   filet separe les lignes, pas une carte par reglage : un reglage n'est pas un
   objet, c'est une ligne. */
.srows { display: flex; flex-direction: column; }
.srow { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.srow:last-child { border-bottom: 0; }
.srow-txt { flex: 1 1 auto; min-width: 0; }
.srow-t { font-size: var(--t-body); font-weight: 500; }
.srow-h { margin: 2px 0 0; color: var(--ink-2); font-size: var(--t-meta); }
/* La commande ne se comprime jamais : c'est elle qu'on vient actionner. */
.srow-c { flex: none; display: flex; align-items: center; gap: var(--s2); }
/* Telephone : la commande passe SOUS son titre plutot que de l'ecraser. */
@media (max-width: 560px) {
  .srow { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .srow-c { justify-content: flex-start; }
}

/* ── Segment a plusieurs etats (theme : clair / sombre / systeme) ──
   Un interrupteur ne sait dire que oui ou non ; un segment sait dire « systeme ».
   Choix applique au clic, pas de Valider. */
.seg { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
.seg-b { padding: 0 var(--s3); height: 28px; border-radius: calc(var(--r2) - 2px); color: var(--ink-2); font-size: var(--t-body); white-space: nowrap; }
.seg-b:hover { color: var(--ink); }
.seg-b.on { background: var(--current); color: var(--accent); font-weight: 600; }
/* Adresse a recopier : largeur du texte, police a pas fixe, jamais tronquee. */
.mono-line { flex: 1 1 auto; min-width: 0; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: var(--t-code); line-height: 28px; overflow-wrap: anywhere; }
/* Titre de groupe (« Systeme ») : il separe sans encadrer. */
.sgroup { margin: var(--s5) 0 0; font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
/* Valeur affichee a cote de sa commande (le nom du compte). */
.srow-v { color: var(--ink-2); font-size: var(--t-body); }
/* Une commande eteinte DIT qu'elle est eteinte, elle ne fait pas semblant. */
.srow-c .toggle:disabled, .srow-c .btn:disabled, .srow-c select:disabled { opacity: .45; cursor: not-allowed; }
/* Preferences > Audio, the models panel (settings.js, viewAudio): the active model's badge, the engine cards (bounded,
   the grid adds columns), the model in service as an unfolded card on top, the others as icon rows. Only animations:
   the card rising to the top (FLIP, settings.js) then its settings unfolding. */
.dictation-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.dictation-badge { font-size: var(--t-meta); font-weight: 600; color: var(--ok); white-space: nowrap; }
.dictation-badge::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ok); vertical-align: middle; }
/* The engine cards share the whole width (Nicolas, 2026-10-18); narrow, they wrap. */
.dictation-engines { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--s2); margin: var(--s3) 0; }
.dictation-engine { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); color: inherit; font: inherit; text-align: left; }
.dictation-engine b { font-weight: 600; }
.dictation-engine span { font-size: var(--t-meta); color: var(--ink-2); }
.dictation-engine.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, var(--surface)); }
.dictation-engine:disabled { opacity: .55; cursor: default; }
.dictation-list { display: flex; flex-direction: column; }
.dictation-list > .srow, .dictation-card { position: relative; }
.dictation-card { margin: var(--s2) 0 var(--s3); padding: 0 var(--s3); border: 1px solid color-mix(in oklab, var(--ok) 45%, var(--line)); border-radius: var(--r2); background: color-mix(in oklab, var(--ok) 5%, var(--surface)); }
.dictation-card > .srow { border-bottom: 0; }
.dictation-settings { border-top: 1px solid var(--line); }
.dictation-settings.rising { animation: dictation-open .28s ease-out .3s both; }
@keyframes dictation-open { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .dictation-settings.rising { animation: none; } }
.dictation-bar { display: block; width: 100%; max-width: 320px; margin-top: 6px; }
.srow.dictation-ready { cursor: pointer; }
.dictation-active { display: inline-flex; color: var(--ok); }
.dictation-active .icon { width: 20px; height: 20px; }
.dictation-ic.dictation-go { color: var(--accent); }
.dictation-ic.dictation-trash { color: var(--err); }
.dictation-card-head { cursor: pointer; }
.dictation-card-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r2); }
.dictation-field { width: 240px; max-width: 100%; }
.dictation-modal { padding: 0; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); color: inherit; max-width: 360px; }
.dictation-modal::backdrop { background: rgba(0, 0, 0, .25); }
.dictation-modal-body { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); }
.dictation-modal-body p { margin: 0; }
.dictation-modal .acts { display: flex; justify-content: flex-end; gap: var(--s2); }

/* ── Utilisation : jauges, grille de jours ── */
.gauges { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 340px)); gap: var(--s3); margin: var(--s3) 0 var(--s4); } /* 340, pas 360 : premier enfant du panneau, la grille porte la reserve de la croix (32 px) ; mesure du 2026-10-14 a 1440, 710 px de contenu, deux cartes de 360 n'y tenaient pas et les trois s'empilaient */
.gauge-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: 6px; }
.gauge-t { font-size: var(--t-body); font-weight: 500; }
.gauge-p { color: var(--ink-2); font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
.cell { aspect-ratio: 1; border-radius: 2px; background: var(--line); }
.cell.n1 { background: color-mix(in srgb, var(--accent) 25%, var(--line)); }
.cell.n2 { background: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.cell.n3 { background: color-mix(in srgb, var(--accent) 75%, var(--line)); }
.cell.n4 { background: var(--accent); }
/* Le selecteur de couleur natif : une pastille, pas un champ de formulaire. */
.couleur { width: 36px; height: 28px; padding: 2px; border-radius: var(--r2); cursor: pointer; }
.gauge-r { margin: 4px 0 0; color: var(--ink-2); font-size: var(--t-meta); }
/* ── Grille d'une annee : petites cases, toute la largeur, et SES AXES ──
   Les mois au-dessus, les jours a gauche. Sans eux, c'est un damier dont on ne
   sait pas ce qu'il montre — c'etait tout ce qui lui manquait. */
.gridwrap { display: flex; align-items: flex-end; gap: var(--s2); width: 100%; margin: var(--s3) 0; }
.glabels { display: grid; grid-template-rows: repeat(7, 1fr); gap: 2px; flex: none; }
.gcols { flex: 1 1 auto; min-width: 0; }
.mrow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin-bottom: 3px; }
.gridyear { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; width: 100%; }
.dlab, .mlab { color: var(--ink-2); font-size: var(--t-label); line-height: 1; white-space: nowrap; }
.dlab { display: flex; align-items: center; }
.cell.vide { background: none; }
/* Les heures : vingt-quatre cases FINES, pas etirees sur toute la largeur —
   etirees, elles deviennent de gros paves. */
.hours24 { display: flex; gap: 3px; margin: var(--s3) 0; }
.hcol { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 16px; }
.hcol .cell { width: 16px; }
.hnum { color: var(--ink-2); font-size: var(--t-label); font-variant-numeric: tabular-nums; }
/* Curseur natif, a la couleur de la marque. */
.range { width: 100%; margin: var(--s1) 0; accent-color: var(--accent-fill); }

/* ── Fenetre du demenagement (§16). La scene suit data-stage, l'etat du serveur : la transition ne fait que relier deux
      etats deja atteints, jamais en avance. Exception voulue a « zero animation decorative » (regle 5). ── */
.mv-modal { width: min(560px, calc(100vw - 2 * var(--s4))); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: var(--r3); background: var(--bg); color: var(--ink); box-shadow: var(--shadow); }
.mv-modal::backdrop { background: var(--scrim); }
.mv-body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.mv-title { margin: 0; font-size: var(--t-h1); font-weight: 600; }
/* La scene garde son noeud tout le demenagement : seul data-stage change, donc
   chaque etape part de l'etat de la precedente et la transition joue.
   Gel = gris ; carton = boite visible ; voyage = mi-route, statique (move_status
   ne porte pas d'octets) ; inspection = penche ; arrivee = de l'autre cote.
   Un refus (data-stop) fige tout, sans effet. */
.mv-scene { position: relative; height: 72px; margin: var(--s2) 0; }
.mv-host { position: absolute; bottom: 0; padding: 2px var(--s2); border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface); color: var(--ink-2); font-size: var(--t-meta); }
.mv-host.from { left: 0; } .mv-host.to { right: 0; }
.mv-road { position: absolute; left: 12%; right: 12%; bottom: 10px; border-top: 1px dashed var(--line); }
.mv-mi { position: absolute; bottom: 22px; left: 6%; display: inline-flex; filter: none; transform: none; transition: left 900ms var(--hop-ease), transform 600ms var(--hop-ease), filter 600ms ease, opacity 600ms ease; }
.mv-box { position: absolute; inset: -4px; border: 2px solid var(--ink-2); border-radius: var(--r1); opacity: 0; transform: scale(.6); transition: opacity 400ms ease, transform 400ms var(--hop-ease); }
.mv-scene[data-stage="freeze"] .mv-mi { filter: grayscale(1); }
.mv-scene[data-stage="pack"] .mv-box, .mv-scene[data-stage="travel"] .mv-box, .mv-scene[data-stage="inspect"] .mv-box { opacity: 1; transform: none; }
.mv-scene[data-stage="travel"] .mv-mi { left: 45%; }
.mv-scene[data-stage="inspect"] .mv-mi, .mv-scene[data-stage="install"] .mv-mi, .mv-scene[data-stage="done"] .mv-mi { left: 84%; }
.mv-scene[data-stage="inspect"] .mv-mi { transform: rotate(-6deg); }
.mv-scene[data-stop="1"] .mv-mi, .mv-scene[data-stop="1"] .mv-box { transition: none; }
.mv-scene[data-stop="1"] .mv-mi { opacity: .5; }
.mv-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s1); }
.mv-steps.past { opacity: .6; }
.mv-step { display: grid; grid-template-columns: 14px 1fr auto 44px; align-items: center; gap: var(--s2); font-size: var(--t-body); }
.mv-dot { width: 8px; height: 8px; border-radius: var(--r-pastille); border: 1px solid var(--ink-2); }
.mv-step[data-st="done"] .mv-dot { background: var(--ok); border-color: var(--ok); }
.mv-step[data-st="now"] .mv-dot { background: var(--accent-fill); border-color: var(--accent-fill); }
.mv-step[data-st="failed"] .mv-dot { background: var(--err); border-color: var(--err); }
.mv-step[data-st="next"] { color: var(--ink-2); }
.mv-state, .mv-at, .mv-past, .mv-note { color: var(--ink-2); font-size: var(--t-meta); }
.mv-at { text-align: right; font-variant-numeric: tabular-nums; }
.mv-past, .mv-note, .mv-why, .mv-ok { margin: 0; }
.mv-tries { display: flex; flex-direction: column; gap: var(--s2); }
.mv-why { color: var(--err); }
.mv-acts { display: flex; justify-content: flex-end; gap: var(--s2); }
/* Les transitions tombent deja par la regle globale (responsive.css) ; reste la pose penchee. */
@media (prefers-reduced-motion: reduce) { .mv-scene[data-stage="inspect"] .mv-mi { transform: none; } }
.dictation-keys { display: inline-flex; align-items: center; gap: var(--s2); }
.dictation-key { min-width: 96px; font-variant-numeric: tabular-nums; }
.dictation-key.on { border-color: var(--accent); color: var(--accent); }
.dictation-setup { width: min(440px, calc(100vw - 32px)); max-width: none; }