/* 鲸恒工作台 —— 简约、留白多、颜色克制；只有发送键和选中态用品牌深海蓝 */
:root {
  --brand: #1b5279;
  --brand-ink: #ffffff;
  --brand-tint: rgba(27, 82, 121, .08);
  --bg: #ffffff;
  --side: #f7f7f5;
  --hover: rgba(0, 0, 0, .045);
  --active: rgba(0, 0, 0, .07);
  --line: rgba(0, 0, 0, .08);
  --line-strong: rgba(0, 0, 0, .14);
  --text: #1d1d1f;
  --text-2: #5c5c62;
  --text-3: #9a9aa0;
  --bubble: #f2f2f0;
  --code: #f6f6f4;
  --card: #ffffff;
  --ok: #2f9e6e;
  --warn: #c88a1b;
  --err: #d0473d;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 10px 30px rgba(0, 0, 0, .06);
  --shadow-pop: 0 4px 12px rgba(0, 0, 0, .08), 0 18px 48px rgba(0, 0, 0, .12);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  --col: 768px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #5a9fd4; --brand-ink: #0b1620; --brand-tint: rgba(90, 159, 212, .14);
    --bg: #18191b; --side: #111214; --hover: rgba(255, 255, 255, .05); --active: rgba(255, 255, 255, .08);
    --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .16);
    --text: #ececee; --text-2: #a9a9b0; --text-3: #6d6d75;
    --bubble: #26272a; --code: #121315; --card: #212225;
    --shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .3);
    --shadow-pop: 0 4px 12px rgba(0, 0, 0, .4), 0 18px 48px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand: #5a9fd4; --brand-ink: #0b1620; --brand-tint: rgba(90, 159, 212, .14);
  --bg: #18191b; --side: #111214; --hover: rgba(255, 255, 255, .05); --active: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .16);
  --text: #ececee; --text-2: #a9a9b0; --text-3: #6d6d75;
  --bubble: #26272a; --code: #121315; --card: #212225;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.65 -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  letter-spacing: .01em;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
svg { display: block; }
#app { height: 100dvh; }
::selection { background: var(--brand-tint); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* ============ 登录 ============ */
.login { height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; }
.login-card .mark { width: 52px; height: 52px; border-radius: 14px; }
.login-card h1 { font-size: 24px; font-weight: 600; margin: 20px 0 6px; letter-spacing: -.01em; }
.login-card p { color: var(--text-2); margin: 0 0 28px; font-size: 14px; }
.input { width: 100%; height: 46px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg); outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.input + .input { margin-top: 10px; }
.btn-main { width: 100%; height: 46px; margin-top: 14px; border-radius: 12px; background: var(--text); color: var(--bg); font-weight: 600; transition: opacity .15s; }
.btn-main:disabled { opacity: .45; }
.login-err { color: var(--err); font-size: 13px; min-height: 20px; margin-top: 12px; text-align: center; }
.login-link { color: var(--text-3); font-size: 13px; margin-top: 18px; }
.login-link:hover { color: var(--text-2); }

/* ============ 框架 ============ */
.shell { display: flex; height: 100%; overflow: hidden; }
.side {
  width: 272px; flex: none; background: var(--side); display: flex; flex-direction: column;
  border-right: 1px solid var(--line); transition: margin-left .22s ease, transform .22s ease;
}
.shell.side-closed .side { margin-left: -272px; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.scrim { display: none; }

@media (max-width: 767px) {
  .side { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(300px, 86vw); transform: translateX(-100%); box-shadow: var(--shadow-pop); border-right: 0; margin-left: 0 !important; }
  .shell.side-open .side { transform: none; }
  .shell.side-open .scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, .28); animation: fade .2s; }
}
@keyframes fade { from { opacity: 0; } }

/* 侧栏 */
.side-top { display: flex; align-items: center; gap: 8px; padding: calc(12px + var(--safe-t)) 12px 8px 16px; }
.brand { display: flex; align-items: center; gap: 9px; flex: 1; font-weight: 600; font-size: 15px; }
.brand img { width: 24px; height: 24px; border-radius: 7px; }
.ibtn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--text-2); flex: none; transition: background .12s, color .12s; }
.ibtn:hover { background: var(--hover); color: var(--text); }
.ibtn svg { width: 19px; height: 19px; }
.new-chat { margin: 6px 12px 4px; height: 40px; border-radius: 10px; display: flex; align-items: center; gap: 10px; padding: 0 12px; font-weight: 500; transition: background .12s; }
.new-chat:hover { background: var(--hover); }
.new-chat svg { width: 18px; height: 18px; color: var(--text-2); }
.new-chat kbd { margin-left: auto; font: 11px var(--mono); color: var(--text-3); }
.search { margin: 2px 12px 8px; position: relative; }
.search input { width: 100%; height: 36px; border-radius: 10px; border: 0; background: var(--hover); padding: 0 12px 0 34px; outline: none; font-size: 14px; }
.search input:focus { background: var(--active); }
.search svg { position: absolute; left: 11px; top: 10px; width: 16px; height: 16px; color: var(--text-3); }
.hist { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
.hist-label { font-size: 12px; color: var(--text-3); padding: 14px 10px 6px; font-weight: 500; }
.hi { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 8px 0 12px; border-radius: 9px; text-align: left; font-size: 14px; color: var(--text); transition: background .12s; }
.hi:hover { background: var(--hover); }
.hi.on { background: var(--active); }
.hi-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hi-more { opacity: 0; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--text-3); }
.hi-more svg { width: 16px; height: 16px; }
.hi:hover .hi-more, .hi.on .hi-more { opacity: 1; }
.hi-more:hover { background: var(--active); color: var(--text); }
@media (hover: none) { .hi-more { opacity: 1; } }
.run-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .25; transform: scale(.8); } }
.hist-empty { color: var(--text-3); font-size: 13px; padding: 24px 12px; text-align: center; }
.side-foot { border-top: 1px solid var(--line); padding: 10px 12px calc(10px + var(--safe-b)); display: flex; align-items: center; gap: 10px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none; }
.who { flex: 1; min-width: 0; line-height: 1.3; }
.who b { display: block; font-size: 14px; font-weight: 500; }
.who span { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.who i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); display: inline-block; }
.who i.on { background: var(--ok); }

