/* ============================================================================
   小羽毕业创作工作台 · 工作台布局与页面组件（xywb- 命名空间）
   依赖：tokens.css（设计令牌）+ components.css（共享组件）
   本文件只写「布局」与「工作台专有块」，不重复定义按钮/表单等基础组件。
   ============================================================================ */

/* ---------------------------------------------------------------- 页面骨架 */
body.xywb-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 420px at 50% -180px, var(--xy-blue-050), transparent 70%),
    var(--xy-paper);
}

.xywb-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--xy-blue-600);
  color: var(--xy-ink-inverse);
  padding: var(--xy-s2) var(--xy-s4);
  border-radius: 0 0 var(--xy-r-sm) 0;
  z-index: 200;
}
.xywb-skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- 头部 */
.xywb-header {
  position: sticky;
  top: 0;
  z-index: var(--xy-z-header);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--xy-line);
}
.xywb-header-inner {
  max-width: var(--xy-w-page);
  margin: 0 auto;
  padding: 0 var(--xy-s5);
  min-height: var(--xy-header-h);
  display: flex;
  align-items: center;
  gap: var(--xy-s4);
  flex-wrap: wrap;
}

.xywb-brand { display: flex; align-items: center; gap: var(--xy-s2); text-decoration: none; color: var(--xy-ink); }
.xywb-brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--xy-blue-100);
  box-shadow: inset 0 0 0 1px var(--xy-blue-200);
}
.xywb-brand-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xywb-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.xywb-brand-text strong { font-size: var(--xy-fs-base); color: var(--xy-blue-700); letter-spacing: 0.02em; }
.xywb-brand-text small { font-size: 11.5px; color: var(--xy-ink-3); }

/* 主导航：桌面为胶囊列表，≤720px 变为底部固定栏 */
.xywb-nav { display: flex; align-items: center; gap: var(--xy-s1); flex-wrap: wrap; margin-left: auto; }
.xywb-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--xy-s1);
  padding: 7px 12px;
  border-radius: var(--xy-r-pill);
  text-decoration: none;
  color: var(--xy-ink-2);
  font-size: var(--xy-fs-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background var(--xy-t-fast) var(--xy-ease), color var(--xy-t-fast) var(--xy-ease);
}
.xywb-nav a:hover { background: var(--xy-blue-050); color: var(--xy-blue-700); }
.xywb-nav a > .xywb-nav-label,
.xywb-nav a > .xywb-nav-short { display: inline; }
/* 桌面用完整名称；移动端换成 2 字短名（见 ≤720px 断点） */
.xywb-nav-short { display: none; }
.xywb-nav-more-btn { display: none; }
.xywb-nav a[aria-current="page"] {
  background: var(--xy-blue-050);
  border-color: var(--xy-blue-200);
  color: var(--xy-blue-700);
  font-weight: 600;
}

/* AI 状态条：明确「当前是演示模型 / 未配置 / 已就绪」 */
.xywb-ai-banner {
  max-width: var(--xy-w-page);
  margin: 0 auto;
  padding: 0 var(--xy-s5) var(--xy-s2);
  width: 100%;
  font-size: var(--xy-fs-xs);
  color: var(--xy-ink-3);
  display: flex;
  align-items: center;
  gap: var(--xy-s2);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- 主体 */
.xywb-main {
  flex: 1;
  width: 100%;
  max-width: var(--xy-w-page);
  margin: 0 auto;
  padding: var(--xy-s6) var(--xy-s5) var(--xy-s9);
  outline: none;
}

/* ---------------------------------------------------------------- 首页仪表盘 */
.xywb-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: var(--xy-s6);
  align-items: center;
  background: linear-gradient(135deg, var(--xy-surface) 0%, var(--xy-surface-cool) 100%);
  border: 1px solid var(--xy-blue-200);
  border-radius: var(--xy-r-lg);
  padding: var(--xy-s6);
  margin-bottom: var(--xy-s5);
  box-shadow: var(--xy-shadow-2);
}
.xywb-hero h1 { font-size: var(--xy-fs-2xl); margin-bottom: var(--xy-s2); }
.xywb-hero p { color: var(--xy-ink-2); margin-bottom: var(--xy-s4); max-width: 52ch; }
.xywb-hero-actions { display: flex; gap: var(--xy-s2); flex-wrap: wrap; }
.xywb-hero-figure { justify-self: center; }
.xywb-hero-figure img { width: 100%; max-width: 210px; height: auto; }

