/* ========================================
   布局层：app-shell、亮色侧边栏、顶栏、面板骨架、底部 TabBar
   2026-09-10 微信风 H5 重构：新增 .tabbar（契约1）/ .nav-group-title；
   .background-dots 点阵纹理与微信纯色平铺风格冲突，全局关闭
   ======================================== */

/* 微信是纯色平铺，不要点阵纹理（定义在 base.css，此处统一关闭） */
.background-dots { display: none; }

.app-shell {
  display: flex;
  height: 100vh;
  height: 100dvh;
  position: relative;
  z-index: 1;
}

/* ---- 侧边栏（亮色） ---- */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  z-index: var(--z-sidebar);
  transition: transform var(--transition-smooth);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
}

.brand-icon {
  width: 34px;
  height: 34px;
  background: var(--brand-gradient);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.brand-icon svg { width: 18px; height: 18px; }

.brand-text {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.sidebar-nav {
  flex: 1;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  position: relative;
  user-select: none;
}

/* 激活项左侧金色指示条 */
.nav-item::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-gradient);
  transition: transform var(--transition-fast);
}

.nav-item:hover {
  background: var(--color-brand-subtle);
  color: var(--color-text-primary);
}

.nav-item.active {
  background: var(--color-brand-subtle);
  color: var(--color-brand-strong);
  font-weight: 600;
}

.nav-item.active::before {
  transform: translateY(-50%) scaleY(1);
}

.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

.nav-badge {
  margin-left: auto;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  box-shadow: var(--shadow-sm);
}

.nav-dot {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-brand);
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.sidebar-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-indicator.offline { background: var(--color-text-muted); }
.status-indicator.connecting { background: var(--color-warning); animation: pulse-dot 1s infinite; }
.status-indicator.online { background: var(--color-success); }

/* ---- 侧边栏分组标题（另一位 Agent 在 ranking.html 侧边栏插入 <div class="nav-group-title">排行</div>） ---- */
.nav-group-title {
  padding: 14px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  user-select: none;
}

.nav-group-title:not(:first-child) { margin-top: 6px; }

/* ---- 主内容区 ---- */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ---- 顶栏（亮色毛玻璃） ---- */
.topbar {
  /* 2026-09-11 用户拍板：整条顶栏全端隐藏（标题栏冗余——页面身份已由侧边栏
     激活态 / 底部 TabBar / 页级分段条三重表达）。DOM 保留不删：#page-title 仍被
     RankingUI.navigateTo 写入、#auth-status 仍被 renderAuthStatus 置空兜底 */
  display: none;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--color-border);
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  position: relative;
  z-index: var(--z-sticky);
}

.menu-toggle {
  display: none;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.menu-toggle:hover { background: var(--color-brand-subtle); color: var(--color-text-primary); }
.menu-toggle svg { width: 20px; height: 20px; pointer-events: none; }

.page-title {
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  flex: 1;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 认证状态栏（登录/登出/用户名，由 JS 渲染） */
.auth-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: 8px;
}

.auth-status a {
  color: var(--color-brand);
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
}

.auth-status a:hover { text-decoration: underline; }

/* ---- 内容面板骨架 ---- */
.content-panels {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--content-pad);
  scroll-behavior: smooth;
}

.panel {
  display: none;
  /* 2026-09-11 用户反馈「点『我的』整页闪动很厉害」：原 animation: fadeSlideIn 0.3s
     （opacity 0→1 + translateY(8px)）会在**每次切页**重放——实测切页后面板先处于
     opacity:0（整页不可见）再淡入，观感即强烈闪动；且动画期间的 transform 会新建
     包含块，干扰内部 .wx-seg--page 粘性条吸附。切页改为瞬时显示（保留首屏与
     其他动效不变）；若后续想要「仅首次进入有淡入」，需加一次性 class 由 JS 在
     animationend 后摘除，勿直接恢复本行 */
}

.panel.active { display: block; }

.panel-inner {
  max-width: 760px;
  margin: 0 auto;
  min-height: 400px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}

/* 配置页与 API 文档页：内容靠左，不受 max-width 限制 */
#panel-config .panel-inner,
#panel-api-documentation .panel-inner {
  max-width: none;
  margin: 0;
  text-align: left;
}

#panel-api-documentation .view-toggle-bar { justify-content: flex-start; }
#panel-api-documentation .api-docs-layout { align-items: flex-start; }

/* ---- 面板头部与分节 ---- */
.section-divider {
  height: 1px;
  background: var(--color-border);
  margin: 32px 0;
}

.config-section + .config-section { margin-top: 0; }

