/* ============================================================
   《最后一个人工客服》
   双层视觉: 暗色未来审计终端 (2049) 内嵌浅色旧客服后台 (2026)
   ============================================================ */

@font-face {
  font-family: 'FusionPixel';
  src: url('../assets/fonts/fusion-pixel-12px-monospaced-zh_hans.otf.woff2') format('woff2');
  font-display: swap;
}

:root {
  --bg: #070b14;
  --panel: #0d1524;
  --panel2: #111c30;
  --line: #1d2f4d;
  --txt: #c8d6ee;
  --dim: #5f7398;
  --cyan: #5ad1e6;
  --orange: #ffab40;
  --red: #ff5d5d;
  --green: #54e08c;
  --win-bg: #dfe3ea;
  --win-bg2: #eef0f4;
  --win-line: #9aa7bd;
  --win-txt: #2a3242;
  --win-blue: #3a6ea5;
}

* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0 !important; }

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'FusionPixel', 'Zpix', ui-monospace, Menlo, 'PingFang SC', monospace;
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: .5px;
  /* 窄窗口允许横向滚动，保证右栏可达 */
  overflow-x: auto;
  overflow-y: hidden;
}

/* 扫描线 + 微光晕 */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9000;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(2,5,12,.55) 100%);
}

button { font: inherit; letter-spacing: inherit; cursor: pointer; }
input {
  font: inherit; letter-spacing: inherit;
  background: var(--bg); color: var(--txt);
  border: 1px solid var(--line);
  padding: 4px 8px; outline: none; min-width: 0;
}
input:focus { border-color: var(--cyan); }

