/* M20 · Claude Industrial 5.0 candidate / 工业 5.0 候选方案 — 「工位」
   One additive layer, loaded last and scoped under html.i5, so the whole candidate can be compared,
   adopted or removed as a unit. It redefines the shared --mos-* tokens (every earlier sheet already reads
   them) and then reshapes layout and components.

   Principles / 原则
   1. People in the loop — every surface names the human owner and what the assistant cannot do.
   2. Precise density — Mandarin body 14px, nothing below 12px; codes and times in tabular mono.
   3. Visible hierarchy — company (solid ink) → department lead (outlined code PR…) → personal
      assistant (dashed slot PR-01…). Dashed always means "template, nobody assigned".
   4. Truthful state — blue = interaction or confirmed access; amber = needs a person; grey = not
      connected or unknown. Green is reserved for a success a service has actually returned.
   5. Calm surfaces — cool steel-paper canvas, white work surfaces, hairlines, small radii. No glow,
      no gradients on work surfaces, no decorative telemetry.
   Local fonts only; no remote assets. Reduced motion respected. */

/* ───────────────────────── 1. Tokens ───────────────────────── */

:root.i5 {
  --mos-canvas: #F2F4F7;
  --mos-surface: #FFFFFF;
  --mos-surface-subtle: #ECF0F4;
  --mos-surface-raised: #FFFFFF;
  --mos-surface-hover: #E3E9EF;
  --mos-text: #101923;
  --mos-text-secondary: #3C4957;
  --mos-text-muted: #4F5D6B;
  --mos-border: #D6DDE5;
  --mos-border-control: #727F8C;
  --mos-accent: #1A5FB4;
  --mos-accent-hover: #154F97;
  --mos-accent-pressed: #10407C;
  --mos-accent-soft: #E5EDF8;
  --mos-on-accent: #FFFFFF;
  --mos-focus: #1A5FB4;
  --mos-danger: #A1262F;
  --mos-danger-soft: #FBEAEB;
  --mos-warning: #7A480A;
  --mos-warning-soft: #F8EDD9;
  --mos-success: #1D6240;
  --mos-success-soft: #E3F0E7;
  --mos-info: #2D5883;
  --mos-info-soft: #E7EEF6;
  --mos-scrim: rgba(12, 20, 30, .42);
  --mos-shadow-1: 0 1px 2px rgba(16, 25, 35, .06);
  --mos-shadow-2: 0 16px 40px rgba(16, 25, 35, .16), 0 2px 6px rgba(16, 25, 35, .06);

  --mos-font-ui: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif;
  --mos-radius-control: 7px;
  --mos-radius-panel: 10px;
  --mos-radius-overlay: 12px;
  --mos-sidebar: 244px;
  --mos-topbar: 52px;

  /* candidate-only tokens */
  --i5-ink: #101923;               /* company tier: solid ink */
  --i5-line: #B9C3CE;              /* organisation lines */
  --i5-grid: rgba(16, 25, 35, .045); /* drafting grid */
  --i5-rail: #F7F9FB;              /* side rails */
  --i5-nav: #E9EDF2;               /* sidebar */
  --i5-nav-active: #FFFFFF;
  --i5-code-bg: #F4F6F9;
  --i5-signal: #9A5B0C;            /* needs a person */
  --i5-off: #7A8794;               /* not connected */
  --i5-body: 400 14px/22px var(--mos-font-ui);
  --i5-ui: 400 13px/20px var(--mos-font-ui);
  --i5-caption: 400 12px/18px var(--mos-font-ui);
  /* Chrome does not resolve ui-monospace and SF Mono is not exposed to it; codes use the UI face with
     tabular figures, timestamps use installed monospace faces. */
  --i5-mono: 600 11px/16px var(--mos-font-ui);
  --i5-font-num: "SF Mono", Menlo, "Cascadia Mono", Consolas, "Roboto Mono", "Liberation Mono", monospace;
}

:root.i5[data-theme="dark"] {
  --mos-canvas: #0E1318;
  --mos-surface: #151C23;
  --mos-surface-subtle: #1A222B;
  --mos-surface-raised: #1F2832;
  --mos-surface-hover: #28333E;
  --mos-text: #E8EDF2;
  --mos-text-secondary: #BBC6D1;
  --mos-text-muted: #A7B3BF;
  --mos-border: #2B3642;
  --mos-border-control: #7E8C9A;
  --mos-accent: #80B4EF;
  --mos-accent-hover: #A2C8F5;
  --mos-accent-pressed: #629FE3;
  --mos-accent-soft: #15304E;
  --mos-on-accent: #0A1A2C;
  --mos-focus: #A2C8F5;
  --mos-danger: #F0A3AA;
  --mos-danger-soft: #37202A;
  --mos-warning: #E8C07F;
  --mos-warning-soft: #34291A;
  --mos-success: #95CDA9;
  --mos-success-soft: #1C3328;
  --mos-info: #A5C6E8;
  --mos-info-soft: #1E2D3D;
  --mos-scrim: rgba(0, 0, 0, .62);
  --mos-shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --mos-shadow-2: 0 18px 44px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --i5-ink: #E8EDF2;
  --i5-line: #3A4755;
  --i5-grid: rgba(232, 237, 242, .035);
  --i5-rail: #121920;
  --i5-nav: #0B1015;
  --i5-nav-active: #1F2832;
  --i5-code-bg: #1A222B;
  --i5-signal: #E8C07F;
  --i5-off: #8794A1;
}

@media (prefers-color-scheme: dark) {
  :root.i5:not([data-theme="light"]) {
    --mos-canvas: #0E1318;
    --mos-surface: #151C23;
    --mos-surface-subtle: #1A222B;
    --mos-surface-raised: #1F2832;
    --mos-surface-hover: #28333E;
    --mos-text: #E8EDF2;
    --mos-text-secondary: #BBC6D1;
    --mos-text-muted: #A7B3BF;
    --mos-border: #2B3642;
    --mos-border-control: #7E8C9A;
    --mos-accent: #80B4EF;
    --mos-accent-hover: #A2C8F5;
    --mos-accent-pressed: #629FE3;
    --mos-accent-soft: #15304E;
    --mos-on-accent: #0A1A2C;
    --mos-focus: #A2C8F5;
    --mos-danger: #F0A3AA;
    --mos-danger-soft: #37202A;
    --mos-warning: #E8C07F;
    --mos-warning-soft: #34291A;
    --mos-success: #95CDA9;
    --mos-success-soft: #1C3328;
    --mos-info: #A5C6E8;
    --mos-info-soft: #1E2D3D;
    --mos-scrim: rgba(0, 0, 0, .62);
    --mos-shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --mos-shadow-2: 0 18px 44px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
    --i5-ink: #E8EDF2;
    --i5-line: #3A4755;
    --i5-grid: rgba(232, 237, 242, .035);
    --i5-rail: #121920;
    --i5-nav: #0B1015;
    --i5-nav-active: #1F2832;
    --i5-code-bg: #1A222B;
    --i5-signal: #E8C07F;
    --i5-off: #8794A1;
  }
}

/* ───────────────────────── 2. Base ───────────────────────── */

