/* 落霞来信 · 组件样式
   ------------------------------------------------------------
   可复用组件：全站播放器（迷你条 / 悬浮胶囊）、分类标签、文本按钮、
   区块标题、播放卡片、书信横幅、推荐列表、底部 Tab、日历面板、Toast。
*/

/* ===== 全站播放器 · 皮肤切换 =====
   整套站点只有一个播放器实例（见 js/player.js），
   切换页面只是切换皮肤：迷你条（首页/详情）↔ 悬浮胶囊（读信页）。 */
.read-player{display:none;}
.phone.skin-pill .read-player{display:flex;}
.phone.skin-pill .mini-player{display:none;}
.phone.hide-tabs .tabbar{display:none;}
/* 详情页：播放器与底部导航一起隐藏（播放控制交给页内大播放卡） */
.phone.hide-player .mini-player,
.phone.hide-player .read-player{display:none;}

/* ---- 皮肤一：迷你播放条 ---- */
.mini-player{
  flex:0 0 auto;display:none;align-items:center;gap:var(--sp-3);
  height:52px;margin:0;padding:0 var(--sp-4);background:var(--card);cursor:pointer;
}
/* 默认不占位：开播才出现（js/player.js 给 is-on），暂停保留，整段播完才收起 */
.mini-player.is-on{display:flex;}
/* 封面外圈：保留 1.5px 细边，但改用纸色系柔和渐变，不再用黑胶唱片金属圈 */
.mini-cover{
  position:relative;width:36px;height:36px;flex:0 0 auto;border-radius:var(--r-full);overflow:hidden;
  padding:1.5px;
  background:linear-gradient(145deg,rgba(43,37,32,.22) 0%,rgba(43,37,32,.08) 52%,rgba(184,84,46,.26) 100%);
  box-shadow:0 2px 7px rgba(43,37,32,.14);
}
.mini-cover img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r-full);}
.mini-cover::after{
  content:"";position:absolute;inset:1.5px;border-radius:var(--r-full);pointer-events:none;
  box-shadow:inset 0 0 0 .5px rgba(43,37,32,.16),inset 0 1px 1px rgba(255,255,255,.18);
}
.mini-player.is-playing .mini-cover img{animation:vinyl-spin 12s linear infinite;}
@keyframes vinyl-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.mini-text{flex:1;min-width:0;font-size:var(--fs-12-5);letter-spacing:.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-icon{
  position:relative;flex:0 0 auto;width:34px;height:34px;padding:0;border-radius:var(--r-full);
  color:var(--accent);display:flex;align-items:center;justify-content:center;
}
.mini-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none;}
.mini-ring circle{fill:none;stroke-width:1.5;}
.mini-ring-bg{stroke:var(--line);}
.mini-ring-fg{
  stroke:var(--accent);stroke-linecap:round;
  stroke-dasharray:100.53;stroke-dashoffset:100.53;
  transition:stroke-dashoffset .25s linear;
}
.mini-glyph{display:flex;align-items:center;justify-content:center;}
.mini-glyph svg{width:12px;height:12px;display:block;margin-left:1.5px;}
.mini-icon.is-playing .mini-glyph svg{margin-left:0;}

