form {
    padding: 0.5em;
  }
  
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  form li + li {
    margin-top: 1em;
  }
  
  label {
      /* Uniform size & alignment */
      display: inline-block;
      width: 90px;
      text-align: right;
    }
  
  input,
  textarea {
    /* To make sure that all text fields have the same font settings
         By default, textareas have a monospace font */
    font: 1em 'Roboto', sans-serif;
  
    /* Uniform text field size */
    width: 400px;
    box-sizing: border-box;
  }
  
  textarea {
    /* Align multiline text fields with their labels */
    vertical-align: top;
  
    /* Provide space to type some text */
    height: 8em;
  }
  
  .button {
      /* Align buttons with the text fields */
      padding-left: 90px; /* same size as the label elements */
    }
  
  button {
      /* This extra margin represent roughly the same space as the space
         between the labels and their text fields */
      margin-left: 0.5em;
    }
  
  /* Media Query for Small Displays */
  @media screen and (max-width: 600px) {
      label {
        display: block;
        width: 100%;
        text-align: left;
      }
    
      input,
      textarea {
        width: 100%;
      }
    
      .button {
        padding-left: 0;
      }
    
      button {
        margin-left: 0;
      }
    }

/* WebMCP Active Styles for Agent Interactions */
form:tool-form-active {
    border: 2px dashed #0066cc;
    background-color: #f7f9fc;
    transition: all 0.3s ease;
}
input:tool-submit-active,
button:tool-submit-active,
textarea:tool-submit-active {
    background-color: #28a745 !important;
    color: #ffffff !important;
    outline: 2px solid #28a745;
}