.i5 body { background: var(--mos-canvas); color: var(--mos-text); font: var(--i5-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "tnum" 1; }
.i5 :focus-visible { outline: 2px solid var(--mos-focus); outline-offset: 2px; }
.i5 h1, .i5 h2, .i5 h3, .i5 h4 { letter-spacing: 0; }

/* Shared primitives introduced by the candidate markup */
.i5 .i5-code {
  display: inline-grid; place-items: center; flex: none; min-width: 24px; height: 18px; padding: 0 5px;
  font: var(--i5-mono); letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--mos-text-secondary);
  background: var(--i5-code-bg); border: 1px solid var(--mos-border); border-radius: 4px;
}
.i5 .i5-tier-chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; flex: none;
  font: 600 12px/18px var(--mos-font-ui); letter-spacing: .02em; white-space: nowrap;
  color: var(--mos-text-secondary); border: 1px solid var(--mos-border-control); border-radius: 4px;
}
.i5 .i5-tier-chip--company { color: var(--mos-surface); background: var(--i5-ink); border-color: var(--i5-ink); }
.i5 .i5-tier-chip--personal { border-style: dashed; }

/* Buttons and controls: 36px controls, 40px primary, compact but touchable */
.i5 .btn {
  min-height: 36px; padding: 7px 14px; border-radius: var(--mos-radius-control);
  font: 500 13px/20px var(--mos-font-ui); letter-spacing: 0;
  background: var(--mos-surface); color: var(--mos-text); border: 1px solid var(--mos-border-control);
  box-shadow: none; transition: background var(--mos-dur-hover) var(--mos-ease), border-color var(--mos-dur-hover) var(--mos-ease);
}
.i5 .btn:hover:not(:disabled) { background: var(--mos-surface-hover); border-color: var(--mos-text-secondary); }
.i5 .btn:active:not(:disabled) { background: var(--mos-surface-subtle); }
.i5 .btn svg { width: 16px; height: 16px; }
.i5 :is(.chat-new-button, .btn--primary, .chat-send, .work-primary, .login__form button[type="submit"]):not(:disabled) {
  background: var(--mos-accent); color: var(--mos-on-accent); border-color: var(--mos-accent);
}
.i5 :is(.chat-new-button, .btn--primary, .chat-send, .work-primary, .login__form button[type="submit"]):hover:not(:disabled) { background: var(--mos-accent-hover); border-color: var(--mos-accent-hover); color: var(--mos-on-accent); }
.i5 :is(.chat-new-button, .btn--primary, .chat-send, .work-primary, .login__form button[type="submit"]):active:not(:disabled) { background: var(--mos-accent-pressed); border-color: var(--mos-accent-pressed); }
.i5 .btn:disabled, .i5 .btn[disabled] { background: var(--mos-surface-subtle); color: var(--mos-text-muted); border-color: var(--mos-border); opacity: 1; cursor: not-allowed; }
.i5 .btn--ghost { background: transparent; }
.i5 :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  font: var(--i5-ui); color: var(--mos-text); background: var(--mos-surface);
  border: 1px solid var(--mos-border-control); border-radius: var(--mos-radius-control);
}
.i5 :is(input, select, textarea):focus-visible { outline: 2px solid var(--mos-focus); outline-offset: 1px; border-color: var(--mos-focus); }

/* ───────────────────────── 3. Shell ───────────────────────── */

.i5 .shell { grid-template-columns: var(--mos-sidebar) minmax(0, 1fr); grid-template-rows: var(--mos-topbar) 1fr auto; min-height: 100vh; min-height: 100dvh; background: var(--mos-canvas); }
/* The sidebar column keeps its surface for the full page height, even past the sticky panel. */
@media (min-width: 1200px) {
  .i5[data-auth-state="authenticated"] .shell:not([data-nav-collapsed="true"]):not([data-cortex-wallboard="true"]) {
    background: linear-gradient(to right, var(--i5-nav) calc(var(--mos-sidebar) - 1px), var(--mos-border) calc(var(--mos-sidebar) - 1px), var(--mos-border) var(--mos-sidebar), var(--mos-canvas) var(--mos-sidebar));
  }
  .i5 .shell[data-nav-collapsed="true"] { grid-template-columns: 0 minmax(0, 1fr); }
  .i5 .shell[data-nav-collapsed="true"] > .nav { visibility: hidden; width: 0; padding: 0; border: 0; overflow: hidden; }
}
/* Wallboard: the board takes the whole screen (earlier sheets hide nav/topbar; keep their grid). */
.i5 .shell[data-cortex-wallboard="true"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "main" "footer"; }
.i5 .shell[data-cortex-wallboard="true"] > .main { padding: 20px 28px !important; }

/* Sidebar: full height and sticky, so its surface never ends mid-page (M19 defect on long pages). */
.i5 .nav {
  width: auto; min-width: 0; position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 10px 12px; gap: 14px; background: var(--i5-nav); border-right: 1px solid var(--mos-border);
  scrollbar-width: thin;
}
.i5 .nav__brand { padding: 2px 10px 0; min-height: 32px; gap: 9px; }
.i5 .nav__brand img { width: 26px; height: 26px; }
.i5 .nav__brand strong { font: 700 19px/24px var(--mos-font-ui); letter-spacing: .01em; }
.i5 #m8-navigation { gap: 14px; }

.i5 .m13-company {
  margin: 0; padding: 9px 10px; gap: 10px; align-items: center;
  background: var(--mos-surface); border: 1px solid var(--mos-border); border-radius: 8px;
}
.i5 .m17-company-glyph { width: 28px; height: 28px; border-radius: 6px; background: var(--mos-surface-subtle); color: var(--mos-text-secondary); }
.i5 .m17-company-glyph svg { width: 16px; height: 16px; }
.i5 .m13-company strong { font: 600 13px/18px var(--mos-font-ui); }
.i5 .m18-review-label { display: inline-block; margin-top: 2px; padding: 0 5px; font: 600 12px/18px var(--mos-font-ui); color: var(--mos-warning); background: var(--mos-warning-soft); border-radius: 3px; }

.i5 .m13-nav-group { gap: 1px; }
.i5 .i5-tier-label, .i5 .m13-nav-label {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 4px; padding: 0 10px;
  font: 600 12px/16px var(--mos-font-ui); letter-spacing: .06em; color: var(--mos-text-muted); text-transform: none;
}
.i5 .i5-tier-count { font: var(--i5-mono); letter-spacing: .02em; }

.i5 .m13-nav-link {
  position: relative; min-height: 34px; padding: 6px 10px; gap: 10px; border-radius: 6px; border: 0;
  font: 400 14px/20px var(--mos-font-ui); color: var(--mos-text-secondary); background: transparent;
}
.i5 .m13-nav-link > span:not(.agent-identity):not(.i5-code) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.i5 .m13-nav-link > svg { width: 18px; height: 18px; color: var(--mos-text-muted); }
.i5 .m13-nav-link:hover { background: color-mix(in srgb, var(--mos-surface) 60%, transparent); color: var(--mos-text); }
.i5 .m13-nav-link[aria-current="page"] {
  background: var(--i5-nav-active); color: var(--mos-text); font-weight: 600;
  box-shadow: 0 0 0 1px var(--mos-border), var(--mos-shadow-1);
}
.i5 .m13-nav-link[aria-current="page"]::before {
  content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 2px 2px 0; background: var(--mos-accent);
}
.i5 .m13-nav-link[aria-current="page"]::after { display: none; }
/* A page owned by a department but not its workspace: a quiet marker, not a second highlight. */
.i5 .m13-nav-link.is-active:not([aria-current="page"]) { background: transparent; box-shadow: none; color: var(--mos-text); }
.i5 .m13-nav-link.is-active:not([aria-current="page"])::before { content: ""; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 3px; background: var(--mos-border-control); border-radius: 0 2px 2px 0; }
.i5 .m13-nav-link .i5-code { height: 17px; min-width: 22px; font-size: 10px; background: transparent; }
.i5 .m13-nav-link[aria-current="page"] .i5-code { color: var(--mos-accent); border-color: color-mix(in srgb, var(--mos-accent) 45%, var(--mos-border)); }
.i5 .m13-nav-link.is-locked { color: var(--mos-text-muted); }
.i5 .m13-nav-link.is-locked .agent-avatar { filter: grayscale(1); opacity: .55; }
.i5 .m13-nav-link .agent-avatar--24 { width: 24px; height: 24px; border-radius: 6px; background: var(--mos-surface); box-shadow: inset 0 0 0 1px var(--mos-border); }
.i5 .m13-nav-lock { opacity: .8; }

