/* DSH 工作台 v3 · 绝对定位布局（最抗造）+ 不依赖 Grid/color-mix/dvh */
:root {
  --bg:        #ffffff;
  --bg-soft:   #f7f8fa;
  --bg-sunken: #eef0f3;
  --bg-hover:  #f1f3f6;
  --line:      #e5e8ec;
  --line-2:    #d6dae0;
  --fg:        #1a1d21;
  --fg-2:      #4a525c;
  --fg-3:      #8b939f;
  --accent:    #2f6fed;
  --accent-2:  #1f5bd7;
  --accent-bg: #eaf1fe;
  --accent-bd: #b9d0fb;
  --ok:        #17914a;
  --ok-bg:     #e7f6ec;
  --ok-bd:     #b7e3c6;
  --warn:      #c47b00;
  --warn-bg:   #fdf3e2;
  --warn-bd:   #f0d9a8;
  --err:       #d92d20;
  --shadow:    0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.05);
  --side-w:    272px;
  --fs:        16px;
}
html[data-theme="dark"] {
  --bg:        #16191d;
  --bg-soft:   #1c2025;
  --bg-sunken: #23282f;
  --bg-hover:  #272d35;
  --line:      #2c333c;
  --line-2:    #3a424d;
  --fg:        #e8edf3;
  --fg-2:      #a8b2bf;
  --fg-3:      #6f7b89;
  --accent:    #4a8cff;
  --accent-2:  #3d7ae8;
  --accent-bg: #1e2c46;
  --accent-bd: #2f4570;
  --ok:        #3fbf6b;
  --ok-bg:     #17301f;
  --ok-bd:     #24512f;
  --warn:      #e0a33a;
  --warn-bg:   #2e2718;
  --warn-bd:   #4a3d20;
  --err:       #f4614f;
  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }
html, body {
  height: 100%; margin: 0; padding: 0; overflow: hidden;
  background: var(--bg); color: var(--fg); font-size: var(--fs);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.muted  { color: var(--fg-3); font-size: .82em; }
.err    { color: var(--err); font-size: .85em; min-height: 1.2em; margin-top: 8px; }

/* ═══════ 登录 ═══════ */
.login-wrap {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); padding: 20px; overflow: auto;
}
.login-card {
  width: 100%; max-width: 380px; padding: 34px 30px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
}
.logo {
  width: 50px; height: 50px; border-radius: 14px; margin-bottom: 18px;
  background: linear-gradient(135deg, #2f6fed, #7c3aed);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 15px;
}
.login-card h1 { font-size: 1.3em; margin: 0 0 6px; }
.sub { color: var(--fg-3); font-size: .8em; margin: 0 0 22px; line-height: 1.6; }
.login-card label { display: block; margin-bottom: 14px; font-size: .82em; color: var(--fg-2); }
.login-card input {
  display: block; width: 100%; margin-top: 6px; padding: 11px 13px;
  border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--bg); color: var(--fg); font-size: .95em; font-family: inherit;
}
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-card button {
  width: 100%; padding: 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 1em; font-weight: 600; font-family: inherit;
}
.login-card button:disabled { opacity: .55; cursor: default; }
.hint { color: var(--fg-3); font-size: .76em; text-align: center; margin: 18px 0 0; }

/* ═══════ 主框架（绝对定位，不依赖 Grid）═══════ */
.app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: block; }

.side {
  position: absolute; top: 0; left: 0; bottom: 0; width: var(--side-w);
  display: flex; flex-direction: column;
  background: var(--bg-soft); border-right: 1px solid var(--line);
  overflow: hidden; z-index: 10;
}
.main {
  position: absolute; top: 0; right: 0; bottom: 0; left: var(--side-w);
  display: flex; flex-direction: column;
  background: var(--bg); overflow: hidden;
}
.app.with-panel .main { right: 400px; }
.panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 400px;
  display: flex; flex-direction: column;
  background: var(--bg-soft); border-left: 1px solid var(--line); z-index: 12;
}

