/* 页面专属布局：已含 .page-index（首页三栏）、.page-melody（播放页）、.page-analyze（分析页），gallery 留阶段8 */
/* 桌面端一屏收尽：视口高度不足时放弃"不滚动"约束，宁可滚动也不裁切操作区 */

/* ========== 页面骨架：顶栏 + 三栏 + 底栏 ========== */
.page-index {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr var(--botbar-h);
  min-height: 100vh;
}

@supports (height: 100svh) {
  .page-index {
    min-height: 100svh;
  }
}

/* 自定义属性：几何尺寸在本文件内集中声明，便于逐页复核 */
.page-index {
  --topbar-h: 56px;
  --botbar-h: 32px;
  --rule-w: 60px;
  --upload-h: 280px;
  --field-h: 80px;
  --btn-w: 200px;
  --btn-h: 48px;
  --hairline: 1px;
  --frame: 2px;
  --dot-size: 6px;
  /* 入场节拍：所有延迟与时长都由 --dur-fast / --dur-mid 派生，不写字面秒数 */
  --stagger: calc(var(--dur-fast) * 0.4);
  --enter-dur: var(--dur-mid);
}

/* ========== 顶部导航条 ========== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 var(--space-5);
  position: relative;
  z-index: var(--z-base);
  animation: slide-down var(--enter-dur) ease-out both;
}

/* 1px 渐变分割线：透明 → 暖金暗色 → 透明，横贯整行 */
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--hairline);
  background: linear-gradient(90deg, transparent, var(--color-gold-dim), transparent);
}

.topbar-logo {
  font-family: var(--font-kai);
  font-size: var(--fs-5);
  color: var(--color-gold);
  letter-spacing: 0.1em;
  font-weight: 500;
  /* 行高收到 1.2：28px 字号在 ≤720 的 40px 顶栏里才不会溢出 */
  line-height: 1.2;
}

/* ========== 三栏主体 ========== */
.home-grid {
  display: grid;
  /* 1.3fr：左栏每句 18 字，原 1fr 的栏宽放不下，折行会留下孤字尾行 */
  grid-template-columns: 1.3fr 1.7fr 1fr;
  align-items: stretch;
  min-height: 0;
}

/* ========== 左栏 · 品牌区 ========== */
.col-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-5);
  border-right: var(--hairline) solid var(--color-border-subtle);
}

.brand-title {
  margin: 0;
  font-family: var(--font-kai);
  font-size: var(--fs-6);
  color: var(--color-gold);
  /* 两字标题靠字间距撑住版面，字号已够大，不再放大 */
  letter-spacing: 0.2em;
  font-weight: 400;
  line-height: 1.2;
}

/* 逐字入场：每个字延迟一个 --stagger，纯 CSS 无需 JS 参与 */
.brand-char {
  display: inline-block;
  animation: char-appear var(--enter-dur) ease-out both;
}

.brand-char:nth-child(1) { animation-delay: calc(var(--stagger) * 0); }
.brand-char:nth-child(2) { animation-delay: calc(var(--stagger) * 1); }

.page-index .brand-sub {
  margin: var(--space-3) 0 0 0;
  font-size: var(--fs-4);
  color: var(--color-gold-soft);
  letter-spacing: 0.15em;
  text-align: left;
  animation: fade-up var(--enter-dur) ease-out both;
  animation-delay: calc(var(--dur-fast) * 6);
}

.brand-rule {
  display: block;
  width: var(--rule-w);
  height: var(--hairline);
  margin: var(--space-5) 0 var(--space-4) 0;
  background: var(--color-gold);
  animation: fade-up var(--enter-dur) ease-out both;
  animation-delay: calc(var(--dur-fast) * 2);
}

.brand-intro {
  margin: 0;
  font-family: var(--font-song);
  font-size: var(--fs-3);
  color: var(--color-text-dim);
  line-height: 1.8;
  /* 100% 而非 26em：左栏已被加宽，限宽反而会让每句末尾折出孤字 */
  max-width: 100%;
  animation: fade-up var(--enter-dur) ease-out both;
  animation-delay: calc(var(--dur-fast) * 2.5);
}

