/* ════════════════════════════════════════
   SIDEBAR COMPONENT — 所有页面共用
   引入方式：<link rel="stylesheet" href="components/sidebar.css"/>
════════════════════════════════════════ */

/* ── 布局变量（如页面内 :root 没有则此处兜底） ── */
:root {
  --sidebar-w:     220px;
  --sidebar-w-col: 52px;
  --sb-dur:        200ms;
  --sb-ease:       cubic-bezier(.22,1,.36,1);
}

/* ── Sidebar 容器 ── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  height: 100vh;
  position: fixed;
  left: 0; top: 0;
  display: flex;
  flex-direction: column;
  z-index: 200;
  border-right: 1px solid var(--c-separator);
  overflow: hidden;
  transition: width var(--sb-dur) var(--sb-ease);
}

/* ── Logo 区 ── */
.sidebar-logo {
  padding: 18px var(--sp-4) 14px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--c-separator);
  flex-shrink: 0;
  transition: padding var(--sb-dur) var(--sb-ease);
  min-width: var(--sidebar-w); /* 防止 flex 收缩影响布局 */
}
.logo-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(140deg, #007AFF, #5AC8FA);
  display: flex; align-items: center; justify-content: center;
}
.logo-icon svg { color: #fff; }
.logo-name {
  font-size: var(--t-sm); font-weight: 700;
  color: var(--c-gray-1); letter-spacing: -.3px;
  flex: 1; overflow: hidden;
  transition: opacity var(--sb-dur), width var(--sb-dur);
  white-space: nowrap;
}

/* ── 收起/展开切换按钮 ── */
.sb-toggle {
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-gray-5); cursor: pointer;
  transition: background var(--dur-fast, 120ms), color var(--dur-fast, 120ms);
  border: none; background: none;
}
.sb-toggle:hover { background: rgba(0,0,0,.06); color: var(--c-gray-3); }
.sb-toggle svg {
  transition: transform var(--sb-dur) var(--sb-ease);
  flex-shrink: 0;
}

/* ── 导航区 ── */
.sidebar-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: var(--sp-3);
  display: flex; flex-direction: column; gap: 2px;
  min-width: var(--sidebar-w);
}
.nav-section-label {
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-gray-5);
  padding: var(--sp-3) var(--sp-2) var(--sp-1);
  white-space: nowrap;
  transition: opacity var(--sb-dur);
}
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px var(--sp-3); border-radius: var(--r-md);
  font-size: var(--t-sm); font-weight: 500; color: var(--c-gray-3);
  cursor: pointer;
  transition: background var(--dur-fast, 120ms), color var(--dur-fast, 120ms),
              padding var(--sb-dur) var(--sb-ease), justify-content var(--sb-dur);
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
}
.nav-item:hover { background: rgba(0,0,0,.05); color: var(--c-gray-1); }
.nav-item.active {
  background: var(--c-blue-light); color: var(--c-blue);
  border-color: rgba(0,122,255,.15);
}
.nav-item-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.nav-item-text {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: opacity var(--sb-dur), max-width var(--sb-dur);
}
.nav-new-btn {
  margin-left: auto; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px;
  background: rgba(0,0,0,.07);
}
.nav-badge {
  margin-left: auto; flex-shrink: 0;
  font-size: 9px; font-weight: 600;
  font-family: 'Fira Code', monospace;
  padding: 2px 6px; border-radius: 10px;
  background: rgba(0,0,0,.07); color: var(--c-gray-4);
  white-space: nowrap;
}
.nav-item-icon-sm {
  width: 14px; height: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.nav-item-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 账号区 ── */
.sidebar-account {
  border-top: 1px solid var(--c-separator);
  padding: var(--sp-3); flex-shrink: 0;
  min-width: var(--sidebar-w);
}
.account-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2); border-radius: var(--r-md);
  cursor: pointer; transition: background var(--dur-fast, 120ms);
  overflow: hidden;
}
.account-row:hover { background: rgba(0,0,0,.05); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #5AC8FA, #007AFF);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-xs); font-weight: 700; color: #fff;
}
.account-info { flex: 1; min-width: 0; overflow: hidden; }
.account-name {
  font-size: var(--t-sm); font-weight: 600; color: var(--c-gray-1);
  white-space: nowrap;
}
.account-sub  { font-size: var(--t-xs); color: var(--c-gray-4); white-space: nowrap; }
.power-chip {
  display: flex; align-items: center; gap: 3px;
  padding: 3px 7px; border-radius: 20px; flex-shrink: 0;
  background: rgba(255,149,0,.10); border: 1px solid rgba(255,149,0,.18);
  font-size: 10px; font-family: 'Fira Code', monospace;
  font-weight: 500; color: #C75000; white-space: nowrap;
}

