/* ============================================================
   WorkBuddy Web — 深色主题 / 三断点 / 安全区 / 移动优先
   设计令牌取自 WorkBuddy 客户端真实值
   ============================================================ */

:root {
  --bg-content:#1a1a1a;  --bg-primary:#1f1f1f;  --bg-secondary:#292929;
  --bg-tertiary:#242424; --bg-elevated:#3c3c3c; --bg-selected:#272b2b;
  --border-primary:#262626; --border-solid:#3d3d3d;
  --text-primary:#fff; --text-secondary:#ffffffa6; --text-tertiary:#ffffff80;
  --text-placeholder:#727882;
  --brand-7:#40d1b3; --brand-8:#00c29a; --brand-9:#009273;
  --link:#46a8f0; --green-6:#47cf84; --orange-7:#ff8420; --red-7:#e85c5c;
  --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-xl:14px;

  --font: -apple-system, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei",
          "Segoe UI", Inter, system-ui, sans-serif;
  --mono: "SF Mono", Consolas, "Cascadia Mono", Menlo, monospace;

  --app-h: 100dvh;          /* 由 visualViewport 实时覆盖，处理键盘弹起 */
  --vv-top: 0px;
  --tab-h: 0px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--bg-content);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  overscroll-behavior: none;
}
body { overflow: hidden; }

button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
.mono { font-family: var(--mono); }
[hidden] { display: none !important; }

/* ---------------- 登录 ---------------- */
.login-wrap {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: calc(24px + var(--safe-t)) 20px calc(24px + var(--safe-b));
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(64,209,179,.13), transparent 60%),
    var(--bg-content);
}
.login-card {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 24px 22px;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.login-card .logo { display: flex; justify-content: center; margin-bottom: 2px; }
.login-card h1 { margin: 0; font-size: 22px; font-weight: 600; text-align: center; letter-spacing: .3px; }
.login-sub { margin: -8px 0 6px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; color: var(--text-tertiary); }
.field input {
  height: 46px; padding: 0 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color .15s, background .15s;
}
.field input:focus { border-color: var(--brand-8); background: #202020; }
.btn-primary {
  height: 46px; margin-top: 4px;
  background: var(--brand-8); color: #06231d;
  font-weight: 600; border-radius: var(--radius-md);
  transition: background .15s, transform .06s;
}
.btn-primary:hover { background: var(--brand-7); }
.btn-primary:active { transform: scale(.985); }
.btn-primary[disabled] { opacity: .5; pointer-events: none; }
.login-err {
  margin: 0; padding: 9px 11px;
  background: rgba(232,92,92,.12);
  border: 1px solid rgba(232,92,92,.35);
  color: #ff9b9b; border-radius: var(--radius-md); font-size: 13px;
}
.login-demo { text-align: center; font-size: 12px; color: var(--text-placeholder); text-decoration: none; }
.login-demo:hover { color: var(--link); }

/* ---------------- 布局骨架 ---------------- */
#app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--app-h);
  height: var(--app-h);
  margin-top: var(--vv-top);
  overflow: hidden;
}

#sidebar, #rightpanel { display: none; }

#main {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: var(--bg-content);
  overflow: hidden;
}

/* ---------------- 顶栏 ---------------- */
#topbar {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  height: 52px;
  padding: 0 12px;
  padding-top: var(--safe-t);
  height: calc(52px + var(--safe-t));
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-primary);
}
.icon-btn {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--text-secondary);
  border-radius: var(--radius-md);
}
.icon-btn:active { background: var(--bg-secondary); }
.tb-mid { flex: 1; min-width: 0; }
.tb-title {
  font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-sub {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden;
}
.tb-sep { opacity: .5; }
.tb-model { overflow: hidden; text-overflow: ellipsis; }
.phase { color: var(--brand-7); }
.phase.busy { color: var(--orange-7); }
.status-light {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--text-placeholder);
  box-shadow: 0 0 0 3px rgba(114,120,130,.15);
}
.status-light.on  { background: var(--green-6); box-shadow: 0 0 0 3px rgba(71,207,132,.18); }
.status-light.busy{ background: var(--orange-7); box-shadow: 0 0 0 3px rgba(255,132,32,.18); animation: pulse 1.4s infinite; }
.status-light.off { background: var(--red-7); box-shadow: 0 0 0 3px rgba(232,92,92,.18); }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------------- 消息流 ---------------- */
.stream {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 16px 12px 8px;
  display: flex; flex-direction: column; gap: 14px;
  scroll-behavior: smooth;
}
.stream:empty::after {
  content: "开始一段新对话吧";
  display: block; margin: auto; color: var(--text-placeholder); font-size: 13px;
}