.brand-mark {
  margin: var(--space-6) 0 0 0;
  font-family: var(--font-kai);
  font-size: var(--fs-2);
  color: var(--color-text-ghost);
  letter-spacing: 0.2em;
  animation: fade-up var(--enter-dur) ease-out both;
  animation-delay: calc(var(--dur-fast) * 4);
}

/* ========== 中栏 · 操作区 ========== */
.col-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-5);
}

.page-index .upload-area {
  animation: fade-up var(--enter-dur) ease-out both;
  animation-delay: calc(var(--dur-fast) * 1.5);
}

.text-field {
  animation: fade-up var(--enter-dur) ease-out both;
  animation-delay: calc(var(--dur-fast) * 3);
}

.action-row {
  display: flex;
  justify-content: center;
  animation: fade-up var(--enter-dur) ease-out both;
  animation-delay: calc(var(--dur-fast) * 3.5);
}

/* ========== 右栏 · 氛围装饰区（纯视觉，无交互） ========== */
.col-mood {
  position: relative;
  overflow: hidden;
  border-left: var(--hairline) solid var(--color-border-subtle);
  background:
    radial-gradient(ellipse at 30% 20%, var(--ink-glow-1), transparent 55%),
    radial-gradient(ellipse at 70% 45%, var(--ink-glow-2), transparent 60%),
    radial-gradient(ellipse at 45% 80%, var(--ink-glow-3), transparent 65%),
    radial-gradient(ellipse at 80% 90%, var(--color-gold-dim), transparent 70%);
  animation: fade-up var(--enter-dur) ease-out both;
  animation-delay: calc(var(--dur-fast) * 2);
}

/* 竖向细线：居中偏左，把装饰区分成"画"与"诗"两半 */
.mood-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 38%;
  width: var(--hairline);
  background: linear-gradient(180deg, transparent, var(--color-gold-dim) 25%, var(--color-gold-dim) 75%, transparent);
}

.mood-dot {
  position: absolute;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--color-gold-soft);
  animation: float-gentle var(--dur-breath) ease-in-out infinite;
}

.mood-dot-1 { top: 18%; left: 26%; }
.mood-dot-2 { top: 38%; left: 64%; width: calc(var(--dot-size) * 1.5); height: calc(var(--dot-size) * 1.5); background: var(--color-gold-dim); animation-delay: calc(var(--dur-fast) * 2); }
.mood-dot-3 { top: 58%; left: 32%; width: calc(var(--dot-size) * 0.75); height: calc(var(--dot-size) * 0.75); animation-delay: calc(var(--dur-fast) * 4); }
.mood-dot-4 { top: 74%; left: 68%; background: var(--color-gold-dim); animation-delay: calc(var(--dur-fast) * 6); }

.mood-verse {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-6);
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--font-kai);
  /* 诗句是右栏唯一的"内容"，用标题级字号 + 暖金柔色，撑满这一栏 */
  font-size: var(--fs-5);
  color: var(--color-gold-soft);
  letter-spacing: 0.4em;
  line-height: 2.2;
}

/* 竖排下分列不可控（末列常只剩两三字），拆成两个块级 span 后各占一列，两列各 8 字 */
.mood-verse span {
  display: block;
}

/* ========== 底部条 ========== */
.botbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: var(--botbar-h);
  padding: 0 var(--space-5);
  font-family: var(--font-kai);
  /* .botbar-name 与 .botbar-ver 均继承本行字号 */
  font-size: var(--fs-2);
  color: var(--color-text-ghost);
  letter-spacing: 0.2em;
  animation: fade-up var(--enter-dur) ease-out both;
  animation-delay: calc(var(--dur-fast) * 4);
}

.botbar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--hairline);
  background: linear-gradient(90deg, transparent, var(--color-border-subtle), transparent);
}

.botbar-ver {
  position: absolute;
  right: var(--space-5);
}

