:root {
  --bg: #1b1a18;
  --panel: #262421;
  --panel-2: #2f2d29;
  --border: #3b3934;
  --text: #ece9e4;
  --muted: #a19c95;
  --accent: #e8743b;
  --accent-text: #1b1a18;
  --ok: #67b97f;
  --warn: #e3b24f;
  --error: #e4705e;
  --radius: 14px;
  --width: 780px;
  --code-bg: #12110f;
  --add-bg: rgba(63, 185, 80, .14);
  --add-text: #a6e3a1;
  --del-bg: rgba(248, 81, 73, .14);
  --del-text: #f5a59b;
  --add-mark: rgba(63, 185, 80, .38);
  --del-mark: rgba(248, 81, 73, .38);
  --merged: #b48ef0;
  --shadow: rgba(0, 0, 0, .4);
  color-scheme: dark;
}

/* Thème clair : choisi dans les réglages, ou celui du téléphone (« Système »). */
:root[data-theme="light"] {
  --bg: #f7f5f1;
  --panel: #ffffff;
  --panel-2: #efece6;
  --border: #dcd7cf;
  --text: #1f1d1a;
  --muted: #6b665f;
  --accent: #c5571f;
  --accent-text: #ffffff;
  --ok: #2f8a4a;
  --warn: #9a6400;
  --error: #c13f2b;
  --code-bg: #f1eee8;
  --add-bg: rgba(46, 160, 67, .13);
  --add-text: #1a6e33;
  --del-bg: rgba(207, 34, 46, .1);
  --del-text: #a82a1c;
  --add-mark: rgba(46, 160, 67, .3);
  --del-mark: rgba(207, 34, 46, .24);
  --merged: #7c4dce;
  --shadow: rgba(0, 0, 0, .15);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
  --bg: #f7f5f1;
  --panel: #ffffff;
  --panel-2: #efece6;
  --border: #dcd7cf;
  --text: #1f1d1a;
  --muted: #6b665f;
  --accent: #c5571f;
  --accent-text: #ffffff;
  --ok: #2f8a4a;
  --warn: #9a6400;
  --error: #c13f2b;
  --code-bg: #f1eee8;
  --add-bg: rgba(46, 160, 67, .13);
  --add-text: #1a6e33;
  --del-bg: rgba(207, 34, 46, .1);
  --del-text: #a82a1c;
  --add-mark: rgba(46, 160, 67, .3);
  --del-mark: rgba(207, 34, 46, .24);
  --merged: #7c4dce;
  --shadow: rgba(0, 0, 0, .15);
  color-scheme: light;
  }
}

* { box-sizing: border-box; }

/* Un élément caché le reste, quel que soit son affichage (boutons en ligne, puces...). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Comme une appli : ni pincement ni double tap pour zoomer (le défilement reste). Les
   champs gardent 16 px : en dessous, iOS zoome tout seul quand on y touche. */
* { touch-action: pan-x pan-y; }

/* Boutons, puces, en-tête : pas de sélection ni de menu par appui long. Le texte des
   messages, lui, reste sélectionnable pour être copié. */
button, .chip, .topbar, .brand, .meta-link, .session-item, .sheet-item, .small-link {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

a { color: var(--accent); }
/* Adresse de la machine de Claw (serveur lancé pendant la tâche) : lisible, pas un lien. */
.local-address::after { content: " (machine de Claw)"; color: var(--muted); font-size: .85em; }

button { font: inherit; color: inherit; }

svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Cases à cocher et boutons radio dessinés, partout dans l'appli (ceux d'iOS sont minuscules). */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-content: center;
  width: 22px; height: 22px; margin: 0; border: 2px solid color-mix(in srgb, var(--muted) 70%, transparent);
  border-radius: 7px; background: var(--panel); cursor: pointer; vertical-align: middle;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}
input[type="radio"]:checked { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 5px, transparent 5.5px); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; cursor: default; }
label.check { cursor: pointer; }

.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* Appli installée sur l'écran d'accueil d'un iPhone, en portrait : depuis iOS 26, le système
   floute une bande sous la barre d'état, par-dessus la page, et aucun réglage ne l'enlève. La
   barre du haut et le tiroir descendent sous cette bande ; Safari et les ordinateurs ne changent pas. */
:root { --app-inset-top: env(safe-area-inset-top, 0px); }
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) and (orientation: portrait) {
    :root { --app-inset-top: calc(env(safe-area-inset-top, 0px) + 18px); }
  }
}

/* Barre du haut */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 4px;
  padding: calc(8px + var(--app-inset-top)) 12px 8px;
  background: var(--bg);
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 2px; }

/* Requêtes gratuites du jour, toujours en vue : un anneau qui se vide et le nombre restant */
.quota-meter {
  --level: var(--muted);
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font: inherit; cursor: pointer; font-variant-numeric: tabular-nums;
}
.quota-meter[hidden] { display: none; }
.quota-meter:hover, .quota-meter:focus-visible { background: var(--panel); }
.quota-meter strong { font-size: .98rem; font-weight: 600; }
.quota-meter small { margin-left: -5px; font-size: .78rem; color: var(--muted); }
.quota-meter .ring { width: 18px; height: 18px; }
.quota-meter .ring .track { stroke: var(--panel-2); stroke-width: 3; }
.quota-meter .ring .level { stroke: var(--level); stroke-width: 3; }
.quota-meter.ok { --level: var(--ok); }
.quota-meter.warn { --level: var(--warn); }
.quota-meter.low { --level: var(--error); }
.quota-meter.low strong { color: var(--error); }
.quota-meter.unknown { color: var(--muted); font-size: .85rem; }
.quota-meter.unknown svg { width: 16px; height: 16px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 600; }
.logo { display: inline-block; width: 26px; height: 26px; background: url("../icons/icon.svg") center / contain no-repeat; }
.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
}
.icon-button:hover, .icon-button:focus-visible { background: var(--panel); }
.icon-button svg { width: 22px; height: 22px; }

/* Contenu */
.view { flex: 1; width: 100%; max-width: var(--width); margin: 0 auto; padding: 8px 16px calc(var(--composer-space, 190px) + 28px); }
.home { padding-top: 12vh; }
.greeting { display: flex; align-items: center; gap: 12px; font-size: 1.6rem; font-weight: 500; margin: 0 0 40px; }
.greeting .logo { width: 34px; height: 34px; }
.section-title { font-size: .85rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }

.sessions { list-style: none; margin: 0; padding: 0; }
.sessions .empty, .empty { color: var(--muted); padding: 10px 4px; }
.session-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 10px; border-radius: 10px;
  color: var(--text); text-decoration: none;
}
.session-item:hover, .session-item:focus-visible { background: var(--panel); }
.session-text { display: flex; flex-direction: column; min-width: 0; }
.session-text strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-text small { color: var(--muted); }
.num { color: var(--muted); font-weight: 400; }
.dot { width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.running, .dot.queued { background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 25%, transparent); }
.dot.done { background: var(--ok); }
.dot.failed { background: var(--error); }
.dot.archived { background: var(--border); }