.msg { display: flex; flex-direction: column; max-width: 100%; }
.msg-user { align-items: flex-end; }
.msg-user .bubble {
  max-width: 86%;
  padding: 9px 13px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
  color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word;
}
.msg-assistant .bubble {
  padding: 0 2px;
  color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word;
}
.msg-assistant .bubble .txt { display: inline; }
.cursor {
  display: inline-block; width: 7px; height: 15px;
  margin-left: 2px; vertical-align: -2px;
  background: var(--brand-7); border-radius: 1px;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.bubble .code {
  margin: 8px 0; padding: 10px 12px;
  background: #141414; border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
  white-space: pre; overflow-x: auto;
}
.bubble code.inline {
  padding: 1px 5px; border-radius: var(--radius-sm);
  background: var(--bg-secondary); font-family: var(--mono); font-size: 12.5px;
}

/* 思考块 */
.msg-thought { width: 100%; }
.thought-card {
  border: 1px solid var(--border-primary);
  border-left: 2px solid #4a4a4a;
  border-radius: var(--radius-md);
  background: #171717;
  overflow: hidden;
}
.thought-head {
  display: flex; align-items: center; gap: 7px;
  width: 100%; min-height: 34px; padding: 6px 11px;
  color: var(--text-placeholder); font-size: 12.5px; text-align: left;
}
.thought-ico { color: #8a8a8a; }
.thought-label { flex: 1; }
.thought-caret { transition: transform .15s; font-size: 10px; }
.thought-card.open .thought-caret { transform: rotate(180deg); }
.thought-body {
  display: none;
  padding: 0 12px 10px;
  color: var(--text-tertiary); font-size: 13px;
  white-space: pre-wrap; word-break: break-word;
}
.thought-card.open .thought-body { display: block; }
.msg-thought.streaming .thought-label { color: var(--text-tertiary); }

/* ---------------- 工具卡片 ---------------- */
.tool-card {
  width: 100%;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  overflow: hidden;
  transition: border-color .15s;
}
.tool-card.open { border-color: var(--border-solid); }
.tool-card.failed { border-color: rgba(232,92,92,.45); }
.tool-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 46px; padding: 8px 12px;
  text-align: left;
}
.tool-ico {
  flex: none; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-secondary); color: var(--brand-7);
  border-radius: var(--radius-sm); font-size: 12px;
}
.tool-title {
  flex: 1; min-width: 0;
  font-size: 13.5px; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tool-kind {
  flex: none; padding: 1px 6px;
  font-size: 10.5px; color: var(--text-placeholder);
  background: var(--bg-secondary); border-radius: var(--radius-sm);
}
.tool-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-placeholder); }
.tool-dot.s-pending   { background: var(--text-placeholder); }
.tool-dot.s-running   { background: var(--orange-7); animation: pulse 1.2s infinite; }
.tool-dot.s-completed { background: var(--green-6); }
.tool-dot.s-failed    { background: var(--red-7); }
.tool-caret { flex: none; font-size: 10px; color: var(--text-placeholder); transition: transform .15s; }
.tool-card.open .tool-caret { transform: rotate(180deg); }

