/* ================================================================
   TOUR DE CONTRÔLE — poste de pilotage d'agents
   Direction : salle d'opérations / tour de contrôle, de nuit.
   Statut = information (vert/ambre/rouge/veille), pas décor.
   ================================================================ */

:root{
  /* — matières de la salle — */
  --ground:      #0E1420;
  --ground-2:    #0B111B;
  --panel:       #151D2B;
  --panel-2:     #1B2536;
  --panel-hi:    #212D42;
  --edge:        #29344C;
  --edge-soft:   #202A3E;

  /* — encres — */
  --ink:         #EAEFF8;
  --ink-dim:     #93A0B7;
  --ink-faint:   #5C6880;

  /* — liaison / dispatch — */
  --live:        #52A8FF;
  --live-deep:   #1E5FA8;

  /* — statuts (sémantiques) — */
  --ok:          #3FD08A;
  --attn:        #F2B34C;
  --down:        #F26A5C;
  --idle:        #6E7CA8;

  --brand-hue:   210;

  --r-s: 7px; --r-m: 12px; --r-l: 18px;
  --shadow: 0 18px 50px -18px rgba(0,0,0,.7);
  --ring: 0 0 0 2px var(--ground), 0 0 0 4px var(--live);

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --topbar-h: 56px;
  --rail-w: 74px;
  --dock-w: 340px;
}

*, *::before, *::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(82,168,255,.10), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(63,208,138,.06), transparent 55%),
    var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
[data-mono]{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
h1,h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; margin:0; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
input{ font:inherit; }
svg.i{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--r-s); }
[hidden]{ display:none !important; }

/* ================================================================
   BOOT
   ================================================================ */
#boot{
  position:fixed; inset:0; z-index:90;
  display:grid; place-content:center; justify-items:center; gap:22px;
  background:var(--ground-2);
  transition:opacity .5s ease, visibility .5s;
}
html[data-boot="done"] #boot{ opacity:0; visibility:hidden; pointer-events:none; }
.boot-scope{ width:132px; height:132px; overflow:visible; }
.scope-ring{ fill:none; stroke:var(--edge); stroke-width:1.5; }
.scope-ring--in{ stroke:var(--edge-soft); }
.scope-core{ fill:var(--live); }
.scope-sweep{
  stroke:var(--live); stroke-width:2; stroke-linecap:round;
  transform-origin:60px 60px;
  animation:sweep 1.4s cubic-bezier(.5,.1,.3,1) infinite;
  filter:drop-shadow(0 0 6px var(--live));
}
@keyframes sweep{ to{ transform:rotate(360deg); } }
.boot-line{ color:var(--ink-dim); font-size:12.5px; letter-spacing:.06em; text-transform:lowercase; }

/* ================================================================
   LOGIN
   ================================================================ */
