/* web/css/sidebar.css —— 左侧栏（DeepSeek Harness 风格）：对话工作区归类 + 新建对话
 *
 * 布局：
 *   桌面 ≥1024px：固定左栏 260px（可折叠 56px 图标条）；body 加 padding-left → 内容区右移，
 *                 顶部 Navbar 仍通栏（导航与侧栏并存，与 DSH 一致）。
 *   移动 <1024px：默认隐藏；汉堡按钮 → 左侧抽屉（84vw，可滚）+ 遮罩；点条目自动收起。
 *   全部用主题令牌（日间 Anthropic / 暗夜 Moonshot），不引入任何外链资源。
 *
 * 局部类名前缀 sb-（sidebar），避免与既有页面样式冲突。
 */

:root {
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 56px;
}

/* ============================================================
   骨架
   ============================================================ */
.app-sidebar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 84vw;
  max-width: 320px;
  z-index: 400;
  background: var(--c-bg);
  border-right: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .app-sidebar { transition: none; }
}
body.sidebar-drawer-open .app-sidebar { transform: none; }

.app-sidebar-mask {
  position: fixed;
  inset: 0;
  z-index: 399;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
body.sidebar-drawer-open .app-sidebar-mask { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .app-sidebar-mask { transition: none; }
}

/* 桌面：常驻左栏（导航栏在它上方，两者并存） */
@media (min-width: 1024px) {
  .app-sidebar {
    top: var(--nav-h);
    width: var(--sidebar-w);
    max-width: none;
    transform: none;
    transition: width 0.18s ease;
    z-index: 150;                    /* 低于 Navbar(200)，高于页面内容 */
  }
  body.sidebar-collapsed .app-sidebar { width: var(--sidebar-w-collapsed); }
  /* 内容区右移：只推 body 内容，Navbar 通栏不掉位 */
  body { padding-left: var(--sidebar-w); }
  body.sidebar-collapsed { padding-left: var(--sidebar-w-collapsed); }
  .app-sidebar-mask { display: none; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .app-sidebar { transition: none; }
}

/* ============================================================
   ① 头部：新建对话 + 新建工作区
   ============================================================ */
.sb-head {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--c-line);
  position: relative;
}
.sb-new-conv {
  width: 100%;
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--c-primary);
  color: var(--c-primary-ink);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  padding: 0 var(--space-3);
  transition: background 0.15s ease, transform 0.06s ease;
  -webkit-tap-highlight-color: transparent;
}
.sb-new-conv:hover { background: var(--c-primary-hover); }
.sb-new-conv:active { transform: scale(0.985); }
.sb-new-conv:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.sb-new-plus { font-size: 16px; line-height: 1; }

/* 折叠手柄：固定在页面层（不放在 aside 内，避免被 sidebar 的 overflow 裁剪 / 遮挡），
   骑在侧栏右描边上；移动端隐藏。 */
.sb-collapse {
  position: fixed;
  top: calc(var(--nav-h) + 14px);
  left: calc(var(--sidebar-w) - 13px);
  z-index: 160;                    /* 高于侧栏(150)，低于 Navbar(200) */
  width: 26px; height: 26px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  background: var(--c-card);
  color: var(--c-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: left 0.18s ease, color 0.15s ease, background 0.15s ease;
}
.sb-collapse:hover { color: var(--c-text); background: var(--c-card-2); }
.sb-collapse:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
body.sidebar-collapsed .sb-collapse { left: calc(var(--sidebar-w-collapsed) - 13px); }
@media (min-width: 1024px) {
  .sb-collapse { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-collapse { transition: none; }
}

.sb-new-ws {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  padding: 4px 2px;
  background: none;
  border: none;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.sb-new-ws:hover { color: var(--c-text); background: var(--c-tint-primary); }
.sb-new-ws:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ============================================================
   ② 列表：工作区分组 + 会话条目
   ============================================================ */
.sb-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2) var(--space-2) var(--space-4);
}

.sb-group { margin-bottom: var(--space-2); }
.sb-group-head {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--radius-xs);
}
.sb-group-head:hover { background: var(--c-tint-primary); }
.sb-group-toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 7px 6px;
  cursor: pointer;
  text-align: left;
  color: var(--c-ink);
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
}
.sb-group-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.sb-caret {
  font-size: 10px;
  color: var(--c-muted);
  transition: transform 0.15s ease;
  transform-origin: 50% 50%;
  flex-shrink: 0;
}
.sb-group.collapsed .sb-caret { transform: rotate(-90deg); }
.sb-group-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-group-count {
  flex-shrink: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
  background: var(--c-card-2);
  border-radius: 999px;
  padding: 0 6px;
  line-height: 16px;
}
.sb-group-more {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: none;
  background: none;
  border-radius: var(--radius-xs);
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.sb-group-head:hover .sb-group-more,
.sb-group-more:focus-visible { opacity: 1; background: var(--c-card-2); outline: none; }
.sb-group.collapsed .sb-group-body { display: none; }

.sb-group-body { display: flex; flex-direction: column; gap: 1px; }
.sb-empty {
  padding: 6px 10px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.sb-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--c-ink);
  transition: background 0.14s ease, color 0.14s ease;
}
.sb-item:hover { background: var(--c-tint-primary); color: var(--c-text); }
.sb-item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.sb-item.active { background: var(--c-card-2); color: var(--c-text); }
.sb-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--c-primary);
}
.sb-item-main { flex: 1 1 auto; min-width: 0; }
.sb-item-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-item.active .sb-item-title { font-weight: 700; }
.sb-item-time {
  font-size: 11px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
/* 悬停/聚焦才出现的条目操作（键盘同样可达：focus-within） */
.sb-item-acts {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}
.sb-item:hover .sb-item-acts,
.sb-item:focus-within .sb-item-acts { opacity: 1; pointer-events: auto; }
.sb-act {
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--c-card);
  border-radius: var(--radius-xs);
  color: var(--c-ink);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.sb-act:hover { background: var(--c-line); color: var(--c-text); }
.sb-act:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.sb-act-del:hover { color: var(--c-up); }

/* ============================================================
   ③ 底部：同步状态 + 我的
   ============================================================ */
.sb-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--c-line);
  padding: var(--space-2) var(--space-3) calc(env(safe-area-inset-bottom, 0px) + var(--space-3));
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.sb-sync {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-me {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--c-card-2);
  color: var(--c-text);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
}
.sb-me:hover { background: var(--c-line); text-decoration: none; }
.sb-me:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ============================================================
   折叠态（桌面 56px 图标条）
   ============================================================ */
