/* ============================================================
   NFC 工位 AI 点检上报系统 · 移动端悬浮 AI 辅助小球
   ------------------------------------------------------------
   由原 PC 端 NFC 桌宠方案爆改重构：
   - 已移除：桌面程序 / 截图识别 / 屏幕读取 / 远程操控
   - 现仅为手机浏览器内的悬浮 UI 组件，只与点检网页联动
   - 不是对话宠物，不支持自由闲聊
   ============================================================ */

/* ---- 工业风设计变量 ---- */
:root {
  --fb-bg: #1f2429;
  --fb-bg-panel: #ffffff;
  --fb-stroke: #2b3238;
  --fb-ink: #1f2429;
  --fb-ink-sub: #5b6470;
  --fb-accent: #ff7a1a;
  --fb-ok: #1a7f5a;
  --fb-warn: #c98a00;
  --fb-danger: #c23a2b;
  --fb-radius: 14px;
  --fb-shadow: 0 4px 16px rgba(20, 24, 28, 0.22);
  --fb-z-top: 2147483000;
}

/* ---- 小球本体 ---- */
.fb-ball {
  position: fixed;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #3a424a 0%, #22282e 70%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none; /* 拖动期间阻止页面滚动 */
  z-index: var(--fb-z-top);
  transition: opacity 0.25s ease, width 0.25s ease, height 0.25s ease, border-radius 0.25s ease, left 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fb-ball.fb-hidden-left,
.fb-ball.fb-hidden-right {
  width: 20px;
  height: 56px;
  border-radius: 10px;
  opacity: 0.45;
  cursor: pointer;
}

.fb-ball.fb-hidden-left {
  left: 0 !important;
  border-radius: 0 10px 10px 0;
}

.fb-ball.fb-hidden-right {
  left: calc(100vw - 20px) !important;
}

.fb-ball .fb-face {
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  transition: transform 0.25s ease;
}

.fb-ball.fb-hidden-left .fb-face,
.fb-ball.fb-hidden-right .fb-face {
  transform: scale(0.5);
}

.fb-ball.fb-active {
  box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.35), 0 3px 10px rgba(0, 0, 0, 0.35);
}

.fb-ball.fb-loading {
  animation: fb-pulse 1s ease-in-out infinite;
}

@keyframes fb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(255, 122, 26,  0); }
}

/* ---- 展开面板 ---- */
.fb-panel {
  position: fixed;
  width: min(300px, calc(100vw - 24px));
  background: var(--fb-bg-panel);
  border: 1px solid #d8dde2;
  border-radius: var(--fb-radius);
  box-shadow: var(--fb-shadow);
  z-index: var(--fb-z-top);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--fb-ink);
  transform-origin: bottom right;
  animation: fb-panel-in 0.22s ease;
}

@keyframes fb-panel-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fb-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--fb-bg);
  color: #f2f4f6;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.fb-panel-header .fb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fb-accent);
}

.fb-panel-header .fb-panel-close {
  margin-left: auto;
  border: none;
  background: transparent;
  color: #aab3bd;
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}

/* 风险等级条 */
.fb-risk {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #e7ebee;
}

.fb-risk-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 84px;
  padding: 12px 8px;
  color: #fff;
  font-weight: 700;
}

.fb-risk-level .fb-risk-label {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.9;
  letter-spacing: 2px;
}

.fb-risk-level .fb-risk-value {
  font-size: 20px;
  letter-spacing: 1px;
}

.fb-risk-level.fb-level-urgent  { background: var(--fb-danger); }
.fb-risk-level.fb-level-high    { background: #e0631a; }
.fb-risk-level.fb-level-normal  { background: var(--fb-warn); }
.fb-risk-level.fb-level-low     { background: var(--fb-ok); }

.fb-risk-text {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--fb-ink-sub);
}

.fb-risk-text b {
  color: var(--fb-ink);
}

/* 内容区 */
.fb-panel-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fb-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fb-field-label {
  font-size: 10px;
  font-weight: 600;
  color: #8a929c;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.fb-field-value {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fb-ink);
}

.fb-suggestions {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fb-ink);
}

.fb-suggestions li {
  margin-bottom: 4px;
}

.fb-suggestions li:last-child { margin-bottom: 0; }

.fb-empty {
  padding: 26px 16px;
  text-align: center;
  font-size: 13px;
  color: #9aa2ac;
  line-height: 1.7;
}

/* 免责声明：固定标注，不可省略 */
.fb-disclaimer {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: #f4f6f8;
  border-top: 1px solid #e7ebee;
  font-size: 11px;
  line-height: 1.5;
  color: #79828c;
}

.fb-disclaimer::before {
  content: "⚠";
  flex-shrink: 0;
}

/* 加载状态 */
.fb-loading-view {
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fb-ink-sub);
}

.fb-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid #e2e7ec;
  border-top-color: var(--fb-accent);
  border-radius: 50%;
  animation: fb-spin 0.8s linear infinite;
}

@keyframes fb-spin {
  to { transform: rotate(360deg); }
}

/* 移动端小屏优化 */
@media (max-width: 360px) {
  .fb-panel { width: calc(100vw - 16px); }
}