/* Company tier: Company Command reads as the head of the tree. */
.i5 .i5-tier--company .m13-nav-link[data-agent-id="cortex"] .agent-avatar { box-shadow: inset 0 0 0 1.5px var(--i5-ink); }
/* Department tier: a thin organisation line joins the eight leads under the company. */
.i5 .i5-tier--department { position: relative; }
.i5 .i5-tier--department::before {
  content: ""; position: absolute; left: 22px; top: 26px; bottom: 17px; width: 1px; background: var(--i5-line);
}
.i5 .i5-tier--department .m13-nav-link .agent-identity { position: relative; z-index: 1; }

.i5 .m13-nav-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--mos-border); }
.i5 .m13-nav-note { display: flex; align-items: center; gap: 6px; margin: 10px 10px 0; font: var(--i5-caption); color: var(--mos-text-muted); }

/* Topbar */
.i5 .topbar {
  height: var(--mos-topbar); min-height: var(--mos-topbar); margin: 0; padding: 0 20px; gap: 6px;
  background: color-mix(in srgb, var(--mos-canvas) 92%, transparent); border-bottom: 1px solid var(--mos-border);
  position: sticky; top: 0; z-index: var(--mos-z-sticky); backdrop-filter: saturate(1.2) blur(6px);
}
.i5 .topbar__context, .i5 #route-context { font: 600 13px/20px var(--mos-font-ui); color: var(--mos-text); letter-spacing: 0; }
.i5 .topbar .icon-btn { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 7px; border-radius: 7px; color: var(--mos-text-secondary); }
.i5 .topbar .icon-btn:hover { background: var(--mos-surface-hover); color: var(--mos-text); }
.i5 .search-trigger {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; min-height: 34px; min-width: 240px; padding: 0 8px 0 10px;
  border: 1px solid var(--mos-border); border-radius: 7px; background: var(--mos-surface); color: var(--mos-text-muted);
  font: var(--i5-ui);
}
.i5 .search-trigger:hover { border-color: var(--mos-border-control); background: var(--mos-surface); }
.i5 .search-trigger__label { flex: 1; text-align: left; }
.i5 .search-trigger kbd { font: var(--i5-mono); padding: 1px 5px; border: 1px solid var(--mos-border); border-radius: 4px; background: var(--mos-surface-subtle); color: var(--mos-text-muted); }
.i5 #refresh .icon-btn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i5 .activity-trigger { height: 30px; min-height: 30px; padding: 0 10px; border-radius: 15px; font: var(--i5-caption); border: 1px solid var(--mos-border); background: var(--mos-surface); color: var(--mos-text-secondary); }
.i5 .profile-menu__panel { border-radius: 10px; border: 1px solid var(--mos-border); box-shadow: var(--mos-shadow-2); background: var(--mos-surface-raised); }

/* workplace.css pins .main padding with !important (0,2,1); the candidate needs its own rhythm.
   Signed-out pages keep their own full-bleed layout. */
.i5[data-auth-state="authenticated"] .shell > .main { padding: 18px 22px 22px !important; }
.i5 .footer { display: none; }

/* ───────────────────────── 4. Department & command workspace ───────────────────────── */

.i5 .agent-chat { --i5-work-inset: 20px; font: var(--i5-body); }
.i5 .agent-chat .chat-heading { padding: 0 0 14px; gap: 16px; align-items: center; }
.i5 .agent-chat .chat-heading-title { gap: 12px; }
.i5 .agent-chat .chat-heading-title > .agent-identity .agent-avatar--40 { width: 44px; height: 44px; border-radius: 10px; background: var(--mos-surface); box-shadow: inset 0 0 0 1px var(--mos-border); }
.i5 .agent-chat[data-agent="cortex"] .chat-heading-title > .agent-identity .agent-avatar--40 { box-shadow: inset 0 0 0 2px var(--i5-ink); }
.i5 .agent-chat .chat-heading-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.i5 .agent-chat .chat-heading h1 { font: 600 22px/30px var(--mos-font-ui); letter-spacing: 0; margin: 0; }
.i5 .agent-chat .chat-role-label.i5-tier-line { display: inline-flex; align-items: center; gap: 6px; font: var(--i5-caption); color: var(--mos-text-muted); letter-spacing: 0; text-transform: none; }
.i5 .agent-chat .chat-heading p { margin: 2px 0 0; font: var(--i5-ui); color: var(--mos-text-secondary); }
.i5 .agent-chat .chat-heading-actions { gap: 8px; }
.i5 .agent-chat .chat-heading-actions .btn { min-height: 36px; }

/* The workspace fills the viewport and the conversation scrolls inside it, so the composer and the rail
   stay in view all day. app.mjs reads a non-"none" max-height as "internal scroll" and keeps that working. */
.i5 .agent-chat .chat-workspace {
  grid-template-columns: minmax(0, 1fr) clamp(270px, 25%, 320px); border: 1px solid var(--mos-border); border-radius: var(--mos-radius-panel);
  background: var(--mos-surface); box-shadow: var(--mos-shadow-1);
  height: calc(100dvh - var(--mos-topbar) - 124px); min-height: 600px;
}
.i5 .agent-chat .chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; container: task / inline-size; }
.i5 .agent-chat .chat-main > .chat-messages { flex: 1 1 auto; min-height: 0; max-height: 100%; overflow-y: auto; }
.i5 .agent-chat .work-rail { min-height: 0; overflow-y: auto; }
/* Until there is a real conversation, the start area uses normal page flow. The app's "follow latest"
   logic would otherwise scroll an overflowing empty state to its bottom and hide the heading on short
   or narrow screens. Internal scrolling returns as soon as messages exist. */
.i5 .agent-chat .chat-workspace:has(.chat-messages > .chat-empty) { height: auto; min-height: 0; }
.i5 .agent-chat .chat-main > .chat-messages:has(> .chat-empty) { flex: 0 0 auto; max-height: none; overflow: visible; }
.i5 .agent-chat .chat-session-bar { min-height: 44px; padding: 0 var(--i5-work-inset); border-bottom: 1px solid var(--mos-border); background: var(--mos-surface); }
.i5 .agent-chat .chat-history > summary, .i5 .agent-chat .chat-provider > summary { font: var(--i5-ui); color: var(--mos-text-secondary); }
.i5 .agent-chat .chat-history-count { font: var(--i5-mono); }

