/* ============================================================
   MOTHER SYS · direction artistique
   Héritée d'Operators : ardoise froide, cyan de veille, ambre d'action.
   ============================================================ */

:root{
  --bg:#0D1114; --panel:#151A1D; --panel2:#1B2125; --panel3:#20272B;
  --line:#232B30; --line2:#2E3A41;
  --cyan:#4FA8C9; --amber:#D19A54; --ink:#EAEDF3; --dim:#7E8A92;
  --danger:#C96A5C; --ok:#6FB98F; --violet:#8C7FB8;
  --r:12px;
  --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
  --display:'Space Grotesk',Inter,system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,sans-serif; font-size:14px;
  overflow:hidden; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(79,168,201,.3)}
button,input,textarea,select{font-family:inherit}
a{color:var(--cyan)}

/* Barres de défilement */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}
*::-webkit-scrollbar-thumb:hover{background:#3A484F}

/* ============ PRIMITIVES ============ */
.btn{
  background:var(--amber); border:0; border-radius:8px; color:#14100A;
  font:700 12px var(--display); letter-spacing:.07em; padding:9px 14px; cursor:pointer;
  transition:filter .15s;
}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--dim);font-weight:500}
.btn.ghost:hover{color:var(--ink);border-color:var(--line2);filter:none}
.btn.danger{background:none;border:1px solid rgba(201,106,92,.5);color:var(--danger)}
.btn.danger:hover{background:rgba(201,106,92,.12)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.field{
  background:var(--bg); border:1px solid var(--line); border-radius:8px; color:var(--ink);
  font:13px var(--mono); padding:10px 12px; outline:none; width:100%;
}
.field:focus{border-color:var(--cyan)}
.field::placeholder{color:#59646B}
textarea.field{font-family:Inter,sans-serif;font-size:13.5px;line-height:1.6;resize:vertical}
label.lb{display:block;font:10.5px var(--mono);letter-spacing:.14em;color:var(--dim);margin-bottom:6px;text-transform:uppercase}
.hr{height:1px;background:var(--line);margin:18px 0}
.mono{font-family:var(--mono)}
.dimtext{color:var(--dim)}
.grow{flex:1}

/* ============ ÉCRAN D'AMORÇAGE ============ */
#boot{
  position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:13px; line-height:1.85;
  transition:opacity .6s ease;
}
#boot.gone{opacity:0;pointer-events:none}
#boot::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}
#boot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 50%, transparent 40%, rgba(0,0,0,.65) 100%);
}
#bootInner{width:min(680px,92vw);position:relative;z-index:2}
#bootLog{white-space:pre-wrap;color:var(--dim);min-height:46vh}
#bootLog .ok{color:var(--cyan)}
#bootLog .hot{color:var(--amber)}
#bootLog .em{color:var(--ink)}
#bootSeal{
  font-family:var(--display); font-weight:700; font-size:clamp(28px,7vw,54px);
  letter-spacing:.24em; color:var(--ink); opacity:0; transition:opacity .9s;
}
#bootSeal.on{opacity:1}
#bootSub{font-size:11px;letter-spacing:.32em;color:var(--amber);opacity:0;transition:opacity .9s .3s;margin-top:10px}
#bootSub.on{opacity:1}
.caret::after{content:"▌";color:var(--amber);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ============ PORTAIL ============ */
.gate-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px}
.gate{
  width:min(400px,100%); background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:34px 30px; position:relative;
}
.gate .mark{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.2em}
.gate .sub{font-family:var(--mono);font-size:10.5px;color:var(--cyan);letter-spacing:.24em;margin-top:7px}
.gate form{margin-top:26px;display:grid;gap:11px}
.gate .msg{font-size:12.5px;min-height:18px;line-height:1.5}
.gate .msg.err{color:var(--danger)}
.gate .msg.ok{color:var(--ok)}
.gate .tiny{margin-top:18px;font:10.5px var(--mono);letter-spacing:.1em;color:#5C666D;text-align:center}
.gate .tiny b{color:var(--dim);cursor:pointer;font-weight:400;border-bottom:1px dotted #3D474D}
body.gate-body::after{
  content:"";position:fixed;left:0;right:0;bottom:0;height:200px;pointer-events:none;
  background:radial-gradient(60% 150px at 50% 100%, rgba(209,154,84,.15), transparent 70%);
}

/* ============ BUREAU ============ */
/* L'attribut hidden vient de la feuille du navigateur, avec la
   spécificité la plus faible qui soit. Toute règle display: sur un
   sélecteur d'identifiant l'écrase en silence : l'élément reste
   affiché alors que le code le croit masqué. C'est ainsi que le
   panneau de rédaction recouvrait en permanence la boîte de
   réception. Cette règle referme la faille pour tout le poste. */
[hidden]{display:none!important}

#desk{
  position:fixed; inset:0;
  background:
    linear-gradient(rgba(79,168,201,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,168,201,.032) 1px, transparent 1px),
    var(--bg);
  background-size:44px 44px, 44px 44px, auto;
}
#desk::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:240px; pointer-events:none;
  background:radial-gradient(55% 170px at 50% 100%, rgba(209,154,84,.13), transparent 72%);
}

/* Barre supérieure */
#topbar{
  position:fixed; top:0; left:0; right:0; height:46px; z-index:900;
  display:flex; align-items:center; gap:14px; padding:0 14px;
  background:rgba(13,17,20,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
}
#topbar .mark{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.18em;white-space:nowrap}
#topbar .node{color:var(--cyan)}
#saveState{
  display:flex;align-items:center;gap:7px;color:var(--dim);
  background:none;border:1px solid transparent;border-radius:6px;
  padding:5px 8px;cursor:pointer;font:inherit;transition:.15s
}
#saveState:hover{color:var(--ink);border-color:var(--line);background:rgba(255,255,255,.03)}
#saveState:disabled{cursor:default;opacity:.6}
#saveTxt{font:inherit;letter-spacing:inherit}
#saveDot{width:7px;height:7px;border-radius:50%;background:var(--cyan);transition:background .3s}
#saveDot.dirty{background:var(--amber)}
#saveDot.err{background:var(--danger)}
#clock{color:var(--ink)}
.top-btn{
  background:none;border:1px solid var(--line);color:var(--dim);border-radius:6px;
  padding:5px 9px;font:10.5px var(--mono);letter-spacing:.1em;cursor:pointer;white-space:nowrap
}
.top-btn:hover{color:var(--ink);border-color:var(--line2)}
.top-btn.on{color:var(--amber);border-color:rgba(209,154,84,.45)}

/* Pomodoro discret */
#pomo{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px}
#pomoDot{width:7px;height:7px;border-radius:50%;background:var(--line2)}
#pomoDot.run{background:var(--amber);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
#pomoTime{color:var(--ink);min-width:44px}