.panel-header { margin-bottom: 26px; }

.panel-header h2 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.panel-desc {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.panel-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

/* ---- 移动端「返回列表」按钮 ----
   桌面端隐藏；≤768px 单栏「列表 ↔ 详情」导航时由 responsive.css 放开显示。
   用于结果页详情与接口文档详情（ranking.html 中 .mobile-back-btn）。 */
.mobile-back-btn {
  display: none;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
  padding: 8px 12px 8px 6px;
  min-height: 40px;
  background: var(--color-brand-subtle);
  color: var(--color-brand-strong);
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mobile-back-btn svg { width: 18px; height: 18px; }

/* ---- 底部 TabBar（契约1：移动端主导航，.app-shell 内末尾）----
   微信 TabBar 规格：fixed 底部、白底、上边框 hairline、
   高 50px + env(safe-area-inset-bottom) 补底；
   item 四等分 flex column 居中；图标 24px、label 10px；
   默认 #7d7e80（rgba(0,0,0,0.5) 近似），激活 var(--color-brand)。
   桌面 >768px 由本文件底部媒体查询整体 display:none */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-tabbar);
  display: flex;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
}

.tabbar-item {
  flex: 1;
  min-height: var(--wx-tabbar-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--color-tabbar-inactive);
  font-size: 10px;
  line-height: 1;
  transition: color var(--transition-fast);
}

.tabbar-icon {
  width: 24px;
  height: 24px;
  color: inherit; /* 图标随 item 文字色（svg 用 currentColor 描边/填充） */
}

.tabbar-label {
  font-size: 10px;
  line-height: 1.2;
}

.tabbar-item.active { color: var(--color-brand); font-weight: 500; }
.tabbar-item:active { transform: none; }

/* 桌面端不出现 TabBar（>768px；≤768px 由 responsive.css 保持显示） */
@media (min-width: 769px) {
  .tabbar { display: none; }
}

/* ---- 任务池发布区筛选行（市场/小类/筛选/条数 + 行级三操作按钮）----
   2026-08-29：此前该类一直无 CSS 定义（裸默认样式，字号大还折行），
   用户反馈「文字缩小、尽量一行放下」——压缩字号/内边距，flex 横排；
   窄屏或小类名过长时允许 wrap 折行兜底，不溢出容器 */
.taskpool-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 6px 0;
}

.taskpool-filter-row label {
  font-size: 12px;
  margin: 0;
  white-space: nowrap;
}

.taskpool-filter-row select,
.taskpool-filter-row input {
  font-size: 12px;
  padding: 2px 4px;
  margin: 0;
  max-width: 150px;
}

.taskpool-filter-row button {
  font-size: 12px;
  padding: 3px 8px;
  margin: 0;
  white-space: nowrap;
}

/* ---- 可拖拽分隔条（通用组件，sidebar_resize.js 驱动） ----
   业务：用户要求竖向分隔线支持按住左右拖动调整宽度（2026-09-07 侧边栏；
   2026-09-08 扩展共享/个人排序树面板）。把手是 flex 兄弟节点而非伪元素
   ——伪元素收不到鼠标事件；具体分隔条只加 data-resizer 属性区分配置 */
.col-resizer {
  width: 6px;
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: calc(var(--z-sidebar) - 2);
  touch-action: none;
}

/* 视觉竖线用 ::before 画（细线居中），hover / 拖拽中高亮为主题渐变色 */
.col-resizer::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background var(--transition-fast);
}

.col-resizer:hover::before,
body.col-resizing .col-resizer::before {
  background: var(--brand-gradient);
}

/* 拖拽中：全局禁选文字 + 强制 col-resize 光标（防止划过 iframe/文字时光标闪变） */
body.col-resizing {
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
}

/* 移动端侧边栏是浮层抽屉、排序页双面板改上下堆叠（见 responsive.css），
   拖宽无意义——隐藏把手。注：媒体查询放在本文件而非 responsive.css，
   保持分隔条组件（html/css/js）内聚，改一处文件即知全貌 */
@media (max-width: 768px) {
  .col-resizer { display: none; }
}

/* 连接状态文字（2026-09-10 P6 审计补定义：侧边栏底部状态灯旁的文案） */
.status-text { font-size: 12px; color: var(--color-text-muted); }

/* 2026-09-11 用户拍板：站点 footer（免责声明 + ICP 备案）整条移除，
   .site-footer 样式及其移动端 TabBar 避让规则一并删除；
   删除前已提示《互联网信息服务管理办法》第 22 条 ICP 备案公示义务与监管风险，
   风险由用户确认承担 */