/* Team strip: lead → personal assistants, as an organisation band. */
.i5 .work-team-overview { padding: 12px var(--i5-work-inset); background: var(--i5-rail); border-bottom: 1px solid var(--mos-border); }
.i5 .work-team-topline { margin-bottom: 10px; gap: 6px 12px; }
.i5 .work-team-topline h2 { display: flex; align-items: center; gap: 8px; font: 600 13px/20px var(--mos-font-ui); letter-spacing: 0; color: var(--mos-text); }
.i5 .work-team-topline > span { font: var(--i5-caption); color: var(--mos-text-muted); }
.i5 .work-team-cards { gap: 8px; }
.i5 .work-helper-card {
  position: relative; align-items: center; gap: 10px; padding: 9px 10px; min-height: 60px;
  background: var(--mos-surface); border: 1px dashed var(--mos-border-control); border-radius: 8px; box-shadow: none;
}
.i5 .work-helper-card:hover { border-style: solid; border-color: var(--mos-accent); background: var(--mos-surface); }
.i5 .work-helper-title strong { font: 600 13px/20px var(--mos-font-ui); }
.i5 .work-helper-purpose { font: var(--i5-caption); color: var(--mos-text-secondary); }
.i5 .work-helper-card small { font: 500 12px/18px var(--mos-font-ui); color: var(--mos-text-muted); letter-spacing: .02em; }
.i5 .work-helper-request-label { letter-spacing: 0; }
.i5 .work-team-lineage { margin-top: 8px !important; font: var(--i5-caption); color: var(--mos-text-muted); gap: 6px; }
.i5 .work-team-lineage svg { width: 14px; height: 14px; }

.i5 .work-command-departments { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.i5 .work-command-department {
  gap: 8px; min-height: 42px; padding: 6px 8px; font: 500 13px/18px var(--mos-font-ui); color: var(--mos-text);
  background: var(--mos-surface); border: 1px solid var(--mos-border); border-radius: 7px;
}
.i5 .work-command-department:hover { border-color: var(--mos-accent); }
.i5 .work-command-department > span:nth-of-type(2) { flex: 1; min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.i5 .work-command-department .i5-code { margin-left: auto; }
/* The whole tile is the link; a trailing arrow cost the space long English names need. */
.i5 .work-command-department > span[aria-hidden="true"]:last-child { display: none; }

/* Messages and the start area */
.i5 .agent-chat .chat-messages { padding: 22px var(--i5-work-inset); }
.i5 .agent-chat .chat-empty.i5-start {
  display: block; max-width: none; margin: 0; text-align: left;
}
.i5 .agent-chat .i5-start-main { min-width: 0; }
.i5 .agent-chat .chat-empty .chat-empty-overline { font: 600 12px/18px var(--mos-font-ui); letter-spacing: .04em; color: var(--mos-text-muted); text-transform: none; margin: 0 0 6px; }
.i5 .agent-chat .chat-empty h2 { font: 600 26px/36px var(--mos-font-ui); letter-spacing: 0; margin: 0 0 6px; color: var(--mos-text); }
.i5 .agent-chat .chat-empty > .i5-start-main > p:not(.chat-empty-overline):not(.i5-start-label) { font: var(--i5-body); color: var(--mos-text-secondary); margin: 0 0 18px; max-width: 620px; }
.i5 .agent-chat .i5-start-label { font: var(--i5-caption); color: var(--mos-text-muted); margin: 0 0 8px; }
.i5 .agent-chat .chat-starters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.i5 .agent-chat .chat-starters button {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px;
  text-align: left; font: var(--i5-ui); color: var(--mos-text); background: var(--mos-surface);
  border: 1px solid var(--mos-border); border-radius: 8px; box-shadow: none;
}
.i5 .agent-chat .chat-starters button:hover:not(:disabled) { border-color: var(--mos-accent); background: color-mix(in srgb, var(--mos-accent-soft) 40%, var(--mos-surface)); }
.i5 .agent-chat .chat-starters button > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.i5 .agent-chat .chat-starter-icon { display: grid !important; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 7px; background: var(--mos-surface-subtle); color: var(--mos-accent); }
.i5 .agent-chat .chat-starter-arrow { flex: none; color: var(--mos-text-muted); }
.i5 .agent-chat .chat-data-link { margin-top: 8px; padding: 8px 0; font: var(--i5-ui); font-size: 13px !important; color: var(--mos-accent); }

/* Native disclosure keeps truthful setup/access details one keyboard action away, without a
   competing third column. It stays available in both empty and active conversations. */
.i5 .i5-conditions { flex: none; margin: 0 var(--i5-work-inset); border-top: 1px solid var(--mos-border); background: var(--mos-surface); }
.i5 .i5-conditions > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; list-style: none; cursor: pointer; font: var(--i5-caption); color: var(--mos-text-secondary); }
.i5 .i5-conditions > summary::-webkit-details-marker { display: none; }
.i5 .i5-conditions > summary:hover { color: var(--mos-accent); }
.i5 .i5-conditions-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.i5 .i5-conditions-title svg { width: 15px; height: 15px; flex: none; }
.i5 .i5-conditions-hint { margin-left: auto; text-align: right; color: var(--mos-text-muted); }
.i5 .i5-conditions-chevron { display: flex; flex: none; }
.i5 .i5-conditions-chevron svg { width: 14px; height: 14px; }
.i5 .i5-conditions[open] .i5-conditions-chevron { transform: rotate(180deg); }
.i5 .i5-conditions dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0 0 12px; padding: 4px 12px; border: 1px solid var(--mos-border); border-radius: 8px; background: var(--i5-rail); }
.i5 .i5-conditions dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 0; }
.i5 .i5-conditions dt { font: var(--i5-caption); color: var(--mos-text-muted); }
.i5 .i5-conditions dd { display: flex; align-items: flex-start; gap: 7px; margin: 0; font: 500 12px/18px var(--mos-font-ui); color: var(--mos-text); }
.i5 .i5-conditions dd i { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; }
.i5 .i5-conditions [data-state="on"] dd i { background: var(--mos-accent); }
.i5 .i5-conditions [data-state="pending"] dd i { border: 2px solid var(--i5-signal); }
.i5 .i5-conditions [data-state="off"] dd i { background: transparent; border: 1.5px dashed var(--i5-off); }
.i5 .i5-conditions [data-state="off"] dd { color: var(--mos-text-secondary); }

/* Conversation */
.i5 .agent-chat .chat-message { max-width: 860px; font: var(--i5-body); }
.i5 .agent-chat .chat-message-author strong { font: 600 13px/20px var(--mos-font-ui); }
.i5 .agent-chat .chat-message.is-user .chat-message-body { background: var(--mos-surface-subtle); border-radius: 10px; }
.i5 .agent-chat .chat-plan { border: 1px solid var(--mos-border); border-radius: 9px; background: var(--mos-surface); }
.i5 .agent-chat .chat-tag { font: var(--i5-caption); }