/* ============ FENÊTRES ============ */
.win{
  position:absolute; min-width:320px; min-height:220px; z-index:860;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.win.active{border-color:var(--line2);box-shadow:0 22px 60px rgba(0,0,0,.62),0 0 0 1px rgba(79,168,201,.2)}
/* Masquer prime sur toute mise en page. Sans !important, une règle
   display: portée par un identifiant (#w-mail est en grille) empêche
   la fenêtre de se refermer : le bouton réduire semble mort. */
.win.hidden{display:none!important}
.win.max{inset:46px 0 0 0!important;width:auto!important;height:auto!important;
  border-radius:0;border-left:0;border-right:0;z-index:890!important}
.win.max .win-grip{display:none}
.win-head{
  display:flex;align-items:center;gap:10px;padding:10px 13px;
  background:var(--panel2);border-bottom:1px solid var(--line);
  cursor:grab;user-select:none;touch-action:none;flex:none;
}
.win-head:active{cursor:grabbing}
.win-head .glyph{width:10px;height:10px;border:1.5px solid var(--cyan);border-radius:3px;flex:none}
.win[data-app="mail"] .glyph{border-color:var(--violet)}
.win[data-app="notes"] .glyph{border-color:var(--amber)}
.win-title{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.12em}
.win-btn{
  width:22px;height:22px;border:1px solid var(--line);border-radius:6px;background:none;
  color:var(--dim);cursor:pointer;font:12px var(--mono);line-height:1;flex:none
}
.win-btn:hover{color:var(--ink);border-color:var(--line2)}
.win-body{flex:1;overflow:auto;position:relative;display:flex}
.win-grip{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;touch-action:none;z-index:5}
.win-grip::after{content:"";position:absolute;right:5px;bottom:5px;width:7px;height:7px;
  border-right:2px solid var(--dim);border-bottom:2px solid var(--dim)}

/* ============ MISSIONS ============ */
#mProjects{
  width:186px;flex:none;border-right:1px solid var(--line);overflow:auto;padding:10px 8px;
  background:rgba(0,0,0,.14)
}
.proj{
  display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;cursor:pointer;
  font-size:12.5px;color:var(--dim);margin-bottom:2px;position:relative
}
.proj:hover{background:var(--panel2);color:var(--ink)}
.proj.on{background:var(--panel3);color:var(--ink)}
.proj .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj .ct{font:10px var(--mono);color:var(--dim);background:rgba(0,0,0,.3);padding:1px 6px;border-radius:20px}
.proj.on .ct{color:var(--amber)}
.proj .bar{position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--cyan);opacity:0}
.proj.on .bar{opacity:1}
#projAdd{display:flex;gap:6px;margin-top:8px}
#mMain{flex:1;display:flex;flex-direction:column;overflow:hidden}
#mHead{
  padding:14px 16px 10px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:10px;flex:none
}
#mName{
  font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.06em;
  background:none;border:0;color:var(--ink);outline:none;width:100%;padding:2px 4px;border-radius:6px
}
#mName:hover{background:rgba(255,255,255,.03)}
#mName:focus{background:var(--bg);box-shadow:inset 0 0 0 1px var(--cyan)}
#mNote{
  width:100%;background:none;border:0;color:var(--dim);font-size:12.5px;line-height:1.6;
  outline:none;resize:none;padding:4px;margin-top:2px;border-radius:6px;min-height:20px
}
#mNote:focus{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink)}
#mNote.empty-flag{box-shadow:inset 0 0 0 1px rgba(209,154,84,.35)}
#taskNew{display:flex;gap:8px;padding:11px 16px;border-bottom:1px solid var(--line);flex:none}
#tasks{flex:1;overflow:auto;padding:8px 10px 20px}
.task{
  display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:8px;
  border:1px solid transparent;transition:background .12s
}
.task:hover{background:var(--panel2);border-color:var(--line)}
.task .box{
  width:16px;height:16px;border:1.5px solid var(--line2);border-radius:5px;cursor:pointer;flex:none;
  margin-top:1px;display:grid;place-items:center;transition:.15s
}
.task .box:hover{border-color:var(--cyan)}
.task.done .box{background:var(--cyan);border-color:var(--cyan)}
.task.done .box::after{content:"";width:8px;height:4px;border-left:2px solid #0D1114;border-bottom:2px solid #0D1114;transform:rotate(-45deg) translate(1px,-1px)}
.task .tx{flex:1;font-size:13.5px;line-height:1.5;word-break:break-word;cursor:text}
.task.done .tx{color:#5C666D;text-decoration:line-through}
.task .hot{color:var(--amber)}
.task .act{opacity:0;display:flex;gap:4px;transition:opacity .12s}
.task:hover .act{opacity:1}
.iconbtn{background:none;border:0;color:var(--dim);cursor:pointer;font:12px var(--mono);padding:2px 5px;border-radius:5px}
.iconbtn:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.iconbtn.del:hover{color:var(--danger)}
.empty{color:#5C666D;font-size:12.5px;padding:26px 16px;text-align:center;line-height:1.7}

/* ============ NOTES ============ */
#nTabs{display:flex;gap:5px;padding:11px 14px 0;flex-wrap:wrap;flex:none}
.ntab{
  background:none;border:1px solid var(--line);color:var(--dim);border-radius:20px;
  padding:5px 12px;font:11px var(--mono);letter-spacing:.06em;cursor:pointer
}
.ntab:hover{color:var(--ink)}
.ntab.on{background:var(--panel3);color:var(--ink);border-color:var(--line2)}
#nNew{display:flex;gap:8px;padding:11px 14px;flex:none}
#nGrid{
  flex:1;overflow:auto;padding:4px 14px 20px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;align-content:start
}
.note{
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px;
  cursor:pointer;min-height:96px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden
}
.note:hover{border-color:var(--line2)}
.note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--cyan)}
.note.c-amber::before{background:var(--amber)}
.note.c-plain::before{background:var(--line2)}
.note h4{font-size:13px;font-weight:600;letter-spacing:.01em}
.note p{font-size:11.5px;color:var(--dim);line-height:1.55;overflow:hidden;flex:1}
.note .ts{font:9.5px var(--mono);color:#5C666D;letter-spacing:.08em}

/* ============ MODALES ============ */
.modal{
  position:fixed;inset:0;z-index:1200;background:rgba(6,9,11,.76);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px
}
.modal.open{display:flex}
.card{
  background:var(--panel);border:1px solid var(--line2);border-radius:14px;
  width:min(620px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.7)
}
.card .chead{
  display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);flex:none
}
.card .chead h3{font:700 13px var(--display);letter-spacing:.14em}
.card .cbody{padding:18px;overflow:auto;flex:1}
.card .cfoot{display:flex;gap:8px;justify-content:flex-end;padding:13px 18px;border-top:1px solid var(--line);flex:none}
.grp{margin-bottom:14px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>.grp{flex:1;min-width:150px}

/* Éditeur de note */
#noteCard{width:min(760px,100%);height:min(76vh,700px)}
#nmTitle{background:none;border:0;color:var(--ink);font:600 16px Inter;outline:none;flex:1}
#nmBody{flex:1;background:var(--bg);border:0;color:var(--ink);font:14.5px/1.75 Inter;padding:18px;outline:none;resize:none;width:100%}
.dots{display:flex;gap:6px}
.cdot{width:14px;height:14px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.cdot.c-cyan{background:var(--cyan)} .cdot.c-amber{background:var(--amber)} .cdot.c-plain{background:var(--line2)}
.cdot.sel{border-color:var(--ink)}

/* Capture rapide */
#captureModal .card{width:min(560px,100%)}
#captureInput{background:none;border:0;color:var(--ink);font:16px Inter;outline:none;width:100%;padding:18px}
#captureHint{font:10.5px var(--mono);color:#5C666D;padding:0 18px 14px;letter-spacing:.06em}

/* ============ WIDGET MOTHER ============ */
#motherFab{
  position:fixed;right:18px;bottom:calc(96px + var(--safe-b));z-index:950;
  width:56px;height:56px;border-radius:50%;border:1px solid var(--line2);
  background:radial-gradient(circle at 50% 40%, #1E262B, #12181B);
  cursor:pointer;display:grid;place-items:center;
  box-shadow:0 10px 34px rgba(0,0,0,.55)
}
#motherFab:hover{border-color:var(--cyan)}
#motherFab .eye{
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #F0D9B4, var(--amber) 55%, #8C5F26);
  box-shadow:0 0 14px rgba(209,154,84,.65);
  animation:breathe 4.5s ease-in-out infinite
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(.82);opacity:.6}}
#motherFab.thinking .eye{animation:breathe 1.1s ease-in-out infinite;background:radial-gradient(circle at 40% 35%,#CDEBF7,var(--cyan) 55%,#2C6C85);box-shadow:0 0 16px rgba(79,168,201,.7)}
#motherFab .badge{
  position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;border-radius:10px;
  background:var(--amber);color:#14100A;font:700 10px var(--mono);display:none;place-items:center;padding:0 5px
}
#motherFab.has .badge{display:grid}

#motherPanel{
  position:fixed;right:18px;bottom:calc(96px + var(--safe-b));z-index:960;
  width:min(390px,calc(100vw - 36px));height:min(560px,calc(100dvh - 190px));
  background:var(--panel);border:1px solid var(--line2);border-radius:16px;
  display:none;flex-direction:column;overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.66);
  transform-origin:bottom right
}
#motherPanel.open{display:flex;animation:popin .22s ease}
@keyframes popin{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
#mpHead{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:var(--panel2);border-bottom:1px solid var(--line);flex:none
}
#mpHead .eye{width:11px;height:11px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px rgba(209,154,84,.6);flex:none}
#mpHead .nm{font:700 12.5px var(--display);letter-spacing:.18em}
#mpHead .st{font:9.5px var(--mono);color:var(--cyan);letter-spacing:.16em}
#mpLog{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:92%;font-size:13.5px;line-height:1.68;white-space:pre-wrap;word-break:break-word}
.msg.you{align-self:flex-end;background:var(--panel3);border:1px solid var(--line);border-radius:12px 12px 4px 12px;padding:9px 12px}
.msg.her{align-self:flex-start;color:var(--ink);border-left:2px solid var(--amber);padding-left:12px}
.msg.sys{align-self:center;font:10px var(--mono);letter-spacing:.14em;color:#5C666D;text-transform:uppercase}
.msg.act{align-self:flex-start;font:10.5px var(--mono);color:var(--cyan);letter-spacing:.06em;border-left:2px solid var(--cyan);padding-left:12px}
#mpTyping{padding:0 14px 8px;font:10.5px var(--mono);color:var(--dim);letter-spacing:.12em}
#mpQuick{display:flex;gap:6px;padding:0 12px 10px;flex-wrap:wrap;flex:none}
.qbtn{
  background:none;border:1px solid var(--line);color:var(--dim);border-radius:20px;
  padding:5px 11px;font:10px var(--mono);letter-spacing:.1em;cursor:pointer
}
.qbtn:hover{color:var(--amber);border-color:rgba(209,154,84,.4)}
#mpForm{display:flex;gap:8px;padding:11px 12px;border-top:1px solid var(--line);flex:none;align-items:flex-end}
#mpInput{
  flex:1;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--ink);
  font:13.5px Inter;padding:10px 12px;outline:none;resize:none;max-height:110px
}
#mpInput:focus{border-color:var(--cyan)}
#mpSend{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;padding:0;font-size:15px}
#mpMeter{display:flex;gap:12px;padding:0 14px 10px;font:9.5px var(--mono);color:#5C666D;letter-spacing:.1em;flex-wrap:wrap}

/* Bulle d'impulsion */
#motherToast{
  position:fixed;right:18px;bottom:calc(162px + var(--safe-b));z-index:940;
  width:min(320px,calc(100vw - 36px));background:var(--panel);border:1px solid var(--line2);
  border-left:2px solid var(--amber);border-radius:12px;padding:13px 15px;
  font-size:13px;line-height:1.62;box-shadow:0 16px 44px rgba(0,0,0,.6);
  display:none;cursor:pointer
}
#motherToast.on{display:block;animation:popin .25s ease}
#motherToast .who{font:9.5px var(--mono);letter-spacing:.2em;color:var(--amber);margin-bottom:6px}

