/* === 03-layout.css (原 user.css L174-L862,Section 2+3+4 布局骨架 + 顶栏底栏 + Tab 系统) === */

/* === Section 2 布局骨架 (原 L174-L753) === */

/* ========================================
   2. 布局骨架（视图容器 + 对话卡片 + PC 侧边栏）
   ======================================== */
/* 首页视图（移动端全屏） */
#home-view {
  position: fixed; inset: 0; z-index: 60; background: var(--bg-base);
  display: flex; flex-direction: column;
  overflow: hidden;
}
#conv-view {
  position: fixed; inset: 0; z-index: 70; background: var(--bg-base);
  display: flex; flex-direction: column;
}
.conv-area {
  flex: 1;
  margin-top: calc(56px + var(--app-top-inset));
  padding: 16px 16px 100px;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; z-index: 10;
  overscroll-behavior: contain;
}
.conv-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-surface); border: 1px solid var(--border-glass);
  border-radius: 14px; padding: 14px 12px 14px 16px; margin-bottom: 8px;
  cursor: pointer; transition: transform .15s, background .15s;
  -webkit-user-select: none; user-select: none;
}
.conv-card:active { transform: scale(.97); background: var(--bg-hover); }
.conv-body { flex: 1; min-width: 0; }
.conv-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.conv-title {
  flex: 1; font-size: 15px; font-weight: 600; color: var(--text-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-date { font-size: 12px; color: var(--text-dim); flex-shrink: 0; }
.conv-footer { display: flex; align-items: center; gap: 8px; }
.conv-preview {
  flex: 1; font-size: 13px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-meta { font-size: 12px; color: var(--text-dim); flex-shrink: 0; }
.conv-delete { width: 32px; height: 32px; flex-shrink: 0; }
.conv-delete svg { width: 16px; height: 16px; }

/* 对话视图(P417:消费 --chat-main-bg 聊天专用语义变量,与左右岛台 --bg-surface 解耦) */
#chat-view { position: fixed; inset: 0; z-index: 80; background: var(--chat-main-bg); display: flex; flex-direction: column; min-width: 0; --chat-topbar-h: 52px; }
.chat-area {
  flex: 1;
  /* 手机:顶栏是磨砂浮层,正文从它下面滑过;静止时第一行落在顶栏下方留呼吸。
     留白写在 padding 上,阅读锚点(ScrollStability.padTop)据此把提问停在顶栏下 */
  padding: calc(var(--chat-topbar-h) + var(--app-top-inset) + 24px) 16px var(--chat-input-height, 0px);
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; z-index: 10;
  overscroll-behavior: contain;
  scrollbar-width: none;
  overflow-anchor: none; /* 阅读锚点由 ScrollStability 统一维护，避免双重补偿 */
  min-width: 0;
}
/* 尾部留白:让最新提问能停在视口顶部;高度由 ScrollStability 计算,回答写满后为 0 */
.chat-area::after { content: ''; display: flow-root; flex-shrink: 0; height: var(--chat-tail, 0px); } /* flow-root:留白为 0 时也不吞上一条消息的下边距,内容总高稳定 */

/* ── 2b. PC 图标导航栏 + 对话面板 ── */

/* 毛玻璃面板基类 */
.glass-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* 图标导航栏 */
.sidebar-nav {
  display: none; /* 默认隐藏，PC 媒体查询启用 */
  flex-direction: column; align-items: center; justify-content: space-between;
  padding: var(--space-8) 0;
  background: var(--bg-base);
}
.nav-top, .nav-bottom {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.nav-btn {
  width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); background: transparent;
  transition: all var(--transit-normal); position: relative;
}
.nav-btn svg { width: 22px; height: 22px; stroke-width: 1.6; }
.nav-btn:hover {
  color: var(--brand-primary); background: var(--bg-surface-hover);
}
.nav-btn.active {
  color: var(--brand-primary);
  background: var(--bg-surface-hover);
  /* P413 扁平化:inset 0 0 0 1px → 真 border,功能性描边语义不变(无装饰内阴影) */
  outline: 1px solid var(--brand-border);
  outline-offset: -1px;
}
/* P474 工作空间邀请红点:有 pending 邀请时 JS 加 data-badge="1" */
.nav-btn[data-badge]::after {
  content: '';
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--error-color);
  /* 描边让红点在深/浅主题底色上都清晰可见 */
  box-shadow: 0 0 0 2px var(--bg-surface);
  pointer-events: none;
}
.brand-logo {
  margin-bottom: var(--space-6);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
}
.brand-logo svg { width: 100%; height: 100%; display: block; }
.brand-logo, .topbar-brand-logo { color: var(--text-main); }  /* 标志线与节点跟字色,金点见 --brand-mark */
/* 登录后标志与字标从登录页飞到这里(浏览器自带的页面过渡,只给“从登录页进来”这一下,user.html 头部判来处;
   不支持的浏览器照常切换)。手机是首页顶栏那个,电脑是图标导航栏那个;同名只能有一个在显示 */
@view-transition { navigation: auto; }
@media (max-width: 1023px) {
  .home-topbar .topbar-brand-logo svg { view-transition-name: brand-mark; }
  .home-topbar .brand-stack { view-transition-name: brand-word; }
}
@media (min-width: 1024px) {
  .sidebar-nav .brand-logo svg { view-transition-name: brand-mark; }
}
::view-transition-group(brand-mark), ::view-transition-group(brand-word) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.user-avatar-wrap {
  width: 38px; height: 38px; border-radius: var(--radius-full);
  background: var(--bg-surface-hover); border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; color: var(--brand-primary);
  cursor: pointer; transition: border-color var(--transit-fast);
}
.user-avatar-wrap:hover { border-color: var(--brand-primary); }

/* 对话面板 */
.sidebar {
  display: none; /* 默认隐藏，PC 媒体查询启用 */
  flex-direction: column; height: calc(100dvh - var(--space-6) * 2);
  animation: slideInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
/* ════════════════════════════════════════════════════════════
   P426:sidebar 头部精简
   结构 [.brand-group(主标居中) | + 新建按钮 flex-end]
   - slogan 下移到底部品牌区(.sidebar-circuit 上方),头部只留主标
   - 主标 align-items: center 视觉居中,补偿副标移走后的重量失衡
   - 删除 border-bottom 灰线(底部 circuit 上方的边界已承担分隔语义)
   - 头部背景保留 radial-gradient 极淡品牌金
   - 手机抽屉的头部/入口/底部另见 38-mobile-drawer.css
   ════════════════════════════════════════════════════════════ */
.sidebar-header {
  padding: var(--space-5) var(--space-4) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  /* 极淡品牌金从左上发散 — 不抢戏,提供"被光照过"的质感 */
  background: radial-gradient(120% 100% at 0% 0%, var(--brand-bg-subtle), transparent 60%);
}

/* 左侧品牌组:PC 端只剩主标
   P426-fix:align-items 改 flex-start,主标靠左("稍微靠左"=贴 sidebar-header 的 padding-left) */
.brand-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
  flex: 1;
}

/* 主标题:中文 + 英文金色双节,baseline 对齐
   P426-fix:字号缩 2 号(24→20 / 16→14),justify-content 改 flex-start 让 zh/en 贴左排 */
.brand-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--space-2);
  white-space: nowrap;
}
.brand-zh {
  color: var(--text-main);
}
.brand-en {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-primary);
  letter-spacing: 0.04em;
  opacity: 0.9;
}

