/* 设备操作智能小助手 —— 悬浮窗组件样式
   设计约束：与官网蓝白商务基调一致；移动端为底部抽屉；不出现任何第三方品牌痕迹 */

/* 可拖动停靠容器：内含提示标签 + 悬浮球，整体拖动保持相对位置 */
.sa-dock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2147483000;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.sa-dock.dragging { cursor: grabbing; }
.sa-dock.dragging .sa-fab { transform: scale(1.06); box-shadow: 0 14px 34px rgba(12, 68, 124, .38); }
.sa-dock.dragging .sa-fab::before { animation: none; opacity: .5; }

/* 悬浮球：白底 + 公司 logo，带呼吸光晕 */
.sa-fab {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #185FA5;
  background: #fff;
  cursor: grab;
  box-shadow: 0 6px 22px rgba(12, 68, 124, .26);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sa-fab:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(12, 68, 124, .32); }
.sa-fab:active { cursor: grabbing; }
.sa-fab:focus-visible { outline: 3px solid rgba(24, 95, 165, .35); outline-offset: 4px; }
.sa-fab-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.sa-fab .sa-fab-x { width: 22px; height: 22px; color: #334155; display: none; pointer-events: none; }
.sa-fab[data-open="1"] { background: #f5f8fc; cursor: pointer; }
.sa-fab[data-open="1"] .sa-fab-logo { display: none; }
.sa-fab[data-open="1"] .sa-fab-x { display: block; }

/* 呼吸光晕：吸引注意（尊重 reduced-motion） */
.sa-fab::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(24, 95, 165, .45);
  animation: saPulse 2.4s ease-out infinite;
}
.sa-fab[data-open="1"]::before { animation: none; border-color: transparent; }
@keyframes saPulse {
  0% { transform: scale(.92); opacity: .85; }
  70% { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* 引导标签（相对 dock 定位，随球一起移动） */
.sa-tip {
  position: absolute;
  right: 74px;
  bottom: 10px;
  background: #0f172a;
  color: #fff;
  font-size: .82rem;
  line-height: 1.4;
  padding: 9px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.sa-tip.on { opacity: 1; visibility: visible; transform: translateX(0); }
.sa-tip::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  margin-top: -6px;
  width: 12px;
  height: 12px;
  background: #0f172a;
  transform: rotate(45deg);
  border-radius: 2px;
}
/* 球被拖到屏幕左半区时，标签翻到右侧，避免超出屏幕 */
.sa-dock.at-left .sa-tip { right: auto; left: 74px; transform: translateX(-8px); }
.sa-dock.at-left .sa-tip.on { transform: translateX(0); }
.sa-dock.at-left .sa-tip::after { right: auto; left: -6px; }

.sa-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .38);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
  z-index: 2147482999;
}
.sa-mask.on { opacity: 1; visibility: visible; }

.sa-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: 384px;
  max-width: 100vw;
  background: #fff;
  box-shadow: -8px 0 32px rgba(15, 23, 42, .16);
  transform: translateX(102%);
  transition: transform .26s cubic-bezier(.32, .72, 0, 1);
  z-index: 2147483001;
  display: flex;
  flex-direction: column;
  visibility: hidden;
}
.sa-panel.on { transform: translateX(0); visibility: visible; }