/* ========== 一屏收尽（桌面端且视口足够高时才锁死滚动） ========== */
@media (min-width: 1025px) and (min-height: 640px) {
  .page-index {
    height: 100vh;
    overflow: hidden;
  }

  @supports (height: 100svh) {
    .page-index {
      height: 100svh;
    }
  }
}

/* ========== ≤1024：三栏降为单栏堆叠，装饰栏隐藏 ========== */
@media (max-width: 1024px) {
  .home-grid {
    grid-template-columns: 1fr;
  }

  .col-mood {
    display: none;
  }

  .col-brand {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-right: none;
    border-bottom: var(--hairline) solid var(--color-border-subtle);
  }

  .brand-title {
    font-size: var(--fs-5);
  }

  .page-index .brand-sub {
    margin: 0 0 0 var(--space-3);
    font-size: var(--fs-3);
  }

  .brand-rule {
    display: none;
  }

  /* 简介靠右，与"Logo + Slogan"形成横向两端 */
  .brand-intro {
    margin-left: auto;
    text-align: right;
    max-width: 22em;
  }

  .brand-mark {
    width: 100%;
    margin: var(--space-2) 0 0 0;
  }

  .col-action {
    padding: var(--space-5);
  }
}

/* ========== ≤720：进一步压缩，保证操作区不被挤出首屏 ========== */
@media (max-width: 720px) {
  .page-index {
    --topbar-h: 40px;
    --upload-h: 200px;
  }

  .topbar {
    padding: 0 var(--space-4);
  }

  .topbar-logo {
    letter-spacing: 0.1em;
  }

  .brand-title {
    font-size: var(--fs-5);
  }

  .brand-intro {
    display: none;
  }

  .col-brand {
    padding: var(--space-4);
  }

  .col-action {
    padding: var(--space-4) var(--space-3);
  }

  .botbar {
    padding: 0 var(--space-4);
    letter-spacing: 0.1em;
  }
}

/* ============================================================
   阶段6 · 播放页 .page-melody
   ============================================================ */

/* 几何变量沿用 .page-index 的写法：--topbar-h / --botbar-h / --hairline 从来不在
   tokens.css 里，它们是本文件内的页面级常量，逐页各声明一次以便逐页复核 */
.page-melody {
  --topbar-h: 56px;
  --botbar-h: 32px;
  --hairline: 1px;
  --frame: 2px;
  --btn-w: 200px;
  --btn-h: 48px;
  --enter-dur: var(--dur-mid);
  /* 单栏堆叠时中栏只剩 1fr，画布没有固有高度会塌成 0 */
  --canvas-min-h: 240px;
}

.page-melody {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr var(--botbar-h);
  height: 100vh;
  overflow: hidden;
}

.melody-stage {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  min-height: 0;
}

.melody-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
  min-width: 0;
}

.emotion-tag {
  font-family: var(--font-kai);
  font-size: var(--fs-6);
  color: var(--color-gold);
  letter-spacing: 0.15em;
  text-align: left;
}

.scene-tag {
  font-family: var(--font-kai);
  font-size: var(--fs-4);
  color: var(--color-gold-soft);
  letter-spacing: 0.1em;
  text-align: left;
}

.formula-box {
  font-family: var(--font-song);
  font-size: var(--fs-2);
  color: var(--color-text-dim);
  line-height: 1.9;
  margin-top: var(--space-4);
  padding: var(--space-3);
  /* 2px 的实线在首页只有 .brand-rule 一处，这里改用 --frame 令牌变量取同一档粗细 */
  border-left: var(--frame) solid var(--color-border-subtle);
}

/* 配方由 JS 逐行 createElement，行距交给上面的 line-height，这里只清掉 p 的默认外边距 */
.formula-line {
  margin: 0;
}

.melody-canvas-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-card);
  border: var(--hairline) solid var(--color-border-subtle);
  min-height: 0;
}

#visualizer {
  display: block;
  width: 100%;
  height: 100%;
}

.melody-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
  align-items: stretch;
}