/* 顶栏 */
.top { height: calc(52px + var(--safe-t)); padding: var(--safe-t) 10px 0; display: flex; align-items: center; gap: 4px; flex: none; }
.top-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.top-title b { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-ctx { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.only-narrow { display: none; }
@media (max-width: 767px) { .only-narrow { display: grid; } .only-wide { display: none !important; } }
.shell:not(.side-closed) .only-closed { display: none; }
@media (max-width: 767px) { .shell .only-closed { display: none; } }

/* ============ 对话区 ============ */
.scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.col { max-width: var(--col); margin: 0 auto; padding: 8px 24px 24px; }
@media (max-width: 640px) { .col { padding: 4px 16px 16px; } }
.turn { padding-top: 22px; }
.q { display: flex; justify-content: flex-end; }
.q-b { background: var(--bubble); padding: 10px 16px; border-radius: 20px; max-width: min(80%, 600px); white-space: pre-wrap; word-break: break-word; }
.q-state { text-align: right; font-size: 12px; color: var(--text-3); margin-top: 6px; }
.a { margin-top: 20px; display: flex; gap: 14px; }
.a-mark { width: 26px; height: 26px; border-radius: 8px; flex: none; margin-top: 1px; }
.a-body { flex: 1; min-width: 0; }
@media (max-width: 640px) { .a-mark { display: none; } }

.md { word-break: break-word; }
.md > :first-child { margin-top: 0; }
.md p { margin: 0 0 12px; }
.md h1, .md h2, .md h3, .md h4 { font-weight: 600; line-height: 1.4; margin: 20px 0 8px; }
.md h1 { font-size: 19px; } .md h2 { font-size: 17px; } .md h3, .md h4 { font-size: 15.5px; }
.md ul, .md ol { margin: 0 0 12px; padding-left: 22px; }
.md li { margin: 4px 0; }
.md li::marker { color: var(--text-3); }
.md b { font-weight: 600; }
.md code { background: var(--code); border: 1px solid var(--line); padding: 1px 5px; border-radius: 6px; font: 13px/1.5 var(--mono); }
.md pre { position: relative; background: var(--code); border: 1px solid var(--line); padding: 14px 16px; border-radius: 12px; overflow-x: auto; margin: 0 0 12px; }
.md pre code { background: none; border: 0; padding: 0; font-size: 13px; }
.md a { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--brand-tint); }
.md blockquote { margin: 0 0 12px; padding: 2px 0 2px 14px; border-left: 3px solid var(--line-strong); color: var(--text-2); }
.md .tbl { overflow-x: auto; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; }
.md table { border-collapse: collapse; font-size: 14px; width: 100%; }
.md th, .md td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.md tr:last-child td { border-bottom: 0; }
.md th { font-weight: 600; background: var(--hover); white-space: nowrap; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

/* 工具步骤 */
.steps { margin: 2px 0 12px; }
.steps-h { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-3); padding: 3px 0; max-width: 100%; transition: color .12s; }
.steps-h:hover { color: var(--text-2); }
.steps-h .sum { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps-h svg { width: 14px; height: 14px; flex: none; transition: transform .15s; }
.steps.open .steps-h .chev { transform: rotate(90deg); }
.steps-h .bad { color: var(--err); }
.steps-b { display: none; margin: 6px 0 4px 6px; border-left: 1px solid var(--line-strong); padding-left: 16px; }
.steps.open .steps-b { display: block; }
.step { padding: 5px 0; font-size: 13px; }
.step-h { display: flex; gap: 8px; align-items: baseline; color: var(--text-2); }
.step-h b { font-weight: 500; color: var(--text); flex: none; }
.step-h span { min-width: 0; word-break: break-all; color: var(--text-3); }
.step-h .bad { color: var(--err); flex: none; }
.step pre { margin: 6px 0 2px; max-height: 200px; overflow: auto; background: var(--code); border: 1px solid var(--line); padding: 8px 10px; border-radius: 8px; font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; color: var(--text-2); }

.thinking { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-3); margin: 2px 0 8px; }
.shimmer { background: linear-gradient(90deg, var(--text-3) 30%, var(--text) 50%, var(--text-3) 70%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.8s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: breathe 1.2s ease-in-out infinite; }
.a-foot { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--text-3); font-size: 12px; min-height: 28px; }
.a-foot .ibtn { width: 28px; height: 28px; border-radius: 7px; }
.a-foot .ibtn svg { width: 15px; height: 15px; }
.a-foot .note { margin-left: 4px; }
.a-foot .bad { color: var(--err); }
.err-card { border: 1px solid color-mix(in srgb, var(--err) 30%, transparent); background: color-mix(in srgb, var(--err) 6%, transparent); color: var(--err); border-radius: 12px; padding: 10px 14px; font-size: 13px; white-space: pre-wrap; margin: 4px 0 8px; }

/* ============ 输入框 ============ */
.dock { flex: none; padding: 0 24px calc(14px + var(--safe-b)); }
@media (max-width: 640px) { .dock { padding: 0 10px calc(10px + var(--safe-b)); } }
.composer { max-width: var(--col); margin: 0 auto; background: var(--card); border: 1px solid var(--line-strong); border-radius: 26px; box-shadow: var(--shadow); padding: 12px 12px 10px 18px; transition: border-color .15s, box-shadow .15s; }
.composer:focus-within { border-color: color-mix(in srgb, var(--brand) 45%, var(--line-strong)); }
.composer textarea { display: block; width: 100%; border: 0; outline: none; resize: none; background: transparent; min-height: 26px; max-height: 38vh; line-height: 1.6; padding: 2px 4px 0 0; }
.composer textarea::placeholder { color: var(--text-3); }
.c-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--text-2); max-width: 46%; transition: background .12s, border-color .12s; }
.pill:hover { background: var(--hover); }
.pill svg { width: 15px; height: 15px; flex: none; }
.pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.pill.static { cursor: default; }
.pill.static:hover { background: none; }
.c-send { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--text); color: var(--bg); display: grid; place-items: center; flex: none; transition: opacity .15s, transform .1s; }
.c-send:active { transform: scale(.94); }
.c-send:disabled { opacity: .2; cursor: default; }
.c-send svg { width: 18px; height: 18px; }
.c-stop { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--text); flex: none; }
.c-stop svg { width: 14px; height: 14px; }
.c-stop + .c-send { margin-left: 0; }
.c-row .spacer { flex: 1; }
.hint { max-width: var(--col); margin: 8px auto 0; text-align: center; font-size: 12px; color: var(--text-3); }
@media (max-width: 640px) { .hint { display: none; } }

/* ============ 新对话首页 ============ */
.home { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 24px 12vh; overflow-y: auto; }
@media (max-width: 640px) { .home { padding: 0 12px 18px; justify-content: flex-end; } }
.home-in { width: 100%; max-width: var(--col); margin: 0 auto; }
.hello { text-align: center; margin-bottom: 28px; }
.hello img { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 18px; }
.hello h1 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.hello p { color: var(--text-2); margin: 8px 0 0; }
@media (max-width: 640px) { .hello { margin-bottom: auto; padding-top: 18vh; } .hello h1 { font-size: 24px; } }
.home .composer { padding-top: 16px; }
.home .composer textarea { min-height: 52px; }
.sugs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.sug { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--text-2); transition: background .12s, color .12s; }
.sug:hover { background: var(--hover); color: var(--text); }
@media (max-width: 640px) { .sugs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 12px -12px 0; padding: 0 12px; scrollbar-width: none; } .sug { flex: none; } }

/* ============ 弹出菜单 / 弹层 ============ */
.pop { position: fixed; z-index: 60; min-width: 220px; max-width: min(360px, calc(100vw - 24px)); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 6px; animation: popin .14s ease-out; }
@keyframes popin { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.pop-label { font-size: 12px; color: var(--text-3); padding: 8px 10px 4px; }
.pop-i { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px; text-align: left; font-size: 14px; }
.pop-i:hover { background: var(--hover); }
.pop-i svg { width: 16px; height: 16px; margin-top: 3px; flex: none; color: var(--text-2); }
.pop-i .t { flex: 1; min-width: 0; }
.pop-i .t small { display: block; color: var(--text-3); font-size: 12px; line-height: 1.45; margin-top: 1px; }
.pop-i .t, .pop-i .t > span { overflow-wrap: anywhere; }
.pop-i .ck { color: var(--brand); margin-left: auto; }
.pop-i.danger, .pop-i.danger svg { color: var(--err); }
.pop-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.pop input { width: 100%; height: 38px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 10px; outline: none; background: var(--bg); font-size: 14px; margin: 4px 0; }
.pop input:focus { border-color: var(--brand); }
.pop-act { display: flex; justify-content: flex-end; gap: 6px; padding: 6px 2px 2px; }
.pop-btn { height: 32px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.pop-btn.pri { background: var(--text); color: var(--bg); }
.pop-btn.ghost { color: var(--text-2); }
.pop-btn.ghost:hover { background: var(--hover); }
.pop-btn.red { background: var(--err); color: #fff; }
.pop-text { font-size: 14px; color: var(--text-2); padding: 6px 10px 2px; }
.pop-mask { position: fixed; inset: 0; z-index: 59; }
@media (max-width: 640px) {
  .pop.sheetish { left: 8px !important; right: 8px; bottom: calc(8px + var(--safe-b)) !important; top: auto !important; max-width: none; border-radius: 18px; padding: 8px; animation: up .2s ease-out; }
  .pop-mask.sheetish { background: rgba(0, 0, 0, .28); animation: fade .2s; }
  @keyframes up { from { transform: translateY(24px); opacity: .4; } }
}
.toast { position: fixed; left: 50%; top: calc(16px + var(--safe-t)); transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 9px 16px; border-radius: 12px; font-size: 13px; z-index: 80; box-shadow: var(--shadow-pop); animation: popin .15s; }

/* 平板：侧栏常驻但窄一点 */
@media (min-width: 768px) and (max-width: 1099px) {
  .side { width: 240px; }
  .shell.side-closed .side { margin-left: -240px; }
}
/* 表格：窄屏横向滚动，单元格不硬折 */
.md table { width: max-content; min-width: 100%; }
.md td { max-width: 360px; }
.md td code, .md th { white-space: nowrap; }
@media (max-width: 767px) { .md td { max-width: 240px; } }
.step-h .soft { color: var(--text-3); font-style: normal; flex: none; }

/* ============ 侧栏：分类、桌面端标记 ============ */
.nav-n { margin-left: auto; font-size: 12px; color: var(--text-3); }
.tabs { display: flex; gap: 2px; margin: 2px 12px 2px; padding: 3px; background: var(--hover); border-radius: 10px; }
.tabs button { flex: 1; height: 28px; border-radius: 8px; font-size: 13px; color: var(--text-2); transition: background .12s, color .12s; }
.tabs button.on { background: var(--bg); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 500; }
.hi-tag { width: 26px; height: 26px; display: grid; place-items: center; color: var(--text-3); flex: none; }
.hi-tag svg { width: 14px; height: 14px; }
.desk-note { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12px; color: var(--text-3); padding: 18px 0 4px; }
.desk-note svg { width: 14px; height: 14px; flex: none; }

/* ============ 技能 ============ */
.wide-col { max-width: 1040px; }
.sk-head { padding: 24px 0 8px; }
.sk-head h1 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; }
.sk-head p { color: var(--text-2); margin: 0 0 16px; font-size: 14px; }
.sk-search { margin: 0; max-width: 420px; }
.sk-search input { height: 40px; }
.sk-search svg { top: 12px; }
.sk-h2 { font-size: 13px; font-weight: 600; color: var(--text); margin: 28px 0 4px; }
.sk-g { font-size: 12px; color: var(--text-3); margin: 14px 0 8px; display: flex; gap: 6px; align-items: baseline; }
.sk-g em { font-style: normal; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.sk { text-align: left; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--card); transition: border-color .15s, box-shadow .15s, transform .15s; display: flex; flex-direction: column; gap: 6px; min-height: 104px; }
.sk:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.sk b { font-weight: 600; font-size: 14px; font-family: var(--mono); letter-spacing: -.01em; }
.sk span { font-size: 13px; color: var(--text-2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sk-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-3); margin: 18px 0 0; }
.sk-back svg { width: 14px; height: 14px; transform: rotate(180deg); }
.sk-back:hover { color: var(--text); }
.sk-detail { padding: 14px 0 40px; }
.sk-meta { display: flex; gap: 6px; }
.chip-s { font-size: 12px; color: var(--text-2); background: var(--hover); border-radius: 999px; padding: 2px 10px; }
.chip-s.mine { color: var(--brand); background: var(--brand-tint); }
.sk-detail h1 { font: 600 24px/1.3 var(--mono); letter-spacing: -.02em; margin: 12px 0 8px; }
.sk-desc { color: var(--text-2); margin: 0 0 18px; }
.sk-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.btn-use { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 500; font-size: 14px; }
.btn-use svg { width: 16px; height: 16px; }
.sk-path { font: 12px var(--mono); color: var(--text-3); word-break: break-all; }
.sk-doc { font-size: 14.5px; }
.q-state.bad, .hint .bad { color: var(--err); }

/* ============ 群聊 ============ */
.ava { --c: var(--brand); width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--c) 14%, var(--bg)); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  font-size: 12px; font-weight: 600; line-height: 1; }
.a-ava { margin-top: 1px; }
.a-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.hi-grp { width: 16px; height: 16px; color: var(--text-3); flex: none; display: grid; place-items: center; }
.hi-grp svg { width: 15px; height: 15px; }