.tool-body {
  display: none;
  padding: 0 12px 12px;
  border-top: 1px solid var(--border-primary);
  padding-top: 10px;
}
.tool-card.open .tool-body { display: block; }
.tool-text {
  margin: 0; padding: 8px 10px;
  background: #141414; border-radius: var(--radius-md);
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap; word-break: break-word;
  max-height: 340px; overflow: auto;
}
.tool-text + .tool-text, .tool-text + .diff, .diff + .tool-text { margin-top: 8px; }
.tool-raw { margin: 0; font-family: var(--mono); font-size: 11.5px; color: var(--text-tertiary); white-space: pre-wrap; }
.tool-empty { color: var(--text-placeholder); font-size: 12.5px; padding: 4px 0; }
.tool-terminal {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: #141414; border-radius: var(--radius-md);
  font-family: var(--mono); font-size: 12px; color: var(--text-secondary);
}
.term-label { color: var(--brand-7); font-size: 11px; }
.term-hint { color: var(--text-placeholder); font-size: 11px; margin-left: auto; }
.tool-locs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tool-loc {
  padding: 3px 8px; min-height: 26px;
  background: var(--bg-secondary); border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: 11.5px; color: var(--link);
}
.tool-loc:hover { background: var(--bg-elevated); }

/* diff */
.diff { border: 1px solid var(--border-primary); border-radius: var(--radius-md); overflow: hidden; background: #141414; }
.diff-path {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-family: var(--mono); font-size: 11.5px;
  color: var(--text-tertiary); background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-primary);
}
.diff-ico { color: var(--brand-7); }
.diff-body { margin: 0; max-height: 320px; overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.dl { display: flex; white-space: pre; }
.dl-sign { flex: none; width: 18px; text-align: center; opacity: .75; user-select: none; }
.dl-txt { flex: 1; padding-right: 10px; }
.dl.add { background: rgba(71,207,132,.12); color: #b9f0cf; }
.dl.add .dl-sign { color: var(--green-6); }
.dl.del { background: rgba(232,92,92,.12); color: #ffc9c9; }
.dl.del .dl-sign { color: var(--red-7); }
.dl.ctx { color: var(--text-secondary); }
.diff-sum {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 4px 10px; font-family: var(--mono); font-size: 11px;
  background: var(--bg-tertiary); border-top: 1px solid var(--border-primary);
}
.diff-sum .add { color: var(--green-6); }
.diff-sum .del { color: var(--red-7); }

/* ---------------- 计划面板 ---------------- */
.plan-panel {
  flex: none;
  margin: 0 12px 8px;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  overflow: hidden;
}
.plan-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 40px; padding: 6px 12px; text-align: left;
}
.plan-ico { color: var(--brand-7); font-size: 13px; }
.plan-title { flex: 1; font-size: 13px; font-weight: 600; }
.plan-count { font-family: var(--mono); font-size: 11.5px; color: var(--text-tertiary); }
.plan-caret { font-size: 10px; color: var(--text-placeholder); transition: transform .15s; }
.plan-panel.open .plan-caret { transform: rotate(180deg); }
.plan-list { display: none; max-height: 30vh; overflow-y: auto; padding: 0 12px 10px; }
.plan-panel.open .plan-list { display: block; }
.plan-row { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 13px; }
.plan-st { flex: none; width: 14px; text-align: center; color: var(--text-placeholder); }
.plan-row.s-completed .plan-st { color: var(--green-6); }
.plan-row.s-completed .plan-txt { color: var(--text-tertiary); text-decoration: line-through; }
.plan-row.s-in_progress .plan-st { color: var(--orange-7); }
.plan-txt { flex: 1; color: var(--text-secondary); word-break: break-word; }
.plan-pri { flex: none; font-size: 10px; color: var(--text-placeholder); text-transform: uppercase; }

/* ---------------- 审批条 ---------------- */
.approval-bar {
  flex: none;
  margin: 0 12px 8px;
  padding: 11px 12px;
  background: rgba(255,132,32,.08);
  border: 1px solid rgba(255,132,32,.42);
  border-radius: var(--radius-lg);
  animation: slideUp .18s ease-out;
}
@keyframes slideUp { from { transform: translateY(8px); opacity: 0; } }
.ap-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.ap-ico {
  width: 18px; height: 18px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange-7); color: #1a1200;
  border-radius: 50%; font-size: 11px; font-weight: 700;
}
.ap-desc { margin: 6px 0 0; font-size: 12.5px; color: var(--text-secondary); white-space: pre-wrap; }
.ap-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ap-btn {
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--border-solid); border-radius: var(--radius-md);
  background: var(--bg-secondary); color: var(--text-primary); font-size: 13px;
}
.ap-btn.primary { background: var(--brand-8); border-color: var(--brand-8); color: #06231d; font-weight: 600; }
.ap-btn:active { transform: scale(.98); }

/* ---------------- 输入区 ---------------- */
.composer {
  position: relative;
  flex: none;
  padding: 8px 12px calc(8px + var(--safe-b));
  background: var(--bg-content);
  border-top: 1px solid var(--border-primary);
}
.composer-box {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 6px 6px 6px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-lg);
  transition: border-color .15s;
}
.composer-box:focus-within { border-color: var(--brand-9); }
#input {
  flex: 1; min-height: 44px; max-height: 30vh;
  padding: 11px 0;
  background: none; border: 0; outline: none; resize: none;
  color: var(--text-primary); font-size: 15px; line-height: 1.4;
  overflow-y: auto;
}
#input::placeholder { color: var(--text-placeholder); }
.send-btn {
  flex: none; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-8); color: #06231d;
  border-radius: var(--radius-md);
  transition: opacity .15s, transform .06s;
}
.send-btn[disabled] { opacity: .35; }
.send-btn:active { transform: scale(.94); }
.composer-hint { display: none; margin-top: 6px; font-size: 11px; color: var(--text-placeholder); text-align: center; }