/* ---- 皮肤二：读信页悬浮胶囊（可拖拽吸附） ---- */
.read-player{
  position:absolute;left:50%;bottom:var(--sp-6);transform:translateX(-50%);
  max-width:calc(100% - 48px);z-index:var(--z-player);
  padding:6px 20px 6px 6px;border-radius:var(--r-pill);
  /* 磨砂玻璃胶囊：纸色半透明 + 背景模糊，底下文字透过来是糊的 */
  background:rgba(244,239,230,.5);
  align-items:center;gap:var(--sp-3);
  /* 只留投影，不再用内白描边 */
  box-shadow:var(--sh-pill);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
}
/* 拖拽态：改为 left/top 定位，松手时带吸附动画 */
.read-player.is-positioned{left:0;top:0;bottom:auto;transform:none;}
.read-player.is-snapping{transition:left .28s var(--ease),top .28s var(--ease);}
.read-player.is-dragging{transition:none;cursor:grabbing;box-shadow:var(--sh-pill-drag);}
/* 吸附后收起成小球，点击展开 */
.read-player.is-collapsed{padding:6px;gap:0;border-radius:var(--r-full);}
.read-player.is-collapsed > span{display:none;}
/* 朗读按钮：封面唱片 + 旋转 + 进度环 */
.read-disc{
  position:relative;flex:0 0 auto;width:50px;height:50px;padding:0;
  border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
}
.read-cover{
  width:36px;height:36px;border-radius:var(--r-full);object-fit:cover;display:block;
  box-shadow:0 0 0 1px rgba(43,37,32,.16);
}
.read-disc.is-playing .read-cover{animation:vinyl-spin 8s linear infinite;}
/* 光盘纹路 + 中央压暗，保证图标可读 */
.read-disc::after{
  content:"";position:absolute;inset:7px;border-radius:var(--r-full);pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(43,37,32,.62) 0%,rgba(43,37,32,.32) 36%,rgba(43,37,32,0) 62%),
    repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.07) 0 1px,rgba(43,37,32,.07) 1px 3px);
}
.read-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none;z-index:2;}
.read-ring circle{fill:none;stroke-width:1.5;}
.read-ring-bg{stroke:var(--line-strong);}
.read-ring-fg{
  stroke:var(--accent);stroke-linecap:round;
  stroke-dasharray:100.53;stroke-dashoffset:100.53;
  transition:stroke-dashoffset .25s linear;
}
.read-glyph{position:absolute;inset:0;z-index:3;pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--on-dark);}
.read-glyph svg{width:13px;height:13px;display:block;margin-left:1.5px;}
.read-disc.is-playing .read-glyph svg{margin-left:0;}
.read-player > span{font-size:var(--fs-11-5);letter-spacing:var(--ls-1);color:var(--ink-soft);white-space:nowrap;}

/* ===== 分类标签 ===== */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-5);width:100%;}
.chip{
  /* 文字水平垂直都居中：line-height:1 让上下内边距对称；
     letter-spacing 会在末字右侧多留一个字距，整块居中后文字会偏左半个字距，
     用 text-indent 补回来 */
  display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:0 16px;border-radius:var(--r-pill);
  background:var(--card);border:1px solid var(--line);
  font-size:var(--fs-12);line-height:1;letter-spacing:var(--ls-2);
  text-indent:calc(var(--ls-2) / 2);color:var(--ink-soft);
  cursor:pointer;transition:color var(--dur),border-color var(--dur),background var(--dur),box-shadow var(--dur);
}
.chip:hover{color:var(--ink);border-color:var(--line-strong);}
.chip.active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);box-shadow:var(--sh-chip);}

/* ===== 文本按钮 ===== */
.cta{
  position:relative;margin-top:var(--sp-10);font-size:var(--fs-16);letter-spacing:var(--ls-4);color:var(--accent);
  padding-bottom:4px;
}
/* 悬停时下划线像进度条一样从左展开，移出鼠标再收回 */
.cta::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--ease);
}
.cta:hover::after{transform:scaleX(1);}
.expand-btn{margin-top:var(--sp-3);display:inline-flex;align-items:center;gap:5px;color:var(--ink-soft);font-size:var(--fs-12);letter-spacing:var(--ls-2);}
.expand-btn .arrow{width:12px;height:12px;display:block;flex:0 0 auto;}
.next-letter{display:none;margin:var(--sp-3) auto 0;color:var(--accent);font-size:var(--fs-14);letter-spacing:var(--ls-3);}

/* ===== 区块标题 ===== */
.section-title{text-align:center;font-size:var(--fs-18);letter-spacing:var(--ls-6);text-indent:var(--ls-6);margin:var(--gap-block) 0 var(--gap-title);font-weight:600;}

