/* 《未发送》Ch4 切片
   配色按《美术生成规格》：Ch4 属"冷白"档。全作无鲜艳色。 */

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root{
  --fs: 1;                 /* 字号缩放，无障碍项 */
  --ink:#2b2724;
  --ink-soft:#6d665f;
  --paper:#f4f1ec;
  --cold:#eef1f3;          /* Ch4 冷白 */
  --ghost:0.25;            /* 幽灵态 alpha —— 唯一定义处 */
  --pulse:1.6s;
}

html,body{
  height:100%; background:#0d0c0b; color:var(--ink);
  font-family:"Source Han Serif SC","Songti SC","SimSun",serif;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

#stage{
  position:relative; width:min(100vw,430px); height:min(100vh,900px);
  background:#141210; overflow:hidden;
  box-shadow:0 0 60px rgba(0,0,0,.8);
}

.screen{
  position:absolute; inset:0; display:none;
  flex-direction:column; align-items:center; justify-content:center;
}
.screen.active{ display:flex; }
.hidden{ display:none !important; }

.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- 通用按钮 ---------- */
.btn-main,.btn-ghost{
  font-family:inherit; cursor:pointer; border-radius:2px;
  transition:opacity .2s, background .2s;
}
.btn-main{
  padding:12px 34px; font-size:calc(16px*var(--fs));
  background:rgba(20,18,16,.82); color:#e8e2d8;
  border:1px solid rgba(232,226,216,.35); letter-spacing:.22em;
}
.btn-main:hover{ background:rgba(20,18,16,.95); }
.btn-ghost{
  padding:8px 20px; font-size:calc(13px*var(--fs));
  background:transparent; color:var(--ink-soft);
  border:1px solid rgba(109,102,95,.4); letter-spacing:.14em;
}
.btn-ghost:hover{ color:var(--ink); }

/* ---------- 标题 ---------- */
#screen-title .title-block{
  position:relative; z-index:2; text-align:center; color:#f0ece4;
  background:linear-gradient(rgba(10,9,8,0) 0%, rgba(10,9,8,.72) 40%);
  padding:60px 30px 46px; width:100%;
  position:absolute; bottom:0; left:0;
}
.ch-num{ font-size:calc(13px*var(--fs)); letter-spacing:.5em; opacity:.65; }
.ch-name{ font-size:calc(46px*var(--fs)); letter-spacing:.3em; margin:8px 0 14px; }
.ch-date{ font-size:calc(12px*var(--fs)); letter-spacing:.12em; opacity:.6; margin-bottom:30px; }

/* ---------- 心声浮字 ---------- */
.room-dim{ position:absolute; inset:0; background:#15120f; }
.voice-stack{
  position:relative; z-index:2; width:82%; text-align:center;
  display:flex; flex-direction:column; gap:26px;
}
.voice-line{
  font-size:calc(17px*var(--fs)); line-height:2.1; color:#ddd5c8;
  font-family:"Kaiti SC","STKaiti","KaiTi",serif;   /* 心声用手写体 */
  opacity:0; transform:translateY(6px);
  transition:opacity 1.1s ease, transform 1.1s ease;
}
.voice-line.in{ opacity:1; transform:none; }
#intro-next{
  position:absolute; bottom:46px; z-index:3;
  color:#9c9287; border-color:rgba(156,146,135,.35);
  opacity:0; pointer-events:none; transition:opacity .8s;
}
#intro-next.in{ opacity:1; pointer-events:auto; }

/* ---------- 铁盒 ----------
   c07 是给 Ch5 画的下午斜光，右侧有一片近乎过曝的墙灰。
   .box-hint 和 .box-readout 原本裸压在上面，实测最差对比度 1.0（同色）、
   平均 1.7 / 2.4 —— 12px 的 text-shadow 是光晕，不顶对比度。
   办法：轻压 .78 + 上下各一条淡出到 0 的通栏遮罩。中间那段一点不动，
   铁盒和三张卡片还是画面里最亮的东西（它本来就该是焦点）。
   顺便：Ch4 这一幕是 2019 冬夜，压暗反而比原素材的下午光更对。 */