/* Composer: anchored, calm, obvious primary action */
.i5 .agent-chat .chat-composer-area { padding: 0 var(--i5-work-inset) 14px; border-top: 0; background: var(--mos-surface); }
.i5 .agent-chat .chat-composer { max-width: none; padding: 10px 12px 8px; border: 1px solid var(--mos-border-control); border-radius: 10px; background: var(--mos-surface); box-shadow: none; }
.i5 .agent-chat .chat-composer:focus-within { border-color: var(--mos-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mos-focus) 18%, transparent); }
.i5 .agent-chat .chat-composer label { font: 600 12px/18px var(--mos-font-ui); color: var(--mos-text-muted); }
.i5 .agent-chat .chat-composer textarea { font: var(--i5-body); border: 0; background: transparent; min-height: 48px; resize: vertical; padding: 4px 0; }
.i5 .agent-chat .chat-composer textarea:focus-visible { outline: none; }
.i5 .agent-chat .chat-composer-tools > span { font: var(--i5-caption); color: var(--mos-text-muted); }
.i5 .agent-chat .chat-send { min-height: 36px; padding: 6px 16px; }
.i5 .agent-chat .chat-send span, .i5 .agent-chat .chat-send svg { color: inherit; opacity: 1; }
.i5 .agent-chat .chat-composer-note { max-width: none; margin: 6px 0 0; font: var(--i5-caption); color: var(--mos-text-muted); text-align: left; }

/* Work rail */
.i5 .work-rail { background: var(--i5-rail); border-left: 1px solid var(--mos-border); }
.i5 .work-rail-heading { min-height: 44px; padding: 0 16px; font: 600 12px/18px var(--mos-font-ui); letter-spacing: .04em; color: var(--mos-text-muted); border-bottom: 1px solid var(--mos-border); }
.i5 .work-rail-tabs { margin: 10px 12px 0; padding: 3px; gap: 2px; background: var(--mos-surface-subtle); border: 1px solid var(--mos-border); border-radius: 8px; }
.i5 .work-rail-tabs [role="tab"] { min-height: 30px; font: 500 13px/18px var(--mos-font-ui); color: var(--mos-text-secondary); border-radius: 6px; }
.i5 .work-rail-tabs [role="tab"][aria-selected="true"] { background: var(--mos-surface); color: var(--mos-text); font-weight: 600; box-shadow: 0 0 0 1px var(--mos-border), var(--mos-shadow-1); }
.i5 .work-rail-panel { padding: 14px 16px; }
.i5 .chat-workspace:has(.chat-empty) .work-rail-panel { flex: 0 0 auto; }
.i5 .work-section-heading h3 { font: 600 13px/20px var(--mos-font-ui); }
.i5 .work-muted-tag { font: var(--i5-caption); padding: 0 6px; border: 1px solid var(--mos-border); border-radius: 4px; color: var(--mos-text-muted); background: var(--mos-surface); }
.i5 .work-quiet-copy, .i5 .work-rail-empty p { font: var(--i5-caption); color: var(--mos-text-secondary); }
.i5 .work-rail-empty strong { font: 600 13px/20px var(--mos-font-ui); }
.i5 .work-guardrail, .i5 .work-rail-footer { font: var(--i5-caption); color: var(--mos-text-muted); }
.i5 .work-rail-footer { border-top: 1px solid var(--mos-border); padding: 10px 16px; }
.i5 .work-department-list a, .i5 .work-department-list > div { border-radius: 7px; }
.i5 .work-authority-steps strong { font: 600 13px/20px var(--mos-font-ui); }
.i5 .work-authority-steps p { font: var(--i5-caption); }
.i5 .work-authority-steps li > span { font: var(--i5-mono); }
.i5 .activity-workspace-heading, .i5 .activity-muted { font: var(--i5-caption); }

/* Dialogs (assistant request, schedule, data) */
.i5 .work-dialog { border: 1px solid var(--mos-border); border-radius: var(--mos-radius-overlay); box-shadow: var(--mos-shadow-2); background: var(--mos-surface-raised); color: var(--mos-text); }
.i5 .work-dialog::backdrop { background: var(--mos-scrim); }
.i5 .work-dialog header { border-bottom: 1px solid var(--mos-border); }
.i5 .work-dialog header p { font: 600 12px/18px var(--mos-font-ui); letter-spacing: .04em; color: var(--mos-text-muted); }
.i5 .work-dialog h2 { font: 600 18px/26px var(--mos-font-ui); }
.i5 .work-draft-form label { font: 600 12px/18px var(--mos-font-ui); color: var(--mos-text-secondary); }
.i5 .work-draft-form :is(input, select, textarea) { font: var(--i5-ui); font-weight: 400; min-height: 36px; }
.i5 .work-dialog-note { font: var(--i5-caption); background: var(--mos-warning-soft); color: var(--mos-text); border: 1px solid color-mix(in srgb, var(--mos-warning) 30%, var(--mos-border)); border-radius: 8px; }
.i5 .work-dialog-note svg { color: var(--mos-warning); }
.i5 .work-form-intro { font: var(--i5-ui); }

/* ───────────────────────── 5. Operations board & wallboard ───────────────────────── */

.i5 .cx { font: var(--i5-body); }
.i5 .cx-header { padding: 0 0 12px; }
.i5 .cx-header h1 { font: 600 22px/30px var(--mos-font-ui); letter-spacing: 0; }
.i5 .cx-header h1 span { font: var(--i5-ui); color: var(--mos-text-secondary); margin-left: 12px; }
.i5 .cx-eyebrow { font: 600 12px/18px var(--mos-font-ui); letter-spacing: .04em; color: var(--mos-text-muted); }
.i5 .cx-view-control { border: 1px solid var(--mos-border); border-radius: 8px; background: var(--mos-surface-subtle); padding: 3px; }
.i5 .cx-view-control button { border-radius: 6px; font: 500 13px/18px var(--mos-font-ui); }
.i5 .cx-view-control button[aria-pressed="true"] { background: var(--mos-surface); box-shadow: 0 0 0 1px var(--mos-border); }
.i5 .cx-statusbar { border: 1px solid var(--mos-border); border-radius: 8px; background: var(--i5-rail); font: var(--i5-caption); color: var(--mos-text-secondary); padding: 8px 14px; }
.i5 .cx-status-dot { background: transparent !important; border: 1.5px dashed var(--i5-off); }
.i5 .cx-facts { gap: 10px; }
.i5 .cx-facts article { border: 1px solid var(--mos-border); border-radius: var(--mos-radius-panel); background: var(--mos-surface); box-shadow: none; padding: 14px 16px; }
.i5 .cx-facts article > div span { font: 600 12px/18px var(--mos-font-ui); color: var(--mos-text-muted); }
.i5 .cx-facts strong { font: 600 28px/36px var(--i5-font-num); letter-spacing: -.02em; }
.i5 .cx-facts small { font: var(--i5-caption); color: var(--mos-text-muted); }
.i5 .cx-panel { border: 1px solid var(--mos-border); border-radius: var(--mos-radius-panel); background: var(--mos-surface); box-shadow: none; }
.i5 .cx-panel-head h2 { font: 600 14px/20px var(--mos-font-ui); }
.i5 .cx-index { font: var(--i5-mono); color: var(--mos-text-muted); }
.i5 .cx-meta { font: var(--i5-caption); color: var(--mos-text-muted); }
.i5 .cx-map { background-image: linear-gradient(var(--i5-grid) 1px, transparent 1px), linear-gradient(90deg, var(--i5-grid) 1px, transparent 1px); background-size: 24px 24px; }
.i5 .cx-hub { border: 1.5px solid var(--i5-ink); background: var(--mos-surface); color: var(--mos-text); border-radius: 9px; }
.i5 .cx-hub small { font: var(--i5-caption); color: var(--mos-text-secondary); }
.i5 .cx-hub-access { font: 600 12px/18px var(--mos-font-ui); letter-spacing: .04em; color: var(--mos-text-muted); }
.i5 .cx-node { border: 1px solid var(--mos-border); border-radius: 9px; background: var(--mos-surface); box-shadow: none; }
.i5 .cx-node:hover { border-color: var(--mos-accent); }
.i5 .cx-node[aria-pressed="true"] { border-color: var(--mos-accent); box-shadow: 0 0 0 1px var(--mos-accent); background: color-mix(in srgb, var(--mos-accent-soft) 45%, var(--mos-surface)); }
.i5 .cx-node strong { font: 600 14px/20px var(--mos-font-ui); }
.i5 .cx-node-purpose { font: var(--i5-caption); color: var(--mos-text-secondary); }
.i5 .cx-state { font: var(--i5-caption); color: var(--mos-text-secondary); }
.i5 .cx-node-foot { font: var(--i5-caption); color: var(--mos-text-muted); }
.i5 .cx-node-foot:empty { display: none; }
.i5 .cx-map-key { font: var(--i5-caption); color: var(--mos-text-muted); }
.i5 .cx-node[data-state="offline"] .cx-state i, .i5 .cx-node[data-state="locked"] .cx-state i { background: transparent; border: 1.5px dashed var(--i5-off); }
.i5 .cx-badge { font: var(--i5-caption); border-radius: 4px; }
.i5 .cx-ladder li { font: var(--i5-ui); }
.i5 .cx-footnote, .i5 .cx-summary, .i5 .cx-detail dt { font: var(--i5-caption); }
.i5 .cx-detail dd { font: 500 12px/18px var(--mos-font-ui); }
.i5 .cx-tabs button { font: 500 13px/18px var(--mos-font-ui); border-radius: 6px; }
.i5 .cx-empty h3 { font: 600 14px/20px var(--mos-font-ui); }
.i5 .cx-empty p { font: var(--i5-caption); }
.i5 .cx-footer { font: var(--i5-caption); color: var(--mos-text-muted); }
.i5 .activity-board { border: 1px solid var(--mos-border); border-radius: 8px; background: var(--mos-surface); padding: 8px 14px; margin-bottom: 12px; font: var(--i5-caption); }

