/* ================================================================
   Sidebar — Brand, conversation list (time-grouped), user bar.
   ================================================================ */

/* === Brand area（兼作窗口拖拽区） === */
#sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-lg);
  -webkit-app-region: drag;
  user-select: none;
}

#sidebar-top button {
  -webkit-app-region: no-drag;
}

#sidebar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* === 宽度调节手柄（桌面端悬浮于侧栏右缘，hover 显现） === */
#sidebar-resizer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--sidebar-width);
  width: 12px;
  margin-left: -6px;
  cursor: col-resize;
  z-index: 30;
  -webkit-app-region: no-drag;
  touch-action: none;
}

/* 手柄胶囊：默认透明，悬浮 / 拖拽时显现 */
#sidebar-resizer::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 56px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: var(--text-tertiary);
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
  pointer-events: none;
}

#sidebar-resizer:hover::after {
  opacity: 0.55;
}

body.sidebar-resizing #sidebar-resizer::after {
  opacity: 1;
  background: var(--accent);
}

body.sidebar-resizing {
  user-select: none;
}

body.sidebar-resizing,
body.sidebar-resizing * {
  cursor: col-resize !important;
}

/* === New Chat button === */
.btn-new-chat {
  flex: 1;
  width: auto;
  min-width: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-l3);
  font-weight: 500;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.btn-new-chat:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.btn-new-chat:active {
  background: var(--surface-pressed);
}

/* 新建会话「+」：hover 旋转 90° */
.btn-new-chat:hover svg {
  transform: rotate(90deg);
}

.btn-kbd {
  font-size: 10px;
  color: var(--text-tertiary);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: auto;
  font-family: var(--font-sans);
  font-weight: 500;
}

/* === Conversation list === */
#conversation-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-sm);
}

/* Time group label */
.conv-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-md) var(--space-sm) var(--space-xs);
}

/* Conversation item（WinUI NavView 项：hover 浅底浮现 + 选中左侧指示条） */
.conv-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
  border-radius: var(--radius-md);
  margin-bottom: 2px;
}

.conv-item:hover {
  background-color: var(--surface-hover);
}

.conv-item:active {
  background-color: var(--surface-pressed);
}

.conv-item.active {
  background-color: var(--surface-hover);
}

.conv-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--accent);
  animation: nav-pill-in 180ms var(--ease-winui);
}

/* 生成中标识（多路并行：LLM 正在处理该会话）——
   底：常显 accent 微染；中：105° 流光带每 1.8s 从左缘外扫到右缘外；
   标题前：脉冲圆点给出明确的「忙」信号。纯 CSS 驱动，JS 只负责 conv-item--generating 类。 */
.conv-item--generating::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(105deg,
      transparent 38%,
      color-mix(in srgb, var(--accent) 22%, transparent) 47%,
      color-mix(in srgb, var(--accent) 22%, transparent) 53%,
      transparent 62%),
    linear-gradient(var(--accent-subtle), var(--accent-subtle));
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: conv-gen-sweep 1.8s ease-in-out infinite;
}

@keyframes conv-gen-sweep {
  0%   { background-position: 0% 0, 0 0; }
  100% { background-position: 100% 0, 0 0; }
}

.conv-item--generating .conv-item-title::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 2px;
  animation: conv-gen-dot 1.4s ease-in-out infinite;
}

@keyframes conv-gen-dot {
  0%, 100% { opacity: 0.35; transform: scale(0.7); }
  50%      { opacity: 1;    transform: scale(1); }
}

.conv-item-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  z-index: 1;
  transition: -webkit-mask-image var(--transition-fast), mask-image var(--transition-fast);
}

.conv-item-title {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-item-title.marquee {
  text-overflow: clip;
}

.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}

.marquee-seg {
  display: inline-block;
  white-space: nowrap;
  padding-right: 1.5em;
}

.conv-item.active .conv-item-title {
  color: var(--text-primary);
  font-weight: 600;
}

