#diagnosticsDialog {
  width: min(36rem, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: clamp(16px, 3vw, 28px);
  overflow: auto;
  font-family: var(--font);
}

#diagnosticsDialog .dialog-top {
  justify-content: start;
  gap: 12px;
}

#diagnosticsDialog #diagnosticsTitle {
  flex: 1;
  margin: 0;
  font: 750 clamp(1.25rem, 4vw, 1.65rem)/1.2 var(--font);
  letter-spacing: normal;
}

#diagnosticsDialog :is(p, .field, textarea, .diagnostics-actions button) {
  font-family: var(--font);
}

#diagnosticsDialog :is(p, .field) {
  color: var(--muted);
  font-size: .875rem;
}

#diagnosticsDialog textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #102337;
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.45;
  resize: vertical;
}

#diagnosticsDialog textarea::placeholder { color: var(--muted); }
#diagnosticsDialog textarea:focus-visible {
  outline: 3px solid #699ebd;
  outline-offset: 2px;
}

#diagnosticsDialog #diagnosticsReport {
  background: #0c1c2d;
  font: .8rem/1.5 ui-monospace, Consolas, monospace;
  resize: none;
}

html[data-theme=light] #diagnosticsDialog textarea { background: #fff; }
html[data-theme=light] #diagnosticsDialog #diagnosticsReport { background: #edf2f7; }

.diagnostics-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.diagnostics-footer p { margin: 0 0 10px; }
.diagnostics-actions { display: flex; justify-content: space-between; gap: 10px; }
.diagnostics-actions button { min-height: 40px; border: 1px solid; }
#copyDiagnostics { min-width: 10rem; }
#diagnosticsStatus { margin: 8px 0 0; }
#diagnosticsStatus:empty { margin: 0; }

@media (max-width: 380px) {
  .diagnostics-actions { flex-direction: column; }
  .diagnostics-actions button { width: 100%; }
}