.sa-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid #e8edf3;
  background: linear-gradient(180deg, #f6f9fd, #fff);
}
.sa-head-ico {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #e6f1fb;
  color: #185fa5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sa-head-ico svg { width: 19px; height: 19px; }
.sa-head-txt { flex: 1; min-width: 0; }
.sa-head-txt strong { display: block; font-size: .95rem; color: #0f172a; font-weight: 500; line-height: 1.3; }
.sa-head-txt span { display: block; font-size: .72rem; color: #94a3b8; margin-top: 1px; }
.sa-close {
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sa-close:hover { background: #f1f5f9; }
.sa-close:focus-visible { outline: 3px solid rgba(24, 95, 165, .3); outline-offset: 2px; }
.sa-close svg { width: 17px; height: 17px; }

.sa-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}

/* 空状态 */
.sa-empty { padding: 8px 2px; }
.sa-empty-lead { font-size: .86rem; color: #475569; line-height: 1.65; }
.sa-empty-lead b { color: #0f172a; font-weight: 500; }
.sa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sa-chip {
  border: 1px solid #d8e6f5;
  background: #f6faff;
  color: #185fa5;
  border-radius: 999px;
  padding: 8px 13px;
  font-size: .8rem;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
  transition: background .15s, border-color .15s;
}
.sa-chip:hover { background: #e6f1fb; border-color: #b5d4f4; }
.sa-chip:focus-visible { outline: 3px solid rgba(24, 95, 165, .3); outline-offset: 2px; }
.sa-note { margin-top: 16px; padding: 10px 12px; border-radius: 9px; background: #f8fafc; border: 1px solid #eef2f6; font-size: .74rem; color: #94a3b8; line-height: 1.6; }

/* 消息气泡 */
.sa-msg { max-width: 88%; font-size: .86rem; line-height: 1.7; }
.sa-msg.user {
  align-self: flex-end;
  background: #185fa5;
  color: #fff;
  border-radius: 12px 12px 4px 12px;
  padding: 9px 13px;
}
.sa-msg.bot {
  align-self: flex-start;
  background: #f5f8fc;
  color: #1e293b;
  border: 1px solid #e8edf3;
  border-radius: 12px 12px 12px 4px;
  padding: 11px 13px;
  white-space: pre-wrap;
  word-break: break-word;
}
.sa-src { margin-top: 9px; padding-top: 9px; border-top: 1px dashed #dbe4ee; }
.sa-src-t { font-size: .7rem; color: #94a3b8; margin-bottom: 5px; }
.sa-src-item { display: flex; gap: 6px; font-size: .76rem; color: #475569; margin-bottom: 4px; line-height: 1.5; }
.sa-src-item svg { width: 12px; height: 12px; flex: none; margin-top: 4px; color: #94a3b8; }

/* 骨架 / 加载 */
.sa-typing { display: flex; gap: 5px; align-items: center; padding: 4px 2px; }
.sa-typing i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: saPulse 1.1s infinite; }
.sa-typing i:nth-child(2) { animation-delay: .18s; }
.sa-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes saPulse { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.sa-thinking { font-size: .78rem; color: #94a3b8; }

/* 错误态 */
.sa-err {
  align-self: stretch;
  border: 1px solid #f6d5d5;
  background: #fdf5f5;
  border-radius: 10px;
  padding: 12px 13px;
  font-size: .82rem;
  color: #8c3a3a;
  line-height: 1.6;
}
.sa-err-retry {
  margin-top: 9px;
  border: 1px solid #e0b4b4;
  background: #fff;
  color: #8c3a3a;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: .78rem;
  cursor: pointer;
}
.sa-err-retry:hover { background: #fdf0f0; }
.sa-err-retry:focus-visible { outline: 3px solid rgba(163, 45, 45, .25); outline-offset: 2px; }

/* 输入区 */
.sa-foot {
  flex: none;
  border-top: 1px solid #e8edf3;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.sa-input {
  flex: 1;
  min-height: 42px;
  max-height: 110px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .88rem;
  line-height: 1.5;
  resize: none;
  color: #0f172a;
  background: #fff;
}
.sa-input:focus { outline: none; border-color: #185fa5; box-shadow: 0 0 0 3px rgba(24, 95, 165, .1); }
.sa-input::placeholder { color: #b6c2d0; }
.sa-send {
  flex: none;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 10px;
  background: #185fa5;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sa-send:disabled { background: #c3ced9; cursor: not-allowed; }
.sa-send:focus-visible { outline: 3px solid rgba(24, 95, 165, .3); outline-offset: 2px; }
.sa-send svg { width: 18px; height: 18px; }

.sa-tip b { font-weight: 500; }
.sa-tip-close {
  border: none;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.sa-tip-close:hover { background: rgba(255, 255, 255, .32); }

/* 移动端：底部抽屉 */
@media (max-width: 640px) {
  .sa-dock { right: 14px; bottom: 14px; }
  .sa-fab { width: 56px; height: 56px; }
  .sa-fab-logo { width: 36px; height: 36px; }
  .sa-tip { right: 0; bottom: 66px; font-size: .8rem; padding: 8px 12px; }
  .sa-tip::after { right: auto; left: 22px; top: auto; bottom: -6px; margin-top: 0; }
  .sa-dock.at-left .sa-tip { left: 0; right: 0; transform: translateX(-8px); }
  .sa-panel {
    top: auto;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 88dvh;
    border-radius: 16px 16px 0 0;
    transform: translateY(102%);
    box-shadow: 0 -8px 30px rgba(15, 23, 42, .2);
  }
  .sa-panel.on { transform: translateY(0); }
  .sa-panel::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: #dbe4ee;
  }
  .sa-head { padding-top: 18px; }
  .sa-msg { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .sa-panel, .sa-fab, .sa-mask, .sa-tip { transition: none; }
  .sa-typing i { animation: none; opacity: .5; }
  .sa-fab::before { animation: none; opacity: .4; }
}
/* 「打开完整设备资料库」入口（跳转知识库分享页，地址由服务端下发） */
.sa-lib {
  display: none;
  align-items: center;
  gap: 7px;
  margin: 0 auto 10px;
  padding: 9px 14px;
  border: 1px solid #d8e6f5;
  border-radius: 10px;
  background: #f6faff;
  color: #185fa5;
  font-size: .82rem;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.sa-lib:hover { background: #e6f1fb; border-color: #b5d4f4; }
.sa-lib:focus-visible { outline: 3px solid rgba(24, 95, 165, .3); outline-offset: 2px; }
.sa-lib svg { width: 15px; height: 15px; flex: none; }
.sa-lib.on { display: inline-flex; }
@media (max-width: 640px) {
  .sa-lib { font-size: .8rem; padding: 8px 12px; }
}