/* Styles remain the same */
  body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f0f4f8;
      color: #333;
  }

  .container {
      max-width: 1000px;
      margin: auto;
  }

  h1 {
      text-align: center;
      color: #005f99;
  }

  label,
  h2 {
      display: block;
      font-size: 1.1em;
      margin-bottom: 5px;
  }

  select,
  textarea,
  input[type="checkbox"] {
      font-size: 1em;
      padding: 8px;
      box-sizing: border-box;
  }

  .tool {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20px;
  }

  .tool>.column {
      flex: 1 1 48%;
      box-sizing: border-box;
      padding: 10px;
  }

  textarea {
      width: 100%;
      min-height: 300px;
      resize: vertical;
      margin-bottom: 5px;
  }

  #output {
      background-color: #fff;
  }

  .error-message {
      color: red;
      font-weight: bold;
      min-height: 1.2em;
      margin-top: 5px;
  }

  .error {
      border: 1px solid red;
      color: red;
  }

  .controls {
      display: flex;
      align-items: center;
      margin-top: 10px;
  }

  .controls>div {
      margin-right: 20px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
  }

  .controls label {
      margin-right: 10px;
  }

  .controls select {
      width: auto;
  }

  .switch {
      display: flex;
      align-items: center;
  }

  .switch input {
      margin-right: 10px;
  }

  @media (max-width: 768px) {
      .tool {
          flex-direction: column;
      }

      .tool>.column {
          flex: 1 1 100%;
      }

      textarea {
          min-height: 200px;
      }

      .controls {
          flex-direction: column;
          align-items: flex-start;
          margin-top: 10px;
      }

      .controls>div {
          margin-right: 0;
      }

      .controls select {
          width: 100%;
      }
  }

  body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f0f4f8;
      color: #333;
  }

  .copy-container {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: fit-content;
  }

  .copy-button {
      padding: 10px 15px;
      font-size: 1em;
      background-color: #005f99;
      color: #fff;
      border: none;
      cursor: pointer;
      border-radius: 4px;
      width: 300px;
      /* Fixed width */
      white-space: nowrap;
      /* Prevent text from wrapping */
      overflow: hidden;
      /* Hide overflow if text is too long */
      text-overflow: ellipsis;
      /* Add ellipsis if text overflows */
  }

  .copy-button:hover {
      background-color: #004066;
  }