/* 容器设置 */
.product-table-container {
  overflow-x: visible; /* PC 端禁止横向滚动 */
  padding: 20px 0;
  max-width: 100%; /* 确保容器不会超出父元素 */
  width: 100%;
}

.top-reminder {
  color: #989898;
  font-size: 16px;
  margin: 0 0 20px 0; /* 调整下边距 */
  text-align: center;
  line-height: 1.5;
}

.top-reminder i {
  display: inline-block;
  margin-top: 10px;
  font-size: 20px; /* 图标大小 */
  color: #334466;
  animation: bounce 2s infinite; /* 可选：增加一个跳动动画吸引注意 */
}

.product-table-title {
  font-size: var(--font-size-p);
  color: #fff;
  text-align: center;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin-bottom: 2em;
  background: #334466;
  border-radius: 2px;
  width: 100%; /* 使用百分比宽度 */
  min-width: auto; /* 移除最小宽度限制 */
}

.product-table-wrapper {
  width: 100%;
  overflow-x: visible;
}

.product-table {
  /* overflow-x: visible; */ /* PC 端禁止横向滚动 */
  width: 100%;
  border-collapse: collapse; 
  min-width: auto; /* 移除最小宽度限制 */
}

/* 单元格基础样式 */
.product-table td {
  padding: 5px 1px;
  vertical-align: middle;
  text-align: center;
  color: var(--body-font-color);
  position: relative;
}

/* --------------------------------------
 Row Label (Y轴文字)
-------------------------------------- */
.product-table td.row-label {
  text-align: right;
  padding-right: 1em;
  color: var(--body-font-color);
  width: 5em;
  white-space: nowrap;
  /* Y轴实线 */
  border-right: 1px solid #999;
}

/* 去除底部标签行的第一列边框 */
.product-table tr.row-labels-bottom td {
  border-right: none !important;
}


/* --------------------------------------
 X 轴逻辑
-------------------------------------- */
.product-table tr.row-x-axis td:not(:first-child):not(.product-cell-arrow-right) {
  border-bottom: 1px solid #999;
}

.product-table tr.row-x-axis td:first-child {
  border-bottom: none;
}


/* --------------------------------------
 箭头绘制 (Y轴 & X轴)
-------------------------------------- */

/* Y轴箭头 (上) */
.product-table td.y-axis-top::after {
  content: "";
  display: block;
  position: absolute;
  /* --- 修复点 1: 消除空白 --- */
  right: -5px; /* 居中于 1px 边框 */
  top: -8px;   /* 原来是 -10px，现在改为 -8px (正好是 border-bottom 的高度)，确保紧贴 */
  /* 如果还有微小缝隙，可以试着改成 -7px 让它稍微盖住一点线 */
  
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #999;
}

/* X轴箭头 (右) */
.product-table td.product-cell-arrow-right {
  width: 1em;
  vertical-align: bottom;
  padding: 0;
}

.product-table td.product-cell-arrow-right::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: -5px; 
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #999;
}


/* --------------------------------------
 虚线网格
-------------------------------------- */
/* 
 规则：除了 Label列、箭头列、底部行、以及X轴实线行 之外
 只加 border-bottom (横虚线)，去掉了 border-left
*/
.product-table tr:not(.row-labels-bottom):not(.row-x-axis) td:not(.row-label) {
  border-bottom: 1px dashed #e0e0e0;
  /* border-left: 1px dashed #e0e0e0;  <-- 已删除此行，隐藏竖向虚线 */
}

/* X轴那一行原本有 border-left，现在也删掉，或者显式设为 none */
.product-table tr.row-x-axis td:not(.row-label):not(.product-cell-arrow-right) {
  border-left: none; 
}


/* --------------------------------------
 产品链接块 Chips
-------------------------------------- */
.product-cell-link {
  position: relative;
  display: block;
  width: clamp(6em, calc(6em + 1em * ((100vw - 480px) / 200px)), 14em);
  padding: 4px 2px; /* 减小内边距 */
  font-size: calc(var(--font-size-table)*0.8);
  margin: 4px auto;
  color: var(--color-tooltip-text) !important;
  text-decoration: none;
  text-align: center;
  border-radius: 2px;
  white-space: nowrap;
  transition: opacity 0.2s;
  overflow: visible;
  z-index: 1;
}

.product-cell-link:hover {
  opacity: 0.8;
  z-index: 100;
}