/* ── 账号弹出菜单 ── */
.account-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: var(--sp-3);
  right: var(--sp-3);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--glass-bg-heavy, rgba(255,255,255,.95));
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255,255,255,.60);
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.07);
  z-index: 300;
  transform-origin: bottom center;
  animation: acct-menu-in 140ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes acct-menu-in {
  from { opacity: 0; transform: scale(.95) translateY(4px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);   }
}
.account-menu.closing {
  animation: acct-menu-out 100ms ease forwards;
}
@keyframes acct-menu-out {
  to { opacity: 0; transform: scale(.95) translateY(4px); }
}
.acct-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  font-size: 13px; font-weight: 500; color: var(--c-gray-2, #3A3A3C);
  cursor: pointer;
  transition: background 100ms;
  border: none; background: none; width: 100%; text-align: left;
  font-family: inherit;
}
.acct-menu-item:hover { background: rgba(0,0,0,.05); }
.acct-menu-item.danger { color: #FF3B30; }
.acct-menu-item.danger:hover { background: rgba(255,59,48,.07); }
.acct-menu-sep {
  height: 1px; background: rgba(60,60,67,.10); margin: 2px 0;
}

/* 收起状态：菜单改为固定在侧栏右侧弹出 */
body.sb-col .account-menu {
  left: calc(100% + 8px);
  right: auto;
  bottom: var(--sp-3);
  width: 180px;
  transform-origin: bottom left;
}

/* ── Main content & bottom bar 跟随过渡 ── */
.main-content {
  margin-left: var(--sidebar-w);
  transition: margin-left var(--sb-dur) var(--sb-ease);
}
.bottom-bar {
  left: var(--sidebar-w);
  transition: left var(--sb-dur) var(--sb-ease);
}

/* ════════════════════════════════════════
   收起状态 — body.sb-col
════════════════════════════════════════ */
body.sb-col .sidebar         { width: var(--sidebar-w-col); }
body.sb-col .main-content    { margin-left: var(--sidebar-w-col); }
body.sb-col .bottom-bar      { left: var(--sidebar-w-col); }

/* Logo 区：只显示 toggle 按钮 */
body.sb-col .sidebar-logo {
  padding: 14px var(--sp-2);
  justify-content: center;
  min-width: unset;
}
body.sb-col .logo-icon   { display: none; }
body.sb-col .logo-name   { display: none; }

/* Toggle 按钮箭头反转 */
body.sb-col .sb-toggle svg { transform: rotate(180deg); }

/* Nav 区：只显示图标，隐藏所有文字 */
body.sb-col .sidebar-nav  { padding: var(--sp-3) var(--sp-2); min-width: unset; }
body.sb-col .nav-section-label { opacity: 0; height: 0; padding: 0; margin: 0; pointer-events: none; }
body.sb-col .nav-item {
  justify-content: center;
  padding: 9px;
  font-size: 0; /* 隐藏文字节点 */
}
body.sb-col .nav-item-text,
body.sb-col .nav-item-title,
body.sb-col .nav-badge,
body.sb-col .nav-new-btn   { display: none; }

/* 账号区：只显示头像 */
body.sb-col .sidebar-account { min-width: unset; padding: var(--sp-3) var(--sp-2); }
body.sb-col .account-row  { justify-content: center; }
body.sb-col .account-info,
body.sb-col .power-chip   { display: none; }

/* ── Tooltip（收起时 hover 提示） ── */
body.sb-col .nav-item { position: relative; }
body.sb-col .nav-item::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%);
  background: rgba(28,28,30,.88);
  color: #fff; font-size: 12px; font-weight: 500;
  padding: 5px 10px; border-radius: 8px;
  white-space: nowrap; pointer-events: none;
  opacity: 0;
  transition: opacity 120ms;
  z-index: 300;
}
body.sb-col .nav-item:hover::after { opacity: 1; }