/* Session */
.session-head h1 { font-size: 1.3rem; font-weight: 600; margin: 8px 0 8px; }
.session-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* Onglets d'une session : discussion, fichiers de la branche, modifications */
.session-tabs {
  display: flex; gap: 4px; margin: 0 0 16px; padding: 4px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
}
.session-tab {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 8px 6px;
  border-radius: 9px; color: var(--muted); text-decoration: none; font-size: .86rem;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.session-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-tab svg { width: 16px; height: 16px; }
.session-tab:hover, .session-tab:focus-visible { color: var(--text); }
.session-tab.current { background: var(--panel-2); color: var(--text); font-weight: 600; }
.session-tab.current svg { color: var(--accent); }
@media (max-width: 380px) { .session-tab svg { display: none; } }
.meta-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--panel); color: var(--muted); font-size: .85rem; text-decoration: none; max-width: 100%;
}
.meta-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-link.pull { color: var(--text); }
.meta-link.pull.ouverte { color: var(--ok); }
.meta-link.pull.fusionnée { color: var(--merged); }

.messages { display: flex; flex-direction: column; gap: 18px; }
.message { overflow-wrap: anywhere; }
/* Vos messages en bulle à droite ; les réponses de Claw sans cadre, sur toute la largeur. */
.message.user {
  align-self: flex-end; max-width: 86%; padding: 10px 14px; border-radius: 20px 20px 6px 20px;
  background: var(--panel-2); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.message.claw { padding: 0 2px; }
.message.claw > .who { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .88rem; font-weight: 600; color: var(--text); }
.message.claw > .who .logo { width: 22px; height: 22px; }
.answer { line-height: 1.62; }
/* Questions de Claw : chaque réponse proposée se touche, comme dans Claude Code. Fermées (une
   réponse plus ancienne, un passage en cours), elles restent lisibles. */
.questions { display: grid; gap: 14px; margin: 14px 0 4px; }
.question { display: grid; gap: 8px; min-width: 0; }
.question-text { margin: 0; font-weight: 600; line-height: 1.45; }
.question-head {
  display: inline-block; margin-right: 8px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--muted); font-size: .75rem; font-weight: 600; vertical-align: 1px;
}
.choice {
  display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.choice strong { font-size: .95rem; font-weight: 600; }
.choice small { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.choice:disabled { cursor: default; }
.questions:not(.open) .choice { opacity: .65; }
.choice.chosen { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.send-choices { justify-self: start; }
.choices-hint { margin: 0; color: var(--muted); font-size: .8rem; }
.questions:not(.open) .send-choices, .questions:not(.open) .choices-hint { display: none; }
.answer h3 { margin: 1.3em 0 .45em; font-size: 1.08rem; font-weight: 650; letter-spacing: -.005em; }
.answer > h3:first-child { margin-top: 0; }
.message .answer blockquote {
  margin: .8em 0; padding: 10px 12px 10px 14px; border: 0; border-left: 3px solid var(--warn); border-radius: 4px 12px 12px 4px;
  background: color-mix(in srgb, var(--warn) 10%, var(--panel)); color: var(--text); font-size: .93rem;
}
.answer .table { border: 1px solid var(--border); border-radius: 10px; margin: .6em 0; }
.answer table { width: 100%; }
.answer th, .answer td { border: 0; border-bottom: 1px solid var(--border); padding: 7px 10px; }
.answer th { background: var(--panel); font-weight: 600; }
.answer tr:last-child td { border-bottom: 0; }
/* Pied d'une réponse : pull request, fichiers, job en pastilles ; modèle et requêtes à déplier. */
.answer-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.foot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.foot-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: .8rem; text-decoration: none;
}
.foot-chip svg { width: 14px; height: 14px; color: var(--muted); }
a.foot-chip:hover, a.foot-chip:focus-visible { border-color: var(--muted); }
.foot-chip b { font-weight: 600; }
.foot-more > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; color: var(--muted); font-size: .8rem; }
.foot-more > summary::-webkit-details-marker { display: none; }
.foot-more > summary svg { width: 14px; height: 14px; }
.foot-more[open] > summary { color: var(--text); }
.message .foot-more ul { margin: 6px 0 0; padding-left: 1.2em; color: var(--muted); font-size: .8rem; }
/* Réponses d'un même message (relances) : une page à la fois, ‹ › ou glissement. */
.attempts, .attempt { display: flex; flex-direction: column; gap: 14px; }
.attempt[hidden] { display: none; }
.attempts-bar { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.attempt-step {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer;
}
.attempt-step:disabled { opacity: .35; cursor: default; }
.attempt-step svg { width: 16px; height: 16px; }
.attempt-step.next svg { transform: scaleX(-1); }
.message .who { font-size: .78rem; color: var(--muted); margin-bottom: 4px; }
.message p { margin: 0 0 .7em; }
.message p:last-child { margin-bottom: 0; }
.message h3, .message h4, .message h5, .message h6 { margin: .9em 0 .4em; font-size: 1rem; }
.message ul, .message ol { margin: .3em 0 .7em; padding-left: 1.3em; }
.message li + li { margin-top: .3em; }
.message li > ul, .message li > ol { margin: .25em 0 .1em; padding-left: 1.1em; }
.message blockquote, .progress-card blockquote { margin: .4em 0; padding: 4px 10px; border-left: 3px solid var(--border); color: var(--muted); }
code { font: .88em ui-monospace, "Cascadia Code", Consolas, monospace; background: var(--panel-2); padding: 1px 5px; border-radius: 5px; }
pre { overflow-x: auto; background: var(--code-bg); padding: 12px; border-radius: 10px; }
pre code { background: none; padding: 0; }

/* Coloration du code : couleurs lisibles sur le fond des blocs, en sombre comme en clair. */
:root {
  --tok-com: #8f8a84; --tok-str: #a6d189; --tok-num: #ef9f76; --tok-kw: #ca9ee6; --tok-fn: #8caaee;
  --tok-type: #e5c890; --tok-tag: #e78284; --tok-attr: #81c8be; --tok-var: #f4b8e4;
}
:root[data-theme="light"] {
  --tok-com: #6c6f85; --tok-str: #2f7d1f; --tok-num: #c2410c; --tok-kw: #8839ef; --tok-fn: #1d5bd8;
  --tok-type: #9a6400; --tok-tag: #c8102e; --tok-attr: #0f766e; --tok-var: #b0307f;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --tok-com: #6c6f85; --tok-str: #2f7d1f; --tok-num: #c2410c; --tok-kw: #8839ef; --tok-fn: #1d5bd8;
    --tok-type: #9a6400; --tok-tag: #c8102e; --tok-attr: #0f766e; --tok-var: #b0307f;
  }
}
.tok-com { color: var(--tok-com); font-style: italic; }
.tok-str { color: var(--tok-str); }
.tok-num { color: var(--tok-num); }
.tok-kw { color: var(--tok-kw); }
.tok-fn { color: var(--tok-fn); }
.tok-type { color: var(--tok-type); }
.tok-tag { color: var(--tok-tag); }
.tok-attr { color: var(--tok-attr); }
.tok-var { color: var(--tok-var); }
.tok-add { color: var(--add-text); }
.tok-del { color: var(--del-text); }
/* Langage du bloc, en petit dans son coin. */
pre[data-lang] { position: relative; padding-top: 24px; }
pre[data-lang]::before {
  content: attr(data-lang); position: absolute; top: 5px; right: 10px;
  font: .72rem ui-monospace, Consolas, monospace; color: var(--muted);
}
hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }
.table { overflow-x: auto; }
/* Une colonne ne descend jamais sous son mot le plus long : « overflow-wrap: anywhere » des
   messages la réduisait à une lettre par ligne sur iPhone (« Ch / ec / kli / st », retour
   du 24 octobre 2026). Trop large pour l'écran, le tableau défile de côté. */
