/* http-status-checker.css — tool-specific styles only */

.tool-panel{min-width:0}

.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
}

.tool-table{
  width:100%;
  max-width:100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  min-width: 1180px;
}

.tool-table th,
.tool-table td{
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

.url-cell a{
  display:block;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.details{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tool-btn.is-loading{
  pointer-events:none;
  opacity:.9;
  filter:saturate(1.05);
}

.dots3{
  display:inline-flex;
  gap:4px;
  margin-left:8px;
  vertical-align: middle;
}

.dots3 i{
  width:5px;
  height:5px;
  border-radius:50%;
  background: rgba(255,255,255,.92);
  display:block;
  opacity:.25;
  animation: dotPulse 1s infinite ease-in-out;
}

.dots3 i:nth-child(2){animation-delay:.15s}
.dots3 i:nth-child(3){animation-delay:.30s}

@keyframes dotPulse{
  0%,100%{opacity:.25;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-2px)}
}

.tool-btn.danger{border-color: rgba(255,105,180,.35);}
.tool-btn.danger:hover{border-color: rgba(255,105,180,.65);}

.code-hl{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-weight:850;
  border:1px solid rgba(255,255,255,.12)
}
.code-hl.ok{background: rgba(35,255,170,.12); color: rgba(35,255,170,.95)}
.code-hl.redir{background: rgba(255,211,107,.12); color: rgba(255,211,107,.95)}
.code-hl.warn{background: rgba(255,211,107,.14); color: rgba(255,211,107,.98)}
.code-hl.bad{background: rgba(255,105,180,.12); color: rgba(255,105,180,.95)}

.muted-row{color: rgba(255,255,255,.60);}

.row-error{
  color: rgba(255,105,180,.92);
  font-size: 12px;
  margin-top: 6px;
  white-space: normal;
}

/* =========================
   NEW: Highlight cells for Initial/Final
   ========================= */

.status-cell{
  border-radius: 12px;
  padding: 8px 10px;
}

/* subtle background per code class */
.status-cell.cell-2xx{
  background: rgba(35,255,170,.10);
  box-shadow: inset 0 0 0 1px rgba(35,255,170,.15);
}
.status-cell.cell-3xx{
  background: rgba(255,211,107,.10);
  box-shadow: inset 0 0 0 1px rgba(255,211,107,.15);
}
.status-cell.cell-4xx{
  background: rgba(255,211,107,.12);
  box-shadow: inset 0 0 0 1px rgba(255,211,107,.20);
}
.status-cell.cell-5xx{
  background: rgba(255,105,180,.10);
  box-shadow: inset 0 0 0 1px rgba(255,105,180,.18);
}

/* make the pill pop a bit inside highlighted cell */
.status-cell .code-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
}