/* 查进度 / 交涉页。沿用终端风：纯黑底、荧光绿、全等宽、零圆角零阴影。
   基础布局、顶栏、按钮、页脚来自 styles.4.css；这里补表单、状态卡和对话流。 */

.case-wrap{padding:44px 0 64px;max-width:820px}

.case-head h1{font-size:clamp(22px,3.2vw,28px);font-weight:700;margin:0;letter-spacing:-.01em}
.case-head h1::before{content:"# ";color:var(--acc)}
.case-head .lead{margin-top:14px}
.case-head code{color:var(--fg);background:var(--panel);padding:1px 6px}

.panel{margin-top:28px;padding:24px 22px;background:var(--panel);border:1px solid var(--line)}

.field{display:block;margin-bottom:18px}
.field > span{display:block;margin-bottom:7px;font-size:12.5px;color:var(--fg-dim)}
.field input,.field textarea{
  width:100%;padding:11px 13px;
  background:var(--bg);color:var(--fg);
  border:1px solid var(--line);
  font:inherit;font-size:13px;
  transition:border-color .15s,background .15s;
}
.field textarea{min-height:96px;resize:vertical;line-height:1.8}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-faint)}
.field input:hover,.field textarea:hover{border-color:var(--line2)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--acc-dim);background:#0c110e}
.field-hint{margin:8px 0 0;font-size:11.5px;line-height:1.7;color:var(--fg-faint)}
.field-hint.is-error{color:var(--red)}

/* 查询码输入：字号大一点，字母间距拉开，像在输一个口令 */
#fTicket{font-size:17px;letter-spacing:.14em;text-transform:uppercase}

.form-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.form-actions .btn{min-width:130px}
.form-actions .btn[disabled]{opacity:.55;cursor:not-allowed}

.msg{font-size:12.5px;min-height:20px}
.msg.is-error{color:var(--red)}
.msg.is-ok{color:var(--acc)}

/* ---------- 状态卡 ---------- */

.case-card{margin-top:24px;padding:24px 22px;background:var(--panel);border:1px solid var(--line)}
.case-card[hidden]{display:none}

.case-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.case-ticket{margin:0;font-size:11px;letter-spacing:.1em;color:var(--fg-faint)}
.case-ticket b{color:var(--fg-dim);letter-spacing:.14em}
.case-top h2{margin:8px 0 0;font-size:18px;font-weight:700;letter-spacing:-.01em}
.case-ids{margin:6px 0 0;font-size:12px;color:var(--fg-dim)}
.case-ids .sep,.case-foot .sep{color:var(--fg-faint);margin:0 7px}

/* 三态用三种颜色，只改边框和文字，不加底色 —— 底上一块色会盖住终端感 */
.status{
  flex:none;margin:0;padding:7px 12px;
  font-size:12px;line-height:1.4;
  border:1px solid var(--line2);color:var(--fg-dim);
}
.status.is-confirmed{border-color:var(--acc-dim);color:var(--acc)}
.status.is-pending{border-color:#6b5220;color:var(--warn)}
.status.is-archived{border-color:#4a2b2b;color:var(--red)}

.case-meta{margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line)}
.case-meta > div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;margin-bottom:12px}
/* 作者样式里的 display:grid 会盖掉 [hidden] 的 display:none，得显式写回来，
   否则「没采纳的原因」这一行在非归档状态下也会露出来，后面跟一个空横杠。 */
.case-meta > div[hidden]{display:none}
.case-meta > div:last-child{margin-bottom:0}
.case-meta dt{font-size:11.5px;color:var(--fg-faint);letter-spacing:.04em}
.case-meta dd{margin:0;font-size:12.5px;line-height:1.9;color:var(--fg-dim);word-break:break-word}
#vReason{color:var(--fg);white-space:pre-wrap}
#vArchive{color:var(--warn);white-space:pre-wrap}

/* ---------- 对话 ---------- */

