/* css/home.css — #113 功能页面结构样式（#120 主页动画下线：场景/化身/信息卡/
 * 统计条/右侧面板/工具条专属段随主页模块删除；侧栏功能页面结构 + 任务中心页签条
 * + 文件/技能/通知三中心页 + feed 行（通知中心与详情页时间线共用）保持）。
 * 既有令牌零改动引用。 */

/* ============ 侧栏 · 功能页面结构（契约 §2.5 v1.3） ============ */

.search-wrap { padding: 0 var(--spacing-sm) var(--spacing-sm); }

/* #130：relay 设备切换容器（搜索上方；本地/桥接 hidden——sidebar.js 驱动） */
.sidebar-device { padding: 0 var(--spacing-sm) var(--spacing-sm); }
.sidebar-device select {
  width: 100%; min-height: 32px; flex-shrink: 0; cursor: pointer;
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); font: inherit;
  font-size: var(--font-size-sm); color: var(--color-text);
}
/* 项目下拉容器（任务中心入口上方；三模式恒显示无 hidden——sidebar.js
 * renderProjectSidebar 渲染 select；样式对齐 .sidebar-device 范式） */
.sidebar-project { padding: 0 var(--spacing-sm) var(--spacing-sm); }
.sidebar-project select {
  width: 100%; min-height: 32px; flex-shrink: 0; cursor: pointer;
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); font: inherit;
  font-size: var(--font-size-sm); color: var(--color-text);
}
.search-box {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px;
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.search-box input {
  flex: 1; min-width: 0; border: none; background: none; font: inherit;
  font-size: var(--font-size-sm); color: var(--color-text); outline: none;
}
.search-box input::placeholder { color: var(--color-text-weak); }
.search-ic { width: 14px; height: 14px; image-rendering: pixelated; flex: none; }
.search-kbd {
  font-family: var(--font-mono); font-size: 10px; border: 1px solid var(--color-border);
  border-radius: 4px; padding: 1px 5px; color: var(--color-text-weak);
  background: var(--color-bg); flex: none;
}

.view-nav .nav-icon { display: flex; align-items: center; }
.view-nav .nav-icon canvas { width: 16px; height: 16px; image-rendering: pixelated; display: block; }
.nav-badge {
  font-family: var(--font-mono); font-size: var(--font-size-xs); line-height: 1;
  padding: 2px 7px; border-radius: var(--radius-pill); background: var(--color-accent-soft);
  color: var(--color-accent-dark); flex: none;
}
.nav-item.active .nav-badge { background: var(--color-accent); color: #FBFAF7; }
.nav-tag {
  font-family: var(--font-mono); font-size: 10px; line-height: 1; padding: 2px 5px;
  border-radius: 4px; border: 1px dashed var(--color-border); color: var(--color-text-weak);
  flex: none;
}
.sidebar-foot { gap: var(--spacing-xxs); }
.sidebar-foot .mode-name {
  font-size: var(--font-size-xs); color: var(--color-text-weak); margin-right: auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============ 任务中心页签条（契约 §2.5：归档/统计并入） ============ */

.task-tabs {
  display: flex; gap: var(--spacing-xxs); align-items: center;
  padding: var(--spacing-xxs) var(--spacing-lg) 0;
}
.task-tab {
  border: 1px solid transparent; background: none; border-radius: var(--radius-sm);
  padding: 4px 12px; font-size: var(--font-size-sm); color: var(--color-text-weak);
}
.task-tab:hover { background: var(--color-accent-soft); }
.task-tab.active {
  background: var(--color-accent); color: #FBFAF7; font-weight: var(--font-weight-medium);
}
.topbar-page-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.topbar-note { font-size: var(--font-size-sm); color: var(--color-text-weak); }

/* ============ #130 任务中心主视图（黑板 inline；统计卡迁顶栏 + 右栏三块迁应用级） ============
 *  统计卡行（顶栏首行中段内嵌）/ 右栏三块（index.html #right-panel 静态骨架）；
 *  数据层容器 id 不变（home-stat-row/home-task-list/home-feed-list/side-quick），
 *  按钮点击/更新函数按 id 全局查询。既有令牌零新增引用。 */

.center-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* center-main 只剩黑板（#130：右侧栏迁应用级右栏，主视图不再两列） */
.center-main {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* #130 顶栏内嵌统计迷你卡行：横排 flex 单行紧凑（5 卡等分占满中段）；
 * 卡结构沿用 stat-card/stat-label/stat-value（数据层 html 零改动） */
.topbar .home-stat-row {
  display: flex;
  gap: 8px;
  min-width: 0;
}
.topbar .home-stat-row .stat-card {
  flex: 1; min-width: 0;
  background: rgba(251, 250, 247, 0.92); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 4px 10px; display: flex;
  flex-direction: column; gap: 1px; box-shadow: var(--shadow-1);
  overflow: hidden;
}
.topbar .home-stat-row .stat-label {
  font-size: var(--font-size-xs); color: var(--color-text-weak);
  display: flex; align-items: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .home-stat-row .stat-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.topbar .home-stat-row .stat-card[data-status="doing"] .stat-dot { background: var(--color-dot-doing); }
.topbar .home-stat-row .stat-card[data-status="todo"] .stat-dot { background: var(--color-dot-todo); }
.topbar .home-stat-row .stat-card[data-status="done"] .stat-dot { background: var(--color-dot-done); }
.topbar .home-stat-row .stat-value {
  font-family: var(--font-mono); font-size: 16px; line-height: 1.15;
}
.topbar .home-stat-row .stat-card.is-empty .stat-value { color: var(--color-text-weak); }

/* 右栏三块（#130 应用级 .right-panel 静态骨架内——原主视图右侧栏容器样式随迁移退役，
 *  side-block 系列子块样式原样沿用） */
.side-block {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; min-height: 0; flex-shrink: 0;
}
.side-head {
  padding: 8px var(--spacing-sm) 6px; display: flex; justify-content: space-between;
  align-items: baseline; gap: var(--spacing-xs);
}
.side-title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.side-note { font-size: var(--font-size-xs); color: var(--color-text-weak); white-space: nowrap; }
.side-tasks { overflow-y: auto; min-height: 120px; max-height: 40%; }
.side-feed { overflow-y: auto; min-height: 120px; flex: 1; }
.task-row {
  display: flex; flex-direction: column; gap: 4px; padding: 7px var(--spacing-sm);
  border-top: 1px solid var(--color-lane); cursor: pointer; width: 100%; text-align: left;
  background: none; border-left: none; border-right: none; border-bottom: none; font: inherit;
}
.task-row:hover { background: var(--color-accent-soft); }
.task-row:first-of-type { border-top: none; }
.task-title { font-size: var(--font-size-sm); display: flex; gap: 6px; align-items: center; min-width: 0; }
.task-title .task-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.type-bar { width: 3px; height: 12px; border-radius: 1px; flex: none; }
.task-meta {
  font-size: var(--font-size-xs); color: var(--color-text-weak); display: flex;
  justify-content: space-between; align-items: center;
}
.progress-track { height: 4px; background: var(--color-lane); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-accent); border-radius: 2px; }
.side-quick { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: var(--spacing-sm); }
.quick-btn {
  border: 1px solid var(--color-border); background: var(--color-card);
  border-radius: var(--radius-md); padding: 10px 8px; display: flex; flex-direction: column;
  gap: 4px; align-items: center; color: var(--color-text); font-size: var(--font-size-sm);
}
.quick-btn:hover { background: var(--color-accent-soft); }
.quick-btn.primary { background: var(--color-accent); color: #FBFAF7; border-color: var(--color-accent-dark); }

/* #130 响应式：右栏显隐由 layout.css .right-panel（<1024px display:none）承担；
 *  窄屏主视图黑板全宽（center-main 单列天然成立，无换向规则）；767px 统计卡
 *  独占一行（顶栏首行 flex-wrap 降级，flex-basis 100% 整行） */
@media (max-width: 1023px) {
  .blackboard-view { min-height: 480px; }
}
@media (max-width: 767px) {
  /* #129 移动端验收修复（#130 保持）：桌面壳的固定视口假设（.center-view height:100%）
   * 在移动端使溢出内容只绘制不进滚动流（#content 无可滚距离）——放开为 auto 让页面
   * 自然滚动；桌面 ≥768px 的 100% + 泳道内滚行为不变 */
  .center-view { height: auto; }
  /* #130：统计卡独占顶栏首行（topbar-row-center 已有 wrap 降级——flex-basis 100%
   * 换行成整行）；卡内两列紧凑（标签左 / 数值右同行，#129 已验收形态） */
  .topbar .home-stat-row {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs);
  }
  .topbar .home-stat-row .stat-card {
    flex-direction: row; align-items: baseline; justify-content: space-between;
    padding: 6px 8px;
  }
  .topbar .home-stat-row .stat-value { font-size: var(--font-size-md); }
  .blackboard-view { min-height: 0; }
}
/* 窄高度（<600px 窗口高，沿 #113 home §9.1）：顶栏统计卡压缩为紧凑单行 */
@media (max-height: 599px) and (min-width: 768px) {
  .topbar .home-stat-row .stat-card { padding: 2px 8px; }
  .topbar .home-stat-row .stat-value { font-size: var(--font-size-md); }
}
/* relay 只读态：快捷工具仅保留刷新（按钮由 JS 按 readonly 渲染，此处兜底隐藏写入口残留） */
.mode-relay .quick-btn[data-quick="new-task"],
.mode-relay .quick-btn[data-quick="docs"] { display: none; }

/* ============ feed 行（通知中心时间线与详情页交互时间线共用，#113） ============ */

.feed-row {
  display: flex; gap: 8px; padding: 6px var(--spacing-sm); border-top: 1px solid var(--color-lane);
  font-size: var(--font-size-xs); width: 100%; text-align: left; background: none; border: none;
  border-top: 1px solid var(--color-lane); cursor: pointer; font: inherit; color: inherit;
}
.feed-row:first-of-type { border-top: none; }
.feed-row:hover { background: var(--color-accent-soft); }
.feed-time { font-family: var(--font-mono); color: var(--color-text-weak); flex: none; width: 44px; }
.feed-body { min-width: 0; }
.feed-title { color: var(--color-text); font-weight: var(--font-weight-medium); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.feed-text { color: var(--color-text-weak); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ============ 文件/技能/通知三中心页 ============ */

.page-view { flex: 1; min-height: 0; overflow-y: auto; padding: var(--spacing-lg); }
.page-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--spacing-md); gap: var(--spacing-sm); }
.page-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
.page-note { font-size: var(--font-size-sm); color: var(--color-text-weak); }
.file-group { margin-bottom: var(--spacing-md); }
.file-group-head {
  display: flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) 0;
  width: 100%; background: none; border: none; font: inherit; cursor: pointer; text-align: left;
  color: var(--color-text); border-radius: var(--radius-sm);
}
.file-group-head:hover { background: var(--color-accent-soft); }
.file-group-title { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.file-group-meta { font-size: var(--font-size-xs); color: var(--color-text-weak); white-space: nowrap; }
.file-rows { border-top: 1px solid var(--color-lane); }
.file-row {
  display: flex; align-items: center; gap: var(--spacing-sm); width: 100%; padding: 7px var(--spacing-sm);
  border: none; border-bottom: 1px solid var(--color-lane); background: none; font: inherit;
  cursor: pointer; text-align: left; color: var(--color-text); font-size: var(--font-size-sm);
}
.file-row:hover { background: var(--color-accent-soft); }
.file-doc-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.file-doc-size, .file-doc-time { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-weak); flex: none; }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--spacing-sm); }
.skill-tile {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--spacing-sm); box-shadow: var(--shadow-1);
}
.skill-tile-head { display: flex; justify-content: space-between; gap: var(--spacing-xs); align-items: baseline; }
.skill-tile-name { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.skill-tile-agent {
  font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-weak);
  border: 1px solid var(--color-border); border-radius: 4px; padding: 1px 6px; flex: none;
}
.skill-tile-desc { margin-top: 4px; font-size: var(--font-size-sm); color: var(--color-text-weak); }
.notify-load { display: block; margin: var(--spacing-md) auto; }