/* ============================
   Detect Overlay - 全局遮罩层
   ============================ */

/* 遮罩层（全屏居中容器） */
#overlay.overlay-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;                 /* 默认隐藏 */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* ============================
   弹窗主体
   ============================ */

.overlay-panel {
  background: rgba(15, 15, 15, 0.95);
  border: 1px solid #3a3a3a;
  border-radius: 14px;
  padding: 12px;
  min-width: 360px;
  /*max-width: 80vw;*/
  /*max-height: 80vh;*/
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  animation: detect-popup 0.25s ease-out;
  display: flex;
  flex-direction: column;
}

/* ============================
   头部（标题 + 关闭按钮）
   ============================ */

.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #eee;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #333;
}

.overlay-header span {
  font-weight: 500;
}

.overlay-header button {
  background: none;
  border: none;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.overlay-header button:hover {
  color: #fff;
}

/* ============================
   内容区（截图 + 结果图）
   ============================ */

/*#overlayContent {*/
/*  display: flex;*/
/*  align-items: flex-start;*/
/*  gap: 10px;*/
/*  padding-top: 6px;*/
/*  overflow: auto;*/
/*}*/

/* OpenCV 绘制画布 */
#overlayCanvas {
  display: block;
  border: 1px solid #444;
  background: #000;
}

/* 后端返回结果图 */
#resultImg {
  display: block;
  /*max-height: 200px;*/
  border: 1px solid #444;
}

/* ============================
   状态文本
   ============================ */

#status {
  margin-top: 6px;
  font-size: 12px;
  color: #aaa;
  text-align: left;
}

/* ============================
   检测入口按钮（接入原页面）
   ============================ */

.detect-entry {
  margin: 15px 0 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.detect-entry .primary-btn {
  background: #409eff;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.detect-entry .primary-btn:hover {
  background: #337ecc;
}

.detect-hint {
  font-size: 13px;
  color: #999;
}

/* ============================
   弹窗动画
   ============================ */

@keyframes detect-popup {
  from {
    transform: scale(0.92);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/*
  新样式
*/
/* ===== 遮罩 ===== */
.overlay-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* ===== 弹窗主体 ===== */
.overlay-panel {
  width: 820px;
  max-height: 90vh;
  background: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== 头部 ===== */
.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.overlay-header button {
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
}

/* ===== 内容区 ===== */
#overlayContent {
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* canvas 不参与展示时隐藏 */
#overlayCanvas {
  display: none;
}

/* ===== 单张图片展示块 ===== */
#overlayContent img {
  max-width: 410px;
  max-height: 273px;
  object-fit: contain;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: zoom-in;
  transition: transform 0.25s ease;
  background: #fafafa;
}


/* 文本 */
.image-text {
  font-size: 13px;
  color: #333;
  line-height: 1.4;
  padding-left: 2px;
}

/* ===== 放大态 ===== */
#overlayContent img.zoomed {
  cursor: zoom-out;
  transform: scale(1.8);
  z-index: 10;
}

/* ===== 状态栏 ===== */
#status {
  padding: 8px 14px;
  border-top: 1px solid #ddd;
  font-size: 14px;
  color: #444;
  background: #fafafa;
}


.image-item {
  display: flex;
  flex-direction: column;
  align-items: center;          /* ⭐ 水平居中 */
  gap: 6px;
}

/* 图片包裹视口 */
.image-item img {
  max-width: 100%;
  max-height: 260px;

  object-fit: contain;

  border: 1px solid #ccc;
  border-radius: 6px;

  background: #fafafa;

  cursor: zoom-in;

  transition: transform 0.25s ease;

  transform-origin: center center;   /* ⭐ 强制从中心缩放 */
}

/* 放大状态 */
.image-item img.zoomed {
  transform: scale(1.8);
  cursor: zoom-out;
}


/* 左侧 canvas */
.canvas-wrapper {
  flex-shrink: 0;
  border: 1px solid #ccc;
}

#overlayCanvas {
  display: block;
  max-width: 320px;
  max-height: 240px;
}