.table th, .table td { overflow-wrap: normal; word-break: normal; }
/* Le code et les adresses, eux, se coupent où il faut : un long nom de fonction ne fait pas
   déborder le tableau. */
.table td code, .table td a { overflow-wrap: anywhere; }
table { border-collapse: collapse; font-size: .9rem; }
th, td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; vertical-align: top; }

.progress-card { font-size: .9rem; padding: 10px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); overflow-wrap: anywhere; }
.progress-card ul { margin: .3em 0; padding-left: 1.2em; color: var(--muted); }
.progress-card p { margin: 0 0 .4em; }
.progress-card.old ul, .progress-card.old blockquote { display: none; }

/* Journal détaillé d'un passage, comme dans l'interface locale de Claw */
.progress-card.journal { padding-bottom: 6px; }
.progress-card.journal > p { margin: 0 0 4px; }
.transcript > summary, .ev > summary, .file > summary { list-style: none; cursor: pointer; }
.transcript > summary::-webkit-details-marker, .ev > summary::-webkit-details-marker, .file > summary::-webkit-details-marker { display: none; }
.transcript > summary { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--muted); font-size: .85rem; }
.transcript > summary::before, .ev > summary::before, .file > summary::before {
  content: ""; width: 6px; height: 6px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s; margin: 0 2px;
}
.transcript[open] > summary::before, .ev[open] > summary::before, .file[open] > summary::before { transform: rotate(45deg); }
.transcript .side, .ev .side, .file .side { margin-left: auto; flex: none; font-size: .78rem; color: var(--muted); }
.events { display: flex; flex-direction: column; border-left: 2px solid var(--border); margin: 2px 0 4px 3px; padding-left: 10px; }
/* Un passage de Claw : une ligne (état, durée, actions) qui déplie son journal. */
.run-card { padding: 0 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); }
.run-card > .transcript > summary { gap: 10px; padding: 10px 0; color: var(--text); font-size: .9rem; }
.run-card > .transcript > summary::before { display: none; }
.run-card > .transcript > summary::after {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 4px 2px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s;
}
.run-card > .transcript[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.run-card > .transcript[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.run-card .events { margin: 0 0 10px 11px; }
.run-card > .transcript > summary .side { padding: 2px 9px; border-radius: 999px; background: var(--panel-2); }
.run-state { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--muted); background: color-mix(in srgb, var(--muted) 18%, transparent); }
.run-state svg { width: 14px; height: 14px; stroke-width: 2.6; }
.run-state .spinner { width: 14px; height: 14px; }
.run-state.done { color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, transparent); }
.run-state.running { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.run-state.failed { color: var(--error); background: color-mix(in srgb, var(--error) 18%, transparent); }
.run-state.unfinished { color: var(--warn); background: color-mix(in srgb, var(--warn) 18%, transparent); }
.run-title { flex: 1; min-width: 0; line-height: 1.35; }
.run-title strong { font-weight: 600; }
.run-sub { display: block; margin-top: 2px; font-size: .8rem; color: var(--muted); }
/* Passage lancé, avant sa première progression : « Claw se prépare » et l'étape en cours. */
.run-card.preparing { padding: 10px 12px; }
.preparing-row { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
/* Réponse que Claw a fait reprendre (« Réponse provisoire ») : repliée dans le journal. */
.ev.draft > summary .verb { color: var(--muted); font-weight: 500; }
.ev { font-size: .88rem; min-width: 0; }
.ev > summary, .ev-line { display: flex; align-items: center; gap: 8px; padding: 6px 0; min-width: 0; }
/* Une étape dépliable a son chevron à droite : les icônes restent alignées d'une ligne à l'autre. */
.ev > summary::before { display: none; }
.ev > summary::after {
  content: ""; flex: none; width: 6px; height: 6px; margin: 0 3px 2px 2px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s;
}
.ev[open] > summary::after { transform: rotate(45deg); }
/* Long journal : les étapes plus anciennes derrière un bouton. */
.earlier > summary {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); font-size: .8rem; list-style: none; cursor: pointer;
}
.earlier > summary::-webkit-details-marker { display: none; }
.earlier > summary::before { content: "+"; font-weight: 700; }
.earlier[open] > summary::before { content: "−"; }
.ev svg { width: 16px; height: 16px; color: var(--muted); }
/* Photos trouvées par l'agent : petites vignettes toujours visibles, d'un toucher en grand. */
.photo-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 6px 24px; }
.photo-pill { width: 52px; height: 52px; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel-2); cursor: zoom-in; flex: none; }
.photo-pill img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-credit { margin: 8px 0 0; overflow-wrap: anywhere; }
/* Captures d'écran : vignette du premier écran (cadrée en haut), pastille du nombre de problèmes. */
.photo-pill.shot { position: relative; display: grid; place-items: center; }
.photo-pill.shot img { object-position: top; }
.photo-pill.shot svg { width: 20px; height: 20px; color: var(--muted); }
.shot-flag { position: absolute; right: 3px; bottom: 3px; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--error); color: #fff; font-size: .68rem; line-height: 16px; text-align: center; }
/* Capture entière : toute la largeur, à faire défiler. */
.shot-panel { display: flex; flex-direction: column; min-height: 0; }
.shot-scroll { overflow-y: auto; min-height: 0; border-radius: 10px; }
.shot-problems { flex: none; max-height: 40vh; overflow-y: auto; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); font-size: 0.875rem; }
.shot-problems summary { cursor: pointer; font-weight: 600; }
.shot-problems summary .muted { color: var(--muted); font-weight: 400; }
.shot-problems ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.shot-problems li { overflow-wrap: anywhere; line-height: 1.4; }
.shot-problems .help { margin: 6px 0 0; }
.full-image.tall { width: 100%; max-height: none; object-fit: initial; display: block; }
/* Serveur gratuit dans le nuage : étapes, puis le script à coller chez Oracle. */
.cloud-panel { overflow-y: auto; min-height: 0; }
.cloud-steps ol { margin: .4em 0 .8em; padding-left: 1.3em; display: flex; flex-direction: column; gap: .5em; }
.cloud-steps code { overflow-wrap: anywhere; }
.cloud-subtitle { margin: 18px 0 4px; font-size: 1rem; }
.cloud-steps .field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.cloud-steps textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: .8rem ui-monospace, "Cascadia Code", Consolas, monospace; resize: vertical; }
.cloud-steps input[type="file"] { color: var(--text); max-width: 100%; }
.robot-state { margin: 8px 0; color: var(--text); }
.cloud-steps [data-action="robot-stop"] { margin-top: 8px; }
.cloud-script { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.cloud-script pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .78rem; max-height: 40vh; overflow-y: auto; }
.ev .verb { flex: none; font-weight: 500; }
.ev .target { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ev.failed .verb, .ev.failed svg { color: var(--error); }
.ev.running .verb { color: var(--warn); }
.ev .spinner { width: 12px; height: 12px; }
.ev-body { padding: 2px 0 8px 24px; min-width: 0; }
.ev.text { padding: 6px 0; overflow-wrap: anywhere; }
.ev.text p { margin: 0 0 .6em; }
.ev.text p:last-child { margin-bottom: 0; }
.ev.notice, .ev.meta { padding: 3px 0; font-size: .8rem; color: var(--muted); }
.ev.notice::before { content: "› "; }
.think-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); font-size: .84rem; }
.io { display: flex; flex-direction: column; gap: 4px; }
.io-k { font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.io-v {
  margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--code-bg); max-height: 320px; overflow: auto;
  font: .78rem/1.45 ui-monospace, "Cascadia Code", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}
