/* work：工作台外壳（空状态 / 头部 / 标签页）。对话、终端、文件各自独立文件。 */

/* ---- 空状态：盒仔 + 「开箱，即用。」 ---- */
.empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--muted); gap: 8px;
  text-align: center; padding: 20px;
}
.mascot-empty { width: 176px; }
.empty-title {
  margin: 8px 0 0;
  font-size: 30px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--text);
}
.empty-sub { margin: 0; font-size: 13.5px; line-height: 2; }
.empty-cta { margin-top: 12px; padding: 9px 26px; }
.empty-ready {
  margin-top: 26px;
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.2em;
}
.empty-brands { display: flex; gap: 8px; letter-spacing: normal; }
.brand-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  font-size: 12px; color: var(--text);
}
@media (max-width: 760px) {
  .mascot-empty { width: 136px; }
  .empty-title { font-size: 24px; }
  .empty-sub { font-size: 12.5px; }
}

/* ---- 工作台 ---- */
/* isolation：把内部所有 z-index 关进本层，让生命周期遮罩能盖住各标签页内部的
 * 绝对定位元素（终端叠层、文件/对话浮层等），又不影响顶栏与抽屉。 */
.workbench { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; isolation: isolate; }
.wb-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--line);
  /* 抬到遮罩之上并铺底色：启动/停止时头部按钮仍露在毛玻璃上方 */
  position: relative; z-index: 51; background: var(--bg);
}
.wb-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wb-avatar { display: inline-flex; flex: none; }
.wb-title h1 {
  margin: 0; font-size: 16px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.wb-actions { display: flex; gap: 8px; flex: none; }

.tabs {
  display: flex; gap: 2px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}
.tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: none; border: none;
  color: var(--muted);
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em;
}
.tab-ic { flex: none; opacity: 0.75; transition: opacity 0.15s; }
.tab:hover { color: var(--text); }
.tab:hover .tab-ic { opacity: 1; }
.tab.active { color: var(--amber); border-bottom-color: var(--amber); }
.tab.active .tab-ic { opacity: 1; }

.pane { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }

/* ---- 生命周期遮罩：启动/停止时罩住工作区（头部按钮以下、不含侧栏）---- *
 * 灰黑毛玻璃打底，卡片按动作点缀绿/红（--busy）。窄屏头部并入顶栏，遮罩即
 * 覆盖顶栏以下全部，正好给「点了停止但界面没动静」补上明确反馈。 */
.wb-busy {
  --busy: var(--muted); /* 兜底，实际由 .start/.stop 覆盖成绿/红 */
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 14, 20, 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.wb-busy.show { opacity: 1; visibility: visible; pointer-events: auto; }
.wb-busy.start { --busy: var(--green); }
.wb-busy.stop { --busy: var(--red); }

.wb-busy-card {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 26px 40px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--busy) 45%, transparent);
  box-shadow: var(--shadow-lg), 0 0 44px -10px color-mix(in srgb, var(--busy) 55%, transparent);
  transform: translateY(8px) scale(0.97); opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.wb-busy.show .wb-busy-card { transform: none; opacity: 1; }

.wb-busy-spin {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--busy) 22%, transparent);
  border-top-color: var(--busy);
  animation: rot 0.8s linear infinite;
}
.wb-busy-text {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em;
  color: var(--busy);
}
/* 尾随省略号：steps 逐帧点出 . .. …，配合转圈让文字也有动静 */
.wb-busy-dots::after {
  content: ""; display: inline-block; width: 1.4em; text-align: left;
  animation: wb-dots 1.4s steps(1) infinite;
}
@keyframes wb-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "…"; } }

@media (prefers-reduced-motion: reduce) {
  .wb-busy, .wb-busy-card { transition: none; }
  .wb-busy-spin { animation: none; }
  .wb-busy-dots::after { animation: none; content: "…"; }
}

/* ---- 窄屏：头部并入顶栏（状态灯+会话名+⋯菜单），标签等宽三段 ---- */
@media (max-width: 760px) {
  .wb-head { display: none; }
  .tabs { padding: 0; gap: 0; }
  .tab { flex: 1; padding: 0; height: 44px; }
}