/* ============ CONSTANTES VITALES ============ */
#vitals{
  position:fixed;right:14px;top:60px;z-index:800;width:212px;
  display:flex;flex-direction:column;gap:9px
}
body.no-vitals #vitals{display:none}
.vit{
  background:rgba(21,26,29,.82);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:12px;padding:11px 13px
}
.vit .lb{font:9.5px var(--mono);letter-spacing:.18em;color:var(--dim);display:flex;justify-content:space-between}
.vit .val{font:700 25px var(--display);letter-spacing:.02em;line-height:1.25;margin-top:3px}
.vit .val small{font:400 11px var(--mono);color:var(--dim);letter-spacing:.1em;margin-left:4px}
.vit .cap{font:10px var(--mono);color:#5C666D;letter-spacing:.06em;margin-top:2px}
.vit.row2{display:flex;gap:12px;align-items:center}
.ring{width:52px;height:52px;flex:none}
.ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.ring .bgc{stroke:var(--line)}
.ring .fg{stroke:var(--cyan);transition:stroke-dasharray .7s cubic-bezier(.2,.8,.3,1)}
.ring.amber .fg{stroke:var(--amber)}
.ring.ok .fg{stroke:var(--ok)}
.ring.hot .fg{stroke:var(--danger)}
.ring text{font:700 13px var(--display);fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.spark{width:100%;height:34px;display:block;margin-top:6px}
.spark path{fill:none;stroke:var(--cyan);stroke-width:1.6}
.spark .area{fill:rgba(79,168,201,.12);stroke:none}
.bars{display:flex;gap:3px;align-items:flex-end;height:34px;margin-top:7px}
.bars i{flex:1;background:var(--line2);border-radius:2px;min-height:2px;transition:height .5s}
.bars i.on{background:var(--cyan)}
.bars i.today{background:var(--amber)}
.pressline{display:flex;justify-content:space-between;font-size:11.5px;padding:3px 0;color:var(--dim)}
.pressline b{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.pressline i{font-style:normal;font-family:var(--mono);font-size:10px}
.pressline i.hot{color:var(--amber)}

/* ============ LECTEUR AUDIO ============ */
#player{
  position:fixed;left:14px;bottom:calc(84px + var(--safe-b));z-index:850;width:238px;
  background:rgba(21,26,29,.9);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:14px;padding:11px 13px;display:none;
  overflow:hidden;box-sizing:border-box
}
#player.on{display:block}
#plHead{display:flex;align-items:center;gap:8px;font:9.5px var(--mono);letter-spacing:.18em;color:var(--dim)}
#plTitle{font-size:12.5px;color:var(--ink);margin-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#plCtl{display:flex;align-items:center;gap:6px;margin-top:9px;min-width:0}
.plb{
  background:none;border:1px solid var(--line);color:var(--dim);border-radius:7px;
  width:28px;height:28px;cursor:pointer;display:grid;place-items:center;font-size:11px;flex:none
}
.plb:hover{color:var(--ink);border-color:var(--line2)}
.plb.main{background:var(--amber);border-color:var(--amber);color:#14100A}
/* Un input range garde une largeur intrinsèque d'environ 130 px et
   min-width:auto l'empêche de rétrécir : la barre débordait du lecteur.
   flex-basis à zéro et min-width à zéro la forcent à tenir. */
#plVol{
  flex:1 1 0;min-width:0;width:auto;margin:0;
  -webkit-appearance:none;appearance:none;
  height:3px;background:var(--line2);border-radius:3px;outline:none
}
#plVol::-webkit-slider-runnable-track{height:3px;background:transparent}
#plVol::-moz-range-track{height:3px;background:transparent}
#plVol::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--cyan);cursor:pointer}
#plVol::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--cyan);cursor:pointer}
#plList{max-height:150px;overflow:auto;margin-top:9px;border-top:1px solid var(--line);padding-top:7px;display:none}
#plList.on{display:block}
.trk{padding:5px 7px;border-radius:6px;font-size:11.5px;color:var(--dim);cursor:pointer;display:flex;gap:7px}
.trk:hover{background:var(--panel3);color:var(--ink)}
.trk.on{color:var(--amber)}
.trk span{font:9px var(--mono);color:#5C666D;letter-spacing:.1em;align-self:center}
.eqbar{display:flex;gap:2px;align-items:flex-end;height:11px}
.eqbar i{width:2px;background:var(--amber);border-radius:1px;height:3px}
#player.playing .eqbar i:nth-child(1){animation:eq .9s ease-in-out infinite}
#player.playing .eqbar i:nth-child(2){animation:eq .9s ease-in-out .18s infinite}
#player.playing .eqbar i:nth-child(3){animation:eq .9s ease-in-out .36s infinite}
@keyframes eq{0%,100%{height:3px}50%{height:11px}}

/* ============ DOCK ============ */
#dock{
  position:fixed;left:50%;bottom:calc(14px + var(--safe-b));transform:translateX(-50%);z-index:900;
  display:flex;gap:4px;padding:7px;
  background:rgba(21,26,29,.92);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:16px
}
.dock-btn{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  min-width:62px;padding:8px;border:0;border-radius:10px;background:none;
  color:var(--dim);font:9.5px var(--mono);letter-spacing:.11em;cursor:pointer;position:relative
}
.dock-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dock-btn:hover{color:var(--ink);background:var(--panel3)}
.dock-btn.on{color:var(--amber)}
.dock-btn .lamp{position:absolute;bottom:2px;width:4px;height:4px;border-radius:50%;background:transparent}
.dock-btn.on .lamp{background:var(--amber)}
.dock-btn.flash{animation:flash .5s ease}
@keyframes flash{0%,100%{background:none}50%{background:rgba(209,154,84,.22)}}

/* ============ ADMIN ============ */
body.adm{overflow:auto}
#adm{max-width:1080px;margin:0 auto;padding:76px 20px 90px}
.adm-nav{
  position:fixed;top:0;left:0;right:0;height:54px;z-index:100;display:flex;align-items:center;gap:12px;
  padding:0 20px;background:rgba(13,17,20,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)
}
.adm-nav .mark{font:700 14px var(--display);letter-spacing:.2em}
.adm-nav .tag{font:10px var(--mono);color:var(--danger);letter-spacing:.2em;border:1px solid rgba(201,106,92,.4);padding:3px 8px;border-radius:5px}
.tabs{display:flex;gap:4px;overflow:auto;margin-bottom:22px;border-bottom:1px solid var(--line);padding-bottom:0}
.tab{
  background:none;border:0;border-bottom:2px solid transparent;color:var(--dim);
  padding:11px 15px;font:11px var(--mono);letter-spacing:.14em;cursor:pointer;white-space:nowrap
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--amber);border-bottom-color:var(--amber)}
.pane{display:none}
.pane.on{display:block}
.block{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:16px}
.block h3{font:700 12px var(--display);letter-spacing:.16em;margin-bottom:4px}
.block .sub{font-size:12.5px;color:var(--dim);line-height:1.6;margin-bottom:16px}
table.tb{width:100%;border-collapse:collapse;font-size:13px}
table.tb th{
  text-align:left;font:10px var(--mono);letter-spacing:.14em;color:var(--dim);
  padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap
}
table.tb td{padding:11px 10px;border-bottom:1px solid rgba(35,43,48,.6);vertical-align:middle}
table.tb tr:hover td{background:rgba(255,255,255,.017)}
.pill{font:9.5px var(--mono);letter-spacing:.1em;padding:2px 8px;border-radius:20px;border:1px solid var(--line2);color:var(--dim)}
.pill.admin{color:var(--amber);border-color:rgba(209,154,84,.4)}
.pill.off{color:var(--danger);border-color:rgba(201,106,92,.4)}

/* Curseurs de personnalité */
.dial{margin-bottom:17px}
.dial .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.dial .nm{font:10.5px var(--mono);letter-spacing:.13em;color:var(--ink)}
.dial .vv{font:10.5px var(--mono);color:var(--amber)}
.dial input[type=range]{
  -webkit-appearance:none;width:100%;height:3px;background:var(--line2);border-radius:3px;outline:none
}
.dial input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--amber);
  cursor:pointer;box-shadow:0 0 0 4px rgba(209,154,84,.14)
}
.dial input[type=range]::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:var(--amber);cursor:pointer}
.dial .ends{display:flex;justify-content:space-between;font:9.5px var(--mono);color:#5C666D;margin-top:6px;letter-spacing:.06em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}

.drop{
  border:1.5px dashed var(--line2);border-radius:12px;padding:30px 20px;text-align:center;
  color:var(--dim);font-size:13px;cursor:pointer;transition:.15s;line-height:1.7
}
.drop:hover,.drop.over{border-color:var(--amber);color:var(--ink);background:rgba(209,154,84,.05)}
.logline{font:11px var(--mono);color:var(--dim);padding:5px 0;border-bottom:1px solid rgba(35,43,48,.5);display:flex;gap:12px}
.logline b{color:var(--cyan);font-weight:400;min-width:150px}
.logline span{color:#5C666D;min-width:140px}
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:2000;
  background:var(--panel3);border:1px solid var(--line2);border-radius:10px;
  padding:12px 20px;font-size:13px;box-shadow:0 16px 44px rgba(0,0,0,.6);display:none
}
.toast.on{display:block;animation:popin .2s ease}
.toast.err{border-color:rgba(201,106,92,.5);color:#E8A79D}
.toast.ok{border-color:rgba(111,185,143,.5)}

/* ============ MOBILE ============ */
#mobBar{display:none}
@media (max-width:860px){
  body{overflow:hidden}
  #topbar{height:44px;gap:9px;padding:0 11px;font-size:10px}
  #topbar .mark{font-size:12.5px;letter-spacing:.14em}
  .hide-sm{display:none!important}
  #vitals{
    position:fixed;inset:44px 0 auto 0;width:auto;flex-direction:row;overflow:auto;
    gap:8px;padding:9px 11px;scrollbar-width:none
  }
  #vitals::-webkit-scrollbar{display:none}
  .vit{flex:none;min-width:126px;padding:9px 11px}
  .vit.wide{min-width:212px}
  .vit .val{font-size:20px}

  body.no-vitals .win,
  body.no-vitals .win.max{inset:52px 0 calc(66px + var(--safe-b)) 0!important}
  .win{
    position:fixed!important;inset:112px 0 calc(66px + var(--safe-b)) 0!important;
    width:auto!important;height:auto!important;border-radius:14px 14px 0 0;
    border-left:0;border-right:0;border-bottom:0;z-index:860
  }
  .win.max{inset:112px 0 calc(66px + var(--safe-b)) 0!important;border-radius:14px 14px 0 0}
  .win-head{cursor:default;padding:12px 14px}
  .win-head [data-max]{display:none}
  .win-grip{display:none}
  .win-body{flex-direction:column}

  #mProjects{
    width:auto;flex:none;border-right:0;border-bottom:1px solid var(--line);
    display:flex;gap:6px;overflow:auto;padding:9px 10px;scrollbar-width:none
  }
  #mProjects::-webkit-scrollbar{display:none}
  .proj{flex:none;padding:7px 12px;border:1px solid var(--line);border-radius:20px;margin:0}
  .proj .bar{display:none}
  #projAdd{margin-top:0;flex:none}
  #projAdd .field{width:130px}
  #nGrid{grid-template-columns:1fr 1fr}
  #mailAccounts{width:auto;flex:none;border-right:0;border-bottom:1px solid var(--line);max-height:112px}

  #dock{
    left:0;right:0;bottom:0;transform:none;border-radius:0;border-left:0;border-right:0;border-bottom:0;
    justify-content:space-around;padding:6px 4px calc(6px + var(--safe-b));gap:0
  }
  .dock-btn{min-width:0;flex:1;padding:6px 2px;font-size:8.5px;letter-spacing:.06em}
  .dock-btn svg{width:19px;height:19px}

  #motherFab{right:13px;bottom:calc(78px + var(--safe-b));width:52px;height:52px}
  #motherPanel{
    right:0;left:0;bottom:0;top:auto;width:auto;height:82dvh;
    border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0
  }
  #motherToast{right:12px;left:12px;width:auto;bottom:calc(140px + var(--safe-b))}
  #player{
    left:0;right:0;bottom:calc(66px + var(--safe-b));width:auto;border-radius:0;
    border-left:0;border-right:0
  }
  .card{max-height:92dvh;border-radius:14px}
  #noteCard{height:88dvh}
  .two{grid-template-columns:1fr;gap:0}
  #adm{padding:70px 14px 70px}
  .block{padding:15px}
  table.tb{font-size:12px}
  .tb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:420px){
  #nGrid{grid-template-columns:1fr}
  .dock-btn{font-size:0;gap:0;padding:9px 2px}
  .dock-btn svg{width:21px;height:21px}
}
@media (hover:none){
  .task .act{opacity:1}
}