.thread-wrap{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.thread-title{margin:0;font-size:13px;font-weight:600;color:var(--fg)}
.thread-note{margin:7px 0 0;font-size:11.5px;line-height:1.8;color:var(--fg-faint)}

.thread{display:flex;flex-direction:column;gap:10px;margin:16px 0 18px}
.thread:empty{display:none}
.bubble{max-width:min(100%,600px);padding:11px 14px;border:1px solid var(--line);background:var(--panel2)}
.bubble .who{display:block;margin-bottom:5px;font-size:10.5px;letter-spacing:.1em;color:var(--fg-faint)}
.bubble .body{margin:0;font-size:12.5px;line-height:1.9;color:var(--fg);white-space:pre-wrap;word-break:break-word}
.bubble .when{display:block;margin-top:7px;font-size:10.5px;color:var(--fg-faint)}

/* 自己说的话靠右，AI 的靠左 —— 只靠位置区分，不用气泡尾巴 */
.bubble.is-user{align-self:flex-end;border-color:var(--line2)}
.bubble.is-user .who{color:var(--acc-dim)}
.bubble.is-ai{align-self:flex-start}
.bubble.is-ai .who{color:var(--acc)}
.bubble.is-ai{border-left:2px solid var(--acc-dim)}

.thread-lock{margin:0;padding:12px 14px;font-size:12px;color:var(--fg-dim);border:1px dashed var(--line2)}
.thread-lock[hidden]{display:none}

.case-foot{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--fg-faint)}

@media (max-width:720px){
  .case-wrap{padding-top:32px;padding-bottom:48px}
  .panel,.case-card{padding:20px 16px}
  .case-meta > div{grid-template-columns:minmax(0,1fr);gap:4px}
  .form-actions .btn{flex:1 1 auto}
  .bubble{max-width:100%}
}

/* ---------- 流式回话 ----------
   占位气泡先显示「…」，字到了就往里填。末尾加一条竖线当光标，
   让人一眼看出「还在说」，而不是以为说完了。 */
.bubble.is-pending .body{color:var(--fg-dim)}
.bubble.is-pending .body::after{
  content:'▍';margin-left:2px;color:var(--acc);
  animation:caseCaret 1s steps(1) infinite;
}
@keyframes caseCaret{50%{opacity:0}}

/* ---------- 补附件 ----------
   以前这块只有个文本框，人想补截图没地方传 —— 模型回回说「请补截图」，
   人回回说「我补了」，附件数一直是 0。现在给个真能传的地方。 */
.attach-box{
  margin:0 0 16px;padding:14px 14px 12px;
  background:var(--panel2);border:1px solid var(--line);
}
.attach-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:10px}
.attach-label{font-size:12.5px;color:var(--fg)}
.attach-hint{font-size:11.5px;line-height:1.6;color:var(--fg-faint)}
.attach-hint.is-ok{color:var(--acc)}
.attach-hint.is-error{color:var(--red)}
.attach-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.attach-pick{
  display:inline-flex;align-items:center;height:32px;padding:0 14px;
  border:1px solid var(--line2);color:var(--fg-dim);font-size:12.5px;
  cursor:pointer;
}
.attach-pick:hover{color:var(--acc);border-color:var(--acc-dim)}
.attach-list{margin:10px 0 0;padding:0;list-style:none}
.attach-item{
  display:flex;align-items:center;gap:10px;
  padding:6px 0;font-size:12px;color:var(--fg-dim);
  border-top:1px solid var(--line);
}
.attach-item:first-child{border-top:0}
.attach-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-size{flex:0 0 auto;color:var(--fg-faint);font-variant-numeric:tabular-nums}
.attach-drop{
  flex:0 0 auto;padding:2px 8px;background:none;
  border:1px solid var(--line);color:var(--fg-faint);font-size:11.5px;cursor:pointer;
}
.attach-drop:hover{color:var(--red);border-color:var(--red)}
.btn-ghost{background:transparent;color:var(--fg-dim);border-color:var(--line2)}
.btn-ghost:hover{color:var(--acc);border-color:var(--acc-dim)}
.btn:disabled,.btn-ghost:disabled{color:var(--fg-faint);border-color:var(--line);cursor:not-allowed}
.btn:disabled:hover{color:var(--fg-faint);border-color:var(--line)}

@media (max-width:720px){
  .attach-row .btn{flex:1 1 auto}
}