body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial;
line-height: 1.6;
color: #333;}

/* ===== Retry Insight ===== */
.retry-insight {
  margin: 16px 0;
  padding: 12px 14px;
  border-left: 4px solid #f0ad4e;
  background: #fcfaf4;
  border-radius: 6px;}
.retry-insight h3 {
  margin: 0 0 6px;
  font-size: 16px;}
.retry-insight ul {
  list-style: none;   /* 去掉 HTML 自带的圆点 */
  padding-left: 0;
  margin: 6px 0 0;}
.retry-insight li {
  margin: 4px 0;}

/* ===== Attempt Chain ===== */
/* General Styling for the Attempt Chain */
.attempt-chain {
margin: 12px 0 16px 0;
padding: 8px 12px;
background: #f7f9fb;
border-left: 4px solid #6c8cff;
border-radius: 4px;
font-size: 13px;
}

.attempt-chain .label {
font-weight: bold;
margin-bottom: 6px;
}

.attempt-chain .badges {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}

.attempt-badge {
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
}

.attempt-badge.failed {
background: #ffe5e5;
color: #c62828;
}

.attempt-badge.passed {
background: #e6f4ea;
color: #2e7d32;
}

.arrow {
margin: 0 4px;
color: #999;
}

.attempt-header-meta {
    margin: 6px 0 14px;
    font-size: 14px;
    color: #6b7280; /* neutral gray */
}

/* ===== Tabs ===== */
.tabs {
  margin-bottom: 10px;}
.tab {
  padding: 8px 15px;
  margin-right: 8px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;}
/*.tab:hover {
  background-color: #d1d1d1;
}*/
.tab.active {
  background-color: #80deea; /* 按下或选中颜色 */
  transform: translateY(0);   /* 消除悬停上移效果 */
  color: black;}