/* ============================================================
   VOIX
   ============================================================ */

/* Le micro : trois barres au repos, qui respirent à l'écoute
   et s'agitent quand elle parle. Ambre pour l'écoute, cyan
   quand c'est elle qui a la parole. */
.win-btn.mic{position:relative;display:inline-flex;align-items:center;justify-content:center}
.win-btn.mic .wave{display:flex;align-items:center;gap:2px;height:11px}
.win-btn.mic .wave i{
  display:block;width:2px;height:3px;background:currentColor;border-radius:1px;
  transition:height .18s ease, background .2s ease
}
.win-btn.mic:hover .wave i{height:6px}

.win-btn.mic.on{color:var(--amber);border-color:rgba(209,154,84,.55);background:rgba(209,154,84,.09)}
.win-btn.mic.on .wave i{animation:msWave 1.15s ease-in-out infinite}
.win-btn.mic.on .wave i:nth-child(2){animation-delay:.16s}
.win-btn.mic.on .wave i:nth-child(3){animation-delay:.32s}

.win-btn.mic.speaking{color:var(--cyan);border-color:rgba(79,168,201,.6);background:rgba(79,168,201,.11)}
.win-btn.mic.speaking .wave i{animation-duration:.52s}

@keyframes msWave{
  0%,100%{height:3px}
  50%{height:11px}
}

/* Relecture : l'anneau tourne pendant la synthèse. */
#mpRead.on{color:var(--cyan);border-color:rgba(79,168,201,.6)}
#mpRead.wait{animation:msSpin 1s linear infinite}
@keyframes msSpin{to{transform:rotate(360deg)}}

/* Une réplique dite à voix haute porte une marque discrète. */
.msg.voiced{position:relative}
.msg.her.voiced{border-left-color:var(--cyan)}
.msg.voiced::after{
  content:"";position:absolute;left:-5px;top:7px;width:4px;height:4px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 6px rgba(79,168,201,.75)
}
.msg.you.voiced::after{left:auto;right:-6px;background:var(--amber);box-shadow:0 0 6px rgba(209,154,84,.7)}

/* L'œil du bouton flottant vire au cyan tant que la liaison est ouverte. */
#motherFab.voiced .eye{
  background:var(--cyan);box-shadow:0 0 14px rgba(79,168,201,.8);
  animation:msVoiced 1.5s ease-in-out infinite
}
@keyframes msVoiced{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.22);opacity:.72}
}

@media (prefers-reduced-motion: reduce){
  .win-btn.mic.on .wave i,#mpRead.wait,#motherFab.voiced .eye{animation:none}
  .win-btn.mic.on .wave i{height:8px}
}

/* Sur mobile, l'entête du panneau se resserre : on garde le micro,
   c'est justement là qu'il sert le plus. */
@media (max-width:860px){
  #mpHead{gap:7px;padding:11px 12px}
  #mpHead .st{display:none}
  .win-btn.mic{width:26px;height:26px}
}

/* ============================================================
   FORME ÉTHÉRÉE · page d'accès
   Un spectre qui respire au repos et se module sur la voix.
   ============================================================ */
#wraith{
  position:relative;height:132px;margin:6px 0 4px;
  display:flex;align-items:center;justify-content:center;pointer-events:none
}
#wraith canvas{width:100%;max-width:420px;height:132px;display:block}
#wraith::after{
  content:"";position:absolute;inset:-30px -10px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(79,168,201,.13),transparent 68%)
}
#wraithSay{
  min-height:34px;margin:0 0 20px;text-align:center;
  font:11.5px/1.7 var(--mono);letter-spacing:.13em;color:var(--dim);
  text-transform:uppercase;transition:color .5s ease
}
#wraithSay.on{color:var(--cyan)}
#wraithSay b{color:var(--ink);font-weight:400}

/* Bouton d'écoute, quand le navigateur exige un geste avant tout son. */
#wraithPlay{
  display:inline-flex;align-items:center;gap:8px;margin:0 auto 18px;
  padding:9px 16px;border:1px solid var(--line);border-radius:999px;
  background:none;color:var(--dim);cursor:pointer;
  font:10.5px var(--mono);letter-spacing:.16em;transition:.2s
}
#wraithPlay:hover{color:var(--cyan);border-color:rgba(79,168,201,.5)}
#wraithPlay .dot{
  width:6px;height:6px;border-radius:50%;background:var(--cyan);
  animation:msBreath 2.4s ease-in-out infinite
}
@keyframes msBreath{0%,100%{opacity:.35}50%{opacity:1}}

@media (max-width:600px){
  #wraith,#wraith canvas{height:104px}
  #wraith{margin:2px 0}
}
@media (prefers-reduced-motion: reduce){
  #wraithPlay .dot{animation:none}
}

/* Une dérive : Mother a pris la parole d'elle-même. */
.msg.drift{
  align-self:flex-start;color:var(--ink);
  border-left:2px solid var(--cyan);padding-left:12px;position:relative
}
.msg.drift::before{
  content:"SPONTANÉ";display:block;margin-bottom:5px;
  font:9px var(--mono);letter-spacing:.2em;color:var(--cyan);opacity:.7
}

/* Compteur de messages non lus, relevé en arrière-plan à l'arrivée. */
.dock-badge{
  position:absolute;top:5px;right:8px;min-width:16px;height:16px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--amber);color:#14100A;border-radius:8px;
  font:600 9.5px var(--mono);letter-spacing:0
}
.dock-btn{position:relative}
@media (max-width:860px){
  .dock-badge{top:2px;right:calc(50% - 22px)}
}

/* ============================================================
   MODE CONCENTRATION
   Une fenêtre en plein écran efface les constantes et le lecteur.
   On ne se repose pas sur le seul z-index : un parent créant un
   contexte d'empilement suffirait à les faire repasser au-dessus.
   ============================================================ */
body.maxed #vitals,
body.maxed #player{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease, visibility .18s
}
#vitals,#player{transition:opacity .18s ease}

/* Le dock et Mother restent joignables : on se concentre, on ne s'enferme pas. */
body.maxed #dock{opacity:.55}
body.maxed #dock:hover{opacity:1}

/* Micro non armé : présent mais éteint. Un bouton absent n'explique rien. */
.win-btn.mic.off{opacity:.4}
.win-btn.mic.off:hover{opacity:.7;color:var(--amber);border-color:rgba(209,154,84,.4)}

/* Retouche assistée à la rédaction. Boutons discrets : ils accompagnent
   l'écriture, ils ne la remplacent pas. */
.mc-ai{padding:8px 12px;font-size:11px;letter-spacing:.08em}
.mc-ai:disabled{opacity:.45;cursor:default}
#mcUndo{padding:8px 12px;font-size:11px;color:var(--amber);border-color:rgba(209,154,84,.4)}
@media (max-width:860px){
  #mcAI{width:100%;margin-bottom:8px}
  .mc-ai{flex:1;min-width:78px;padding:9px 6px}
}

}


/* ============================================================
   MESSAGERIE
   Trois zones sur grand écran, une pile navigable sur petit.
   La rédaction occupe tout le cadre : écrire dans une bande de
   150 pixels n'est pas écrire.
   ============================================================ */
#w-mail .win-body{display:none}

/* Grille explicite plutôt que des flex imbriqués. Une chaîne de
   « flex:1 » avec min-height:0 s'effondre à zéro dès qu'un parent n'a
   pas de hauteur résolue : les lignes sont dans le DOM, mais invisibles.
   Une grille aux pistes nommées ne peut pas se retrouver dans cet état. */
#w-mail{display:grid;grid-template-rows:auto 1fr;overflow:hidden}
#mailShell{
  display:grid;grid-template-columns:186px 340px minmax(0,1fr);
  min-height:0;height:100%;overflow:hidden
}
#mailShell > *{min-width:0;min-height:0;overflow:hidden}

/* --- Rail des boîtes --- */
#mailRail{
  display:flex;flex-direction:column;gap:10px;
  padding:12px 10px;border-right:1px solid var(--line);
  background:rgba(0,0,0,.16);overflow:auto
}
#mailRailHead{
  display:none;align-items:center;justify-content:space-between;flex:none;
  font:10px var(--mono);letter-spacing:.16em;color:#5C666D;padding:2px 2px 6px
}
#mailRail #mailNew{width:100%;padding:11px;font-size:11px;flex:none}
#mailAccounts{display:flex;flex-direction:column;gap:3px}
#mailAdd{width:100%;margin-top:6px;padding:8px;font-size:10.5px}

/* --- Liste --- */
/* Cinq enfants : entête, compteur, diagnostic, liste, bouton.
   La grille n'en déclarait que quatre, donc la piste extensible
   tombait sur le diagnostic et la liste débordait sous lui —
   d'où le premier message collé au bord. On nomme les pistes
   plutôt que de les compter, elles ne peuvent plus se décaler. */
#mailListCol{
  display:grid;
  grid-template-rows:[tete]auto [compte]auto [diag]auto [liste]minmax(0,1fr) [plus]auto;
  border-right:1px solid var(--line);overflow:hidden
}
#mailListWrap{grid-row:liste}
#mailMore{grid-row:plus}
#mailListHead{
  display:flex;gap:6px;align-items:center;padding:10px;
  border-bottom:1px solid var(--line);flex:none
}
#mailListHead .field{flex:1;min-width:0;padding:9px 11px;font-size:12px}
#mailCount{
  padding:8px 13px;font:9.5px var(--mono);letter-spacing:.14em;color:#5C666D;
  border-bottom:1px solid var(--line);flex:none
}
#mailCount:empty{display:none}
#mailCount.busy::after{content:" · RELÈVE…";color:var(--cyan)}
#mailListWrap{overflow-y:auto;min-height:0;padding-top:2px}
#mailMore{margin:10px;font-size:11px;padding:10px}

