/* 面板：可拖可缩的浮层 */
.panel {
  position: fixed;
  z-index: var(--layer4-panel);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  background: var(--bp-surface-floating);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: var(--bp-stroke-hairline) solid var(--bp-border-strong);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-overlay), var(--bp-shadow-raised);
  overflow: hidden;
  /* 拖动/缩放用 transform（GPU 合成层），不触发 reflow，手机端顺滑 */
  will-change: transform;
  /* 空白区可拖动（事件委托）；交互元素/滚动区保持各自光标 */
  cursor: grab;
  /* 禁浏览器默认触摸手势（滚动/双指缩放）——否则手机拖动时
     浏览器抢 pointermove/发 pointercancel，拖动会乱。
     消息区滚动靠 .panel__body 单独恢复 pan-y */
  touch-action: none;
}

.panel:active {
  cursor: grabbing;
}

/* 缩放激活：边框高亮（品牌蓝 + 加强阴影），提示正在调整尺寸 */
.panel.is-resizing {
  border-color: var(--bp-action-primary);
  box-shadow: 0 0 0 2px var(--bp-surface-selected), var(--bp-shadow-floating);
  cursor: default;
}

.panel__head {
  flex-shrink: 0;
  height: var(--bp-control-height-lg);
  display: flex;
  align-items: center;
  gap: var(--bp-space-2);
  padding: 0 var(--bp-space-3);
  /* 冷白底：与插件面板标题栏统一（纯白显死板） */
  background: var(--bp-surface-raised);
  border-bottom: var(--bp-stroke-hairline) solid var(--bp-border-default);
  cursor: move;
  user-select: none;
}

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

.panel__title {
  flex: 1;
  font-size: var(--bp-font-size-md);
  font-weight: var(--bp-font-weight-semibold);
  color: var(--bp-content-primary);
}

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

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

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

.panel__close:hover {
  /* 中性悬停（淡蓝底 + 深字）：关闭是常规操作，不是破坏性动作，不用语义红 */
  background: var(--bp-surface-hover);
  color: var(--bp-content-primary);
}

/* 消息区：保留默认光标（可滚动、可选择），不显示拖动抓手
   父面板 touch-action: none 禁了默认手势，这里单独恢复垂直滚动 */
.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-size-sm);
  cursor: default;
}

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

.panel__row--user {
  justify-content: flex-end;
}

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

/* 聊天消息气泡：用户右对齐深蓝，AI 左对齐浅蓝灰 */
.panel__msg {
  max-width: 86%;
  padding: var(--bp-space-2) var(--bp-space-3);
  border-radius: var(--bp-radius-md);
  line-height: var(--bp-leading-normal);
  white-space: pre-wrap;
  word-break: break-word;
}

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

.panel__msg--bot {
  background: var(--bp-surface-subtle);
  color: var(--bp-content-primary);
  border: var(--bp-stroke-hairline) solid var(--bp-border-default);
  border-bottom-left-radius: var(--bp-radius-sm);
}

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

.panel__input-field {
  flex: 1;
  min-width: 0;
  height: var(--bp-control-height-md);
  padding: 0 var(--bp-space-3);
  border: var(--bp-stroke-hairline) solid var(--bp-border-strong);
  border-radius: var(--bp-radius-md);
  background: var(--bp-surface-default);
  color: var(--bp-content-primary);
  font-size: var(--bp-font-size-sm);
  outline: none;
  transition: border-color var(--bp-dur-fast) var(--bp-ease);
}

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

.panel__input-field:disabled {
  opacity: var(--bp-opacity-disabled);
}

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

.panel__send:hover {
  background: var(--bp-action-primary-hover);
}

.panel__send:disabled {
  opacity: var(--bp-opacity-disabled);
  cursor: default;
}

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

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

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

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

/* 标题层级：比正文大一号、加深深蓝，层次立起来 */
.panel__msg--rich h1,
.panel__msg--rich h2,
.panel__msg--rich h3,
.panel__msg--rich h4 {
  margin: var(--bp-space-3) 0 var(--bp-space-2);
  line-height: var(--bp-leading-snug);
  font-weight: var(--bp-font-weight-bold);
  color: var(--bp-content-primary);
}

.panel__msg--rich h1 {
  font-size: 1.25em;
  padding-bottom: var(--bp-space-1);
  border-bottom: var(--bp-stroke-hairline) solid var(--bp-border-default);
}

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

.panel__msg--rich h3 {
  font-size: 1.05em;
  color: var(--bp-content-action);
}

.panel__msg--rich h4 {
  font-size: 1em;
  color: var(--bp-content-action);
}

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

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

.panel__msg--rich li::marker {
  color: var(--bp-content-subtle);
}

.panel__msg--rich code {
  padding: 1px var(--bp-space-2);
  border-radius: var(--bp-radius-sm);
  background: var(--bp-surface-sunken);
  color: var(--bp-content-action);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.panel__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-surface-sunken);
  overflow-x: auto;
}

.panel__msg--rich pre code {
  padding: 0;
  background: transparent;
  color: var(--bp-content-primary);
}

.panel__msg--rich a {
  color: var(--bp-content-action);
  text-decoration: underline;
}

.panel__msg--rich strong {
  font-weight: var(--bp-font-weight-semibold);
  color: var(--bp-content-action);
}

.panel__msg--rich blockquote {
  margin: var(--bp-space-2) 0;
  padding: var(--bp-space-1) var(--bp-space-3);
  border-left: 3px solid var(--bp-border-strong);
  background: var(--bp-surface-raised);
  border-radius: 0 var(--bp-radius-sm) var(--bp-radius-sm) 0;
  color: var(--bp-content-secondary);
}

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

.panel__msg--rich th,
.panel__msg--rich td {
  padding: var(--bp-space-1) var(--bp-space-2);
  border: var(--bp-stroke-hairline) solid var(--bp-border-default);
}

.panel__msg--rich th {
  background: var(--bp-surface-raised);
  font-weight: var(--bp-font-weight-semibold);
}

.panel__msg--rich hr {
  margin: var(--bp-space-2) 0;
  border: none;
  border-top: var(--bp-stroke-hairline) solid var(--bp-border-default);
}

.panel__resize {
  position: absolute;
  touch-action: none;
  z-index: var(--layer4-resize);
}

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

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

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

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

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

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

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

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

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

/* 手机端交互件统一使用触控目标；面板尺寸仍由组件按实时视口计算。 */
#stage[data-breakpoint="mobile"] .panel__head {
  height: calc(var(--bp-touch-target) + var(--bp-space-2));
}

#stage[data-breakpoint="mobile"] .panel__close {
  width: var(--bp-touch-target);
  height: var(--bp-touch-target);
}

#stage[data-breakpoint="mobile"] .panel__input-field,
#stage[data-breakpoint="mobile"] .panel__send {
  height: var(--bp-touch-target);
}