/* ═══ Inline Rename Input ═══ */

.conv-item-rename-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-primary);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  outline: none;
  padding: 4px 8px;
  margin: 0;
  line-height: 1.4;
  caret-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.conv-item-rename-input::selection {
  background: var(--accent-subtle);
}

.conv-item[data-renaming="true"] .conv-item-actions {
  opacity: 0 !important;
  pointer-events: none;
}

.conv-item-time {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* 时间 + 存储占用 行：时间居左，尺寸徽标居右（条目右下角） */
.conv-item-meta {
  display: flex;
  align-items: center;
  margin-top: 2px;
  position: relative;
}

.conv-item-meta .conv-item-time {
  margin-top: 0;
}

/* 模式名文本：meta 行内绝对居中（不受左右时间/尺寸宽度影响），
   配色与条目背景渐变同色系，无胶囊底 */
.conv-item-meta-tag {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.55;
}

.conv-item-meta-tag--research {
  color: #005A9E;
}

.conv-item-meta-tag--swarm {
  color: #5E3FA8;
}

:root[data-theme="dark"] .conv-item-meta-tag--research {
  color: #9CD1F5;
}

:root[data-theme="dark"] .conv-item-meta-tag--swarm {
  color: #CFB8F2;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .conv-item-meta-tag--research {
    color: #9CD1F5;
  }
  :root:not([data-theme="light"]) .conv-item-meta-tag--swarm {
    color: #CFB8F2;
  }
}

.conv-item-size {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  padding-left: var(--space-sm);
  white-space: nowrap;
}

/* 模式标识（深度研究 / 集群）：条目卡片背景自下而上的淡渐变（很淡但可见），
   常规会话无。用 background-image 而非 background 简写，
   使 hover/active/active 三态的 background-color 变化不冲掉渐变。 */
.conv-item--research {
  background-image: linear-gradient(to top, rgba(0, 122, 204, 0.06), rgba(0, 178, 190, 0));
}

.conv-item--swarm {
  background-image: linear-gradient(to top, rgba(124, 88, 196, 0.07), rgba(160, 110, 210, 0));
}

/* 深色主题：渐变底提亮保持可见 */
:root[data-theme="dark"] .conv-item--research {
  background-image: linear-gradient(to top, rgba(96, 180, 240, 0.11), rgba(90, 205, 215, 0));
}

:root[data-theme="dark"] .conv-item--swarm {
  background-image: linear-gradient(to top, rgba(168, 138, 226, 0.12), rgba(190, 140, 235, 0));
}

/* 跟随系统（未显式设置 data-theme 时） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .conv-item--research {
    background-image: linear-gradient(to top, rgba(96, 180, 240, 0.11), rgba(90, 205, 215, 0));
  }
  :root:not([data-theme="light"]) .conv-item--swarm {
    background-image: linear-gradient(to top, rgba(168, 138, 226, 0.12), rgba(190, 140, 235, 0));
  }
}

/* 悬停时文字右侧渐隐，为操作按钮让位。
   4 个按钮（加密锁/重命名/更多/删除）≈ 118px 宽：隐藏区按 px 计算，
   文字在按钮左缘前 36px 坡道内渐隐，按钮正下方完全隐藏（早期 40%/80%
   百分比版在加宽按钮组后右端遮不住，文字从按钮下透出）。 */
.conv-item:hover .conv-item-content,
.conv-item.active:hover .conv-item-content {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 152px), transparent calc(100% - 116px));
  mask-image: linear-gradient(to right, black calc(100% - 152px), transparent calc(100% - 116px));
}