/* ---- 变更（Git 审查）页 ---- */
.changes-bar {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  padding: 10px 20px; border-bottom: 1px solid var(--line);
}
.changes-repo {
  flex-shrink: 0; max-width: 260px; font-size: 12px; padding: 4px 8px;
}
.changes-remote-state {
  flex: none; padding: 8px 20px; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 12px; line-height: 1.6;
  white-space: pre-line; overflow-wrap: anywhere; max-height: 140px; overflow-y: auto;
}
.changes-branch {
  color: var(--muted); font-size: 12px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.changes-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.changes-body { flex: 1; min-height: 0; display: flex; }
.changes-list {
  width: 300px; flex-shrink: 0; overflow-y: auto;
  border-right: 1px solid var(--line); padding: 6px;
}
.changes-view { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.changes-view-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 14px; border-bottom: 1px solid var(--line);
}
#changes-view-path {
  flex: 1; min-width: 0; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.changes-view-tabs {
  display: flex; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 7px; overflow: hidden;
}
.changes-view-tabs .seg {
  padding: 5px 10px; min-height: 32px; font-size: 12px;
  background: var(--panel); color: var(--muted); border: 0; cursor: pointer;
}
.changes-view-tabs .seg + .seg { border-left: 1px solid var(--line); }
.changes-view-tabs .seg.active { background: var(--panel-2); color: var(--text); font-weight: 600; }
.changes-view-tabs .seg:disabled { opacity: .45; cursor: default; }
.changes-diff { flex: 1; min-height: 0; min-width: 0; overflow: auto; padding: 8px 14px; }
.changes-diff .filetext { margin: 0; font-size: 12.5px; line-height: 1.55; white-space: pre; color: var(--text); }
.change-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 7px; cursor: pointer;
}
.change-row:hover { background: var(--panel-2); }
.change-row.active { background: var(--panel-2); outline: 1px solid var(--line); }
.change-badge {
  flex-shrink: 0; font-size: 11px; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--line);
}
.change-badge.k-add { color: #3fb950; border-color: color-mix(in srgb, #3fb950 45%, transparent); }
.change-badge.k-del { color: var(--red); border-color: var(--red-line); }
.change-badge.k-mod { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.change-badge.k-ren { color: var(--muted); }
.change-path {
  flex: 1; min-width: 0; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.change-discard {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  flex-shrink: 0; border: none; background: none; color: var(--muted);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 5px;
}
.change-discard:hover { color: var(--red); background: var(--panel); }
.changes-diff .diff { margin: 0; font-size: 12.5px; line-height: 1.55; white-space: pre; }
.diff span { display: block; }
.diff .d-add { color: #3fb950; background: color-mix(in srgb, #3fb950 12%, transparent); }
.diff .d-del { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.diff .d-hunk { color: #6ea8fe; }
.diff .d-meta { color: var(--muted); }
.diff .d-ctx { color: var(--text); }

@media (max-width: 760px) {
  .changes-body { flex-direction: column; }
  .changes-list {
    width: auto; max-height: 42%;
    border-right: none; border-bottom: 1px solid var(--line);
  }
}

/* ---- 技能页 ---- */
.skills-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px; border-bottom: 1px solid var(--line);
}
.skills-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.skills-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.skills-actions { display: flex; gap: 8px; }
.skills-body { flex: 1; min-height: 0; display: flex; }
.skills-list {
  width: 300px; flex-shrink: 0; overflow-y: auto;
  border-right: 1px solid var(--line); padding: 6px;
}
.skills-detail { flex: 1; min-width: 0; overflow: auto; padding: 14px 18px; }

/* 左侧是一棵树：技能行（带描述）在 depth 0，下面是技能目录里的子目录与文件 */
.skill-row {
  padding: 8px; padding-left: calc(8px + var(--depth, 0) * 14px);
  border-radius: 7px; cursor: pointer;
}
.skill-row:hover { background: var(--panel-2); }
.skill-row.active { background: var(--panel-2); outline: 1px solid var(--line); }
.skill-row.is-dir, .skill-row.is-file { padding-top: 4px; padding-bottom: 4px; }
.skill-row.is-dir .skill-name { color: var(--amber); }
.skill-main { display: flex; align-items: center; gap: 7px; min-width: 0; }
.skill-name {
  font-size: 13px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.skill-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 14px; text-align: center; color: var(--muted);
  user-select: none; transition: transform 0.15s ease, color 0.15s ease;
}
.skill-arrow:hover { color: var(--amber); }
.skill-arrow.open { transform: rotate(90deg); color: var(--amber); }
/* 展开加载中：箭头原地换成小转圈 */
.skill-arrow.busy {
  transform: none; cursor: progress;
  display: inline-flex; align-items: center; justify-content: center;
}
.skill-arrow .spin { width: 9px; height: 9px; border-width: 2px; }
.skill-glyph { flex: none; width: 14px; text-align: center; color: var(--muted); font-size: 12px; }
.skill-size { flex: none; margin-left: auto; color: var(--muted); font-size: 11px; }
.skill-flag {
  flex: none; font-size: 10px; padding: 0 4px; border-radius: 4px;
  border: 1px solid var(--line); color: var(--muted);
}
.skill-hint { cursor: default; color: var(--muted); font-size: 12px; }
.skill-hint:hover { background: none; }
.skill-badge {
  flex-shrink: 0; font-size: 11px; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--line); color: var(--muted);
}
.skill-badge.s-template { color: #6ea8fe; border-color: color-mix(in srgb, #6ea8fe 45%, transparent); }
.skill-badge.s-global { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.skill-desc {
  margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.skill-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; }
/* 看单个文件时的返回链接：回到技能概览（那儿才有复制/删除按钮） */
.skill-back {
  display: inline-flex; margin-bottom: 8px; padding: 4px 0;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 12px;
}
.skill-back:hover { color: var(--amber); }
.skill-title { margin: 0; font-size: 15px; }
.skill-head-desc { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.skill-meta { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.skill-source { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.skill-head-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.skill-doc-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.skill-doc-label { color: var(--muted); font-size: 12px; }
.skill-md {
  margin: 0; font-size: 12.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
/* 预览模式借用对话的 Markdown 样式（.msg agent），这里只调正文字号 */
.skill-view.msg { font-size: 14px; }
.skill-fm { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.skill-fm-item {
  font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px; padding: 1.5px 7px;
}
/* assets/ 里的图标之类：直接内联出来，别让用户为了看一眼去下载 */
.skill-img {
  max-width: 100%; border-radius: 8px;
  background: repeating-conic-gradient(var(--panel-2) 0 25%, transparent 0 50%) 0 0 / 16px 16px;
}

@media (max-width: 760px) {
  .skills-body { flex-direction: column; }
  .skills-list {
    width: auto; max-height: 42%;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .skills-bar { padding: 10px 14px; }
  .skills-left { flex: 1 0 100%; }
  .skills-actions { margin-left: auto; }
}