/* ===== 播放卡片（详情页本期内容） ===== */
.player-card{
  position:relative;height:180px;background:var(--ink);border-radius:var(--r-img);overflow:hidden;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--sh-card),inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform var(--dur),box-shadow var(--dur);
}
.player-card:hover{box-shadow:var(--sh-card-hover),inset 0 0 0 1px rgba(255,255,255,.08);}
/* 底图只留一层柔化，压暗交给 ::before 的边缘渐变，避免两层叠加糊成一团黑 */
.player-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.88;
  filter:saturate(.9);
}
.player-card::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(130% 130% at 50% 45%,rgba(43,37,32,0) 34%,rgba(43,37,32,.5) 100%),
    linear-gradient(135deg,rgba(184,84,46,.16) 0%,rgba(184,84,46,0) 48%,rgba(43,37,32,.22) 100%);
}
.play-btn{
  position:relative;z-index:2;width:44px;height:44px;border-radius:var(--r-full);
  /* 磨砂玻璃：半透明浅灰 + 背景模糊，压在封面上取色，不再用实心强调色 */
  background:rgba(244,239,230,.3);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  color:var(--play-fg);display:flex;align-items:center;justify-content:center;
  transition:transform .25s,box-shadow .25s,background-color .25s;
  box-shadow:0 4px 14px rgba(43,37,32,.3),0 0 0 0 rgba(244,239,230,.25);
}
.play-btn:hover{background:rgba(244,239,230,.42);}
.play-btn svg{width:18px;height:18px;display:block;margin-left:2px;}
.play-btn.is-playing svg{margin-left:0;}
.play-btn:active{transform:scale(.92);}
/* 播放态：呼吸式放大缩小 + 声波圈扩散 */
.play-btn.is-playing{animation:playPulse 1.6s var(--ease) infinite,playGlow 1.6s var(--ease) infinite;}
@keyframes playPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
@keyframes playGlow{
  0%,100%{box-shadow:0 4px 14px rgba(43,37,32,.3),0 0 0 0 rgba(244,239,230,.3);}
  50%{box-shadow:0 4px 14px rgba(43,37,32,.3),0 0 0 10px rgba(244,239,230,0);}
}
@media (prefers-reduced-motion:reduce){.play-btn.is-playing{animation:none;}}
.player-card:active .play-btn{box-shadow:0 2px 8px rgba(43,37,32,.28),0 0 0 8px rgba(244,239,230,.16);}
.progress-track{position:absolute;left:0;bottom:0;height:2px;background:var(--on-dark-dim);width:100%;z-index:2;}
.progress-fill{height:100%;background:var(--accent);width:0%;transition:width var(--dur-fast) linear;}
.player-meta{text-align:center;margin-top:var(--gap-title);font-size:var(--fs-13);letter-spacing:var(--ls-1);color:var(--ink-soft);}

/* ===== 书信横幅 ===== */
.letter-banner{
  position:relative;height:170px;overflow:hidden;border-radius:var(--r-img);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:var(--fs-16);letter-spacing:var(--ls-4);border:1px solid var(--line);
  background-color:var(--card);
  background-image:
    linear-gradient(rgba(244,239,230,.62),rgba(244,239,230,.62)),
    url("../assets/letter-banner.jpg");
  background-size:cover;background-position:center;
  color:var(--ink);
}
/* 「立即阅读 →」「开始读信 →」的箭头左右轻晃，提示可点击 */
/* 「→」这个字形本身又扁又长（横向宽、纵向薄）：放大一档，再在关键帧里做纵向拉伸，
   视觉高度才和旁边的文字匹配（transform 只影响绘制，不改变按钮的排版尺寸） */
.arrow-nudge{
  display:inline-block;font-size:1.12em;line-height:1;
  animation:arrowNudge 1.5s ease-in-out infinite;
}
.letter-banner .arrow-nudge{margin-left:var(--sp-2);}
@keyframes arrowNudge{
  0%,100%{transform:translateX(-3px) scaleY(1.35);}
  50%{transform:translateX(5px) scaleY(1.35);}
}