/* 重命名时不渐隐 */
.conv-item[data-renaming="true"] .conv-item-content {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* 加密会话：标题行 = 小锁标 + 标题（保持单行省略/marquee） */
.conv-item-title-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.conv-item-title-row .conv-item-title {
  flex: 1;
  min-width: 0;
}

.conv-item-lock-badge {
  display: inline-flex;
  align-items: center;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* 加密锁按钮：加密态高亮 */
.conv-item-action--lock.is-encrypted {
  color: var(--accent);
}

/* Hover-reveal action buttons */
.conv-item-actions {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  z-index: 1;
  padding: 0 var(--space-sm);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.conv-item:hover .conv-item-actions {
  opacity: 1;
}

.conv-item-action {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border: none;
  transition: all var(--transition-fast);
}

.conv-item-action:hover {
  color: var(--accent);
  background: var(--accent-subtle);
}

.conv-item-action--danger:hover {
  color: var(--error);
  background: var(--error-bg);
}

.conv-item-action--accent {
  color: var(--accent);
}

/* === User bar (bottom) placeholder: footer icons are enough for now === */

/* ═══ Workspace（多工作区：footer 按钮 + 弹出列表 + 图标选择） ═══ */

/* 锚点容器：占 footer 左侧区域，弹出列表以它为定位基准向上弹出 */
#workspace-anchor {
  position: relative;
  margin-right: auto;
  min-width: 0;
}

#btn-workspace {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
  padding: 5px 10px;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}

#btn-workspace:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

#btn-workspace:active {
  transform: scale(0.96);
}

/* 无工作区时的纯创建入口：强调色文案 */
#btn-workspace.btn-workspace--create {
  color: var(--accent);
  font-weight: 500;
}

#btn-workspace.btn-workspace--create:hover {
  background: var(--accent-subtle);
}

.ws-btn-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.ws-btn-icon svg {
  width: 14px;
  height: 14px;
}

.ws-btn-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-btn-chevron {
  flex-shrink: 0;
  display: flex;
  color: var(--text-tertiary);
}

/* 弹出列表：从 footer 锚点向上弹出（showPopover/hidePopover 驱动 .popover-anim）。
   宽度对齐侧栏内容区（左右各让出 footer 的 16px 内边距），
   不随内容伸缩、不探出侧栏右缘，弹层右缘与 footer 视觉右缘齐平 */
#workspace-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: calc(var(--sidebar-width) - 32px);
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface-primary);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 4px;
  z-index: 60;
}

/* 顶部「新建工作区」行（仿 .model-add-btn） */
.workspace-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 4px;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  transition: background var(--transition-fast);
}

.workspace-add-btn:hover {
  background: var(--surface-secondary);
}

.workspace-add-btn svg {
  flex-shrink: 0;
}

/* 工作区行：icon + 名称 + hover 操作（固定行高，操作按钮绝对定位不撑行） */
.workspace-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-primary);
  text-align: left;
  transition: background var(--transition-fast);
}

.workspace-item:hover {
  background: var(--surface-secondary);
}

.workspace-item.active {
  background: var(--accent-subtle);
  color: var(--accent);
}

.ws-item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--text-secondary);
}

.workspace-item.active .ws-item-icon {
  color: var(--accent);
}

.ws-item-icon svg {
  width: 14px;
  height: 14px;
}

.ws-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 行内 hover 操作按钮（重命名 / 删除）：绝对定位叠在行右缘，不参与布局，
   避免 hover 出现时行高跳动；底色与行 hover 背景一致，遮住名称尾部 */
.ws-item-actions {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-left: 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.workspace-item.active .ws-item-actions {
  background: var(--accent-subtle);
}

.workspace-item:hover .ws-item-actions {
  visibility: visible;
  opacity: 1;
}

.ws-action {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ws-action:hover {
  color: var(--accent);
  background: var(--accent-subtle);
}

.ws-action--danger:hover {
  color: var(--error);
  background: var(--error-bg);
}

/* 创建 / 重命名弹层：表单区与图标 chip 行 */
.workspace-dialog-body {
  padding: 0 var(--space-xl);
}

.workspace-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workspace-icon-chip {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.workspace-icon-chip svg {
  width: 16px;
  height: 16px;
}

.workspace-icon-chip:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.workspace-icon-chip.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
}