#gate{
  position:fixed; inset:0; z-index:80;
  display:grid; place-content:center;
  padding:24px;
  background:
    radial-gradient(700px 420px at 50% 0%, rgba(82,168,255,.10), transparent 60%),
    var(--ground);
}
.gate-card{
  position:relative; z-index:2;
  width:min(92vw, 360px);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--edge);
  border-radius:var(--r-l);
  padding:30px 26px 22px;
  box-shadow:var(--shadow);
}
.gate-brand{ display:flex; align-items:center; gap:10px; min-height:36px; }
.brand-logo{ display:block; width:auto; max-width:52vw; height:auto; }
.gate-brand .brand-logo{ max-height:40px; }
.topbar-brand .brand-logo{ max-height:30px; }
.wordmark{ font-family:var(--font-display); font-weight:500; font-size:17px; letter-spacing:-.01em; color:var(--ink); }
.wordmark b{ font-weight:800; }
.mark{
  width:26px; height:26px; flex:none; border-radius:7px;
  background:
    conic-gradient(from 220deg, var(--live), #7ad0ff 40%, var(--live-deep) 75%, var(--live));
  -webkit-mask:var(--tower-mask); mask:var(--tower-mask);
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
:root{
  --tower-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 2h2l1 5 3 2v2l-2 1 1 9h-2l-1-6h-2l-1 6H9l1-9-2-1V9l3-2z'/%3E%3C/svg%3E");
}
.gate-tag{ margin:8px 0 22px; color:var(--ink-faint); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
#gate-form{ display:flex; flex-direction:column; gap:10px; }
#gate-form label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
#gate-pass{
  width:100%; padding:13px 14px;
  background:var(--ground); color:var(--ink);
  border:1px solid var(--edge); border-radius:var(--r-s);
  letter-spacing:.14em; font-family:var(--font-mono);
}
#gate-pass::placeholder{ color:var(--ink-faint); letter-spacing:.14em; }
#gate-pass:focus{ border-color:var(--live); box-shadow:0 0 0 3px rgba(82,168,255,.16); outline:none; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:var(--r-s);
  font-family:var(--font-display); font-weight:600; font-size:13.5px;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--go{
  justify-content:space-between; margin-top:6px;
  background:linear-gradient(180deg, #3a91ec, var(--live-deep));
  color:#fff; box-shadow:0 8px 24px -10px rgba(82,168,255,.6);
}
.btn--go:hover{ background:linear-gradient(180deg, #4a9df5, #24699f); }
.btn--go .i{ width:18px; height:18px; }
.gate-msg{ margin:4px 0 0; font-size:12.5px; color:var(--down); font-family:var(--font-mono); }
.gate-foot{ margin:18px 0 0; text-align:center; color:var(--ink-faint); font-size:10.5px; letter-spacing:.06em; }
.gate-scope{ position:absolute; inset:0; display:grid; place-content:center; z-index:1; opacity:.5; }
.gate-scope svg{ width:min(88vw,560px); height:auto; }
.gate-scope circle{ fill:none; stroke:var(--edge-soft); stroke-width:1; }
.gate-scope line{
  stroke:rgba(82,168,255,.5); stroke-width:1.5; transform-origin:120px 120px;
  animation:sweep 4s linear infinite;
}

/* ================================================================
   APP SHELL
   ================================================================ */
#app{
  position:fixed; inset:0;
  display:grid;
  grid-template-columns:var(--rail-w) minmax(0,1fr) 0;
  grid-template-rows:var(--topbar-h) minmax(0,1fr) auto;
  grid-template-areas:
    "top  top   top"
    "rail stage dock"
    "rail disp  dock";
  transition:grid-template-columns .28s ease;
}
#app.show-dock{ grid-template-columns:var(--rail-w) minmax(0,1fr) var(--dock-w); }

/* — TOPBAR — */
.topbar{
  grid-area:top; position:relative;
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  padding:0 16px;
  background:linear-gradient(180deg, var(--panel-2), rgba(21,29,43,.82));
  border-bottom:1px solid var(--edge);
  backdrop-filter:blur(8px);
}
.topbar-brand{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:10px; min-width:0;
  pointer-events:none;
}
.topbar-brand .wordmark{ font-size:15px; white-space:nowrap; }
.brand-client{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-dim);
  padding-left:10px; margin-left:2px; border-left:1px solid var(--edge);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:24vw;
}
.brand-client:empty{ display:none; }

.liaison{
  display:flex; align-items:center; gap:10px;
  margin-left:auto;
  padding:6px 12px 6px 8px;
  background:var(--panel); border:1px solid var(--edge); border-radius:999px;
  transition:border-color .2s ease;
}
.liaison:hover{ border-color:var(--edge-soft); }
.liaison-scope{ position:relative; width:20px; height:20px; flex:none; display:grid; place-content:center; }
.liaison-scope .dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); z-index:2; }
.liaison-scope .pulse{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--ok);
  animation:pulse 3s ease-out infinite;
}
.liaison-scope .pulse--2{ animation-delay:1.5s; }
@keyframes pulse{ 0%{ transform:scale(.35); opacity:.9; } 100%{ transform:scale(1.4); opacity:0; } }
.liaison-text{ display:flex; flex-direction:column; line-height:1.15; }
.liaison-state{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink); }
.liaison-node{ font-size:10.5px; color:var(--ink-dim); }
.liaison[data-status="attn"] .dot{ background:var(--attn); box-shadow:0 0 10px var(--attn); }
.liaison[data-status="attn"] .pulse{ border-color:var(--attn); }
.liaison[data-status="down"] .dot{ background:var(--down); box-shadow:0 0 10px var(--down); }
.liaison[data-status="down"] .pulse{ border-color:var(--down); animation-duration:1.4s; }

