/* Agora v2 — interface de l'utilisateur (SENTINEL-46, vigie SENTINEL-79). Identite Sentinel : ardoise + accent pervenche, IBM Plex, theme sombre unique. Jetons de la maquette v2 (SENTINEL-86, direction A) : gris remontes pour tenir AA partout (mesures dans docs/agora-v2/maquettes-v2/captures/contrastes.json), navigation en tete sur toutes les largeurs ; la page d'accueil « la vigie » suit l'ordre des questions de l'utilisateur, une section par question. */ /* IBM Plex, servie par l'instance (static/fonts, licence OFL) : aucune police distante. Deux graisses livrees : 400 et 700 ; 500 retombe sur 400, 600 sur 700. */ @font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/IBMPlexSans-Regular.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-weight: 600 700; font-style: normal; font-display: swap; src: url('/static/fonts/IBMPlexSans-Bold.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/IBMPlexMono-Regular.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 600 700; font-style: normal; font-display: swap; src: url('/static/fonts/IBMPlexMono-Bold.woff2') format('woff2'); } :root { --bg: #0e1116; --panel: #151a23; --panel-2: #1b2130; --line: #242c3b; --text: #dde3ef; /* Gris v2 (SENTINEL-86) : --muted 8.2:1 et --faint 6.2:1 sur panneau — AA partout (l'ancien --faint #59627a mesurait 2,5:1, et portait des infos de fraicheur). */ --muted: #a8b2cc; --faint: #8f99b6; --tool: #b3bcfb; --accent: #7d8cf8; --live: #41d98d; --warn: #f0b429; --bad: #ef6b6b; /* Couleur de chaleur des echanges (SENTINEL-79) : chaud = quelques minutes, froid = pres de 24 h. Pastilles : objets graphiques, seuil 3:1 (nettement tenu, mesures dans le rapport de recette) ; le texte a cote reste AA. */ --heat-0: #f0b429; --heat-1: #f0975c; --heat-2: #b3a7e0; --heat-3: #9cc0fa; --mono: 'IBM Plex Mono', ui-monospace, monospace; --sans: 'IBM Plex Sans', system-ui, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } /* L'application tient la fenetre : l'en-tete, puis la vue qui prend tout le reste (la vue Reseau en hauteur relative ; les autres vues defilent dedans). Aucune hauteur en pixels pour ces zones. */ #app { height: 100dvh; display: flex; flex-direction: column; } #app > main { flex: 1; min-height: 0; overflow-y: auto; } body { font-family: var(--sans); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; -webkit-text-size-adjust: 100%; } [hidden] { display: none !important; } /* Barres de defilement dans le theme (SENTINEL-189 : les barres blanches du systeme juraient sur le fond sombre). */ :root { color-scheme: dark; } * { scrollbar-width: thin; scrollbar-color: #2e3748 #0e1116; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #2e3748; border-radius: 6px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: #3b4660; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } .wordmark { font-family: var(--mono); font-weight: 600; font-size: 15px; letter-spacing: 3px; user-select: none; } .wordmark .tick { color: var(--accent); } .mono { font-family: var(--mono); } .muted { color: var(--muted); } .faint { color: var(--faint); } /* ===== Verrouillage ===== */ .lock { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); } .lock-box { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 18px; } .lock-title { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); } .lock-login { width: 100%; max-width: 280px; padding: 10px 12px; font: inherit; font-family: var(--mono); text-align: center; color: inherit; background: transparent; border: 1.5px solid var(--faint); border-radius: 8px; } .lock-login:focus { outline: none; border-color: var(--accent); } /* SENTINEL-489 : le code en champ texte (16 px : iOS ne zoome pas au focus). */ .lock-code { font-size: 16px; letter-spacing: 1px; } .lock-msg { min-height: 20px; font-size: 13px; color: var(--muted); text-align: center; } .lock-msg.err { color: var(--bad); } .lock-go { width: 100%; max-width: 280px; min-height: 44px; } /* ===== Barre d'application (navigation en tete, toutes largeurs) ===== */ .top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 10px 20px; padding-top: calc(10px + env(safe-area-inset-top)); background: var(--panel); border-bottom: 1px solid var(--line); } .top .spacer { flex: 1; } .nav { display: flex; gap: 4px; flex: none; } .tab { background: none; border: 1px solid transparent; border-radius: 6px; padding: 8px 13px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); cursor: pointer; white-space: nowrap; } .tab.on { color: var(--text); border-color: var(--accent); background: rgba(125,140,248,.12); } .nav .tab { font-size: 13.5px; padding: 8px 16px; } .badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--warn); color: #0e1116; font-family: var(--mono); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; vertical-align: 1px; } /* ===== Menu secondaire « ⋯ » (SENTINEL-309/310) : gestes rares regroupés — en-tête (Enrôlements, Machines, Verrouiller) et fiche d'un fil (Renommer, Fermer, Rouvrir). Même composant visuel aux deux endroits. */ .menu-wrap { position: relative; flex: none; } .menu-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer; } .menu-btn:hover, .menu-btn[aria-expanded="true"] { color: var(--text); border-color: var(--accent); } .menu-btn.small { width: 30px; height: 30px; font-size: 15px; border-radius: 6px; } .menu-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; display: flex; flex-direction: column; gap: 2px; min-width: 190px; padding: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.4); } .menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 6px; cursor: pointer; font-family: var(--mono); font-size: 12.5px; color: var(--muted); } .menu-item:hover, .menu-item:focus-visible { color: var(--text); background: rgba(125,140,248,.12); } .menu-item.on { color: var(--text); } .menu-item svg { width: 13px; height: 13px; flex: none; } .menu-item.danger:hover { color: var(--bad); background: rgba(239,107,107,.1); } /* SENTINEL-310 : les boutons « Renommer »/« Fermer »/« Rouvrir » du fil gardent leur classe .chip (comportement et teinte au survol inchangés) une fois dans le menu — seule la forme (pilule -> ligne pleine largeur) change. */ .menu-pop .chip { width: 100%; justify-content: flex-start; border: none; border-radius: 6px; min-height: auto; padding: 10px 12px; font-size: 12.5px; } .menu-pop .chip.fermer:hover { background: rgba(239,107,107,.1); } .menu-pop .chip.rouvrir:hover { background: rgba(65,217,141,.1); } .menu-pop .chip.renommer:hover { background: rgba(125,140,248,.1); } /* ===== Forfaits IA de l'en-tête (SENTINEL-337) : un bloc par fournisseur (Claude, GLM) — DEUX jauges étiquetées « 5 h » et « sem. » (SENTINEL-387), chacune en barre et chiffre ; l'heure de reprise (remise à zéro), la source et l'âge au survol. Réutilise la jauge des sessions (participants.js) : haut = rouge dès 85, périmée = hachurée. Plein (100 %) : le nom et le chiffre passent en rouge — c'est le signal que l'en-tête existe pour. Mesure ancienne (> 30 min) : tout en gris. Tendance (SENTINEL-387) : mini-courbe SVG de la fenêtre 5 h sur 2 h et delta de la demi-heure — des mesures réelles, rien d'inventé. ===== */ .forfaits { display: flex; align-items: center; gap: 16px; flex: none; } .forfait { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); cursor: default; white-space: nowrap; } .forfait .f-nom { font-weight: 600; letter-spacing: .02em; } .forfait .f-nom-court { display: none; } .forfait .f-age { color: var(--faint); font-size: 11px; margin-left: 4px; } .forfait .jauge .jg-barre { width: 46px; height: 5px; } .forfait.plein .f-nom, .forfait.plein .jg-txt { color: var(--bad); } .forfait.plein .f-nom { font-weight: 700; } .forfait.perimee .f-nom { font-weight: 400; color: var(--faint); } .f-g { display: inline-flex; align-items: center; gap: 4px; } .f-etiq { color: var(--faint); font-size: 10px; } .f-tendance { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); padding-left: 2px; } .f-tendance .f-courbe { display: block; } .f-tendance .f-courbe polyline { fill: none; stroke: currentColor; stroke-width: 1.25; } .f-tendance .f-courbe circle { fill: currentColor; } .f-delta { font-size: 10.5px; color: var(--faint); } /* Mobile (règle de l'en-tête, max-width 899px) : une seule ligne, et la navigation garde sa place (SENTINEL-309 : elle tenait tout juste à 390 px). Les blocs passent en colonne compacte — initiale, jauges, chiffres — ; les étiquettes, la tendance et l'âge restent au survol (desktop d'abord, SENTINEL-387). */ @media (max-width: 899px) { .forfaits { flex-direction: column; align-items: flex-start; gap: 3px; } .forfait { gap: 3px; font-size: 10px; line-height: 1.1; } .forfait .f-nom-long { display: none; } .forfait .f-nom-court { display: inline; } .forfait .f-etiq, .forfait .f-tendance { display: none; } .forfait .f-age { font-size: 9px; } .forfait .f-age-ily, .forfait .f-cause { display: none; } .forfait .jauge { gap: 3px; } .forfait .jauge .jg-barre { width: 26px; height: 4px; } } /* SENTINEL-402 : entre 900 et 1440 px, onglets + forfaits + menu ne tenaient plus sur une rangée (les onglets passaient à la ligne, le menu sortait de l'écran à 1100). Les onglets ne se replient plus ; la tendance et l'âge passent au survol sous 1440 px (SENTINEL-420 : pas l'âge ni la cause d'une mesure périmée ou en échec, qui se voient à toutes les largeurs), les étiquettes « 5 h »/« sem. » et les jauges se resserrent sous 1280 px. */ @media (min-width: 900px) and (max-width: 1440px) { .top { gap: 12px; } .forfaits { gap: 12px; } .forfait .f-tendance { display: none; } } @media (min-width: 900px) and (max-width: 1280px) { .top { padding-left: 14px; padding-right: 14px; } .nav .tab { padding: 8px 10px; font-size: 13px; } .forfait .jauge .jg-barre { width: 30px; } } @media (min-width: 900px) and (max-width: 1160px) { .forfait .f-etiq { display: none; } } /* La vue d'ensemble occupe l'ecran en pleine largeur (SENTINEL-103 puis SENTINEL-148, bureau d'abord) ; la page des fils aussi (SENTINEL-104) ; les autres ecrans gardent la colonne de lecture d'avant (1156 px = l'ancien main 1200 moins ses marges). Le padding vit sur les vues : la vue d'ensemble porte ses propres marges (bandeau et grille, SENTINEL-148). */ main { padding: 0; } .view { display: none; padding: 20px clamp(20px, 2.5vw, 40px) 34px; } #view-enroll, #view-machines { max-width: 1156px; margin: 0 auto; } .view.on { display: block; } #view-reseau.on { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 0 20px 16px; } .section-title { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 18px 2px 8px; display: flex; justify-content: space-between; gap: 8px; } .section-title:first-child { margin-top: 2px; } .section-title .sub { letter-spacing: 0; text-transform: none; color: var(--faint); } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; } .empty { color: var(--muted); font-size: 13.5px; padding: 18px 4px; text-align: center; } .error-line { color: var(--bad); font-size: 13px; margin-top: 8px; } /* SENTINEL-482 : les demandes qui attendent encore, dans le refus de fermeture. */ .error-line .attente-liste { margin: 4px 0 6px; padding-left: 20px; } .ok-line { color: var(--live); font-size: 13px; margin-top: 8px; } /* Pastilles d'etat (avec libelle) */ .st { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; white-space: nowrap; } .st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; } .tag { display: inline-block; font-family: var(--mono); font-size: 11.5px; padding: 2px 8px; border-radius: 10px; background: var(--panel-2); color: var(--muted); white-space: nowrap; } .tag.frais { color: var(--live); } .tag.tiede { color: var(--warn); } .tag.froid { color: #9cc0fa; } .tag.archive { color: var(--faint); } /* SENTINEL-411 : la pastille de portée d'un fil d'équipe. */ .tag.equipe { color: var(--accent); border: 1px solid rgba(125,140,248,.45); background: none; } .tag.humain { color: #0e1116; background: var(--accent); } .tag.warn { color: #0e1116; background: var(--warn); } .tag.op { color: var(--accent); border: 1px solid rgba(125,140,248,.4); background: none; } /* SENTINEL-383 : le modèle servi d'une session — libellé court (celui que le connecteur déclare, sinon le dernier segment de l'identifiant), identifiant complet au survol, rien si inconnu. Sans fond : il se pose partout (pastille d'un fil, écran Sessions, fiche Réseau). */ .tag.modele { background: none; border: 1px solid var(--line); } /* SENTINEL-383, recette : sur l'écran Sessions, la cellule « Poste · outil » tronque (nowrap + ellipsis) — un badge posé APRÈS le texte passait sous la coupure et devenait invisible. Il vit sur sa PROPRE ligne sous le texte, hors de portée de la troncature ; la cellule lui laisse son white-space à elle (l'héritage nowrap lui interdisait de tenir son texte), et un libellé démesuré enveloppe dans le badge au lieu de disparaître. La colonne garde un plancher (minmax des grilles ci-dessous) assez large pour le plus long libellé du catalogue réel. */ .ss-c-depot .tag.modele { display: block; width: fit-content; max-width: 100%; margin: 3px 0 0; white-space: normal; overflow-wrap: anywhere; } /* ===== Identite d'un agent (SENTINEL-61) : machine › depot › Outil, puis session « code » ===== */ .ident { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ident-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; } .ident-machine { font-family: var(--mono); font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; } .ident-repo { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; } .ident-repo.none { color: var(--faint); font-weight: 400; font-style: italic; } .ident-tool { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--tool); overflow-wrap: anywhere; } .ident-sep { font-family: var(--mono); font-size: 12px; color: var(--faint); } .ident-meta { display: flex; flex-wrap: wrap; gap: 0 12px; font-family: var(--mono); font-size: 12px; color: var(--muted); } .fact { white-space: nowrap; } .k { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--faint); } /* Code de session (SENTINEL-74) : « dalor » ressort, le role reste discret. */ .sess-code { font-family: var(--mono); font-weight: 600; letter-spacing: .04em; } .sess-role { color: var(--muted); } .ident.compact { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; } .ident.compact .ident-repo, .ident.compact .ident-tool { font-size: 12.5px; } .ident.compact .ident-machine { font-size: 12px; } .machine-label { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; } .repo-group { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 4px; } .machine-head + .repo-group, .idents > .repo-group:first-child { border-top: none; margin-top: 0; } .repo-head { display: flex; align-items: baseline; gap: 6px; padding: 2px 0 2px; } .repo-head .count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); } .agent-row { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; } .agent-meta { font-size: 12.5px; color: var(--faint); } .machine-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } .machine-name { font-family: var(--mono); font-size: 14px; font-weight: 600; } .machine-head .count { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); } /* ===== La vigie (accueil, SENTINEL-79) ===== */ .page-h { margin: 0 0 16px; } .page-h h1 { font-size: 23px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; } .page-h h1 b { color: var(--live); font-weight: 600; } .page-h .meta { font-size: 13px; color: var(--muted); margin-top: 4px; } /* Ferme par un autre que son createur (SENTINEL-92) : bandeau d'avis en ambre — un avis, pas une urgence. */ .warn-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; border: 1px solid rgba(240,180,41,.4); border-left: 3px solid var(--warn); border-radius: 8px; background: var(--panel); padding: 10px 14px; margin-bottom: 24px; font-size: 13.5px; } .warn-banner .why { color: var(--warn); font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; } .q { margin-bottom: 32px; } .q-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; } .q-title h2 { font-size: 16.5px; font-weight: 600; } .q-title .n { font-family: var(--mono); font-size: 11.5px; color: var(--accent); letter-spacing: .1em; } .q-sub { font-size: 13px; color: var(--muted); margin-bottom: 14px; } /* §01 presence : une table plate, une ligne par session */ table.presence { width: 100%; border-collapse: collapse; font-size: 13.5px; } .presence th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 400; text-align: left; padding: 0 12px 8px; border-bottom: 1px solid var(--line); } .presence td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: baseline; } .presence tr:last-child td { border-bottom: none; } .presence th.ta-r, .presence td.ta-r { text-align: right; } .presence .sess b { font-family: var(--mono); font-weight: 600; font-size: 13.5px; } .presence .sess .role { color: var(--muted); } .presence .tool { color: var(--tool); } .presence .qui { font-family: var(--mono); font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; } .presence .vu { font-family: var(--mono); font-size: 11.5px; color: var(--faint); white-space: nowrap; margin-top: 3px; } .presence .st-td { white-space: nowrap; width: 1%; } /* Signe de vie d'une session (SENTINEL-61) : vert, ambre (sondage ancien), rouge (relais muet). */ .life { display: inline-flex; align-items: center; gap: 6px; } .life::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; } .life.ok { color: var(--live); } .life.ok::before { background: var(--live); } .life.idle { color: var(--warn); } .life.idle::before { background: var(--warn); } .life.bad { color: var(--bad); } .life.bad::before { background: var(--bad); } /* §02 conversations : fils vivants + echanges 24 h */ .conv-grid { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 26px; align-items: start; } .conv { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); border-radius: 8px; } /* le bloc du milieu peut retrecir sous son contenu : le sujet et les noms passent a la ligne, la colonne d'age ne pousse plus la page (mesure 390 px). */ .conv > div { min-width: 0; } .conv:hover { background: var(--panel); } .conv:last-child { border-bottom: none; } .conv .tags { display: flex; gap: 5px; flex: none; padding-top: 2px; } .conv .subj { font-size: 14.5px; font-weight: 500; line-height: 1.35; } .conv .who { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.7; } .conv .who .nm { white-space: nowrap; } .conv-side { margin-left: auto; flex: none; text-align: right; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; } .conv-side .age { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; } .conv-side .nfo { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; } .dyads { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 14px 10px; } .dyads .section-title { margin: 8px 0 4px; } .dyad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; width: 100%; text-align: left; font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 9px 0; border-bottom: 1px solid var(--line); } .dyad:last-child { border-bottom: none; } .dyad .nm { color: var(--text); } .dyad .x { color: var(--accent); } .dyad .n { color: var(--text); font-weight: 600; } .dyad .age { margin-left: auto; color: var(--muted); font-size: 11.5px; white-space: nowrap; } /* Couleur de chaleur : pastille carree (8 px) a gauche de la paire. */ .heat { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; align-self: center; } .heat.h0 { background: var(--heat-0); } .heat.h1 { background: var(--heat-1); } .heat.h2 { background: var(--heat-2); } .heat.h3 { background: var(--heat-3); } /* L'echelle, dans les jetons de couleur */ .heat-scale { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0 4px; font-family: var(--mono); font-size: 11px; color: var(--faint); } .heat-scale .lg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .legend-line { font-size: 12px; color: var(--muted); margin: 2px 2px 0; line-height: 1.5; } .legend-line summary { cursor: pointer; color: var(--accent); font-family: var(--mono); font-size: 11.5px; } /* Fraicheur de la page (SENTINEL-61) : l'heure du dernier rafraichissement reussi, sa periode, et un signal clair si le dernier a echoue (les donnees affichees restent, datees). */ .fresh { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin: 0 2px 14px; } .fresh.bad { font-family: var(--sans); font-size: 13px; color: var(--bad); padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(239,107,107,.5); background: rgba(239,107,107,.08); } .fresh.bad strong { font-weight: 600; } /* ===== Fils ===== */ .filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; } .chip { font-family: var(--mono); font-size: 12px; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 20px; padding: 0 14px; min-height: 40px; display: inline-flex; align-items: center; cursor: pointer; white-space: nowrap; } /* SENTINEL-310 : Participants, Documents, Actualiser de la fiche d'un fil — visibles mais plus discrets que les pilules pleines (fond et bordure atténués, un peu moins de respiration) qu'avait le même rang qu'un geste rare. */ .chip.ghost { border-color: transparent; background: none; color: var(--faint); min-height: 34px; padding: 0 10px; } .chip.ghost:hover { color: var(--muted); border-color: var(--line); } .chip.on { color: var(--text); border-color: var(--accent); background: rgba(125,140,248,.12); } /* Ligne d'un fil (SENTINEL-151 ; compacte depuis SENTINEL-471, environ 45 px au lieu de 100) : losange de fraîcheur, sujet sur une ligne, point « non lu », punaise, âge ; le but sur une ligne tronquée ; qui parle, le volume et le mandat en petit sur le fil choisi (en infobulle sinon : les montrer au survol ferait sauter la liste sous la souris). Un fil clos est atténué (70 %), un fil archivé de même (l'état le dit). */ .thread-item { display: block; width: 100%; text-align: left; cursor: pointer; padding: 6px 10px 6px 9px; border: 0; border-left: 3px solid transparent; border-radius: 6px; margin-bottom: 2px; background: none; box-shadow: none; transition: background .12s, border-color .12s; } .thread-item:hover { background: var(--panel-2); } .thread-item.sel { border-left-color: var(--accent); background: var(--panel-2); } .thread-item.clos { opacity: .7; } /* SENTINEL-411 : un fil d'équipe où aucun de mes agents n'est actif. */ .thread-item.attenue { opacity: .75; } .thread-item.attenue.clos { opacity: .55; } .thread-item .tscope, .ov-tl1 .tscope, .ov-fpartage .tscope { flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--accent); border: 1px solid rgba(125,140,248,.45); border-radius: 8px; padding: 0 5px; } /* SENTINEL-416 : le fil 1-1 entre liaisons, rangé sous le fil de son annonce. */ .thread-item.sous { margin-left: 14px; } .thread-item .tscope.cache, .ov-tl1 .tscope.cache, .ov-fpartage .tscope.cache { color: var(--faint); border-color: var(--line); } .thread-vis { margin: 2px 0 0; font-size: 12.5px; color: var(--faint); } /* SENTINEL-471 : les sections de la liste (Épinglés, Mes fils, Entre agents, Calmes, Clos) — un en-tête qui replie ou déplie, le nombre de fils, et sur une section repliée le point « nouveau » si un de ses fils a du non lu. */ .fsec { display: flex; align-items: center; gap: 7px; width: 100%; margin: 12px 0 4px; padding: 4px 4px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } .fsecs > .fsec:first-child, #view-pourtoi .fsec:first-of-type { margin-top: 2px; } .fsec:hover { color: var(--muted); } .fsec:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; } .fsec-chev { width: 10px; font-size: 10px; letter-spacing: 0; } .fsec .ic-marque { color: var(--accent); } .fsec-n { letter-spacing: .04em; } .fsec-hint { margin-left: auto; letter-spacing: .04em; text-transform: none; } .fsec .nouveau { width: 7px; height: 7px; background: var(--accent); } .pt-fils + .fsec { margin-top: 18px; } /* La punaise (SENTINEL-471) : au survol sur ordinateur, toujours visible au doigt ; pleine et pervenche sur un fil épinglé. */ .tpin { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -3px 0; border-radius: 5px; color: var(--faint); cursor: pointer; align-self: center; } .tpin:hover, .tpin:focus-visible { color: var(--text); background: rgba(125,140,248,.14); outline: none; } .tpin.on { color: var(--accent); } .tpin.err { color: var(--bad); } .tpin[aria-expanded="true"] { color: var(--text); background: rgba(125,140,248,.14); } /* SENTINEL-473 : les marques — la punaise pleine (épinglé), le sablier (en attente), les plans (de fond) ; même pervenche, la forme les distingue. */ .mq-menu.occupe { opacity: .6; pointer-events: none; } .mq-item .gs-label { display: flex; align-items: center; gap: 8px; width: 100%; } .mq-item .ic-marque { color: var(--accent); flex: none; } .mq-item.coche .gs-label { color: var(--accent); } .mq-coche { margin-left: auto; font-size: 12px; } .mq-item .gs-aide { padding-left: 21px; } .mq-form { padding: 2px 8px 8px 29px; display: flex; flex-direction: column; gap: 6px; } .mq-form[hidden] { display: none; } .mq-note { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; } .mq-note:focus { outline: none; border-color: var(--accent); } .mq-form-act { display: flex; align-items: center; gap: 8px; } .mq-compte { font-size: 11px; color: var(--faint); } .tattente, .pt-attente { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); } .tattente { margin: 1px 0 0 18px; font-size: 12px; line-height: 1.35; } .pt-attente { margin-top: 4px; font-size: 13px; } .tattente .note, .pt-attente .note { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tattente .depuis, .pt-attente .depuis { flex: none; margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); } @media (pointer: coarse) { .mq-item { min-height: 44px; } .mq-note { font-size: 16px; } } @media (pointer: fine) { .thread-item .tpin:not(.on), .pt-fsub .tpin:not(.on) { visibility: hidden; } .thread-item:hover .tpin, .thread-item:focus-within .tpin, .thread-item .tpin:focus-visible, .pt-fsub:hover .tpin, .pt-fsub .tpin:focus-visible { visibility: visible; } } .filters.scope { margin-top: -4px; } .filters[hidden] { display: none; } .thread-item .tl1 { display: flex; align-items: center; gap: 8px; min-height: 20px; } .thread-item .dz { width: 10px; height: 10px; align-self: center; flex: none; } .thread-item .tsubj { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .thread-item .tage { flex: none; font-family: var(--mono); font-size: 11px; color: var(--faint); min-width: 38px; text-align: right; } .thread-item .nouveau { width: 7px; height: 7px; background: var(--accent); } .thread-item .tgoal { margin: 1px 0 0 18px; font-size: 12px; color: var(--muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .thread-item .tmeta { display: none; flex-wrap: nowrap; gap: 2px 10px; align-items: center; font-size: 10.5px; line-height: 1.35; color: var(--faint); margin: 2px 0 0 18px; } .thread-item.sel .tmeta { display: flex; } .thread-item .twho { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thread-item .tcount, .thread-item .ttype, .thread-item .mbadge { flex: none; } .thread-item .mbadge { border: 1px solid var(--accent); border-radius: 4px; padding: 0 5px; font-family: var(--mono); font-size: 11px; color: var(--tool); white-space: nowrap; } /* Changer de fil sans ecran vide : l'ancien s'estompe le temps du chargement. */ #thread-main { transition: opacity .15s; } #thread-main.chargement { opacity: .45; } .fact.ecoute { color: var(--live); } .load-more { width: 100%; padding: 12px; background: none; border: 1px dashed var(--line); border-radius: 8px; color: var(--accent); font-family: var(--mono); font-size: 12px; cursor: pointer; margin-bottom: 10px; } .thread-back { display: none; background: none; border: none; color: var(--accent); font-family: var(--mono); font-size: 12.5px; cursor: pointer; padding: 2px 0 10px; } .thread-head { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 10px; } .thread-title { font-size: 19px; font-weight: 600; line-height: 1.3; } .head-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 0; font-family: var(--mono); font-size: 12px; color: var(--muted); } /* L'essentiel du fil en une ligne (SENTINEL-104) : le detail (createur, mandat, fermeture) vit replie dans « Details du fil ». */ .thread-essence { font-size: 13px; color: var(--muted); margin: 5px 0 0; } .thread-act { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; padding-top: 3px; } .thread-act .fresh { margin: 0; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; font-size: 13px; } .kv dt { color: var(--muted); font-family: var(--mono); font-size: 12px; padding-top: 1px; } .kv dd { overflow-wrap: anywhere; } .kv q { font-style: italic; color: var(--text); } .people { display: flex; flex-direction: column; gap: 6px; } /* Details du fil repliables et carte des participants (rail a droite sur grand ecran, empiles sinon). */ .thread-facts { padding: 0; } .thread-facts summary { cursor: pointer; list-style: none; padding: 11px 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .thread-facts summary::after { content: " +"; color: var(--faint); } .thread-facts[open] summary::after { content: " −"; } .thread-facts[open] summary { border-bottom: 1px solid var(--line); } .thread-facts .kv { padding: 11px 14px; } .thread-people .section-title { margin: 2px 0 8px; } /* ===== Participants condensés (SENTINEL-197) : des pastilles en ligne ===== Une pastille par tête — dépôt (ou outil), session « code », étiquette « créateur » — qui enveloppent ; au-delà de six, « +N » déplie. Le point devant chaque pastille est l'état (198 ; SENTINEL-276 : `.lm`, les quatre couleurs de partout). */ .thread-people .people { flex-direction: row; flex-wrap: wrap; gap: 5px; } .ppl { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); font-family: var(--mono); font-size: 12px; } .ppl .lm { margin-right: 0; } .ppl-nom { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16ch; min-width: 2ch; } /* SENTINEL-241/276 : le role, nom d'usage de la session. */ .ppl-nom.role { font-family: var(--sans); max-width: 30ch; } .ppl .tag { padding: 1px 6px; font-size: 10.5px; } .ppl.replie { display: none; } button.ppl.plus { cursor: pointer; color: var(--muted); background: none; border-style: dashed; } button.ppl.plus:hover { color: var(--text); } /* L'humain (198, avec 180) : le même anneau que la scène 3D en glyph — rose fixe, hors des palettes d'agents et d'états — et le prénom, pas un dépôt. */ .ppl.humain { border-color: rgba(239,143,176,.35); } .ppl.humain .ppl-nom { font-family: var(--sans); color: var(--accent); } .ppl-toi { color: var(--faint); } /* SENTINEL-376 : les gestes d'un participant passent par son menu « ⋯ » (gestes-session.js) ; la bande de confirmation vit sous les pastilles. */ .ppl-gerer, .ppl-quitter { margin-left: auto; font-size: 12px; } /* La croix garde son allure pour les lignes du composant de choix (`.cp-x`, SENTINEL-371) ; le mode « retirer… » de la carte n'existe plus. */ .ppl-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; } .ppl-x:hover { color: var(--bad); } .ppl-confirme { margin-top: 10px; font-size: 13px; } .ppl-confirme[hidden] { display: none; } .ppl-err { color: var(--bad); font-size: 12.5px; } /* SENTINEL-276 : le nom seul (role sinon code) — la pastille d'un agent passe a la ligne plutot que de couper ; l'adresse est au survol. Une session qui ne sera pas reveillee porte un liseré ambre. */ .ppl.agent { flex-wrap: wrap; border-radius: 12px; row-gap: 2px; } .ppl.agent .ppl-nom { max-width: none; white-space: normal; overflow-wrap: anywhere; } .ppl.sourd { border-color: rgba(240,180,41,.45); } /* Le panneau « Ajouter un participant » : sobre comme la confirmation du retrait ; l'avertissement de reveil, ambre, avant le bouton. */ /* Les deux gestes du titre, groupes a droite ; le groupe passe a la ligne entier sur petit ecran plutot que de deborder. */ .ppl-gestes { margin-left: auto; display: inline-flex; gap: 12px; } .ppl-gestes .ppl-gerer, .ppl-gestes .ppl-quitter { margin-left: 0; } .thread-people .section-title { flex-wrap: wrap; row-gap: 4px; } .ppl-ajout { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; } .ppl-ajout[hidden] { display: none; } .ppl-ajout-sel { width: 100%; font: inherit; font-size: 13px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; min-height: 34px; } .ppl-ajout-sel:focus { outline: none; border-color: var(--accent); } .ppl-ajout-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ppl-histo { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; cursor: pointer; } .ppl-avert, .cmp-avert > div { color: var(--warn); font-size: 12.5px; line-height: 1.4; } .cmp-avert { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; } .cmp-avert:empty { display: none; } .decision { padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; } .decision:first-child { border-top: none; padding-top: 0; } .decision .meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 12px; } /* But du fil (SENTINEL-181), lecture seule : un paragraphe lisible. Les etapes vivaient sous le but — retraites avec leurs regles (SENTINEL-326). */ .thread-goal .goal-text { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; } .thread-goal .section-title { margin: 6px 0 8px; } .thread-goal .section-title:first-child { margin-top: 0; } /* Réveils programmés du fil (SENTINEL-493) : une ligne par réveil actif, « Retirer » à droite (un clic arme, le second retire). */ .thread-reveils[hidden] { display: none; } .thread-reveils .reveil { padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; } .thread-reveils .reveil:first-of-type { border-top: none; padding-top: 0; } .thread-reveils .reveil-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .thread-reveils .reveil-texte { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; } .thread-reveils .meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 3px; } .chip.reveil-retirer { flex: none; min-height: 28px; } .chip.reveil-retirer:hover, .chip.reveil-retirer.danger { color: var(--bad); border-color: rgba(239,107,107,.45); } /* Qui parle (SENTINEL-104) : la session d'abord — pastille + code colores, derive du code de session (unique, jamais reutilise) — puis l'agent en petit. Deux sessions du meme depot se distinguent au premier regard ; le liseré a gauche du message porte la meme couleur. Palette mesuree : >= 5,9:1 sur panneau-2 et >= 6,9:1 sur fond pour chaque teinte (AA texte), hors familles de l'accent, du vert « live », de l'ambre et du rouge pour ne pas se confondre avec les etats. */ .msg { margin-bottom: 18px; max-width: 86ch; } .sess-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--sess); flex: none; align-self: center; } .sess-name { font-family: var(--mono); font-weight: 600; font-size: 13.5px; letter-spacing: .04em; color: var(--sess); overflow-wrap: anywhere; } .sess-role2 { font-size: 12.5px; color: var(--muted); } .msg-who { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; } .msg-agent { font-family: var(--mono); font-size: 12px; color: var(--faint); overflow-wrap: anywhere; } /* SENTINEL-189 : l'auteur par son nom lisible (role ou outil, son nom affiché). */ .msg-name { font-weight: 600; font-size: 14px; color: var(--sess, var(--text)); } .msg .tag.qtag { color: var(--warn); border-color: rgba(240,180,41,.4); } .msg-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px 10px; margin-bottom: 5px; } .msg-time { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--faint); padding-top: 2px; } /* SENTINEL-308 : le bouton « supprimer » d'un message, dans .msg-head a cote de l'heure — discret : visible au survol du message a la souris, toujours visible mais attenue au toucher (pas de survol possible). */ .msg-del-btn { position: relative; /* porte le ::after qui elargit la cible tactile */ flex: none; background: none; border: none; padding: 2px 6px; margin-left: 4px; font-family: var(--sans); font-size: 11.5px; color: var(--faint); border-radius: 4px; cursor: pointer; opacity: 0; transition: opacity .15s ease, color .15s ease, background-color .15s ease; } .msg:hover .msg-del-btn, .msg-del-btn:focus-visible { opacity: 1; } .msg-del-btn:hover, .msg-del-btn:focus-visible { color: var(--bad); background: rgba(239,107,107,.1); outline: none; } @media (pointer: coarse) { /* Pas de survol possible au doigt : le bouton reste visible, a faible opacite ; un ::after invisible elargit la cible sans agrandir le bouton ni casser le retour a la ligne de .msg-head (un min-height litteral poussait « supprimer » seul sur sa ligne, decale sous l'heure — y compris sur les messages de l'utilisateur, .msg.mine en row-reverse). */ .msg-del-btn { opacity: .6; } .msg-del-btn::after { content: ''; position: absolute; inset: -14px; } } .msg-del-confirm .msg-del-raison { display: block; width: 100%; margin: 8px 0; padding: 7px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-family: var(--sans); font-size: 13px; } .msg-del-confirm .msg-del-raison:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .msg-del-stat:empty { display: none; } .msg-body { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; } /* Un message de type demande : un fait, pas un etat a suivre (SENTINEL-147) — l'etiquette « demande » dans l'en-tete, grise, et un liseré gris sur le corps. */ .msg.demande .msg-body { border-left: 3px solid var(--warn); } /* Les messages de l'utilisateur, a droite, teinte d'accent : on se lit en conversation. */ .msg.mine { margin-left: auto; } .msg.mine .msg-head { flex-direction: row-reverse; } .msg.mine .msg-who { justify-content: flex-end; } .msg.mine .msg-time { margin-left: 0; margin-right: auto; } .msg.mine .msg-name { color: var(--accent); } .msg.mine .msg-body { background: rgba(125,140,248,.13); border-color: rgba(125,140,248,.35); } /* SENTINEL-206 : l'accuse de reception des messages de l'utilisateur, discret sous la bulle — « en attente », puis « remis », puis « remis · lu » (accent quand c'est lu). Mis a jour au suivi 5 s de la page fil. */ .msg-dlv { margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--faint); text-align: right; } .msg-dlv.remis { color: var(--muted); } .msg-dlv.lu { color: var(--accent); } /* SENTINEL-334 : la marque « non déposé » — une ligne sobre sous le message, la couleur d'avertissement ; les destinataires au survol. */ .msg-sans-depot { margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--warn); text-align: right; } .msg-reply { font-size: 12.5px; color: var(--faint); margin-bottom: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .msg-reply strong { color: var(--muted); font-weight: 600; } .msg-reply-x { font-style: italic; } .msg-body p { margin: 0 0 8px; } .msg-body p:last-child { margin-bottom: 0; } .msg-body code { font-family: var(--mono); font-size: 13.5px; background: var(--bg); padding: 1px 5px; border-radius: 4px; color: var(--accent); } .msg-body pre { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px; overflow-x: auto; margin: 8px 0; } .msg-body pre code { background: none; padding: 0; color: var(--text); font-size: 13px; } /* Tableaux markdown (SENTINEL-71) : le tableau deroule seul sur mobile, jamais la page ; les cellules ne se replient pas en colonnes d'un caractere. */ .msg-body .table-wrap { overflow-x: auto; margin: 8px 0; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } /* Math des messages (SENTINEL-212) : ```math en bloc — centré par KaTeX (.katex-display), marge verticale portée ici seule, formule large qui déroule seule comme les tableaux, jamais la page ; $…$ en ligne, aligné sur la ligne et insécable. Les équations suivent la taille du texte environnant : KaTeX cale tout en em, rien de fixe ici. */ .math-block { margin: 10px 0; overflow-x: auto; overflow-y: hidden; } .math-block .katex-display { margin: 0; } .math-inline { white-space: nowrap; } /* Diagrammes Mermaid des messages (SENTINEL-212, lot 2) : le conteneur du SVG, même famille que pre et .math-block — fond légèrement distinct de la bulle, déroulement horizontal seul (un diagramme large garde sa taille naturelle, fixée par le code au viewBox, et ne sort jamais de la page). Le pre>code de repli — tant que le SVG n'est pas rendu, ou pour toujours si la source est invalide — vit dedans sans double encadré. */ .mermaid-block { margin: 10px 0; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; overflow-x: auto; overflow-y: hidden; } .mermaid-block svg { display: block; margin: 0 auto; height: auto; } .mermaid-block pre { background: none; border: none; padding: 0; margin: 0; text-align: left; } .mermaid-block .mermaid-err { margin-top: 8px; font-size: 13px; color: var(--bad); text-align: left; overflow-wrap: anywhere; } /* SENTINEL-302 : l'affordance de défilement horizontal des blocs larges (tableau, Mermaid, formule, code) — sans elle rien ne montre qu'un bloc continue hors champ, surtout sur mobile où la scrollbar système est invisible. `documents.js` (poserAffordanceDefilement) mesure le défilement réel et bascule deux éléments `.defil-fondu` (gauche/droite) avec `.show` — à gauche une fois qu'on a défilé, à droite tant qu'il reste du contenu, jamais les deux en butée. Posés en enfants du bloc qui défile, ils défilent avec son contenu (constaté à l'usage, pseudo-élément ou noeud réel pareil) : `documents.js` les pose plutôt dans un `.defil-cadre` englobant, qui ne défile pas lui, et les ancre à ses bords. Couleur de --accent (#7d8cf8) en triplet : un fondu basé sur --bg (quasi noir) serait invisible sur le thème sombre. */ .defil-cadre { position: relative; } .defil-fondu { position: absolute; top: 0; bottom: 0; width: 20px; pointer-events: none; opacity: 0; } .defil-fondu.show { opacity: 1; } .defil-fondu.g { left: 0; background: linear-gradient(to right, rgba(125, 140, 248, .55), transparent); } .defil-fondu.d { right: 0; background: linear-gradient(to left, rgba(125, 140, 248, .55), transparent); } /* SENTINEL-398 : le fondu seul se lisait mal — un chevron dans le fondu dit qu'il reste à voir de ce côté. Le chevron suit la lecture (sticky) : sur un long tableau, il reste à l'écran au lieu de rester au milieu du bloc, hors de vue. */ .defil-fondu { width: 28px; display: flex; align-items: flex-start; justify-content: center; color: #fff; font-size: 20px; font-weight: 600; line-height: 1; } .defil-fondu::after { position: sticky; top: 45vh; margin-top: 10px; } .defil-fondu.g::after { content: '‹'; } .defil-fondu.d::after { content: '›'; } .msg-body table { border-collapse: collapse; } .msg-body th, .msg-body td { border: 1px solid var(--line); background: var(--bg); padding: 4px 9px; text-align: left; vertical-align: top; white-space: nowrap; } .msg-body th { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--muted); } .msg-body th.ta-r, .msg-body td.ta-r { text-align: right; } .msg-body th.ta-c, .msg-body td.ta-c { text-align: center; } .msg-body strong { color: #fff; font-weight: 600; } .msg-body a { color: var(--accent); } /* SENTINEL-305 : image Markdown ![alt](url) d'un message ou d'un document (.msg-body porte les deux, documents.js ajoute .doc-body en plus) — jamais plus large que la colonne, jamais de debordement horizontal sur mobile. */ .msg-body img.msg-img { display: block; max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; } /* Titres et listes markdown des messages (SENTINEL-209) : sobres, IBM Plex, thème sombre — h2 et h3 portent la structure des listes d'agents, h1 rare ; puces pleines au premier niveau, creuses au second. */ .msg-body h1, .msg-body h2, .msg-body h3 { font-weight: 600; line-height: 1.35; color: var(--text); margin: 14px 0 6px; overflow-wrap: anywhere; } .msg-body h1 { font-size: 17.5px; } .msg-body h2 { font-size: 16.5px; } .msg-body h3 { font-size: 15px; color: var(--muted); } .msg-body h1:first-child, .msg-body h2:first-child, .msg-body h3:first-child { margin-top: 0; } .msg-body ul, .msg-body ol { margin: 0 0 8px; padding-left: 22px; } .msg-body ul { list-style: disc; } .msg-body ul ul { list-style: circle; } .msg-body li { margin: 2px 0; } .msg-body li > ul, .msg-body li > ol { margin: 2px 0 4px; } .msg-body ul:last-child, .msg-body ol:last-child { margin-bottom: 0; } /* Ligne de séparation `---`, `***`, `___` (SENTINEL-398) : un filet discret. */ .msg-body hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; } .doc-body hr { margin: 22px 0; } /* ===== Documents d'un fil (SENTINEL-213) ===== */ /* La section discrète du rail : une ligne par document déposé — titre, auteur, date, jamais le contenu — qui mène à la page du document. */ .thread-docs .section-title { margin: 2px 0 8px; } .doc-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--line); padding: 8px 0; cursor: pointer; color: var(--text); font-family: var(--sans); } .doc-row:first-of-type { border-top: none; } .doc-row:hover .doc-t { color: var(--accent); } .doc-row .doc-t { flex: 1 1 100%; font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; } .doc-row .doc-m { flex: none; font-family: var(--mono); font-size: 11px; color: var(--faint); } /* SENTINEL-222 : la pastille « Sur le document « … » » d'une remarque liée — au-dessus du corps du message, discrète, vers la page du document (même lien que la carte Documents). Un titre long se coupe à l'ellipse, la bulle ne déborde jamais. */ .doc-ref { display: block; font-size: 12px; line-height: 1.4; color: var(--faint); margin-bottom: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .doc-ref strong { font-weight: 600; color: var(--muted); } .doc-ref:hover, .doc-ref:hover strong { color: var(--accent); } /* SENTINEL-233 : « pour nexus » — l'agent du fil que le message de l'utilisateur désigne, à côté de l'auteur, sobre comme la pastille document ci-dessus ; le handle complet reste en infobulle. */ .msg-pour { font-size: 12px; color: var(--faint); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } /* La page d'un document : le corps reprend la carte de lecture des messages (msg-body) sans son encadré de bulle — une page, pas un message. Le rendu Markdown (titres, listes, tableaux, code, SENTINEL-209) vient des styles msg-body, ajustés plus bas pour la page (tableaux, séparateurs). SENTINEL-398 (remplace la colonne de 800 px et la grille « breakout » de SENTINEL-301) : une seule largeur pour tout. 07/10 : « il faudrait qu'on utilise le plus de la largeur possible disponible dans l'écran ». Le retour au fil, le titre, le texte, les tableaux, les diagrammes et les remarques occupent toute la largeur de la vue, avec ses marges. Avant, le texte était centré à 800 px et les blocs larges dans un cadre plus grand décalé à gauche : la lecture sautait d'un bord à l'autre. */ /* Le retour au fil reste visible a toutes les largeurs : la page du document est pleine largeur, sans liste des fils a cote qui servirait de retour (le bouton du fil, lui, est mobile-only — la liste le remplace sur bureau). */ #view-document .thread-back { display: block !important; } .doc-titre { font-size: 23px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; margin: 6px 0 0; overflow-wrap: anywhere; } .doc-meta { font-size: 13px; color: var(--muted); margin: 6px 0 10px; } .doc-actions { margin: 0 0 18px; } .doc-body { background: none; border: none; border-top: 1px solid var(--line); border-radius: 0; padding: 16px 0 0; line-height: 1.65; } /* Tableaux de la page (SENTINEL-398) : les cellules passent à la ligne pour que le tableau tienne dans la colonne tant que c'est possible — un plancher sur les colonnes de texte long (`col-long`, posé par tableEl) évite les colonnes d'un mot par ligne (le souci que SENTINEL-71 réglait par nowrap dans les bulles ; SENTINEL-402 : les bulles passent aussi à la ligne, avec un plancher plus bas). Le code en ligne et les mots ne se coupent pas au milieu dans une cellule. Ce qui reste trop large est réduit à l'échelle par documents.js (ajusterEchelle) ; sous le plancher, il défile, avec l'affordance (SENTINEL-302) et une barre visible. Le code d'un document passe à la ligne au lieu de défiler. */ .msg-body td { white-space: normal; overflow-wrap: normal; } .msg-body td.col-long { min-width: 10em; } .doc-body td.col-long { min-width: 16em; } .msg-body td code { white-space: nowrap; } .doc-body pre, .doc-body pre code { white-space: pre-wrap; overflow-wrap: anywhere; } .doc-body .table-wrap, .doc-body .mermaid-block, .doc-body .math-block, .doc-body pre { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } .msg-summary { font-size: 13px; color: var(--muted); margin-bottom: 4px; } /* Reponse a un message : le destinataire porte sa couleur quand le message vise est charge dans la page (sinon son numero seul). */ .msg-summary .sess-name { font-size: 12.5px; } /* Lignes de trace (but, etapes, mandat) : une ligne grise, jamais un message. */ /* SENTINEL-237 : une famille visuelle pour tout ce que dit Agora — etiquette, evenement, texte entier (plus de troncature), liseré discret ; jamais un message. */ .msg-sys { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 12.5px; color: var(--muted); margin: 8px 0; padding: 4px 0 4px 10px; border-left: 2px solid var(--line); line-height: 1.5; max-width: 86ch; } .msg-sys-qui { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tool); } .msg-sys-evt { font-family: var(--mono); font-size: 10.5px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--faint); } .msg-sys-x { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; } .msg-sys-t { font-family: var(--mono); font-size: 11px; color: var(--faint); opacity: .8; } .msg-sys.evt-fermeture, .msg-sys.evt-fermeture_froid { border-left-color: rgba(239,107,107,.45); } .msg-sys.evt-reouverture, .msg-sys.evt-ouverture { border-left-color: rgba(65,217,141,.45); } /* SENTINEL-493 : un réveil programmé — liseré pervenche ; « reçu par K » discret, à côté du texte qui dit déjà « livré à N ». */ .msg-sys.evt-reveil { border-left-color: rgba(125,140,248,.5); } .msg-sys-recu { font-family: var(--mono); font-size: 11px; color: var(--faint); } .msg-deleted { font-style: italic; color: var(--faint); font-size: 13px; } .ev { margin-top: 8px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; background: var(--bg); overflow: hidden; } .ev-head { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); padding: 6px 10px; border-bottom: 1px solid var(--line); } .ev pre { margin: 0; padding: 8px 10px; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; } .ev .out { color: var(--muted); border-top: 1px dashed var(--line); } .msg-secret { margin-top: 6px; padding: 5px 10px; border-radius: 6px; font-family: var(--mono); font-size: 11px; color: #ffb4a2; background: rgba(255,90,60,.1); border: 1px solid rgba(255,90,60,.35); } /* Le champ de remarque sous la lecture (SENTINEL-215, choix A de l'utilisateur) : sobre comme la saisie du fil — la remarque part dans le fil, préfixée par le document regardé ; confirmation discrète en vert, lien de retour. */ .doc-remarque .cmp-text { background: var(--bg); } /* SENTINEL-398 : le champ reste accessible pendant la lecture — collé au bas de l'écran (sticky dans #app > main) tant que la fin du document n'est pas atteinte, à sa place ensuite. Compact pour masquer peu : une ou deux lignes de saisie, plus au focus ; repliable en sa seule ligne de titre. Une ombre portée vers le haut le détache du texte qui passe dessous. */ .doc-remarque { position: sticky; bottom: 0; z-index: 2; margin: 26px 0 0; padding: 8px 14px 10px; box-shadow: 0 -8px 20px rgba(0,0,0,.45); } .doc-remarque .section-title { margin: 0 0 6px; align-items: center; } .doc-remarque.replie .section-title { margin: 0; } .doc-remarque .doc-rem-text { min-height: 44px; height: 44px; } .doc-remarque:focus-within .doc-rem-text { height: 96px; } .doc-remarque .cmp-act { margin-top: 6px; } .doc-remarque .cmp-act .btn { min-height: 34px; } .doc-rem-plier { background: none; border: none; padding: 2px 0; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--accent); } .doc-rem-plier:hover { text-decoration: underline; text-underline-offset: 2px; } .doc-rem-plier:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Téléphone : l'aide « Ctrl + Entrée » n'y sert pas, elle cède sa place pour que le champ tienne sur peu de hauteur. Les colonnes longues y gardent un plancher plus bas : le tableau tient plus souvent par la réduction à l'échelle, sans défiler. */ @media (max-width: 640px) { .doc-body td.col-long { min-width: 8em; } .doc-remarque .cmp-hint { display: none; } .doc-remarque { padding: 6px 10px 8px; } } .doc-rem-ok { color: var(--live); font-size: 13px; } .doc-rem-ok a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* ===== Enrolements, machines ===== */ .code-big { font-family: var(--mono); font-size: 24px; font-weight: 600; letter-spacing: 3px; color: var(--accent); } .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .row.end { justify-content: flex-end; } .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .btn { min-height: 42px; padding: 0 16px; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); background: var(--panel-2); font-size: 14px; } .btn.primary { background: var(--accent); border-color: var(--accent); color: #0e1116; font-weight: 600; } .btn.danger { color: var(--bad); border-color: rgba(239,107,107,.45); background: none; } .btn:disabled { opacity: .45; cursor: default; } .btn.small { min-height: 34px; padding: 0 12px; font-size: 13px; } .field { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; } .field label { font-family: var(--mono); font-size: 11px; color: var(--faint); } .field input { min-height: 42px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; font-size: 15px; font-family: var(--sans); } .field input:focus { outline: none; border-color: var(--accent); } /* ===== Complements (JS) ===== */ button.link { background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 500; } .hint { font-size: 12.5px; margin-top: 10px; } .enroll-kv { margin: 10px 0 0; } .idents { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; } .idents .agent-row { padding: 3px 0; } .agent-meta.right { margin-left: auto; } .confirm { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); } .confirm .faint { font-size: 12.5px; margin-top: 4px; } .messages { margin-top: 4px; } /* ===== Vue d'ensemble (SENTINEL-103, dispo SENTINEL-148) : un ecran, une periode ===== */ /* Bandeau de periode, 44 px sous la barre de navigation : selecteur segmente, compteurs, heure. */ .ov-bar { flex: none; height: 44px; display: flex; align-items: center; gap: 6px 18px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); } .seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; flex: none; } .seg button { padding: 5px 11px; border-right: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; color: var(--muted); cursor: pointer; } .seg button:last-child { border-right: 0; } .seg button.on { background: rgba(125,140,248,.18); color: var(--text); } .seg button:focus-visible { outline-offset: -2px; } .ov-counts { display: flex; flex-wrap: wrap; gap: 4px 16px; min-width: 0; font-variant-numeric: tabular-nums; } .ov-counts .ct { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .ov-counts .ct b { color: var(--text); font-weight: 600; } .ov-counts .ct.link { cursor: pointer; } .ov-counts .ct.link:hover { color: var(--text); } .ov-fill { flex: 1; } .ov-updated { color: var(--faint); font-size: 11.5px; white-space: nowrap; } .ov-updated.bad { color: var(--bad); cursor: help; } /* Corps : la scene a gauche — toute la hauteur tant que la frise de SENTINEL-150 n'est pas livree — et la colonne de droite sur les deux lignes (Sessions 45 %, Fils le reste). */ .ov-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 372px; grid-template-rows: 1fr 232px; gap: 12px; position: relative; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .ov-scene { grid-row: 1 / 3; min-width: 0; } .ov-side { grid-row: 1 / 3; grid-column: 2; display: flex; flex-direction: column; gap: 12px; min-height: 0; } .ov-side #ov-sessions { flex: 0 0 45%; min-height: 0; } .ov-side #ov-threads-panel { flex: 1; min-height: 0; } .panel-title { font-family: var(--mono); font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); padding: 9px 14px 7px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; flex: none; } .panel-title .sub { letter-spacing: 0; text-transform: none; color: var(--faint); font-size: 10.5px; } .panel-body { flex: 1; overflow-y: auto; padding: 8px 12px; min-height: 0; } .panel-body::-webkit-scrollbar { width: 8px; } .panel-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } /* Le graphe : le fond porte le degage du panneau, la scene 3D rend #0e1116 */ .graph-wrap { flex: 1; position: relative; min-height: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, rgba(125,140,248,.05), transparent 62%), var(--bg); } .scene-host { position: absolute; inset: 0; } /* Infobulle du survol (noeud ou trait) : DOM maison, jamais de HTML d'agent */ .gtip { position: absolute; z-index: 6; pointer-events: none; max-width: 330px; background: rgba(16,20,28,.97); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; box-shadow: 0 8px 28px rgba(0,0,0,.45); font-size: 12.5px; line-height: 1.5; color: var(--text); } .gtip .tt-name { font-family: var(--mono); font-weight: 600; font-size: 13px; } .gtip .tt-ident { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 1px; } .gtip .tt-state { margin-top: 5px; font-size: 12.5px; } .gtip .tt-sess { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 5px; display: flex; flex-direction: column; gap: 2px; } .gtip .tt-facts { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); } /* Les noms, au survol seulement (SENTINEL-149) : couche HTML au-dessus du canvas, taille fixe en pixels — nets et lisibles a toute distance. La couche ne capte pas la souris : le survol et les clics passent au graphe. */ .glabels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; } .glabel { position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.25; color: var(--text); background: rgba(14,17,22,.72); padding: 1px 6px; border-radius: 4px; white-space: nowrap; will-change: transform; user-select: none; } .glabel.off { display: none; } /* Le sujet d'un fil, au survol comme les noms : meme couche, meme taille (12,5 px, SENTINEL-149), style distinct */ .glabel.fil { font-style: italic; color: var(--muted); font-size: 11.5px; border: 1px solid var(--line); } /* SENTINEL-189 : noms toujours visibles — discrets pour les agents, en evidence pour l'humain. */ .glabel.agent { font-size: 11.5px; color: var(--muted); background: rgba(14,17,22,.55); } /* SENTINEL-395 : le nom d'un depot au sommet de son enveloppe — discret, sans fond. */ .glabel.depot { background: none; font-size: 11px; letter-spacing: .04em; opacity: .85; padding: 0 2px; } /* SENTINEL-417 : l'anneau « Organisation › Équipe » (teinte posée par la scène). */ .glabel.depot.equipe { font-family: var(--mono); font-size: 10.5px; opacity: .95; } .glabel.humain { font-family: var(--sans); font-weight: 600; font-size: 13px; color: #f6c1d3; } /* La légende de la scène (SENTINEL-149, refondue par SENTINEL-315) : un cartouche de lignes courtes, en bas à gauche, mono 11,5 px — couleur = le dépôt (pastilles des dépôts présents) et forme = l'état. Toujours visible sur ordinateur ; masquée sous 900 px : l'écran étroit ne lui laisse pas de place, et ses formes se lisent au survol, pas à la tape. Le bouton « Légende » qui la repliait s'en est allé avec le repli. */ .glegend { position: absolute; left: 10px; bottom: 10px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: calc(100% - 20px); font-family: var(--mono); font-size: 11.5px; color: var(--muted); background: rgba(21,26,35,.88); border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; pointer-events: none; } .glegend .lg-l { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; } @media (max-width: 899px) { .glegend { display: none; } } .glegend .lg { font-size: 12px; flex: none; } .glegend .lg.s { color: #7d8cf8; } /* ● session (la couleur varie par dépôt) */ .glegend .lg.h { color: #ef8fb0; } /* ⊙ humain (SENTINEL-180, rose fixe) */ .glegend .lg.f { color: var(--muted); } .glegend .lg.a { color: #f0b429; } /* ■ fil actif */ .glegend .lg.p { color: #a07d2e; } /* ■ fil en pause */ .glegend .lg.e { color: #5a6478; } /* ■ fil éteint */ /* Les pastilles « couleur = le dépôt » (SENTINEL-315) : cliquables seules dans un cartouche sinon traversé par le graphe (pointer-events: none ci-dessus) ; un clic passe le dépôt à la teinte suivante du palet. */ .glegend .lg-depots { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; } .glegend .lg-depot { pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; color: var(--muted); background: none; border: 0; padding: 0; } .glegend .lg-depot:hover { color: var(--text); text-decoration: underline; } .glegend .lg-depot.err { color: #e5484d; } .glegend .lg-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #66708a; border: 1px solid rgba(255,255,255,.22); } /* Commandes du graphe : petits boutons sobres, coin haut droit du panneau */ .graph-tools { position: absolute; top: 10px; right: 10px; z-index: 5; display: flex; gap: 6px; } .gtool { font-family: var(--mono); font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; background: rgba(21,26,35,.88); cursor: pointer; white-space: nowrap; } .gtool:hover { color: var(--text); } .gtool.on { color: var(--text); border-color: var(--accent); background: rgba(125,140,248,.14); } /* Sans WebGL : la scene ne s'ouvre pas, les panneaux restent */ .no-webgl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.6; } .no-webgl b { color: var(--text); font-family: var(--mono); font-size: 13px; display: block; margin-bottom: 6px; } /* Marqueur d'ecoute, volontairement simple (SENTINEL-148) : un point plein quand la session ecoute, vide sinon — l'anneau anime vient avec SENTINEL-152. */ .lm { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--faint); background: transparent; flex: none; } /* Pastille de la couleur d'agent (SENTINEL-149) : la teinte vient du slot resolu par le serveur (`interface.agent_colors`, par depot) — bleu, orange, sarcelle, orchidee, gris ardoise hors table. */ .cl { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; } /* Marqueur d'humain (SENTINEL-180) : le meme anneau que la scene 3D, en glyph — rose fixe, hors des palettes d'agents et d'etats. */ .hm-glyph { color: #ef8fb0; font-family: var(--mono); font-size: 12.5px; line-height: 1; flex: none; } /* Panneau Sessions : une ligne de 28 px, grille 14px 1fr 70px 30px 44px — marqueur, nom court « depot > code » avec pastille d'agent, barre de volume, messages, fils. La ligne d'un humain (SENTINEL-180) garde la meme grille — marqueur ⊙, « nom · humain » — sur un fond a peine rose. */ .ov-srow { display: grid; grid-template-columns: 14px 1fr 70px 30px 44px; align-items: center; gap: 8px; height: 28px; font-size: 13px; border-radius: 5px; padding: 0 2px; } .ov-srow:hover, .ov-srow.hl { background: rgba(125,140,248,.07); } .ov-srow.humain, .ov-srow.humain:hover, .ov-srow.humain.hl { background: rgba(239,143,176,.06); } .ov-srow.humain.hl { background: rgba(239,143,176,.14); } .ov-srow .nm { display: flex; align-items: center; gap: 6px; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; } /* SENTINEL-268 : le nom de la session (role sinon code) passe avant le depot, qui cede la place le premier. */ .ov-srow .nm .rp { flex: 0 0 auto; max-width: 65%; min-width: 3ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-srow .nm .rp.none { color: var(--faint); font-style: italic; } .ov-srow .nm .rp.humain-nom { color: #ef8fb0; } .ov-srow .nm .cd { color: var(--faint); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vbar { height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; } .vbar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .ov-srow.humain .vbar i { background: #ef8fb0; } .ov-srow .n { font-family: var(--mono); font-size: 12px; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; } .ov-srow .f { font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: right; white-space: nowrap; } /* Panneau Fils : deux lignes par fil — losange d'etat, sujet, nombre ; puis barre de 90 px et codes des sessions qui ont parle, par volume. Le losange suit les seuils de window.thresholds (actif / en pause / eteint), en pointille si le fil est clos. */ .ov-trow { display: block; width: 100%; text-align: left; padding: 5px 4px; border-top: 1px solid var(--line); cursor: pointer; border-radius: 0 6px 6px 0; } .ov-trow:first-child { border-top: none; } .ov-trow:hover, .ov-trow.hl { background: rgba(125,140,248,.07); } .ov-tl1 { display: flex; align-items: baseline; gap: 8px; font-size: 13px; } .ov-tsubj { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ov-tn { font-family: var(--mono); font-size: 12px; color: var(--text); flex: none; font-variant-numeric: tabular-nums; } .ov-tl2 { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; margin: 3px 0 0 20px; } .ov-tl2 .vbar { width: 90px; } .ov-twho { font-family: var(--mono); font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Losange d'etat d'un fil : actif (plein, chaud), en pause (ocre), eteint (gris) ; clos : pointille. Memes couleurs que la chaleur de la scene. */ .dz { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid #5a6478; flex: none; } .dz.actif { border-color: var(--heat-0); background: rgba(240,180,41,.3); } .dz.pause { border-color: #a07d2e; } .dz.clos { border-style: dashed; } /* Fiche d'un fil (elle remplace le panneau Fils au clic) */ .ov-fiche { display: flex; flex-direction: column; height: 100%; } .ov-h { font-family: var(--mono); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); margin: 10px 0 4px; } .ov-fiche .ov-h:first-child { margin-top: 2px; } .ov-fhead { padding: 9px 14px 10px; border-bottom: 1px solid var(--line); flex: none; } .ov-back { background: none; border: none; padding: 0; cursor: pointer; color: var(--accent); font-family: var(--mono); font-size: 12px; } .ov-fsub { font-size: 15px; font-weight: 600; line-height: 1.3; margin-top: 4px; } .ov-fmeta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 3px 12px; } .ov-fbody { flex: 1; overflow-y: auto; padding: 8px 14px 12px; min-height: 0; } .ov-fbody::-webkit-scrollbar { width: 8px; } .ov-fbody::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } .ov-fwho { display: flex; align-items: center; gap: 7px; padding: 2px 0; font-family: var(--mono); font-size: 12px; color: var(--muted); } .ov-fwho .n { margin-left: auto; color: var(--text); } .ov-fwho.humain { color: #ef8fb0; } /* SENTINEL-417 : l'auteur d'un autre propriétaire, dans un fil partagé. */ .ov-fwho.externe { color: var(--muted); } .ov-fwho.externe .hm-glyph { color: var(--faint); } .ov-fpartage { color: var(--accent); } .ov-fwho.humain .n { color: var(--text); } .ov-msg { border-top: 1px solid var(--line); padding: 6px 0; margin-top: 6px; } .ov-msg:first-of-type { border-top: none; } .ov-msg .mm { font-family: var(--mono); font-size: 11px; color: var(--faint); } .ov-msg .mt { font-size: 12.5px; color: var(--muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ov-open { min-height: 36px; border-radius: 8px; cursor: pointer; border: 1px solid var(--accent); background: rgba(125,140,248,.14); color: var(--text); font-family: var(--mono); font-size: 12.5px; width: 100%; } .ov-open:hover { background: rgba(125,140,248,.24); } /* Le pied de la fiche : « Ouvrir le fil » reste visible, le corps defile. */ .ov-ffoot { flex: none; padding: 10px 14px; border-top: 1px solid var(--line); } /* Tiroir des sessions : la table de la vigie par-dessus la colonne de droite, ouvert depuis les compteurs d'ecoute du bandeau. */ .ov-drawer { position: absolute; top: 0; bottom: 0; right: 0; width: min(600px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; z-index: 8; display: flex; flex-direction: column; min-height: 0; box-shadow: -18px 0 40px rgba(0,0,0,.45); } .ov-drawer .panel-body { flex: 1; overflow: auto; } .ov-drawer-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--muted); font-family: var(--mono); font-size: 12px; padding: 0 2px; } .ov-drawer-close:hover { color: var(--text); } /* Styles que la bibliotheque 3D injecte en