/* ---- 留言 ---- */

/* 页眉右端：播放器与信封入口同组，横排不换行 */
.bar-tail{display:flex;align-items:center;gap:12px;min-width:0}
.letter-open{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:50%;
  background:none;color:var(--ash);cursor:pointer;
  transition:color .25s ease,border-color .25s ease;
}
.letter-open:hover{color:var(--smoke);border-color:rgba(224,224,224,.4)}
.letter-open:focus-visible{outline:1px solid var(--smoke);outline-offset:3px}
.letter-open svg{display:block;width:11px;height:11px}

/* 表单用原生 <dialog>：Esc、焦点圈定与背景不可交互都由浏览器负责 */
.letter{
  width:min(92vw,44em);
  height:min(86vh,40em);
  height:min(86dvh,40em);
  margin:auto;padding:0;overflow:hidden;
  border:1px solid var(--line);background:var(--ink);color:var(--smoke);
}
.letter::backdrop{
  background:rgba(0,0,0,.74);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.letter-form{display:flex;flex-direction:column;height:100%;padding:20px 24px 18px}

.letter-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.letter-title{
  display:block;margin:0;
  font:13px/1 var(--sans);font-weight:400;letter-spacing:.34em;color:var(--ash);
}
.letter-close{
  padding:0;border:0;background:none;cursor:pointer;
  font:11px/1 var(--sans);letter-spacing:.16em;color:var(--ash);
  transition:color .2s ease;
}
.letter-close:hover{color:var(--smoke)}
.letter-close:focus-visible{outline:1px solid var(--smoke);outline-offset:3px}

/* 两个对象：默认「对站主说」在左，「对织烟说」在右；选中项用全站的三段彩条在字下压一道短线 */
.letter-to{display:flex;align-items:baseline;gap:28px;margin:18px 0 14px}
.letter-picks{display:flex;flex:none;gap:28px}
.letter-pick{position:relative;padding-bottom:8px;cursor:pointer}
.letter-pick input{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0}
.letter-pick span{
  display:inline-block;
  font:12px/1 var(--sans);letter-spacing:.12em;color:var(--ash);
  transition:color .2s ease;
}
.letter-pick input:checked + span{color:var(--paper)}
.letter-pick span::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#de3546,rgba(89,165,203,.5),#de3546);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .28s cubic-bezier(.22,.68,.16,1);
}
.letter-pick input:checked + span::after{transform:scaleX(1)}
.letter-pick:focus-within span{outline:1px solid rgba(224,224,224,.4);outline-offset:5px}
/* 选「对织烟说」时在选项右侧那一句；位置常留，切换对象时行不跳动 */
.letter-whisper{
  margin:0 0 0 auto;text-align:right;
  font:12px/1.5 var(--serif);letter-spacing:.04em;color:rgba(140,140,140,.85);
  visibility:hidden;opacity:0;transform:translateY(2px);
  transition:opacity .3s ease,transform .3s ease;
}
.letter-whisper.is-on{visibility:visible;opacity:1;transform:none}

/* 正文占掉表单剩下的全部高度，这是面板里最大的一块 */
.letter-body{
  flex:1;min-height:10em;width:100%;
  padding:14px 16px;border:1px solid var(--line);background:rgba(224,224,224,.02);
  color:var(--smoke);font:14px/1.95 var(--sans);letter-spacing:.03em;
  resize:none;outline:none;
  transition:border-color .2s ease;
}
.letter-body:focus{border-color:rgba(224,224,224,.34)}

/* 联系方式与发送并作一行：联系方式吃掉按钮之外的全部宽度，空时提示语本身就是框里的暗字 */
.letter-foot{display:flex;align-items:center;gap:16px;margin-top:14px}
.letter-contact{
  flex:1;min-width:0;padding:10px 2px;
  border:0;border-bottom:1px solid var(--line);background:none;
  color:var(--smoke);font:13px/1.6 var(--sans);letter-spacing:.04em;outline:none;
  transition:border-color .2s ease;
}
.letter-contact::placeholder{color:rgba(140,140,140,.55);letter-spacing:.06em}
.letter-contact:focus{border-bottom-color:rgba(224,224,224,.38)}

.letter-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.letter-send{
  flex:none;padding:7px 20px;border:1px solid var(--line);background:none;
  font:12px/1.4 var(--sans);letter-spacing:.18em;color:var(--smoke);cursor:pointer;
  transition:color .25s ease,border-color .25s ease,opacity .25s ease;
}
.letter-send:hover:not(:disabled){border-color:rgba(224,224,224,.42);color:var(--paper)}
.letter-send:focus-visible{outline:1px solid var(--smoke);outline-offset:3px}
.letter-send:disabled{opacity:.45;cursor:default}

/* 状态行贴在联系方式之下，没话要说时整行不占位 */
.letter-status{
  margin:8px 0 0;text-align:right;
  font:11px/1.5 var(--sans);letter-spacing:.06em;color:var(--ash);
}
.letter-status:empty{display:none}
.letter-status.is-bad{color:#de3546}

/* 窄屏：面板铺满，那句提示在选项下方单独占一行 */
@media (max-width:560px){
  .letter{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border:0}
  .letter-form{padding:16px 18px 14px}
  .letter-to{flex-wrap:wrap;gap:10px 28px}
  .letter-whisper{flex:1 1 100%;margin:0;text-align:left}
}

/* 页眉右端多了一个信封，曲名要跟着让位：900 以下先收到 18vw，
   560 以下整段收起。诀之影页眉里「返回 + 诀之影」这条居中组比别处宽，
   561 又是页面名与板块名刚回来、曲名刚露头的宽度，24vw 在那里会压上去。 */
@media (max-width:900px){
  .pl-cur{max-width:min(17em,18vw)}
}
@media (max-width:560px){
  .pl-cur span{display:none}
}

/* 320 宽连信封与播放键都紧，间距收一档 */
@media (max-width:420px){
  .bar-tail{gap:9px}
}