#screen-box .bg{ filter:brightness(.78) saturate(.9); }
#screen-box::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(rgba(8,7,6,.88) 0%, rgba(8,7,6,.74) 12%, rgba(8,7,6,0) 26%),
    linear-gradient(rgba(8,7,6,0) 58%, rgba(8,7,6,.76) 76%, rgba(8,7,6,.88) 100%);
}
.box-hint{
  position:absolute; top:52px; z-index:2; color:#e8e0d2;
  font-size:calc(13px*var(--fs)); letter-spacing:.3em;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.box-items{ position:relative; z-index:2; display:flex; gap:22px; }
.box-item{
  width:76px; height:96px; cursor:pointer;
  background:rgba(244,241,236,.9); border:1px solid rgba(90,80,70,.5);
  display:flex; align-items:center; justify-content:center;
  font-size:calc(26px*var(--fs)); color:#4a423a;
  box-shadow:0 6px 22px rgba(0,0,0,.5);
  transform:rotate(var(--rot)); transition:transform .25s, opacity .25s;
}
.box-item:hover{ transform:rotate(0deg) translateY(-5px); }
.box-item.seen{ opacity:.42; }
.box-readout{
  position:absolute; bottom:130px; z-index:2; width:78%;
  min-height:60px; text-align:center; color:#e2dacd;
  font-size:calc(14px*var(--fs)); line-height:2;
  text-shadow:0 2px 14px rgba(0,0,0,.95);
  opacity:0; transition:opacity .5s;
}
.box-readout.in{ opacity:1; }
#box-done{ position:absolute; bottom:50px; z-index:3; }

/* ---------- 手机 ---------- */
#screen-chat{ background:#0f0e0d; }
#phone{
  position:relative; width:100%; height:100%;
  background:var(--cold); display:flex; flex-direction:column;
  transition:transform .5s ease, filter .5s ease;
}
/* 0:12 她把手机翻过去扣在腿上 —— 画面不变，只压暗 */
#phone.facedown{ filter:brightness(.28) saturate(.5); }

#chat-header{
  flex:0 0 auto; height:48px; background:#e4e7ea;
  border-bottom:1px solid #d2d6d9;
  display:flex; align-items:center; justify-content:center;
  font-size:calc(15px*var(--fs)); color:#33302c; letter-spacing:.1em;
  position:relative; user-select:none;
}
#peek-btn{
  position:absolute; right:10px; top:9px;
  width:30px; height:30px; border-radius:50%;
  border:1px solid #c6cacd; background:#eef1f3;
  color:#8a8f94; font-size:16px; cursor:pointer; line-height:1;
}
#peek-btn:hover{ background:#e2e6e9; }

/* 草稿箱窥视区：默认高度 0，下拉展开 */
#draft-peek{
  flex:0 0 auto; height:0; overflow:hidden;
  background:#dfe3e6; border-bottom:1px solid #d2d6d9;
  transition:height .22s ease;
}
#draft-peek.open{ height:60px; }
#draft-peek-box{
  height:60px; display:flex; align-items:center;
  padding:0 16px; font-size:calc(14px*var(--fs)); color:#4d4a46;
}
#draft-caret{
  display:inline-block; width:1px; height:16px; margin-left:2px;
  background:#4d4a46; animation:blink 1s steps(1) infinite; font-style:normal;
}
@keyframes blink{ 50%{ opacity:0; } }

#chat-scroll{
  flex:1 1 auto; overflow-y:auto; padding:14px 12px 8px;
  scroll-behavior:smooth;
}
#chat-log{ display:flex; flex-direction:column; gap:9px; }

