/* Harness chrome uses a compensated viewport for the site's 67% zoom. Keep
   this modal in that same coordinate space, with only its active pane scrolling. */
@media (max-width: 900px) {
  #mcpDialog {
    box-sizing: border-box;
    position: fixed;
    inset: 12px auto auto 12px;
    width: calc(var(--site-vp-w, 100vw) - 24px);
    max-width: calc(var(--site-vp-w, 100vw) - 24px);
    height: calc(var(--site-vp-h, 100dvh) - 24px);
    max-height: calc(var(--site-vp-h, 100dvh) - 24px);
    margin: 0;
    overflow: hidden;
  }

  #mcpDialog[open] {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }

  #mcpDialog > *,
  #mcpDialog .command-dialog__head > *,
  #mcpDialog :is(.plugin-grid, .plugin-card, .mcp-form, .mcp-form label) {
    min-width: 0;
  }

  #mcpDialog .command-dialog__head { gap: 12px; padding: 16px; }
  #mcpDialog .mcp-dialog__head-actions { min-width: 0; justify-content: flex-end; }
  #mcpDialog .mcp-catalog-summary { min-width: 0; max-width: 180px; }
  #mcpDialog #mcpClose { flex: 0 0 44px; width: 44px; height: 44px; }
  #mcpDialog > p { padding: 12px 16px; overflow-wrap: anywhere; }
  #mcpDialog .plugin-tabs { min-width: 0; padding-inline: 12px; }
  #mcpDialog .plugin-tab { min-width: 0; padding-inline: 10px; }

  #mcpDialog .plugin-pane {
    min-height: 0;
    max-height: none;
    padding: 16px;
    overflow: auto;
    overscroll-behavior: contain;
  }

  #mcpDialog .plugin-pane--connectors { display: block; padding: 0; }
  #mcpDialog .plugin-grid { grid-template-columns: minmax(0, 1fr); }
  #mcpDialog .plugin-card { overflow-wrap: anywhere; }
  #mcpDialog .plugin-card__actions { flex-wrap: wrap; }
  #mcpDialog .mcp-workspace { max-height: none; overflow: visible; }
  #mcpDialog .mcp-tool-runner__actions { flex-wrap: wrap; }
}

@media (max-width: 900px) and (max-height: 500px) {
  #mcpDialog .command-dialog__head { padding: 10px 16px; }
  #mcpDialog .command-dialog__head > div:first-child { display: flex; align-items: center; gap: 14px; }
  #mcpDialog .command-dialog__head :is(.eyebrow, h2) { margin: 0; }
  #mcpDialog .command-dialog__head h2 { font-size: 1.15rem; }
  #mcpDialog > p { margin: 0; padding-block: 8px; line-height: 1.4; }
  #mcpDialog .plugin-pane { padding-block: 12px; }
  #mcpDialog .plugin-pane--connectors { padding: 0; }
}