dsh-erpbot 0.1.0 → 0.1.1

package/src/styles.js

@@ -54,24 +54,27 @@
 }
 /* Only the primary icon group gives way in a short box; the settings/
    language group at the bottom is always kept on screen instead of being
-   pushed out of the panel. */
-.erp-app .t1-rail > .rail-group:first-of-type{
+   pushed out of the panel.
+
+   NOTE: this must NOT be ":first-of-type". The rail now opens with the brand
+   avatar slot, which is also a <div>, so ":first-of-type" would match the
+   brand instead of the button group and the scroll guard would silently
+   switch off — visible only as the button group pushing the wordmark out of
+   a short panel. */
+.erp-app .t1-rail > .rail-group{
   flex:0 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
 }
-.erp-app .t1-rail > .rail-group:first-of-type::-webkit-scrollbar{width:0;height:0}
+.erp-app .t1-rail > .rail-group::-webkit-scrollbar{width:0;height:0}
 /* The bottom lockup (erpBot wordmark + 中/EN switch) is never squeezed out:
    it keeps its natural height while only the icon group above may scroll. */
 .erp-app .t1-rail .rail-foot{flex:none}
 .erp-app .rail-spacer{flex:1 1 auto;min-height:0}
-.erp-app .t1-rail::after{
-  content:"";position:absolute;right:0;top:16px;bottom:24px;width:1px;
-  pointer-events:none;
-  background:linear-gradient(180deg,
-    rgba(198,203,225,0) 0px,
-    rgba(198,203,225,.85) 22px,
-    rgba(198,203,225,.85) calc(100% - 34px),
-    rgba(198,203,225,0) 100%);
-}
+/* The vertical hairline between the rail and the content column is gone: the
+   rail already reads as its own column through the inset icon card and the
+   whitespace gutter, so the line was a redundant second edge. Kept as an
+   explicit display:none rather than deleting the rule, so the dark override
+   below stays paired with it. */
+.erp-app .t1-rail::after{display:none}
 .erp-app .rail-brand{
   width:92px;flex:none;display:flex;align-items:center;justify-content:center;gap:5px;
   white-space:nowrap;height:58px;
@@ -121,27 +124,6 @@
   box-shadow:0 10px 18px -12px rgba(21,25,51,.95);
 }
 
-/* rail-top brand tile: the B mark, spanning the full width of the nav rail so
-   the brand block is exactly as wide as the icon column below it. */
-.erp-app .rail-logo{
-  width:100%;flex:none;display:flex;align-items:center;justify-content:center;
-  margin-bottom:6px;
-}
-/* The B tile fills the rail's width: the brand block and the icon column below
-   share the same edges, so the mark reads as the header of the nav column. */
-.erp-app .rail-logo .rail-mark{
-  width:100%;height:52px;flex:none;
-  display:grid;place-items:center;
-  border-radius:16px;
-  background:linear-gradient(140deg,#3f2fbe,#7c5cff 52%,#c48bfb);
-  color:#fff;font-size:26px;font-weight:800;line-height:1;letter-spacing:.02em;
-  box-shadow:0 10px 22px -12px rgba(94,72,232,.72);
-}
-.erp-app[data-theme='dark'] .rail-logo .rail-mark{
-  background:linear-gradient(140deg,#4a37d6,#8a68ff 52%,#cfa2ff);
-  box-shadow:0 10px 22px -12px rgba(0,0,0,.8);
-}
-
 /* language switch: a two-segment pill (中 | EN) under the erpBot wordmark.
    Both languages stay visible, the active segment is lit, and the inactive one
    only reacts to hover. */
@@ -248,6 +230,13 @@
 
 /* ---------------- stat cards ---------------- */
 .erp-app .t1-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
+.erp-app .mcp-bar{display:flex;align-items:center;gap:5px;padding:0 4px 9px;font-size:11px;color:var(--erp-dim)}
+.erp-app .mcp-bar-label{opacity:.72}
+.erp-app .mcp-dot{display:inline-flex;align-items:center}
+.erp-app .mcp-dot .bot-dot{width:6px;height:6px;border-radius:50%;flex:none}
+.erp-app .mcp-dot.ok .bot-dot{background:#4dba6a}
+.erp-app .mcp-dot.warn .bot-dot{background:#eb943b}
+.erp-app .mcp-dot.off .bot-dot{background:var(--erp-dim);opacity:.4}
 .erp-app .stat{padding:13px 15px 11px;display:flex;flex-direction:column;gap:8px}
 .erp-app .stat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
 .erp-app .stat-label{font-size:11.4px;font-weight:600;color:#8c93ac;letter-spacing:.005em}
@@ -551,10 +540,16 @@
    inline-size container above), which is exactly the area the host hands us.
    Width and height both get handled: narrow boxes reflow the grid, short boxes
    shrink the fixed-height chart so the page still fits. */
-@container erp (min-width:1181px){
-  /* Wide enough that the whole board is one screen: let the two content rows
+@container erp (min-width:901px){
+  /* Wide enough that the board is still one screen: let the two content rows
      share the leftover height instead of sitting at their natural size, so a
-     tall panel fills up and a short one compresses rather than being clipped. */
+     tall panel fills up and a short one compresses rather than being clipped.
+
+     The floor used to be 1181px. Between 901 and 1180 the panel did NOT stack
+     (row 2 and row 3 were still side by side) yet the rows were plain "auto",
+     so any spare height just collected as dead space at the bottom of the
+     column — 191px of it at 1100x900. The split the rows need is the 900px
+     breakpoint below, not 1181, so the range moves with it. */
   .erp-app .t1-main{
     grid-template-rows:auto minmax(var(--erp-row2-min),1.42fr) minmax(var(--erp-row3-min),1fr);
   }
@@ -756,8 +751,10 @@
   .erp-app .rail-foot{gap:5px}
   .erp-app .rail-lang{padding:1px}
   .erp-app .rail-lang .lang-seg{min-width:21px;height:16px;padding:0 4px;font-size:8.2px}
-  .erp-app .rail-logo{margin-bottom:4px}
-  .erp-app .rail-logo .rail-mark{height:28px;font-size:16px;border-radius:11px}
+  /* short box: the avatar trades its breathing room for the icon column, but
+     keeps the ring — that ring is the only thing separating brand from a
+     navigation button, so it is the last thing to give up. */
+  .erp-app .rail-brand-slot{margin:0 0 6px}
 }
 /* The card art is the one element that cannot simply shrink: below a certain
    height the 1.62:1 ratio squeezes it into a sliver too small to read. So when
@@ -793,16 +790,17 @@
 }
 .erp-app[data-theme='dark'] .erp-board{
   background:#12141f;
+  /* the avatar's seam and dot halo read this, so it must follow the surface */
+  --erp-board-bg:#12141f;
 }
 .erp-app[data-theme='dark'] .erp-board::before{display:none}
-.erp-app[data-theme='dark'] .t1-rail::after{
-  background:linear-gradient(180deg,rgba(70,78,110,0) 0,rgba(70,78,110,.8) 22px,rgba(70,78,110,.8) calc(100% - 34px),rgba(70,78,110,0) 100%);
-}
+/* paired with the light rule above: the divider is off in both themes */
+.erp-app[data-theme='dark'] .t1-rail::after{display:none}
 .erp-app[data-theme='dark'] .rail-group{background:#171a2c;border-color:#242840;box-shadow:0 12px 26px -22px rgba(0,0,0,.8)}
 .erp-app[data-theme='dark'] .rb-name{color:#eef0fa}
 .erp-app[data-theme='dark'] .rail-btn{background:#1d2136;border-color:#2a2f4a;color:#98a0bd}
 .erp-app[data-theme='dark'] .rail-btn:hover{background:#242944;color:#eef0fa;border-color:#3a4166}
-.erp-app[data-theme='dark'] .rail-btn.active{background:#6a54f5;border-color:#6a54f5;color:#fff;box-shadow:0 10px 18px -12px rgba(106,84,245,.9)}
+.erp-app[data-theme='dark'] .rail-btn.active{background:#5b3cf0;border-color:#5b3cf0;color:#fff;box-shadow:0 10px 18px -12px rgba(91,60,240,.9)}
 .erp-app[data-theme='dark'] .brand-name{color:#f0f2fb}
 .erp-app[data-theme='dark'] .t1-greet b{color:#f0f2fb}
 .erp-app[data-theme='dark'] .t1-greet small{color:#8b93b0}
@@ -1161,9 +1159,18 @@
 .erp-app .visa.focus .mini-donut-center{
   position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
   justify-content:center;gap:2px;text-align:center;pointer-events:none;
+  /* The centre is inset to the RING's inner diameter, not the ring's box: the
+     stroke is 6/44 of the viewBox, so the usable hole is about 68% wide. Text
+     that fills the whole box visually touches the arcs. */
+  padding:0 16%;
 }
 .erp-app .visa.focus .mini-donut-center b{
   font-size:clamp(13px,4cqi,18px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
+  /* The hole is roughly half the ring's outer width; anything wider spills
+     across both arcs. compactMoney already shortens the figure, and this is
+     the belt-and-braces so an unexpectedly long string shrinks to fit instead
+     of overflowing. */
+  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 }
 .erp-app .visa.focus .mini-donut-center span{
   font-size:clamp(7px,2cqi,9px);opacity:.68;font-weight:600;
@@ -1197,16 +1204,33 @@
   flex:1 1 0;min-width:0;max-width:none;justify-content:center;
 }
 
-/* ---------------- donut row: content-sized group, bounded legend column ---------------- */
+/* ---------------- donut row: full-width ring + legend pair ----------------
+   This row used to inherit max-width:46% from the generic .erp-app .donut
+   rule (line ~441), which was written for the expense card where the ring
+   shares its row with a legend that has its own column. Here it is the ONLY
+   thing in the middle lane, so capping it at 46% left the row 121-218px wide
+   while the card was 304-514px: the ring ate 96px and the legend got 0-30px,
+   i.e. every label ellipsised away. The override below restores the full lane. */
 .erp-app .visa.focus .visa-chart.donut{
-  width:100%;justify-content:center;
-  gap:clamp(24px,5cqi,40px);
+  width:100%;max-width:none;justify-content:center;
+  gap:clamp(20px,4cqi,34px);
+  /* The two floating arrows are positioned against the CARD (right:-13px), not
+     against this row, so the row has to reserve their lane itself or the
+     legend runs underneath the next arrow. The button is 26px and 13px of it
+     hangs outside the card, so 30px of inset keeps ring and legend clear. */
+  padding:0 30px;
+  box-sizing:border-box;
 }
 .erp-app .visa.focus .mini-donut{
-  width:clamp(88px,30cqi,158px);height:auto;max-height:100%;aspect-ratio:1/1;flex:none;
+  width:clamp(96px,32cqi,168px);height:auto;max-height:100%;aspect-ratio:1/1;flex:none;
 }
+/* The legend used to be width-limited to 26cqi, which on a narrow card left it
+   with 9-27px — narrower than its own text, so every row ellipsised to nothing.
+   It now takes the room the ring does not need, with a floor that keeps the
+   label readable and lets the row wrap rather than crush. */
 .erp-app .visa.focus .mini-legend{
-  flex:0 1 auto;width:clamp(150px,26cqi,196px);min-width:0;max-width:none;justify-content:center;
+  flex:1 1 auto;width:auto;min-width:96px;max-width:min(230px,42cqi);
+  justify-content:center;
 }
 
 /* ---------------- card anatomy: header / middle / footer ---------------- */
@@ -1465,6 +1489,12 @@
 
 /* ---------------- nested pages: four KPIs + one section workbench ---------------- */
 .erp-app .t1-main[data-shell='true']{grid-template-rows:auto minmax(0,1fr)}
+/* The team page has no KPI row: it is ONE card that must fill the whole column.
+   It sets data-shell="team" (see shell/index.js), but only [data-shell='true']
+   had a rule here, so the team card fell back to content height and left a
+   large empty band under it. A single minmax row gives it the full height, and
+   align-content must stop being "start" or the row keeps its content height. */
+.erp-app .t1-main[data-shell='team']{grid-template-rows:minmax(0,1fr);align-content:stretch}
 .erp-app .workbench{display:flex;flex-direction:row;min-height:0;overflow:hidden;padding:0}
 .erp-app .wb-nav{flex:none;width:200px;border-right:1px solid #f2f3fa;padding:12px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
 .erp-app .wb-hd{font-size:9.6px;font-weight:700;letter-spacing:.05em;color:#a6acc2;padding:2px 8px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@@ -1881,6 +1911,9 @@
 .erp-app .bot-avatar{position:relative;width:40px;height:40px;border-radius:13px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,#3f2fbe,#7c5cff 62%,#c48bfb);color:#fff;font-weight:800;box-shadow:0 8px 18px -8px rgba(91,70,224,.6);transition:transform .2s,box-shadow .2s}
 .erp-app .bot-avatar:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(91,70,224,.72)}
 .erp-app .bot-avatar-t{font-size:14px;letter-spacing:.5px}
+/* Team avatar uses the users glyph instead of a Latin initial; the shared
+   gradient stays so the team reads as a fifth member of the same family. */
+.erp-app .bot-avatar.team-avatar svg{width:18px;height:18px}
 .erp-app .bot-avatar-state{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#c3c7d6;border:2px solid #fff}
 .erp-app .bot-avatar-state.live{background:#22b07d}
 .erp-app .bot-avatar-state.warn{background:#e8a13c}
@@ -1904,10 +1937,35 @@
 .erp-app .bot-act.on{background:#efecff;color:#5b46e0}
 .erp-app .bot-act svg{width:15px;height:15px}
 .erp-app .bot-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;padding:0}
+/* Blank session: the official surface (BotChatSurface) stays mounted so the
+   composer — the only input — remains pinned to the bottom. The welcome block
+   is lifted out of the flex flow with absolute positioning, overlaying the
+   empty message area ABOVE the composer instead of splitting the pane in half
+   (which pushed the composer to the middle). */
+.erp-app .bot-body.is-blank>.bot-welcome{
+  position:absolute;inset:0;padding:16px var(--erp-gutter) 120px;
+  pointer-events:none;z-index:1;
+}
+.erp-app .bot-body.is-blank .bot-chips{pointer-events:auto}
 .erp-app .bot-conversation{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 .erp-app .bot-conversation>*{flex:1;min-height:0}
-.erp-app .bot-welcome{flex:none;text-align:center;padding:16px var(--erp-gutter) 6px;order:-1}
-.erp-app .bot-orb{width:40px;height:40px;margin:0 auto 6px}
+/* Welcome state, centred in the empty conversation area.
+   It used to sit at the very top: .bot-welcome is a sibling of the chat
+   surface inside .bot-body (a column), and both were flex:1 with the
+   welcome block ordered first, so when the session is blank the greeting
+   hugged the header instead of the middle of the pane. Growing it and
+   centring on the cross+main axis puts the orb, name and greeting where an
+   empty conversation expects them — and it collapses back to flex:none as
+   soon as the surface renders real messages. */
+.erp-app .bot-welcome{
+  /* When the session is blank the chat surface contributes nothing, so the
+     welcome block must take the whole body and centre inside it. It is the
+     only child that grows; the surface stays at content height. */
+  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
+  align-items:center;justify-content:center;
+  text-align:center;padding:16px var(--erp-gutter);
+}
+.erp-app .bot-orb{width:40px;height:40px;margin:0 0 10px;flex:none}
 .erp-app .bot-welcome b{display:block;font-size:15px;color:#1a1d38}
 .erp-app .bot-welcome-sub{display:block;margin:6px auto 0;max-width:560px;font-size:11.5px;color:#8b90a6;line-height:1.65}
 .erp-app .bot-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
@@ -1940,11 +1998,47 @@
 .erp-app .bot-tab.on{color:#4a35d0;font-weight:700;border-bottom-color:#6a54f5}
 .erp-app .bot-dr-bd{flex:1;min-height:0;overflow:auto;padding:14px var(--erp-gutter)}
 .erp-app .bot-dr-ft{flex:none;display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid #eef0f8;font-size:10.5px;color:#9aa0b4}
+/* Write-back conflict strip — sits above the footer so it cannot be scrolled
+   out of view while the user is deciding what to do. */
+.erp-app .bot-conflict{flex:none;padding:9px 16px;background:#fff8ec;border-top:1px solid #f4e4c8}
+.erp-app .bot-conflict .tx{font-size:10.5px;line-height:1.6;color:#8a5a12}
+.erp-app .bot-conflict .acts{display:flex;gap:6px;margin-top:7px}
+.erp-app .bot-conflict button{border-radius:7px;padding:4px 10px;font-size:10px;font-weight:650;cursor:pointer}
+.erp-app .bot-conflict .p{background:#b5741a;border:0;color:#fff}
+.erp-app .bot-conflict .p:hover{filter:brightness(1.08)}
+.erp-app .bot-conflict .g{background:#fff;border:1px solid #e6d4b4;color:#8a5a12}
+.erp-app .bot-conflict .g:hover{background:#fdf6ea}
+.erp-app[data-theme='dark'] .bot-conflict{background:#2b2317;border-top-color:#3d3120}
+.erp-app[data-theme='dark'] .bot-conflict .tx{color:#e0b878}
+.erp-app[data-theme='dark'] .bot-conflict .p{background:#c8871f;color:#171a2c}
+.erp-app[data-theme='dark'] .bot-conflict .g{background:#1d2136;border-color:#3d3120;color:#e0b878}
+.erp-app[data-theme='dark'] .bot-conflict .g:hover{background:#2b2317}
 .erp-app .bot-link{margin-left:auto;color:#5b46e0;font-size:11px}
 .erp-app .bot-idcard{display:flex;align-items:center;gap:10px;padding:10px;margin-bottom:12px;border:1px solid #efebff;border-radius:12px;background:linear-gradient(135deg,#f8f5ff,#fdfbff)}
-.erp-app .bot-idcard-ava{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#3f2fbe,#9b86ff);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
+/* Identity disc. The glyph used to be a CJK single character (税/账/司/军) set at
+   13px inside 34px, which at this size smears into an unreadable blob — CJK
+   strokes need roughly 20px+ to stay distinct, and there is no room for that
+   here. It is now the bot's Latin initial: one thick stroke, crisp at any size,
+   and it matches the brand avatar's monogram language. */
+.erp-app .bot-idcard-ava{
+  width:34px;height:34px;border-radius:50%;flex:none;
+  display:grid;place-items:center;color:#fff;
+  font-weight:800;font-size:15px;line-height:1;letter-spacing:0;
+  background:linear-gradient(135deg,#3f2fbe,#7c5cff 58%,#a06fe8);
+  box-shadow:0 6px 14px -8px rgba(91,70,224,.72);
+}
+/* Per-bot accent. The accent field is set on every bot in bot-data (aurora-v1..v4) but
+   had no matching rule, so all four identity cards rendered the same gradient. */
+.erp-app .bot-idcard-ava.aurora-v1{background:linear-gradient(135deg,#2e2a8f,#6a54f5 58%,#a99bff)}
+.erp-app .bot-idcard-ava.aurora-v2{background:linear-gradient(135deg,#123f6b,#2f8fd0 58%,#7fd3f2)}
+.erp-app .bot-idcard-ava.aurora-v3{background:linear-gradient(135deg,#5a2a6e,#a24fc4 58%,#e0a3f2)}
+.erp-app .bot-idcard-ava.aurora-v4{background:linear-gradient(135deg,#2f5a3e,#3f9a6a 58%,#8fd9b0)}
 .erp-app .bot-idcard b{display:block;font-size:12px;color:#1a1d38}
-.erp-app .bot-idcard span{display:block;font-size:10.5px;color:#8b90a6;margin-top:2px}
+/* Scoped to the text column: as .bot-idcard span this rule also matched the
+   avatar disc (same element type, higher specificity than .bot-idcard-ava),
+   forcing its glyph to 10.5px and adding margin-top:2px — which is why the
+   initial looked like a smeared blob and sat off-centre. */
+.erp-app .bot-idcard > div span{display:block;font-size:10.5px;color:#8b90a6;margin-top:2px}
 .erp-app .bot-field{margin-bottom:11px}
 .erp-app .bot-field>label{display:block;font-size:10.5px;color:#8b90a6;margin-bottom:4px}
 .erp-app .bot-ro{background:#fafafd;border:1px solid #f0f0f7;border-radius:9px;padding:8px 10px;color:#4a4f66;font-size:11px;line-height:1.6;white-space:pre-wrap}
@@ -1952,6 +2046,155 @@
 .erp-app .bot-input:focus{border-color:#c9bcff;box-shadow:0 0 0 3px rgba(106,84,245,.08)}
 .erp-app .bot-row{display:flex;gap:10px}
 .erp-app .bot-row .bot-field{flex:1;min-width:0}
+
+/* ================= Bot résumé pane =================
+   The drawer stopped being a flat field list: it now reads AGENTS.md and renders
+   a résumé — qualification blocks drawn from sections 3/5/9, a coverage radar
+   computed from structural counts, and fields that can be edited in place.
+   Everything here is scoped under .bot-sec / .bot-qual / .bot-radar so it cannot
+   leak into other bot-page surfaces. */
+
+/* sync badge in the identity card */
+.erp-app .bot-sync{
+  flex:none;display:inline-flex;align-items:center;gap:4px;height:19px;padding:0 7px;
+  border-radius:6px;font-size:9px;font-weight:700;white-space:nowrap;
+}
+.erp-app .bot-sync.ok{background:rgba(34,176,125,.14);color:#1a8f66}
+.erp-app .bot-sync.dirty{background:rgba(240,160,42,.16);color:#a2680f}
+.erp-app .bot-sync i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
+.erp-app[data-theme='dark'] .bot-sync.ok{background:rgba(61,220,151,.14);color:#3ddc97}
+.erp-app[data-theme='dark'] .bot-sync.dirty{background:rgba(240,160,42,.16);color:#f0a02a}
+
+/* section header with a rule that fills the remaining width */
+.erp-app .bot-sec-hd{
+  display:flex;align-items:center;gap:7px;margin-bottom:8px;
+  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#a6acc2;
+}
+.erp-app .bot-sec-hd .rule{flex:1;height:1px;background:#eef0f8}
+.erp-app .bot-sec-hd .cnt{
+  order:2;letter-spacing:0;text-transform:none;font-size:9px;font-weight:600;color:#b0b6c9;
+}
+.erp-app[data-theme='dark'] .bot-sec-hd{color:#767e9c}
+.erp-app[data-theme='dark'] .bot-sec-hd .rule{background:#242840}
+.erp-app[data-theme='dark'] .bot-sec-hd .cnt{color:#6a7290}
+
+/* qualification blocks (AGENTS.md sections 3 / 5 / 9) */
+.erp-app .bot-qual{border:1px solid #eef0f8;border-radius:11px;background:#fafafd;overflow:hidden}
+.erp-app .bot-qual+.bot-qual{margin-top:7px}
+.erp-app .bot-qual>summary{
+  display:flex;align-items:center;gap:8px;padding:9px 11px;cursor:pointer;list-style:none;
+  font-size:11px;font-weight:650;color:#3c4157;
+}
+.erp-app .bot-qual>summary::-webkit-details-marker{display:none}
+.erp-app .bot-qual>summary:hover{color:#1a1d38}
+.erp-app .bot-qual .ico{
+  width:16px;height:16px;border-radius:5px;display:grid;place-items:center;flex:none;
+  background:#efecff;color:#5b46e0;font-size:9px;font-weight:800;
+}
+.erp-app .bot-qual .chev{margin-left:auto;color:#a6acc2;font-size:9px;transition:transform .18s}
+.erp-app .bot-qual[open] .chev{transform:rotate(90deg)}
+.erp-app .bot-qual .bd{padding:0 11px 11px;font-size:10.5px;line-height:1.75;color:#5f647d;white-space:pre-wrap}
+.erp-app[data-theme='dark'] .bot-qual{background:#1a1d2e;border-color:#242840}
+.erp-app[data-theme='dark'] .bot-qual>summary{color:#c9cee6}
+.erp-app[data-theme='dark'] .bot-qual>summary:hover{color:#eef0fa}
+.erp-app[data-theme='dark'] .bot-qual .ico{background:#2a2350;color:#c4b6ff}
+.erp-app[data-theme='dark'] .bot-qual .bd{color:#9aa1bd}
+
+/* coverage radar */
+.erp-app .bot-radar{border:1px solid #eef0f8;border-radius:11px;background:#fafafd;padding:11px 11px 8px}
+.erp-app .bot-radar-top{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
+.erp-app .bot-radar-top b{font-size:11px;font-weight:700;color:#1a1d38}
+.erp-app .bot-radar-top .note{margin-left:auto;font-size:9px;color:#b0b6c9}
+.erp-app .bot-radar-wrap{display:flex;align-items:center;gap:10px}
+.erp-app .bot-radar-wrap svg{display:block;flex:none}
+.erp-app .bot-legend{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
+.erp-app .bot-legend .rl{
+  display:flex;align-items:center;gap:7px;font-size:10.5px;cursor:pointer;
+  border-radius:6px;padding:2px 3px;margin:-2px -3px;
+}
+.erp-app .bot-legend .rl:hover,.erp-app .bot-legend .rl.on{background:#f1f2f9}
+.erp-app .bot-legend .rl .dot{width:5px;height:5px;border-radius:50%;background:#6a54f5;flex:none}
+.erp-app .bot-legend .rl .n{flex:1;min-width:0;color:#5f647d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.erp-app .bot-legend .rl .v{font-weight:750;color:#1a1d38;font-variant-numeric:tabular-nums}
+.erp-app .bot-legend .rl .bar{width:30px;height:3px;border-radius:2px;background:#eceef7;overflow:hidden;flex:none}
+.erp-app .bot-legend .rl .bar i{display:block;height:100%;background:linear-gradient(90deg,#6a54f5,#a98bfb)}
+.erp-app .bot-evidence{
+  margin-top:6px;padding:8px 9px;border-radius:8px;background:#f4f5fb;border:1px solid #eef0f8;
+  font-size:9.8px;line-height:1.7;color:#767e9c;
+}
+.erp-app .bot-evidence b{color:#4a4f66;font-weight:650}
+.erp-app .radar-fill{fill:rgba(106,84,245,.13);stroke:#6a54f5;stroke-width:1.5;stroke-linejoin:round}
+.erp-app .radar-grid{fill:none;stroke:#e4e7f3;stroke-width:1}
+.erp-app .radar-spoke{stroke:#e4e7f3;stroke-width:1}
+.erp-app .radar-node{fill:#6a54f5;stroke:#fafafd;stroke-width:1.4}
+.erp-app .radar-cap{font-size:8px;fill:#a6acc2;font-weight:600}
+.erp-app[data-theme='dark'] .bot-radar{background:#1a1d2e;border-color:#242840}
+.erp-app[data-theme='dark'] .bot-radar-top b{color:#eef0fa}
+.erp-app[data-theme='dark'] .bot-radar-top .note{color:#6a7290}
+.erp-app[data-theme='dark'] .bot-legend .rl:hover,.erp-app[data-theme='dark'] .bot-legend .rl.on{background:#20243a}
+.erp-app[data-theme='dark'] .bot-legend .rl .n{color:#9aa1bd}
+.erp-app[data-theme='dark'] .bot-legend .rl .v{color:#eef0fa}
+.erp-app[data-theme='dark'] .bot-legend .rl .bar{background:#2a2f4a}
+.erp-app[data-theme='dark'] .bot-evidence{background:#20243a;border-color:#2a2f4a;color:#8b93b0}
+.erp-app[data-theme='dark'] .bot-evidence b{color:#c9cee6}
+.erp-app[data-theme='dark'] .radar-grid,.erp-app[data-theme='dark'] .radar-spoke{stroke:#2a2f4a}
+.erp-app[data-theme='dark'] .radar-node{stroke:#1a1d2e}
+.erp-app[data-theme='dark'] .radar-cap{fill:#767e9c}
+
+/* editable identity rows */
+.erp-app .bot-editable{border:1px solid #eef0f8;border-radius:11px;background:#fafafd;overflow:hidden}
+.erp-app .bot-erow{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border-bottom:1px solid #f2f3fa}
+.erp-app .bot-erow:last-child{border-bottom:0}
+.erp-app .bot-erow .lab{width:62px;flex:none;font-size:9.5px;color:#a6acc2;font-weight:650;padding-top:1px}
+.erp-app .bot-erow .val{flex:1;min-width:0;font-size:10.5px;line-height:1.7;color:#4a4f66;white-space:pre-wrap}
+.erp-app .bot-erow .ed{
+  flex:none;border:0;background:none;color:#6a54f5;cursor:pointer;
+  font-size:9.5px;font-weight:650;padding:0;
+}
+.erp-app .bot-erow .ed:hover{text-decoration:underline}
+.erp-app .bot-erow.edit-on{background:#f4f5fb;display:block}
+.erp-app .bot-erow textarea{
+  width:100%;min-height:60px;padding:7px 8px;border-radius:8px;border:1px solid #e0e3ef;
+  background:#fff;color:#3c4157;font:inherit;font-size:10.5px;line-height:1.7;resize:vertical;
+}
+.erp-app .bot-erow textarea:focus{outline:none;border-color:#c9bcff;box-shadow:0 0 0 3px rgba(106,84,245,.08)}
+.erp-app .bot-eacts{display:flex;gap:6px;margin-top:6px}
+.erp-app .bot-eacts .p{
+  border:0;border-radius:7px;padding:5px 11px;font-size:10px;font-weight:650;cursor:pointer;
+  background:#6a54f5;color:#fff;
+}
+.erp-app .bot-eacts .p:hover{filter:brightness(1.08)}
+.erp-app .bot-eacts .g{
+  border:1px solid #e0e3ef;border-radius:7px;padding:5px 11px;font-size:10px;font-weight:650;
+  cursor:pointer;background:#fff;color:#5f647d;
+}
+.erp-app .bot-eacts .g:hover{color:#1a1d38}
+.erp-app[data-theme='dark'] .bot-editable{background:#1a1d2e;border-color:#242840}
+.erp-app[data-theme='dark'] .bot-erow{border-bottom-color:#242840}
+.erp-app[data-theme='dark'] .bot-erow .lab{color:#6a7290}
+.erp-app[data-theme='dark'] .bot-erow .val{color:#b6bdcf}
+.erp-app[data-theme='dark'] .bot-erow.edit-on{background:#20243a}
+.erp-app[data-theme='dark'] .bot-erow textarea{background:#141726;border-color:#2f3550;color:#e7e9f6}
+.erp-app[data-theme='dark'] .bot-eacts .g{background:#20243a;border-color:#2f3550;color:#9aa1bd}
+.erp-app[data-theme='dark'] .bot-eacts .g:hover{color:#eef0fa}
+
+/* red-line list (append-only) */
+.erp-app .bot-reds{border:1px solid #eef0f8;border-radius:11px;background:#fafafd;overflow:hidden}
+.erp-app .bot-reds ul{margin:0;padding:10px 11px 4px 26px;font-size:10.5px;line-height:1.9;color:#4a4f66}
+.erp-app .bot-reds li::marker{color:#e25563}
+.erp-app .bot-reds .ft{padding:0 11px 11px}
+.erp-app .bot-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
+.erp-app .bot-tags .tag{
+  border:1px dashed #dfe2ee;background:none;color:#8b90a6;border-radius:6px;
+  padding:3px 7px;font-size:9px;cursor:pointer;
+}
+.erp-app .bot-tags .tag:hover{border-color:#6a54f5;color:#5b46e0;background:#f6f3ff}
+.erp-app .bot-tags .tag:disabled{opacity:.45;cursor:not-allowed;border-style:solid;color:#22b07d;border-color:#c9ead9}
+.erp-app[data-theme='dark'] .bot-reds{background:#1a1d2e;border-color:#242840}
+.erp-app[data-theme='dark'] .bot-reds ul{color:#b6bdcf}
+.erp-app[data-theme='dark'] .bot-tags .tag{border-color:#2f3550;color:#8b93b0}
+.erp-app[data-theme='dark'] .bot-tags .tag:hover{background:#2a2350;border-color:#6a54f5;color:#c4b6ff}
+.erp-app[data-theme='dark'] .bot-tags .tag:disabled{color:#3ddc97;border-color:#1d4a38}
 .erp-app .bot-hint{font-size:10.5px;color:#9aa0b4;line-height:1.6;margin-top:6px}
 .erp-app .bot-skills-hd{display:flex;align-items:center;font-size:11px;color:#8b90a6;margin-bottom:6px}
 .erp-app .bot-skills-src{margin-left:auto;color:#9aa0b4;font-size:10px}
@@ -2069,15 +2312,18 @@
 @container erp (max-width:560px){
   .erp-app .bot-role,.erp-app .bot-welcome-sub{display:none}
   .erp-app .bot-avatar{width:34px;height:34px;border-radius:11px}
-  .erp-app .bot-welcome{padding:12px var(--erp-gutter) 4px}
+  .erp-app .bot-welcome{padding:12px var(--erp-gutter)}
 }
 @container board (max-height:560px){
-  .erp-app .bot-welcome{padding:10px var(--erp-gutter) 2px}
+  .erp-app .bot-welcome{padding:10px var(--erp-gutter)}
   .erp-app .bot-orb{width:30px;height:30px;margin-bottom:4px}
   .erp-app .bot-welcome-sub{display:none}
 }
 
 .erp-app[data-theme='dark'] .bot-hd,.erp-app[data-theme='dark'] .bot-dr-hd,.erp-app[data-theme='dark'] .bot-tabs,.erp-app[data-theme='dark'] .bot-dr-ft{border-color:#242840}
+.erp-app[data-theme='dark'] .bot-tab{color:#8b93b0}
+.erp-app[data-theme='dark'] .bot-tab:hover{color:#c9cee6}
+.erp-app[data-theme='dark'] .bot-tab.on{color:#c4b6ff;border-bottom-color:#8c72ff}
 .erp-app[data-theme='dark'] .bot-name b,.erp-app[data-theme='dark'] .bot-welcome b,.erp-app[data-theme='dark'] .bot-idcard b,.erp-app[data-theme='dark'] .bot-dr-hd b,.erp-app[data-theme='dark'] .bot-cv-hd b,.erp-app[data-theme='dark'] .bot-cv-chip b,.erp-app[data-theme='dark'] .bot-skill-top b,.erp-app[data-theme='dark'] .bot-rel b{color:#eef0fa}
 .erp-app[data-theme='dark'] .bot-role,.erp-app[data-theme='dark'] .bot-session-title,.erp-app[data-theme='dark'] .bot-welcome-sub,.erp-app[data-theme='dark'] .bot-hint,.erp-app[data-theme='dark'] .bot-empty{color:#9aa0b4}
 .erp-app[data-theme='dark'] .bot-avatar-state{border-color:#171a2c}
@@ -2125,6 +2371,15 @@
 .erp-app[data-theme='dark'] .rail-hub.on .rail-hub-ico,.erp-app[data-theme='dark'] .rail-base.on .rail-base-ico{background:#2a2350;border-color:#3b3470;color:#c4b6ff}
 .erp-app[data-theme='dark'] .t1-rail.open .rail-bot .rail-label,.erp-app[data-theme='dark'] .t1-rail.open .rail-base .rail-label{color:#e6e8f5}
 .erp-app[data-theme='dark'] .rail-divider{background:#2a2e48}
+/* The separator has to lift, not darken, on the dark card: a dimmer line would
+   disappear into #171a2c, so it uses white at low alpha like the other edges. */
+.erp-app[data-theme='dark'] .rail-sep{
+  background:linear-gradient(90deg,
+    rgba(255,255,255,0) 0%,
+    rgba(255,255,255,.22) 16%,
+    rgba(255,255,255,.22) 84%,
+    rgba(255,255,255,0) 100%);
+}
 .erp-app[data-theme='dark'] .t1-rail.open .rail-bot.on{background:#1d2136}
 .erp-app[data-theme='dark'] .rail-bot-dot{border-color:#171a2c}
 .erp-app[data-theme='dark'] .rail-me-txt b{color:#eef0fa}
@@ -2141,6 +2396,10 @@
   --erp-rail-btn:38px;    /* icon button = brand tile footprint */
   --erp-rail-pad:7px;     /* white group's inner padding */
   --erp-rail-gutter:8px;  /* whitespace outside the group, both sides */
+  /* The board's own surface colour, named so the brand avatar's seam and its
+     status-dot halo can punch back to the page instead of hard-coding white
+     (which shows as a bright ring in dark mode). Overridden in the dark block. */
+  --erp-board-bg:#f6f7fb;
   --erp-rail-w:calc(var(--erp-rail-btn) + var(--erp-rail-pad) * 2 + 2px + var(--erp-rail-gutter) * 2);
   grid-template-columns:var(--erp-rail-w) minmax(0,1fr);
 }
@@ -2149,29 +2408,72 @@
   padding:12px var(--erp-rail-gutter) 18px;overflow:hidden;
   background:transparent;box-shadow:none;border-right:0;border-radius:0;transition:none;
 }
-.erp-app .t1-rail::after{
-  display:block;content:"";position:absolute;right:0;top:24px;bottom:24px;width:1px;
-  background:linear-gradient(180deg,
-    rgba(198,203,225,0) 0px,
-    rgba(198,203,225,.85) 22px,
-    rgba(198,203,225,.85) calc(100% - 34px),
-    rgba(198,203,225,0) 100%);
-}
-/* The brand tile is the group's first item: same footprint as one icon button,
-   so it sits in the same column as the page icons instead of hovering above
-   the card. */
-.erp-app .rail-logo{width:100%;flex:none;display:flex;align-items:center;justify-content:center;margin:0}
-.erp-app .rail-logo .rail-mark{
-  width:100%;height:var(--erp-rail-btn);flex:none;
-  display:grid;place-items:center;border-radius:12px;
+/* paired with the rule at the top of the file: the divider is off */
+.erp-app .t1-rail::after{display:none}
+/* ---------------- brand avatar (rail head) ----------------
+   Three nested discs: ring → board-coloured seam → gradient face. The brand
+   and the active page both used to be full-bleed saturated blocks, so they
+   fought for the same focal slot; now the brand owns a structural signature
+   (a ring) that no navigation button has, and colour only has to carry theme.
+
+   Sized off --erp-rail-btn so the footprint (46px) always fits the rail's
+   54px content box and rescales with the existing breakpoints. */
+.erp-app .rail-brand-slot{
+  flex:none;width:100%;display:flex;justify-content:center;
+  margin:2px 0 10px;
+}
+.erp-app .brand-av{
+  --brand-ring:2px;
+  --brand-gap:2px;
+  position:relative;display:grid;place-items:center;
+  width:calc(var(--erp-rail-btn) + (var(--brand-ring) + var(--brand-gap)) * 2);
+  height:calc(var(--erp-rail-btn) + (var(--brand-ring) + var(--brand-gap)) * 2);
+  border-radius:50%;
   background:linear-gradient(140deg,#3f2fbe,#7c5cff 52%,#c48bfb);
-  color:#fff;font-size:calc(var(--erp-rail-btn) * .47);font-weight:800;line-height:1;
-  letter-spacing:.02em;box-shadow:0 8px 18px -12px rgba(94,72,232,.8);
-}
-.erp-app[data-theme='dark'] .rail-logo .rail-mark{
-  background:linear-gradient(140deg,#4a37d6,#8a68ff 52%,#cfa2ff);
-  box-shadow:0 8px 18px -12px rgba(0,0,0,.8);
+  box-shadow:0 8px 18px -12px rgba(94,72,232,.8);
+  cursor:pointer;transition:transform .2s,box-shadow .2s,filter .2s;
+}
+.erp-app .brand-av:hover{transform:scale(1.04);filter:brightness(1.06)}
+.erp-app .brand-av:focus-visible{
+  outline:none;
+  box-shadow:0 0 0 2px var(--erp-board-bg),0 0 0 4px #7c5cff;
+}
+.erp-app .brand-av-gap{
+  width:calc(100% - var(--brand-ring) * 2);
+  height:calc(100% - var(--brand-ring) * 2);
+  border-radius:50%;background:var(--erp-board-bg);
+  display:grid;place-items:center;
 }
+/* The face's light end stops at #a06fe8 rather than #c48bfb: white on
+   #c48bfb is only about 2.5:1, below even the 3:1 large-text floor. */
+.erp-app .brand-av-face{
+  width:calc(100% - var(--brand-gap) * 2);
+  height:calc(100% - var(--brand-gap) * 2);
+  border-radius:50%;display:grid;place-items:center;color:#fff;
+  background:linear-gradient(140deg,#241a7a,#5b3cf0 50%,#a06fe8);
+  font-size:calc(var(--erp-rail-btn) * .58);font-weight:800;line-height:1;
+  letter-spacing:.02em;
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -8px 14px rgba(16,18,40,.18);
+}
+/* The dot is anchored on the ring at 45 degrees, not on the box corner.
+   Geometry: outer radius R = btn/2 + (ring + gap) = btn/2 + 4. The ring's
+   midline is one half-ring inside that, R - ring/2 = btn/2 + 3, and the dot's
+   CENTRE must land there along the diagonal, i.e. (btn/2 + 3)/sqrt(2) per axis.
+   Converting centre to box edge collapses to 0.0415*btn + 1.88px for
+   ring = gap = 2. Written proportionally instead of a fixed 4px so the dot
+   stays on the ring at 38 / 34 / 30 — a hard-coded inset drifts inward and
+   ends up half on the face at btn 30. */
+.erp-app .brand-dot{
+  position:absolute;
+  width:calc(var(--erp-rail-btn) * .21);
+  height:calc(var(--erp-rail-btn) * .21);
+  right:calc(var(--erp-rail-btn) * .0415 + 1.88px);
+  bottom:calc(var(--erp-rail-btn) * .0415 + 1.88px);
+  border-radius:50%;
+  border:2px solid var(--erp-board-bg);
+  background:#22c55e;
+}
+.erp-app .brand-dot.busy{background:#f0a02a}
 /* Foot lockup and brand tile share the group's width, so the column reads as
    one continuous stack: B tile → icon group → wordmark → 中/EN pill. */
 .erp-app .rail-brand{width:100%;height:36px;display:flex;align-items:center;justify-content:center;gap:0;padding:0}
@@ -2188,13 +2490,26 @@
    dead white gutter. */
 .erp-app .rail-group{width:100%;display:flex;flex-direction:column;align-items:center;gap:7px;padding:var(--erp-rail-pad);border-radius:24px;background:#fff;border:1px solid #f1f2f9;box-shadow:0 12px 26px -22px rgba(24,30,66,.7),0 1px 2px rgba(24,30,66,.035)}
 .erp-app .rail-group + .rail-group{margin-top:12px}
-.erp-app .t1-rail > .rail-group:first-of-type{flex:0 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
-.erp-app .t1-rail > .rail-group:first-of-type::-webkit-scrollbar{width:0;height:0}
+.erp-app .t1-rail > .rail-group{flex:0 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
+.erp-app .t1-rail > .rail-group::-webkit-scrollbar{width:0;height:0}
 .erp-app .rail-foot{width:100%;flex:none;display:flex;flex-direction:column;align-items:center;gap:7px;margin-bottom:2px}
 .erp-app .rail-spacer{flex:1 1 auto;min-height:0}
 .erp-app .rail-btn{width:var(--erp-rail-btn);height:var(--erp-rail-btn);border-radius:50%;display:grid;place-items:center;background:#f3f4f9;border:1px solid #e9ebf3;color:#828aa3}
 .erp-app .rail-btn.active{background:#151933;color:#fff;border-color:#151933;box-shadow:0 10px 20px -10px rgba(21,25,51,.6)}
 .erp-app .rail-btn svg{width:18px;height:18px}
+/* Group separator inside the icon card: a short hairline that marks where the
+   business pages end and the infrastructure page (底座) begins. It is inset
+   rather than full width so it reads as a grouping mark, not as a card edge,
+   and it borrows the group's own padding so it never touches the card sides. */
+.erp-app .rail-sep{
+  display:block;flex:none;width:calc(100% - 12px);
+  height:1px;margin:6px 0;border-radius:1px;
+  background:linear-gradient(90deg,
+    rgba(122,134,166,0) 0%,
+    rgba(122,134,166,.72) 16%,
+    rgba(122,134,166,.72) 84%,
+    rgba(122,134,166,0) 100%);
+}
 /* The language pill fills the rail as well: its two segments split the width
    evenly, so it no longer sits narrower than the blocks stacked above it. */
 .erp-app .rail-lang{display:flex;width:100%;justify-content:center;gap:2px;padding:2px}
@@ -2207,13 +2522,16 @@
 @container erp (max-width:900px){
   .erp-app .erp-board{--erp-rail-btn:34px}
   .erp-app .t1-rail{padding-bottom:12px}
-  .erp-app .rail-logo .rail-mark{border-radius:11px}
+  /* Below this size the monogram stops counting as WCAG large text, so the 3:1
+     large-text floor becomes a 4.5:1 body-text floor: flatten the light end of
+     the face gradient to keep white legible instead of just shrinking it. */
+  .erp-app .brand-av-face{background:linear-gradient(140deg,#241a7a,#4d31d8 60%,#7d54e0)}
   .erp-app .rail-btn svg{width:16px;height:16px}
   .erp-app .rail-lang .lang-seg{font-size:8.4px}
   .erp-app .rail-greet{display:none}
 }
 @container erp (max-width:560px){
   .erp-app .erp-board{--erp-rail-btn:30px;--erp-rail-pad:6px}
-  .erp-app .rail-logo .rail-mark{border-radius:10px}
+  .erp-app .brand-av{--brand-ring:1.5px;--brand-gap:1.5px}
   .erp-app .rail-group{border-radius:20px}
 }`