/* ── 全局顶栏组件样式（2026-09-20 重构）────────────────── */
/* 模块化设计：顶栏视觉只改这一个文件
   重构要点：删除旧下拉菜单与 iOS 拨动条/汉字标签样式；
   新增 AgentBoard 风格主题状态按钮（28px 图标按钮+双 SVG 旋转切换） */
.topbar{position:fixed;top:0;left:0;right:0;height:42px;
  background:var(--bg-body);border-bottom:1px solid var(--border,#313244);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;z-index:200;font-size:.95rem;user-select:none}
.topbar-left{display:flex;align-items:center;gap:14px;white-space:nowrap}
/* 品牌与导航：纯文字、无 emoji；active 用底部 2px 强调线 */
.topbar-brand{color:var(--text,#cdd6f4);text-decoration:none;font-weight:600;
  padding:0 6px;flex-shrink:0;position:relative;height:42px;
  display:inline-flex;align-items:center;letter-spacing:.02em}
.topbar-menu{color:var(--text3,#a6adc8);text-decoration:none;font-weight:400;
  padding:0 6px;flex-shrink:0;position:relative;height:42px;
  display:inline-flex;align-items:center}
.topbar-menu:hover,.topbar-brand:hover{color:var(--text,#cdd6f4)}
.topbar-menu.active,.topbar-brand.active{color:var(--text,#cdd6f4)}
.topbar-menu.active::after,.topbar-brand.active::after{content:'';
  position:absolute;bottom:0;left:6px;right:6px;height:2px;
  background:var(--accent,#89b4fa);border-radius:1px}
/* 右侧工具区 */
.topbar-right{display:flex;align-items:center;flex-shrink:0}
/* ── 主题状态按钮（AgentBoard 风格 icon-btn）──
   32px 圆角方块、透明底；hover 浮底变色、active 按压缩放反馈。
   2026-09-20 v2：顶栏加高至 42px 后按钮同步 28→32px、图标 16→18px
   （用户反馈开关显得太小；42px 栏高内 32px 按钮上下各留 5px，视觉平衡） */
.icon-btn{position:relative;width:32px;height:32px;border-radius:8px;
  border:none;background:transparent;color:var(--text3,#a6adc8);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease}
.icon-btn:hover{background:var(--bg-hover,#3b3e53);color:var(--text,#cdd6f4)}
.icon-btn:active{transform:scale(.94)}
/* 双图标叠放旋转切换：状态语义——图标显示当前主题（暗=月亮、亮=太阳），
   切换时旧图标旋转缩小淡出、新图标旋转放大淡入 */
.icon-btn .icon{position:absolute;width:18px;height:18px;
  transition:opacity .3s ease,transform .5s ease}
.icon-btn .icon-sun{opacity:0;transform:rotate(90deg) scale(.5)}
.icon-btn .icon-moon{opacity:1;transform:rotate(0deg) scale(1)}
[data-theme="light"] .icon-btn .icon-sun{opacity:1;transform:rotate(0deg) scale(1)}
[data-theme="light"] .icon-btn .icon-moon{opacity:0;transform:rotate(-90deg) scale(.5)}
/* 页面内容偏移（顶栏 fixed 占位） */
.topbar-spacer{height:42px}
@media(max-width:640px){
  .topbar{font-size:.85rem;padding:0 10px}
  .topbar-left{gap:10px}
  .topbar-brand,.topbar-menu{padding:0 4px}
}