.topbar-end{ display:flex; align-items:center; gap:12px; }
.clock{ font-size:12.5px; color:var(--ink-dim); }
.operator{
  width:32px; height:32px; border-radius:50%;
  background:var(--panel-hi); border:1px solid var(--edge);
  font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink);
}

/* — RAIL — */
.rail{
  grid-area:rail;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:12px 0;
  background:var(--ground-2);
  border-right:1px solid var(--edge);
}
.rail-btn{
  position:relative;
  width:56px; padding:9px 0 7px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  border-radius:var(--r-m);
  color:var(--ink-faint);
  transition:color .15s ease, background .15s ease;
}
.rail-btn span{ font-size:9.5px; letter-spacing:.03em; text-transform:uppercase; }
.rail-btn:hover{ color:var(--ink-dim); background:var(--panel); }
.rail-btn.is-active{ color:var(--live); background:var(--panel); }
.rail-btn.is-active::before{
  content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:22px; border-radius:2px; background:var(--live);
}
.rail-btn--foot{ margin-top:auto; }
.rail-badge{
  position:absolute; top:4px; right:6px;
  min-width:16px; height:16px; padding:0 4px;
  display:grid; place-content:center;
  background:var(--live); color:#fff;
  font-family:var(--font-mono); font-size:10px; font-style:normal;
  border-radius:9px;
}

/* ================================================================
   STAGE / VIEWS
   ================================================================ */
.stage{ grid-area:stage; overflow-y:auto; overflow-x:hidden; padding:24px 26px 8px; }
.view{ display:none; animation:rise .3s ease both; }
.view.is-active{ display:block; }
@keyframes rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.view-head{ margin-bottom:20px; }
.view-head--row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.view-head h1{ font-size:24px; }
.btn-new{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:var(--r-s);
  background:var(--panel-hi); border:1px solid var(--edge);
  font-family:var(--font-display); font-weight:600; font-size:12.5px; color:var(--ink);
  transition:border-color .14s ease, background .14s ease, opacity .14s ease;
  white-space:nowrap;
}
.btn-new:hover{ border-color:var(--live); background:var(--panel); }
.btn-new .i{ width:15px; height:15px; }
.btn-new:disabled{ opacity:.45; cursor:not-allowed; }
.btn-new:disabled:hover{ border-color:var(--edge); background:var(--panel-hi); }

/* modale */
.modal{
  position:fixed; inset:0; z-index:75;
  display:grid; place-content:center; padding:20px;
  background:rgba(8,12,20,.66); backdrop-filter:blur(3px);
  animation:rise .18s ease both;
}
.modal-card{
  width:min(94vw, 440px);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--edge); border-radius:var(--r-l);
  box-shadow:var(--shadow); padding:22px 22px 18px;
}
.modal-card header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.modal-card h2{ font-size:17px; }
.modal-close{ width:30px; height:30px; border-radius:7px; color:var(--ink-dim); font-size:20px; line-height:1; }
.modal-close:hover{ color:var(--ink); background:var(--panel-hi); }
.modal-card form{ display:flex; flex-direction:column; gap:8px; }
.modal-card label{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-dim); margin-top:6px; }
.modal-card input, .modal-card textarea{
  width:100%; padding:11px 12px;
  background:var(--ground); color:var(--ink);
  border:1px solid var(--edge); border-radius:var(--r-s);
  font-family:var(--font-body); resize:vertical;
}
.modal-card input:focus, .modal-card textarea:focus{ outline:none; border-color:var(--live); box-shadow:0 0 0 3px rgba(82,168,255,.14); }
.modal-note{ font-size:11px; color:var(--ink-faint); margin:8px 0 2px; line-height:1.5; }
.modal-acts{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.modal-acts .btn{ padding:10px 16px; }
.modal-acts .btn--go{ justify-content:center; }
.view-sub{ margin:4px 0 0; color:var(--ink-dim); font-size:13px; }
.view-sub [data-count-running]{ color:var(--ok); font-family:var(--font-mono); }

/* — BOARD / STATION CARDS — */
.board{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(268px, 1fr));
  padding-bottom:16px;
}
.station{
  position:relative;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--edge);
  border-radius:var(--r-m);
  padding:16px 16px 14px;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.station:hover{ transform:translateY(-3px); border-color:var(--edge-soft); box-shadow:var(--shadow); }