/* ===== 推荐列表 ===== */
.rec-list{display:flex;flex-direction:column;gap:2px;}
.rec{
  display:flex;gap:var(--sp-3);align-items:center;cursor:pointer;
  padding:10px;margin:0 -10px;border-radius:var(--r-lg);
  transition:background-color .25s;
}
.rec:hover{background:var(--hover);}
.rec:active{background:var(--press);}
.rec-cover{
  position:relative;width:62px;height:62px;flex:0 0 62px;overflow:hidden;
  border-radius:var(--r-img);background:var(--card);
  box-shadow:var(--sh-cover);
}
.rec-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease;}
.rec:hover .rec-cover img{transform:scale(1.06);}
.rec-info{flex:1;min-width:0;}
.rec-title{
  font-size:var(--fs-14-5);font-weight:600;letter-spacing:.5px;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rec-desc{
  font-size:var(--fs-11);color:var(--ink-soft);line-height:1.6;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rec-meta{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:var(--fs-10);letter-spacing:var(--ls-1);color:var(--ink-soft);}
.rec-tag{color:var(--accent);letter-spacing:var(--ls-2);}
.rec-dot{width:3px;height:3px;border-radius:var(--r-full);background:var(--line);flex:0 0 3px;}
.rec-play{
  width:34px;height:34px;flex:0 0 34px;border-radius:var(--r-full);background:var(--play-bg);color:var(--play-fg);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s,background-color .25s;
}
.rec-play:hover{background:var(--play-bg-hover);}
.rec-play:active{transform:scale(.9);}
.rec-play svg{width:13px;height:13px;display:block;margin-left:1.5px;}

/* ===== 底部 Tab ===== */
.tabbar{
  /* 真机底部留出 home 指示条（全面屏 iPhone / 手势导航 Android）的安全距离，
     桌面演示时 env() 为 0，尺寸与原先一致 */
  flex:0 0 auto;height:calc(68px + env(safe-area-inset-bottom,0px));
  display:flex;border-top:1px solid var(--line);
  background:var(--paper);padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink-soft);}
.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4;}
.tab span{font-size:var(--fs-10);letter-spacing:var(--ls-1);}
.tab.active{color:var(--accent);}

/* ===== 日历日程面板 ===== */
.cal-overlay{
  position:absolute;inset:0;z-index:var(--z-overlay);display:flex;align-items:flex-end;
  background:var(--overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity var(--dur);
}
.cal-overlay.open{opacity:1;pointer-events:auto;}
.cal-panel{
  width:100%;max-height:80%;overflow-y:auto;background:var(--paper);
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--sp-5) var(--gutter) var(--sp-7);
  transform:translateY(100%);transition:transform .35s ease;
}
.cal-overlay.open .cal-panel{transform:none;}
.cal-head{display:flex;align-items:center;justify-content:space-between;}
.cal-title{font-size:var(--fs-15);font-weight:600;letter-spacing:var(--ls-3);}
.cal-close{font-size:var(--fs-20);line-height:1;color:var(--ink-soft);padding:0 2px;}
.cal-note{font-size:var(--fs-11);color:var(--ink-soft);letter-spacing:var(--ls-1);margin-top:var(--sp-2);}
.cal-list{list-style:none;margin-top:var(--sp-4);}
.cal-item{display:flex;align-items:center;gap:var(--sp-3);padding:11px 0;border-bottom:1px solid var(--line);}
.cal-item:last-child{border-bottom:none;}
.cal-when{flex:0 0 56px;display:flex;flex-direction:column;gap:3px;}
.cal-day{font-size:var(--fs-11);letter-spacing:var(--ls-1);}
.cal-date{font-size:var(--fs-10);color:var(--ink-soft);letter-spacing:.5px;}
.cal-name{flex:1;min-width:0;font-size:var(--fs-13);letter-spacing:var(--ls-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-status{flex:0 0 auto;font-size:var(--fs-10);letter-spacing:var(--ls-1);padding:3px 9px;border-radius:var(--r-pill);background:var(--paper-deep);color:var(--ink-soft);}
.cal-item.today .cal-day,.cal-item.today .cal-name{color:var(--accent);}
.cal-item.today .cal-date{color:var(--accent);opacity:.7;}
.cal-item.today .cal-status{background:var(--accent-line);color:var(--accent);}

/* ===== Toast ===== */
.toast{
  position:absolute;left:50%;bottom:120px;transform:translateX(-50%) translateY(10px);
  background:var(--scrim);color:var(--on-dark);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);
  font-size:var(--fs-12);letter-spacing:var(--ls-1);opacity:0;pointer-events:none;transition:all var(--dur);z-index:var(--z-toast);white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}