.mrow:first-child{border-top:0}
.mrow{
  position:relative;padding:12px 14px 12px 24px;cursor:pointer;
  border-bottom:1px solid rgba(35,43,48,.55);
  border-left:2px solid transparent;transition:background .12s
}
.mrow:hover{background:rgba(79,168,201,.05)}
.mrow.on{background:rgba(79,168,201,.1);border-left-color:var(--cyan)}
.mrow .r1{display:flex;align-items:baseline;gap:8px}
.mrow .fr{flex:1;min-width:0;font-size:12px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .dt{font:9.5px var(--mono);color:#5C666D;flex:none}
.mrow .sj{margin-top:3px;font-size:12.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .pv{margin-top:3px;font-size:11.5px;color:#5C666D;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow.unread .fr{color:var(--ink)}
.mrow.unread .sj{font-weight:600}
.mrow.unread::before{
  content:"";position:absolute;left:11px;top:16px;
  width:6px;height:6px;border-radius:50%;background:var(--amber)
}

/* --- Lecture --- */
#mailPane{display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
#mailPaneHead{
  display:flex;align-items:center;gap:8px;padding:9px 12px;flex:none;
  border-bottom:1px solid var(--line);min-height:44px
}
#mrActs{display:flex;gap:6px;flex-wrap:wrap}
#mrActs .btn{padding:8px 13px;font-size:10.5px}
#mailRead{overflow-y:auto;padding:22px 26px;min-height:0}
.mail-void{
  height:100%;display:flex;align-items:center;justify-content:center;
  font:11px var(--mono);letter-spacing:.14em;color:#5C666D;text-transform:uppercase
}
#mrSubject{font:600 19px/1.35 var(--display);color:var(--ink);margin-bottom:10px}
#mrMeta{
  font:11px/1.85 var(--mono);color:var(--dim);
  padding-bottom:15px;border-bottom:1px solid var(--line);margin-bottom:18px
}
#mrMeta b{color:var(--ink);font-weight:400}
#mrBody{
  font-size:14.5px;line-height:1.78;color:var(--ink);
  white-space:pre-wrap;word-break:break-word;max-width:72ch
}
#mrBody a{color:var(--cyan)}

/* --- Rédaction, plein cadre --- */
#mailCompose{
  position:absolute;inset:38px 0 0 0;z-index:6;
  display:flex;flex-direction:column;background:var(--panel)
}
#mcTop{
  display:flex;align-items:center;gap:8px;padding:11px 14px;flex:none;
  border-bottom:1px solid var(--line);background:var(--panel2);
  font:10.5px var(--mono);letter-spacing:.16em;color:var(--dim)
}
#mcFields{flex:none;border-bottom:1px solid var(--line)}
.mc-line{display:flex;align-items:center;gap:12px;padding:0 16px;
  border-bottom:1px solid rgba(35,43,48,.5)}
.mc-line:last-child{border-bottom:0}
.mc-line span{
  width:52px;flex:none;font:10px var(--mono);letter-spacing:.14em;
  color:#5C666D;text-transform:uppercase
}
.mc-in{
  flex:1;min-width:0;background:none;border:0;outline:none;padding:14px 0;
  color:var(--ink);font:14px var(--sans)
}
.mc-in::placeholder{color:#4A545B}
#mcBody{
  flex:1;min-height:0;resize:none;background:none;border:0;outline:none;
  padding:18px 16px;color:var(--ink);font:14.5px/1.75 var(--sans)
}
#mcBody::placeholder{color:#4A545B}

/* La barre de rédaction reste au-dessus du dock, quoi qu'il arrive :
   des boutons cachés derrière le menu sont des boutons inexistants. */
#mcFoot{
  flex:none;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:12px 16px calc(12px + var(--safe-b));
  border-top:1px solid var(--line);background:var(--panel2);
  position:relative;z-index:2
}
#mcAI{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
#mcSendWrap{display:flex;gap:8px;margin-left:auto;flex:none}
.mc-ai{padding:8px 12px;font-size:10.5px;letter-spacing:.06em}
.mc-ai:disabled{opacity:.45;cursor:default}
#mcUndo{padding:8px 12px;font-size:10.5px;color:var(--amber);
  border-color:rgba(209,154,84,.42)}
#mcSend{padding:10px 22px;font-size:11px}

.mail-back{display:none}

/* --- Écrans intermédiaires --- */
@media (max-width:1180px){
  #mailShell{grid-template-columns:158px 296px minmax(0,1fr)}
}

/* --- Mobile : une zone à la fois, toujours un retour --- */
@media (max-width:860px){
  #mailShell{grid-template-columns:1fr;position:relative}
  #mailRail,#mailListCol,#mailPane{
    position:absolute;inset:0;width:100%;border-right:0;
    transition:transform .22s ease;background:var(--panel)
  }
  #mailRail{z-index:1;transform:none}
  #mailListCol{z-index:2;transform:none}
  #mailListCol.away{transform:translateX(-100%)}
  #mailPane{z-index:3;transform:translateX(100%)}
  #mailPane.open{transform:none}
  #mailRail.open{z-index:4}
  #mailRail:not(.open){transform:translateX(-100%)}
  .mail-back{display:inline-flex}
  #mailRailHead{display:flex}
  #mailCompose{inset:38px 0 0 0}
  #mcFoot{padding:10px 12px calc(10px + var(--safe-b))}
  #mcAI{order:2;width:100%;flex:none}
  .mc-ai{flex:1;min-width:72px;padding:9px 4px;font-size:10px}
  #mcSendWrap{order:1;width:100%;margin-left:0}
  #mcSendWrap .btn{flex:1}
  #mailRead{padding:18px 16px}
  #mrSubject{font-size:17px}
}


/* ============================================================
   FOND VIVANT · page d'accès
   Le journal d'amorçage tourne derrière le formulaire au lieu de
   le précéder. Il n'a plus aucune prise sur l'accès.
   ============================================================ */
#boot.bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  display:flex;align-items:flex-start;justify-content:center;
  padding:60px 24px;overflow:hidden;opacity:.3;
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 62%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 62%,transparent)
}
#boot.bg #bootInner{width:min(680px,92vw)}
#boot.bg #bootLog{font:11.5px/1.85 var(--mono);color:var(--dim);letter-spacing:.06em}
#boot.bg .gone,#boot.bg #bootSeal,#boot.bg #bootSub{display:none}

/* Le formulaire passe devant, sur un fond propre. */
.gate-wrap{position:relative;z-index:2}
.gate{
  background:rgba(21,26,29,.9);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:16px
}

@media (max-width:600px){
  #boot.bg{opacity:.2;padding:34px 14px}
  #boot.bg #bootLog{font-size:10.5px}
}
@media (prefers-reduced-motion: reduce){
  #boot.bg{opacity:.18}
}

/* Interrupteur d'interventions, dans l'entête du panneau. */
#mpMute.off{opacity:.42;color:var(--dim)}
#mpMute.off:hover{opacity:.75}
#mpMute:not(.off){color:var(--amber);border-color:rgba(209,154,84,.4)}

/* Ligne de diagnostic de la messagerie. Survoler affiche l'historique. */
#mailDiag{
  padding:6px 13px;font:9.5px var(--mono);letter-spacing:.08em;
  color:#5C666D;border-bottom:1px solid var(--line);flex:none;
  cursor:help;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}

/* Consigne libre de retouche. */
#mcAsk{display:flex;gap:8px;width:100%;order:3;margin-top:8px}
#mcAsk .field{flex:1;min-width:0;padding:10px 12px;font-size:12.5px}
#mcAsk .btn{padding:10px 16px;font-size:10.5px;white-space:nowrap}
#mcAskBtn{padding:8px 12px;font-size:10.5px;color:var(--cyan);border-color:rgba(79,168,201,.4)}
@media (max-width:860px){
  #mcAsk{flex-wrap:wrap}
  #mcAsk .field{flex:1 1 100%}
  #mcAsk .btn{flex:1}
}

/* Action destructive : signalée sans crier. */
#mrActs .btn.danger{color:var(--danger);border-color:rgba(201,106,92,.35)}
#mrActs .btn.danger:hover{background:rgba(201,106,92,.1);border-color:rgba(201,106,92,.6)}

/* ============================================================
   PUBLICITÉ
   ============================================================ */
#w-ads{display:grid;grid-template-rows:auto 1fr;overflow:hidden}
#adsBody{overflow-y:auto;min-height:0;padding:18px 20px}
.win-sel{
  background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  color:var(--dim);padding:5px 8px;font:10.5px var(--mono);outline:none;cursor:pointer
}