.station[data-pending]{ opacity:.7; }
.station[data-pending] .station-state-tag{ color:var(--attn); border-color:rgba(242,179,76,.4); animation:breathe 1.4s ease-in-out infinite; }
.station[data-pending] .station-light{ background:var(--attn); box-shadow:0 0 0 4px rgba(242,179,76,.16); animation:breathe 1.4s ease-in-out infinite; }
.station-top{ display:flex; align-items:flex-start; gap:10px; }
.station-light{
  width:9px; height:9px; margin-top:6px; flex:none; border-radius:50%;
  background:var(--idle); box-shadow:0 0 0 4px rgba(110,124,168,.14);
}
.station[data-state="running"] .station-light{ background:var(--ok); box-shadow:0 0 0 4px rgba(63,208,138,.16), 0 0 12px var(--ok); animation:breathe 2.4s ease-in-out infinite; }
.station[data-state="attn"] .station-light{ background:var(--attn); box-shadow:0 0 0 4px rgba(242,179,76,.16); }
.station[data-state="down"] .station-light{ background:var(--down); box-shadow:0 0 0 4px rgba(242,106,92,.16); }
@keyframes breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.station-id{ min-width:0; flex:1; }
.station-name{ font-family:var(--font-display); font-weight:700; font-size:15.5px; }
.station-fn{ display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-dim); letter-spacing:.02em; margin-top:1px; }
.station-state-tag{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-dim); padding:3px 7px; border:1px solid var(--edge); border-radius:6px; white-space:nowrap;
}
.station[data-state="running"] .station-state-tag{ color:var(--ok); border-color:rgba(63,208,138,.4); }
.station[data-state="down"] .station-state-tag{ color:var(--down); border-color:rgba(242,106,92,.4); }

.station-mission{ margin:12px 0 0; font-size:12.5px; color:var(--ink-dim); min-height:2.6em; }
.station-mission b{ color:var(--ink); font-weight:500; }

.station-bar{ height:4px; margin-top:10px; border-radius:3px; background:var(--ground); overflow:hidden; }
.station-bar span{ display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg, var(--live-deep), var(--live)); transition:width .6s ease; }
.station[data-state="running"] .station-bar{ display:block; }
.station:not([data-state="running"]) .station-bar{ display:none; }

.station-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.station-since{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); }
.station-acts{ display:flex; gap:4px; opacity:0; transform:translateX(4px); transition:opacity .16s ease, transform .16s ease; }
.station:hover .station-acts, .station:focus-within .station-acts{ opacity:1; transform:none; }
.sact{
  width:28px; height:28px; display:grid; place-content:center;
  border-radius:6px; color:var(--ink-dim);
  background:var(--panel-hi); border:1px solid var(--edge);
  transition:color .13s ease, border-color .13s ease;
}
.sact:hover{ color:var(--ink); border-color:var(--edge-soft); }
.sact--go:hover{ color:var(--ok); }
.sact--stop:hover{ color:var(--down); }
.sact .i{ width:15px; height:15px; }