/* 副标 slogan(pulse-dot + 文字)— 低声哲学引言
   P420-fix5-bug:父容器不能加 overflow:hidden,否则会裁掉 pulse-dot
   的 ::after 脉冲外圈(scale 1.5 时直径 21px)。文字截断收到 .slogan-text 子元素内
   .slogan-pc:底部 sidebar-circuit 内,PC 端居中作为电流图标题,移动端随 circuit 隐藏
   (手机抽屉的标语在底部"你"的名字下,见 38-mobile-drawer.css) */
.sidebar-slogan {
  /* P429:衬线书卷气 — 配置层 --font-serif + 字距宽松 + 细字 */
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.sidebar-slogan .slogan-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* P426:底部品牌区 slogan(在 .sidebar-circuit 内顶部,居中呈现)
   P426-fix:margin-bottom space-3→space-1,贴近电流图形成"slogan + 图"一体感 */
.sidebar-circuit .slogan-pc {
  justify-content: center;
  margin-bottom: var(--space-1);
}

/* 呼吸点 — 设计稿亮点(P420-fix5 复刻):
   6px 实心品牌金点 + 外圈描边脉冲(2s cubic-bezier scale 0.8→1.5 + opacity 0.8→0)
   视觉效果:类似服务器在线指示灯,带哲理感的"系统在呼吸"
   P420-fix5-bug2:加 margin-left 让出 ::after scale 1.5 时左侧延伸的空间
   (~7px),防止上游容器 overflow:hidden(如 .glass-panel)裁掉外圈 */
.pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--brand-primary);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  margin-left: 7px;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--brand-primary);
  animation: sidebar-pulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes sidebar-pulse {
  0%   { transform: scale(0.8); opacity: 0.8; }
  50%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(0.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot::after { animation: none; opacity: 0.3; }
}

/* P429:新建按钮改金线 ghost — "+ 新建"细字 + 金线边框,精致克制
   契约:暗浅两版统一身份,theme-light 例外 4 同步删除;颜色全消费 brand 派生 */
#sidebar-new-conv-btn {
  height: 32px;
  padding: 0 var(--space-3);
  background: transparent;
  color: var(--brand-primary);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex-shrink: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: all var(--transit-fast);
  align-self: center;  /* 不再 flex-end 撑 baseline,正中对齐 brand-group */
}
#sidebar-new-conv-btn:hover {
  background: var(--brand-bg);
  border-color: var(--brand-primary);
}
/* 手机抽屉用"写"图标(38-mobile-drawer.css),电脑保持 "+ 新建" */
#sidebar-new-conv-btn .new-ic-compose { display: none; }