.btn-secondary {
  font-family: var(--font-kai);
  font-size: var(--fs-3);
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* 与 .btn-primary 同理：抵消末字字距，单字才在框里居中 */
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: var(--hairline) solid var(--color-gold-dim);
  color: var(--color-gold-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    opacity var(--dur-fast) ease;
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: var(--color-gold-dim);
}

.btn-secondary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-gold);
}

.btn-secondary:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.back-link {
  font-family: var(--font-kai);
  font-size: var(--fs-2);
  color: var(--color-text-ghost);
  text-decoration: none;
  text-align: center;
  margin-top: var(--space-5);
  transition: color var(--dur-fast);
}

.back-link:hover {
  color: var(--color-gold-soft);
}

/* ========== ≤1024：三栏降为单栏堆叠 ========== */
@media (max-width: 1024px) {
  .melody-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }

  /* 堆叠后内容高于视口，继续 overflow:hidden 会把配方与操作条裁掉，
     与首页一致的取舍：宁可滚动，也不裁切操作区 */
  .page-melody {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .melody-canvas-wrap {
    min-height: var(--canvas-min-h);
  }

  .emotion-tag {
    font-size: var(--fs-5);
  }
}

/* ============================================================
   阶段7 · 分析页 .page-analyze
   ============================================================ */

/* 几何变量仍旧沿用逐页各声明一次的约定（见 .page-index / .page-melody 的注释）。
   入场节拍与结果停留时长都从 --dur-* 派生：JS 侧只读 --result-hold，脚本里不留第二处字面秒数 */
.page-analyze {
  --topbar-h: 56px;
  --botbar-h: 32px;
  --hairline: 1px;
  --frame: 2px;
  --enter-dur: var(--dur-mid);
  /* 回显区上限：宽 15 档 space-6、高 6 档 space-6 加一档 space-3，全部落在 8 的倍数体系上 */
  --preview-max-w: calc(var(--space-6) * 15);
  --preview-max-h: calc(var(--space-6) * 6 + var(--space-3));
  /* 逐字脉冲的错拍与位移：0.3s / 0.6s 折算成 --dur-fast 的 1.5 / 3 倍，4px 即 space-1 */
  --pulse-stagger: calc(var(--dur-fast) * 1.5);
  --pulse-dur: var(--dur-slow);
  --ink-lift: var(--space-1);
  /* 阶段8 叙事增强：解码流的两拍——浮现节拍给 JS 读（脚本里不留字面毫秒数），
     起跳位移给 keyframes 用，8px 即 space-2，与 --ink-lift 同源不同用 */
  --token-step: var(--dur-fast);
  --token-lift: var(--space-2);
  /* 结果停留 1.5s：三档 --dur-mid（0.5s）。不用 --dur-slow + --dur-fast 相加，
     那是 1.4s，与工单钉住的"延迟 1.5 秒跳转"差一档；令牌本身也不支持相加后仍落在整档上 */
  --result-hold: calc(var(--dur-mid) * 3);
}

.page-analyze {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr var(--botbar-h);
  height: 100vh;
  overflow: hidden;
}

.analyze-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  min-height: 0;
}

/* ========== 输入回显 ========== */
.analyze-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--preview-max-w);
  min-height: 0;
  padding: var(--space-2);
  background: var(--color-bg-card);
  border: var(--hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  animation: fade-up var(--enter-dur) ease-out both;
}

.analyze-preview img {
  display: block;
  max-width: 100%;
  max-height: var(--preview-max-h);
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* 文字回显走宋体长行：左右各留一档 space-5，避免整行顶到回显框边缘 */
.analyze-preview p {
  margin: 0;
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-song);
  font-size: var(--fs-3);
  color: var(--color-text);
  line-height: 1.9;
  text-align: center;
  overflow-wrap: break-word;
}

/* ========== 进度：三字脉冲 + 状态行 ========== */
.analyze-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  animation: fade-up var(--enter-dur) ease-out both;
  animation-delay: calc(var(--dur-fast) * 2);
}

.ink-loader {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-kai);
  font-size: var(--fs-5);
  color: var(--color-gold);
  letter-spacing: 0.1em;
}

.ink-loader span {
  animation: ink-pulse var(--pulse-dur) ease-in-out infinite;
}