/* Wallboard: meeting-room legible, calm, dark-friendly. */
.i5 .shell[data-cortex-wallboard="true"] .cx[data-mode="wallboard"] { font-size: 15px; }
.i5 .cx[data-mode="wallboard"] .cx-header h1 { font-size: 30px; line-height: 40px; }
.i5 .cx[data-mode="wallboard"] .cx-facts strong { font-size: 40px; line-height: 48px; }
.i5 .cx[data-mode="wallboard"] .cx-node strong { font-size: 16px; }

/* ───────────────────────── 6. Settings, modules, onboarding, empty states ───────────────────────── */

.i5 .m8-heading, .i5 .page-head { padding: 0 0 16px; }
/* The heading eyebrow already says 企业工作空间; the matching pill repeated it. */
.i5 .m8-heading > .m8-pill { display: none; }
.i5 .m8-heading h1, .i5 .settings-page h1, .i5 .page-head h1 { font: 600 24px/32px var(--mos-font-ui); letter-spacing: 0; margin: 2px 0 4px; }
.i5 .m8-heading p, .i5 .page-head p { font: var(--i5-ui); color: var(--mos-text-secondary); }
.i5 .m8-eyebrow, .i5 .eyebrow { font: 600 12px/18px var(--mos-font-ui); letter-spacing: .04em; color: var(--mos-text-muted); text-transform: none; }
.i5 .m8-pill { font: var(--i5-caption); padding: 0 7px; border-radius: 4px; border: 1px solid var(--mos-border); background: var(--mos-surface); color: var(--mos-text-secondary); }
.i5 .m8-notice { border: 1px solid var(--mos-border); border-left: 3px solid var(--mos-accent); border-radius: 8px; background: var(--mos-surface); font: var(--i5-ui); color: var(--mos-text-secondary); padding: 10px 14px; }
.i5 .m8-storage { font: var(--i5-caption); color: var(--mos-text-muted); }

/* Modules: one scannable register instead of eight tall cards. */
.i5 .m8-module-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; }
.i5 .m8-module {
  min-height: 0; padding: 12px 14px; gap: 6px; border: 1px solid var(--mos-border); border-radius: 9px; background: var(--mos-surface); box-shadow: none;
}
.i5 .m8-module.is-selected { border-color: var(--mos-accent); box-shadow: 0 0 0 1px var(--mos-accent); }
.i5 .m8-module-head strong { font: 600 14px/20px var(--mos-font-ui); }
.i5 .m8-description { font: var(--i5-ui); color: var(--mos-text); }
.i5 .m8-meta { font: var(--i5-caption); color: var(--mos-text-muted); }
.i5 .m8-module .agent-avatar--40 { width: 36px; height: 36px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--mos-border); background: var(--mos-surface); }
.i5 .m8-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.i5 .m8-actions p { font: var(--i5-caption); color: var(--mos-text-secondary); margin: 0; }
.i5 .m8-link { font: var(--i5-ui); color: var(--mos-accent); }

/* Onboarding as a process line of stations. */
.i5 .m13-setup-lead { border: 1px solid var(--mos-border); border-radius: var(--mos-radius-panel); background: var(--mos-surface); box-shadow: none; }
.i5 .m13-setup-lead h2 { font: 600 22px/32px var(--mos-font-ui); letter-spacing: 0; }
.i5 .m13-setup-lead p { font: var(--i5-body); color: var(--mos-text-secondary); }
.i5 .m13-setup-steps strong { font: 600 14px/20px var(--mos-font-ui); }
.i5 .m13-setup-steps small { font: var(--i5-caption); color: var(--mos-text-secondary); }
.i5 .m13-setup-steps b { font: var(--i5-mono); width: 26px; height: 26px; line-height: 24px; border-radius: 6px; border: 1px solid var(--mos-border-control); background: var(--mos-surface); color: var(--mos-text); }
.i5 .m13-data-checklist article { border: 1px solid var(--mos-border); border-radius: 9px; background: var(--mos-surface); box-shadow: none; padding: 16px; }
.i5 .m13-data-checklist h3 { font: 600 14px/20px var(--mos-font-ui); }
.i5 .m13-data-checklist p { font: var(--i5-caption); color: var(--mos-text-secondary); }
.i5 .m8-section-heading h2 { font: 600 15px/22px var(--mos-font-ui); }

