/* ═════════════════════════════════════════════════════════════
   38 · 手机左侧抽屉:原点在上
   和标志同一个结构:你(唯一金色)在顶上,一条线向下连着全部助手,末端是“全部助手”;
   最常按的“新对话”在拇指够得到的底部。
   视觉顺序(自上而下):你(头像/名字/思维导图·工作空间/齿轮)→ 助手 → 全部助手 → 新对话。
   DOM 里新建按钮在 PC 头部(.sidebar-header),手机用 order 排到最底;其余手机专属元素按视觉顺序写在 DOM。
   助手只显示名字(不显示图标与描述):正在用的在线上亮一个大点,有新消息的亮一个小点,其余只挂在线上。
   线分三段画在不随滚动移动的背景上:你的头像下方 → 列表 → 全部助手的“+”。节点中心都在 --drawer-node-x。
   长按助手置顶(agent-card-menu.js);抽屉容器本身(滑入滑出/遮罩)在 11-mobile.css;电脑端不受影响。
   ═════════════════════════════════════════════════════════════ */
.sidebar-mobile-me,
.sidebar-mobile-all,
#sidebar-new-conv-btn .new-label-m { display: none; }

@media (max-width: 1023px) {
  #sidebar {
    --drawer-node-x: 36px;            /* 头像、节点、“+” 的中心 */
    --drawer-name-x: 64px;            /* 助手名字的起点 */
    --drawer-spine: linear-gradient(var(--drawer-spine-color), var(--drawer-spine-color));
    --drawer-spine-color: color-mix(in srgb, var(--text-main) 16%, transparent);
    --drawer-spine-left: calc(var(--drawer-node-x) - 0.5px);
    /* 抽屉只是导航:不能选字,长按链接/名字不弹系统菜单(长按助手是置顶菜单) */
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
  }

  /* ── 顶部的你:头像中心在线上,线从头像下方开始 ── */
  #sidebar .sidebar-mobile-me {
    display: flex; align-items: center; gap: 14px; flex-shrink: 0;
    padding: calc(var(--app-top-inset) + 22px) 12px 20px calc(var(--drawer-node-x) - 22px);
    background: var(--drawer-spine) var(--drawer-spine-left) calc(var(--app-top-inset) + 50px) / 1px 100% no-repeat;
  }
  .sidebar-mobile-avatar {
    position: relative; flex-shrink: 0;
    width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--brand-primary); color: var(--text-on-color);
    display: grid; place-items: center;
    font: inherit; font-size: 16px; font-weight: 700; text-transform: uppercase;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  /* 身份还没加载出来时不先亮金色空圆 */
  .sidebar-mobile-avatar:empty { background: var(--bg-active); }
  .sidebar-mobile-who {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: flex-start;
  }
  .sidebar-mobile-name {
    max-width: 100%; height: 28px; padding: 0;
    border: 0; background: none; text-align: left;
    font: inherit; font-size: 21px; font-weight: 600; line-height: 28px; letter-spacing: 0.01em;
    color: var(--text-bright);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  /* 你的资料:小字,点按范围撑到 30px 高、左右各 8px */
  .sidebar-mobile-links { display: flex; gap: 2px; margin-left: -8px; }
  .sidebar-mobile-links a {
    position: relative;
    display: inline-flex; align-items: center;
    height: 30px; padding: 0 8px;
    font-size: 13px; color: var(--text-dim); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .sidebar-mobile-links a:active { color: var(--text-main); }
  /* 工作空间邀请提醒(workspace-invite-badge.js 写 data-badge):贴在字的右上角 */
  .sidebar-mobile-links a[data-badge]::after {
    content: ''; position: absolute; top: 4px; right: 1px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--error-color);
  }
  #sidebar .sidebar-mobile-settings {
    align-self: flex-start; margin-top: -8px;
    width: 44px; height: 44px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%; color: var(--text-dim);
  }
  #sidebar .sidebar-mobile-settings svg { width: 21px; height: 21px; }
  #sidebar .sidebar-mobile-settings:active { background: var(--bg-hover); }

  /* ── 助手列表:线是不随滚动移动的背景;列表短时“全部助手”紧跟其后,长时列表自己滚 ── */
  #sidebar .sidebar-body {
    order: 1;
    flex: 0 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    padding: 0 8px;
    gap: 0;
    background: var(--drawer-spine) var(--drawer-spine-left) 0 / 1px 100% no-repeat;
    scrollbar-width: none;
  }
  #sidebar .sidebar-body::-webkit-scrollbar { display: none; }
  /* 还没有助手(加载中/空)时不画线;加载骨架按名字位置排 */
  #sidebar:not(:has(.ac-card)) :is(.sidebar-body, .sidebar-mobile-me, .sidebar-mobile-all) { background: none; }
  #sidebar .sidebar-body .sk-stack { padding: 0; gap: 0; }
  #sidebar .sidebar-body .sk-list-item { min-height: 52px; padding: 0 12px 0 calc(var(--drawer-name-x) - 8px); }
  #sidebar .sidebar-body :is(.sk-avatar, .sk-text-sm) { display: none; }
  #sidebar .sidebar-body .sidebar-empty {
    padding: var(--space-6) var(--space-4);
    color: var(--text-muted);
    font-size: 13px; line-height: 1.6; text-align: center;
  }

  #sidebar .ac-card {
    min-height: 52px; padding: 0 12px 0 calc(var(--drawer-name-x) - 8px); margin: 0;
    border-left: 0; border-radius: 14px;
    background: transparent; box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }
  #sidebar .ac-card:hover,
  #sidebar .ac-card.active { background: transparent; box-shadow: none; }
  #sidebar .ac-card:active { background: var(--bg-hover); }
  /* 置顶的助手在上,和其余助手之间留一段空 */
  #sidebar .ac-card.is-pinned + .ac-card:not(.is-pinned) { margin-top: 14px; }
  #sidebar .ac-card :is(.agent-avatar, .ac-row2, .ac-time, .ac-pin-btn) { display: none; }

  #sidebar .ac-name { font-size: 18px; font-weight: 500; letter-spacing: 0.01em; color: var(--text-muted); }
  #sidebar .ac-card:has(.ac-unread-dot) .ac-name { color: var(--text-main); }
  #sidebar .ac-card.active .ac-name { color: var(--text-bright); font-weight: 600; }
  /* 节点:正在用的大亮点(带一圈光),有新消息的小亮点;都盖在线上 */
  #sidebar .ac-card.active::before,
  #sidebar .ac-unread-dot {
    content: ''; position: absolute; top: 50%; right: auto; bottom: auto;
    border-radius: 50%; background: var(--text-bright);
    pointer-events: none;
  }
  #sidebar .ac-card.active::before {
    left: calc(var(--drawer-node-x) - 8px - 6px);
    width: 12px; height: 12px; margin-top: -6px;
    box-shadow: 0 0 0 5px var(--bg-active);
  }
  #sidebar .ac-unread-dot {
    left: calc(var(--drawer-node-x) - 8px - 4px);
    width: 8px; height: 8px; margin-top: -4px;
    box-shadow: none;
  }

  /* ── 线路末端:全部助手(“+” 盖住线头) ── */
  #sidebar .sidebar-mobile-all {
    order: 2; position: relative; flex-shrink: 0;
    display: flex; align-items: center;
    height: 50px; margin: 0 8px; padding: 0 0 0 calc(var(--drawer-name-x) - 8px);
    border: 0; border-radius: 14px;
    background: var(--drawer-spine) calc(var(--drawer-spine-left) - 8px) 0 / 1px 50% no-repeat;
    font: inherit; font-size: 15px; color: var(--text-dim); text-align: left;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  #sidebar .sidebar-mobile-all::before {
    content: ''; position: absolute; top: 50%;
    left: calc(var(--drawer-node-x) - 8px - 6px);
    width: 12px; height: 12px; margin-top: -6px;
    background:
      linear-gradient(var(--text-dim), var(--text-dim)) center / 11px 1.5px no-repeat,
      linear-gradient(var(--text-dim), var(--text-dim)) center / 1.5px 11px no-repeat,
      var(--bg-surface);
  }
  #sidebar .sidebar-mobile-all:active { background-color: var(--bg-hover); }

  /* ── 最底部:新对话 ── */
  #sidebar .sidebar-header {
    order: 3; flex-shrink: 0;
    margin-top: auto;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 10px);
    background: none;
  }
  #sidebar .brand-group { display: none; }
  #sidebar #sidebar-new-conv-btn {
    flex: 1; height: 50px; padding: 0;
    gap: 10px;
    border: 0; border-radius: 25px;
    background: var(--bg-active); color: var(--text-main);
    font-size: 16px; font-weight: 500;
  }
  #sidebar #sidebar-new-conv-btn:active { background: var(--bg-hover); }
  #sidebar #sidebar-new-conv-btn :is(.new-ic-plus, span) { display: none; }
  #sidebar #sidebar-new-conv-btn .new-ic-compose { display: block; width: 20px; height: 20px; color: var(--text-muted); }
  #sidebar #sidebar-new-conv-btn .new-label-m { display: inline; }

  .sidebar-mobile-avatar:focus-visible,
  .sidebar-mobile-name:focus-visible,
  .sidebar-mobile-links a:focus-visible,
  .sidebar-mobile-all:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
}

/* ── 长按助手的底部菜单(agent-card-menu.js)── */
.acm-scrim,
.acm-sheet { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.acm-scrim {
  position: fixed; inset: 0; z-index: 219;
  background: var(--shadow-deep);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.acm-scrim.is-open { opacity: 1; pointer-events: auto; }
.acm-sheet {
  position: fixed; z-index: 220;
  left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  padding: 8px; border-radius: 22px;
  background: var(--bg-surface);
  box-shadow: 0 0 0 1px var(--border-glass), 0 16px 40px var(--shadow-overlay);
  transform: translateY(calc(100% + 24px)); visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.3s;
}
.acm-sheet.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.acm-title {
  padding: 10px 12px 6px;
  font-size: 12px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acm-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  height: 46px; padding: 0 12px;
  border: 0; border-radius: 12px; background: none;
  font: inherit; font-size: 15px; color: var(--text-main);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.acm-item:active { background: var(--bg-hover); }
.acm-item:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.acm-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .acm-scrim, .acm-sheet { transition: none; }
}