@media (min-width: 1024px) {
  .app-sidebar.is-collapsed .sb-new-label,
  .app-sidebar.is-collapsed .sb-new-ws,
  .app-sidebar.is-collapsed .sb-group-title,
  .app-sidebar.is-collapsed .sb-group-count,
  .app-sidebar.is-collapsed .sb-group-body,
  .app-sidebar.is-collapsed .sb-item-time,
  .app-sidebar.is-collapsed .sb-item-acts,
  .app-sidebar.is-collapsed .sb-me-text,
  .app-sidebar.is-collapsed .sb-sync { display: none; }
  .app-sidebar.is-collapsed .sb-head { padding: var(--space-3) 6px var(--space-2); }
  .app-sidebar.is-collapsed .sb-new-conv { padding: 0; }
  .app-sidebar.is-collapsed .sb-group-toggle { justify-content: center; padding: 7px 2px; }
  .app-sidebar.is-collapsed .sb-item { justify-content: center; padding: 7px 2px; }
  .app-sidebar.is-collapsed .sb-item-title {
    font-size: 12px;
    text-align: center;
    letter-spacing: 0;
  }
  .app-sidebar.is-collapsed .sb-group-more { display: none; }
  .app-sidebar.is-collapsed .sb-foot { justify-content: center; padding-left: 0; padding-right: 0; }
  .app-sidebar.is-collapsed .sb-me { padding: 0 8px; }
}

/* ============================================================
   弹层：⋯ 菜单 / 重命名
   ============================================================ */
.sb-menu {
  position: fixed;
  z-index: 600;
  min-width: 168px;
  max-width: 260px;
  padding: 4px;
  background: var(--c-card);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-hover);
}
.sb-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: var(--radius-xs);
  font-size: var(--fs-sm);
  color: var(--c-text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-menu-item:hover { background: var(--c-tint-primary); }
.sb-menu-item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.sb-menu-item.danger { color: var(--c-up); }
.sb-menu-item.disabled { color: var(--c-muted); cursor: not-allowed; }
.sb-menu-sep { height: 1px; margin: 4px 6px; background: var(--c-line); }

.sb-rename-input {
  width: 100%;
  margin-top: 6px;
  padding: 10px var(--space-3);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  background: var(--c-card-2);
  color: var(--c-text);
  font-size: var(--fs-md);
  font-family: inherit;
}
.sb-rename-input:focus { outline: none; box-shadow: var(--shadow-focus); }

/* ============================================================
   汉堡按钮（Navbar 内，仅 <1024px 显示）
   ============================================================ */
.app-navbar-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: none;
  background: none;
  border-radius: var(--radius-xs);
  color: var(--c-ink);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.app-navbar-burger:hover { background: var(--c-tint-primary); color: var(--c-text); }
.app-navbar-burger:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.app-navbar-burger svg { width: 20px; height: 20px; display: block; }
@media (max-width: 1023px) {
  .app-navbar-burger { display: inline-flex; }
}
/* 窄屏（≤400px）：汉堡按钮挤占后 Navbar 原 5 项 + logo 会溢出 3px（实测 360px：inner 363/360），
   这里把内边距/间距各收 2–5px，四档视口都零横向溢出（实测 360px → 343/360）。 */
@media (max-width: 400px) {
  .app-navbar-inner { padding: 0 2px; gap: 2px; }
  .app-navbar-item { padding: 0 5px; }
  .nav-user { padding: 0 5px; }
  .app-navbar-burger { width: 32px; }
}