.i5 .m13-empty-workplace, .i5 .m8-locked {
  max-width: 760px; margin: 24px auto; padding: 28px 32px; border: 1px solid var(--mos-border); border-radius: var(--mos-radius-panel);
  background: var(--mos-surface); box-shadow: none;
  background-image: linear-gradient(var(--i5-grid) 1px, transparent 1px), linear-gradient(90deg, var(--i5-grid) 1px, transparent 1px); background-size: 24px 24px;
}
.i5 .m13-empty-workplace h1, .i5 .m8-locked h2 { font: 600 22px/30px var(--mos-font-ui); letter-spacing: 0; }
.i5 .m13-empty-workplace p, .i5 .m8-locked p { font: var(--i5-body); color: var(--mos-text-secondary); max-width: 620px; }
.i5 .m13-empty-workplace > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Settings */
.i5 .settings-page { max-width: 1080px; }
.i5 .settings-panel { border: 1px solid var(--mos-border); border-radius: var(--mos-radius-panel); background: var(--mos-surface); box-shadow: none; padding: 4px 20px; margin-bottom: 12px; }
.i5 .settings-row { grid-template-columns: minmax(0, 1fr) 200px; padding: 14px 0; gap: 20px; }
.i5 .settings-row h2 { font: 600 14px/20px var(--mos-font-ui); margin: 0 0 2px; }
.i5 .settings-row p { font: var(--i5-caption); color: var(--mos-text-secondary); margin: 0; max-width: 560px; }
.i5 .settings-row select, .i5 .settings-row .btn { width: 100%; min-height: 36px; max-width: none; }
.i5 .settings-row label { font: var(--i5-ui); display: inline-flex; gap: 8px; align-items: center; }
.i5 .m17-governance { padding: 18px 20px; }
.i5 .m17-governance h2 { font: 600 15px/22px var(--mos-font-ui); }
.i5 .m17-governance p { font: var(--i5-caption); }
.i5 .m17-authority-chain { gap: 0; border: 1px solid var(--mos-border); border-radius: 9px; overflow: hidden; }
.i5 .m17-authority-chain article { border: 0; border-radius: 0; background: var(--mos-surface); padding: 14px 16px; }
.i5 .m17-authority-chain article + article { border-left: 1px solid var(--mos-border); }
.i5 .m17-authority-chain article:first-child { box-shadow: inset 3px 0 0 var(--i5-ink); }
.i5 .m17-authority-chain article:last-child .agent-avatar { outline: 1px dashed var(--mos-border-control); outline-offset: 2px; }
.i5 .m17-authority-chain article > small { font: 600 12px/18px var(--mos-font-ui); color: var(--mos-text-muted); letter-spacing: .02em; }
.i5 .m17-authority-chain h3 { font: 600 13px/20px var(--mos-font-ui); }
.i5 .m17-authority-chain p { font: var(--i5-caption); }
.i5 .m17-authority-note p { font: var(--i5-caption); color: var(--mos-text-secondary); }
.i5 .settings-panel--truth { padding: 16px 20px; }
.i5 .settings-panel--truth h2 { font: 600 15px/22px var(--mos-font-ui); }
.i5 .settings-panel dl div { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--mos-border) 70%, transparent); font: var(--i5-ui); }
.i5 .settings-panel dl div:last-child { border-bottom: 0; }
.i5 .settings-panel dt { color: var(--mos-text-muted); }

/* Account page */
.i5 .login--account .login__panel { max-width: 560px; margin: 24px auto; border: 1px solid var(--mos-border); border-radius: var(--mos-radius-panel); background: var(--mos-surface); box-shadow: none; padding: 24px 28px; }

/* ───────────────────────── 7. Search, activity, Xiaomo ───────────────────────── */

.i5 .palette { border: 1px solid var(--mos-border); border-radius: var(--mos-radius-overlay); background: var(--mos-surface-raised); box-shadow: var(--mos-shadow-2); }
.i5 .palette-scrim { background: var(--mos-scrim); }
.i5 .palette__input { font: 400 16px/24px var(--mos-font-ui); }
.i5 .palette__group { font: 600 12px/18px var(--mos-font-ui); letter-spacing: .04em; color: var(--mos-text-muted); }
.i5 .palette__option { font: var(--i5-ui); border-radius: 7px; }
.i5 .palette__option[aria-selected="true"] { background: var(--mos-accent-soft); color: var(--mos-text); box-shadow: inset 3px 0 0 var(--mos-accent); }
.i5 .palette__scope, .i5 .palette__hint, .i5 .palette__empty { font: var(--i5-caption); color: var(--mos-text-muted); }
.i5 .activity-inspector { border-left: 1px solid var(--mos-border); background: var(--mos-surface-raised); box-shadow: var(--mos-shadow-2); font: var(--i5-ui); }