.dim { color: var(--dim); }
.warn { color: var(--orange); }
.blink { animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- 按钮 (chunky 像素) ---------- */
.btn {
  background: var(--panel2); color: var(--txt);
  border: 1px solid var(--line);
  box-shadow: 2px 2px 0 #030509;
  padding: 5px 14px;
}
.btn:hover { border-color: var(--cyan); color: var(--cyan); }
.btn:active { transform: translate(2px, 2px); box-shadow: none; }
.btn.primary { border-color: var(--cyan); color: var(--cyan); }
.btn.danger { border-color: #7a2f2f; color: var(--red); }
.btn.danger:hover { border-color: var(--red); }
.btn.big { padding: 9px 30px; font-size: 14px; }
.btn.sm { padding: 2px 9px; }
.btn:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- 线索 ---------- */
[data-clue] {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  color: var(--cyan);
  /* 垂直 padding 不占行高，只扩大折行时的点击命中区 */
  padding: 5px 1px;
}
[data-clue]:hover { background: rgba(90,209,230,.12); }
[data-clue].got { color: var(--green); text-decoration-style: solid; }
[data-clue].got::after { content: '✓'; font-size: 10px; margin-left: 2px; }
.win [data-clue] { color: #a33d10; }
.win [data-clue].got { color: #1d7a44; }
.win [data-clue]:hover { background: rgba(163,61,16,.1); }

/* ============ 标题屏 ============ */
.title-screen {
  height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
  padding: 7vh 20px 40px;
}
.boot { width: min(680px, 94vw); margin-bottom: 26px; }
.boot-line {
  color: var(--cyan); opacity: 0;
  animation: bootin .01s steps(1) forwards;
  white-space: pre-wrap;
}
.boot-line:nth-child(6) { color: var(--orange); }
@keyframes bootin { to { opacity: 1; } }
.brief {
  width: min(680px, 94vw);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 4px 4px 0 #030509;
  padding: 22px 26px;
  opacity: 0;
  animation: bootin .01s steps(1) forwards;
}
.brief-title { color: var(--orange); font-size: 14px; margin-bottom: 12px; }
.brief-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.brief-table td { border: 1px solid var(--line); padding: 5px 10px; vertical-align: top; }
.brief-table td:first-child { color: var(--dim); white-space: nowrap; width: 110px; }
.brief-tip { color: var(--dim); margin-bottom: 16px; }
.title-btns { display: flex; gap: 12px; margin-bottom: 14px; }
.brief-foot { color: var(--dim); text-align: center; font-size: 10px; }

/* ============ 主布局 ============ */
.layout {
  display: grid;
  grid-template: 'h h h' auto 'l c r' 1fr 't t t' auto / 250px 1fr 320px;
  height: 100vh;
  min-width: 1024px;
}
.hdr {
  grid-area: h;
  display: flex; align-items: center; gap: 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 7px 14px;
}
.hdr-sys { color: var(--cyan); }
.hdr-clock { margin-left: auto; color: var(--orange); }

.left {
  grid-area: l;
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
.center {
  grid-area: c;
  overflow-y: auto;
  padding: 16px;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(29,47,77,.12) 14px 15px);
}
.right {
  grid-area: r;
  background: var(--panel);
  border-left: 1px solid var(--line);
  overflow-y: auto;
}
.tickerbar {
  grid-area: t;
  background: var(--panel2);
  border-top: 1px solid var(--line);
  color: var(--dim);
  padding: 4px 14px;
  white-space: nowrap; overflow: hidden;
}

/* ---------- 左栏工单列表 ---------- */
.side-h {
  padding: 8px 12px 2px;
  color: var(--orange);
}
.side-h .dim { color: var(--dim); }
.side-body { padding: 4px 12px 12px; }
.tk {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  display: flex; flex-direction: column;
}
.tk:hover { background: var(--panel2); }
.tk.sel { background: var(--panel2); box-shadow: inset 3px 0 0 var(--cyan); }
.tk.locked { color: var(--dim); cursor: default; }
.tk.locked:hover { background: none; }
.tk-no { color: var(--dim); font-size: 10px; }
.tk.sel .tk-no { color: var(--cyan); }
.tk-title { }
.tk.final .tk-title { color: var(--orange); }
.tk-open { color: var(--dim); font-size: 10px; }
.tk-open.warn { color: var(--orange); }
.tk-done { font-size: 10px; }
.tk-done.g { color: var(--green); }
.tk-done.o { color: var(--orange); }

/* ---------- 空面板 ---------- */
.empty-pane {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--cyan);
}

/* ============ 2026 旧后台窗口 ============ */
.win {
  background: var(--win-bg);
  color: var(--win-txt);
  border: 1px solid #6b7994;
  box-shadow: 5px 5px 0 rgba(0,0,0,.55);
  max-width: 860px;
  margin: 0 auto;
}
.win-bar {
  background: linear-gradient(180deg, #4a7db3, var(--win-blue));
  color: #fff;
  padding: 4px 10px;
  display: flex; align-items: center; gap: 8px;
}
.win-dot { width: 8px; height: 8px; background: #cfe0f0; border: 1px solid #274b73; }
.win-risk { margin-left: auto; padding: 0 8px; font-size: 10px; }
.win-risk.r-lo { background: #35597f; }
.win-risk.r-md { background: #a56a1f; }
.win-risk.r-hi { background: #a33030; }
.win-body { padding: 12px 14px 16px; }

.kv { width: 100%; border-collapse: collapse; background: var(--win-bg2); }
.kv td { border: 1px solid var(--win-line); padding: 4px 10px; vertical-align: top; }
.kv td:first-child { color: #5a6579; white-space: nowrap; width: 120px; background: var(--win-bg); }
.head-kv { margin-bottom: 12px; }
.kv.logi td:first-child { width: 150px; }

.tabs { display: flex; gap: 2px; margin-bottom: -1px; position: relative; flex-wrap: wrap; }
.tab {
  background: #c9cfda; color: #5a6579;
  border: 1px solid var(--win-line);
  padding: 3px 12px;
}
.tab.on {
  background: var(--win-bg2); color: var(--win-txt);
  border-bottom-color: var(--win-bg2);
}
.tab-body {
  border: 1px solid var(--win-line);
  background: var(--win-bg2);
  padding: 12px;
  min-height: 260px;
}

/* ---------- 聊天 ---------- */
.chat-cap { color: #5a6579; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px dashed var(--win-line); }
.chat { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.msg { max-width: 78%; }
.msg .who { font-size: 10px; color: #7a8499; margin-bottom: 1px; }
.msg .mt { color: #9aa3b5; }
.msg .bub { border: 1px solid var(--win-line); padding: 6px 10px; background: #fff; }
.msg.buyer { align-self: flex-start; }
.msg.h { align-self: flex-end; text-align: left; }
.msg.h .who { text-align: right; color: #1d7a44; }
.msg.h .bub { background: #e2f3e8; border-color: #8fbfa2; }
.msg.ai { align-self: flex-end; }
.msg.ai .who { text-align: right; }
.msg.ai .bub { background: #e8eaf0; border-style: dashed; color: #5a6579; }
.msg.sug { align-self: flex-end; opacity: .9; }
.msg.sug .who { text-align: right; color: #a56a1f; }
.msg.sug .bub { background: #fdf3e3; border: 1px dashed #cf9d4e; color: #7a5a20; }
.msg.ghost { align-self: flex-start; max-width: 92%; }
.msg.ghost .who { color: #a33030; }
.msg.ghost .bub { background: #f8e8e8; border: 1px dashed #c56a6a; color: #7a2828; }
.msg.sys { align-self: center; color: #8a93a5; font-size: 10px; max-width: 100%; text-align: center; }
.msg.sys.green { color: #1d7a44; font-size: 12px; }
.msg.sys.pause { letter-spacing: 3px; padding: 6px 0; }
.chat-foot { margin-top: 10px; text-align: center; }
#chatbox { min-height: 300px; cursor: pointer; }

/* 审计标注: 2049 覆盖层入侵 2026 窗口 */
.annos {
  margin-top: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 8px 12px;
  color: var(--orange);
}
.annos-h { color: var(--dim); font-size: 10px; margin-bottom: 4px; }
.anno { color: var(--orange); }
.annos [data-clue] { color: var(--cyan); }
.annos [data-clue].got { color: var(--green); }

/* ---------- 商品 ---------- */
.goods { display: flex; gap: 14px; align-items: flex-start; }
.goods-pic {
  width: 110px; height: 110px; flex: none;
  border: 1px solid var(--win-line); background: #cdd3de;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 22px; color: #8a93a5; text-align: center;
}
.goods-pic .dim { font-size: 9px; color: #8a93a5; }

/* ---------- 备注 ---------- */
.note-wrap { display: flex; flex-direction: column; gap: 10px; }
.note-cap { color: #5a6579; font-size: 10px; }
.note-cap.hid { color: var(--win-blue); margin-top: 6px; }
.note {
  background: #fbf8ec; border: 1px solid #d5c98f;
  padding: 8px 12px; color: #4a4530;
}
.note.empty { color: #9aa3b5; background: var(--win-bg2); border-style: dashed; border-color: var(--win-line); }
.note-audit { color: #8a93a5; font-size: 10px; }
.note.locked-note {
  background: var(--win-bg2); color: #9aa3b5;
  border: 1px dashed var(--win-line); text-align: center;
}
.note.hidden-note { background: #eef6ff; border-color: #9dbbd8; color: #2f4258; }
.hn-title { color: #6b83a0; font-size: 10px; margin-bottom: 2px; }

/* ---------- 谜题输入 ---------- */
.puz { margin-top: 14px; border-top: 1px dashed var(--win-line); padding-top: 10px; }
.puz-ask { margin-bottom: 8px; color: #5a6579; }
.puz-row { display: flex; gap: 8px; }
.puz-row input { flex: 1; background: #fff; color: var(--win-txt); border-color: var(--win-line); }
.puz-row .btn { background: var(--win-bg); color: var(--win-txt); border-color: #6b7994; box-shadow: 2px 2px 0 rgba(0,0,0,.25); }
.puz-row .btn:hover { color: var(--win-blue); border-color: var(--win-blue); }
.puz.solved { color: #1d7a44; }
.fb { margin-top: 8px; }
.fb.bad { color: #a33030; }
.fb.good { color: var(--green); }
.fb.warn2 { color: var(--orange); }
.fb.dim { color: var(--dim); }
.win .fb.dim { color: #7a8499; }

/* ---------- 右栏 ---------- */
.goal { color: var(--cyan); border-bottom: 1px solid var(--line); }
.concl-box { display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); }
.cbtn {
  background: var(--panel2); color: var(--txt);
  border: 1px solid var(--line);
  box-shadow: 2px 2px 0 #030509;
  padding: 5px 10px; text-align: left;
}
.cbtn:hover:not(:disabled) { border-color: var(--cyan); }
.cbtn:active:not(:disabled) { transform: translate(2px,2px); box-shadow: none; }
.cbtn.sel { border-color: var(--green); color: var(--green); box-shadow: 2px 2px 0 #0c2418; }
.cbtn.sel::before { content: '◆ '; }
.cbtn:disabled { opacity: .35; cursor: not-allowed; }
#clues-box { border-bottom: 1px solid var(--line); display: block; }
.clue-item { color: var(--txt); cursor: pointer; padding: 1px 0; }
.clue-item:hover { color: var(--cyan); }
.doc-item { cursor: pointer; padding: 1px 0; color: var(--txt); }
.doc-item:hover { color: var(--cyan); }
.doc-item.locked { color: var(--dim); cursor: default; }
.doc-item.note-i { color: #9dbbd8; }
.doc-item.note-i:hover { color: var(--cyan); }

/* ============ 终审 ============ */
.final-pane {
  max-width: 760px; margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 5px 5px 0 #030509;
  padding: 18px 22px 24px;
}
.final-h { color: var(--orange); font-size: 14px; margin-bottom: 6px; }
.final-intro { color: var(--dim); margin-bottom: 16px; }
.fstep { border: 1px solid var(--line); margin-bottom: 12px; padding: 10px 14px; }
.fstep.act { border-color: var(--cyan); }
.fstep.done { border-color: #1d4a30; }
.fstep.lock { opacity: .45; }
.fstep-h { color: var(--cyan); margin-bottom: 4px; }
.fstep.done .fstep-h { color: var(--green); }
.fstep-ok { color: var(--txt); white-space: pre-line; }
.fstep-ask { margin-bottom: 8px; }
.fopts { display: flex; flex-direction: column; gap: 6px; }
.fopt { text-align: left; }
.fopts.arch .fopt.e4 { border-color: var(--green); color: var(--green); }
.fstep .puz-row input { background: var(--bg); color: var(--txt); border-color: var(--line); }
.fstep .puz-row .btn { background: var(--panel2); color: var(--cyan); border-color: var(--cyan); box-shadow: 2px 2px 0 #030509; }

/* ============ 结局 ============ */
.ending {
  height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.end-title { color: var(--orange); font-size: 16px; margin-bottom: 18px; }
.end-lines { max-width: 640px; }
.end-line { min-height: 1.9em; }
.true-end .end-line { color: var(--txt); }
.fade { opacity: 0; animation: fadein .8s ease forwards; }
@keyframes fadein { to { opacity: 1; } }
.end-stats {
  margin-top: 26px; padding: 12px 18px;
  border: 1px solid var(--line); color: var(--dim);
}
.end-stats div:last-child { color: var(--green); }
.end-bonus { margin-top: 18px; color: var(--cyan); max-width: 640px; }
.end-btns { margin-top: 30px; display: flex; gap: 12px; }

/* ============ modal / toast ============ */
#modal-wrap {
  position: fixed; inset: 0; z-index: 9500;
  display: none;
  background: rgba(3,5,10,.72);
  align-items: center; justify-content: center;
}
#modal-wrap.show { display: flex; }
.modal {
  width: min(560px, 92vw);
  max-height: 80vh; overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--cyan);
  box-shadow: 6px 6px 0 #030509;
  padding: 16px 20px;
}
.modal-title { color: var(--orange); margin-bottom: 10px; }
.modal-body p { margin-bottom: 4px; }
.modal-body .doc-h { color: var(--cyan); }
.modal-btns { margin-top: 14px; display: flex; gap: 10px; justify-content: flex-end; }

#toast {
  position: fixed; left: 50%; bottom: 46px; z-index: 9600;
  transform: translateX(-50%) translateY(20px);
  background: var(--panel2); color: var(--cyan);
  border: 1px solid var(--cyan);
  box-shadow: 3px 3px 0 #030509;
  padding: 7px 18px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  max-width: 90vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.show.ok { color: var(--green); border-color: var(--green); }
#toast.show.warn { color: var(--orange); border-color: var(--orange); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }
.win ::-webkit-scrollbar-track, .chat::-webkit-scrollbar-track { background: var(--win-bg2); }
.win ::-webkit-scrollbar-thumb, .chat::-webkit-scrollbar-thumb { background: var(--win-line); border-color: var(--win-bg2); }