.web-server-callout {
  position: absolute;
  z-index: 6;
  width: min(610px, 58vw);
  right: 2.5%;
  top: 6%;
  background: #fff;
  border: 1px solid #b9d2e0;
  border-top: 5px solid #246691;
  box-shadow: 0 18px 46px #173d5630;
  border-radius: 7px;
  padding: 1.1rem;
}

.web-server-callout .callout-pointer { left: 18%; }
.web-server-callout .callout-kicker { color: #246691; }
.web-server-callout .callout-head button { background: #e4f0f6; color: #246691; }
.web-server-callout > p { font-size: .78rem; line-height: 1.5; color: #667085; margin: .4rem 0 .8rem; }

.system-prompt-box {
  margin: 0;
  max-height: 300px;
  overflow: auto;
  padding: 1rem;
  border: 1px solid #cfe0e9;
  border-radius: 5px;
  background: #f6fafc;
  color: #1f3d52;
  font: 500 .78rem/1.65 "DM Mono", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.system-prompt-box:focus-visible { outline: 3px solid #90c4df; outline-offset: 2px; }
.system-prompt-footer { align-items: center; }
.system-prompt-actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; }

@media (max-width: 900px) {
  .web-server-callout { width: min(610px, 72vw); }
}

@media (max-width: 650px) {
  .web-server-callout { left: 4%; right: auto; top: 3%; width: 92%; padding: .8rem; }
  .system-prompt-box { max-height: 210px; font-size: .7rem; }
  .system-prompt-footer { align-items: flex-start; }
  .system-prompt-actions { justify-content: flex-start; }
}