.slash-pop {
  position: absolute;
  left: 12px; right: 12px; bottom: 100%;
  margin-bottom: 4px;
  max-height: 40vh; overflow-y: auto;
  background: var(--bg-primary);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  z-index: 30;
}
.slash-item { display: block; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; }
.slash-item:hover, .slash-item.sel { background: var(--bg-selected); }
.slash-name { font-family: var(--mono); font-size: 13px; color: var(--brand-7); }
.slash-desc { display: block; font-size: 11.5px; color: var(--text-tertiary); }

/* ---------------- 底部 Tab ---------------- */
.tabbar {
  flex: none;
  display: flex;
  padding-bottom: var(--safe-b);
  background: var(--bg-primary);
  border-top: 1px solid var(--border-primary);
}
.tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: 52px; padding: 6px 0;
  font-size: 10.5px; color: var(--text-placeholder);
}
.tab-ico { font-size: 17px; line-height: 1; }
.tab.active { color: var(--brand-7); }

/* ---------------- 侧栏（对齐桌面端：280px） ---------------- */
#sidebar {
  width: 280px;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-primary);
  overflow: hidden;
}

/* logo 行 64px */
.side-logo {
  flex: none;
  height: calc(64px + var(--safe-t));
  padding: 0 12px; padding-top: var(--safe-t);
  display: flex; align-items: center; justify-content: space-between;
}
.logo-name { font-size: 15px; font-weight: 600; letter-spacing: .2px; line-height: 1.3; }
.logo-ver { font-size: 11px; color: var(--text-placeholder); margin-top: 1px; }
.logo-right { display: flex; align-items: center; gap: 2px; flex: none; }
.side-ico-btn {
  width: 28px; height: 28px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary); font-size: 13px; line-height: 1;
}
.side-ico-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }

/* tabs：6 项，每项 34px */
.side-tabs { flex: none; padding: 0 12px 6px; display: flex; flex-direction: column; gap: 2px; }
.side-tab {
  height: 34px; width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  font-size: 13px; color: var(--text-secondary); text-align: left;
}
.side-tab:hover { background: var(--bg-secondary); color: var(--text-primary); }
.st-ic { flex: none; width: 16px; text-align: center; font-size: 13px; opacity: .9; }
.st-tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-beta {
  flex: none; height: 15px; line-height: 15px; padding: 0 4px;
  font-size: 9px; font-weight: 600; letter-spacing: .3px;
  color: var(--brand-7); background: rgba(64,209,179,.14);
  border-radius: 3px;
}