.date-sep{
  align-self:center; font-size:calc(11px*var(--fs));
  color:#9aa0a5; letter-spacing:.14em; margin:10px 0 4px;
}
.bubble{
  max-width:74%; padding:9px 13px; border-radius:4px;
  font-size:calc(15px*var(--fs)); line-height:1.75; word-break:break-word;
}
.bubble.lu{ align-self:flex-start; background:#fff; color:#2b2724; }
.bubble.me{ align-self:flex-end; background:#c9d6cd; color:#22201d; }
.bubble.new{ animation:pop .3s ease; }
@keyframes pop{ from{ opacity:0; transform:translateY(8px); } }
.sys-line{
  align-self:center; font-size:calc(11px*var(--fs)); color:#9aa0a5;
  background:#e2e6e9; padding:4px 12px; border-radius:3px; margin:6px 0;
}
#typing-row{
  align-self:flex-start; font-size:calc(12px*var(--fs));
  color:#9aa0a5; padding:6px 4px; letter-spacing:.06em;
}

/* ---------- 输入区 ---------- */
#input-area{
  flex:0 0 auto; background:#e4e7ea; border-top:1px solid #d2d6d9;
  padding:10px 12px 14px; min-height:120px;
}
#voice-line{
  font-family:"Kaiti SC","STKaiti","KaiTi",serif;
  font-size:calc(14px*var(--fs)); color:#6d665f; line-height:1.9;
  min-height:26px; margin-bottom:6px;
  opacity:0; transition:opacity .7s;
}
#voice-line.in{ opacity:1; }

#draft-canvas{
  background:#fff; border:1px solid #d2d6d9; border-radius:3px;
  padding:10px 11px; min-height:96px; max-height:190px; overflow-y:auto;
  font-size:calc(15px*var(--fs)); line-height:2.05;
}
/* 幽灵态的核心：片段是行内块，删除只改 opacity，不改布局 */
.seg{
  display:inline; cursor:pointer; border-radius:2px;
  transition:opacity .12s ease, background .15s ease;
  padding:1px 0;
}
.seg:hover{ background:#eaf0ec; }
.seg.deleted{
  opacity:var(--ghost); cursor:default; background:transparent;
  text-decoration:line-through; text-decoration-color:rgba(43,39,36,.35);
}
.seg.deleted:hover{ background:transparent; }
.seg .sp{ display:inline-block; width:.5em; }

#composer-bar{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:9px;
}
#char-count{ font-size:calc(11px*var(--fs)); color:#9aa0a5; letter-spacing:.08em; }
#send-btn{
  font-family:inherit; padding:7px 22px; border-radius:3px; cursor:pointer;
  background:#5c7264; color:#f0f3f0; border:none;
  font-size:calc(14px*var(--fs)); letter-spacing:.16em;
}
#send-btn:disabled{ background:#c3c8cb; color:#eef1f3; cursor:default; }

/* 撤回键：呼吸光，周期由 --pulse 控制 */
#post-send{ display:flex; justify-content:flex-end; padding-top:6px; }
#recall-btn{
  font-family:inherit; cursor:pointer; padding:9px 20px; border-radius:3px;
  background:#f4f1ec; color:#6b5f52; border:1px solid #cbbfae;
  font-size:calc(14px*var(--fs)); letter-spacing:.12em;
  display:flex; align-items:center; gap:12px;
  animation:breathe var(--pulse) ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ box-shadow:0 0 0 rgba(196,150,90,0);   background:#f4f1ec; }
  50%    { box-shadow:0 0 16px rgba(196,150,90,.75); background:#fdf8f0; }
}
#recall-clock{
  font-variant-numeric:tabular-nums; font-size:calc(12px*var(--fs));
  color:#9c8d7b; letter-spacing:.06em;
}