/* 对话列表容器(P415-fix4:左右加 --space-3 内边距,让 active 卡片不贴侧栏边,有控件感) */
#sidebar-body {
  flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-4);
}

.sidebar-empty {
  font-size: 14px; color: var(--text-dim); padding: var(--space-6) var(--space-4);
  text-align: center;
}

/* ════════════════════════════════════════════════════════════
   P420-fix2:sidebar 底部品牌节点电流图示
   YOU → LLM → AGENT → NODES → YOU 闭环,电流由两端 YOU 出发回环
   设计契约:
   - 全部消费 5 原色派生(brand-primary 流光 / text-secondary 节点 /
     border-glass 静态轨道 / bg-surface 标签遮罩),深浅自动适配
   - PC 显示 / 移动端隐藏(11-mobile.css 覆盖)
   - aria-hidden 装饰元素,不占焦点不影响 a11y
   - 尊重 prefers-reduced-motion
   ════════════════════════════════════════════════════════════ */
.sidebar-circuit {
  flex-shrink: 0;
  /* P426-fix:padding-top 加大(space-4→space-6),让 slogan 与对话列表分隔线
     拉开距离;slogan 与下方电流图保持紧凑(margin-bottom 小)形成一体感
     P428-2:.sidebar-circuit 已抽出 #sidebar 独立成卡(加 .glass-panel class),
            border-top 分隔线不再需要(独立卡片自身已有 border);保留 padding */
  padding: var(--space-6) var(--space-4) var(--space-3);
  position: relative;
}
.sidebar-circuit .sc-svg {
  display: block;
  width: 100%;
  height: 80px;
  pointer-events: none;
}
.sidebar-circuit .sc-base {
  fill: none;
  stroke: var(--border-glass);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-circuit .sc-flow {
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 12 60;
  /* P420-fix5-bug3:offset 必须是 dasharray pattern 总长(12+60=72)的整数倍,
     否则循环结束时 dash 位置跳变 → 视觉卡顿。原 200 % 72 = 56 ≠ 0 卡。
     改 144(2 pattern)+ duration 3s 保持电流速度感(48 单位/秒,接近原 50)*/
  animation: sc-flow 3s linear infinite;
}
.sidebar-circuit .sc-dot {
  fill: var(--text-secondary);
}
.sidebar-circuit .sc-dot-origin {
  fill: var(--brand-primary);
}
/* P426:sc-graph wrapper 给 svg + labels 提供独立定位上下文,避免 sc-labels
   的 absolute inset 跨整个 sidebar-circuit 与新加的 slogan 重叠 */
.sidebar-circuit .sc-graph {
  position: relative;
}
.sidebar-circuit .sc-labels {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  pointer-events: none;
}
.sidebar-circuit .sc-node {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  background: var(--bg-surface);
  padding: 2px 4px;
  border-radius: 4px;
  position: relative;
  /* 节点标签需在 SVG 上方,负责遮挡轨道,制造"文字嵌在线上"的高级感 */
  z-index: 2;
}
.sidebar-circuit .sc-node-origin {
  color: var(--brand-primary);
  font-weight: 700;
}

@keyframes sc-flow {
  0%   { stroke-dashoffset: 144; }
  100% { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-circuit .sc-flow {
    animation: none;
    stroke-dasharray: none;
    opacity: 0.5;
  }
}

@keyframes slideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }

/* 助手仓库面板（属于 Section 5: 卡片）— P187 XHTML 协作 delivery 整合 */
.warehouse-panel {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.warehouse-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.warehouse-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.warehouse-section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.5px;
}
.warehouse-section-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  min-height: 44px;
  color: var(--text-muted);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  background-color: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--transit-fast), border-color var(--transit-fast), background-color var(--transit-fast);
}
.warehouse-section-add:hover {
  color: var(--text-main);
  border-color: var(--border-light);
  background-color: var(--bg-hover);
}
.warehouse-section-add svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.warehouse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
/* scope 到 warehouse-panel 避免污染其他 Tab 的 .tab-placeholder */
.warehouse-panel .tab-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  border: 1px dashed var(--border-glass);
  border-radius: 12px;
  color: var(--text-dim);
  font-size: 14px;
  padding: 0;
}
.warehouse-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: default;
  transition: transform var(--transit-normal), border-color var(--transit-fast), background-color var(--transit-normal);
}
.warehouse-card:hover {
  background-color: var(--bg-surface-hover);
  border-color: var(--border-light);
  transform: translateY(-2px);
}
/* P406:槽位 wrapper 只管位置(margin/flex),size/形状/颜色由内含 .agent-avatar 接管 */
.warehouse-card-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.kb-icon-bg {
  background-color: var(--bg-layer-1);
  color: var(--text-muted);
}
.warehouse-card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.warehouse-card-desc {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 24px;
  flex-grow: 1;
}
.warehouse-card-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}
.warehouse-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  background-color: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-glass);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transit-fast), border-color var(--transit-fast), background-color var(--transit-fast), transform var(--transit-fast);
}
.warehouse-btn:hover {
  color: var(--text-main);
  border-color: var(--text-muted);
  background-color: var(--bg-hover);
}
.warehouse-btn:active {
  transform: scale(0.97);
}
.warehouse-btn.primary {
  color: var(--brand-primary);
  border-color: var(--brand-border);
  background-color: transparent;
}
.warehouse-btn.primary:hover {
  color: var(--brand-primary-hover);
  border-color: var(--brand-primary);
  background-color: var(--brand-bg-light);
}
.warehouse-btn.wh-del,
.warehouse-btn.wh-kb-del {
  color: var(--text-muted);
}
.warehouse-btn.wh-del:hover,
.warehouse-btn.wh-kb-del:hover {
  color: var(--error-text);
  border-color: var(--error-text);
  background-color: var(--error-bg);
}
@media (max-width: 768px) {
  .warehouse-panel {
    padding: 24px 16px 60px;
    gap: 40px;
  }
  .warehouse-grid {
    grid-template-columns: 1fr;
  }
}

