/* ============================================================
   MyGO · 单聊界面
   白底 + 全屏 Live2D + galgame 式半透明对话框 + 两侧可展开面板
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{
  width:100%;height:100%;overflow:hidden;background:#fff;color:#1f2329;
  font-family:-apple-system,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  overscroll-behavior:none;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:inherit;outline:none;font-size:16px}

/* ---------- Live2D 舞台 ---------- */
#live2d{
  position:fixed;inset:0;width:100%;height:100%;
  display:block;touch-action:none;
}

/* ---------- 角落箭头 ---------- */
.arrow{
  /* z-index 见文件末尾的层级表：箭头要在旁白层和暂停幕**前面** */
  position:fixed;z-index:58;
  width:42px;height:42px;border-radius:14px;
  background:rgba(24,26,34,.42);
  color:#fff;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  transition:background .18s,transform .18s;
}
.arrow:active{background:rgba(24,26,34,.62);transform:scale(.94)}
.arrow.left{left:14px;top:calc(14px + env(safe-area-inset-top,0px))}
.arrow.right{right:14px;top:calc(14px + env(safe-area-inset-top,0px))}
.arrow.open{background:rgba(61,126,255,.92)}

/* ---------- 侧面板 ---------- */
.panel{
  position:fixed;top:0;bottom:0;z-index:25;
  width:min(82vw,344px);
  padding:calc(64px + env(safe-area-inset-top,0px)) 18px calc(20px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  transition:transform .24s cubic-bezier(.2,.9,.3,1);
}
.panel.left{left:0;transform:translateX(-102%);border-radius:0 22px 22px 0;
  box-shadow:6px 0 26px rgba(0,0,0,.10)}
.panel.right{right:0;transform:translateX(102%);border-radius:22px 0 0 22px;
  box-shadow:-6px 0 26px rgba(0,0,0,.10)}
.panel.show{transform:translateX(0)}

.panel h3{font-size:12.5px;font-weight:700;color:#8a92a6;letter-spacing:.5px;margin:18px 0 8px}
.panel h3:first-child{margin-top:6px}
.panel .who{font-size:19px;font-weight:800;margin-bottom:2px}
.panel .sub{font-size:12px;color:#98a1b5;margin-bottom:14px}

/* 菜单项 */
.mi{
  display:flex;align-items:center;gap:11px;
  padding:13px 14px;margin-bottom:8px;border-radius:13px;
  background:#fff;border:1.5px solid #eceef3;font-size:14.5px;font-weight:600;
  transition:border-color .15s,background .15s;
}
.mi:active{background:#f5f8ff;border-color:#3d7eff}
.mi .ic{font-size:18px;width:22px;text-align:center}
.mi .arr{margin-left:auto;color:#c3cad6;font-size:16px}
.mi.on{border-color:#3d7eff;background:#f0f6ff}
.mi .tag{margin-left:auto;font-size:11.5px;color:#98a1b5;font-weight:400}
/* 存档行：[头像] 角色名+小字（条数/时间） [历史] [删] */
.mi .svm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
.mi .svs{display:block;font-size:11px;font-weight:400;color:#98a1b5;margin-top:1px}
.mi .mini{margin-left:auto;flex:none;padding:5px 10px;border-radius:8px;background:#eef4ff;color:#3d7eff;font-size:12px}
.mi .del{margin-left:6px;flex:none;padding:5px 10px;border-radius:8px;background:#fff1f1;color:#e5484d;font-size:12px}

/* 存档的历史记录 */
.hist{padding:10px 12px;border-radius:12px;background:#fff;border:1.5px solid #eceef3;margin-bottom:8px}
.hist.me{background:#f7faff;border-color:#e3ecff}
.hist .hw{font-size:11.5px;font-weight:700;color:#8a92a6;margin-bottom:4px}
.hist .hb{font-size:13.5px;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.hist .hb .act{display:block;font-size:12.5px;font-style:italic;color:#a9b2c4;margin:2px 0 4px}

/* 页内确认框 —— 删除这类操作绝对不能用 window.confirm()：
   WebView 没实现 onJsConfirm 时它会静默返回 false，点了等于没点。 */
.ask{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:70;
  width:min(84vw,330px);padding:18px 18px 14px;border-radius:16px;
  background:#fff;box-shadow:0 16px 50px rgba(0,0,0,.24);
  /* ★ 必须用带 translate(-50%,-50%) 的关键帧：复用 dlgIn 的话，
     它结尾的 transform:none 会把这层的居中偏移顶掉，弹窗先闪到右下角再跳回来。 */
  animation:askIn .16s ease-out;
}
@keyframes askIn{
  from{opacity:0;transform:translate(-50%,-50%) scale(.96)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.ask .askm{font-size:14.5px;line-height:1.6;color:#1f2329;margin-bottom:14px}
.ask .askb{display:flex;gap:9px}
.ask button{flex:1;padding:10px 12px;border-radius:11px;font-size:14px;font-weight:600}
.ask .askno{background:#f2f4f8;color:#4a5364}
.ask .askok{background:#e5484d;color:#fff}
.ask .askok:active{filter:brightness(.94)}

.av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:15px;flex:none}

/* 表单 */
.fl{display:block;font-size:12px;font-weight:700;color:#8a92a6;margin:14px 0 6px}
.fi{
  width:100%;padding:11px 12px;border-radius:11px;
  background:#fff;border:1.5px solid #e6e9f0;font-size:14.5px;color:#1f2329;
}
.fi:focus{border-color:#3d7eff}
textarea.fi{resize:vertical;min-height:64px}
.row{display:flex;gap:9px;margin-top:12px}
.btn{
  flex:1;padding:11px 14px;border-radius:11px;
  background:#f2f4f8;color:#4a5364;font-size:14px;font-weight:600;
}
.btn:active{background:#e8ecf3}
.btn.pri{background:linear-gradient(135deg,#3d7eff,#6f5cff);color:#fff}
.btn.pri:active{filter:brightness(.94)}
.btn.sm{padding:8px 12px;font-size:13px;flex:none}
.hint{font-size:11.5px;color:#98a1b5;line-height:1.6;margin-top:7px}

.chk{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#4a5364;padding:7px 0}
.chk input{width:18px;height:18px;accent-color:#3d7eff}
.back{display:flex;align-items:center;gap:6px;font-size:13px;color:#3d7eff;font-weight:600;margin-bottom:12px}

/* ---------- Galgame 对话框 ---------- */
.dialog{
  position:fixed;z-index:20;
  left:14px;right:14px;
  bottom:calc(96px + env(safe-area-inset-bottom,0px));
  max-height:36vh;overflow-y:auto;
  padding:14px 18px 16px;border-radius:18px;
  background:rgba(18,20,28,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.18);
  animation:dlgIn .18s ease-out;
}
@keyframes dlgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dlg-name{
  font-size:13px;font-weight:700;letter-spacing:.4px;
  color:#ffd6de;margin-bottom:6px;
}
.dlg-text{font-size:15.5px;line-height:1.72;white-space:pre-wrap;word-break:break-word}
/* 导演判定：这一轮为什么说几段。默认藏着，设置里开了才显示 */
.dlg-dir{font-size:11px;line-height:1.5;color:#8b93a5;margin:-2px 0 7px}
.dlg-dir b{color:#ffd6de;font-weight:700}
.dlg-text .act{display:block;font-size:13px;font-style:italic;color:#a9b2c4;margin:3px 0 5px}
.dlg-text .cursor{color:#ff8899;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- 输入区 ---------- */
.composer{
  position:fixed;z-index:22;left:0;right:0;bottom:0;
  display:flex;gap:9px;align-items:flex-end;
  padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid rgba(0,0,0,.05);
}
#input{
  flex:1;min-height:44px;max-height:120px;
  padding:11px 14px;border-radius:14px;
  background:rgba(18,20,28,.72);color:#fff;
  border:1.5px solid transparent;
  font-size:15px;line-height:1.45;resize:none;
}
#input::placeholder{color:#a9b2c4}
#input:focus{border-color:#3d7eff}
#btnSend{
  flex:none;height:44px;padding:0 20px;border-radius:14px;
  background:linear-gradient(135deg,#3d7eff,#6f5cff);color:#fff;
  font-weight:700;font-size:14.5px;
}
#btnSend:active{filter:brightness(.94)}
#btnSend:disabled{background:#c9d3e3;color:#fff}

/* ---------- 提示 / 加载 ---------- */
.toast{
  position:fixed;left:50%;top:calc(20px + env(safe-area-inset-top,0px));transform:translateX(-50%);
  z-index:60;padding:10px 18px;border-radius:12px;
  background:rgba(18,20,28,.86);color:#fff;font-size:13.5px;
  max-width:86vw;text-align:center;animation:tin .2s ease;
}
@keyframes tin{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* 出错提示（只在真正出错时出现）。放顶部 —— 以前放底部，正好压在 galgame 对话框上 */
#stageNote{
  position:fixed;left:14px;right:14px;top:calc(66px + env(safe-area-inset-top,0px));
  z-index:40;padding:8px 12px;border-radius:10px;
  background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);
  color:#c0392b;font-size:12px;line-height:1.5;text-align:center;
  display:none;word-break:break-all;max-height:30vh;overflow-y:auto;
}

/* ============================================================
   剧情模式（横屏）
   两块立绘 canvas 平时都藏着，只有 body 带 mode-story 才出来。
   ============================================================ */
#live2dStage{display:none}
body.mode-story #live2d{display:none}
body.mode-story #live2dStage{
  display:block;position:fixed;inset:0;width:100%;height:100%;
  touch-action:none;
}
/* 谁在说话谁不浅：这一版是**逐个人**用 PIXI 的 alpha 做的（舞台合并成一块了），
   不再靠 canvas 上的 CSS 类 —— 五个人时 CSS 也没法分开控制。 */

/* 横屏里竖屏那套尺寸不合适，单独给一份 */
body.mode-story .dialog{
  left:7vw;right:7vw;bottom:calc(66px + env(safe-area-inset-bottom,0px));
  max-height:46vh;padding:12px 18px 14px;
}
body.mode-story .dlg-text{font-size:15px}
body.mode-story .arrow{width:38px;height:38px;font-size:19px;border-radius:12px}
body.mode-story .panel{padding-top:calc(56px + env(safe-area-inset-top,0px))}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* 旁白走**同一个对话框**（用户要求：不要另做一层白屏）。
   只是样子和台词区分开：名字栏留空，正文用斜体浅色，末尾带一个「轻点继续」。 */
.dialog.narr{background:rgba(18,20,28,.62)}
.dialog.narr .dlg-text{font-style:italic;color:#e6e9f0}
.dialog.narr .narrhint{
  display:block;margin-top:8px;text-align:right;
  font-style:normal;font-size:12px;color:#9aa3b5;
  animation:blink 1.5s steps(2) infinite;
}
/* 剧情模式下的说话人角标（谁在说） */
body.mode-story .dlg-name{color:#ffe3b0}

/* 剧情模式：玩家开始打字 → 台上暂停。给个看得见的提示 */
body.story-paused #input{border-color:#ffd6de;background:rgba(18,20,28,.55)}

/* ============================================================
   剧情模式：暂停
   · 黑幕只负责「看起来停住了」，pointer-events:none —— 不挡任何一层，
     选项、面板、输入框全都还能点（这是用户特别交代的）
   · 按钮压在黑幕上面，随时能点回来继续
   ============================================================ */
.pausefog{
  /* ★ 必须在旁白层(45)之上，否则暂停时看到的是白屏、看不到黑幕（真机上就是这么错的） */
  position:fixed;inset:0;z-index:48;background:rgba(0,0,0,.52);
  pointer-events:none;animation:fadeIn .2s ease-out;
}
.pausefog[hidden]{display:none}
.pausebtn{
  display:none;position:fixed;z-index:56;
  right:calc(7vw + 14px);bottom:calc(66px + 14px);
  width:54px;height:54px;border-radius:50%;
  align-items:center;justify-content:center;
  background:rgba(18,20,28,.78);color:#fff;font-size:12.5px;font-weight:700;
  border:1.5px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 4px 16px rgba(0,0,0,.28);
}
.pausebtn:active{transform:scale(.94)}
body.mode-story .pausebtn{display:flex}
.pausebtn.on{background:rgba(229,72,77,.92);border-color:rgba(255,255,255,.5)}
body.story-paused #input{border-color:#ffd6de}


/* ============================================================
   剧情模式 · 开场抉择（左：我来写开头 / 右：让 AI 开场）
   横屏：两块各占半屏；选了「我来写」之后同一层换成输入那一页。
   层级 50 —— 盖住对话框(20)、输入区(22)、侧面板(25)，
   但**低于**左右箭头(58)：想改设置随时还能拉出右上角。
   ============================================================ */
.startpick{
  position:fixed;inset:0;z-index:50;display:flex;
  background:rgba(14,16,22,.62);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  animation:fadeIn .18s ease-out;
}
.startpick[hidden]{display:none}
.startpick .sp-half{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:24px;text-align:center;color:#fff;
  border-right:1px solid rgba(255,255,255,.14);
}
.startpick .sp-half:last-child{border-right:0}
.startpick .sp-half:active{background:rgba(255,255,255,.10)}
.startpick .sp-t{font-size:19px;font-weight:700;letter-spacing:.5px}
.startpick .sp-s{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.66);max-width:280px}
/* 写开头那一页 */
.startpick .sp-w{margin:auto;width:min(92vw,620px);display:flex;flex-direction:column;gap:10px;
  padding:18px 20px;border-radius:18px;background:#fff;color:#1f2329;
  /* ★ 横屏只有三四百 px 高，内容一多「开始」就被挤出屏幕 ——
     这里限高并允许滚动（用户报过「没法往下滑」）。 */
  max-height:calc(100% - 16px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  box-shadow:0 18px 60px rgba(0,0,0,.32);animation:askIn .18s ease-out}
.startpick .sp-wt{font-size:14px;font-weight:700;color:#4a5364}
.startpick textarea{
  width:100%;min-height:70px;padding:11px 12px;border-radius:12px;
  background:#fff;border:1.5px solid #e6e9f0;font-size:15px;color:#1f2329;
  resize:none;font-family:inherit;
}
.startpick textarea:focus{border-color:#3d7eff;outline:none}
/* 可选的那两格（自述 / 预设事件）：矮一点，横屏才放得下 */
.startpick textarea.sp-mini{min-height:38px;font-size:14px}
.startpick .sp-name{
  width:100%;padding:11px 12px;border-radius:12px;
  background:#fff;border:1.5px solid #e6e9f0;font-size:15px;color:#1f2329;
}
.startpick .sp-name:focus{border-color:#3d7eff;outline:none}
.startpick .sp-wc{font-size:11.5px;color:#98a1b5;line-height:1.6;margin-top:-2px}
.startpick .sp-wc b{color:#e5484d}
.startpick .sp-cast{display:flex;flex-wrap:wrap;gap:8px}
.startpick .sp-c{
  display:flex;align-items:center;gap:7px;padding:7px 11px 7px 7px;border-radius:999px;
  background:#f2f4f8;border:1.5px solid transparent;font-size:13px;color:#4a5364;
}
.startpick .sp-c.on{background:#eaf1ff;border-color:#3d7eff;color:#1f2329;font-weight:600}
.startpick .sp-c .av{width:26px;height:26px;font-size:12px}
.startpick .sp-c .nm{white-space:nowrap}
.startpick .sp-c .tag{font-size:10.5px;font-weight:700;color:#3d7eff}
.startpick .sp-c .arr{font-size:13px;color:#c3c9d6}
.startpick .sp-b{display:flex;gap:9px;margin-top:2px;
  /* 按钮钉在面板底部：内容再长也点得到「开始」 */
  position:sticky;bottom:-4px;background:#fff;padding:8px 0 4px;z-index:1}

/* 横屏（安卓手机横过来只有 ~360-420px 高）：把开场面板压扁一点，尽量一屏放得下 */
@media (max-height:560px){
  .startpick .sp-w{gap:6px;padding:12px 14px;border-radius:14px}
  .startpick .sp-wt{font-size:13px}
  .startpick .sp-name{padding:8px 10px;font-size:14px}
  .startpick textarea{min-height:44px;padding:8px 10px;font-size:14px}
  .startpick textarea.sp-mini{min-height:32px;font-size:13px}
  .startpick .sp-wc{font-size:10.5px;line-height:1.5}
  .startpick .sp-c{padding:5px 9px 5px 5px;font-size:12px;border-radius:999px}
  .startpick .sp-c .av{width:22px;height:22px;font-size:11px}
  .startpick .sp-b button{padding:9px 12px;font-size:13.5px}
}


/* ============================================================
   背景（单聊竖屏 / 剧情横屏）
   z-index 0：在最底下，立绘 canvas 是透明的（backgroundAlpha:0），
   对话框(20)、输入区(22)、面板(25)、开场抉择(50) 全在它上面。
   两层交叉淡入，换场景不会闪白。
   ============================================================ */
.bg{
  position:fixed;inset:0;z-index:0;
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  opacity:0;transition:opacity .55s ease;pointer-events:none;
}
.bg.on{opacity:1}

/* ============================================================
   层级表（从下到上）—— 改之前先看这里
     0   背景（照片层，最底）
     20  对话框   22  输入区
     24  内心状态面板（导演判定 —— 要**低于**侧面板，别盖住菜单项）
     25  侧面板
     45  白屏旁白
     48  暂停黑幕（要盖住旁白）
     50  剧情开场抉择（低于箭头，箭头还能点）
     56  暂停按钮
     58  左右箭头（要浮在旁白和黑幕前面）
     60  toast    70  确认框
   黑幕是 pointer-events:none：只遮画面，不挡任何一层。
   ============================================================ */

/* ============================================================
   内心状态面板（发言意愿 / 参与度 / 游离度 / 状态栏）
   玩家平时看不到 —— 只有设置里开着「显示导演判定」才出现
   ============================================================ */
.innerpanel{
  /* ★ 24 —— **必须低于侧面板(25)**：两边都在左上角，高一层就会把菜单项盖住
     （用户原话：「ai 导演的栏应该在选项按钮图层下」）。 */
  position:fixed;z-index:24;
  left:14px;top:calc(66px + env(safe-area-inset-top,0px));
  max-width:min(52vw,420px);
  padding:8px 10px;border-radius:12px;
  background:rgba(18,20,28,.72);color:#e8eaf0;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:11px;line-height:1.55;pointer-events:none;
}
.innerpanel[hidden]{display:none}
.innerpanel .ip-h{color:#9aa3b5;margin-bottom:3px}
.innerpanel .ip-r{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.innerpanel .ip-r b{color:#ffe3b0;font-weight:700;margin-right:6px}
.innerpanel .ip-n{margin-right:8px}
.innerpanel .ip-d{color:#9aa3b5}
.innerpanel .ip-s{color:#a9d3ff}
.innerpanel .ip-lo{margin-top:3px;color:#ffd6de}
.innerpanel .ip-none{color:#9aa3b5}