.xywb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--xy-s3); margin-bottom: var(--xy-s5); }
.xywb-stat {
  background: var(--xy-surface);
  border: 1px solid var(--xy-line);
  border-radius: var(--xy-r-md);
  padding: var(--xy-s3) var(--xy-s4);
}
.xywb-stat .num { display: block; font-size: var(--xy-fs-xl); font-weight: 700; color: var(--xy-blue-700); line-height: 1.2; }
.xywb-stat .label { font-size: var(--xy-fs-xs); color: var(--xy-ink-3); }

/* 工作台入口卡 */
.xywb-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--xy-s4); margin-bottom: var(--xy-s4); }
.xywb-entry {
  display: flex;
  flex-direction: column;
  gap: var(--xy-s3);
  background: var(--xy-surface);
  border: 1px solid var(--xy-line);
  border-radius: var(--xy-r-md);
  padding: var(--xy-s5);
  box-shadow: var(--xy-shadow-1);
  transition: border-color var(--xy-t-base) var(--xy-ease), box-shadow var(--xy-t-base) var(--xy-ease);
}
.xywb-entry:hover { border-color: var(--xy-blue-200); box-shadow: var(--xy-shadow-2); }
.xywb-entry-head { display: flex; align-items: center; gap: var(--xy-s2); }
.xywb-entry-head h2 { margin: 0; font-size: var(--xy-fs-md); }
.xywb-entry ol { margin: 0; padding-left: 1.2em; color: var(--xy-ink-2); font-size: var(--xy-fs-sm); }
.xywb-entry ol li { margin: var(--xy-s1) 0; }
.xywb-entry .xy-btn { align-self: flex-start; margin-top: auto; }

/* 「下一步」清单 */
.xywb-next { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--xy-s2); counter-reset: step; }
.xywb-next li {
  display: flex;
  gap: var(--xy-s3);
  align-items: flex-start;
  padding: var(--xy-s3);
  border-radius: var(--xy-r-sm);
  background: var(--xy-surface-cool);
  border: 1px solid var(--xy-line-cool);
  font-size: var(--xy-fs-sm);
  counter-increment: step;
}
.xywb-next li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--xy-surface);
  border: 1px solid var(--xy-blue-200);
  color: var(--xy-blue-700);
  font-size: var(--xy-fs-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.xywb-next strong { color: var(--xy-ink); }

/* ---------------------------------------------------------------- 项目卡片 */
.xywb-filter-bar { display: flex; gap: var(--xy-s2); flex-wrap: wrap; align-items: center; margin-bottom: var(--xy-s4); }
.xywb-segment {
  display: inline-flex;
  background: var(--xy-paper-deep);
  border: 1px solid var(--xy-line);
  border-radius: var(--xy-r-pill);
  padding: 2px;
  gap: 2px;
}
.xywb-segment button {
  font-family: inherit;
  font-size: var(--xy-fs-xs);
  font-weight: 600;
  color: var(--xy-ink-2);
  background: none;
  border: none;
  border-radius: var(--xy-r-pill);
  min-height: 30px;              /* 触控目标不低于 28px，鼠标与手指都够点 */
  padding: 5px 14px;
  cursor: pointer;
}
.xywb-segment button[aria-pressed="true"] { background: var(--xy-surface); color: var(--xy-blue-700); box-shadow: var(--xy-shadow-1); }

.xywb-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--xy-s4); }
.xywb-project {
  display: flex;
  flex-direction: column;
  gap: var(--xy-s2);
  background: var(--xy-surface);
  border: 1px solid var(--xy-line);
  border-radius: var(--xy-r-md);
  padding: var(--xy-s4);
  box-shadow: var(--xy-shadow-1);
  transition: transform var(--xy-t-base) var(--xy-ease), box-shadow var(--xy-t-base) var(--xy-ease), border-color var(--xy-t-base) var(--xy-ease);
}
.xywb-project:hover { transform: translateY(-2px); box-shadow: var(--xy-shadow-2); border-color: var(--xy-blue-200); }
.xywb-project.is-archived { opacity: 0.78; }
.xywb-project-top { display: flex; align-items: flex-start; gap: var(--xy-s2); }
.xywb-project-top h3 {
  margin: 0;
  font-size: var(--xy-fs-base);
  line-height: 1.45;
  color: var(--xy-ink);
  word-break: break-word;
}
.xywb-project-meta { font-size: var(--xy-fs-xs); color: var(--xy-ink-3); }
.xywb-project-meta span { display: block; }
.xywb-project-badges { display: flex; gap: var(--xy-s1); flex-wrap: wrap; }
.xywb-project-actions { display: flex; gap: var(--xy-s2); flex-wrap: wrap; margin-top: auto; padding-top: var(--xy-s2); border-top: 1px solid var(--xy-line); }

