/* ================================================================
   手机端外壳 · 顶栏（**唯一来源**）

   为什么单独抽一个文件
   ----------------------------------------------------------------
   手机端顶栏出现在三个地方：
     · Agent 页   —— SPA，由 src/shell/render-shell.js 生成
     · 应用中心   —— public/app-center/app-center.js 生成
     · 运行页     —— public/app-center/run.js 生成

   它们分属三个文件、两套 CSS 变量，过去各自写一份样式。
   结果就是：底色有的有有的没有、高度差 20px、padding 被别的规则覆盖，
   改一处永远对不齐（实际发生过，来回改了七八轮）。

   现在三处都 <link> 本文件 —— 样式只有一个来源，改这里三处同时生效。
   对照物是 00-说明/demo/app-center-mobile-flow.html 里的顶栏。

   变量说明
   ----------------------------------------------------------------
   项目里有两套命名：
     SPA        用 --paper / --ink / --line
     应用中心/运行页 用 --surface / --text / --line
   这里用「带兜底的取值」把两边都接住，不必强求统一命名。
   ================================================================ */

.mc-appbar {
  /* 把两套命名归一，后面只用 --mc-* */
  --mc-bg: var(--paper, var(--surface, #ffffff));
  --mc-ink: var(--ink, var(--text, #101827));
  --mc-line: var(--line, #dfe5ec);
  --mc-muted: var(--muted, #617083);

  display: flex;
  align-items: center;              /* 内容垂直居中 */
  gap: 10px;
  /* height 必须显式写 auto：SPA 的 .topbar 基础样式是 height:64px，
     不覆盖的话这一条会比另外两处高出 20px（肉眼很明显）。 */
  height: auto;
  /* 整条顶栏比默认高度收 20%：8/16/10 → 6/13/8。
     高度由上下内边距决定，所以缩 padding 就等于缩标题栏。 */
  padding: 6px 13px 8px;
  background: var(--mc-bg);
  border-bottom: 1px solid var(--mc-line);
  box-sizing: border-box;
}

/* 运行页的顶栏标签上带 hidden（PC 端不显示），由 run.js 在手机布局下摘掉。
   这里兜一层：没摘掉就不显示 —— 防止某条 display:flex 把它顶开。 */
.mc-appbar[hidden] { display: none !important; }

/* ---------- 左：logo + AISEFUR ---------- */
.mc-logo {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--mc-ink);
}
.mc-logo svg {
  width: 19px;
  height: 19px;
  display: block;
}
.mc-wordmark {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .13em;
  color: var(--mc-ink);
  white-space: nowrap;
}

/* ---------- 右：页面入口 ---------- */
.mc-nav {
  margin-left: auto;
  display: flex;
  gap: 5px;
}
/* 胶囊整体收 20%：内边距 6/11 → 5/9，字号 12 → 10，图标 16 → 13。
   三者一起缩，胶囊才会等比变小；只缩内边距会显得字大框小。 */
.mc-nav button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  color: #41505b;
  background: var(--mc-bg);
  border: 1px solid var(--mc-line);
  border-radius: 7px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.mc-nav button svg { width: 13px; height: 13px; flex: 0 0 auto; }
/* Agent 切换下拉（只在 Agent 页所在 SPA 的顶栏出现）：与 .mc-nav button 同一高度体系，
   宽度封顶，避免把「应用中心」挤出视野；选中项名称过长时省略。 */
.mc-agent-select {
  min-width: 0;
  max-width: 42vw;
  height: 25px;
  padding: 0 5px;
  color: #41505b;
  background: var(--mc-bg);
  border: 1px solid var(--mc-line);
  border-radius: 7px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
}
/* 当前所在页：黑底白字（demo 里就是这个处理） */
.mc-nav button.on {
  color: #fff;
  background: var(--mc-ink);
  border-color: var(--mc-ink);
}

/* ---------- 右：登录用户名（总页面专用，点它退出） ---------- */
/* 与 .mc-nav button 同步收 20%，保证三个页面的顶栏右侧一样大。 */
.mc-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 5px;
  color: #41505b;
  background: var(--mc-bg);
  border: 1px solid var(--mc-line);
  border-radius: 999px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.mc-user .mc-uav {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mc-ink);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
}
.mc-user i {
  font-style: normal;
  font-size: 10px;
  color: var(--muted, #94a1ab);
}