/* ============================================================
   Sidebar — left navigation rail (home page only)
   ============================================================ */

:root{
  --ai-sb-width: 264px;
  --ai-sb-bg: #ffffff;            /* white */
  --ai-sb-border: rgba(0,0,0,0.06);
  --ai-sb-hover: rgba(0,0,0,0.035);
  --ai-sb-soft:  rgba(0,0,0,0.045); /* secondary highlight (e.g. 首页) */
  --ai-sb-active: #F7F7F7;       /* primary active pill */
  --ai-sb-ink: #1d1d1f;
  --ai-sb-ink-2: #5a5a62;
  --ai-sb-ink-3: #9a9aa0;
  --ai-sb-badge-bg: #ececea;
  --ai-sb-badge-ink: #8a8a90;
  --ai-sb-serif: "Iowan Old Style", "Apple Garamond", "Baskerville", "Times New Roman", Georgia, serif;
}

.ai-sidebar{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--ai-sb-width);
  z-index: 20;
  background: var(--ai-sb-bg);
  border-right: 1px solid #e6e6e2;
  display: flex;
  flex-direction: column;
  padding: 20px 14px 14px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", system-ui, sans-serif;
  letter-spacing: -0.005em;
  overflow: hidden;
  min-height: 0;
}

/* nav 区域可独立滚动，留住顶部 greeting 和底部 user/settings */
.ai-sb-nav{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.ai-sb-nav::-webkit-scrollbar{ width: 6px; }
.ai-sb-nav::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.08); border-radius: 4px; }

/* greeting */
.ai-sb-greeting{
  font-family: var(--ai-sb-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ai-sb-ink);
  padding: 6px 10px 26px;
}
.ai-sb-logo{
  display: block;
  width: 100%;
  height: auto;
  max-width: 140px;
}

/* nav */
.ai-sb-nav{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.ai-sb-row{
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--ai-sb-ink);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
  user-select: none;
}
.ai-sb-row:hover{ background: var(--ai-sb-hover); }
.ai-sb-row .ai-sb-icon{
  width: 16px;
  height: 16px;
  color: var(--ai-sb-ink);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  stroke-width: 1.5;
}
.ai-sb-row .ai-sb-icon svg{ width: 100%; height: 100%; }

/* sub nav */
.ai-sb-subnav{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0 4px;
  margin-left: 0;
}
.ai-sb-sub{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--ai-sb-ink-2);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ai-sb-sub:hover{
  background: var(--ai-sb-soft);
  color: var(--ai-sb-ink);
}
/* secondary / current-trail state (e.g. 首页 in screenshot) */
.ai-sb-sub.is-current{
  background: var(--ai-sb-soft);
  color: var(--ai-sb-ink);
  font-weight: 400;
}
/* primary active state */
.ai-sb-sub.is-active{
  background: var(--ai-sb-active);
  color: var(--ai-sb-ink);
  font-weight: 600;
}
.ai-sb-sub .ai-sb-label{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-sb-sub .ai-sb-badge{
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  color: var(--ai-sb-badge-ink);
  background: rgba(0,0,0,0.05);
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

/* footer block */
.ai-sb-footer{
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-sb-settings{
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--ai-sb-ink-2);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.ai-sb-settings:hover{ background: var(--ai-sb-hover); color: var(--ai-sb-ink); }
.ai-sb-settings .ai-sb-icon{ width: 16px; height: 16px; color: var(--ai-sb-ink-3); }
.ai-sb-settings .ai-sb-icon svg{ width:100%; height:100%; }

.ai-sb-userbar{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 8px 8px;
  border-top: 1px solid var(--ai-sb-border);
  margin-top: 6px;
  cursor: pointer;
}
.ai-sb-avatar{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background:
    repeating-linear-gradient(135deg,
      #c7b9a8 0 6px,
      #b8a797 6px 12px),
    #c0b0a0;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.08);
}
.ai-sb-who{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}
.ai-sb-handle{
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ai-sb-ink);
}
.ai-sb-role{
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--ai-sb-ink-3);
  letter-spacing: 0.01em;
}
.ai-sb-chev{
  width: 14px;
  height: 14px;
  color: var(--ai-sb-ink-3);
  flex-shrink: 0;
}
.ai-sb-chev svg{ width:100%; height:100%; }

/* ============================================================
   Layout adjustments — only when sidebar is mounted
   ============================================================ */
.ai-has-sidebar.ft-page{
  padding-left: var(--ai-sb-width);
}
.ai-has-sidebar .ft-header{
  left: var(--ai-sb-width);
}

@media (max-width: 900px){
  .ai-sidebar{ display: none; }
  .ai-has-sidebar.ft-page{ padding-left: 0; }
  .ai-has-sidebar .ft-header{ left: 0; }
}