* {
  box-sizing: border-box;
}

/*
  iPad/iOS：长按界面元素会触发系统自带的文字选择（蓝色半透明选框）和放大镜/复制菜单。
  定位条那种"按住不放上下滑"的手势尤其容易被误判成选文字，整条定位条会被刷蓝。

  这里按"默认不可选，正文区域再放开"的思路处理：
  - -webkit-user-select/user-select: none 关掉文字选中
  - -webkit-touch-callout: none 关掉长按弹出的"拷贝/查询"系统菜单和图片长按预览
  - -webkit-tap-highlight-color: transparent 关掉点击时的灰色高亮块（iOS默认会闪一下）
  真正需要选中/复制的地方（输入框、对话正文、简历解析结果等）在下面单独放开，
  否则用户连自己填的内容都没法复制。
*/
html {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/*
  ==== 触摸端图标与热区的尺寸底线（技术要求，见 HANDOFF「触摸端尺寸规范」）====
  这个问题反复出现过三次（侧栏折叠箭头、输入框麦克风、画布复位按钮），
  统一在这里兜底，新加控件不用每次再想一遍：
  - 任何**可点击**的图标不小于 20px；纯装饰性图标可以更小
  - 任何可点击元素的**实际热区**不小于 44×44（iOS 人机界面指南的最小推荐值）
  .tap-target 用来给"视觉上必须小、但要好点"的控件补热区：
  视觉尺寸照旧，靠一个透明的伪元素把可点区域撑到 44×44，不影响布局。
*/
.tap-target {
  position: relative;
}
.tap-target::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}

input,
textarea,
select,
[contenteditable="true"],
.chat-msg__bubble,
.qcard__voice-hint,
.selectable {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--color-bg-page);
  color: var(--color-text-title);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; /* demo仅横屏，禁止整页滚动，滚动发生在各模块内部 */
}

#app {
  display: flex;
  width: 100vw;
  height: 100vh;
  min-width: 1024px; /* iPad 横屏基准宽度（如iPad经典1024×768），先不做竖屏适配 */
  overflow-x: hidden; /* 页面本身永远不横向滚动；1024px下务必确认各模块内容宽度总和不超预算 */
}

/* ---------- 侧边导航 LIST ----------
   两种形态（用户反馈第15轮）：
   - 展开态（默认，设计稿 frame「首页」）：--sidebar-width，图标+文字
   - 收起态（设计稿 Desktop-11）：--sidebar-width-figma(70px)，纯图标
   点 logo 行右侧的 ph:arrow-line-left-bold 收起，收起后同一个按钮变成
   ph:arrow-line-right-bold 再点展开。宽度用 transition 过渡，不是硬切。 */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  /* [FIGMA-精确] 设计稿 frame「首页」里侧栏底色是 #F9F9F9（Rectangle 13419），不是白色，
     选中项才是白色——所以选中态是"灰底上浮起一块白"，而不是"白底上压一块灰" */
  background: var(--color-bg-page);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) 0;
  transition: width 0.2s ease;
  overflow: hidden;
}

.sidebar.is-collapsed {
  width: var(--sidebar-width-figma);
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
  font-weight: 600;
  font-size: var(--font-size-md);
  user-select: none;
  cursor: default;
}

/* 视觉 36×36、图标 20px；实际热区由 .tap-target 撑到 44×44 */
.sidebar__toggle {
  margin-left: auto;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar__toggle:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-title);
}
/* 热区统一交给 .tap-target 兜底（见文件顶部的触摸端尺寸规范），这里不再重复写一份 */
/* 收起态下所有文字标签都收掉，只留图标，并且整列居中 */
.sidebar.is-collapsed .sidebar__logo {
  padding: 0 0 var(--space-4);
  flex-direction: column;
  gap: var(--space-2);
}
.sidebar.is-collapsed .sidebar__logo-text,
.sidebar.is-collapsed .nav-item__label,
.sidebar.is-collapsed .sidebar__foot-text {
  display: none;
}
.sidebar.is-collapsed .sidebar__toggle {
  margin-left: 0;
}
.sidebar.is-collapsed .sidebar__nav {
  padding: 0 var(--space-2);
}
.sidebar.is-collapsed .nav-item {
  justify-content: center;
  padding: 0;
  height: 44px;
}
.sidebar.is-collapsed .nav-item.is-active::before {
  left: -6px;
  height: 20px;
}
.sidebar.is-collapsed .sidebar__footer {
  padding: var(--space-3) var(--space-2);
}

.sidebar__logo-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sidebar__logo-text {
  display: inline-flex;
  align-items: center;
}

/* [FIGMA-精确] 行 200×52、圆角12、距侧栏左边 24px（244 - 24*2 = 196 ≈ 200） */
.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 var(--space-5);
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 52px;
  padding: 0 0 0 28px;
  border-radius: var(--radius-lg);
  /* [FIGMA-精确] 图标和文字在默认态/选中态是**同一个深色 #1D2129**，
     两个状态的区别只在"白色圆角底 + 半粗字重 + 左侧深色竖条"，不靠变灰来区分 */
  color: var(--color-text-title);
  cursor: pointer;
  border: none;
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  text-align: left;
  width: 100%;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* [FIGMA-精确] 选中态＝白色圆角12的行 + 半粗字重 + 一条 4×24 的**深色 #1D2129** 竖条，
   竖条贴在**这一行自己的左边缘**（不是侧栏最左边缘），垂直居中。
   之前做成了品牌橙色 + 贴侧栏边缘，颜色和位置两处都不对。 */
.nav-item.is-active {
  background: var(--color-bg-panel);
  font-weight: var(--font-weight-semibold);
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-text-title);
}

/* 图标已换成设计稿导出的真实 Phosphor SVG（见 js/components/icons.js），
   不再是带描边的方块占位符 */
.nav-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-item__icon svg,
.icon {
  display: block;
}

/* 设计稿 frame「首页」底部：两个描边胶囊按钮（返回旧版 / N职慧点），
   收起态只留图标居中 */
.sidebar__footer {
  margin-top: auto;
  padding: var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sidebar__foot-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-panel);
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--font-size-xs);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sidebar__foot-btn:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-text-disabled);
}
.sidebar__foot-icon {
  flex-shrink: 0;
  display: inline-flex;
}
.sidebar__foot-icon--brand {
  color: var(--color-brand);
}
.sidebar.is-collapsed .sidebar__foot-btn {
  justify-content: center;
  padding: var(--space-2) 0;
}

/* ---------- 主区域 ---------- */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ---------- 顶部栏 BAR ---------- */
.topbar {
  height: var(--topbar-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-panel);
}

.topbar__title {
  font-size: var(--font-size-md);
  font-weight: 600;
}

.topbar__search {
  flex: 1;
  max-width: 480px;
  margin: 0 var(--space-5);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.topbar__search-icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-text-muted);
}

.topbar__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

/* ---------- 模块容器 ---------- */
.module-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5);
}

.module-view[hidden] {
  display: none;
}

.placeholder-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-subtle);
  border: 1px dashed var(--color-text-disabled);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
  padding: var(--space-3);
}