/* ---------------------------------------------------------------- 小羽陪伴条
   位置固定在右下，图与气泡同行；图片尺寸写死以避免布局抖动（CLS）。 */
.xywb-companion {
  position: fixed;
  right: var(--xy-s5);
  bottom: var(--xy-s5);
  display: flex;
  gap: var(--xy-s3);
  align-items: flex-end;
  z-index: var(--xy-z-companion);
  pointer-events: none;
  max-width: 330px;
}
.xywb-yu-bubble {
  background: var(--xy-surface);
  border: 1px solid var(--xy-line);
  box-shadow: var(--xy-shadow-3);
  border-radius: var(--xy-r-md) var(--xy-r-md) var(--xy-r-xs) var(--xy-r-md);
  padding: var(--xy-s2) var(--xy-s3);
  font-size: var(--xy-fs-xs);
  line-height: 1.6;
  color: var(--xy-ink-2);
  margin-bottom: var(--xy-s5);
  max-width: 230px;
}
.xywb-yu-bubble[hidden] { display: none; }

/* 提示朗读完后自动收起，只留头像：避免长期遮挡右下角内容 */
.xywb-companion.is-collapsed .xywb-yu-bubble {
  opacity: 0;
  transform: translateY(6px);
  visibility: hidden;
}
.xywb-yu-bubble { transition: opacity var(--xy-t-base) var(--xy-ease), transform var(--xy-t-base) var(--xy-ease); }
@media (prefers-reduced-motion: reduce) {
  .xywb-yu-bubble { transition: none; }
}

/* 头像现在是按钮：收起后仍可点开重看（Phase 3.1） */
.xywb-yu-toggle {
  pointer-events: auto;          /* 容器整体 pointer-events:none，只有按钮可点 */
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  line-height: 0;
  border-radius: var(--xy-r-md);
  cursor: pointer;
}
.xywb-yu-portrait {
  width: 84px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 14px rgba(47, 99, 149, 0.22));
  transition: opacity var(--xy-t-base) var(--xy-ease);
}
/* 素材加载失败（如被误删）时隐藏破图，避免空白/破图占位；文案仍承载语义 */
.xywb-yu-portrait.is-missing,
.xy-empty-figure.is-missing { visibility: hidden; }
.xywb-companion.is-busy .xywb-yu-portrait { animation: xywb-float 2.2s ease-in-out infinite; }
@keyframes xywb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .xywb-companion.is-busy .xywb-yu-portrait { animation: none; }
}

/* ---------------------------------------------------------------- 页脚 */
.xywb-footer {
  border-top: 1px solid var(--xy-line);
  background: var(--xy-paper-deep);
  padding: var(--xy-s4) 0;
}
.xywb-footer p {
  max-width: var(--xy-w-page);
  margin: var(--xy-s1) auto;
  padding: 0 var(--xy-s5);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--xy-ink-3);
}