/* 助手选择器弹窗（属于 Section 8: 弹窗） */
.picker-sheet { max-height: 60vh; }
.picker-list {
  display: flex; flex-direction: column; gap: 6px;
}
.picker-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer;
  background: var(--bg-surface); border: 1px solid var(--border-glass);
  border-radius: 12px; transition: background 0.15s, border-color 0.15s;
}
.picker-item:hover { background: var(--bg-hover); border-color: var(--border-light); }
/* P406:槽位 wrapper 不设 size/形状/颜色,由内含 .agent-avatar.avatar-compact 接管 */
.picker-avatar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.picker-info { flex: 1; min-width: 0; }
.picker-name { font-size: 14px; font-weight: 600; color: var(--text-main); }
.picker-desc { font-size: 12px; color: var(--text-muted); margin-top: 1px; }

/* 日期分隔线 + 时间戳 + 事件 Banner（属于 Section 6: 聊天消息） */
/* ── 日期分隔线（P183 Part 2）── */
.date-divider {
  display: flex; align-items: center;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px; font-weight: 500;
  margin: 16px 0;
}
.date-divider::before, .date-divider::after {
  content: ''; flex: 1;
  border-bottom: 1px solid var(--border-glass);
}
.date-divider::before { margin-right: 16px; }
.date-divider::after { margin-left: 16px; }

/* ── 事件 banner（P183 Part 2 — 系统消息/流程事件）── */
.event-banner {
  background: var(--bg-subtle);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  margin: 16px auto;
  max-width: fit-content;
  gap: 8px;
  letter-spacing: 0.3px;
}

