#debug-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 390px;
  overflow: auto;
  background: #142131;
  color: #dfeafa;
  padding: 20px;
  font: 14px/1.5 system-ui;
  z-index: 10;
  border-left: 1px solid #33485d;
}
#debug-panel h1 {
  font-size: 22px;
  margin: 0 0 8px;
}
#debug-panel h2 {
  font-size: 16px;
  margin: 20px 0 10px;
}
#debug-panel p {
  margin: 8px 0;
}
#debug-panel a {
  color: #8dd2ff;
}
#debug-panel details {
  margin: 14px 0;
  border-top: 1px solid #33485d;
  padding-top: 12px;
}
#debug-panel summary {
  font-weight: 650;
  cursor: pointer;
}
#debug-panel button {
  background: #285c85;
  color: #fff;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 3px;
  font: inherit;
}
#debug-panel label {
  display: block;
  margin: 8px 0;
}
#debug-panel input,
#debug-panel select,
#debug-panel textarea {
  display: block;
  width: 100%;
  background: #0d1825;
  color: #eaf2fa;
  border: 1px solid #486179;
  padding: 8px;
  border-radius: 5px;
  font: inherit;
}
#debug-panel textarea {
  min-height: 120px;
}
#debug-panel pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #0d1825;
  padding: 10px;
  font: 11px/1.5 monospace;
  max-height: 280px;
  overflow: auto;
}
#debug-panel .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
#debug-panel .status {
  color: #ffd98d;
}
#debug-panel .links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
#debug-panel .event-list {
  max-height: 240px;
  overflow: auto;
}
#debug-panel .event-list button {
  text-align: left;
  width: calc(100% - 6px);
}
#debug-panel video {
  width: 100%;
  background: black;
}
#debug-toggle {
  position: fixed;
  right: 402px;
  bottom: 12px;
  z-index: 11;
  padding: 6px 8px;
  background: #163449;
  color: #fff;
  border-radius: 6px;
  font: 12px system-ui;
}
body.debug-open #viewport {
  right: 390px;
}
body:not(.debug-open) #debug-panel {
  display: none;
}
body:not(.debug-open) #debug-toggle {
  right: 12px;
}
body.debug-hidden #debug-toggle {
  display: none;
}
@media (max-width: 850px) {
  body.debug-open #viewport {
    right: 0;
  }
  #debug-panel {
    width: min(390px, 100vw);
    box-shadow: -5px 0 30px #0008;
  }
  #debug-toggle {
    right: 402px;
  }
  body.debug-open #debug-toggle {
    right: min(402px, calc(100vw - 82px));
    bottom: 12px;
  }
}
#chain-context { width:100%; box-sizing:border-box; font:12px monospace; }
#chain-receipt { max-height:330px; overflow:auto; }
#chain-dropdowns label { display:block; margin:8px 0; }
#chain-controls select { max-width:100%; }