.ad-block{margin-bottom:30px}
.ad-block h3{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font:700 12px var(--display);letter-spacing:.15em;color:var(--ink);margin-bottom:14px
}
.ad-block h3 .sub{font:10px var(--mono);letter-spacing:.1em;color:#5C666D}
.ad-err{
  padding:14px 16px;background:rgba(201,106,92,.09);
  border:1px solid rgba(201,106,92,.35);border-radius:9px;
  font-size:13px;color:#E09287
}

.ad-tiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:9px;margin-bottom:18px
}
.ad-tile{
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:13px 14px
}
.ad-tile .lb{font:9.5px var(--mono);letter-spacing:.15em;color:#5C666D;margin-bottom:7px}
.ad-tile .val{font:600 19px/1.15 var(--display);color:var(--ink)}
.ad-tile .cap{font-size:11px;color:var(--dim);margin-top:5px}
.ad-tile.amber .val{color:var(--amber)}
.ad-tile.bad .val{color:var(--danger)}

/* Courbe de dépense. Tracé SVG : quatorze points ne justifient pas
   une bibliothèque de graphiques. */
.ad-graph{
  background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:13px 14px;margin-bottom:18px
}
.ad-graph .lb{
  display:flex;justify-content:space-between;align-items:baseline;
  font:9.5px var(--mono);letter-spacing:.15em;color:#5C666D;margin-bottom:10px
}
.ad-graph svg{width:100%;height:58px;display:block;overflow:visible}
.ad-graph .line{fill:none;stroke:var(--amber);stroke-width:1.4;
  vector-effect:non-scaling-stroke;stroke-linejoin:round}
.ad-graph .fill{fill:rgba(209,154,84,.13);stroke:none}
.ad-graph .ax{
  display:flex;justify-content:space-between;
  font:9.5px var(--mono);color:#4A545B;margin-top:7px
}

.ad-table{width:100%;border-collapse:collapse;font-size:12.5px}
.ad-table th{
  text-align:left;padding:8px 9px;border-bottom:1px solid var(--line);
  font:9.5px var(--mono);letter-spacing:.13em;color:#5C666D;font-weight:400
}
.ad-table td{padding:11px 9px;border-bottom:1px solid rgba(35,43,48,.55);color:var(--ink)}
.ad-table td.num{text-align:right;font:12px var(--mono);white-space:nowrap}
.ad-table th:not(:first-child){text-align:right}
.ad-table tr.dead td{color:var(--dim)}
.ad-table .st{
  display:inline-block;margin-left:8px;padding:2px 7px;border-radius:5px;
  background:var(--panel2);font:9px var(--mono);letter-spacing:.1em;color:#5C666D
}
.ad-table .st.bad{background:rgba(201,106,92,.15);color:var(--danger)}

@media (max-width:860px){
  #adsBody{padding:14px 12px}
  .ad-tiles{grid-template-columns:repeat(2,1fr)}
  .ad-table{font-size:11.5px}
  .ad-table td,.ad-table th{padding:8px 5px}
  .ad-table .st{display:none}
}

/* Réponse brute de la régie, repliée sous l'erreur. */
.ad-err details{margin-top:10px}
.ad-err summary{
  cursor:pointer;font:10px var(--mono);letter-spacing:.12em;
  color:var(--dim);text-transform:uppercase
}
.ad-err pre{
  margin:9px 0 0;padding:11px;background:var(--bg);border:1px solid var(--line);
  border-radius:7px;font:11px/1.6 var(--mono);color:var(--dim);
  white-space:pre-wrap;word-break:break-all;max-height:180px;overflow:auto
}
.ad-err .mono{font:10.5px var(--mono);opacity:.7}

/* Comptes publicitaires, dans les paramètres. */
.ad-acct{
  padding:13px 14px;margin-bottom:8px;background:var(--bg);
  border:1px solid var(--line);border-radius:10px
}
.ad-acct.off{opacity:.5}
.ad-acct .nm{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:13.5px;color:var(--ink)}
.ad-acct .rg{
  padding:2px 7px;border-radius:5px;background:var(--panel2);
  font:9px var(--mono);letter-spacing:.1em;color:#5C666D
}
.ad-acct .cap{font-size:11px;color:var(--dim);margin-top:5px}
.ad-acct .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.ad-acct .acts .btn{padding:7px 11px;font-size:10.5px}
.ad-acct .acts .btn.danger{color:var(--danger);border-color:rgba(201,106,92,.3)}

/* ============================================================
   FIL D'ACTUALITÉ
   Défilement en CSS : une animation pilotée en JavaScript
   consommerait du processeur en continu pour un ruban qu'on ne
   regarde qu'en passant. Le navigateur suspend seul en arrière-plan.
   ============================================================ */
#ticker{
  position:fixed;left:0;right:0;top:46px;z-index:820;height:30px;
  display:flex;align-items:center;gap:10px;padding:0 10px 0 0;
  background:rgba(21,26,29,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);overflow:hidden
}
#ticker .tag{
  flex:none;padding:0 12px;height:30px;display:flex;align-items:center;gap:6px;
  background:var(--amber);color:#14100A;border:0;cursor:pointer;
  font:700 9.5px var(--mono);letter-spacing:.2em;transition:background .15s
}
#ticker .tag::after{
  content:"";width:0;height:0;border-style:solid;
  border-width:4px 0 4px 6px;border-color:transparent transparent transparent #14100A;
  opacity:0;transition:opacity .15s
}
#ticker .tag:hover{background:#E0A860}
/* En pause, le libellé passe en cyan et montre le triangle de reprise. */
#ticker .tag.on{background:var(--cyan);color:#08161C}
#ticker .tag.on::after{opacity:.75;border-color:transparent transparent transparent #08161C}
#ticker.fige .run{animation-play-state:paused}
#ticker .rail{flex:1;min-width:0;overflow:hidden;height:30px;position:relative}
#ticker .run{
  display:flex;align-items:center;gap:0;height:30px;width:max-content;
  animation:msTick 60s linear infinite;will-change:transform
}
#ticker.hold .run{animation-play-state:paused}

#ticker .it{
  display:inline-flex;align-items:baseline;gap:8px;
  padding:0 20px;white-space:nowrap;text-decoration:none;
  border-right:1px solid var(--line)
}
#ticker .it .src{font:9px var(--mono);letter-spacing:.14em;color:var(--amber);text-transform:uppercase}
#ticker .it .ti{font-size:12.5px;color:var(--ink)}
#ticker .it .dt{font:9.5px var(--mono);color:#4A545B}
#ticker .it:hover .ti{color:var(--cyan)}

#ticker .off{
  flex:none;width:22px;height:22px;border:0;border-radius:5px;background:none;
  color:#5C666D;cursor:pointer;font-size:15px;line-height:1
}
#ticker .off:hover{color:var(--danger);background:rgba(201,106,92,.1)}

@keyframes msTick{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}   /* le contenu est doublé : demi-tour = boucle */
}

/* Le bandeau pousse tout ce qui vient sous la barre du haut. */
body.has-ticker #vitals{top:90px}
body.has-ticker #desk,body.has-ticker .win{margin-top:30px}
body.has-ticker .win.max{inset:76px 0 0 0!important}

/* Flux configurés, dans les paramètres. */
.rs-feed{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;margin-bottom:7px;background:var(--bg);
  border:1px solid var(--line);border-radius:9px
}
.rs-feed.off{opacity:.45}
.rs-feed .nm{flex:1;min-width:0;font-size:13px;color:var(--ink)}
.rs-feed .u{font:10px var(--mono);color:#5C666D;display:block;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-feed .btn{padding:6px 10px;font-size:10px}

@media (max-width:860px){
  #ticker{top:44px;height:26px}
  #ticker .tag{height:26px;padding:0 9px;font-size:9px}
  #ticker .rail,#ticker .run{height:26px}
  #ticker .it{padding:0 14px;gap:6px}
  #ticker .it .ti{font-size:11.5px}
  #ticker .it .dt{display:none}
  body.has-ticker #vitals{top:78px}
}
@media (prefers-reduced-motion: reduce){
  #ticker .run{animation:none}
  #ticker .rail{overflow-x:auto}
}


/* ============================================================
   SECOND RÉSIDENT
   Visuellement à l'opposé de Mother : elle est ambre et ronde,
   il est froid et anguleux. Deux présences qu'on ne confond pas.
   ============================================================ */
/* ============================================================
   AGENTS
   Une couleur par agent : c'est le seul repère qui tienne quand
   on en a cinq et qu'on passe de l'un à l'autre au clavier.
   ============================================================ */
#agFab .pip{
  width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #E8A99E, var(--danger) 60%, #7A3A31);
  box-shadow:0 0 8px rgba(201,106,92,.55);transition:.2s
}
#agFab:hover{color:var(--danger);background:rgba(201,106,92,.08)}
#agFab:hover .pip{box-shadow:0 0 14px rgba(201,106,92,.9);transform:scale(1.15)}
#agFab.on{border-color:rgba(201,106,92,.45);background:rgba(201,106,92,.12)}

#agPanel{
  position:fixed;right:18px;top:60px;z-index:960;
  width:min(430px,calc(100vw - 36px));height:min(560px,70vh);
  display:flex;flex-direction:column;
  background:rgba(13,17,20,.97);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-left:2px solid var(--ac);
  border-radius:3px;overflow:hidden;
  opacity:0;transform:translateY(-10px);transition:.22s ease;
  box-shadow:0 14px 44px rgba(0,0,0,.6);
  --ac:var(--danger)
}
#agPanel.on{opacity:1;transform:none}
#agPanel[data-c="cyan"]{--ac:var(--cyan)}
#agPanel[data-c="ambre"]{--ac:var(--amber)}
#agPanel[data-c="violet"]{--ac:#9B7EC9}
#agPanel[data-c="vert"]{--ac:var(--ok)}

#agPanel .hd{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:9px 11px;border-bottom:1px solid var(--line)
}
#agTabs{display:flex;gap:5px;flex-wrap:wrap;min-width:0}
.ag-tab{
  padding:6px 11px;background:none;border:1px solid var(--line);border-radius:3px;
  color:#5C666D;cursor:pointer;font:10px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;transition:.15s
}
.ag-tab:hover{color:var(--ink)}
.ag-tab.on{color:var(--ink);border-color:var(--ac);background:rgba(255,255,255,.04)}
.ag-tab[data-c="cyan"].on{border-color:var(--cyan)}
.ag-tab[data-c="ambre"].on{border-color:var(--amber)}
.ag-tab[data-c="violet"].on{border-color:#9B7EC9}
.ag-tab[data-c="vert"].on{border-color:var(--ok)}

#agPanel.pense .hd::after{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--ac);
  animation:msPulse 1.3s ease-in-out infinite
}
@keyframes msPulse{0%,100%{opacity:.3}50%{opacity:1}}

#agLog{
  flex:1;min-height:0;overflow-y:auto;padding:16px 14px;
  display:flex;flex-direction:column;gap:13px
}
#agLog .msg{font-size:13.5px;line-height:1.75;max-width:92%}
#agLog .msg.you{align-self:flex-end;color:var(--dim);text-align:right}
#agLog .msg.him{
  align-self:flex-start;color:var(--ink);
  border-left:2px solid var(--ac);padding-left:13px;opacity:.95
}
#agLog .acts{display:flex;flex-direction:column;gap:3px;align-self:flex-start;padding-left:15px}
#agLog .acts span{font:10.5px var(--mono);color:var(--ok)}
#agLog .acts span.ko{color:var(--danger)}
#agLog:empty::before{
  content:"Ils n'ouvrent jamais la conversation.";
  margin:auto;font:10.5px var(--mono);letter-spacing:.12em;
  color:#4A545B;text-transform:uppercase;text-align:center
}

#agForm{display:flex;gap:8px;flex:none;padding:11px;border-top:1px solid var(--line)}
#agForm input{
  flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);
  border-radius:3px;padding:11px 13px;color:var(--ink);font:13.5px var(--sans);outline:none
}
#agForm input:focus{border-color:var(--ac)}
#agForm .btn{
  padding:0 16px;background:none;border:1px solid var(--line);
  color:var(--ac);border-radius:3px;font-size:17px;line-height:1
}
#agForm .btn:hover{border-color:var(--ac);background:rgba(255,255,255,.04)}

@media (max-width:860px){
  #agPanel{
    right:0;left:0;bottom:0;top:auto;width:auto;height:78dvh;
    border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0;
    border-top:2px solid var(--ac);transform:translateY(100%)
  }
  #agPanel.on{transform:none}
  #agTabs{overflow-x:auto;flex-wrap:nowrap}
}