/* 列表区 */
.side-list {
  flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 8px;
  scrollbar-width: thin; scrollbar-color: #4a4a4a transparent;
}
.side-list::-webkit-scrollbar { width: 8px; }
.side-list::-webkit-scrollbar-track { background: transparent; }
.side-list::-webkit-scrollbar-thumb { background: #3d3d3d; border-radius: 4px; }
.side-list::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
.side-group + .side-group { margin-top: 4px; }

/* 分组标签 32px：任务 (N) / 空间 (N) */
.side-group-label {
  height: 32px; padding: 0 12px;
  display: flex; align-items: center; gap: 4px;
  font-size: 14px; color: rgba(255,255,255,.5);
  user-select: none; cursor: pointer;
}
.side-group-label:hover { color: var(--text-secondary); }
.gl-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-right { flex: none; display: flex; align-items: center; gap: 2px; }
.gl-caret { color: var(--text-placeholder); transition: transform .15s; }
.gl-caret.collapsed { transform: rotate(-90deg); }
.gl-btn {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-placeholder); font-size: 12px; line-height: 1;
}
.gl-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }

/* 会话项 255×34 */
.sess {
  width: calc(100% - 24px);
  height: 34px; margin: 0 12px;
  padding: 0 8px;
  display: flex; align-items: center;
  border-radius: var(--radius-md);
  text-align: left;
}
.sess:hover { background: var(--bg-secondary); }
.sess[data-selected="true"] { background: var(--bg-selected); }
.sess-h { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.sess-title {
  flex: 1; min-width: 0;
  font-size: 13px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sess:hover .sess-title,
.sess[data-selected="true"] .sess-title { color: var(--text-primary); }
.sess-time { flex: none; margin-left: 8px; font-size: 11px; color: var(--text-placeholder); }
.sess-spin { flex: none; margin-left: 8px; color: var(--brand-8); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* hover 才出现的"更多"，出现时让位给时间 */
.sess-more {
  display: none; flex: none;
  width: 18px; height: 18px; margin-left: 6px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-placeholder); font-size: 12px; line-height: 1;
}
.sess:hover .sess-more { display: flex; }
.sess:hover .sess-more:hover { background: var(--bg-elevated); color: var(--text-primary); }
.sess:hover .sess-time { display: none; }

/* 空间折叠头 34px，比会话项多缩进一级 */
.ws-head {
  height: 34px; padding: 0 8px 0 20px;
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-secondary);
  cursor: pointer; user-select: none;
}
.ws-head:hover { background: var(--bg-secondary); color: var(--text-primary); }
.ws-icon { flex: none; width: 16px; text-align: center; font-size: 12px; }
.ws-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-right { flex: none; display: none; align-items: center; gap: 2px; }
.ws-head:hover .ws-right { display: flex; }
.ws-act {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-placeholder); font-size: 12px; line-height: 1;
}
.ws-act:hover { background: var(--bg-elevated); color: var(--text-primary); }
.ws .sess { height: 32px; }

/* 查看更多 (N) */
.more-btn {
  height: 30px; margin: 2px 12px; padding: 0 8px;
  display: flex; align-items: center;
  border-radius: var(--radius-md);
  font-size: 12px; color: var(--text-placeholder);
}
.more-btn:hover { background: var(--bg-secondary); color: var(--text-secondary); }

/* footer 57px */
.side-foot {
  flex: none;
  height: calc(57px + var(--safe-b));
  padding: 0 12px calc(var(--safe-b));
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border-primary);
}
.foot-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.foot-avatar {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); font-size: 12px;
}
.foot-name {
  font-size: 13px; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.foot-acts { flex: none; display: flex; align-items: center; gap: 2px; }

.btn-ghost {
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border-solid); border-radius: var(--radius-md);
  color: var(--text-secondary); font-size: 13px;
}
.btn-ghost:hover { background: var(--bg-secondary); }
.btn-ghost.wide { width: 100%; margin-top: 12px; }