/* ---------------------------------------------------------------- 登录页 */
.xywb-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--xy-s6);
  align-items: start;
}
.xywb-auth-figure { position: sticky; top: calc(var(--xy-header-h) + var(--xy-s5)); text-align: center; }
.xywb-auth-figure img { width: 100%; max-width: 240px; }
.xywb-auth-figure figcaption { font-size: var(--xy-fs-xs); color: var(--xy-ink-3); margin-top: var(--xy-s2); }
.xywb-auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--xy-s4); }
.xywb-auth-grid .xy-card { margin-bottom: 0; display: flex; flex-direction: column; }
.xywb-auth-grid form { display: grid; gap: var(--xy-s3); }
.xywb-auth-grid .xy-btn { width: 100%; }
.xywb-auth-switch { font-size: var(--xy-fs-xs); color: var(--xy-ink-3); margin: var(--xy-s2) 0 0; text-align: center; }

.xywb-inline-error {
  font-size: var(--xy-fs-xs);
  color: var(--xy-danger);
  background: var(--xy-danger-soft);
  border: 1px solid var(--xy-danger-line);
  border-radius: var(--xy-r-xs);
  padding: var(--xy-s2) var(--xy-s3);
}
.xywb-inline-error[hidden] { display: none; }

/* ---------------------------------------------------------------- 更多面板（移动端）
   二级入口（材料 / 账户 / 用户管理）收进这里，底部栏保持 5 个主入口不滚动。 */
.xywb-nav-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--xy-z-modal);
  background: rgba(27, 51, 80, 0.42);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--xy-s3);
}
.xywb-nav-sheet[hidden] { display: none; }
.xywb-nav-sheet-panel {
  width: 100%;
  max-width: 420px;
  background: var(--xy-surface);
  border-radius: var(--xy-r-lg);
  box-shadow: var(--xy-shadow-3);
  padding: var(--xy-s4);
  margin-bottom: calc(44px + var(--xy-s2));
  animation: xy-modal-in var(--xy-t-base) var(--xy-ease);
}
.xywb-nav-sheet-title {
  margin: 0 0 var(--xy-s2);
  font-size: var(--xy-fs-xs);
  font-weight: 600;
  color: var(--xy-ink-3);
  letter-spacing: 0.04em;
}
.xywb-nav-sheet-links { display: grid; gap: var(--xy-s1); margin-bottom: var(--xy-s3); }
.xywb-nav-sheet-links a {
  display: block;
  padding: 11px var(--xy-s3);
  border-radius: var(--xy-r-sm);
  text-decoration: none;
  color: var(--xy-ink);
  background: var(--xy-surface-cool);
  font-size: var(--xy-fs-sm);
  font-weight: 600;
}
.xywb-nav-sheet-links a:hover { background: var(--xy-blue-100); color: var(--xy-blue-700); }
.xywb-nav-sheet-links a[aria-current="page"] {
  background: var(--xy-blue-100);
  color: var(--xy-blue-700);
  box-shadow: inset 0 0 0 1px var(--xy-blue-200);
}
body.xywb-sheet-open { overflow: hidden; }

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1000px) {
  .xywb-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xywb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xywb-hero { grid-template-columns: minmax(0, 1fr) 180px; }
}

@media (max-width: 820px) {
  .xywb-entry-grid,
  .xywb-auth-grid { grid-template-columns: 1fr; }
  .xywb-auth { grid-template-columns: 1fr; }
  .xywb-auth-figure { position: static; order: -1; }
  .xywb-auth-figure img { max-width: 150px; }
  .xywb-hero { grid-template-columns: 1fr; text-align: left; padding: var(--xy-s5); }
  .xywb-hero-figure { justify-self: start; }
  .xywb-hero-figure img { max-width: 140px; }
}

