/* 舞台第四层样式 (Layer 4) - 悬浮层（客服按钮 + AI 面板） */

/* 悬浮按钮：物理小球（惯性甩出 + 碰撞反弹，无重力），位置由 JS 内联 transform 控制（GPU 合成更丝滑） */
.assistant-btn {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--bp-color-primary);
  color: var(--bp-color-on-primary);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  box-shadow: var(--bp-shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  will-change: transform;
  transition: background var(--bp-dur-fast) var(--bp-ease);
}

.assistant-btn:hover {
  background: var(--bp-color-primary-strong);
}

.assistant-btn.is-dragging {
  cursor: grabbing;
}

.assistant-btn__icon {
  width: 26px;
  height: 26px;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 面板：可拖可缩的浮层 */
.assistant-panel {
  position: fixed;
  z-index: 9;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  background: var(--bp-color-bg-elevated);
  /* 深橙描边 + 实阴影：与米灰舞台底拉开边界（原来最淡档边框几乎看不见） */
  border: 1px solid var(--bp-color-border-strong);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-xl), var(--bp-shadow-md);
  overflow: hidden;
  /* 拖动/缩放用 transform（GPU 合成层），不触发 reflow，手机端顺滑 */
  will-change: transform;
  /* 空白区可拖动（事件委托）；交互元素/滚动区保持各自光标 */
  cursor: grab;
  /* 禁浏览器默认触摸手势（滚动/双指缩放）——否则手机拖动时
     浏览器抢 pointermove/发 pointercancel，拖动会乱。
     消息区滚动靠 .assistant-panel__body 单独恢复 pan-y */
  touch-action: none;
}

.assistant-panel:active {
  cursor: grabbing;
}

/* 缩放激活：边框高亮（工程橙 + 加强阴影），提示正在调整尺寸 */
.assistant-panel.is-resizing {
  border-color: var(--bp-color-primary);
  box-shadow: 0 0 0 2px var(--bp-color-primary-tint), var(--bp-shadow-lg);
  cursor: default;
}

.assistant-panel__head {
  flex-shrink: 0;
  height: 44px;
  display: flex;
  align-items: center;
  gap: var(--bp-space-2);
  padding: 0 var(--bp-space-3);
  /* 暖白底：与插件面板标题栏统一（纯白显死板），橙色清空按钮点缀 */
  background: var(--bp-color-bg-warm-soft);
  border-bottom: 1px solid var(--bp-color-border);
  cursor: move;
  user-select: none;
}

/* 标题栏图标（左侧）：白色描边图标（message-circle 为橙底客服按钮设计），
   必须套橙色圆底才可见——顺带成为面板的品牌色点缀 */
.assistant-panel__head-icon {
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 4px;
  background: var(--bp-color-primary);
  border-radius: 50%;
  pointer-events: none;
}

.assistant-panel__title {
  flex: 1;
  font-size: var(--bp-font-md);
  font-weight: 600;
  color: var(--bp-color-text);
}

.assistant-panel__head-actions {
  display: flex;
  align-items: center;
  gap: var(--bp-space-1);
  /* 提升到缩放手柄(z-index:2)之上：角手柄缩小后仍可能与按钮区相邻，
     保证各操作按钮永远可点，不被缩放热区盖住 */
  position: relative;
  z-index: 3;
}

.assistant-panel__close-icon {
  width: 15px;
  height: 15px;
  pointer-events: none;
}

.assistant-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--bp-radius-sm);
  background: transparent;
  font-size: var(--bp-font-md);
  color: var(--bp-color-text-faint);
  cursor: pointer;
  transition: background var(--bp-dur-fast) var(--bp-ease);
}

.assistant-panel__close:hover {
  /* 淡红底：危险动作（关闭），用语义令牌 */
  background: var(--bp-color-danger-tint);
  color: var(--bp-color-danger);
}

/* 消息区：保留默认光标（可滚动、可选择），不显示拖动抓手
   父面板 touch-action: none 禁了默认手势，这里单独恢复垂直滚动 */
.assistant-panel__body {
  flex: 1;
  min-height: 0;
  padding: var(--bp-space-3) var(--bp-space-3) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-2);
  font-size: var(--bp-font-sm);
  cursor: default;
}

/* 聊天消息行：AI 左侧带助理头像，用户右侧无头像（右对齐） */
.chat-row {
  display: flex;
  align-items: flex-start;
  gap: var(--bp-space-2);
}

.chat-row--user {
  justify-content: flex-end;
}