.style-mainstream   { background-color: #49b170; }
.style-dsp   { background-color: #e61fd5; }
.style-isp { background-color: #e6007e; }
.style-hp   { background-color: #8c0078; }

.product-model-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  right: -4px; /* 向右偏移，悬挂在边角 */
  top: -4px;   /* 向上偏移，悬挂在边角 */
  z-index: 2; /* 确保在最上层，但要在Tooltip之下 */
  box-shadow: 0 0 0 1px #fff; /* 可选：增加白色描边增强对比度 */
  pointer-events: none;  /* 让鼠标穿透圆点，确保能触发 link 的 hover */
}

.tooltip-popup {
  position: absolute;
  bottom: 100%; /* 显示在上方 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */

  width: max-content;
  min-width: 120px;
  max-width: 220px;

  padding: 8px;
  background-color: var(--color-tooltip-bg, #333);
  color: #fff;
  border-radius: 4px;
  font-size: calc(var(--font-size-table) * 0.8);
  line-height: 1.4;
  text-align: left;
  
  /* 层级必须高于 Dot (2) */
  z-index: 10; 
  
  /* 初始隐藏 */
  opacity: 0;
  visibility: hidden;
  margin-bottom: 8px;
  transition: opacity 0.2s, visibility 0.2s, margin-bottom 0.2s;
  pointer-events: none; /* 防止遮挡鼠标导致闪烁 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 悬停触发 */
.product-cell-link:hover .tooltip-popup {
  opacity: 1;
  visibility: visible;
  margin-bottom: 12px; /* 上浮动效 */
}

/* Tooltip 下方小三角 */
.tooltip-popup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-tooltip-bg, #333);
}

/* 列表样式美化 */
.tooltip-popup ul {
  margin: 0;
  list-style-type: disc;
  line-height: 1.2 !important;
}

.tooltip-popup li {
  margin-bottom: 2px;
  margin-left: 20px !important;
  white-space: nowrap; /* 列表项不换行 */
  font-size: calc(var(--font-size-table) * 0.8) !important;
}

.dot-low-power {
  background-color: #3CB4E6;
}

.dot-riscv {
  background-color: #ffd200; /* RISC-V logo 黄色 */
}

/* 底部标签文字 */
.col-label {
  padding-top: 0.5em !important;
  font-size: var(--font-size-table);
  vertical-align: top !important;
  line-height: 1.2; /* 调整行高 */
  text-align: center; /* 确保文本居中 */
}

.top-product-tips {
  list-style: none;
  padding: 0;
  margin: 30px auto 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 900px;
}

.top-product-tips li {
  /* 使用 inline-flex 确保内容紧凑 */
  display: inline-flex;
  /* 垂直方向几何居中 */
  align-items: center;
  margin: 0 15px 10px 15px;
  font-size: 14px;
  /* 关键：将行高设为1，去除文字自带的上下留白干扰 */
  line-height: 1;
  color: var(--body-font-color, #333);
}

/* 如果您的 HTML 结构里文字在 span 标签内，此条生效；如果是纯文字也兼容 */
.top-product-tips li span {
  line-height: normal; /* 恢复文字正常的阅读行高 */
}

.tips-dot {
  display: block; /* 在 flex 容器内，block 表现最稳定 */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0; /* 防止被挤压 */
  transform: translateY(6px);
}

/* 清除浮动辅助类 (如果需要兼容旧代码) */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* 简单的跳动动画 */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-5px);}
  60% {transform: translateY(-3px);}
}

/* 对“支持触摸”的设备隐藏 Tooltip */
@media (hover: none) {
  .tooltip-popup {
    display: none !important;
  }
}

@media (max-width: 1200px) {
  /* 移动端隐藏 Tooltip */
  .tooltip-popup {
    display: none !important; /* 强制不显示 */
    /*以此确保即便有 hover 伪类触发，也无法看见 */
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* 同时移除 hover 时的任何层级提升效果，避免点击时出现奇怪的遮挡 */
  .product-cell-link:hover {
    z-index: 1 !important; /* 恢复默认层级 */
  }
}

/* 768px及以上分辨率适合水平显示 */
@media (max-width: 767px) {
  .product-table-wrapper {
    overflow-x: auto;          /* 开启横向滚动 */
    -webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
    padding-bottom: 5px;       /* 预留一点空间给滚动条，避免遮挡边框 */
  }

  .product-table {
    table-layout: auto; /* 移动端允许横向滚动 */
    width: max-content;
    min-width: 100%;
  }

  .top-product-tips {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 20px;
  }
}