/* layout.css —— 骨架：左侧栏 + 右侧内容；没登录时是居中的登录框。
 * 结构照 Claude 网页的侧栏（字标 · 收起、搜索、新建、导航、最近、左下角账号），视觉值全走 tokens.css（D084），长什么样照 D092 / docs/reference/ui-design.md。 */

.shell { display: flex; height: 100vh; }

/* 线条图标：跟所在那行字同色，悬停、选中时一起变亮；不用 emoji（emoji 自带颜色，整页纯灰阶就破了） */
.icon-defs { display: none; }
.ic {
  flex-shrink: 0;
  width: var(--ic);
  height: var(--ic);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic.sm { width: var(--ic-sm); height: var(--ic-sm); }

/* ── 侧栏 ─────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-6);
  background: var(--sidebar-bg);
  border-right: var(--border-w) solid var(--border);
}

/* 顶端对齐：字底下有版本号时，收起按钮跟字那一行齐，不落到两行中间 */
.side-top { display: flex; align-items: start; justify-content: space-between; padding: var(--space-1) var(--space-3) var(--space-6) var(--space-4); }

/* 登录框的字标：官网的图标（openlucy.svg 是官网 favicon.svg 的副本）+ OpenLucy，字是正文色不是青（D092） */
.brand-mark { display: flex; align-items: center; gap: var(--space-5); }
.brand-logo { flex-shrink: 0; width: var(--logo); height: var(--logo); }
.brand-name {
  font-family: var(--font-brand);
  font-size: var(--fs-brand);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text);
  white-space: nowrap;
}
/* 侧栏的字标：照 OpenLucy 侧栏，只有字，底下一行版本号，不带图标。平时正文白；组织里有机器人在跑任务（busy，app.js 的 renderBrand）
   变主题青、光在呼吸，色和光照 OpenLucy .sidebar-brand（D115）。只动 text-shadow：版本号是兄弟不是孩子，不跟着亮 */
.side-brand { display: flex; flex-direction: column; }
.side-brand.busy .brand-name {
  color: var(--accent);
  text-shadow: var(--brand-shadow);
  animation: brand-breath var(--brand-breath) ease-in-out infinite;
}
@keyframes brand-breath {
  0%, 100% { text-shadow: var(--brand-shadow-lo); }
  50%      { text-shadow: var(--brand-shadow-hi); }
}
/* 照 OpenLucy 的 .sidebar-version：等宽、小号、三级灰 */
.brand-version {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  color: var(--text-dim);
}

/* 搜索框（设置浮窗左栏）：图标在框里左边 */
.side-search {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--h-nav);
  padding: 0 var(--space-6);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-dim);
}
.side-search:focus-within { border-color: var(--border-soft); }
.side-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-base);
}
.side-search-input:focus-visible { outline: none; }

/* 侧栏里的一项（导航、设置分类都用它）：图标 + 字，一行 */
.side-item {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  height: var(--h-nav);
  padding: 0 var(--space-6);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-base);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.side-item:hover  { background: var(--bg-hover); color: var(--text); }
/* 选中：灰底、正文色字，图标是品牌青 */
.side-item.active { background: var(--active-bg); color: var(--text); font-weight: var(--fw-medium); }
.side-item.active .ic { color: var(--accent); }
.side-label { overflow: hidden; text-overflow: ellipsis; }

.side-nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.side-group { padding: var(--space-8) var(--space-6) var(--space-3); font-size: var(--fs-note); color: var(--text-dim); }

/* 左下角：账号条 + 下载按钮；账号菜单从这里往上弹 */
.side-foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--border);
}

/* 侧栏收起：只剩一条图标，字、分组标题、字标都藏起来 */
.sidebar.collapsed { width: var(--rail-w); padding-inline: var(--space-2); }
.sidebar.collapsed .side-brand,
.sidebar.collapsed .side-label,
.sidebar.collapsed .side-group,
.sidebar.collapsed .user-text,
.sidebar.collapsed .user-chip > .ic,
.sidebar.collapsed .side-foot > .icon-btn { display: none; }
.sidebar.collapsed .side-top { justify-content: center; padding-inline: 0; }
.sidebar.collapsed .side-item { justify-content: center; padding: 0; }
.sidebar.collapsed .user-chip { justify-content: center; padding: 0; }

/* ── 内容区：上面顶栏（work.css .top-bar），下面滚动的内容 ──────────────────── */
/* min-width: 0 不能省：flex 子项默认 min-width:auto，内容一宽就把侧栏挤扁 */
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* min-height: 0 同理：不写的话内容一高就撑开整列，内容区自己滚不起来 */
.content { flex: 1; min-height: 0; overflow-y: auto; padding: var(--page-pad-y) var(--page-pad-x); }

.page { display: none; }
.page.active { display: block; }

/* 页头：标题一行，说明另起一行（二级字色） */
.page-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.page-sub { font-size: var(--fs-base); color: var(--text-2); }

/* 块与块之间的间距只在这里定一次，各块自己不带 margin-bottom */
.v-stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* ── 登录框（没登录时整页只有它）─────────────────────────────────────────── */
.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7);
}
.gate-card {
  width: 100%;
  max-width: var(--gate-w);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  background: var(--bg-card);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.gate-card .btn { height: var(--h-lg); font-size: var(--fs-base); }