@imenam/mcp-messenger 1.0.10 → 1.0.13

package/dist/src/server/ui/styles.css

@@ -1,368 +1,1228 @@
-:root {
-  --bg: #f6f7f9;
-  --panel: #ffffff;
-  --border: #e2e5ea;
-  --text: #1c2024;
-  --muted: #6b7280;
-  --accent: #2f6feb;
-  --accent-soft: #e8f0fe;
-  --danger: #c8362f;
-  --radius: 8px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #14171c;
-    --panel: #1b1f26;
-    --border: #2b313b;
-    --text: #e6e9ee;
-    --muted: #98a1b0;
-    --accent: #7aa2f7;
-    --accent-soft: #223049;
-    --danger: #f07178;
-  }
-}
-
-* {
-  box-sizing: border-box;
-}
-
-/* `hidden` doit l'emporter sur les `display` posés plus bas (barre de jeton). */
-[hidden] {
-  display: none !important;
-}
-
-body {
-  margin: 0;
-  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  background: var(--bg);
-  color: var(--text);
-}
-
-.topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 12px 20px;
-  background: var(--panel);
-  border-bottom: 1px solid var(--border);
-}
-
-.brand {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-}
-
-.brand h1 {
-  font-size: 16px;
-  margin: 0;
-}
-
-.dot {
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  background: var(--muted);
-  align-self: center;
-}
-
-.dot.ok {
-  background: #2ea043;
-}
-
-.dot.ko {
-  background: var(--danger);
-}
-
-.controls {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.auto {
-  color: var(--muted);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-button {
-  font: inherit;
-  padding: 6px 12px;
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  background: var(--panel);
-  color: var(--text);
-  cursor: pointer;
-}
-
-button:hover {
-  border-color: var(--accent);
-}
-
-button.link {
-  border: none;
-  background: none;
-  color: var(--accent);
-  padding: 0;
-}
-
-input[type="search"],
-input[type="password"] {
-  font: inherit;
-  padding: 6px 10px;
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  background: var(--panel);
-  color: var(--text);
-}
-
-.token-bar {
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 20px;
-  background: var(--accent-soft);
-  border-bottom: 1px solid var(--border);
-}
-
-.token-bar input {
-  min-width: 320px;
-}
-
-main {
-  display: grid;
-  grid-template-columns: 260px minmax(320px, 1fr) minmax(320px, 1.2fr);
-  gap: 12px;
-  padding: 12px;
-  align-items: start;
-  height: calc(100vh - 58px);
-}
-
-.panel {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  height: 100%;
-  overflow: auto;
-  padding: 12px;
-}
-
-.panel h2 {
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--muted);
-  margin: 0 0 8px;
-}
-
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.agents li {
-  padding: 8px;
-  border-radius: var(--radius);
-  cursor: pointer;
-}
-
-.agents li:hover {
-  background: var(--accent-soft);
-}
-
-.agents li.selected {
-  background: var(--accent-soft);
-  outline: 1px solid var(--accent);
-}
-
-.agents .name {
-  font-weight: 600;
-}
-
-/* Le nom de la boîte, sous celui de l'agent : le sujet de la session, sans lui voler la vedette. */
-.agents .mailbox-name {
-  font-size: 12px;
-}
-
-/* L'adresse reste lisible pour être recopiée, mais ne prend plus le pas sur le nom. */
-.agents .id {
-  color: var(--muted);
-  font-size: 11px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  word-break: break-all;
-}
-
-.filters {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 10px;
-}
-
-.filters input {
-  flex: 1;
-}
-
-.messages li {
-  padding: 10px;
-  border-radius: var(--radius);
-  border: 1px solid transparent;
-  cursor: pointer;
-}
-
-.messages li:hover {
-  background: var(--accent-soft);
-}
-
-.messages li.selected {
-  border-color: var(--accent);
-  background: var(--accent-soft);
-}
-
-.messages .subject {
-  font-weight: 600;
-}
-
-/* Nom du fil : au-dessus de l'expéditeur, en accent, pour rattacher le message d'un coup d'œil. */
-.messages .thread-name {
-  color: var(--accent);
-  font-size: 12px;
-  margin-top: 2px;
-}
-
-.detail .thread-description {
-  color: var(--muted);
-  margin: 6px 0 10px;
-}
-
-.messages .route {
-  color: var(--muted);
-  font-size: 12px;
-  word-break: break-all;
-}
-
-.messages .preview {
-  color: var(--muted);
-  margin-top: 4px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.muted {
-  color: var(--muted);
-}
-
-.error {
-  color: var(--danger);
-}
-
-.badge {
-  display: inline-block;
-  font-size: 11px;
-  padding: 1px 6px;
-  border-radius: 999px;
-  border: 1px solid var(--border);
-  color: var(--muted);
-  margin-left: 6px;
-}
-
-.badge.unread {
-  border-color: var(--accent);
-  color: var(--accent);
-}
-
-.badge.high {
-  border-color: var(--danger);
-  color: var(--danger);
-}
-
-.detail h3 {
-  margin: 0 0 4px;
-  font-size: 16px;
-}
-
-.detail .meta {
-  color: var(--muted);
-  font-size: 12px;
-  white-space: pre-line;
-  margin-bottom: 12px;
-  word-break: break-all;
-}
-
-.detail .body {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  border-top: 1px solid var(--border);
-  padding-top: 12px;
-}
-
-/* Historique du fil sous le message : discret replié, cité déplié. */
-.detail .history-toggle {
-  margin-top: 14px;
-  color: var(--accent);
-  border-style: dashed;
-}
-
-.detail .history {
-  margin-top: 10px;
-}
-
-/* Bordure d'accent à gauche : la convention du texte cité dans un client mail. */
-.detail .quoted {
-  border-left: 2px solid var(--border);
-  padding: 4px 0 4px 12px;
-  margin-top: 12px;
-  color: var(--muted);
-}
-
-.detail .quoted-head {
-  font-size: 12px;
-  word-break: break-all;
-}
-
-.detail .quoted-subject {
-  font-weight: 600;
-  color: var(--text);
-  margin-top: 2px;
-}
-
-.detail .quoted-body {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  margin-top: 6px;
-}
-
-.detail .thread-link {
-  margin-top: 14px;
-}
-
-.detail .deliveries {
-  margin-top: 16px;
-  border-top: 1px solid var(--border);
-  padding-top: 12px;
-}
-
-.detail .deliveries li {
-  padding: 2px 0;
-  color: var(--muted);
-}
-
-.thread-message {
-  border-top: 1px solid var(--border);
-  padding-top: 10px;
-  margin-top: 10px;
-}
-
-.empty {
-  color: var(--muted);
-  padding: 24px 8px;
-  text-align: center;
-}
+:root {
+  --bg: #f6f7f9;
+  --panel: #ffffff;
+  --border: #e2e5ea;
+  --border-soft: #eef0f3;
+  --text: #1c2024;
+  --muted: #6b7280;
+  --accent: #2f6feb;
+  --accent-soft: #e8f0fe;
+  --accent-softer: #dbe6fb;
+  --ok: #1e7a34;
+  --ok-soft: #e6f4ea;
+  --warn: #b45309;
+  --warn-soft: #fff3e0;
+  --danger: #c8362f;
+  --danger-soft: #fdecea;
+  --neutral-soft: #eef0f3;
+  --radius: 8px;
+  --topbar-h: 56px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #14171c;
+    --panel: #1b1f26;
+    --border: #2b313b;
+    --border-soft: #232831;
+    --text: #e6e9ee;
+    --muted: #98a1b0;
+    --accent: #7aa2f7;
+    --accent-soft: #223049;
+    --accent-softer: #2b3d5c;
+    --ok: #7ee2a0;
+    --ok-soft: #1d3327;
+    --warn: #f0b429;
+    --warn-soft: #3a2c14;
+    --danger: #f07178;
+    --danger-soft: #3a2023;
+    --neutral-soft: #262c35;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+body {
+  margin: 0;
+  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.icon {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  flex: none;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+/* --- Barre du haut -------------------------------------------------------- */
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  height: var(--topbar-h);
+  padding: 0 20px;
+  background: var(--panel);
+  border-bottom: 1px solid var(--border);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: none;
+}
+
+.brand-mark {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.brand h1 {
+  font-size: 16px;
+  margin: 0;
+  white-space: nowrap;
+}
+
+/* La pastille dit l'état du serveur d'un coup d'œil : couleur + mot, jamais la couleur seule. */
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  white-space: nowrap;
+  background: var(--neutral-soft);
+  color: var(--muted);
+}
+
+.pill-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.pill--ok {
+  background: var(--ok-soft);
+  color: var(--ok);
+}
+
+.pill--ko {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+
+.topbar-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  max-width: 420px;
+  margin: 0 auto;
+  padding: 0 12px;
+  height: 32px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--muted);
+}
+
+.topbar-search input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-size: 13px;
+  color: var(--text);
+  outline: none;
+}
+
+.topbar-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: none;
+  margin-left: auto;
+}
+
+/* Interrupteur du rafraîchissement : la case native est masquée, pas retirée. */
+.switch {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.switch input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switch-track {
+  width: 34px;
+  height: 18px;
+  border-radius: 999px;
+  background: var(--border);
+  padding: 2px;
+  transition: background 0.15s;
+}
+
+.switch-knob {
+  display: block;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--panel);
+  transition: transform 0.15s;
+}
+
+.switch input:checked + .switch-track {
+  background: var(--accent);
+}
+
+.switch input:checked + .switch-track .switch-knob {
+  transform: translateX(16px);
+}
+
+.switch input:focus-visible + .switch-track {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.switch-label {
+  font-size: 13px;
+  color: var(--muted);
+}
+
+/* --- Boutons -------------------------------------------------------------- */
+
+.btn {
+  font: inherit;
+  font-size: 13px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 7px 12px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--text);
+  cursor: pointer;
+}
+
+.btn:hover {
+  border-color: var(--accent);
+}
+
+.btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.btn--icon {
+  padding: 7px;
+}
+
+.btn--ghost {
+  border-color: transparent;
+  background: none;
+  color: var(--muted);
+}
+
+.btn--link {
+  border-color: transparent;
+  background: none;
+  color: var(--accent);
+  padding: 7px 4px;
+}
+
+.btn--primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #ffffff;
+  font-weight: 600;
+  padding: 10px 12px;
+}
+
+.btn--primary:hover {
+  filter: brightness(1.05);
+}
+
+.btn--block {
+  width: 100%;
+}
+
+/* --- Connexion ------------------------------------------------------------ */
+
+.login {
+  display: flex;
+  justify-content: center;
+  padding: 120px 20px 20px;
+}
+
+.card {
+  width: 420px;
+  max-width: 100%;
+  padding: 32px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
+  text-align: center;
+}
+
+.card-badge {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 16px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.card-badge .icon {
+  width: 22px;
+  height: 22px;
+}
+
+.card h2 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.card-sub {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.card-note {
+  margin: 16px 0 0;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--muted);
+  text-align: left;
+}
+
+.field {
+  display: block;
+  margin: 24px 0 16px;
+  text-align: left;
+}
+
+.field-label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.field-input {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  height: 40px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--muted);
+}
+
+.field-input:focus-within {
+  border-color: var(--accent);
+}
+
+.field-input input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: var(--text);
+  outline: none;
+}
+
+.field-eye {
+  border: 0;
+  background: none;
+  padding: 0;
+  color: var(--muted);
+  cursor: pointer;
+  display: flex;
+}
+
+.field-error {
+  display: block;
+  margin-top: 8px;
+  min-height: 16px;
+  font-size: 12px;
+  color: var(--danger);
+}
+
+/* Le champ vire au rouge en même temps que le message : l'erreur est portée par les deux. */
+.field.is-invalid .field-input {
+  border-color: var(--danger);
+}
+
+/* --- Console -------------------------------------------------------------- */
+
+.console {
+  display: grid;
+  grid-template-columns: 240px 400px minmax(0, 1fr);
+  height: calc(100vh - var(--topbar-h));
+}
+
+.console.has-sheet {
+  grid-template-columns: 240px 360px minmax(0, 1fr) 360px;
+}
+
+.console.is-collapsed {
+  grid-template-columns: 57px 360px minmax(0, 1fr);
+}
+
+.console.is-collapsed.has-sheet {
+  grid-template-columns: 57px 360px minmax(0, 1fr) 360px;
+}
+
+/* --- Colonne des agents --------------------------------------------------- */
+
+.agents {
+  border-right: 1px solid var(--border);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.agents-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 12px 8px 20px;
+}
+
+.section-label {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.agent-list {
+  list-style: none;
+  margin: 0;
+  padding: 0 8px;
+  flex: 1;
+}
+
+.agent {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px;
+  border: 0;
+  border-radius: var(--radius);
+  background: none;
+  font: inherit;
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.agent:hover {
+  background: var(--border-soft);
+}
+
+.agent.is-selected {
+  background: var(--accent-soft);
+}
+
+.agent:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.agent-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.agent-name {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Le nom de la boîte dit de quoi la session s'occupe : sous le nom de l'agent, en second. */
+.agent-box {
+  font-size: 12px;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.agent-box.is-absent {
+  font-style: italic;
+}
+
+.agent--muted .agent-name {
+  color: var(--muted);
+}
+
+/* --- Agent et ses boîtes --------------------------------------------------- */
+
+/* Deux zones de clic sur une même ligne : le chevron ouvre, le reste filtre. */
+.agent-head {
+  display: flex;
+  align-items: center;
+}
+
+.agent-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  flex: none;
+}
+
+.agent-toggle:hover {
+  color: var(--text);
+}
+
+.agent-toggle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.agent-toggle .icon {
+  width: 14px;
+  height: 14px;
+  transition: transform 0.15s;
+}
+
+.agent-head.is-open .agent-toggle .icon {
+  transform: rotate(90deg);
+}
+
+/* Le chevron mange sa gouttière : la ligne d'agent reste alignée sur « Tous les agents ». */
+.agent-head .agent {
+  padding-left: 4px;
+}
+
+/* Les boîtes vivent sous leur agent : un cran d'indentation et un filet de rattachement. */
+.box-list {
+  list-style: none;
+  margin: 0 0 4px 22px;
+  padding: 0 0 0 14px;
+  border-left: 1px solid var(--border);
+}
+
+.box {
+  padding: 7px 10px;
+}
+
+.box .agent-name {
+  font-weight: 500;
+  font-size: 13px;
+}
+
+/* Une boîte sans nom se lit à son adresse : en mono, pour ce que c'est. */
+.box .agent-name.is-absent {
+  font-weight: 400;
+  color: var(--muted);
+}
+
+.box .agent-box {
+  font-size: 11px;
+}
+
+.agents-foot {
+  padding: 16px 20px;
+  font-size: 12px;
+  border-top: 1px solid var(--border-soft);
+}
+
+/* Avatar : les initiales de l'agent, teintées par son adresse. Pas de couleur seule — le
+   nom reste écrit à côté partout où l'avatar n'est pas le seul repère. */
+.avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  color: #ffffff;
+  flex: none;
+}
+
+.avatar--sm {
+  width: 24px;
+  height: 24px;
+  font-size: 10px;
+}
+
+.avatar--stack {
+  box-shadow: 0 0 0 2px var(--panel);
+}
+
+.avatar--c0 { background: #2f6feb; }
+.avatar--c1 { background: #7c3aed; }
+.avatar--c2 { background: #0f9d58; }
+.avatar--c3 { background: #d9480f; }
+.avatar--c4 { background: #0b7285; }
+.avatar--c5 { background: #b02a6f; }
+.avatar--c6 { background: #5b6472; }
+.avatar--c7 { background: #7048e8; }
+
+/* Boîte jamais connectée : contour au lieu d'aplat, pour la distinguer sans l'effacer. */
+.avatar--absent {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  color: var(--muted);
+}
+
+.count {
+  min-width: 24px;
+  padding: 0 7px;
+  height: 18px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 600;
+  background: var(--neutral-soft);
+  color: var(--muted);
+  flex: none;
+}
+
+.count--accent {
+  background: var(--accent);
+  color: #ffffff;
+}
+
+.count--soft {
+  background: var(--accent-softer);
+  color: var(--accent);
+}
+
+/* Colonne repliée : il ne reste que les avatars d'agents, nom en info-bulle. La
+   hiérarchie n'y tient pas — les boîtes se retrouvent en dépliant la colonne. */
+.is-collapsed .agents-head,
+.is-collapsed .agent-text,
+.is-collapsed .agents-foot,
+.is-collapsed .agent-toggle,
+.is-collapsed .box-list,
+.is-collapsed .agent .count {
+  display: none;
+}
+
+.is-collapsed .agent-list {
+  padding: 16px 6px;
+}
+
+.is-collapsed .agent {
+  padding: 8px;
+  justify-content: center;
+}
+
+.is-collapsed .agent-head .agent {
+  padding-left: 8px;
+}
+
+/* Le badge des non-lus survit au repli, réduit à une pastille sur l'avatar. */
+.is-collapsed .agent.has-unread .avatar {
+  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
+}
+
+.is-collapsed .agents {
+  overflow-x: hidden;
+}
+
+/* --- Colonne des fils ----------------------------------------------------- */
+
+.threads {
+  background: var(--panel);
+  border-right: 1px solid var(--border);
+  overflow-y: auto;
+  min-width: 0;
+}
+
+.threads-head {
+  padding: 16px 20px 12px;
+}
+
+.threads-head h2 {
+  margin: 0;
+  font-size: 15px;
+}
+
+.threads-head p {
+  margin: 2px 0 0;
+  font-size: 12px;
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.chip {
+  font: inherit;
+  font-size: 12px;
+  padding: 3px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--text);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.chip:hover {
+  border-color: var(--accent);
+}
+
+.chip.is-active {
+  background: var(--text);
+  border-color: var(--text);
+  color: var(--panel);
+  font-weight: 600;
+}
+
+.chip:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.thread-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.thread {
+  display: block;
+  width: 100%;
+  padding: 12px 16px 12px 32px;
+  border: 0;
+  border-top: 1px solid var(--border-soft);
+  background: none;
+  font: inherit;
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+  position: relative;
+}
+
+.thread:hover {
+  background: var(--border-soft);
+}
+
+.thread.is-selected {
+  background: var(--accent-soft);
+  border-top-color: transparent;
+}
+
+/* Barre d'accent à gauche : le fil ouvert, repérable sans lire. */
+.thread.is-selected::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 3px;
+  background: var(--accent);
+}
+
+.thread:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+/* Point bleu du fil non lu, dans la gouttière réservée à gauche. */
+.thread.is-unread::after {
+  content: "";
+  position: absolute;
+  left: 14px;
+  top: 19px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+.thread.is-selected.is-unread::after {
+  left: 17px;
+}
+
+.thread-top {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.thread-title {
+  font-weight: 600;
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.thread.is-unread .thread-title {
+  font-weight: 700;
+}
+
+.thread-time {
+  font-size: 12px;
+  color: var(--muted);
+  white-space: nowrap;
+  flex: none;
+}
+
+.thread.is-unread .thread-time {
+  color: var(--accent);
+}
+
+.thread-who {
+  font-size: 12px;
+  color: var(--muted);
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.thread-bottom {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.thread-preview {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.thread.is-unread .thread-preview {
+  color: var(--text);
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  background: var(--neutral-soft);
+  color: var(--muted);
+  flex: none;
+}
+
+.tag--high {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+
+.tag--ok {
+  background: var(--ok-soft);
+  color: var(--ok);
+}
+
+.tag--warn {
+  background: var(--warn-soft);
+  color: var(--warn);
+}
+
+.tag .icon {
+  width: 10px;
+  height: 10px;
+  stroke-width: 2.5;
+}
+
+/* --- Lecteur du fil ------------------------------------------------------- */
+
+.reader {
+  overflow-y: auto;
+  background: var(--panel);
+  min-width: 0;
+}
+
+.reader-head {
+  padding: 24px 32px 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.reader-head h2 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.reader-desc {
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.reader-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.avatar-stack {
+  display: flex;
+}
+
+.avatar-stack .avatar + .avatar {
+  margin-left: -8px;
+}
+
+.reader-participants {
+  font-size: 12px;
+  color: var(--muted);
+  flex: 1;
+  min-width: 0;
+}
+
+.messages {
+  list-style: none;
+  margin: 0;
+  padding: 20px 32px 40px;
+}
+
+.message {
+  display: flex;
+  gap: 12px;
+  padding: 12px;
+  margin: 0 -12px;
+  border-radius: var(--radius);
+}
+
+/* Le dernier message du fil : posé sur un fond discret, sans bordure ni couleur d'état. */
+.message.is-last {
+  background: var(--bg);
+}
+
+.message.is-open {
+  background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+
+.message-body-col {
+  flex: 1;
+  min-width: 0;
+}
+
+.message-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.message-from {
+  font-weight: 600;
+}
+
+.message-to {
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.message-time {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.message-subject {
+  margin: 8px 0 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.message-text {
+  margin: 6px 0 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.message-foot {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 10px;
+}
+
+.message-foot .btn--link {
+  margin-left: auto;
+  font-size: 12px;
+}
+
+/* --- Volet de détail ------------------------------------------------------ */
+
+.sheet {
+  border-left: 1px solid var(--border);
+  background: var(--panel);
+  overflow-y: auto;
+  min-width: 0;
+}
+
+.sheet-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 18px 20px 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.sheet-head h3 {
+  margin: 0;
+  font-size: 15px;
+}
+
+.sheet-subject {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.sheet-head .btn {
+  margin-left: auto;
+}
+
+.sheet-section {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+}
+
+.sheet-section:last-of-type {
+  border-bottom: 0;
+}
+
+.sheet-section .section-label {
+  display: block;
+  margin-bottom: 12px;
+}
+
+.kv {
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.kv:last-child {
+  margin-bottom: 0;
+}
+
+.kv-key {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.kv-value {
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+/* Une pastille est large de son texte : en cellule de grille, elle s'étirerait sinon. */
+.kv > .tag {
+  justify-self: start;
+}
+
+/* Les adresses ne se recopient pas à la main : elles s'affichent en mono, avec un bouton. */
+.mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+}
+
+.party {
+  display: flex;
+  gap: 10px;
+}
+
+.party-name {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.party-box {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.party-addr {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 2px;
+  color: var(--muted);
+}
+
+.copy {
+  border: 0;
+  background: none;
+  padding: 2px;
+  color: var(--muted);
+  cursor: pointer;
+  display: inline-flex;
+  border-radius: 4px;
+}
+
+.copy:hover {
+  color: var(--accent);
+}
+
+.copy:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.copy .icon {
+  width: 14px;
+  height: 14px;
+}
+
+.deliveries {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.deliveries th {
+  text-align: left;
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--muted);
+  padding: 0 8px 8px 0;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.deliveries td {
+  padding: 8px 8px 8px 0;
+  vertical-align: middle;
+}
+
+.deliveries td.role,
+.deliveries td.folder {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+/* --- États vides et erreurs ----------------------------------------------- */
+
+.empty {
+  padding: 48px 24px;
+  text-align: center;
+  color: var(--muted);
+}
+
+.empty-title {
+  display: block;
+  color: var(--text);
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.banner {
+  margin: 16px 20px;
+  padding: 12px 14px;
+  border-radius: var(--radius);
+  background: var(--danger-soft);
+  color: var(--danger);
+  font-size: 13px;
+}
+
+/* --- Écrans étroits ------------------------------------------------------- */
+
+@media (max-width: 1200px) {
+  .console.has-sheet,
+  .console.is-collapsed.has-sheet {
+    grid-template-columns: 57px 320px minmax(0, 1fr) 320px;
+  }
+}
+
+@media (max-width: 1000px) {
+  .topbar-search {
+    max-width: 240px;
+  }
+
+  .console,
+  .console.is-collapsed {
+    grid-template-columns: 57px 300px minmax(0, 1fr);
+  }
+
+  /* Trop étroit pour quatre colonnes : le volet recouvre le lecteur. */
+  .console.has-sheet,
+  .console.is-collapsed.has-sheet {
+    grid-template-columns: 57px 300px minmax(0, 1fr);
+  }
+
+  .console.has-sheet .sheet {
+    position: fixed;
+    top: var(--topbar-h);
+    right: 0;
+    bottom: 0;
+    width: 340px;
+    max-width: 100%;
+    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
+  }
+}