/* PC welcome state in chat-view */
.pc-welcome {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--text-dim); text-align: center; gap: 16px;
  padding: 32px;
}
.pc-welcome-title {
  font-size: 28px; font-weight: 700;
  background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.pc-welcome-hint { font-size: 15px; color: var(--text-muted); }
.pc-welcome-action {
  margin-top: 8px; padding: 10px 24px;
  background: var(--brand-bg); border: 1px solid var(--brand-border);
  color: var(--brand-primary); cursor: pointer; border-radius: 10px;
  font-size: 14px; font-family: inherit; font-weight: 500;
  transition: background 0.2s;
}
.pc-welcome-action:hover { background: var(--brand-bg-strong); }


/* === Section 3 顶栏 + 底栏 (原 L754-L813) === */

/* ========================================
   3. 顶栏 + 底栏（.topbar, .input-bar）
   ======================================== */
/* ── 顶栏(P183 磨砂玻璃;P409 重写,P409-fix3 终态)──
   左列:[hamburger(mobile) + back(mobile)] [助手头像 + 名字 / 主题 + ⌄]
   右列:[⚡ 临时模式] | [4 个图标按钮]
   注:T164 起助手身份回到顶栏(每轮回复不再显示头像抬头),样式见 18-topic-switcher.css */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: calc(64px + var(--app-top-inset));
  padding-top: var(--app-top-inset);
  background: var(--bg-glass);
  border-bottom: 1px solid var(--border-glass);
  display: flex; align-items: center; justify-content: space-between;
  padding-left: 24px; padding-right: 24px;
  gap: 16px;
}
/* chat-view 顶栏无底部分隔线,与对话区融为一体(保留磨砂玻璃) */
#chat-view .topbar { border-bottom: none; }

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.topbar-left {
  flex: 1 1 auto;
  min-width: 0;
}
.topbar-right { flex: 0 0 auto; }

/* 极细竖分隔线 — 独立元素,不属于任何胶囊 */
.topbar-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--border-light, rgba(255, 255, 255, 0.12));
  flex-shrink: 0;
}

/* #chat-agent-title 节点保留作为 chat.js 写入点,hidden 属性视觉不显示;
   可见身份由 TopicSwitcher 写入 .topbar-identity */

.topbar-title {
  font-weight: 600; font-size: 16px;
  color: var(--text-bright);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 首页 topbar 品牌横排：logo + 名字居中组成 lockup */
.topbar-brand {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}
.topbar-brand .topbar-title {
  flex: 0 1 auto;
  text-align: left;
  padding: 0;
}
.topbar-brand-logo {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.topbar-brand-logo svg { width: 100%; height: 100%; display: block; }
/* 品牌字标:中文在上、英文在下,两行等宽,与方形标志并排时左右平衡;
   字距末尾留白用负右边距抵掉,宽度才真正对齐 */
.brand-stack {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 3px; line-height: 1;
}
.brand-stack-zh {
  font-size: 16px; font-weight: 650; letter-spacing: 0.14em; margin-right: -0.14em;
  color: var(--text-bright);
}
.brand-stack-en {
  font-size: 8px; font-weight: 600; letter-spacing: 0.32em; margin-right: -0.32em;
  text-transform: uppercase; color: var(--text-muted);
}
.topbar-actions { display: flex; gap: 2px; align-items: center; }
.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transit-fast); text-decoration: none;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text-bright); }
.icon-btn:active { background: var(--bg-active); transform: scale(0.92); }
.icon-btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.user-badge {
  font-size: 13px; color: var(--text-muted); padding: 4px 10px;
  background: var(--bg-surface); border-radius: 12px;
  border: 1px solid var(--border-glass); max-width: 100px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* === Section 4 Tab 系统 (原 L814-L862) === */

/* ========================================
   4. Tab 系统（.tab-bar, .tab-content）
   ======================================== */
.tab-bar {
  position: fixed; top: calc(56px + var(--app-top-inset));
  left: 0; right: 0; z-index: 55;
  display: flex; gap: 0;
  background: var(--bg-glass);
  border-bottom: 1px solid var(--border-glass);
  padding: 0 16px;
}
.tab {
  flex: 1; padding: 12px 0; border: none; background: transparent;
  color: var(--text-muted); font-size: 14px; font-weight: 500;
  cursor: pointer; position: relative; transition: color 0.2s;
  font-family: inherit;
}
.tab.active { color: var(--text-main); }
.tab.active::after {
  content: ''; position: absolute; bottom: 0; left: 20%; right: 20%;
  height: 2px; background: var(--brand-gradient); border-radius: 1px;
}

/* Tab 内容区 */
.tab-content {
  flex: 1;
  margin-top: calc(56px + var(--app-top-inset) + 44px);
  padding: 16px 16px 100px;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; z-index: 10;
  overscroll-behavior: contain;
}
.tab-placeholder {
  text-align: center; color: var(--text-muted); padding: 48px 0; font-size: 15px;
}

/* FAB 新建按钮 */
.fab {
  position: fixed; bottom: calc(24px + env(safe-area-inset-bottom));
  right: 20px; z-index: 50;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--brand-gradient); color: var(--text-on-color); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-ambient);
  transition: transform 0.2s;
}
.fab:active { transform: scale(0.9); }