.agent { border: 1px solid var(--line); border-radius: 14px; margin: 6px 0 10px; background: var(--card); overflow: hidden; transition: border-color .15s; }
.agent:hover { border-color: var(--line-strong); }
.agent-h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; text-align: left; }
.agent-h > svg { width: 14px; height: 14px; color: var(--text-3); flex: none; transition: transform .15s; }
.agent.open .agent-h > svg { transform: rotate(90deg); }
.agent-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.agent-t b { font-size: 14px; font-weight: 600; }
.agent-t span { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-s { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); max-width: 42%; flex: none; }
.agent-s em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent.done .agent-s { color: var(--ok); }
.agent-s.bad, .agent.done .agent-s.bad { color: var(--err); }
.agent-b { display: none; border-top: 1px solid var(--line); padding: 4px 14px 12px; }
.agent.open .agent-b { display: block; }
.agent-sec { font-size: 12px; color: var(--text-3); margin: 12px 0 4px; font-weight: 500; }
.agent-brief { font-size: 13px; color: var(--text-2); white-space: pre-wrap; background: var(--hover); border-radius: 10px; padding: 8px 10px; max-height: 180px; overflow: auto; }
.agent-say { font-size: 13px; color: var(--text-2); padding: 3px 0; }
.agent-b .md { font-size: 14px; }
@media (max-width: 640px) { .agent-s { max-width: 34%; } }

