/* 手机优先。工作日白天在电脑上是同一份代码，只是多铺开一列。 */
:root {
  --bg: #f6f7f9; --card: #fff; --ink: #16181d; --dim: #6b7280;
  --line: #e5e7eb; --accent: #1f6feb; --warn: #b45309; --danger: #b91c1c;
  --ok: #047857; --chip: #eef2f7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115; --card: #171a21; --ink: #e8eaed; --dim: #9aa1ac;
    --line: #262b34; --accent: #4c8dff; --warn: #d99a2b; --danger: #f0736b;
    --ok: #4ade80; --chip: #212734;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
button, input, textarea, select { font: inherit; color: inherit; }
.hidden { display: none !important; }

/* 顶栏 */
header {
  position: sticky; top: 0; z-index: 5; background: var(--card);
  border-bottom: 1px solid var(--line); padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
}
header h1 { font-size: 16px; margin: 0; font-weight: 600; }
header .spacer { flex: 1; }
.offhours {
  font-size: 12px; color: var(--warn); border: 1px solid var(--warn);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}

/* 指标条：手机上横向滚动，不换行挤成一坨 */
.metrics { display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px; }
.metric {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; min-width: 104px; flex: 0 0 auto;
}
.metric b { display: block; font-size: 19px; font-weight: 650; }
.metric span { font-size: 11px; color: var(--dim); }
.metric.alert b { color: var(--danger); }

main { padding: 0 14px 28px; }
h2 { font-size: 13px; color: var(--dim); font-weight: 600; margin: 18px 0 8px; }

/* 待办卡片 —— 手机上的主界面 */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
}
.card:active { transform: scale(0.995); }
.card .top { display: flex; align-items: baseline; gap: 8px; }
.card .name { font-weight: 600; }
.card .code { font-size: 12px; color: var(--dim); font-family: ui-monospace, monospace; }
.card .q {
  margin-top: 6px; color: var(--ink); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .meta { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--chip); color: var(--dim);
}
.tag.wait { background: #fee2e2; color: #b91c1c; }
.tag.buyer { background: #fef3c7; color: #92400e; }
@media (prefers-color-scheme: dark) {
  .tag.wait { background: #3a1d1d; color: #f0736b; }
  .tag.buyer { background: #3a2f14; color: #d99a2b; }
}
.empty { color: var(--dim); text-align: center; padding: 40px 0; }
/* 催办不是「工厂在等我」，是「该我去推一把」—— 视觉上要能一眼分开 */
.card.rem { cursor: default; border-left: 3px solid var(--warn); }

/* 报价复核：人核对的是「工厂原话里确实这么说了吗」，所以出处必须贴着值显示 */
.card.q-review { cursor: default; }
.transcript {
  margin: 8px 0; padding: 8px 10px; border-radius: 8px;
  background: var(--chip); font-size: 14px; line-height: 1.6;
}
.card audio { width: 100%; height: 34px; margin-bottom: 8px; }
.qf {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  padding: 5px 0; border-top: 1px dashed var(--line);
}
.qf .k { color: var(--dim); font-size: 13px; min-width: 52px; }
.qf .v { font-weight: 600; }
.qf .src { color: var(--dim); font-size: 12px; }
.qf .src.none { color: var(--danger); }
.qf.bad .v { color: var(--danger); text-decoration: line-through; }
.warn-line {
  margin-top: 8px; padding: 6px 9px; border-radius: 8px;
  background: var(--chip); color: var(--warn); font-size: 12px;
}

/* 通道详情：手机上是全屏推进，桌面上是右栏 */
.msg { margin-bottom: 12px; max-width: 88%; }
.msg .body {
  padding: 9px 12px; border-radius: 12px; background: var(--card);
  border: 1px solid var(--line); white-space: pre-wrap; word-break: break-word;
}
.msg.out { margin-left: auto; }
.msg.out .body { background: var(--accent); color: #fff; border-color: transparent; }
.msg.sys { max-width: 100%; }
.msg.sys .body {
  background: transparent; border: 1px dashed var(--line);
  color: var(--dim); font-size: 13px; text-align: center;
}
.msg .who { font-size: 11px; color: var(--dim); margin-bottom: 3px; }
.msg.out .who { text-align: right; }

/* 输入框吸底会盖住最后一条消息 —— 手机上正好盖的是工厂最新的问题。
   给消息区留出让位空间，别让人以为消息没收到。 */
#msgs { padding-bottom: 12px; }
.composer {
  position: sticky; bottom: 0; background: var(--bg);
  padding: 10px 0 max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
textarea {
  width: 100%; min-height: 76px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); resize: vertical;
}
.row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.row label { font-size: 13px; color: var(--dim); display: flex; align-items: center; gap: 5px; }
input[type="text"] {
  flex: 1; min-width: 140px; padding: 9px 11px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card);
}
button.primary {
  background: var(--accent); color: #fff; border: 0; border-radius: 10px;
  padding: 10px 18px; font-weight: 600; cursor: pointer;
}
button.ghost {
  background: transparent; border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 14px; cursor: pointer;
}
button:disabled { opacity: .5; cursor: default; }
.err { color: var(--danger); font-size: 13px; margin-top: 8px; }

/* 登录 */
.login { max-width: 340px; margin: 15vh auto; padding: 0 20px; }
.login input { width: 100%; margin: 12px 0; }
.login button { width: 100%; }

/* 桌面：工作日白天铺开成两栏，手机上保持单栏推进 */
/* 返回键与标题**只由 CSS 决定**，不经手 JS。
   之前用 JS 在 resize 时同步，结果：宽屏自动铺开详情后缩到手机宽度，
   队列被藏、返回键还是隐藏的 —— 人就卡住了，没有退路。
   交给 CSS 就不存在「事件没触发」这种失败模式。 */
#backBtn { display: none; }
.t-detail, .t-inq, .t-fac, .t-ops { display: none; }
body[data-view="ops"] .t-list { display: none; }
body[data-view="ops"] .t-ops { display: inline; }
/* 顶栏标题跟着视图走，同样只由 CSS 决定 */
body[data-view="inquiries"] .t-list { display: none; }
body[data-view="inquiries"] .t-inq { display: inline; }
body[data-view="factories"] .t-list { display: none; }
body[data-view="factories"] .t-fac { display: inline; }

@media (min-width: 900px) {
  .layout { display: grid; grid-template-columns: 380px 1fr; gap: 16px; align-items: start; }
  main { max-width: 1200px; margin: 0 auto; }
  #detail { position: sticky; top: 60px; }
  .list-pane { max-height: calc(100vh - 160px); overflow-y: auto; }
}
@media (max-width: 899px) {
  /* 手机上一次只看一屏：要么队列，要么某条通道 */
  body.viewing-detail .list-pane { display: none; }
  body:not(.viewing-detail) #detail { display: none; }
  body.viewing-detail #backBtn { display: inline-block; }
  body.viewing-detail .t-list { display: none; }
  body.viewing-detail .t-detail { display: inline; }
}

/* 后端 = 稷源食品供应链平台（J-Originfood）。海外买家侧的 Woklane 是另一个节点。 */
.brand-en {
  color: var(--dim); font-size: 13px; letter-spacing: 1px;
  margin-top: -6px; margin-bottom: 4px;
}

/* ── 视图切换：手机上只用「待办」，电脑上才需要另外两块 ── */
.tabs { display: flex; gap: 6px; padding: 8px 14px 0; }
.tabs button {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 6px 12px; color: var(--dim); cursor: pointer; font-size: 14px;
}
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.view.hidden { display: none; }

.card.pad { cursor: default; padding: 14px; }
.ttl { font-weight: 600; margin-bottom: 8px; }
.dim { color: var(--dim); font-size: 13px; }
.mt { margin-top: 8px; }
button.wide { width: 100%; margin-bottom: 10px; }
.tag.ok { background: #dcfce7; color: #047857; }
@media (prefers-color-scheme: dark) { .tag.ok { background: #14331f; color: #4ade80; } }

/* 表单行：标签 + 输入框，密度高一点，白天要连着录很多条 */
.frow { display: flex; gap: 8px; align-items: center; padding: 5px 0; }
.frow .lbl { color: var(--dim); font-size: 13px; min-width: 170px; }
.frow input[type="text"] { flex: 1; }
.src-line { padding-left: 178px; margin-top: -4px; margin-bottom: 6px; font-size: 12px; }

/* 匹配预览：每家可展开看逐条 trace ——「为什么推荐这家」永远答得上来 */
.mrow { padding: 6px 0; border-top: 1px solid var(--line); }
.mrow summary { cursor: pointer; }
.tr { display: flex; gap: 8px; align-items: baseline; padding: 3px 0 3px 22px; font-size: 13px; }

/* 汇总：一行一家，工厂价是机密层，只在这儿给内部看 */
.qrow { border-top: 1px solid var(--line); padding: 8px 0; }

.frow select { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); }

/* 聊天里的图片 */
.pics { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.chat-pic {
  width: 110px; height: 110px; object-fit: cover; border-radius: 8px;
  background: var(--chip); cursor: zoom-in;
}
.pickbtn { cursor: pointer; color: var(--accent); font-size: 13px; }

/* 版本提示条：后端更新了但这个页面还是旧的。
   固定在底部而不是顶部 —— 顶部会挡住标签栏，而客服一天要点几百次那排标签。

   ⚠ 手机上实测过：它会正好盖住 .composer（回复输入框）——
   「有更新」的提示把最核心的操作挡住了，本末倒置。
   所以出现时给 body 垫一段 padding，把内容顶上去，而不是压在上面。 */
.ver-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  padding: 10px 16px; text-align: center;
  background: #b45309; color: #fff; font-size: 14px;
  box-shadow: 0 -2px 12px rgba(0,0,0,.35);
}
.ver-bar button {
  margin: 0 8px; padding: 4px 14px; border: 0; border-radius: 6px;
  background: #fff; color: #b45309; font-weight: 600; cursor: pointer;
}
.ver-bar .dim { color: rgba(255,255,255,.75); font-size: 12px; }

/* 版本条出现时，把页面内容整体顶上去，别压住底部的输入框 */
body.has-verbar { padding-bottom: 76px; }
body.has-verbar .composer { bottom: 76px; }