.io-v .none { color: var(--muted); font-style: italic; }
.io-note { font-size: .78rem; color: var(--muted); }
.diff {
  border-radius: 8px; background: var(--code-bg); max-height: 420px; overflow: auto;
  font: .76rem/1.45 ui-monospace, "Cascadia Code", Consolas, monospace;
}
.dl { display: flex; }
.dl .no { flex: none; width: 3.4em; padding-right: 8px; text-align: right; color: var(--muted); opacity: .7; user-select: none; }
.dl .tx { flex: 1; min-width: 0; padding-right: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dl.add { background: var(--add-bg); }
.dl.add .tx { color: var(--add-text); }
.dl.del { background: var(--del-bg); }
.dl.del .tx { color: var(--del-text); }
.dl mark { color: inherit; border-radius: 2px; }
.dl.add mark { background: var(--add-mark); }
.dl.del mark { background: var(--del-mark); }
.dl.gap { justify-content: center; padding: 2px 0; color: var(--muted); }
.add { color: var(--ok); }
.del { color: var(--error); }
.add.zero, .del.zero { color: var(--muted); }
.todos { display: flex; flex-direction: column; gap: 4px; }
.todo { display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; }
.todo .box { width: 15px; height: 15px; margin-top: 2px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--muted); border-radius: 4px; }
.todo .box svg { width: 11px; height: 11px; color: #fff; }
.todo.done .box { background: var(--ok); border-color: var(--ok); }
.todo.done span:last-child { color: var(--muted); text-decoration: line-through; }
.todo.doing .box { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 8px var(--accent); }

/* Requêtes gratuites */
/* `overflow-y` et `min-height: 0` : plus haut que l'écran (trois fournisseurs), le détail défile
   dans le panneau au lieu d'être coupé. */
.quota-sheet { display: flex; flex-direction: column; gap: 10px; padding: 0 4px 6px; overflow-y: auto; min-height: 0; }
.quota-sheet p { margin: 0; }
.quota-sheet .primary { align-self: flex-start; text-decoration: none; }
.quota-sheet .small-link { align-self: flex-start; }
.quota-big { font-size: 1.05rem; }
.quota-big strong { font-size: 1.8rem; margin-right: 4px; }
.quota-bar { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.quota-bar span { display: block; height: 100%; background: var(--accent); }
.quota-form { display: flex; flex-direction: column; gap: 12px; }
.meta-link.action { border: 1px solid var(--accent); color: var(--accent); background: transparent; cursor: pointer; font: inherit; font-size: .85rem; }
.meta-link.action.confirm { background: var(--accent); color: var(--accent-text); }
.meta-link.site { color: var(--ok); }
.unsent { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--warn); border-radius: 10px; font-size: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.small-link.primary-link { color: var(--accent); border-color: var(--accent); }
.publish-form { display: flex; flex-direction: column; gap: 12px; padding: 0 4px 6px; overflow-y: auto; }
.publish-form p { margin: 0; overflow-wrap: anywhere; }
.publish-form .choices { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; }
.publish-form label.check { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; }
.publish-form label.check input { margin-top: 1px; }
.publish-form .warn { color: var(--warn); }
.publish-form .primary { align-self: flex-start; }
.theme-choice { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
.theme-choice label { flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.theme-choice label:has(input:checked) { border-color: var(--accent); color: var(--accent); }

/* Fichiers de la branche */
.files h1 { font-size: 1.3rem; font-weight: 600; margin: 8px 0; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 10px; overflow-wrap: anywhere; }
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs .ref { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--muted); font-size: .82rem; }
.crumbs .ref svg { width: 14px; height: 14px; }
.file-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.file-list li + li { border-top: 1px solid var(--border); }
.file-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; color: var(--text); text-decoration: none; min-width: 0; }
.file-row:hover, .file-row:focus-visible { background: var(--panel); }
.file-row svg { width: 18px; height: 18px; color: var(--muted); }
.file-row .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.file-row small { color: var(--muted); flex: none; }
.file-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; overflow-wrap: anywhere; }
.file-head small { color: var(--muted); }
.file-head .small-link { margin-left: auto; }
.code-view { max-height: none; }
.file-image { max-width: 100%; border-radius: 10px; border: 1px solid var(--border); }
.md-rendered { margin-top: 10px; border: 1px solid var(--border); }

/* Modifications d'une session */
.changes h1 { font-size: 1.3rem; font-weight: 600; margin: 8px 0; }
.changes code { font-size: .85em; }
.file { margin: 8px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.file > summary { display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: var(--panel); font-size: .88rem; min-width: 0; }
.file .path { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .82rem; }
.file-status { flex: none; padding: 1px 6px; border-radius: 6px; font-size: .72rem; background: var(--panel-2); color: var(--muted); }
.file-status.added { color: var(--ok); }
.file-status.removed { color: var(--error); }
.file .diff { border-radius: 0; max-height: none; }
.file > p.help { padding: 8px 10px; margin: 0; }

.run-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 20px 0 0; color: var(--muted); font-size: .9rem; }
/* Actions rares d'une session (job, GitHub, archiver, supprimer) dans le menu « ••• ». */
.more-menu { position: relative; }
.more-menu > summary { list-style: none; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu .dots { font-size: .62rem; letter-spacing: 1px; line-height: 15px; }
.menu-list {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 6; display: flex; flex-direction: column; min-width: 210px; padding: 6px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--panel); box-shadow: 0 10px 30px var(--shadow);
}
.menu-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 9px;
  background: none; color: var(--text); font: inherit; font-size: .9rem; text-align: left; text-decoration: none; cursor: pointer;
}
.menu-list.from-left { right: auto; left: 0; }
.menu-item:hover, .menu-item:focus-visible { background: var(--panel-2); }
.menu-item svg { width: 16px; height: 16px; color: var(--muted); }
.menu-item.danger-item, .menu-item.danger-item svg { color: var(--error); }
.run-status.failed { color: var(--error); }
.run-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.small-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: .82rem; text-decoration: none; cursor: pointer;
}
.small-link:hover { color: var(--text); border-color: var(--muted); }
.small-link.stop { color: var(--error); border-color: color-mix(in srgb, var(--error) 45%, var(--border)); }
.small-link.stop.confirm { background: var(--error); border-color: var(--error); color: #fff; }
.small-link:disabled { opacity: .6; cursor: default; }
.small-link svg { width: 15px; height: 15px; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Zone de saisie */
.composer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg);
}
/* Fondu au-dessus de la zone de saisie : le contenu passe dessous sans se mêler aux puces. */
.composer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px;
  background: linear-gradient(to top, var(--bg), transparent); pointer-events: none;
}
.composer > * { max-width: var(--width); margin-left: auto; margin-right: auto; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel); font-size: .85rem; cursor: pointer; white-space: nowrap; max-width: 70vw;
}
.chip span { overflow: hidden; text-overflow: ellipsis; }
.chip:disabled { cursor: default; opacity: .8; }
.chip svg { width: 15px; height: 15px; color: var(--muted); }
/* Comme l'appli Claude : le texte sur toute la largeur, les outils dessous (trombone, options,
 * « / » à gauche, envoi à droite). Sur une seule ligne, le texte n'avait qu'un tiers de la
 * place sur un téléphone (remarque du 25 octobre 2026). */
