/* web/css/exception.css —— 货物异常反馈 / 邮件助手（#/tools/exception）
 *
 * 本页样式全部写在这里（不碰 pages.css）：令牌取自 tokens.css，双主题自动跟随。
 * 布局要点：
 *   · 手机单列；≥1024px 两栏并排（中文邮件 / 英文邮件），窄屏自动上下堆叠。
 *   · 邮件正文用 white-space:pre-wrap —— **换行必须原样保留**（复制与渲染一致）。
 */

.exc-host { padding: 0 var(--space-4); }
.exc-inner { padding: var(--space-3) 0 var(--space-4); }

@media (min-width: 1024px) {
  .exc-host { padding: 0; }
  .exc-inner { max-width: 860px; margin: 0 auto; }
}

/* ---------- 卡片 ---------- */
.exc-card { margin-bottom: var(--space-3); }
.exc-card .btn-block { width: 100%; margin-left: 0; margin-right: 0; }

.exc-label {
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  margin: var(--space-4) 0 var(--space-2);
}
.exc-label:first-of-type { margin-top: 0; }

/* ---------- 输入 ---------- */
.exc-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-card);
  color: var(--c-text);
  font-size: var(--fs-md);
  font-family: var(--font-stack);
  line-height: 1.6;
}
.exc-input:focus {
  outline: 2px solid var(--c-primary);
  outline-offset: -1px;
  border-color: var(--c-primary);
}
.exc-textarea { resize: vertical; min-height: 88px; }
.exc-input::placeholder { color: var(--c-ink-faint); }

.exc-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.exc-btns .btn { flex: 1 1 200px; }

/* ---------- 提示 / 错误 ---------- */
.exc-note {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-ink-soft);
  background: var(--c-card-2);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}
.exc-note-strong { color: var(--c-ink); }
.exc-note-warn {
  background: var(--c-tint-up);
  color: var(--c-up);
}
.exc-note-ok {
  background: var(--c-tint-down);
  color: var(--c-down);
}
.exc-err {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-up);
  margin-top: var(--space-2);
}
.exc-err:empty { display: none; }

.exc-needlogin { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }

/* ---------- 附件 ---------- */
.exc-files { margin-top: var(--space-2); }
.exc-file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--c-line);
}
.exc-file:last-child { border-bottom: none; }
.exc-file-thumb {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  border: 1px solid var(--c-line);
  flex: none;
}
.exc-file-pdf {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-xs);
  background: var(--c-tint-up);
  color: var(--c-up);
  font-size: var(--fs-xs);
  font-weight: 700;
  flex: none;
}
.exc-file-name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  word-break: break-all;
}
.exc-file-del {
  flex: none;
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-xs);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  padding: 4px 8px;
  cursor: pointer;
}
.exc-file-del:hover { background: var(--c-tint-up); color: var(--c-up); border-color: var(--c-up); }

/* ---------- 轨迹 ---------- */
.exc-pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-ink);
  background: var(--c-card-2);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-top: var(--space-2);
  white-space: pre-wrap;      /* 换行原样保留 */
  word-break: break-word;
}

/* ---------- 邮箱绑定 ---------- */
.exc-guide {
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--c-card-2);
}
.exc-guide-title { font-size: var(--fs-md); font-weight: 700; color: var(--c-text); margin-bottom: var(--space-2); }
.exc-guide-step { font-size: var(--fs-sm); line-height: 1.8; color: var(--c-ink); }
.exc-guide-warn {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-up);
  margin-top: var(--space-2);
}
.exc-bind-ok {
  background: var(--c-tint-down);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.exc-bind-email { font-size: var(--fs-md); font-weight: 700; color: var(--c-text); word-break: break-all; }
.exc-bind-sub { font-size: var(--fs-sm); line-height: 1.7; color: var(--c-ink-soft); margin-top: 4px; }

/* ---------- 参考邮件 ---------- */
.exc-sent-list { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.exc-sent-item {
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  cursor: pointer;
  background: var(--c-card);
}
.exc-sent-item:hover { background: var(--c-card-2); }
.exc-sent-item.is-sel { border-color: var(--c-primary); box-shadow: var(--shadow-mid); }
.exc-sent-subject { font-size: var(--fs-md); color: var(--c-text); font-weight: 600; word-break: break-word; }
.exc-sent-meta { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 4px; word-break: break-word; }

/* ---------- 结果（中文 / 英文 两栏） ---------- */
.exc-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
@media (min-width: 1024px) {
  .exc-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.exc-col { min-width: 0; }
.exc-col-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: var(--space-2);
}
.exc-subject {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-ink);
  background: var(--c-card-2);
  border-radius: var(--radius-xs);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  word-break: break-word;
}
.exc-mail-body { margin-top: 0; }
.exc-mail-body textarea.exc-mail-body { min-height: 260px; font-family: var(--font-mono); font-size: var(--fs-sm); }

/* ---------- 收件人 / 发送 ---------- */
.exc-fold-toggle {
  margin-top: var(--space-4);
  background: transparent;
  border: none;
  color: var(--c-ink-soft);
  font-size: var(--fs-sm);
  font-family: var(--font-stack);
  cursor: pointer;
  padding: var(--space-2) 0;
  text-align: left;
  width: 100%;
}
.exc-fold-toggle:hover { color: var(--c-text); }
.exc-lists { margin-top: var(--space-2); }
.exc-list-title { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text); margin: var(--space-3) 0 var(--space-2); }
.exc-list-item {
  border-bottom: 1px solid var(--c-line);
  padding: var(--space-2) 0;
}
.exc-list-item:last-child { border-bottom: none; }
.exc-list-subject { font-size: var(--fs-sm); color: var(--c-ink); word-break: break-word; }
.exc-list-meta { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 2px; word-break: break-word; }