@media (max-width: 720px) {
  /* 关键：header 上的 backdrop-filter 会让它成为 fixed 子元素的包含块，
     底部导航就会被"钉"在 header 内部而不是视口底部。移动端去掉该属性。 */
  .xywb-header { backdrop-filter: none; background: var(--xy-surface); }
  /* 底部导航：不遮挡内容，留出安全区 */
  .xywb-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    margin: 0;
    background: var(--xy-surface);
    border-top: 1px solid var(--xy-line);
    display: flex;
    flex-wrap: nowrap;          /* 单行横向滚动，不能换行成两排 */
    gap: 0;
    min-height: 44px;           /* 固定高度，陪伴条据此定位 */
    padding: var(--xy-s1) var(--xy-s1) calc(var(--xy-s1) + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(27, 51, 80, 0.07);
    overflow-x: auto;
    scrollbar-width: none;
    z-index: var(--xy-z-header);
  }
  .xywb-nav::-webkit-scrollbar { display: none; }
  .xywb-nav a,
  .xywb-nav-more-btn {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: 11px;
    padding: 7px 4px;
    border-radius: var(--xy-r-xs);
    justify-content: center;
  }
  /* 二级入口移入「更多」面板，底部栏不再需要横向滚动 */
  .xywb-nav a[data-nav-priority="secondary"] { display: none; }
  .xywb-nav a > .xywb-nav-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .xywb-nav-short { display: inline; }
  .xywb-nav-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: 600;
    color: var(--xy-ink-2);
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
  }
  .xywb-nav-more-btn[aria-expanded="true"] {
    background: var(--xy-blue-100);
    border-color: var(--xy-blue-200);
    color: var(--xy-blue-700);
  }
  /* 为「陪伴条 + 底部导航」预留高度，保证页面最后一个元素能滚出遮挡区 */
  .xywb-main { padding: var(--xy-s4) var(--xy-s3) calc(44px + 52px + var(--xy-s5)); }
  .xywb-header-inner { padding: 0 var(--xy-s3); gap: var(--xy-s2); }
  .xywb-brand-text small { display: none; }
  .xywb-ai-banner { padding: 0 var(--xy-s3) var(--xy-s2); }
  .xywb-projects { grid-template-columns: 1fr; }
  /* 移动端：头像常驻、气泡默认收起（点按展开）。
     Phase 3.1 之前气泡被裁成 1px 永久隐藏，用户无法查看；现在改为"可展开的小面板"。
     Phase 3.2：气泡固定停靠在底部导航上方（不再锚定在头像上方），
     位置确定，不随头像姿态尺寸变化而盖住内容区的主要操作按钮。
     bottom 计入 env(safe-area-inset-bottom)；限高 + 可滚动，避免顶出视口。 */
  .xywb-companion {
    left: auto; right: var(--xy-s3); bottom: calc(44px + var(--xy-s2) + env(safe-area-inset-bottom, 0px));
    max-width: none;
    background: transparent; border: 0; box-shadow: none; padding: 0;
  }
  .xywb-yu-portrait { width: 46px; }
  .xywb-yu-bubble {
    position: fixed;
    left: var(--xy-s3);
    right: var(--xy-s3);
    bottom: calc(44px + var(--xy-s2) + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    /* 视口高度变化（移动端地址栏伸缩）时，气泡最多占 38dvh，超出内部滚动 */
    max-height: min(38dvh, 280px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: var(--xy-s2) var(--xy-s3);
    background: var(--xy-surface);
    border: 1px solid var(--xy-line);
    border-radius: var(--xy-r-md);
    box-shadow: var(--xy-shadow-3);
    font-size: var(--xy-fs-xs);
    line-height: 1.55;
  }
  .xywb-footer { padding-bottom: calc(44px + 52px + var(--xy-s4)); }
}

@media (max-width: 360px) {
  .xywb-hero { padding: var(--xy-s4); }
  .xywb-hero h1 { font-size: var(--xy-fs-lg); }
  .xywb-stats { grid-template-columns: 1fr; }
  .xywb-brand-text strong { font-size: var(--xy-fs-sm); }
  /* 6 个入口（5 主 + 更多）平分宽度：不再给单项固定 min-width，否则「更多」会被挤窄 */
  .xywb-nav a,
  .xywb-nav-more-btn { min-width: 0; font-size: 10.5px; padding: 6px 3px; }
  .xywb-companion { right: var(--xy-s2); }
  .xywb-yu-portrait { width: 40px; }
}