.prompt {
  display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; gap: 2px 4px;
  padding: 10px 10px 8px 14px; border: 1px solid var(--border); border-radius: 22px; background: var(--panel);
}
.prompt:focus-within { border-color: var(--muted); }
.prompt textarea {
  grid-row: 1; grid-column: 1 / -1; width: 100%; min-height: 44px;
  border: 0; outline: 0; resize: none; background: transparent; color: var(--text);
  font: inherit; line-height: 1.45; padding: 4px 4px 6px 0; max-height: 220px;
}
.prompt .attach, .prompt .aids, .prompt .slash { grid-row: 2; margin-left: 0; }
.prompt .attach { margin-left: -8px; }
.prompt .send { grid-row: 2; grid-column: 5; }
.prompt textarea::placeholder { color: var(--muted); }
.attach {
  width: 38px; height: 38px; flex: none; margin-left: -8px; border: 0; border-radius: 11px; background: transparent;
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.attach:hover { color: var(--text); }

/* Équipe et Ultracode : menu déroulant à côté du trombone */
.prompt { position: relative; }
.aids {
  position: relative; width: 38px; height: 38px; flex: none; margin-left: -6px; border: 0; border-radius: 11px;
  background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.aids:hover, .aids[aria-expanded="true"] { color: var(--text); background: var(--panel-2); }
.aids.on { color: var(--accent); }
.aids.on::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.aid-menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 6; width: min(340px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--panel); box-shadow: 0 10px 30px var(--shadow);
}
.aid-menu[hidden] { display: none; }
.aid-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 10px;
  background: transparent; text-align: left; cursor: pointer;
}
.aid-item:hover, .aid-item:focus-visible { background: var(--panel-2); }
.aid-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.aid-text small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); transition: background .15s; }
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--muted); transition: transform .15s, background .15s;
}
.aid-item[aria-checked="true"] .switch { border-color: var(--accent); background: var(--accent); }
.aid-item[aria-checked="true"] .switch::after { transform: translateX(16px); background: var(--accent-text); }
/* Niveau de réflexion choisi : la puce en couleur */
.chip.on { border-color: var(--accent); }
.chip.on svg { color: var(--accent); }

/* Commandes « / » : bouton à côté des options, menu au-dessus du champ */
.slash {
  width: 38px; height: 38px; flex: none; margin-left: -6px; border: 0; border-radius: 11px;
  background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.slash:hover { color: var(--text); background: var(--panel-2); }
.slash-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 6; max-height: min(320px, 50vh); overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--panel); box-shadow: 0 10px 30px var(--shadow);
}
.slash-menu[hidden] { display: none; }
.slash-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); text-align: left; cursor: pointer;
}
.slash-item strong { font-weight: 600; }
.slash-item em { font-style: normal; font-weight: 400; color: var(--muted); }
.slash-item small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.slash-item:hover, .slash-item.on { background: var(--panel-2); }
.attachments { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.attachments[hidden] { display: none; }
.attachment { position: relative; flex: none; }
.attachment img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: block; }
.attachment button {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); display: grid; place-items: center; cursor: pointer;
}
.attachment button svg { width: 12px; height: 12px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.thumb { padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel); cursor: zoom-in; }
.thumb img { width: 96px; height: 96px; object-fit: cover; display: block; }
.thumb.missing { width: 96px; height: 96px; }
.image-panel { max-height: 92vh; }
.full-image { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 10px; align-self: center; }
.send {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-text);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.send:disabled { background: var(--panel-2); color: var(--muted); cursor: default; }
.send.sending svg { animation: spin 1s linear infinite; }

/* Tiroir des sessions */
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; width: min(340px, 86vw);
  padding: calc(10px + var(--app-inset-top)) 12px 12px; background: var(--panel); overflow-y: auto;
  box-shadow: 8px 0 30px rgba(0, 0, 0, .35);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.new-session {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 10px; background: transparent; cursor: pointer;
}
.drawer-head .select-toggle { margin-left: auto; margin-right: 4px; }
.session-item.selectable { cursor: pointer; }
.session-item.selectable input { margin: 2px 0 0; }
.drawer-actions {
  position: sticky; bottom: calc(-12px - env(safe-area-inset-bottom)); display: flex; justify-content: flex-end;
  padding: 10px 0 calc(12px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--border);
}
.drawer-actions[hidden] { display: none; }
.scrim { display: none; }