/* Xiaomo lives in the sidebar's lower corner on desktop, so the companion never covers work. */
@media (min-width: 1200px) {
  .i5:has(#companion-toggle:not([hidden])) .shell:not([data-nav-collapsed="true"]) .nav { padding-bottom: 96px; }
  .i5:has(.shell:not([data-nav-collapsed="true"])) .companion__home > .xiaomo-dock {
    right: auto; left: calc(var(--mos-sidebar) - 84px); bottom: 12px; width: 72px; height: 72px;
  }
  .i5:has(.shell:not([data-nav-collapsed="true"])) .companion--drawer { right: auto; left: calc(var(--mos-sidebar) + 16px); bottom: 16px; }
}
.i5 .companion--drawer { border: 1px solid var(--mos-border); border-radius: var(--mos-radius-overlay); background: var(--mos-surface-raised); box-shadow: var(--mos-shadow-2); font: var(--i5-ui); }
.i5 .companion__title { font: 600 16px/24px var(--mos-font-ui); }
.i5 .companion__label, .i5 .companion__state, .i5 .companion__admin-note { font: var(--i5-caption); color: var(--mos-text-muted); }
.i5 .companion__suggestions button { font: var(--i5-ui); border-radius: 8px; border: 1px solid var(--mos-border); background: var(--mos-surface); text-align: left; }
.i5 .companion__suggestions button:hover { border-color: var(--mos-accent); }
.i5 .companion__question { font: 600 13px/20px var(--mos-font-ui); }
.i5 .companion__answer { font: var(--i5-ui); color: var(--mos-text-secondary); }

/* ───────────────────────── 8. Login ───────────────────────── */

.i5 .login.login--2030 {
  min-height: 100vh; min-height: 100dvh; background: var(--mos-canvas);
  background-image: none;
}
.i5 .login--2030 .login__masthead { padding: 22px 40px; }
.i5 .login--2030 .login__brand span { font: 700 20px/26px var(--mos-font-ui); letter-spacing: .01em; }
.i5 .login--2030 .login__locale select { min-height: 34px; background: var(--mos-surface); border: 1px solid var(--mos-border); border-radius: 7px; }
.i5 .login--2030 .login__eyebrow { font: 600 12px/18px var(--mos-font-ui); letter-spacing: .06em; color: var(--mos-text-muted); text-transform: none; }
.i5 .login--2030 .login__headline { font: 600 clamp(30px, 3vw, 42px)/1.35 var(--mos-font-ui); letter-spacing: 0; color: var(--mos-text); }
.i5 .login--2030 .login__promise { font: var(--i5-body); color: var(--mos-text-secondary); }

/* The organisation drawing: company (solid ink) → department lead (outline) → personal assistant (dashed). */
.i5 .login-collaboration { border: 0; border-radius: 0; background: transparent; padding: 0; box-shadow: none; }
.i5 .login-collaboration__heading { font: 600 12px/18px var(--mos-font-ui); letter-spacing: .04em; color: var(--mos-text-muted); }
.i5 .login-collaboration__command { border: 1px solid var(--mos-border-control); border-radius: 10px; background: var(--mos-surface); box-shadow: none; }
.i5 .login-collaboration__command strong { font: 600 18px/26px var(--mos-font-ui); }
.i5 .login-collaboration__command p, .i5 .login-collaboration__role { font: var(--i5-caption); color: var(--mos-text-secondary); }
.i5 .login-collaboration__branches::before, .i5 .login-collaboration__branches::after, .i5 .login-collaboration__handoff::before { border-color: var(--i5-line); }
.i5 .login-collaboration__branches > i { background: var(--i5-ink); width: 5px; height: 5px; border-radius: 1px; }
.i5 .login-collaboration__lead { border: 1px solid var(--mos-border); border-radius: 9px; background: var(--mos-surface); box-shadow: none; }
.i5 .login-collaboration__lead strong { font: 600 15px/22px var(--mos-font-ui); }
.i5 .login-collaboration__helper { border: 1px dashed var(--mos-border-control); border-radius: 9px; background: transparent; box-shadow: none; }
.i5 .login-collaboration__helper strong { font: 600 12px/18px var(--mos-font-ui); }
.i5 .login-collaboration__helper span { font: var(--i5-caption); color: var(--mos-text-secondary); }
.i5 .login-collaboration__lead, .i5 .login-collaboration__helper { position: relative; }
/* Codes sit in the card corner, identical in Mandarin and English whatever the name length. */
.i5 .login-collaboration .i5-code { position: absolute; top: 7px; right: 7px; display: inline-grid; width: auto; height: 16px; min-width: 20px; padding: 0 4px; font-size: 10px; line-height: 14px; margin: 0; }
.i5 .login-collaboration__helper .i5-code { top: auto; bottom: 7px; }
.i5 .login-collaboration__principle { font: var(--i5-caption); color: var(--mos-text-secondary); }

.i5 .login--2030 .login__panel {
  border: 1px solid var(--mos-border); border-radius: 12px; background: var(--mos-surface); box-shadow: var(--mos-shadow-1); padding: 32px 32px 26px;
}
.i5 .login--2030 .login__panel h1 { font: 600 26px/36px var(--mos-font-ui); letter-spacing: 0; }
.i5 .login--2030 .login__panel .login__heading p { font: var(--i5-ui); color: var(--mos-text-secondary); }
.i5 .login--2030 .login__form label { font: 600 14px/20px var(--mos-font-ui); color: var(--mos-text); }
.i5 .login--2030 .login__form input { min-height: 48px; font: 400 15px/22px var(--mos-font-ui); background: var(--mos-surface); border-color: var(--mos-border-control); }
.i5 .login--2030 .login__form button[type="submit"] { min-height: 48px; font: 600 15px/22px var(--mos-font-ui); }
.i5 .login__field-hint { margin: 0; font: var(--i5-caption); color: var(--mos-text-muted); }
.i5 .login--2030 .login__meta, .i5 .login--2030 .login__assistance p { font: var(--i5-caption); color: var(--mos-text-secondary); }
.i5 .login--2030 .login__page-footer { font: var(--i5-caption); color: var(--mos-text-muted); padding: 16px 40px; }

/* ───────────────────────── 9. Responsive ───────────────────────── */

@media (min-width: 1800px) {
  :root.i5 { --mos-sidebar: 256px; }
}
@media (max-width: 1440px) {
  .i5 .search-trigger { min-width: 200px; }
}
@media (max-width: 1199px) {
  .i5 .shell { grid-template-columns: minmax(0, 1fr); }
  .i5 .nav { position: fixed; height: 100dvh; box-shadow: var(--mos-shadow-2); }
}
@media (max-width: 900px) {
  .i5 .agent-chat .chat-workspace { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .i5 .agent-chat .chat-main > .chat-messages { max-height: none; overflow: visible; }
  .i5 .agent-chat .work-rail { overflow: visible; }
  .i5 .work-rail { border-left: 0; border-top: 1px solid var(--mos-border); }
  .i5 .settings-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .i5 .m17-authority-chain { grid-template-columns: minmax(0, 1fr); }
  .i5 .m17-authority-chain article + article { border-left: 0; border-top: 1px solid var(--mos-border); }
}
@media (max-width: 800px) {
  .i5 .login--2030 .login__masthead { padding: 14px 18px; }
  .i5 .login--2030 .login__panel { padding: 22px 20px 18px; box-shadow: var(--mos-shadow-1); }
  .i5 .login--2030 .login__page-footer { padding: 14px 18px; }
}
@media (max-width: 767px) {
  :root.i5 { --mos-topbar: 52px; }
  .i5[data-auth-state="authenticated"] .shell > .main { padding: 12px 12px 104px !important; }
  .i5 .topbar { padding: 0 10px; }
  .i5 .search-trigger { min-width: 0; width: 34px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
  /* The activity label is hidden at this width; present the trigger as an icon button, not an empty pill. */
  .i5 .topbar .activity-trigger { width: 34px; min-height: 34px; height: 34px; border-color: transparent; background: transparent; border-radius: 7px; }
  .i5 .topbar .activity-trigger .activity-dot { width: 9px; height: 9px; box-shadow: 0 0 0 3px var(--mos-surface-hover); }
  .i5 .search-trigger__label, .i5 .search-trigger kbd { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .i5 .agent-chat .chat-heading { padding-bottom: 10px; }
  .i5 .agent-chat .chat-heading h1 { font-size: 19px; line-height: 26px; }
  .i5 .agent-chat .chat-heading-actions .chat-new-button { padding-inline: 10px; gap: 6px; }
  .i5[lang="en"] .agent-chat .chat-heading h1 { font-size: 18px; }
  .i5 .agent-chat { --i5-work-inset: 12px; }
  .i5 .agent-chat .chat-messages { padding: 10px var(--i5-work-inset); min-height: 0; }
  .i5 .agent-chat .chat-empty h2 { font-size: 20px; line-height: 28px; }
  .i5 .agent-chat .chat-empty > .i5-start-main > p:not(.i5-start-label) { display: none; }
  .i5 .agent-chat .chat-empty h2 { margin-bottom: 6px; }
  .i5 .agent-chat .chat-data-link { margin-top: 4px; }
  .i5 .agent-chat .chat-starters button { min-height: 48px; }
  .i5 .work-team-overview { padding: 10px var(--i5-work-inset); }
  .i5 .work-helper-card { min-height: 0; padding: 8px; }
  .i5 .agent-chat .chat-composer-area { padding: 0 var(--i5-work-inset) 12px; }
  .i5 .m8-module-grid { grid-template-columns: minmax(0, 1fr); }
  .i5 .m13-empty-workplace, .i5 .m8-locked { padding: 20px; margin: 12px 0; }
}
@media (max-width: 600px) {
  /* Keep the tier chips; the reporting line is shown in the team strip below. */
  .i5 .agent-chat .i5-tier-line > span:last-child:not(.i5-code):not(.i5-tier-chip) { display: none; }
  .i5 .agent-chat .chat-heading-line { gap: 4px 8px; }
}
@media (max-width: 380px) {
  .i5 .i5-conditions dl { grid-template-columns: minmax(0, 1fr); }
}

/* Respond to the task panel itself: sidebar collapse must never unexpectedly squeeze names or
   restore a third column. Mandarin identities stay primary; codes remain in the navigation. */
@container task (max-width: 780px) {
  .i5 .work-command-department .i5-code { display: none; }
}
@container task (max-width: 600px) {
  .i5 .work-command-departments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i5 .agent-chat .chat-starters { grid-template-columns: minmax(0, 1fr); }
  .i5 .work-helper-card { flex-direction: column; text-align: center; align-items: center; }
  .i5 .work-helper-content { align-items: center; width: 100%; }
  .i5 .work-helper-title > span { display: none; }
  .i5 .work-helper-purpose { display: none; }
  .i5 .work-helper-request-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .i5 *, .i5 *::before, .i5 *::after { transition-duration: 0ms !important; scroll-behavior: auto !important; }
}