/* 助理头像：圆形小吴本人照片（AI 代表小吴接待，用真人头像更亲切） */
.chat-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--bp-color-border);
  background: var(--bp-color-bg-warm-soft);
  margin-top: 2px;
}

/* 聊天消息气泡：用户右对齐工程橙，AI 左对齐暖白 */
.chat-msg {
  max-width: 86%;
  padding: var(--bp-space-2) var(--bp-space-3);
  border-radius: var(--bp-radius-md);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-msg--user {
  background: var(--bp-color-primary);
  color: var(--bp-color-on-primary);
  border-bottom-right-radius: var(--bp-radius-sm);
}

.chat-msg--bot {
  background: var(--bp-color-bg-warm);
  color: var(--bp-color-text);
  border: 1px solid var(--bp-color-border);
  border-bottom-left-radius: var(--bp-radius-sm);
}

/* 输入区：输入框/发送按钮保持默认交互光标 */
.assistant-panel__input {
  flex-shrink: 0;
  display: flex;
  gap: var(--bp-space-2);
  padding: var(--bp-space-3);
  border-top: 1px solid var(--bp-color-border);
  /* 暖白底：与标题栏对称，形成上下框架，中间消息区凸显 */
  background: var(--bp-color-bg-warm-soft);
  cursor: default;
}

.assistant-panel__input-field {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 var(--bp-space-3);
  border: 1px solid var(--bp-color-border-strong);
  border-radius: var(--bp-radius-md);
  background: var(--bp-color-bg-elevated);
  color: var(--bp-color-text);
  font-size: var(--bp-font-sm);
  outline: none;
  transition: border-color var(--bp-dur-fast) var(--bp-ease);
}

.assistant-panel__input-field:focus {
  border-color: var(--bp-color-primary);
}

.assistant-panel__input-field:disabled {
  opacity: 0.6;
}

.assistant-panel__send {
  flex-shrink: 0;
  height: 36px;
  padding: 0 var(--bp-space-3);
  border: none;
  border-radius: var(--bp-radius-md);
  background: var(--bp-color-primary);
  color: var(--bp-color-on-primary);
  font-size: var(--bp-font-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background var(--bp-dur-fast) var(--bp-ease);
}

.assistant-panel__send:hover {
  background: var(--bp-color-primary-strong);
}

.assistant-panel__send:disabled {
  opacity: 0.6;
  cursor: default;
}

.assistant-panel__send-icon {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* 富文本气泡：AI 消息 Markdown 排版（标题/列表/引用/代码/表格，暖白底上加深对比） */
.chat-msg--rich {
  white-space: normal;
  width: fit-content;
  min-width: 0;
}

.chat-msg--rich p {
  margin: 0 0 var(--bp-space-2);
}

.chat-msg--rich p:last-child {
  margin-bottom: 0;
}

/* 标题层级：比正文大一号、加深橙（品牌主色），层次立起来 */
.chat-msg--rich h1,
.chat-msg--rich h2,
.chat-msg--rich h3,
.chat-msg--rich h4 {
  margin: var(--bp-space-3) 0 var(--bp-space-2);
  line-height: 1.35;
  font-weight: 700;
  color: var(--bp-color-text);
}

.chat-msg--rich h1 {
  font-size: 1.25em;
  padding-bottom: var(--bp-space-1);
  border-bottom: 1px solid var(--bp-color-border);
}

.chat-msg--rich h2 {
  font-size: 1.15em;
}

.chat-msg--rich h3 {
  font-size: 1.05em;
  color: var(--bp-color-primary-deep);
}

.chat-msg--rich h4 {
  font-size: 1em;
  color: var(--bp-color-primary-deep);
}

.chat-msg--rich ul,
.chat-msg--rich ol {
  margin: 0 0 var(--bp-space-2);
  padding-left: var(--bp-space-4);
}

.chat-msg--rich li {
  margin: var(--bp-space-1) 0;
}

.chat-msg--rich li::marker {
  color: var(--bp-color-primary);
}

.chat-msg--rich code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bp-color-bg-warm-deep);
  color: var(--bp-color-primary-deep);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.chat-msg--rich pre {
  margin: var(--bp-space-2) 0;
  padding: var(--bp-space-2) var(--bp-space-3);
  border-radius: var(--bp-radius-sm);
  background: var(--bp-color-bg-warm-deep);
  overflow-x: auto;
}

.chat-msg--rich pre code {
  padding: 0;
  background: transparent;
  color: var(--bp-color-text);
}

.chat-msg--rich a {
  color: var(--bp-color-primary);
  text-decoration: underline;
}

.chat-msg--rich strong {
  font-weight: 600;
  color: var(--bp-color-primary-deep);
}

.chat-msg--rich blockquote {
  margin: var(--bp-space-2) 0;
  padding: var(--bp-space-1) var(--bp-space-3);
  border-left: 3px solid var(--bp-color-primary);
  background: var(--bp-color-bg-warm-soft);
  border-radius: 0 var(--bp-radius-sm) var(--bp-radius-sm) 0;
  color: var(--bp-color-text-muted);
}

.chat-msg--rich table {
  margin: var(--bp-space-2) 0;
  border-collapse: collapse;
  width: 100%;
}

.chat-msg--rich th,
.chat-msg--rich td {
  padding: 4px 8px;
  border: 1px solid var(--bp-color-border);
}

.chat-msg--rich th {
  background: var(--bp-color-bg-warm-soft);
  font-weight: 600;
}

.chat-msg--rich hr {
  margin: var(--bp-space-2) 0;
  border: none;
  border-top: 1px solid var(--bp-color-border);
}

/* 缩放手柄：四边 + 四角，均可拖拽调整尺寸
   尺寸刻意收细：四边 12px、四角 18px（原来是 18/36），避免盖住标题栏的关闭叉 */
.assistant-panel__resize {
  position: absolute;
  touch-action: none;
  z-index: 2;
}

.assistant-panel__resize--n {
  top: 0;
  left: 18px;
  right: 18px;
  height: 12px;
  cursor: ns-resize;
}

.assistant-panel__resize--s {
  bottom: 0;
  left: 18px;
  right: 18px;
  height: 12px;
  cursor: ns-resize;
}

.assistant-panel__resize--e {
  right: 0;
  top: 18px;
  bottom: 18px;
  width: 12px;
  cursor: ew-resize;
}

.assistant-panel__resize--w {
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 12px;
  cursor: ew-resize;
}

.assistant-panel__resize--ne {
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  cursor: nesw-resize;
}

.assistant-panel__resize--nw {
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
}

.assistant-panel__resize--se {
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
}

.assistant-panel__resize--sw {
  bottom: 0;
  left: 0;
  width: 18px;
  height: 18px;
  cursor: nesw-resize;
}

/* 右下角视觉提示（对角小标记） */
.assistant-panel__resize--se::before {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--bp-color-border-strong);
  border-bottom: 2px solid var(--bp-color-border-strong);
}

/* ═══════ 全局导航栏（本层自身：品牌 + 菜单 + 行业工具入口） ═══════ */

.navbar-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  /* 在 Layer 4 内部高于客服面板 */
  pointer-events: none;
  /* 容器不拦截，子元素各自 auto */
  /* 半透明暖白毛玻璃：给固定导航一层淡淡的底，不抢内容、不刺眼
     表面令牌 --bp-color-surface-mist（毛玻璃挡），受全局色板约束 */
  background: var(--bp-color-surface-mist);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bp-color-primary-hairline);
}