/* 撤回后置灰输入框：点多少次都没反应 */
#dead-input{
  background:#dcdfe2; border:1px solid #d2d6d9; border-radius:3px;
  height:44px; cursor:default;
}
#post-recall-actions{ margin-top:10px; display:flex; justify-content:center; }
#stand-up{ display:flex; justify-content:center; padding-top:8px; }

/* ---------- 结局 ----------
   结局页背后是 d4a/d4b/d4c 三张插图（`.bg` 不带滤镜），文字全靠这条渐变垫底。
   原本是 .15 → .90 @45%，验收时只量了 4A —— 4A 五行文字，标题落在 y=204（alpha .62），
   够。但 4C 命中 hedged 会多一行，文字整块往上顶，标题爬到 y=136（alpha 只有 .48），
   实测标题对比度 2.84，几乎读不出「沉默」两个字。
   改法：渐变提前到 34% 收满（可见插图的窗口从 324px 收到 245px，代价可以接受），
   标题从 #cfc6b8 提到 #eee7da。三个结局最差一项 5.30。
   顺便修掉一处不是"压在图上"的问题：`.btn-ghost` 的 --ink-soft 是给亮色手机界面配的，
   压在这片近黑上只有 2.91。这里沿用 #intro-next 已经在用的那档暗底幽灵键颜色。 */
#screen-ending{ background:#0d0c0b; }
#ending-scroll{
  position:relative; z-index:2; width:100%; height:100%;
  overflow-y:auto; padding:0 30px 40px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(rgba(8,7,6,.17) 0%, rgba(8,7,6,.87) 34%, rgba(8,7,6,.93) 100%);
}
#ending-title{
  font-size:calc(15px*var(--fs)); letter-spacing:.4em;
  color:#eee7da; margin-bottom:22px;
}
#ending-text{ font-size:calc(15px*var(--fs)); line-height:2.25; color:#e6ded1; }
#ending-text p{ margin-bottom:15px; opacity:0; transition:opacity 1s; }
#ending-text p.in{ opacity:1; }
#ending-text p.punch{ letter-spacing:.16em; color:#f2ece1; }
#ending-ach{
  margin-top:24px; font-size:calc(12px*var(--fs)); letter-spacing:.2em;
  color:#9c9081; opacity:0; transition:opacity 1s;
}
#ending-ach.in{ opacity:1; }
.ending-btns{
  display:flex; gap:12px; margin-top:32px; align-items:center;
  opacity:0; transition:opacity 1s;
}
.ending-btns.in{ opacity:1; }
/* 暗底上的幽灵键：--ink-soft 是给手机那片冷白配的，这里要提一档（同 #intro-next） */
.ending-btns .btn-ghost{ color:#9c9287; border-color:rgba(156,146,135,.35); }
.ending-btns .btn-ghost:hover{ color:#d8d0c4; }

/* ---------- DEV ---------- */
#devpanel{
  position:fixed; top:8px; left:8px; z-index:99;
  background:rgba(12,11,10,.92); color:#8fa89a; padding:10px 12px;
  font:11px/1.7 ui-monospace,Consolas,monospace; border:1px solid #2b3a33;
}
.dev-row{ margin-bottom:5px; }
#devpanel button{
  font:11px ui-monospace,monospace; background:#1d2b25; color:#8fa89a;
  border:1px solid #33473d; padding:2px 7px; cursor:pointer; margin-right:3px;
}
#devpanel button:hover{ background:#28382f; }
#dev-clock{ color:#d8c9a8; }

@media (max-width:430px){ #stage{ box-shadow:none; } }

/* ===== 构建期注入（build.py）=====
   调试面板在公开版永久关闭。bindDev() 的调用已在构建时摘掉，
   这条 CSS 是第二道保险 —— 面板里有「填真解」「折第4行」
   「extend_recall 4min」这类直接给答案或改核心机制的按钮。
   display:none 同时也把它从 tab 顺序和无障碍树里摘掉了。 */
#dev, #devpanel { display: none !important; }