/* ═══════ 左栏 品牌头 ═══════ */
.side-brand {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 13px 12px 8px;
}
.brand-mark {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, #2f6fed, #7c3aed);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 9.5px; letter-spacing: .5px;
}
.brand-name {
  flex: 1 1 auto; min-width: 0; font-size: .92em; font-weight: 750;
  letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(90deg, #2f6fed, #7c3aed);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.side-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 0 12px 10px; }
.logo-sm {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(135deg, #2f6fed, #7c3aed);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 10px;
}
.who { flex: 1 1 auto; min-width: 0; }
.who > div:first-child { font-size: .9em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who > div:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon {
  flex: 0 0 auto; background: none; border: 0; color: var(--fg-3); cursor: pointer;
  padding: 5px 7px; border-radius: 7px; font-size: .74em; font-family: inherit;
}
.icon:hover { background: var(--bg-hover); color: var(--fg); }

.sw-label {
  flex: 0 0 auto; font-size: .68em; color: var(--fg-3); letter-spacing: .09em;
  font-weight: 600; margin: 0 0 6px 4px; text-transform: uppercase;
}
.side-sec { flex: 0 0 auto; padding: 8px 10px 2px; }
.side-sec.grow { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 6px; }
#companyList, #agentList { flex: 0 0 auto; }

.co {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 9px; cursor: pointer; font-size: .86em;
  border: 1px solid transparent; white-space: nowrap; overflow: hidden;
}
.co:hover { background: var(--bg-hover); }
.co.active { background: var(--accent-bg); border-color: var(--accent-bd); color: var(--accent); font-weight: 600; }
.co .dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.co.active .dot { background: var(--accent); }
.co .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.ag {
  padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: .84em;
  color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ag:hover { background: var(--bg-hover); color: var(--fg); }
.ag.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }

.conv-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
details.conv-group { margin-bottom: 2px; }
details.conv-group > summary {
  list-style: none; cursor: pointer; padding: 6px 8px; border-radius: 7px;
  font-size: .78em; color: var(--fg-2); font-weight: 600;
  display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden;
}
details.conv-group > summary::-webkit-details-marker { display: none; }
details.conv-group > summary::before { content: '▸'; color: var(--fg-3); font-size: .85em; }
details.conv-group[open] > summary::before { content: '▾'; }
details.conv-group > summary:hover { background: var(--bg-hover); }
details.conv-group > summary .lb { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
details.conv-group > summary .cnt {
  flex: 0 0 auto; font-size: .9em; color: var(--fg-3);
  background: var(--bg-sunken); padding: 0 6px; border-radius: 8px; font-weight: 400;
}
.cv {
  padding: 6px 10px 6px 18px; border-radius: 7px; cursor: pointer;
  font-size: .78em; color: var(--fg-2); display: flex; align-items: center; gap: 6px;
}
.cv:hover { background: var(--bg-hover); color: var(--fg); }
.cv.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.cv .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv .ago { flex: 0 0 auto; font-size: .85em; color: var(--fg-3); }
.new-chat {
  flex: 0 0 auto; margin: 6px 10px 12px; padding: 10px; border-radius: 10px;
  border: 1px dashed var(--line-2); background: none; color: var(--fg-2);
  cursor: pointer; font-size: .84em; font-family: inherit;
}
.new-chat:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

/* ═══════ 主区 ═══════ */
.topbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-bottom: 1px solid var(--line);
  background: var(--bg); min-height: 54px;
}
.tb-title { flex: 1 1 auto; min-width: 0; }
.chat-title { font-size: .94em; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatSub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }
.ghost {
  background: none; border: 1px solid var(--line-2); color: var(--fg-2);
  padding: 6px 11px; border-radius: 8px; cursor: pointer;
  font-size: .78em; font-family: inherit; white-space: nowrap;
}
.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* 消息区：唯一滚动的地方 */
.msgs {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 18px;
}
.msgs .inner { display: flex; flex-direction: column; gap: 15px; }
.empty { text-align: center; color: var(--fg-3); padding: 10vh 12px 0; }
.empty-logo {
  width: 52px; height: 52px; border-radius: 15px; margin: 0 auto 14px;
  background: linear-gradient(135deg, #2f6fed, #7c3aed);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 13px;
}
.empty p { margin: 5px 0; }

.msg { display: flex; gap: 10px; max-width: 860px; }
.msg.user { margin-left: auto; flex-direction: row-reverse; }
.msg > div:last-child { min-width: 0; }
.av {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .62em; font-weight: 700; color: #fff;
}
.msg.user .av { background: var(--accent); }
.msg.ai   .av { background: linear-gradient(135deg, #7c3aed, #2f6fed); }
.bub {
  padding: 11px 14px; border-radius: 14px; font-size: .92em;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.msg.user .bub { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg.ai .bub { background: var(--bg-soft); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg .meta { font-size: .72em; color: var(--fg-3); margin-top: 5px; }
.bub code {
  font-family: ui-monospace, Consolas, monospace; font-size: .93em;
  background: var(--bg-sunken); padding: 1px 5px; border-radius: 4px;
}
.bub pre {
  display: block; padding: 10px; margin: 8px 0; border-radius: 8px;
  background: var(--bg-sunken); overflow-x: auto; white-space: pre;
  font-family: ui-monospace, Consolas, monospace; font-size: .9em;
}
.bub table { border-collapse: collapse; margin: 9px 0; font-size: .94em; max-width: 100%; }
.bub th, .bub td { border: 1px solid var(--line-2); padding: 4px 9px; text-align: left; }
.bub th { background: var(--bg-sunken); font-weight: 600; }
.bub .h1 { font-size: 1.16em; font-weight: 700; margin: 14px 0 8px; }
.bub .h2 { font-size: 1.07em; font-weight: 700; margin: 13px 0 7px; }
.bub .h3 { font-size: 1em;    font-weight: 700; margin: 11px 0 6px; }
.bub .h4, .bub .h5, .bub .h6 { font-size: .96em; font-weight: 650; margin: 10px 0 5px; color: var(--fg-2); }
.bub hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.bub blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--line-2); color: var(--fg-2); background: var(--bg); }

.tools { margin-top: 8px; font-size: .74em; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-soft); overflow: hidden; }
.tools > summary { padding: 7px 11px; cursor: pointer; color: var(--fg-2); list-style: none; }
.tools > summary::-webkit-details-marker { display: none; }
.tools > summary::before { content: '▸ '; color: var(--fg-3); }
.tools[open] > summary::before { content: '▾ '; }
.tools .row { padding: 5px 11px; border-top: 1px dashed var(--line); color: var(--fg-3); display: flex; gap: 6px; align-items: baseline; }
.tools .row .n { flex: 0 0 auto; color: var(--accent); font-weight: 600; }
.tools .row.ok  .n { color: var(--ok); }
.tools .row.bad .n { color: var(--err); }
.tools .row .s { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.red { margin-top: 8px; padding: 7px 11px; border-radius: 8px; font-size: .76em; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-bd); }

.composer {
  flex: 0 0 auto; display: flex; gap: 9px; align-items: flex-end;
  padding: 11px 18px 7px; border-top: 1px solid var(--line); background: var(--bg);
}
.composer textarea {
  flex: 1 1 auto; min-width: 0; resize: none; max-height: 150px; min-height: 42px;
  padding: 10px 13px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--bg-soft); color: var(--fg); font: inherit; font-size: .9em;
}
.composer textarea:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.composer button {
  flex: 0 0 auto; padding: 10px 20px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent); color: #fff; font-size: .88em; font-weight: 600; font-family: inherit;
}
.composer button:disabled { opacity: .5; cursor: default; }
.status { flex: 0 0 auto; padding: 0 18px 8px; font-size: .74em; color: var(--fg-3); min-height: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.jump {
  position: absolute; left: 50%; margin-left: -55px;
  bottom: 84px; padding: 7px 15px; border-radius: 20px;
  border: 1px solid var(--line-2); background: var(--bg); color: var(--fg-2);
  cursor: pointer; font-size: .78em; box-shadow: var(--shadow); font-family: inherit; z-index: 5;
}

/* 右侧面板 */
.panel-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 15px; border-bottom: 1px solid var(--line); font-size: .88em; font-weight: 650;
}
.panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 13px 15px; }
.tabs { display: flex; gap: 5px; margin-bottom: 13px; }
.tab {
  padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line-2);
  background: none; color: var(--fg-2); cursor: pointer; font-size: .78em; font-family: inherit;
}
.tab.active { background: var(--accent-bg); border-color: var(--accent-bd); color: var(--accent); font-weight: 600; }
.row { display: flex; gap: 7px; margin-bottom: 11px; }
.row input {
  flex: 1 1 auto; min-width: 0; padding: 8px 11px; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--bg); color: var(--fg); font: inherit; font-size: .82em;
}
.row button {
  flex: 0 0 auto; padding: 8px 14px; border: 0; border-radius: 9px;
  background: var(--accent); color: #fff; cursor: pointer; font-size: .82em; font-family: inherit;
}
.kb-doc, .kb-res {
  padding: 9px 11px; border-radius: 9px; background: var(--bg);
  border: 1px solid var(--line); margin-bottom: 7px; font-size: .8em;
}
.kb-doc .t, .kb-res .t { font-weight: 600; margin-bottom: 3px; }
.kb-doc .s { color: var(--fg-3); font-size: .9em; }
.kb-res .c { color: var(--fg-2); font-size: .94em; white-space: pre-wrap; max-height: 150px; overflow-y: auto; }

/* ═══════ 窄屏 <=900px：左栏变抽屉 ═══════ */
@media (max-width: 900px) {
  :root { --side-w: 0px; }
  .side {
    width: 282px; z-index: 40;
    -webkit-transform: translateX(-100%); transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: var(--shadow);
  }
  .side.open { -webkit-transform: translateX(0); transform: translateX(0); }
  .main { left: 0; }
  .app.with-panel .main { right: 0; }
  .panel { width: 100%; max-width: 460px; z-index: 41; }
  .topbar { padding: 8px 12px; min-height: 48px; gap: 6px; }
  .chat-title { font-size: .86em; }
  #chatSub { display: none; }
  .ghost { padding: 5px 8px; font-size: .72em; }
  #kbBtn { display: none; }
  .msgs { padding: 12px; }
  .msgs .inner { gap: 12px; }
  .bub { font-size: .88em; padding: 9px 12px; }
  .composer { padding: 8px 12px 4px; gap: 6px; }
  .composer textarea { font-size: .85em; padding: 9px 11px; }
  .composer button { padding: 9px 15px; font-size: .82em; }
  .status { padding: 0 12px 6px; font-size: .7em; }
  .msg { max-width: 100%; }
  .bub table { font-size: .86em; }
  .bub th, .bub td { padding: 3px 6px; }
  .jump { bottom: 74px; }
}


/* ═══════ 公司主题色（显著区分）═══════ */
.co[data-co="xlf"]  .dot { background: #2f6fed; }
.co[data-co="mlcy"] .dot { background: #8b5cf6; }
.co[data-co="mzq"]  .dot { background: #0f9b8e; }
.co[data-co="group"].dot, .co[data-co="group"] .dot { background: #6b7280; }

.co[data-co="xlf"].active  { background: #eaf1fe; border-color: #b9d0fb; color: #1f5bd7; }
.co[data-co="mlcy"].active { background: #f3ecfe; border-color: #d7c4fb; color: #6d28d9; }
.co[data-co="mzq"].active  { background: #e6f7f5; border-color: #b3e3dd; color: #0b7a70; }
html[data-theme="dark"] .co[data-co="xlf"].active  { background:#1b2a46; border-color:#2f4570; color:#7fb0ff; }
html[data-theme="dark"] .co[data-co="mlcy"].active { background:#2a1f44; border-color:#4c3576; color:#c4a6ff; }
html[data-theme="dark"] .co[data-co="mzq"].active  { background:#12302d; border-color:#1f5350; color:#5fd6c8; }

.co[data-co="xlf"]  .nm { color: #1f5bd7; }
.co[data-co="mlcy"] .nm { color: #6d28d9; }
.co[data-co="mzq"]  .nm { color: #0b7a70; }
html[data-theme="dark"] .co[data-co="xlf"]  .nm { color: #7fb0ff; }
html[data-theme="dark"] .co[data-co="mlcy"] .nm { color: #c4a6ff; }
html[data-theme="dark"] .co[data-co="mzq"]  .nm { color: #5fd6c8; }

/* 会话分组：按公司上色 + 左侧色条 */
details.conv-group { border-left: 3px solid transparent; padding-left: 3px; border-radius: 4px; }
details.conv-group[data-co="xlf"]  { border-left-color: #2f6fed; }
details.conv-group[data-co="mlcy"] { border-left-color: #8b5cf6; }
details.conv-group[data-co="mzq"]  { border-left-color: #0f9b8e; }
details.conv-group[data-co="group"]{ border-left-color: #9aa3af; }
details.conv-group[data-co="xlf"]  > summary { color: #1f5bd7; }
details.conv-group[data-co="mlcy"] > summary { color: #6d28d9; }
details.conv-group[data-co="mzq"]  > summary { color: #0b7a70; }
html[data-theme="dark"] details.conv-group[data-co="xlf"]  > summary { color: #7fb0ff; }
html[data-theme="dark"] details.conv-group[data-co="mlcy"] > summary { color: #c4a6ff; }
html[data-theme="dark"] details.conv-group[data-co="mzq"]  > summary { color: #5fd6c8; }

/* 侧栏底部链接 */
.side-foot { flex: 0 0 auto; padding: 4px 10px 0; }
.side-link {
  display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none;
  color: var(--fg-2); font-size: .82em; border: 1px solid var(--line);
  background: var(--bg);
}
.side-link:hover { border-color: var(--accent); color: var(--accent); }