.navbar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--bp-space-5);
  /* 与内容区（layer-2-content 1120px + 左右 24px）同宽同边距，边界对齐 */
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--bp-space-3) var(--bp-space-5);
  height: var(--bp-navbar-h);
  box-sizing: border-box;
  /* 供中间菜单绝对居中定位（菜单不随左右两侧宽度不等而偏移） */
  position: relative;
}

/* ─── 内容面 ─── */

.navbar--content {
  justify-content: space-between;
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--bp-space-2);
  white-space: nowrap;
  /* 品牌区可点击回主页（见 layer_4.mjs renderNav） */
  cursor: pointer;
}

/* 品牌文字：主标题（中文）+ 副标题（中文业务词，工业感） */
.navbar__brand-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 与 logo 等高（30px）：主标题顶部、副标题底部分别贴 logo 上下边界 */
  height: 30px;
  line-height: 1;
}

.navbar__brand-title {
  font-size: 16px;
  font-weight: var(--bp-font-bold);
  color: var(--bp-color-text);
  letter-spacing: 1px;
  line-height: 1;
}

.navbar__brand-sub {
  /* 副标题"非标自动化机械设计"偏短，靠加宽字距撑满画面、出工业感 */
  font-size: 10.5px;
  font-weight: 600;
  color: var(--bp-color-primary);
  letter-spacing: 3px;
  line-height: 1;
}

/* 品牌 logo：非标机械图纸图形，与文字块等高（30px） */
.navbar__logo {
  height: 30px;
  width: auto;
  display: block;
  flex: none;
}