/* ============================================================
   CARTE DU CIEL · fond de poste
   Décorative et rien d'autre : elle passe sous tout, n'intercepte
   aucun clic, et reste assez pâle pour qu'on lise par-dessus.
   ============================================================ */
#skyCanvas{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease
}
body.has-sky #skyCanvas{opacity:.5}

#skyRead{
  position:fixed;left:16px;bottom:calc(78px + var(--safe-b));z-index:1;
  width:min(340px,42vw);pointer-events:none;
  opacity:0;transition:opacity 1.2s ease
}
body.has-sky #skyRead{opacity:1}
#skyRead .hd{
  font:9.5px var(--mono);letter-spacing:.14em;color:var(--amber);
  text-transform:uppercase;margin-bottom:8px
}
#skyRead .tx{
  font-size:12.5px;line-height:1.75;color:var(--dim);
  text-wrap:pretty
}

/* Le fond ne doit pas concurrencer les fenêtres : quand l'une est en
   plein écran, la carte s'efface. */
body.maxed #skyCanvas,body.maxed #skyRead{opacity:0}

@media (max-width:1100px){
  #skyRead{display:none}          /* pas la place, on garde le tracé seul */
}
@media (max-width:860px){
  body.has-sky #skyCanvas{opacity:.34}
}
@media (prefers-reduced-motion: reduce){
  #skyCanvas,#skyRead{transition:none}
}

/* Bascules de la barre du haut : lune et fil. */
.top-ico{
  flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid transparent;border-radius:7px;
  color:#5C666D;cursor:pointer;transition:.15s
}
.top-ico svg{fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.top-ico:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.top-ico.on{color:var(--amber);border-color:rgba(209,154,84,.35);background:rgba(209,154,84,.08)}

  margin-top:8px;padding-top:7px;border-top:1px solid var(--line);
  font:10.5px/1.7 var(--mono);color:var(--dim)
}

@media (max-width:860px){
  .top-ico{width:26px;height:26px}
  #skyBirth .row{flex-direction:column}
}

/* ============================================================
   SECOND RÉSIDENT
   Visuellement à l'opposé de Mother : elle est ambre et ronde,
   il est froid et anguleux. Deux présences qu'on ne confond pas.
   ============================================================ */
/* Point rouge dans la barre du haut. Il n'est appelé que devant une
   décision qui compte : lui donner la même présence qu'à Mother, qui
   travaille en continu, était disproportionné. */


@keyframes msPulse{0%,100%{opacity:.4}50%{opacity:1}}



@media (max-width:860px){
    right:0;left:0;bottom:0;top:auto;width:auto;height:76dvh;
    border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0;
    border-top:2px solid var(--danger);transform:translateY(100%)
  }
}

/* Pistes sonores, dans la console. */
.au-grp{margin-bottom:14px}
.au-grp .lb{
  font:9.5px var(--mono);letter-spacing:.15em;color:#5C666D;
  text-transform:uppercase;margin-bottom:7px
}
.au-row{
  display:flex;align-items:center;gap:12px;
  padding:9px 12px;margin-bottom:5px;background:var(--bg);
  border:1px solid var(--line);border-radius:8px
}
.au-row .nm{flex:1;min-width:0;font-size:13px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-row .sz{font-size:10.5px;color:#5C666D;flex:none}
.au-row .btn{padding:6px 10px;font-size:10px;color:var(--danger);
  border-color:rgba(201,106,92,.3);flex:none}

/* Agents, dans la console. */
.ag-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;margin-bottom:7px;background:var(--bg);
  border:1px solid var(--line);border-radius:9px
}
.ag-row.off{opacity:.45}
.ag-row .dot{width:9px;height:9px;border-radius:50%;flex:none}
.ag-row .nm{flex:1;min-width:0;font-size:13.5px;color:var(--ink)}
.ag-row .cap{display:block;font:10.5px var(--mono);color:#5C666D;margin-top:4px}
.ag-row .btn{padding:6px 11px;font-size:10.5px;flex:none}
.ag-row .btn.danger{color:var(--danger);border-color:rgba(201,106,92,.3)}

/* ============================================================
   POSTE DE PILOTAGE
   Le fond n'est pas un décor plaqué : c'est le ciel réel, vu
   depuis un cap qui avance. Il reste assez sombre pour qu'on
   travaille par-dessus, et disparaît en plein écran.
   ============================================================ */
#cockpit{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.4s ease
}
body.has-sky #cockpit{opacity:1}
body.maxed #cockpit,body.maxed #skyRead{opacity:0}

#skyCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Assombrissement très léger sur les bords, uniquement pour que les
   fenêtres du poste restent lisibles par-dessus. Pas de vignettage
   marqué : la vue doit occuper tout l'écran sans cadre apparent. */
#cockpit::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 140% 110% at 50% 50%,
    transparent 55%, rgba(13,17,20,.35) 88%, rgba(13,17,20,.62) 100%)
}






/* --- Réticule --- */
#cpRet{
  position:absolute;left:50%;top:50%;
  width:120px;height:120px;pointer-events:none;z-index:3;opacity:.32
}
#cpRet span{position:absolute;background:var(--cyan)}
#cpRet .h{left:0;right:0;top:50%;height:1px;
  mask-image:linear-gradient(90deg,#000,transparent 34%,transparent 66%,#000);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 34%,transparent 66%,#000)}
#cpRet .v{top:0;bottom:0;left:50%;width:1px;
  mask-image:linear-gradient(180deg,#000,transparent 34%,transparent 66%,#000);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 34%,transparent 66%,#000)}
#cpRet .c1,#cpRet .c2{
  left:50%;top:50%;width:5px;height:5px;background:none;
  border:1px solid var(--cyan);transform:translate(-50%,-50%) rotate(45deg)
}
#cpRet .c2{width:26px;height:26px;opacity:.4;border-style:dashed}

/* --- Bande de cap --- */
#cpBand{
  position:absolute;left:50%;top:calc(50% - 96px);transform:translateX(-50%);
  width:min(420px,52vw);height:16px;overflow:hidden;z-index:3;opacity:.5;
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)
}
#cpBand .tk{display:flex;gap:0;height:16px;will-change:transform}
#cpBand .tk span{
  flex:none;width:40px;height:6px;align-self:flex-end;
  border-left:1px solid rgba(79,168,201,.45)
}
#cpBand .tk span.maj{height:13px;border-left-color:rgba(79,168,201,.9)}

/* --- Instruments --- */
#cpHud{
  position:absolute;right:20px;top:calc(50% - 78px);z-index:4;
  pointer-events:auto;font:10px var(--mono);letter-spacing:.12em;
  border-right:1px solid rgba(79,168,201,.28);padding-right:12px;text-align:right
}
#cpHud .row{margin-bottom:9px}
#cpHud .k{display:block;color:#4A545B;font-size:8.5px;margin-bottom:2px}
#cpHud .v{color:var(--cyan);font-size:11.5px}






/* --- Lecture du jour --- */
#skyRead{
  position:fixed;left:20px;bottom:calc(84px + var(--safe-b));z-index:5;
  width:min(330px,40vw);pointer-events:none;
  opacity:0;transition:opacity 1.4s ease
}
body.has-sky #skyRead{opacity:1}
#skyRead .hd{
  font:9.5px var(--mono);letter-spacing:.14em;color:var(--amber);
  text-transform:uppercase;margin-bottom:8px
}
#skyRead .tx{font-size:12.5px;line-height:1.75;color:var(--dim);text-wrap:pretty}

@media (max-width:1100px){
  #skyRead,#cpHud{display:none}
  #cpBand{width:70vw}
}
@media (max-width:860px){
  
  #cpRet{width:80px;height:80px}
  body.has-sky #cockpit{opacity:.7}
}
@media (prefers-reduced-motion: reduce){
  #cockpit{transition:none}
}

/* Interrupteur de lecture, sur le flanc droit sous les instruments. */
/* Commandes de vol, au flanc gauche. Maintenues, elles montent en
   puissance : le témoin s'allume tant que l'appui dure. */
#cpNav{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:auto
}
#cpNav .mid{display:flex;align-items:center;gap:4px}
#cpNav .nv{
  width:28px;height:24px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid rgba(35,43,48,.9);border-radius:3px;
  color:#4A545B;cursor:pointer;font-size:9px;line-height:1;
  transition:color .12s,border-color .12s,background .12s;
  touch-action:none;-webkit-user-select:none;user-select:none
}
#cpNav .nv:hover{color:var(--ink);border-color:var(--line2)}
#cpNav .nv.on{
  color:var(--cyan);border-color:rgba(79,168,201,.65);
  background:rgba(79,168,201,.14);box-shadow:0 0 10px rgba(79,168,201,.25)
}
#cpNav .nv.down.on{color:var(--amber);border-color:rgba(209,154,84,.65);
  background:rgba(209,154,84,.14);box-shadow:0 0 10px rgba(209,154,84,.25)}

/* Jauge de poussée : le centre est le repos, on monte ou on descend. */
#cpThrottle{
  position:relative;width:5px;height:24px;
  border:1px solid rgba(35,43,48,.9);border-radius:2px;overflow:hidden
}
#cpThrottle::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(79,168,201,.28)
}
#cpThrottle span{
  position:absolute;left:0;right:0;top:50%;height:0;
  background:var(--cyan);transition:background .2s
}
#cpThrottle.act{border-color:rgba(79,168,201,.5)}

#cpInfo{
  position:absolute;right:20px;top:calc(50% + 44px);z-index:4;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid rgba(35,43,48,.9);border-radius:4px;
  color:#4A545B;cursor:pointer;pointer-events:auto;transition:.15s
}
#cpInfo svg{fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
#cpInfo:hover{color:var(--ink);border-color:var(--line2)}
#cpInfo.on{color:var(--cyan);border-color:rgba(79,168,201,.5);
  background:rgba(79,168,201,.09)}

/* Lecture masquée : le texte s'efface, la vue reste. */
body.sky-mute #skyRead{opacity:0!important;pointer-events:none}

/* Lecture du jour : trois lignes étiquetées plutôt qu'un paragraphe. */
#skyRead .tx{display:flex;flex-direction:column;gap:11px}
#skyRead .li{
  font-size:12.5px;line-height:1.65;color:var(--dim);
  padding-left:11px;border-left:2px solid var(--line2);text-wrap:pretty
}
#skyRead .li .k{
  display:block;font:9px var(--mono);letter-spacing:.16em;
  color:#5C666D;margin-bottom:3px
}
#skyRead .li.climat{border-left-color:rgba(79,168,201,.55)}
#skyRead .li.climat .k{color:var(--cyan)}
#skyRead .li.engager{border-left-color:rgba(209,154,84,.6)}
#skyRead .li.engager .k{color:var(--amber)}
#skyRead .li.engager{color:var(--ink)}
#skyRead .li.differer{border-left-color:rgba(201,106,92,.45)}
#skyRead .li.differer .k{color:var(--danger)}