/* Menu : sessions ou fichiers */
.drawer-head { gap: 6px; }
.drawer-tabs { display: flex; gap: 2px; margin-right: auto; padding: 3px; border-radius: 10px; background: var(--panel-2); }
.drawer-tab { padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 500; cursor: pointer; }
.drawer-tab.current { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px var(--shadow); }
.pane[hidden] { display: none; }
.explorer-head { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.explorer-head .chip { max-width: 100%; }
.explorer .crumbs { gap: 2px; font-size: .9rem; }
.explorer .crumbs button { padding: 2px 4px; border: 0; border-radius: 6px; background: transparent; color: var(--accent); font: inherit; cursor: pointer; }
.explorer .crumbs > span:not(.sep) { padding: 2px 4px; }
.explorer .crumbs .sep { color: var(--muted); }
.explorer .file-list { border: 0; border-radius: 0; }
.explorer .file-list li + li { border-top: 0; }
.explorer .file-row { width: 100%; padding: 9px 8px; border: 0; border-radius: 8px; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.explorer .file-row:hover, .explorer .file-row:focus-visible { background: var(--panel-2); }

/* Branches : choisir, créer, renommer */
.sheet-sub { display: flex; align-items: center; gap: 6px; padding: 0 4px 8px; overflow-wrap: anywhere; }
.sheet-sub svg { width: 15px; height: 15px; }
.branch-body { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.branch-row { display: flex; align-items: center; gap: 4px; }
.branch-row .sheet-item { flex: 1; min-width: 0; }
.branch-row .sheet-label span { overflow-wrap: anywhere; }
.branch-row .sheet-label svg { width: 15px; height: 15px; color: var(--muted); }
.branch-row .icon-button { flex: none; color: var(--muted); }
.branch-row .icon-button:hover, .branch-row .icon-button:focus-visible { color: var(--text); background: var(--panel-2); }
.branch-form { display: flex; flex-direction: column; gap: 12px; padding: 0 4px 4px; }
.branch-form label { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
.branch-form input[type="text"], .branch-form select {
  padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit;
}
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.form-actions .danger { margin-top: 0; }
.form-actions .danger:disabled { opacity: .5; cursor: default; }
.drawer-open .scrim { display: block; position: fixed; inset: 0; z-index: 15; background: rgba(0, 0, 0, .45); }

/* Feuille de choix */
.sheet { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .5); }
.sheet[hidden] { display: none; }
/* Le défilement d'une fenêtre ne passe jamais à la page derrière (rebond compris). */
html.scroll-locked, html.scroll-locked body { overflow: hidden; overscroll-behavior: none; }
.sheet, .drawer, .sheet-panel, .sheet-panel * { overscroll-behavior: contain; }
.sheet-panel {
  width: 100%; max-width: 560px; max-height: 78vh; display: flex; flex-direction: column;
  background: var(--panel); border-radius: 18px 18px 0 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
}
@media (min-width: 700px) { .sheet { align-items: center; } .sheet-panel { border-radius: 18px; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; }
.sheet-search {
  width: 100%; padding: 10px 12px; margin-bottom: 8px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font: inherit;
}
.sheet-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
/* Onglets d'une liste (fournisseurs des modèles : OpenRouter, Google Gemini, NVIDIA). */
/* `flex: none` : la barre défile en largeur ; sans cela, dans la colonne du panneau (hauteur
   limitée), une longue liste l'écrasait presque à rien et ses textes passaient sur la recherche
   (vu sur téléphone). */
.sheet-tabs { flex: none; display: flex; gap: 6px; padding: 0 4px 10px; overflow-x: auto; scrollbar-width: none; }
.sheet-tab {
  flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent;
  color: var(--muted); font: inherit; font-size: .85rem; white-space: nowrap; cursor: pointer;
}
.sheet-tab.on { background: var(--panel-2); color: var(--text); border-color: var(--muted); }
.sheet-tab small { margin-left: 4px; color: var(--muted); }
.sheet-note { flex: none; margin: 0 4px 8px; }
/* Détail du quota : une partie par fournisseur, celle du modèle choisi d'abord. */
/* Colonne flexible, comme le détail : le bouton « Ouvrir les réglages » y reste un bloc (en ligne,
   son rembourrage passait sur la phrase d'au-dessus). */
.quota-provider { flex: none; display: flex; flex-direction: column; gap: 10px; }
.quota-provider + .quota-provider { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
.quota-provider h3 { margin: 0; font-size: .95rem; }
.quota-provider h3 small { margin-left: 8px; color: var(--accent); font-weight: 500; font-size: .8rem; }
.quota-meter.provider small { color: var(--muted); }
.sheet-item {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 10px 12px; border: 0;
  border-radius: 10px; background: transparent; text-align: left; cursor: pointer;
}
.sheet-item:hover, .sheet-item:focus-visible { background: var(--panel-2); }
.sheet-item.current { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.sheet-item small { color: var(--muted); }
.sheet-label { display: inline-flex; align-items: center; gap: 8px; }
.sheet-item.pinned { color: var(--accent); border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0; margin-bottom: 4px; }
.sheet-item.pinned svg { width: 18px; height: 18px; }

/* Création d'un dépôt */
.create-repo { display: flex; flex-direction: column; gap: 12px; padding: 0 4px 4px; overflow-y: auto; }
.create-repo label { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
.create-repo input[type="text"], .create-repo select {
  padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit;
}
.create-repo .owner-line { margin-top: -6px; color: var(--muted); overflow-wrap: anywhere; }
.create-repo .owner-line .slug { color: var(--text); }
.create-repo .visibility { display: flex; gap: 18px; margin: 0; padding: 0; border: 0; }
.create-repo label.check { flex-direction: row; align-items: center; gap: 8px; }

/* Suppression de sessions */
.delete-sessions { display: flex; flex-direction: column; gap: 12px; padding: 0 4px 4px; overflow-y: auto; }
.delete-sessions ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.delete-sessions li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); overflow-wrap: anywhere; }
.delete-sessions li small, .delete-sessions li.more { color: var(--muted); }
.delete-sessions label.check { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; }
.delete-sessions label.check input { margin: 1px 0 0; }
.delete-sessions .warn { color: var(--warn); }
.delete-confirm { padding: 11px 16px; border-radius: 10px; border: 0; background: var(--error); color: #fff; font: inherit; font-weight: 500; cursor: pointer; }
.delete-confirm:disabled { opacity: .7; cursor: default; }

/* Réglages : une page à part, avec son retour à l'accueil */
.icon-button.active { background: var(--panel); color: var(--accent); }
.back {
  display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 0 -6px; padding: 4px 6px;
  border-radius: 8px; color: var(--muted); text-decoration: none; font-size: .92rem;
}
.back:hover, .back:focus-visible { color: var(--text); background: var(--panel); }
.ready { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--ok); border-radius: var(--radius); }
.ready p { margin: 0 0 10px; }
.ready .primary { display: inline-block; text-decoration: none; }
.help { margin: 0; font-size: .85rem; color: var(--muted); }
.primary, .danger, .secondary { align-self: flex-start; padding: 10px 16px; border-radius: 10px; border: 0; cursor: pointer; font-weight: 500; }
.primary { background: var(--accent); color: var(--accent-text); }
.secondary { background: transparent; border: 1px solid var(--border); color: var(--text); }
.secondary:focus-visible, .primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.danger { margin-top: 28px; background: transparent; border: 1px solid var(--error); color: var(--error); }

/* Réglages en cartes groupées : titre du groupe, lignes séparées d'un filet, note dessous. */
.settings { padding-bottom: 32px; }
.settings h1 { font-size: 1.85rem; font-weight: 700; letter-spacing: -.01em; margin: 6px 0 4px; }
.settings .intro { color: var(--muted); margin: 4px 0 0; }
.settings .ready { margin: 14px 0 0; }
.group-title { margin: 26px 6px 8px; font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.group { margin: 0; padding: 0; list-style: none; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.group + .group { margin-top: 12px; }
.group > * + *, .disclosure > form > * + *, .checks > li + li { border-top: 1px solid var(--border); }
.settings .row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 10px 14px;
  background: none; border-radius: 0; color: inherit; font: inherit; text-align: left;
}
.settings button.row { border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
.settings .group > button.row:first-child { border-top: 0; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row-title { font-weight: 500; overflow-wrap: anywhere; }
.row-sub { font-size: .82rem; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.row-icon {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.settings .row > svg:last-child { width: 18px; height: 18px; color: var(--muted); }
.link-row:hover, .disclosure > summary:hover { background: var(--panel-2); }
.account .avatar {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font-size: 1.15rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #6b3fd4));
}
.pill { flex: none; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.pill.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.disclosure > summary { list-style: none; cursor: pointer; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary > svg:last-child { transition: transform .2s; }
.disclosure[open] > summary > svg:last-child { transform: rotate(90deg); }
.disclosure[open] > summary { border-bottom: 1px solid var(--border); }
.field-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.field-row input {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font: inherit;
}
.field-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; }
.settings .row-actions .primary { flex: 1 1 auto; min-height: 46px; border-radius: 12px; font-size: 1rem; }
/* Interrupteurs (cases à cocher) et choix de la machine (boutons radio), à la façon d'iOS. */
.switch-row { cursor: pointer; }
.switch-row input {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 50px; height: 30px; margin: 0; border: 0;
  border-radius: 999px; background: var(--border); cursor: pointer; transition: background .2s;
}
.switch-row input::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s;
}
.switch-row input:checked { background: var(--ok); }
.switch-row input:checked::before { transform: translateX(20px); }
.choice { cursor: pointer; }
.choice input {
  -webkit-appearance: none; appearance: none; flex: none; width: 24px; height: 24px; margin: 0;
  border-radius: 50%; border: 2px solid var(--border); background: transparent; cursor: pointer;
}
.choice input:checked { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 5px, transparent 6px); }
.choice:has(input:checked) { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.choice:has(input:checked) .row-title { color: var(--accent); }
.switch-row input:focus-visible, .choice input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.segmented {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
  border-radius: 14px; background: var(--panel-2); border: 1px solid var(--border);
}
.segmented label { position: relative; display: block; cursor: pointer; }
.segmented input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.segmented span { display: block; padding: 9px 6px; border-radius: 10px; text-align: center; font-weight: 500; color: var(--muted); transition: background .15s, color .15s; }
.segmented input:checked + span { background: var(--panel); color: var(--text); box-shadow: 0 1px 4px var(--shadow); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
/* État du moteur : une ligne par vérification, pastille verte, rouge ou grise. */
.checks { margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.row-icon.state { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); font-weight: 700; }
.row-icon.state.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.row-icon.state.ok::before { content: "✓"; }
.row-icon.state.ko { background: color-mix(in srgb, var(--error) 18%, transparent); color: var(--error); }
.row-icon.state.ko::before { content: "!"; }
.checks li { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; overflow-wrap: anywhere; }
.checks li::before {
  content: ""; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  font-size: .72rem; font-weight: 700; border: 2px solid color-mix(in srgb, var(--muted) 55%, transparent);
}
.checks li.ok::before { content: "✓"; border: 0; color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, transparent); }
.checks li.ko::before { content: "!"; border: 0; color: var(--error); background: color-mix(in srgb, var(--error) 18%, transparent); }
.group-foot { margin: 8px 6px 0; font-size: .82rem; color: var(--muted); }
.group-foot p { margin: 0 0 6px; }
.more > summary { display: inline-flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; color: var(--accent); font-weight: 500; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "›"; display: inline-block; transition: transform .2s; }
.more[open] > summary::after { transform: rotate(90deg); }
.more > p { margin: 8px 0 0; }
.perms { margin: 8px 0; }
.perms dt { margin-top: 8px; font-weight: 600; color: var(--text); }
.perms dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.perm { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: .78rem; }
.danger-group { margin-top: 28px; }
.settings .danger-row { justify-content: center; color: var(--error); font-weight: 600; }
.settings .danger-row:hover { background: color-mix(in srgb, var(--error) 10%, transparent); }

/* Messages de l'appli */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--composer-space, 150px) + 12px); transform: translateX(-50%); z-index: 40;
  max-width: min(92vw, 560px); padding: 10px 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border);
  box-shadow: 0 6px 24px var(--shadow); font-size: .92rem;
}
.toast.error { border-color: var(--error); }
/* Flèche « Revenir en bas » : au-dessus de la zone de saisie (et de son bloc de tâches). */
.to-bottom {
  position: fixed; left: 50%; bottom: calc(var(--composer-space, 150px) + 14px); transform: translateX(-50%); z-index: 5;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  box-shadow: 0 4px 16px var(--shadow); cursor: pointer;
}
.to-bottom svg { width: 20px; height: 20px; stroke-width: 2; }
.to-bottom[hidden] { display: none; }
.toast[hidden] { display: none; }

@media (max-width: 520px) {
  .home { padding-top: 6vh; }
  .greeting { font-size: 1.35rem; margin-bottom: 28px; }
  .run-actions { margin-left: 0; }
  .answer table { font-size: .84rem; }
  .answer th, .answer td { padding: 6px 8px; }
}

/* Étapes d'un passage en cours : arrivées par paquets avec le journal, montrées une par une. */
.transcript .pending { display: none; }
.transcript .arrived { animation: step-in .32s ease-out both; }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .transcript .arrived { animation: none; } }

/* Bloc au-dessus de la zone de saisie : tâches de Claw (pliables) et ses questions en cartes. */
.dock { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
.dock[hidden] { display: none; }
.dock-card { border: 1px solid var(--border); border-radius: 14px; background: var(--panel); min-width: 0; }
.dock-tasks > summary {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; list-style: none; cursor: pointer; min-width: 0;
}
.dock-tasks > summary::-webkit-details-marker { display: none; }
.dock-icon { display: inline-flex; flex: none; color: var(--muted); }
.dock-icon svg { width: 16px; height: 16px; }
.dock-title { display: inline-flex; align-items: baseline; gap: 6px; flex: none; font-size: .88rem; }
.dock-count { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.dock-current { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .84rem; }
.dock-chevron { display: inline-flex; flex: none; color: var(--muted); transition: transform .18s ease-out; }
.dock-chevron svg { width: 15px; height: 15px; transform: rotate(90deg); }
.dock-tasks[open] .dock-chevron { transform: rotate(180deg); }
.dock-tasks[open] .dock-current { visibility: hidden; }
.dock-todos { list-style: none; margin: 0; padding: 0 12px 10px; display: grid; gap: 6px; }
.dock-todos li { display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; line-height: 1.4; min-width: 0; }
.dock-todos li span:last-child { min-width: 0; overflow-wrap: anywhere; }
.dock-todos .box {
  flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-top: 2px;
  border: 1.5px solid var(--border); border-radius: 5px;
}
.dock-todos .box svg { width: 12px; height: 12px; }
.dock-todos li.done { color: var(--muted); }
.dock-todos li.done span:last-child { text-decoration: line-through; }
.dock-todos li.done .box { border-color: var(--ok); background: var(--ok); color: #fff; }
.dock-todos li.doing .box { border-color: var(--accent); }
.dock-todos li.doing { font-weight: 600; }
/* Plus aucun passage ne travaille et la liste n'est pas finie : elle le dit. */
.dock-questions { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; }
.dock-head { display: flex; align-items: center; gap: 8px; font-size: .88rem; min-width: 0; }
.dock-head strong { flex: 1; min-width: 0; }
.dock-nav { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.dock-nav .attempt-step { width: 30px; height: 30px; }
.q-card { display: grid; gap: 8px; min-width: 0; animation: step-in .2s ease-out; }
.q-card[hidden] { display: none; }
.dock-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dock-foot .choices-hint { margin: 0; color: var(--muted); font-size: .8rem; }

/* Bouton d'un onglet du choix (« Rechercher tous les modèles gratuits ») : un vrai bouton, au-dessus
   de la liste, jamais une ligne parmi les modèles. */
.sheet-action { flex: none; display: flex; flex-direction: column; gap: 6px; margin: 0 4px 10px; }
.sheet-action[hidden] { display: none; }
.sheet-action-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px;
  border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 600;
  cursor: pointer; transition: transform .15s ease-out, filter .15s ease-out;
}
.sheet-action-button svg { width: 17px; height: 17px; }
.sheet-action-button:hover { filter: brightness(1.06); }
.sheet-action-button:active { transform: scale(.98); }
.sheet-action-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sheet-action small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.questions-moved {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; padding: 9px 12px; border: 1px dashed var(--border);
  border-radius: 12px; color: var(--muted); font-size: .86rem;
}
.questions-moved svg { width: 16px; height: 16px; flex: none; }

/* Outils MCP, documents et routines (js/tools.js) */
.drawer-links { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.drawer-links a { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.drawer-links a:hover, .drawer-links a:focus-visible { background: var(--panel-2); }
.drawer-links svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.tools-page .lead { color: var(--muted); margin: 0 0 12px; line-height: 1.45; }
.tools-body { display: flex; flex-direction: column; gap: 12px; }
.tools-filter {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--text); font: inherit;
}
.tools-group { border: 1px solid var(--border); border-radius: 12px; padding: 0 12px 12px; }
.tools-group[hidden] { display: none; }
.tools-group > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 12px 0 8px; cursor: pointer; list-style: none; }
.tools-group > summary::-webkit-details-marker { display: none; }
.tools-group > summary code { color: var(--muted); font-size: .82rem; }
.tools-group > summary small { margin-left: auto; color: var(--muted); }
.tools-group .about { margin: 0 0 10px; color: var(--muted); font-size: .9rem; line-height: 1.4; }
.tool-row { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; }
.tool-row[hidden] { display: none; }
.tool-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tool-name code { font-size: .86rem; overflow-wrap: anywhere; }
.tool-badge { padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: .72rem; }
.tool-title { font-size: .92rem; }
.tool-note { color: var(--warn); font-size: .8rem; line-height: 1.35; }
.doc-tabs .chip { text-decoration: none; color: var(--text); }
.doc-tabs .chip.current { border-color: var(--accent); color: var(--accent); }
.doc-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-body { padding: 4px 0; }
.doc-subtitle { font-size: 1.05rem; font-weight: 600; margin: 8px 0 0; }
.doc-comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.doc-comments > li { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.doc-comments > li.resolved { opacity: .7; }
.doc-comment { display: flex; flex-direction: column; gap: 2px; }
.doc-comment + .doc-comment { padding-left: 12px; border-left: 2px solid var(--border); }
.doc-comment small { color: var(--muted); }
.doc-comment blockquote { margin: 2px 0; padding-left: 8px; border-left: 2px solid var(--accent); color: var(--muted); }
.doc-comment-form { display: flex; flex-direction: column; gap: 8px; }
.doc-comment-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--text); font: inherit; resize: vertical;
}
.notice { border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--border)); border-radius: 10px; padding: 10px 12px; }
.notice p { margin: 0 0 8px; line-height: 1.45; }
.notice pre { margin: 0; white-space: pre; overflow-x: auto; font-size: .8rem; }
.routine-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.routine-row.off .routine-prompt, .routine-row.off strong { color: var(--muted); }
.routine-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.routine-prompt { margin: 0; overflow-wrap: anywhere; line-height: 1.4; }
.routine-row small { color: var(--muted); line-height: 1.45; }
.routine-row small code { font-size: .8rem; }
.routine-toggle { width: auto; padding: 0; border: 0; background: transparent; }
.file-row .small-link { flex: none; }

/* JTest : le travail de la session sur le serveur, ouvert sur le téléphone */
.jtest-card { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.jtest-card.online { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); }
.jtest-card.failed { border-color: color-mix(in srgb, var(--error) 55%, var(--border)); }
.jtest-card p { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.jtest-card.old { flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; background: transparent; color: var(--muted); font-size: .88rem; }
.jtest-card svg { width: 18px; height: 18px; flex: none; }
.jtest-head { display: flex; align-items: center; gap: 8px; }
.jtest-head svg { color: var(--accent); }
.jtest-state { color: var(--muted); font-size: .88rem; }
.jtest-card.online .jtest-state { color: var(--ok); }
.jtest-card.failed .jtest-state { color: var(--error); }
.jtest-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: stretch; padding: 12px 14px; border-radius: 12px; background: var(--accent); color: var(--accent-text); font-weight: 600; text-decoration: none; }
.jtest-open svg { color: inherit; }
.jtest-url, .jtest-until { color: var(--muted); font-size: .85rem; }
.jtest-card .jtest-lock { display: flex; align-items: flex-start; gap: 6px; color: var(--muted); font-size: .85rem; }
.jtest-lock svg { width: 15px; height: 15px; margin-top: 2px; color: var(--ok); }
.jtest-card pre { max-height: 240px; overflow: auto; font-size: .78rem; }

/* Verrou : par-dessus toute l'appli, rien derrière ne se voit ni ne se touche */
body.locked { overflow: hidden; }
.lock-screen {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow-y: auto;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); background: var(--bg);
}
.lock-panel { display: flex; flex-direction: column; gap: 14px; width: min(380px, 100%); }
.lock-logo {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--border); color: var(--accent);
}
.lock-logo svg { width: 26px; height: 26px; }
.lock-panel h1 { margin: 4px 0 0; font-size: 1.6rem; line-height: 1.2; }
.lock-intro, .lock-help { margin: 0; color: var(--muted); line-height: 1.5; }
.lock-intro strong { color: var(--text); }
.lock-help { font-size: .85rem; }
.lock-field { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.lock-field input {
  min-height: 48px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel); color: var(--text); font: inherit; font-size: 1rem;
}
.lock-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lock-error { margin: 0; color: var(--error); }
.face-error { margin: 0; padding: 0 16px; color: var(--error); }
.lock-panel .primary, .lock-panel .secondary {
  align-self: stretch; min-height: 48px; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.lock-panel button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lock-forgot { color: var(--muted); font-size: .9rem; }
.lock-forgot summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.lock-forgot p { margin: 0 0 10px; line-height: 1.5; }