.navbar__menu {
  display: flex;
  gap: var(--bp-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  /* 绝对居中于导航栏正中（用户要求：菜单居中而非靠左）：
     不靠 flex 均分——那样会被不等宽的左右两块挤偏；left:50% + 位移才是真居中 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.navbar__link,
.navbar__download,
.navbar__apps {
  /* 三控件等高统一：旧版高度靠"字号+padding"各自堆出——下载按钮因 1px 边框比
     另两个高 2px，视觉不齐。显式声明同高 + border-box（边框算进盒子内）。 */
  height: 34px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}

.navbar__link {
  border: none;
  background: transparent;
  font-size: var(--bp-font-sm);
  color: var(--bp-color-primary);
  cursor: pointer;
  padding: var(--bp-space-2);
  transition: color var(--bp-dur-fast) var(--bp-ease);
}

.navbar__link:hover {
  color: var(--bp-color-primary-strong);
}

/* 行业工具入口：右侧胶囊按钮（图标 + 文字） */
.navbar__apps {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-space-2);
  border: none;
  background: var(--bp-color-primary);
  color: var(--bp-color-on-primary);
  font-size: var(--bp-font-sm);
  font-weight: var(--bp-font-semibold);
  padding: var(--bp-space-2) var(--bp-space-5);
  border-radius: var(--bp-radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--bp-dur-fast) var(--bp-ease), transform var(--bp-dur-fast) var(--bp-ease);
}

/* 入口图标：img 引入不继承 CSS，用 filter 转白贴合橙底 */
.navbar__apps-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.navbar__apps:hover {
  background: var(--bp-color-primary-strong);
  transform: translateY(-1px);
}

/* 右侧按钮组（下载 + 行业工具）：整体靠右，与中间菜单分开 */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--bp-space-3);
  margin-left: auto;
  /* 顶到最右 */
}

/* 下载入口：次要按钮（描边浅底），不与行业工具主按钮抢焦点 */
.navbar__download {
  border: 1px solid var(--bp-color-border-strong);
  background: transparent;
  color: var(--bp-color-primary);
  font-size: var(--bp-font-sm);
  font-weight: var(--bp-font-semibold);
  padding: var(--bp-space-2) var(--bp-space-4);
  border-radius: var(--bp-radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--bp-dur-fast) var(--bp-ease),
    color var(--bp-dur-fast) var(--bp-ease),
    border-color var(--bp-dur-fast) var(--bp-ease);
}

.navbar__download:hover {
  background: var(--bp-color-primary-tint);
  border-color: var(--bp-color-primary);
  color: var(--bp-color-primary-deep);
}

/* 移动端：只留品牌 + 行业工具，隐藏中间菜单（首页/关于我/设计案例/联系我）。
   断点走 #stage[data-breakpoint]（与 frame.mjs 的 BREAKPOINTS 同源），不写媒体查询 */
#stage[data-breakpoint="mobile"] .navbar {
  height: var(--bp-navbar-h);
  padding: var(--bp-space-2) var(--bp-space-4);
  gap: var(--bp-space-3);
}

#stage[data-breakpoint="mobile"] .navbar__brand {
  font-size: var(--bp-font-md);
}

/* 手机端：主标题 16px；副标题缩小字号/字距以不增宽（保持与主标题等宽以内） */
#stage[data-breakpoint="mobile"] .navbar__brand-title {
  font-size: var(--bp-font-md);
}

#stage[data-breakpoint="mobile"] .navbar__brand-sub {
  font-size: 9px;
  letter-spacing: 0.5px;
}

#stage[data-breakpoint="mobile"] .navbar__menu {
  display: none;
}

/* 手机端行业工具：只留图标，文字收起，按钮变方形（padding 均等）。
   右侧整体靠右由 .navbar__actions 的 margin-left:auto 负责，这里不再单独顶右 */
#stage[data-breakpoint="mobile"] .navbar__apps-text {
  display: none;
}

#stage[data-breakpoint="mobile"] .navbar__apps {
  /* 手机端横向内边距收紧，给放大后的品牌文字腾空间 */
  padding: var(--bp-space-2);
  /* 文字收起后只剩图标：显式定成正方形（桌面统一高 34 会变成长方形）。
     与下载按钮同取 32，手机端两键保持等高。 */
  height: 32px;
  width: 32px;
  justify-content: center;
}

/* 手机端下载入口：只留图标化文字，缩小内边距，与行业工具同高 */
#stage[data-breakpoint="mobile"] .navbar__download {
  padding: var(--bp-space-2);
  font-size: var(--bp-font-xs);
  height: 32px;
}