.ink-loader span:nth-child(2) {
  animation-delay: var(--pulse-stagger);
}

.ink-loader span:nth-child(3) {
  animation-delay: calc(var(--pulse-stagger) * 2);
}

.analyze-status {
  margin: 0;
  font-family: var(--font-song);
  font-size: var(--fs-2);
  color: var(--color-text-dim);
  letter-spacing: 0.15em;
  text-align: center;
}

/* ========== 阶段8 · 解码流：关键词与声音意象逐个浮现（纯展示，不含音乐参数） ========== */
.decoding-stream {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  max-width: var(--preview-max-w);
  min-height: 0;
}

/* 降级时一个词都没有：空节点不占 margin，免得结果区凭空下坠一档 */
.decoding-stream:empty {
  display: none;
}

.decoding-stream .token {
  font-family: var(--font-song);
  font-size: var(--fs-2);
  color: var(--color-gold-soft);
  padding: var(--space-1) var(--space-3);
  border: var(--hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
  opacity: 0;
  animation: token-appear var(--dur-mid) ease-out forwards;
}

/* 意象与关键词同形，只靠 --color-gold 把"能听见的东西"提一档亮度区分 */
.decoding-stream .token-imagery {
  color: var(--color-gold);
}

@keyframes token-appear {
  from {
    opacity: 0;
    transform: translateY(var(--token-lift));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== 结果：情感 / 场景 / 信心 / 关键词 ========== */
.analyze-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  /* 结果区在 loader 之后出现，入场延迟比进度区再晚一档，避免两块同时抢视线 */
  animation: fade-up var(--enter-dur) ease-out both;
  animation-delay: calc(var(--dur-fast) * 1.5);
}

.emotion-badge {
  font-family: var(--font-kai);
  font-size: var(--fs-6);
  color: var(--color-gold);
  letter-spacing: 0.15em;
  text-indent: 0.15em;
  text-align: center;
  line-height: 1.2;
}

.scene-badge {
  font-family: var(--font-kai);
  font-size: var(--fs-4);
  color: var(--color-gold-soft);
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-align: center;
}

/* 印章式描边：虚线呼应首页 .upload-area 的"待补全"笔触，圆形边框由 --frame 取粗 */
.confidence-stamp {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-song);
  font-size: var(--fs-1);
  color: var(--color-text-dim);
  letter-spacing: 0.1em;
  border: var(--frame) dashed var(--color-gold-dim);
  border-radius: var(--radius-lg);
}

.keyword-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  max-width: var(--preview-max-w);
  font-family: var(--font-song);
  font-size: var(--fs-2);
  color: var(--color-text-dim);
  letter-spacing: 0.05em;
  text-align: center;
}

.keyword-list .keyword-empty {
  color: var(--color-text-ghost);
}

/* ========== 阶段7.5 · API Key 临时入口（阶段10 上 Workers 后整段撤掉） ========== */
/* 顶栏是 space-between 三子元素：不加 margin-left:auto 的话"设置"会被推到正中，
   与工单要求的"右上角"不符；auto 边距把它和作品集一起压到右侧 */
.ai-key-btn {
  margin-left: auto;
  margin-right: var(--space-4);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-kai);
  font-size: var(--fs-2);
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--color-text-ghost);
  background: none;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}

.ai-key-btn:hover {
  color: var(--color-gold-soft);
  border-color: var(--color-gold-dim);
}

/* ========== ≤1024：回显上限收紧，字号下档 ========== */
@media (max-width: 1024px) {
  .page-analyze {
    --preview-max-h: calc(var(--space-6) * 4);
  }

  .emotion-badge {
    font-size: var(--fs-5);
  }
}

/* ========== ≤720：三列脉冲收一档，避免与状态行抢宽 ========== */
@media (max-width: 720px) {
  .analyze-stage {
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
  }

  .ink-loader {
    font-size: var(--fs-4);
  }

  .analyze-preview p {
    font-size: var(--fs-2);
    padding: var(--space-2) var(--space-3);
  }
}