/* ===== Attempt Card ===== */
.card {
  display: none;
  margin-top: 3px;
  background-color: #ffffff;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 5px;}
.card.active {
  border-left:4px solid #e0f7fa;
  display: block;}
.card-header {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}
.card h3 {
  margin-top: 0;}

/* Styling for the Dashed Line */
  hr.dashed {
    border: none;
    border-top: 1px dashed #aaa;
    margin: 10px 0;}

/* ===== General Info Block Style ===== */
.info-block {
  padding: 12px;
  margin: 8px 0;
  border-radius: 5px;
  background-color: #f4f4f4;
  font-size: 14px;
  color: #333;
}
/* Duration Style */
.info-block.duration {
  background-color: #e0f7fa;  /* Light blue */
  /*border-left: 4px solid #00bcd4;*/
}
.info-block.duration span {
  font-weight: bold;
}
/* Error Style */
.info-block.error {
  background-color: #ffebee;  /* Light red */
  border-left: 4px solid #f44336; /* Red border */
  color: #d32f2f;
}
.info-block.error pre {
  background-color: #f9f9f9;
  border-radius: 5px;
  padding: 8px;
  font-size: 12px;
  color: #d32f2f;
  /* 核心三行 */
  max-height: 120px;      /* 👈 控制可视高度（推荐 100~160） */
  overflow-y: auto;       /* 👈 超出显示滚动条 */
  white-space: pre-wrap;  /* 自动换行 */
  word-break: break-word;
  margin-top: 6px;
}
.info-block.error pre:hover {
  outline: 1px solid #f44336;
}
/* URL Style */
.info-block.url {
  background-color: #f1f8e9;  /* Light green */
  border-left: 4px solid #8bc34a; /* Green border */
}
.info-block.url a {
  color: #4caf50;
  text-decoration: none;
  font-weight: bold;
}
.info-block.url a:hover {
  text-decoration: underline;
}

/* Artifacts Style */
.info-block.artifacts {
  background-color: #fff9c4;  /* Light yellow */
  border-left: 4px solid #ffeb3b; /* Yellow border */
}
.info-block.artifacts span {
  font-weight: bold;
  color: #f57f17;
}
.info-block.artifacts b {
  font-size: 16px;
  font-weight: bold;
}

/* ===== Styling for Buttons ===== */
button {
  padding: 8px 12px;
  background-color: #e0f7fa;
  color: black;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
button:hover {
  background-color: #b2ebf2; /* 鼠标悬停颜色稍深 */
  transform: translateY(-1px); /* 轻微上移 */
}

/* ===== Failure Panel Button ===== */
.panel-btn {
  background: none;             /* 去掉实心背景 */
  /* border: 1px solid #007bff;    蓝色边框 */
  color: #007bff;               /* 蓝色文字 */
   /*padding: 4px 10px; */
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;                     /* chevron 和文字间距 */
  transition: background-color 0.2s, color 0.2s;
}
 /*
.panel-btn:hover {
  background-color: #e6f0ff;
  color: #0056b3;} */

.panel-btn .chevron {
    /* font-weight: bold;*/
    display: inline-block;
    transition: transform 0.2s ease;
}
/* 可选：点击展开时旋转箭头 */
.panel-btn.active .chevron {
    transform: rotate(90deg);
}
/* Panel Style */
.panel {
  display: none;
  background-color: #fafafa;
  border-radius: 5px;}

/* ===== Attempt Diff Analysis ===== */
.attempt-diff {
  margin: 16px 0;
  padding: 12px 14px;
  background: #ffffff;
  border-left: 4px solid #e0e0e0;
  border-radius: 6px;
  }
.attempt-diff h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  }
.attempt-diff details {
  margin: 4px 0;
  }
.attempt-diff summary {
  width: 98.2%;
  text-align: left;
  padding: 6px 10px;
  margin: 0;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  }
.attempt-diff summary::-webkit-details-marker {
  display: none;          /* Chrome */
  }

.attempt-diff summary:hover {
  background: #e3f2fd;
  }
.attempt-diff pre {
  margin: 6px 0 8px 0;
  padding: 10px;
  background: #f8f9fa;
  border: 1px dashed #ccc;
  border-radius: 4px;
  font-size: 12px;
  white-space: pre-wrap;
  max-height: 260px;
  overflow-y: auto;
  }

  img { max-width:100%; border:1px solid #ccc; }

/* ===== Failure Panel ===== */
 .failure-panel {
  padding: 0px;
  border: 1px solid #ddd;
  background-color: #fafafa;
  font-family: Arial, sans-serif;
  font-size: 14px;
    }

.failure-panel details {
  margin-bottom: 10px;
}
.failure-panel pre {
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
  white-space: pre-wrap;  /* Wrap long lines */
  word-wrap: break-word;   /* Prevent overflow */
  font-size: 12px;
}
.failure-panel img {
  max-width: 100%;
  border: 1px solid #ccc;
}
.failure-panel button {
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}
.failure-panel button:hover {
  background-color: #45a049;
}
/* == (Retry Insight Style) == */
.failure-panel.retry-style {
  margin-top: 16px;
  padding: 14px 16px;
  /* border-left: 4px solid #efe9e9;   ❌ failure 红 */
  background-color: #ffffff;
  border-radius: 6px;
}

/* Failure Panel 标题 */
.failure-panel.retry-style h4 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: bold;
  color: #d32f2f;
}

/* 内部 section 间距收紧 */
.failure-panel.retry-style .section {
  margin-bottom: 10px;
}
/* trace特殊添加 */
.failure-panel.retry-style .section.trace-block {
  margin-bottom: 0px;
}

/* Copy button */
.copy-btn {
  padding: 8px 14px;
  border-radius: 5px;
  background-color: #e0f7fa;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.copy-btn.copied {
  background-color: #4caf50;
  color: white;
}

/* Command block */
.trace-cmd {
  background: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
  transition: background-color 0.6s ease, box-shadow 0.6s ease;
}

/* ✨ Green flash effect */
.trace-cmd.flash {
  background-color: #e8f5e9;
  box-shadow: 0 0 0 2px #4caf50 inset;
}