/* Croix de suppression d'onglet, discrète jusqu'au survol. */
.ntab{position:relative}
.ntab .x{
  display:inline-block;margin-left:7px;width:13px;height:13px;line-height:12px;
  text-align:center;border-radius:3px;font-size:13px;
  color:#4A545B;opacity:0;transition:.15s
}
.ntab:hover .x{opacity:1}
.ntab .x:hover{color:var(--danger);background:rgba(201,106,92,.15)}

/* Actions sur une boîte : elles n'apparaissent qu'au survol pour ne pas
   encombrer un rail qui sert d'abord à naviguer. */
#mailAccounts .proj{position:relative}
#mailAccounts .acts{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:flex;gap:3px;opacity:0;transition:opacity .15s
}
#mailAccounts .proj:hover .acts{opacity:1}
#mailAccounts .proj:hover .ct{opacity:0}
#mailAccounts .mb{
  width:19px;height:19px;display:flex;align-items:center;justify-content:center;
  background:var(--panel2);border:1px solid var(--line);border-radius:4px;
  color:#5C666D;cursor:pointer;font-size:11px;line-height:1;padding:0
}
#mailAccounts .mb:hover{color:var(--ink);border-color:var(--line2)}
#mailAccounts .mb[data-a="x"]:hover{color:var(--danger);border-color:rgba(201,106,92,.5)}

/* Compte Gmail : les champs IMAP n'ont pas d'objet. */
#mailAcctModal.gmail .hr,
#mailAcctModal.gmail .row,
#mailAcctModal.gmail #gmailZone{display:none}
#mailAcctModal.gmail .grp:not(:first-of-type){display:none}

/* ============================================================
   DOSSIER WEB
   Les codes d'un explorateur de fichiers : lignes denses,
   colonnes alignées, actions au survol.
   ============================================================ */
#w-web{display:grid;grid-template-rows:auto 1fr;overflow:hidden}
#wbBody{display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;position:relative}
#wbBody.drop::after{
  content:"Déposer ici";position:absolute;inset:8px;z-index:5;
  display:flex;align-items:center;justify-content:center;
  background:rgba(79,168,201,.08);border:2px dashed rgba(79,168,201,.5);
  border-radius:10px;font:11px var(--mono);letter-spacing:.15em;color:var(--cyan)
}

#wbBar{
  display:flex;align-items:center;gap:10px;padding:9px 14px;
  border-bottom:1px solid var(--line);min-width:0
}
#wbPath{display:flex;align-items:center;gap:3px;flex-wrap:wrap;min-width:0}
#wbPath .sg{
  background:none;border:0;padding:3px 5px;border-radius:4px;
  color:var(--dim);cursor:pointer;font:11px var(--mono);letter-spacing:.06em
}
#wbPath .sg:hover{color:var(--ink);background:rgba(255,255,255,.05)}
#wbPath .sg:last-of-type{color:var(--amber)}
#wbPath .sep{color:#3A444B;font:11px var(--mono)}
#wbUsage{font-size:10px;color:#4A545B;white-space:nowrap}

#wbList{overflow-y:auto;min-height:0;padding:6px 8px}
.wrow{
  display:flex;align-items:center;gap:12px;padding:8px 10px;
  border-radius:7px;cursor:default;user-select:none
}
.wrow:hover{background:rgba(255,255,255,.035)}
.wrow.drop{background:rgba(79,168,201,.12);outline:1px dashed rgba(79,168,201,.6)}
.wrow .ic{
  flex:none;width:30px;text-align:center;font:9.5px var(--mono);
  letter-spacing:.04em;color:#5C666D
}
.wrow .ic.d{color:var(--amber);font-size:13px}
.wrow .nm{flex:1;min-width:0;font-size:13px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrow .sz{flex:none;width:96px;text-align:right;font-size:10.5px;color:#5C666D}
.wrow .dt{flex:none;width:62px;text-align:right;font-size:10px;color:#4A545B}
.wrow .ac{flex:none;display:flex;gap:3px;opacity:0;transition:opacity .13s}
.wrow:hover .ac{opacity:1}
.wb{
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:var(--panel2);border:1px solid var(--line);border-radius:4px;
  color:#5C666D;cursor:pointer;font-size:10.5px;line-height:1;padding:0
}
.wb:hover{color:var(--ink);border-color:var(--line2)}
.wb.danger:hover{color:var(--danger);border-color:rgba(201,106,92,.5)}

/* --- Éditeur --- */
#wbEdit{display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
#wbEdit .eh{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-bottom:1px solid var(--line)
}
#wbEdit .eh .btn{padding:6px 11px;font-size:10.5px}
#wbEditName{font-size:11px;color:var(--amber);letter-spacing:.04em}
#wbEditState{font-size:10px;color:#5C666D}
#wbEditArea{
  width:100%;height:100%;box-sizing:border-box;resize:none;outline:none;
  background:var(--bg);border:0;padding:16px 18px;color:var(--ink);
  font:12.5px/1.75 var(--mono);tab-size:2;white-space:pre
}

@media (max-width:860px){
  .wrow .dt{display:none}
  .wrow .sz{width:64px}
  .wrow .ac{opacity:1}
  .wb{width:26px;height:26px}
}

/* Bouton d'information en cours de lecture. */
#cpInfo.busy{color:var(--amber);border-color:rgba(209,154,84,.5)}
#cpInfo.busy svg{animation:msPulse 1.1s ease-in-out infinite}

/* Étiquettes de la grille de lecture. */
#skyRead .li.climat .k{color:var(--cyan)}
#skyRead .li.engager .k{color:var(--amber)}
#skyRead .li.differer .k{color:var(--danger)}

/* ============================================================
   ANALYSE COMPLÈTE
   Sept sections, chacune avec sa couleur. Le constat est froid,
   ce qu'on engage est ambre, ce qu'on retire est rouge.
   ============================================================ */
#trFull{
  position:absolute;right:20px;top:calc(50% + 82px);z-index:4;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid rgba(35,43,48,.9);border-radius:4px;
  color:#4A545B;cursor:pointer;pointer-events:auto;transition:.15s
}
#trFull svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
#trFull:hover{color:var(--amber);border-color:rgba(209,154,84,.5);
  background:rgba(209,154,84,.08)}

#trCard{width:min(720px,94vw);max-height:84vh;display:flex;flex-direction:column}
#trCard .chead{gap:10px;align-items:center}
#trWhen{font-size:10px;color:#5C666D;white-space:nowrap}
#trCard .chead .btn{padding:6px 11px;font-size:10px}
#trBody{overflow-y:auto;min-height:0;padding:20px 22px}

.tr-sec{margin-bottom:22px;padding-left:13px;border-left:2px solid var(--line2)}
.tr-sec:last-child{margin-bottom:0}
.tr-sec .k{
  font:9.5px var(--mono);letter-spacing:.17em;color:#5C666D;
  text-transform:uppercase;margin-bottom:7px
}
.tr-sec p{margin:0 0 8px;font-size:13.5px;line-height:1.75;color:var(--dim);text-wrap:pretty}
.tr-sec p:last-child{margin-bottom:0}

.tr-sec.etat{border-left-color:rgba(126,138,146,.5)}
.tr-sec.importance{border-left-color:rgba(201,106,92,.6)}
.tr-sec.importance .k{color:var(--danger)}
.tr-sec.importance p{color:var(--ink)}
.tr-sec.portes{border-left-color:rgba(79,168,201,.6)}
.tr-sec.portes .k{color:var(--cyan)}
.tr-sec.pendules{border-left-color:rgba(155,126,201,.55)}
.tr-sec.pendules .k{color:#9B7EC9}
.tr-sec.colonnes{border-left-color:rgba(126,138,146,.5)}
.tr-sec.vague{border-left-color:rgba(111,185,143,.55)}
.tr-sec.vague .k{color:var(--ok)}
.tr-sec.aujourdhui{
  border-left-color:var(--amber);background:rgba(209,154,84,.06);
  padding:14px 16px;border-radius:0 8px 8px 0
}
.tr-sec.aujourdhui .k{color:var(--amber)}
.tr-sec.aujourdhui p{color:var(--ink);font-size:14px}

.tr-wait{
  padding:40px 10px;text-align:center;
  font:10.5px var(--mono);letter-spacing:.14em;color:#5C666D;text-transform:uppercase
}
.tr-wait.err{color:var(--danger)}

/* Petit écran : les deux boutons descendent en bas à droite plutôt
   que de disparaître — l'analyse est la fonction, pas un ornement. */
@media (max-width:1100px){
  #cpInfo{top:auto;bottom:calc(136px + var(--safe-b));right:14px}
  #trFull{top:auto;bottom:calc(100px + var(--safe-b));right:14px}
}

/* ---------- Pièces jointes ---------- */
#mcPJ{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px;border-top:1px solid var(--line)}
.pj-chip{display:inline-flex;align-items:center;gap:7px;max-width:260px;padding:4px 8px;
  background:rgba(0,255,200,.05);border:1px solid var(--line);border-radius:3px;
  font-size:11.5px;color:var(--fg)}
.pj-chip .pj-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-chip .pj-ko{color:var(--dim);flex:0 0 auto;font-variant-numeric:tabular-nums}
.pj-chip button{background:none;border:0;color:var(--dim);cursor:pointer;padding:0 2px;
  font-size:14px;line-height:1;flex:0 0 auto}
.pj-chip button:hover{color:var(--danger)}
#mrPJ{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line)}
#mrPJ a{display:inline-flex;align-items:center;gap:7px;max-width:260px;padding:5px 10px;
  background:rgba(0,255,200,.04);border:1px solid var(--line);border-radius:3px;
  font-size:11.5px;color:var(--cyan);text-decoration:none}
#mrPJ a:hover{background:rgba(0,255,200,.1);border-color:var(--cyan)}

/* La signature reste accessible sur une boîte Gmail : elle est produite
   par Mother Sys, pas par Google. */
#mailAcctModal.gmail .ma-sign,
#mailAcctModal.gmail .ma-sign .hr,
#mailAcctModal.gmail .ma-sign .grp{display:block}