.g-intro { text-align: center; padding: 40px 0 12px; }
.g-avas { display: flex; justify-content: center; margin-bottom: 14px; }
.g-avas .ava { width: 40px; height: 40px; font-size: 15px; margin: 0 -5px; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line); }
.g-intro h2 { font-size: 22px; font-weight: 600; margin: 0 0 6px; letter-spacing: -.01em; }
.g-intro > p { color: var(--text-2); margin: 0 auto 20px; max-width: 460px; font-size: 14px; }
.g-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; text-align: left; }
.g-m { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.g-m .ava { width: 30px; height: 30px; font-size: 13px; }
.g-m b { display: block; font-size: 14px; font-weight: 600; }
.g-m span { font-size: 12.5px; color: var(--text-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-brief { margin-top: 12px; text-align: left; font-size: 13px; color: var(--text-2); background: var(--hover); border-radius: 12px; padding: 10px 12px; }
.g-brief b { color: var(--text); margin-right: 8px; }

.g-pop { width: 380px; max-height: min(640px, 86vh); overflow-y: auto; }
.g-pick { display: grid; gap: 2px; }
.g-opt .ava { margin-top: 1px; }
.g-opt .ck { opacity: 0; }
.g-opt.on { background: var(--brand-tint); }
.g-opt.on .ck { opacity: 1; }

/* ============ 常驻负责人 ============ */
.leads { margin: 4px 12px 8px; }
.leads-h { font-size: 12px; color: var(--text-3); padding: 6px 4px 6px; font-weight: 500; }
.lead { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 4px; margin: 0 4px 4px 0; border-radius: 999px; font-size: 13px; border: 1px solid var(--line); background: var(--bg); position: relative; transition: background .12s, border-color .12s; }
.lead:hover { background: var(--hover); }
.lead.on { border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: var(--brand-tint); }
.lead .ava { width: 24px; height: 24px; font-size: 11px; }
.lead .run-dot { position: absolute; top: 2px; left: 22px; width: 7px; height: 7px; }
.lead-go { margin: 12px 0 0; }
.lead-go svg { transform: none; }

/* ============ 群成员 ============ */
.mem-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 6px; border-radius: 999px; border: 1px solid var(--line); flex: none; transition: background .12s; }
.mem-btn:hover { background: var(--hover); }
.mem-btn.live { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.mem-stack { display: inline-flex; }
.mem-stack .ava { width: 24px; height: 24px; font-size: 11px; margin-left: -7px; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line); }
.mem-stack .ava:first-child { margin-left: 0; }
.mem-n { font-size: 13px; color: var(--text-2); font-weight: 500; }
.mem-pop { width: 380px; max-height: min(640px, 86vh); overflow-y: auto; }
.mem-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.mem-row:hover { background: var(--hover); }
.mem-row .ava { width: 32px; height: 32px; font-size: 13px; }
.mem-t { flex: 1; min-width: 0; line-height: 1.4; }
.mem-t b { display: block; font-size: 14px; font-weight: 600; }
.mem-t span { font-size: 12px; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mem-st { font-size: 12px; color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; flex: none; }
.mem-st.busy { color: var(--brand); }
.mem-st .pulse { width: 7px; height: 7px; }
.tabs button { font-size: 12.5px; }
@media (max-width: 640px) { .mem-btn .mem-n { display: none; } .mem-btn { padding: 0 6px; } }

/* ============ 办公室（3D） ============ */
.office { flex: 1; position: relative; min-height: 0; overflow: hidden; }
.ofc-stage { position: absolute; inset: 0; }
.ofc-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.ofc-canvas:active { cursor: grabbing; }
.ofc-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ofc-lbl { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: auto; cursor: pointer; will-change: transform; }
.ofc-name { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-sm); white-space: nowrap; color: var(--text); }
.ofc-name i { width: 7px; height: 7px; border-radius: 50%; }
.ofc-lbl.dir .ofc-name { background: var(--brand); color: #fff; border-color: transparent; }
.ofc-bubble { max-width: 180px; font-size: 11.5px; line-height: 1.35; padding: 4px 9px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.ofc-bubble.working { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.ofc-bubble.done { color: var(--ok); }
.ofc-bubble.error { color: var(--err); }
.ofc-bubble::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 7px; height: 7px; background: inherit; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.ofc-hud { position: absolute; left: 16px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--card) 90%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 13px; color: var(--text-2); }
.ofc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.ofc-dot.on { background: var(--brand); animation: breathe 1.4s ease-in-out infinite; }
.ofc-reset { width: 26px; height: 26px; border-radius: 50%; color: var(--text-2); font-size: 15px; }
.ofc-reset:hover { background: var(--hover); }
.ofc-tip { position: absolute; left: 50%; bottom: calc(12px + var(--safe-b)); transform: translateX(-50%); font-size: 12px; color: var(--text-3); white-space: nowrap; pointer-events: none; }
.ofc-card { position: absolute; right: 16px; top: 12px; width: 300px; max-width: calc(100% - 32px); background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-pop); padding: 14px 16px; animation: popin .14s ease-out; }
.ofc-card[hidden] { display: none; }
.ofc-x { position: absolute; right: 10px; top: 8px; width: 26px; height: 26px; border-radius: 50%; color: var(--text-3); font-size: 18px; }
.ofc-x:hover { background: var(--hover); }
.ofc-ch { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-right: 24px; }
.ofc-ch > i { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.ofc-ch b { display: block; font-size: 15px; }
.ofc-ch span { font-size: 12px; color: var(--text-3); }
.ofc-ch em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--text-3); flex: none; }
.ofc-ch em.working, .ofc-ch em.walking { color: var(--brand); }
.ofc-ch em.done { color: var(--ok); }
.ofc-ch em.error { color: var(--err); }
.ofc-row { display: flex; gap: 10px; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--line); }
.ofc-row b { flex: none; color: var(--text-3); font-weight: 500; min-width: 3em; }
.ofc-row span { color: var(--text); word-break: break-word; }
.ofc-go { margin-top: 10px; width: 100%; height: 36px; border-radius: 10px; background: var(--text); color: var(--bg); font-weight: 500; font-size: 14px; }
@media (max-width: 640px) {
  .ofc-card { left: 10px; right: 10px; top: auto; bottom: calc(10px + var(--safe-b)); width: auto; max-width: none; }
  .ofc-tip { display: none; }
  .ofc-bubble { max-width: 120px; }
}

/* ============ 侧栏整段滚动、负责人可收起、技能中文名 ============ */
.side { min-height: 0; }
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.side-scroll .hist { flex: none; overflow: visible; }
.side-scroll .search, .side-scroll .tabs { flex: none; }
.side-scroll .tabs { position: sticky; top: 0; z-index: 2; box-shadow: 0 -6px 0 var(--side); }
.side-scroll .search { position: sticky; top: 0; z-index: 3; }
.side-scroll .search { background: var(--side); margin: 0; padding: 2px 12px 8px; }
.side-scroll .search svg { left: 23px; top: 12px; }
.side-scroll .tabs { top: 46px; margin-top: 0; }
.leads-h { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 4px; font-size: 12px; color: var(--text-3); font-weight: 500; border-radius: 8px; }
.leads-h:hover { color: var(--text-2); background: var(--hover); }
.leads-h svg { width: 13px; height: 13px; transform: rotate(90deg); transition: transform .15s; }
.leads.folded .leads-h svg { transform: none; }
.leads-h em { margin-left: auto; font-style: normal; }
.leads.folded .leads-list { display: none; }
.leads-list { max-height: 196px; overflow-y: auto; padding: 2px 0 0; }
.sk code { font: 11.5px var(--mono); color: var(--text-3); margin-top: -4px; }
.sk b { font-family: inherit; font-size: 15px; letter-spacing: 0; }
.sk-detail h1 { font-family: inherit; letter-spacing: -.01em; margin-bottom: 2px; }
.sk-id { font: 13px var(--mono); color: var(--text-3); margin-bottom: 10px; }
.side-scroll .tabs { background: color-mix(in srgb, var(--text) 5%, var(--side)); }

/* ============ 像素办公室（2D） ============ */
.o2-wrap { position: absolute; inset: 0; overflow: auto; scrollbar-width: none; background: #1a1f24; }
.o2-wrap::-webkit-scrollbar { display: none; }
.o2-size { position: relative; margin: 0 auto; }
.o2-scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.o2-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; user-select: none; }
.o2-wires { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.o2-arc { fill: none; stroke-width: 5; stroke-dasharray: 14 12; opacity: .85; animation: o2dash 1.9s linear forwards; filter: drop-shadow(0 0 6px rgba(255,255,255,.6)); }
@keyframes o2dash { from { stroke-dashoffset: 120; } 80% { opacity: .85; } to { stroke-dashoffset: 0; opacity: 0; } }
.o2-orb { filter: drop-shadow(0 0 10px #fff); }
.o2-sign { position: absolute; display: flex; align-items: center; justify-content: center; gap: 4%; background: #0d2436; border: 4px solid #3a5f7d; border-radius: 6px; box-shadow: 0 0 24px rgba(74, 163, 232, .55), inset 0 0 16px rgba(74, 163, 232, .35); }
.o2-sign img { height: 62%; image-rendering: auto; filter: drop-shadow(0 0 6px rgba(120, 200, 255, .8)); }
.o2-sign span { color: #dff2ff; font-weight: 800; font-size: 34px; letter-spacing: .08em; text-shadow: 0 0 10px rgba(120, 200, 255, .9); white-space: nowrap; }
.o2-p { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.o2-body { position: relative; z-index: 1; transform-origin: 50% 100%; }
.o2-body img { display: block; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,.18)); }
.o2-shadow { width: 64%; height: 12px; margin-top: -8px; border-radius: 50%; background: rgba(0,0,0,.28); }
.o2-p.busy .o2-shadow { background: radial-gradient(closest-side, rgba(74,163,232,.9), rgba(74,163,232,0)); height: 20px; margin-top: -12px; animation: o2glow 1.2s ease-in-out infinite; }
.o2-p.err .o2-shadow { background: radial-gradient(closest-side, rgba(220,70,60,.9), rgba(220,70,60,0)); height: 20px; margin-top: -12px; }
@keyframes o2glow { 50% { opacity: .45; } }
.o2-p.busy .o2-body { animation: o2type .5s steps(2) infinite; }
@keyframes o2type { 50% { transform: translateY(-3px); } }
.o2-p:not(.busy):not(.walk) .o2-body { animation: o2idle 3s ease-in-out infinite; }
@keyframes o2idle { 50% { transform: scaleY(.975); } }
.o2-p.walk .o2-body { animation: o2walk .32s steps(2) infinite; }
@keyframes o2walk { 50% { transform: translateY(-7px) rotate(-3deg); } }
.o2-p.flip .o2-body img { transform: scaleX(-1); }
.o2-p.cheer .o2-body { animation: o2cheer .9s ease-out 2; }
@keyframes o2cheer { 30% { transform: translateY(-26px); } 60% { transform: translateY(0); } 75% { transform: translateY(-10px); } }
.o2-p.gone { opacity: 0; transition: opacity .5s; }
.o2-name { margin-top: 2px; display: inline-flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 700; padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: #1d1d1f; box-shadow: 0 2px 6px rgba(0,0,0,.25); white-space: nowrap; }
.o2-name i { width: 11px; height: 11px; border-radius: 50%; }
.o2-p.k-dir .o2-name { background: #1b5279; color: #fff; }
.o2-bubble { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); max-width: 300px; font-size: 19px; line-height: 1.3; padding: 7px 14px; border-radius: 14px; background: #fff; color: #1b5279; box-shadow: 0 3px 10px rgba(0,0,0,.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; border: 2px solid #1b5279; }
.o2-bubble.done { color: #1f7a52; border-color: #2f9e6e; }
.o2-bubble.error { color: #c0392b; border-color: #d0473d; }
.o2-bubble[hidden] { display: none; }
/* 小人以脚底为锚点：名字牌和影子挂在脚下，不算进高度 */
.o2-p { width: max-content; }
.o2-shadow { position: absolute; left: 18%; bottom: -6px; margin: 0; z-index: 0; }
.o2-p.busy .o2-shadow, .o2-p.err .o2-shadow { bottom: -10px; margin: 0; }
.o2-name { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); margin: 0; z-index: 3; }
.o2-wrap { display: flex; align-items: center; }
/* 坐着（在工位上）用背影图，走路用正面站立图 */
.o2-sit { display: none; }
.o2-p.seated .o2-sit { display: block; }
.o2-p.seated .o2-sit ~ .o2-stand, .o2-p.seated .o2-stand:has(+ .o2-sit) { display: none; }
.o2-p.busy.seated .o2-body { animation: o2typing .36s steps(2) infinite; }
@keyframes o2typing { 50% { transform: translateY(-2px) rotate(.6deg); } }
/* 墙上灯箱：白底发光 + 横版 logo */
.o2-sign { background: linear-gradient(#ffffff, #eef4fa); border: 3px solid #cfe0ee; box-shadow: 0 0 28px rgba(150, 210, 255, .75), 0 0 6px rgba(255,255,255,.9) inset; padding: 3% 4%; }
.o2-sign img { height: auto; width: 100%; max-height: 100%; object-fit: contain; filter: none; }
.o2-vars { display: inline-flex; gap: 2px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--line); }
.o2-vars button { width: 24px; height: 24px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.o2-vars button:hover { background: var(--hover); color: var(--text); }
.o2-vars button.on { background: var(--brand); color: #fff; }
/* 修：坐着 / 站着只显示一张（.o2-body img 的 display:block 优先级更高，这里压过它） */
.o2-p .o2-body .o2-sit { display: none; }
.o2-p.seated .o2-body .o2-sit { display: block; }
.o2-p.seated .o2-body .o2-stand:has(+ .o2-sit) { display: none; }
/* 修：logo 铺满灯箱 */
.o2-sign img { position: absolute; left: 5%; top: 8%; width: 90%; height: 84%; object-fit: contain; max-height: none; }

/* ============ 侧栏整理：新对话一行 + 三个菜单 ============ */
.new-row { display: flex; gap: 6px; margin: 6px 12px 6px; }
.new-main { flex: 1; height: 40px; border-radius: 10px; display: flex; align-items: center; gap: 10px; padding: 0 12px; font-weight: 500; border: 1px solid var(--line); background: var(--bg); transition: background .12s; }
.new-main:hover { background: var(--hover); }
.new-main svg, .new-grp svg { width: 18px; height: 18px; color: var(--text-2); }
.new-main kbd { margin-left: auto; font: 11px var(--mono); color: var(--text-3); }
.new-grp { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg); flex: none; }
.new-grp:hover { background: var(--hover); }
.side-nav { display: flex; flex-direction: column; gap: 1px; padding: 2px 8px; }
.nav-i { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 9px; font-size: 14px; color: var(--text); }
.nav-i:hover { background: var(--hover); }
.nav-i.on { background: var(--active); font-weight: 500; }
.nav-i svg { width: 18px; height: 18px; color: var(--text-2); flex: none; }
.nav-i .nav-n { margin-left: auto; font-style: normal; font-size: 12px; color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; }
.nav-i .nav-n .run-dot { width: 6px; height: 6px; }
.side-sep { height: 1px; background: var(--line); margin: 8px 16px 8px; flex: none; }

/* ============ 负责人页 ============ */
.ld-head { display: flex; align-items: flex-end; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.ld-head p { max-width: 560px; }
.ld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; margin: 18px 0 40px; }
.ld-card { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--card); display: flex; flex-direction: column; gap: 8px; text-align: left; transition: border-color .15s, box-shadow .15s; }
.ld-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.ld-top { display: flex; align-items: center; gap: 12px; }
.ld-sprite { height: 58px; width: 48px; object-fit: contain; image-rendering: pixelated; background: var(--hover); border-radius: 12px; padding: 4px; flex: none; }
.ld-sprite.big { height: 110px; width: 92px; border-radius: 18px; padding: 8px; }
.ld-t b { display: block; font-size: 15px; }
.ld-st { font-size: 12px; color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; }
.ld-st.busy { color: var(--brand); }
.ld-card p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.55; }
.ld-path { display: flex; gap: 6px; align-items: center; font: 12px var(--mono); color: var(--text-3); min-width: 0; }
.ld-path svg { width: 14px; height: 14px; flex: none; }
.ld-path span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-act { display: flex; gap: 6px; margin-top: auto; }
.ld-add { align-items: center; justify-content: center; border-style: dashed; color: var(--text-2); min-height: 170px; }
.ld-add svg { width: 26px; height: 26px; }
.ld-add span { font-size: 12px; color: var(--text-3); }
.ld-detail { padding: 14px 0 40px; max-width: 820px; }
.ld-hero { display: flex; gap: 18px; align-items: flex-start; }
.ld-hero h1 { font-size: 24px; margin: 4px 0 6px; }
.ld-meta { font: 12px var(--mono); color: var(--text-3); display: flex; gap: 6px; align-items: center; margin-bottom: 14px; }
.ld-meta span { display: inline-flex; gap: 6px; align-items: center; word-break: break-all; }
.ld-meta svg { width: 14px; height: 14px; flex: none; }
.ld-box { border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; background: var(--card); font-size: 14px; }
.sk-h2 small { font: 11px var(--mono); color: var(--text-3); font-weight: 400; margin-left: 8px; word-break: break-all; }
.muted { color: var(--text-3); font-size: 13px; }
.ld-form { max-width: 680px; padding: 14px 0 60px; }
.ld-form h1 { font-size: 22px; margin: 4px 0 16px; }
.ld-form label { display: block; font-size: 13px; color: var(--text-2); margin: 14px 0 6px; }
.ld-form label .input { margin-top: 6px; }
.ld-form select.input { appearance: auto; }
.ld-ta { height: 220px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.ld-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.ld-pk { border: 2px solid transparent; border-radius: 14px; padding: 2px; }
.ld-pk.on { border-color: var(--brand); }
.ld-pk .ld-sprite { height: 64px; width: 52px; }
input[type=color] { width: 48px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: none; padding: 2px; margin-top: 6px; display: block; }
@media (max-width: 640px) { .ld-hero { flex-direction: column; } }
.sk-actions .pop-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; } .sk-actions .pop-btn svg { width: 16px; height: 16px; }

/* ============ 附件 ============ */
.c-atts { display: none; gap: 8px; flex-wrap: wrap; margin: -2px 0 10px; }
.c-atts.has { display: flex; }
.att { position: relative; display: flex; align-items: center; gap: 8px; max-width: 240px; padding: 6px 28px 6px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.att img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; flex: none; }
.att-ic { width: 40px; height: 40px; border-radius: 8px; background: var(--hover); display: grid; place-items: center; flex: none; }
.att-ic svg { width: 20px; height: 20px; color: var(--text-2); }
.att-t { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.att-t b { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-t em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.att.err { border-color: color-mix(in srgb, var(--err) 40%, transparent); }
.att.err em { color: var(--err); }
.att-x { position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; color: var(--text-3); font-size: 15px; line-height: 1; }
.att-x:hover { background: var(--hover); color: var(--text); }
.att-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--brand); transition: width .2s; }
.c-attbtn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); flex: none; }
.c-attbtn:hover { background: var(--hover); color: var(--text); }
.c-attbtn svg { width: 18px; height: 18px; }
.composer.drop { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.q-atts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.q-img img { display: block; max-width: 220px; max-height: 220px; border-radius: 14px; border: 1px solid var(--line); object-fit: cover; }
.q-file { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 14px; background: var(--bubble); color: var(--text); text-decoration: none; max-width: 280px; }
.q-file svg { width: 22px; height: 22px; color: var(--text-2); flex: none; }
.q-file span { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.q-file b { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-file em { font-style: normal; font-size: 12px; color: var(--text-3); }
@media (max-width: 640px) { .q-img img { max-width: 160px; max-height: 160px; } }

/* ============ 总监入口 ============ */
.dir-entry { display: flex; align-items: center; gap: 10px; margin: 2px 12px 8px; padding: 10px 12px; border-radius: 12px; text-align: left; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--bg)), var(--bg)); border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line)); position: relative; transition: border-color .15s, box-shadow .15s; }
.dir-entry:hover { box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.dir-entry.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.dir-entry .ava { width: 34px; height: 34px; font-size: 14px; background: var(--brand); color: #fff; border: 0; }
.dir-t { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.dir-t b { font-size: 14.5px; font-weight: 600; }
.dir-t em { font-style: normal; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-entry .run-dot { position: absolute; right: 12px; top: 50%; margin-top: -4px; }

/* =====================================================================
   新框架（11/05）：左边图标栏 · 历史抽屉 · 中间总监 · 右边工作面板
   ===================================================================== */
.shell { display: flex; height: 100%; overflow: hidden; }
.rail { width: 72px; flex: none; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: calc(12px + var(--safe-t)) 0 12px; gap: 4px; z-index: 20; }
.rail-logo { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 10px; }
.rail-i { position: relative; width: 58px; padding: 7px 0 6px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--text-2); transition: background .12s, color .12s; }
.rail-i:hover { background: var(--hover); color: var(--text); }
.rail-i.on { background: var(--active); color: var(--text); }
.rail-i svg { width: 21px; height: 21px; }
.rail-i em { font-style: normal; font-size: 11px; line-height: 1; }
.rail-dir .ava { width: 36px; height: 36px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 40%, transparent); }
.rail-dir.on .ava { box-shadow: 0 0 0 3px var(--brand-tint), 0 2px 8px color-mix(in srgb, var(--brand) 40%, transparent); }
.rail-dot { position: absolute; top: 4px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: #4aa3e8; border: 2px solid var(--side); animation: breathe 1.2s ease-in-out infinite; }
.rail-badge { position: absolute; top: 2px; right: 8px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--err); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; }
.rail-sp { flex: 1; }
.rail-me { position: relative; }
.rail-me .avatar { width: 34px; height: 34px; }
.rail-me i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); border: 2px solid var(--side); }
.rail-me i.on { background: var(--ok); }
.only-mobile { display: none !important; }

/* 历史抽屉：默认收起，点"历史"展开 */
.side { width: 280px; margin-left: 0 !important; transform: none; border-right: 1px solid var(--line); }
.shell:not(.hist-open) .side { display: none; }
.side-top { padding: calc(14px + var(--safe-t)) 10px 6px 16px; }
.side-h { flex: 1; font-size: 15px; font-weight: 600; }
.new-row { margin-top: 2px; }

/* 中间 */
.main { flex: 1; min-width: 0; }
.back-dir { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 8px 0 4px; border-radius: 10px; color: var(--text-2); flex: none; }
.back-dir:hover { background: var(--hover); color: var(--text); }
.back-dir svg { width: 18px; height: 18px; }
.back-dir .ava { width: 24px; height: 24px; border-radius: 8px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 0; }
.team { display: flex; align-items: center; gap: 2px; margin-right: 4px; }
.tm { position: relative; padding: 2px; border-radius: 50%; }
.tm .ava { width: 30px; height: 30px; font-size: 12px; }
.tm i { position: absolute; right: 1px; bottom: 1px; width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); border: 2px solid var(--bg); }
.tm.working i { background: #4aa3e8; animation: breathe 1.2s ease-in-out infinite; }
.tm.working .ava { box-shadow: 0 0 0 2px #4aa3e8; }
.tm.done i { background: var(--ok); }
.panel-btn { position: relative; display: none; }
.panel-btn .rail-badge { top: -2px; right: -4px; }

/* 右边工作面板 */
.panel { width: 320px; flex: none; border-left: 1px solid var(--line); background: var(--side); overflow-y: auto; padding: calc(10px + var(--safe-t)) 14px 20px; }
.pn-head { display: flex; align-items: baseline; gap: 8px; padding: 6px 2px 10px; }
.pn-head b { font-size: 15px; }
.pn-head span { font-size: 12px; color: var(--text-3); flex: 1; }
.pn-x { display: none; }
.pn-sec { margin-bottom: 18px; }
.pn-sec h4 { font-size: 12px; color: var(--text-3); font-weight: 600; margin: 0 2px 8px; display: flex; gap: 6px; align-items: center; }
.pn-sec h4 em { font-style: normal; background: var(--err); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 10.5px; line-height: 16px; }
.pn-sec h4 em:empty { display: none; }
.pn-dec { background: var(--card); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); border-left: 3px solid var(--warn); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.pn-dec p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; }
.pn-dec-a { display: flex; gap: 6px; }
.pn-dec-a .pop-btn { height: 28px; padding: 0 12px; font-size: 12.5px; }
.pn-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); margin-bottom: 6px; }
.pn-row:hover { border-color: var(--line-strong); }
.pn-row .ava { width: 30px; height: 30px; font-size: 12px; }
.pn-row > span:not(.ava) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.pn-row b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-row small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-row time { font-size: 11.5px; color: var(--text-3); flex: none; }
.pn-row .pulse { flex: none; }
.pn-empty { font-size: 12.5px; color: var(--text-3); padding: 4px 2px 2px; }

/* 中等宽度：面板收进右上角按钮，点开浮在右边 */
@media (max-width: 1199px) {
  .panel { position: fixed; right: 0; top: 0; bottom: 0; z-index: 45; box-shadow: var(--shadow-pop); transform: translateX(100%); transition: transform .22s ease; }
  .shell.panel-open .panel { transform: none; }
  .shell.panel-open .scrim { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, .25); }
  .panel-btn { display: inline-grid; }
  .pn-x { display: inline-grid; }
}
/* 手机：图标栏变成底部标签栏；历史抽屉全屏；面板从底部"进度"进 */
@media (max-width: 767px) {
  .shell { flex-direction: column; }
  .rail { order: 9; width: 100%; height: calc(60px + var(--safe-b)); flex-direction: row; justify-content: space-around; padding: 4px 4px calc(4px + var(--safe-b)); border-right: 0; border-top: 1px solid var(--line); }
  .rail-logo, .rail-sp, .only-wide { display: none !important; }
  .only-mobile { display: flex !important; }
  .rail-i { width: auto; flex: 1; padding: 6px 0 4px; }
  .rail-dir .ava { width: 30px; height: 30px; font-size: 13px; border-radius: 10px; }
  .main { min-height: 0; }
  .side { position: fixed; inset: 0 0 calc(60px + var(--safe-b)) 0; width: 100%; z-index: 40; box-shadow: none; }
  .side .side-foot.only-mobile { display: flex !important; }
  .panel { width: 100%; top: 0; bottom: calc(60px + var(--safe-b)); }
  .panel-btn { display: none !important; }
  .team .tm:nth-child(n+5) { display: none; }
  .back-dir .ava { display: none; }
}
.pn-row > span.ava { flex: none; display: inline-grid; }
.pn-row > span:not(.ava) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
@media (max-width: 767px) {
  .rail { position: relative; z-index: 50; }
  .shell.panel-open .scrim { bottom: calc(60px + var(--safe-b)); }
  .shell.panel-open .rail-i[data-go=panel], .shell.hist-open .rail-i[data-go=history] { background: var(--active); color: var(--text); }
}

/* ============ 工作面板 v2 ============ */
.panel { width: 340px; padding: calc(12px + var(--safe-t)) 14px 24px; }
.pn-head { display: flex; align-items: center; gap: 8px; padding: 4px 2px 12px; }
.pn-head > div { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.pn-head > div b { font-size: 16px; }
.pn-head > div span { font-size: 12px; color: var(--text-3); }
.pn-push { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: var(--text-3); background: var(--bg); }
.pn-push svg { width: 15px; height: 15px; }
.pn-push em { font-style: normal; }
.pn-push.on { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); background: var(--brand-tint); }
.pn-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.st { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.st b { font-size: 22px; line-height: 1; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.st.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 7%, var(--card)); }
.st.warn b { color: var(--warn); }
.st.busy b { color: var(--brand); }
.pn-sec h4 { font-size: 12.5px; color: var(--text-2); margin-bottom: 10px; }

.dc { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm); transition: opacity .2s, transform .2s; }
.dc::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--warn); }
.dc.sending { opacity: .5; pointer-events: none; }
.dc.closed { box-shadow: none; opacity: .8; }
.dc.closed::before { background: var(--ok); }
.dc-h { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); padding-right: 26px; }
.dc-h .ava { width: 22px; height: 22px; font-size: 10px; }
.dc-h b { color: var(--text); font-size: 12.5px; }
.dc-h span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dc-h time { margin-left: auto; flex: none; }
.dc-fs { display: inline-grid; color: var(--brand); flex: none; }
.dc-fs svg { width: 13px; height: 13px; }
.dc-t { margin: 8px 0 10px; font-size: 14px; line-height: 1.55; color: var(--text); font-weight: 500; }
.dc-q { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-a { height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); display: inline-flex; align-items: center; gap: 4px; transition: background .12s, border-color .12s; }
.chip-a:hover { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.chip-a.ghost { border-style: dashed; color: var(--text-2); }
.chip-a svg { width: 13px; height: 13px; }
.dc-w { margin-top: 10px; }
.dc-w textarea { width: 100%; min-height: 64px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 10px; resize: vertical; outline: none; background: var(--bg); font-size: 13.5px; }
.dc-w textarea:focus { border-color: var(--brand); }
.dc-w > div { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.dc-ok { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; color: var(--text-3); display: grid; place-items: center; }
.dc-ok:hover { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.dc-ok svg { width: 15px; height: 15px; }
.dc-ans { margin: -4px 0 0; font-size: 12.5px; color: var(--ok); }
.dc-undo { margin-left: 6px; font-size: 12px; color: var(--text-3); text-decoration: underline; }
.pn-more { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-3); margin: 2px 2px 8px; }
.pn-more svg { width: 12px; height: 12px; }

.wk, .dn { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; transition: border-color .15s, box-shadow .15s; }
.wk:hover, .dn:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.wk { border-color: color-mix(in srgb, #4aa3e8 35%, var(--line)); }
.wk-h { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); }
.wk-h .ava { width: 24px; height: 24px; font-size: 10.5px; }
.wk-h b { color: var(--text); font-size: 13px; }
.wk-h span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wk-h time { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }
.wk-task { margin: 6px 0 2px; font-size: 13px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wk-step { margin: 4px 0 0; font-size: 12px; display: flex; align-items: center; gap: 7px; min-width: 0; }
.wk-step span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-step .pulse { flex: none; width: 7px; height: 7px; }
.dn-p { margin: 6px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 767px) { .panel { width: 100%; } }

/* ============ 总监指挥台（总监页和普通对话区分开） ============ */
.main.dir-view { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 9%, var(--bg)) 0, var(--bg) 340px); }
.main.dir-view .top { background: transparent; }
.main.dir-view .top .team, .main.dir-view .top-ctx { display: none; }
.main.dir-view .turn .a { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 16px; padding: 14px 16px 6px; box-shadow: var(--shadow-sm); }
.main.dir-view .turn .a .a-ava { display: none; }
.main.dir-view .q-b { background: var(--brand); color: #fff; }
.main.dir-view .composer { border-color: color-mix(in srgb, var(--brand) 40%, var(--line-strong)); box-shadow: 0 8px 30px color-mix(in srgb, var(--brand) 14%, transparent); }
.hero { margin: 6px 0 8px; padding: 18px 20px; border-radius: 22px; color: #e8f3fb; background: radial-gradient(120% 140% at 0% 0%, #2a6f9e 0%, #1b5279 38%, #0f2f47 100%); box-shadow: 0 10px 40px rgba(15, 47, 71, .25); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(127, 227, 255, .22), transparent); }
.hero-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero-id { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 240px; }
.hero-ava { width: 46px; height: 46px; border-radius: 15px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #fff; flex: none; }
.hero-id b { display: block; font-size: 19px; color: #fff; letter-spacing: -.01em; }
.hero-id span { font-size: 13px; color: rgba(232, 243, 251, .78); }
.hero-stats { display: flex; gap: 8px; }
.hs { min-width: 76px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16); color: inherit; text-align: left; display: flex; flex-direction: column; transition: background .15s; }
.hs:hover { background: rgba(255, 255, 255, .18); }
.hs b { font-size: 22px; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.hs span { font-size: 11.5px; color: rgba(232, 243, 251, .75); }
.hs.warn { background: rgba(255, 190, 80, .22); border-color: rgba(255, 200, 110, .45); }
.hs.busy b { color: #7fe3ff; }
.hero-brief { display: block; width: 100%; text-align: left; margin-top: 14px; padding: 10px 14px; border-radius: 14px; background: rgba(0, 0, 0, .16); border: 1px solid rgba(255, 255, 255, .10); color: inherit; position: relative; z-index: 1; }
.hero-brief:hover { background: rgba(0, 0, 0, .24); }
.hero-brief em { font-style: normal; font-size: 11.5px; color: #7fe3ff; display: block; margin-bottom: 2px; }
.hero-brief b { display: block; font-size: 14.5px; color: #fff; }
.hero-brief span { font-size: 12.5px; color: rgba(232, 243, 251, .7); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-team { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; position: relative; z-index: 1; }
.ht { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .14); color: inherit; flex: none; max-width: 220px; }
.ht:hover { background: rgba(255, 255, 255, .18); }
.ht .ava { width: 28px; height: 28px; font-size: 11px; background: rgba(255, 255, 255, .9); }
.ht span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; text-align: left; }
.ht b { font-size: 12.5px; color: #fff; }
.ht em { font-style: normal; font-size: 11px; color: rgba(232, 243, 251, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht.working { border-color: #7fe3ff; box-shadow: 0 0 0 1px rgba(127, 227, 255, .4); }
.ht.working em { color: #7fe3ff; }
.ht.add svg { width: 18px; height: 18px; margin-left: 6px; }
.quick { max-width: var(--col); margin: 0 auto 8px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.quick button { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line)); background: var(--card); color: var(--text-2); font-size: 12.5px; }
.quick button:hover { color: var(--brand); border-color: var(--brand); }
@media (max-width: 640px) { .hero { padding: 14px; border-radius: 18px; } .hero-stats { width: 100%; } .hs { flex: 1; } .hero-id b { font-size: 17px; } }

/* ============ 公司页 ============ */
.co-tabs { display: flex; gap: 4px; padding: 0 24px 8px; border-bottom: 1px solid var(--line); }
.co-tabs button { height: 34px; padding: 0 14px; border-radius: 10px 10px 0 0; font-size: 14px; color: var(--text-2); position: relative; }
.co-tabs button.on { color: var(--text); font-weight: 600; }
.co-tabs button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -9px; height: 2px; background: var(--brand); border-radius: 2px; }
.co-ops { flex: 1; border: 0; width: 100%; background: #fff; }
.br-head { padding: 22px 0 6px; }
.br-head em { font-style: normal; font-size: 12px; color: var(--text-3); }
.br-head h1 { font-size: 24px; margin: 6px 0 0; letter-spacing: -.01em; line-height: 1.35; }
.br-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.br-card { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 14px 48px; background: var(--card); }
.br-n { position: absolute; left: 14px; top: 14px; width: 24px; height: 24px; border-radius: 8px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.br-card b { display: block; font-size: 15px; margin-bottom: 6px; }
.br-card p { margin: 0 0 8px; font-size: 13px; color: var(--text-2); line-height: 1.6; }
.br-risks { display: grid; gap: 8px; }
.br-risk { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--card); }
.br-risk > span { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--hover); }
.br-risk.hi > span { background: color-mix(in srgb, var(--err) 15%, transparent); color: var(--err); }
.br-risk.mid > span { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.br-risk div { flex: 1; }
.br-risk b { font-size: 14px; }
.br-risk p { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.br-risk em { font-style: normal; font-size: 12px; color: var(--text-3); flex: none; }
.br-proj { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.br-p { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--card); }
.br-p > div { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.br-p b { font-size: 14.5px; }
.br-p p { margin: 6px 0 4px; font-size: 13px; color: var(--text-2); }
.br-p small { font-size: 12px; color: var(--text-3); }
.br-ppl { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.br-pp { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--card); }
.br-pp .ava { width: 30px; height: 30px; font-size: 12px; }
.br-pp b { font-size: 14px; margin-right: 6px; }
.br-pp p { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }

/* 组织图 */
.org { padding: 18px 0 8px; }
.org-row { display: flex; justify-content: center; }
.org-n { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-sm); text-align: left; min-width: 300px; }
.org-n .ava { width: 40px; height: 40px; font-size: 15px; }
.org-n b { display: block; font-size: 16px; }
.org-n span { font-size: 12.5px; color: var(--text-3); }
.org-n.dir { background: radial-gradient(120% 140% at 0% 0%, #2a6f9e, #1b5279 45%, #0f2f47); border: 0; color: #fff; }
.org-n.dir .ava { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: 13px; }
.org-n.dir b { color: #fff; }
.org-n.dir span { color: rgba(232, 243, 251, .8); }
.org-n.dir.working { box-shadow: 0 0 0 3px rgba(127, 227, 255, .45), var(--shadow); }
.org-line { width: 2px; height: 26px; background: var(--line-strong); margin: 0 auto; }
.org-line.split { position: relative; height: 22px; }
.org-line.split::after { content: ""; position: absolute; top: 22px; left: 50%; width: min(860px, 82vw); transform: translateX(-50%); height: 2px; background: var(--line-strong); }
.org-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.org-col { border: 1px solid var(--line); border-radius: 18px; padding: 14px; background: var(--side); position: relative; }
.org-col::before { content: ""; position: absolute; left: 50%; top: -20px; width: 2px; height: 20px; background: var(--line-strong); }
.org-col h4 { margin: 0; font-size: 14px; display: flex; gap: 6px; align-items: center; }
.org-col h4 em { font-style: normal; font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.org-sub { margin: 2px 0 10px; font-size: 12px; color: var(--text-3); }
.org-c { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); margin-bottom: 6px; }
.org-c .ava { width: 30px; height: 30px; font-size: 12px; }
.org-c b { display: block; font-size: 13.5px; }
.org-c span { font-size: 12px; color: var(--text-3); }
.org-c.working { border-color: #4aa3e8; box-shadow: 0 0 0 1px rgba(74, 163, 232, .3); }
.org-c.working span { color: var(--brand); }
.org-c.add, .org-c.ghost { border-style: dashed; background: transparent; }
.org-c.add svg { width: 18px; height: 18px; margin: 0 6px; color: var(--text-3); }
.org-c.ghost .ava { background: var(--hover); color: var(--text-3); border: 0; }
.org-sk { padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); margin-bottom: 6px; }
.org-sk b { display: block; font-size: 12.5px; }
.org-sk span { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 6px; }
.flow-s { flex: 1; min-width: 150px; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: var(--card); }
.flow-s span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--brand-tint); color: var(--brand); font-size: 12px; font-weight: 700; }
.flow-s b { display: block; margin: 6px 0 4px; font-size: 14px; }
.flow-s p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.flow-a { flex: none; width: 18px; position: relative; }
.flow-a::after { content: ""; position: absolute; left: 4px; top: 50%; width: 10px; height: 10px; border-top: 2px solid var(--line-strong); border-right: 2px solid var(--line-strong); transform: translateY(-50%) rotate(45deg); }
@media (max-width: 900px) { .org-cols { grid-template-columns: 1fr; } .org-line.split::after, .org-col::before { display: none; } .org-n { min-width: 0; width: 100%; } }

/* 工作面板：右上角按钮收起 / 展开（宽屏记住） */
.panel-btn { display: inline-grid !important; position: relative; }
.panel-btn.on { color: var(--brand); background: var(--brand-tint); }
@media (min-width: 1200px) { .shell.panel-hidden .panel { display: none; } }
@media (max-width: 767px) { .panel-btn { display: none !important; } }
/* 不选文件夹 */
.pill.nofolder { color: var(--text-3); border-style: dashed; }

.login-en { font: 600 12px var(--mono); letter-spacing: .18em; color: var(--text-3); text-transform: uppercase; margin: -2px 0 8px; }

.rail-unread { position: absolute; top: 3px; right: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--err); border: 2px solid var(--side); }

/* 白底 logo：图标栏上加一圈细边，免得白底糊进背景 */
.rail-logo { background: #fff; border: 1px solid var(--line); padding: 2px; }
.login-card .mark { background: #fff; border: 1px solid var(--line); }

/* ============ 公司 · 总览 ============ */
.ov-kpi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 14px 0 18px; }
.kp { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); text-align: left; transition: box-shadow .15s, border-color .15s; }
.kp:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
.kp b { font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.kp span { font-size: 12.5px; color: var(--text-3); }
.kp.warn b { color: var(--warn); } .kp.busy b { color: var(--brand); } .kp.review b { color: #7a4fd1; } .kp.bad b { color: var(--err); } .kp.ok b { color: var(--ok); }
.ov-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.ov-card { border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: 14px 16px; min-width: 0; }
.ov-card h3 { margin: 0 0 10px; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.ov-card h3 small { font-weight: 400; font-size: 12px; color: var(--text-3); }
.ov-card h3 .pn-more { margin: 0 0 0 auto; }
.ov-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 6px; border-radius: 10px; border-bottom: 1px solid var(--line); }
.ov-row:last-child { border-bottom: 0; }
.ov-row:hover { background: var(--hover); }
.ov-row time { flex: none; width: 70px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ov-row .ava { width: 26px; height: 26px; font-size: 11px; }
.ov-row > span:not(.ava) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.ov-row b { font-size: 13px; }
.ov-row small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lst { font-style: normal; flex: none; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--hover); color: var(--text-2); }
.lst.doing { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.lst.review { background: rgba(122, 79, 209, .12); color: #7a4fd1; }
.lst.rework { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }
.lst.done { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.ov-sch { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.ov-sch:last-child { border-bottom: 0; }
.ov-sch .ava { width: 28px; height: 28px; font-size: 11px; }
.ov-sch > span:not(.ava) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.ov-sch b { font-size: 13px; }
.ov-sch small { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-sch em { font-style: normal; font-size: 11.5px; color: var(--text-3); text-align: right; flex: none; line-height: 1.4; }
.ov-sch .ibtn { width: 28px; height: 28px; }
.ov-sch .ibtn svg { width: 15px; height: 15px; }
.ov-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ov-p { text-align: left; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: var(--card); transition: box-shadow .15s; }
.ov-p:hover { box-shadow: var(--shadow); }
.ov-p.working { border-color: #4aa3e8; box-shadow: 0 0 0 1px rgba(74, 163, 232, .25); }
.ov-ph { display: flex; align-items: center; gap: 8px; }
.ov-ph .ava { width: 30px; height: 30px; font-size: 12px; }
.ov-ph b { font-size: 14px; flex: 1; }
.ov-now { margin: 8px 0 4px; font-size: 13px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ov-watch, .ov-count { margin: 0; font-size: 12px; color: var(--text-3); }
@media (max-width: 1000px) { .ov-grid { grid-template-columns: 1fr; } .ov-kpi { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ov-kpi { grid-template-columns: repeat(2, 1fr); } }

/* ============ 公司 · 一本账 ============ */
.col.lg-wide { max-width: none; padding-left: 20px; padding-right: 20px; }
.lg-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 16px 0 12px; }
.lg-search { margin: 0; width: 280px; }
.lg-who { display: flex; gap: 4px; flex-wrap: wrap; }
.lg-who button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
.lg-who button.on { background: var(--text); color: var(--bg); border-color: transparent; }
.lg-board { display: grid; grid-template-columns: repeat(5, minmax(230px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 30px; align-items: start; }
.lg-col { background: var(--side); border: 1px solid var(--line); border-radius: 16px; padding: 10px; min-height: 200px; }
.lg-col.focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.lg-col h4 { margin: 2px 4px 10px; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.lg-col h4 em { font-style: normal; font-size: 11.5px; color: var(--text-3); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.lg-col.decide h4 { color: var(--warn); } .lg-col.doing h4 { color: var(--brand); } .lg-col.review h4 { color: #7a4fd1; } .lg-col.rework h4 { color: var(--err); } .lg-col.done h4 { color: var(--ok); }
.lg-card { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; transition: box-shadow .15s; }
.lg-card:hover { box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.lg-card.dec { border-left: 3px solid var(--warn); }
.lg-h { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--text-3); font-family: var(--mono); }
.lg-card b { display: block; font-size: 13.5px; margin: 4px 0 6px; line-height: 1.45; font-weight: 600; }
.lg-card small { font-size: 12px; color: var(--text-3); }
.lg-who2 { display: flex; align-items: center; gap: 6px; }
.lg-who2 .ava { width: 20px; height: 20px; font-size: 9.5px; }
.lg-res { margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); background: var(--hover); border-radius: 8px; padding: 6px 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lg-act { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.lg-sheet { max-width: 560px; }
.lg-sheet h3 { margin: 8px 0 8px; font-size: 18px; line-height: 1.45; }
.lg-sheet .lg-h .lst { font-family: inherit; }
.lg-hist { display: grid; gap: 6px; font-size: 13px; }
.lg-hist div { display: flex; gap: 10px; }
.lg-hist time { flex: none; width: 76px; color: var(--text-3); font-size: 12px; }
.lg-hist b { flex: none; font-weight: 600; }
.lg-hist span { color: var(--text-2); }
.sch-row { display: flex; gap: 8px; margin-top: 6px; }
.sch-row .input { margin-top: 0 !important; width: auto; flex: 1; }
.ov-row > .ava, .ov-sch > .ava { flex: none; }

/* 弹出的详情层 */
.mask { position: fixed; inset: 0; background: rgba(10, 20, 28, .4); display: flex; align-items: center; justify-content: center; z-index: 70; animation: fade .15s; padding: 16px; }
.sheet { background: var(--card); width: 100%; max-width: 520px; border-radius: 18px; padding: 20px 22px; box-shadow: var(--shadow-pop); max-height: 88dvh; overflow-y: auto; }
.sheet-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.sheet-actions .pop-btn { height: 36px; padding: 0 16px; }
@media (max-width: 640px) { .mask { align-items: flex-end; padding: 0; } .sheet { border-radius: 18px 18px 0 0; } }