/* ---------------- 右侧面板 ---------------- */
#rightpanel {
  flex-direction: column;
  gap: 2px;
  padding: 0 14px calc(14px + var(--safe-b));
  background: var(--bg-primary);
  border-left: 1px solid var(--border-primary);
  overflow-y: auto;
}
.rp-head { padding: 18px 0 12px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.rp-section { padding: 10px 0; border-top: 1px solid var(--border-primary); }
.rp-section.grow { flex: 1; }
.rp-label { font-size: 11px; color: var(--text-placeholder); margin-bottom: 5px; }
.rp-value { font-size: 12.5px; color: var(--text-secondary); word-break: break-all; }
.sel {
  width: 100%; min-height: 38px; padding: 0 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-md);
  color: var(--text-primary); font-size: 13px;
  outline: none;
}

/* ---------------- 配置开关面板 ---------------- */
.cfg-title { margin: 18px 0 6px; }
.cfg-list { display: flex; flex-direction: column; gap: 8px; }
.cfg-row { display: flex; align-items: center; gap: 10px; min-height: 38px; }
.cfg-label { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-secondary); }
.cfg-sel { width: auto; min-width: 96px; }
.cfg-value { font-size: 12px; color: var(--text-tertiary); font-family: var(--mono); }
.cfg-check { width: 20px; height: 20px; accent-color: var(--brand-8); }

/* ---------------- 非对话视图 ---------------- */
.view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.view-head { padding: 14px 16px 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.view-body { flex: 1; overflow-y: auto; padding: 0 12px 16px; }
.empty-hint { padding: 24px 8px; color: var(--text-placeholder); font-size: 13px; text-align: center; }
.me-card {
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg); overflow: hidden;
}
.me-row { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--border-primary); }
.me-row:last-child { border-bottom: 0; }
.me-row > span { color: var(--text-tertiary); }
.me-row > b { font-weight: 500; }

/* ---------------- Toast / 下拉刷新 ---------------- */
.toast {
  position: fixed; left: 50%; bottom: calc(90px + var(--safe-b));
  transform: translateX(-50%);
  max-width: 88vw; padding: 10px 16px;
  background: var(--bg-elevated); color: var(--text-primary);
  border-radius: 999px; font-size: 13px;
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
  z-index: 90; animation: slideUp .16s ease-out;
}
.toast.err { background: rgba(232,92,92,.95); color: #fff; }
.pull {
  position: fixed; top: calc(12px + var(--safe-t)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bg-elevated); color: var(--text-secondary); font-size: 12px; z-index: 80;
}
.pull-spin { display: inline-block; }

.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 40; }

/* ============================================================
   断点
   ============================================================ */

/* 手机：侧栏变抽屉 */
@media (max-width: 767px) {
  #sidebar {
    display: flex;
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 280px; max-width: 86vw;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow: 8px 0 30px rgba(0,0,0,.5);
  }
  #sidebar.open { transform: none; }
  .only-mobile { display: flex; }
  #composer { padding-bottom: calc(8px + var(--safe-b)); }
}

/* 平板 768–1200：两栏 */
@media (min-width: 768px) {
  #app { grid-template-columns: 280px 1fr; }
  #sidebar { display: flex; position: static; transform: none; box-shadow: none; width: 280px; }
  .only-mobile { display: none !important; }
  #scrim { display: none !important; }
  .stream { padding: 20px 24px 10px; gap: 16px; }
  .plan-panel, .approval-bar { margin-left: 24px; margin-right: 24px; }
  .composer { padding: 10px 24px 14px; }
  .composer-hint { display: block; }
  .msg-user .bubble { max-width: 74%; }
}

/* 桌面 >1200：三栏 */
@media (min-width: 1201px) {
  #app { grid-template-columns: 280px 1fr 320px; }
  #rightpanel { display: flex; }
  .stream { padding: 24px 32px 12px; }
  .plan-panel, .approval-bar { margin-left: 32px; margin-right: 32px; }
  .composer { padding: 12px 32px 16px; }
  .msg-user .bubble { max-width: 66%; }
  .tabbar { display: none !important; }
}

/* 横屏矮屏：压缩留白 */
@media (max-height: 480px) {
  .composer-hint { display: none; }
  #topbar { height: calc(44px + var(--safe-t)); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}