/* — CONSOLE — */
.console{ max-width:820px; display:flex; flex-direction:column; height:100%; }
.console-log{ display:flex; flex-direction:column; gap:14px; padding-bottom:20px; }
.msg{ max-width:78%; padding:11px 14px; border-radius:var(--r-m); font-size:13.5px; line-height:1.55; }
.msg--op{ align-self:flex-end; background:var(--live-deep); color:#fff; border-bottom-right-radius:4px; }
.msg--slash{ align-self:flex-start; background:var(--panel-2); border:1px solid var(--edge); border-bottom-left-radius:4px; }
.msg--slash .who{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--live); margin-bottom:4px; }
.msg-sep{ display:block; height:7px; }
.msg--sys{ align-self:center; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
.msg .dots{ display:inline-flex; gap:4px; padding:3px 0; }
.msg .dots i{ width:6px; height:6px; border-radius:50%; background:var(--live); opacity:.4; animation:dot 1.2s ease-in-out infinite; }
.msg .dots i:nth-child(2){ animation-delay:.2s; }
.msg .dots i:nth-child(3){ animation-delay:.4s; }
@keyframes dot{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

/* — LIVRABLES — */
.livrables{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
.livrable{
  display:flex; align-items:stretch;
  background:var(--panel-2); border:1px solid var(--edge); border-radius:var(--r-m);
  overflow:hidden;
  animation:rise .3s ease both;
  transition:border-color .14s ease, opacity .2s ease;
}
.livrable:hover{ border-color:var(--edge-soft); }
.livrable.is-going{ opacity:.4; }
.livrable-open{
  flex:1; min-width:0;
  display:flex; gap:12px; align-items:flex-start; text-align:left;
  padding:13px 12px 13px 14px;
}
.livrable-open:hover{ background:var(--panel-hi); }
.livrable-ico{ width:36px; height:36px; flex:none; display:grid; place-content:center; border-radius:8px; background:var(--panel-hi); color:var(--live); }
.livrable-open:hover .livrable-ico{ background:var(--ground); }
.livrable-ico .i{ width:19px; height:19px; }
.livrable-meta{ min-width:0; display:flex; flex-direction:column; }
.livrable-name{ font-weight:500; font-size:13px; word-break:break-word; line-height:1.35; }
.livrable-sub{ font-family:var(--font-mono); font-size:10px; color:var(--ink-dim); margin-top:3px; }
.livrable-del{
  flex:none; width:40px;
  display:grid; place-content:center;
  color:var(--ink-faint); border-left:1px solid var(--edge);
  transition:color .13s ease, background .13s ease;
}
.livrable-del:hover{ color:var(--down); background:rgba(242,106,92,.08); }
.livrable-del .i{ width:15px; height:15px; }
.btn-new--danger:hover{ border-color:var(--down); color:var(--down); }
.empty{ color:var(--ink-faint); font-size:13px; font-family:var(--font-mono); }

/* — JOURNAL (dock + full) — */
.journal{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.journal li{
  display:grid; grid-template-columns:auto auto 1fr; gap:10px; align-items:baseline;
  padding:8px 4px; border-bottom:1px solid var(--edge-soft);
  font-size:12px;
}
.journal li .t{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); }
.journal li .tag{ width:6px; height:6px; border-radius:50%; background:var(--idle); align-self:center; }
.journal li[data-sev="ok"] .tag{ background:var(--ok); }
.journal li[data-sev="attn"] .tag{ background:var(--attn); }
.journal li[data-sev="down"] .tag{ background:var(--down); }
.journal li[data-sev="live"] .tag{ background:var(--live); }
.journal li .m{ color:var(--ink-dim); }
.journal li .m b{ color:var(--ink); font-weight:500; }
.journal--full{ max-width:760px; }
.journal--full li{ padding:11px 4px; font-size:13px; }

/* ================================================================
   DISPATCH BAR
   ================================================================ */
.dispatch{
  grid-area:disp;
  padding:10px 26px 16px;
  background:linear-gradient(0deg, var(--ground) 70%, transparent);
  border-top:1px solid var(--edge-soft);
}
.dispatch-chips{ display:flex; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
.chip{
  padding:6px 11px; border-radius:999px;
  background:var(--panel); border:1px solid var(--edge);
  font-size:11.5px; color:var(--ink-dim);
  transition:color .13s ease, border-color .13s ease, background .13s ease;
}
.chip:hover{ color:var(--ink); border-color:var(--live); background:var(--panel-hi); }
.dispatch-row{
  display:flex; align-items:center; gap:10px;
  background:var(--panel-2); border:1px solid var(--edge);
  border-radius:var(--r-m); padding:6px 6px 6px 14px;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.dispatch-row:focus-within{ border-color:var(--live); box-shadow:0 0 0 3px rgba(82,168,255,.14); }
.dispatch-scope{
  width:9px; height:9px; flex:none; border-radius:50%;
  background:var(--live); box-shadow:0 0 10px var(--live);
  animation:breathe 2s ease-in-out infinite;
}
[data-order-input]{
  flex:1; min-width:0; padding:9px 0;
  background:none; border:0; color:var(--ink); outline:none;
}
[data-order-input]::placeholder{ color:var(--ink-faint); }
.btn--mic{
  width:40px; height:40px; flex:none; padding:0;
  border-radius:9px; color:var(--ink-dim);
  background:var(--panel-hi); border:1px solid var(--edge);
  transition:color .14s ease, border-color .14s ease, background .14s ease;
}
.btn--mic:hover{ color:var(--ink); border-color:var(--live); }
.btn--mic .i{ width:18px; height:18px; }
.btn--mic[data-state="listening"]{ color:#fff; background:var(--down); border-color:var(--down); animation:micPulse 1.3s ease-in-out infinite; }
.btn--mic[data-state="busy"]{ color:var(--live); border-color:var(--live); }
.btn--mic[data-state="busy"] .i{ animation:spin 1s linear infinite; }
@keyframes micPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(242,106,92,.5); } 50%{ box-shadow:0 0 0 7px rgba(242,106,92,0); } }
.btn--send{
  width:40px; height:40px; flex:none; padding:0;
  border-radius:9px; color:#fff;
  background:linear-gradient(180deg, #3a91ec, var(--live-deep));
}
.btn--send:hover{ background:linear-gradient(180deg, #4a9df5, #24699f); }
.btn--send .i{ width:19px; height:19px; fill:currentColor; stroke:none; }

/* ================================================================
   MISSION OVERLAY
   ================================================================ */
.mission{
  position:fixed; right:26px; bottom:120px; z-index:60;
  width:min(90vw, 360px);
  animation:missionIn .3s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes missionIn{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
.mission-card{
  background:linear-gradient(180deg, var(--panel-hi), var(--panel-2));
  border:1px solid var(--live); border-radius:var(--r-m);
  padding:14px 15px 13px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(82,168,255,.15);
}
.mission-card header{ display:flex; align-items:center; justify-content:space-between; }
.mission-agent{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--live); letter-spacing:.02em; }
.mission-close{ width:24px; height:24px; border-radius:6px; color:var(--ink-dim); font-size:16px; line-height:1; }
.mission-close:hover{ color:var(--ink); background:var(--panel); }
.mission-order{ margin:8px 0 12px; font-size:12.5px; color:var(--ink-dim); }
.mission-steps{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.mstep{ display:flex; gap:8px; align-items:center; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
.mstep::before{ content:"○"; color:var(--ink-faint); }
.mstep.is-done{ color:var(--ink-dim); }
.mstep.is-done::before{ content:"●"; color:var(--ok); }
.mstep.is-now{ color:var(--ink); }
.mstep.is-now::before{ content:"◐"; color:var(--live); animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.mission-bar{ height:5px; border-radius:3px; background:var(--ground); overflow:hidden; }
.mission-bar span{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--live-deep), var(--live)); transition:width .4s ease; }
.mission-eta{ margin:8px 0 0; font-size:10.5px; color:var(--ink-faint); }

/* ================================================================
   DOCK (journal)
   ================================================================ */
.dock{
  grid-area:dock; overflow:hidden;
  background:var(--ground-2); border-left:1px solid var(--edge);
  display:flex; flex-direction:column;
}
#app:not(.show-dock) .dock{ border-left:0; }
.dock-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--ink-dim);
  border-bottom:1px solid var(--edge-soft);
}
.dock-head button{ color:var(--ink-faint); }
.dock-head button:hover{ color:var(--ink); }
.dock .journal{ overflow-y:auto; padding:4px 14px 20px; }

/* dock toggle handle when closed */
.dock-tab{
  position:fixed; right:0; top:calc(var(--topbar-h) + 14px); z-index:40;
  writing-mode:vertical-rl;
  padding:12px 6px; border-radius:8px 0 0 8px;
  background:var(--panel-2); border:1px solid var(--edge); border-right:0;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:var(--ink-dim);
}
.dock-tab:hover{ color:var(--ink); }
#app.show-dock .dock-tab{ display:none; }

/* ================================================================
   TOASTS
   ================================================================ */
.toasts{ position:fixed; left:50%; bottom:118px; transform:translateX(-50%); z-index:70; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{
  display:flex; align-items:center; gap:10px;
  padding:10px 15px; border-radius:999px;
  background:var(--panel-hi); border:1px solid var(--edge);
  font-size:12.5px; box-shadow:var(--shadow);
  animation:toastIn .25s ease both;
}
.toast .tag{ width:7px; height:7px; border-radius:50%; background:var(--ok); }
.toast[data-sev="down"] .tag{ background:var(--down); }
.toast[data-sev="live"] .tag{ background:var(--live); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ================================================================
   SETTINGS
   ================================================================ */
.settings{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); max-width:900px; }
.set-card{ background:var(--panel-2); border:1px solid var(--edge); border-radius:var(--r-m); padding:16px 18px; }
.set-card--wide{ grid-column:1 / -1; }
.set-card h2{ font-size:14px; margin-bottom:12px; }
.set-card dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:12.5px; }
.set-card dt{ color:var(--ink-faint); }
.set-card dd{ margin:0; color:var(--ink); text-align:right; }
.toggle{ display:flex; gap:10px; align-items:flex-start; padding:7px 0; font-size:12.5px; color:var(--ink-dim); }
.toggle input{ margin-top:2px; accent-color:var(--live); }
.set-note{ font-size:11.5px; color:var(--ink-dim); margin:0 0 12px; }
.btn--ghost{ background:var(--panel-hi); border:1px solid var(--edge); color:var(--ink-dim); }
.btn--ghost:hover{ color:var(--ink); border-color:var(--live); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1180px){
  #app.show-dock{ grid-template-columns:var(--rail-w) minmax(0,1fr) 0; }
  #app.show-dock .dock{
    position:fixed; right:0; top:var(--topbar-h); bottom:0; width:min(88vw,340px); z-index:50;
    border-left:1px solid var(--edge); box-shadow:-30px 0 60px -20px rgba(0,0,0,.6);
  }
}
@media (max-width:720px){
  body{ font-size:14px; }
  #app{
    grid-template-columns:1fr;
    grid-template-rows:52px minmax(0,1fr) auto 58px;
    grid-template-areas:"top" "stage" "disp" "rail";
    --topbar-h:52px;
  }
  .rail{
    flex-direction:row; justify-content:space-around; align-items:center;
    padding:0; border-right:0; border-top:1px solid var(--edge);
  }
  .rail-btn{ width:auto; flex:1; padding:7px 0 5px; border-radius:0; }
  .rail-btn span{ font-size:9px; }
  .rail-btn.is-active::before{ left:50%; top:0; transform:translateX(-50%); width:20px; height:3px; }
  .rail-btn--foot{ margin-top:0; }
  .stage{ padding:16px 14px 4px; }
  .view-head h1{ font-size:20px; }
  .dispatch{ padding:8px 14px 10px; }
  .dispatch-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .dispatch-chips::-webkit-scrollbar{ display:none; }
  .chip{ white-space:nowrap; }
  .brand-client{ display:none; }
  .liaison-text{ display:none; }
  .topbar-brand .brand-logo{ max-height:22px; }
  .mission{ right:12px; left:12px; bottom:132px; width:auto; }
  .toasts{ bottom:132px; }
  #app.show-dock .dock{ top:52px; width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .scope-sweep, .gate-scope line{ display:none; }
}