/* 订单工作台：按半个手机屏（宽 360、高 380 起）排，放进 vivo 分屏或小窗也不挤；宽屏（≥720）左右两栏。
   颜色照草图 v3：该修橙、在修蓝、售后粉、待交付绿、总管紫。 */
:root {
  --bg: #faf8fc; --card: #fff; --ink: #2b2433; --muted: #8a8094; --line: #e8e2ee; --line-soft: #f0ebf4;
  --accent: #7a5aa6; --accent-soft: #efe8f7; --err: #c0392b; --code: #f5f2f8;
  --todo: #e8892b; --doing: #3b7ddd; --after: #c94f7c; --done: #2e9d5b; --red: #e5484d;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
body { overflow: hidden; }
button { font: inherit; border: 0; border-radius: 8px; padding: 6px 12px; background: var(--accent); color: #fff; cursor: pointer; }
button.ghost { background: var(--accent-soft); color: var(--accent); }
button.icon { background: transparent; color: var(--ink); padding: 4px 6px; }
button:disabled { opacity: .5; cursor: default; }
[hidden] { display: none !important; }

/* 登录 */
#login { height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; }
#login form { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; }
#login h1 { font-size: 20px; margin: 0 0 6px; color: var(--accent); }
#login input { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.msg { color: var(--err); min-height: 1.5em; margin: 0; font-size: 13px; }

/* 两栏：窄屏一次一屏（in-win 时显示窗口），宽屏左边列表、右边窗口 */
#app { height: 100%; display: flex; }
#side { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--card); }
#pane { display: none; flex: 1; min-width: 0; flex-direction: column; background: var(--bg); }
body.in-win #side { display: none; }
body.in-win #pane { display: flex; }
@media (min-width: 720px) {
  #side { flex: none; width: 300px; border-right: 1px solid var(--line); }
  body.in-win #side { display: flex; }
  #pane { display: flex; }
  .back { display: none !important; }
}

/* 顶栏、找人、三个大数字 */
#top { flex: none; border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px 6px; }
.bar .grow { flex: 1; min-width: 0; color: var(--accent); font-size: 16px; }
#search { flex: 1; min-width: 0; font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
#tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 2px 10px 10px; }
.tile { border-radius: 10px; padding: 4px 2px 3px; color: #fff; display: flex; flex-direction: column; align-items: center; }
.tile b { font-size: 22px; line-height: 1.15; }
.tile span { font-size: 12px; }

/* 列表 */
#list { flex: 1; overflow-y: auto; overflow-x: hidden; }
.group { font-size: 12px; color: var(--muted); padding: 8px 12px 3px; display: flex; align-items: center; gap: 6px; }
.group i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.row.sel { background: var(--accent-soft); }
.av { width: 40px; height: 40px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 16px; overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.boss { background: var(--accent); }
.av.sm { width: 28px; height: 28px; border-radius: 6px; font-size: 13px; }
.it { flex: 1; min-width: 0; }
.it .name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.it .name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.it small { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { flex: none; font-size: 11px; color: var(--todo); border: 1px solid var(--todo); border-radius: 5px; padding: 0 4px; line-height: 16px; }
.badge { flex: none; font-size: 11px; color: #fff; border-radius: 9px; padding: 0 7px; line-height: 18px; white-space: nowrap; }
.badge.red { background: var(--red); }
.badge.green { background: var(--done); }
.badge.gray { background: #b3aabc; }
.spin { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--doing);
  box-shadow: 0 0 0 3px rgba(59, 125, 221, .25); margin: 0 4px; }
.empty { color: var(--muted); font-size: 13px; }
.empty.pad { padding: 10px 14px; margin: 0; }

/* 窗口：顶栏、内容、底栏 */
.win-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-height: 46px;
  background: var(--card); border-bottom: 1px solid var(--line); }
.win-head .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back { flex: none; background: transparent; color: var(--accent); padding: 2px 6px 2px 0; font-size: 18px; line-height: 1; }
.back-count { font-size: 13px; }
.win-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 10px 12px; }
.win-foot { flex: none; border-top: 1px solid var(--line); background: var(--card); padding: 6px 8px; }
.row-in { display: flex; gap: 6px; align-items: flex-end; }
.row-in textarea { flex: 1; min-width: 0; font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
  resize: none; max-height: 30vh; }
.pick { flex: none; color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 6px 8px; font-size: 14px; cursor: pointer; }
.picked { display: flex; gap: 6px; flex-wrap: wrap; }
.picked:empty { display: none; }
.thumb { position: relative; margin-bottom: 6px; }
.thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
.thumb span { display: block; max-width: 7em; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--accent-soft); border-radius: 6px; padding: 2px 6px; }
.thumb button { position: absolute; top: -6px; right: -6px; padding: 0 5px; font-size: 11px; border-radius: 50%; }

/* 对话和灰条 */
.msg-me { margin: 8px 0 8px auto; width: fit-content; max-width: 85%; background: var(--accent); color: #fff;
  border-radius: 10px 10px 2px 10px; padding: 6px 10px; white-space: pre-wrap; word-break: break-word; }
.msg-ai { margin: 8px 8% 8px 0; }
.msg-busy { color: var(--muted); font-size: 13px; margin: 6px 0; }
.msg-error { color: var(--err); font-size: 13px; margin: 6px 0; white-space: pre-wrap; word-break: break-word; }
.ev { font-size: 12px; color: var(--muted); background: #f1edf5; border-radius: 8px; padding: 3px 8px; margin: 6px auto;
  width: fit-content; max-width: 96%; word-break: break-word; }
.ev b { color: #6b6175; font-weight: 600; }
.src { font-size: 11px; color: #a79db1; text-align: right; margin: 8px 0 -6px; }
.src.left { text-align: left; }
.ev[data-open] { cursor: pointer; }
.file-chip { display: inline-block; font-size: 13px; color: var(--accent); background: var(--accent-soft); border-radius: 6px;
  padding: 1px 8px; margin: 2px 4px 2px 0; }
.msg-me .file-chip { background: rgba(255, 255, 255, .2); color: #fff; }

/* 每单的窗口 */
button.small { padding: 3px 9px; font-size: 13px; flex: none; }
.pill { flex: none; font-size: 12px; color: #fff; border-radius: 9px; padding: 0 8px; line-height: 20px; white-space: nowrap; }
.win-body h3 { font-size: 12px; color: var(--muted); font-weight: 600; margin: 12px 0 4px; }
.box { border: 1.5px solid var(--line); background: var(--card); border-radius: 10px; padding: 6px 10px; margin: 6px 0; }
.box > b { display: block; font-size: 12px; margin-bottom: 2px; }
.box small { display: block; color: var(--muted); font-size: 12px; }
.box p { margin: 2px 0; }
.box.red { border-color: var(--red); background: #fff6f6; }
.box.red > b { color: var(--red); }
.box.green { border-color: var(--done); background: #f3fbf6; }
.box.green > b { color: var(--done); }
.box.orange { border-color: var(--todo); background: #fff8f0; }
.box.orange > b { color: var(--todo); }
pre.plain { margin: 2px 0; white-space: pre-wrap; word-break: break-word; font: inherit; }
pre.log { margin: 0; max-height: 40vh; overflow: auto; background: var(--code); border-radius: 8px; padding: 6px 8px;
  font: 12px/1.45 Consolas, "Microsoft YaHei", monospace; white-space: pre-wrap; word-break: break-all; }
.draft { border-top: 1px dashed var(--line); padding-top: 4px; margin-top: 4px; }
.draft > small { display: block; color: var(--muted); font-size: 12px; white-space: pre-wrap; }
.draft .acts { display: flex; gap: 6px; justify-content: flex-end; }
details.chat { margin: 10px 0 4px; }
details.chat summary { color: var(--accent); font-size: 13px; cursor: pointer; }
.chat-line { margin: 4px 0; padding: 3px 8px; border-left: 3px solid var(--line); word-break: break-word; white-space: pre-wrap; }
.chat-line.me { border-left-color: var(--accent); }
.chat-line small { display: block; color: var(--muted); font-size: 11px; }
.muted { color: var(--muted); font-size: 13px; }
.row-in .grow { flex: 1; min-width: 0; }
button.go-start { background: var(--todo); font-weight: 600; }

/* 成员和负责人 */
.me-btn { min-width: 34px; padding: 6px 8px; font-weight: 600; }
.me-who { margin: 0 0 6px; font-size: 14px; }
.own { flex: none; font-size: 11px; line-height: 16px; min-width: 16px; text-align: center; color: #fff; background: #8d8fc9;
  border-radius: 8px; padding: 0 4px; }
.head-name { display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; }
.head-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head-own { font-size: 11px; color: var(--muted); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head-own.none { color: var(--todo); }

/* 好友申请 */
.av.friends { background: var(--done); }
.fr-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.fr-item .it small { white-space: normal; }
.fr-text { font-size: 14px; margin: 2px 0 4px; padding: 2px 8px; border-left: 3px solid var(--line); word-break: break-word; }
.fr-act input { font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; }
.fr-job { display: block; font-size: 12px; color: var(--done); margin-top: 3px; white-space: normal !important; }
.fr-job.bad { color: var(--err); }
.fr-row { display: flex; align-items: flex-start; gap: 6px; padding: 6px 2px; border-bottom: 1px solid var(--line-soft); }
.fr-row .grow { flex: 1; min-width: 0; word-break: break-word; }
.fr-row small { display: block; color: var(--muted); font-size: 12px; }
.fr-row > .fr-job { flex: none; max-width: 55%; margin-top: 0; text-align: right; }
.fr-add { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }

/* Markdown 和复制框 */
.md p { margin: 4px 0; word-break: break-word; }
.md ul { margin: 4px 0; padding-left: 1.2em; }
.md blockquote { margin: 4px 0; padding: 2px 8px; border-left: 3px solid var(--line); color: var(--muted); }
.md hr { border: 0; border-top: 1px dashed var(--line); margin: 10px 0; }
.md code { background: var(--code); border-radius: 4px; padding: 0 3px; font-size: 13px; }
.code { position: relative; background: var(--code); border-radius: 8px; margin: 6px 0; }
.code pre { margin: 0; padding: 8px 52px 8px 10px; white-space: pre-wrap; word-break: break-all;
  font: 14px/1.5 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.code button { position: absolute; top: 4px; right: 4px; padding: 2px 8px; font-size: 12px; }

/* 底部弹出框（新客户、文件、菜单）和提示 */
#sheet { position: fixed; inset: 0; background: rgba(30, 20, 40, .35); display: flex; align-items: flex-end; justify-content: center; z-index: 5; }
.sheet-box { width: 100%; max-width: 560px; max-height: 85%; overflow-y: auto; background: var(--card); border-radius: 12px 12px 0 0; padding: 10px 12px 14px; }
.sheet-head { display: flex; align-items: center; margin-bottom: 8px; }
.sheet-head b { flex: 1; }
.row-item { display: flex; align-items: center; gap: 6px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.row-item .grow { flex: 1; min-width: 0; word-break: break-all; }
.row-item small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.btn { text-decoration: none; border-radius: 8px; padding: 4px 10px; background: var(--accent-soft); color: var(--accent); font-size: 14px; white-space: nowrap; }
.form { display: flex; flex-direction: column; gap: 10px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.form label.pick { flex-direction: row; align-self: flex-start; color: var(--accent); font-size: 14px; }
.form input, .form textarea { font: inherit; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.form .files { display: flex; flex-direction: column; gap: 6px; }
/* 安卓 App：装 App / 有新版的提示条，别的应用分享进来的文件，App 里看图 */
.app-banner { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--accent-soft); font-size: 13px; }
.app-banner a { flex: 1; min-width: 0; color: var(--accent); text-decoration: none; }
.app-banner button { padding: 0 8px; }
.in-files { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.in-file { display: flex; align-items: center; gap: 8px; min-width: 0; }
.in-file img, .in-file > span:first-child { flex: none; width: 40px; height: 40px; object-fit: cover; border-radius: 6px;
  background: var(--code); display: flex; align-items: center; justify-content: center; }
.in-file .grow { flex: 1; min-width: 0; word-break: break-all; font-size: 14px; }
.in-file small { display: block; color: var(--muted); }
.in-ask { margin: 6px 0; color: var(--muted); font-size: 13px; }
#in-search { width: 100%; font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin-bottom: 4px; }
#in-rows { max-height: 40vh; overflow-y: auto; margin-bottom: 8px; }
img.viewer { display: block; max-width: 100%; height: auto; margin: 0 auto; }

#toast { position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); background: rgba(40, 30, 50, .88);
  color: #fff; padding: 6px 14px; border-radius: 16px; font-size: 13px; z-index: 6; max-width: 90%; text-align: center; }