<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Route Planner</title>

  <!-- Bootstrap 5 for Responsiveness -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

  <!-- Leaflet Routing Machine -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.min.js"></script>

  <style>
    #map {
      width: 100%;
      height: calc(100vh - 140px);
    }

    #route-info {
      background: white;
      border-top: 1px solid #ddd;
      text-align: center;
      font-size: 15px;
      padding: 10px;
    }

    .accordion-menu {
      display: none;
      position: absolute;
      top: 60px;
      right: 20px;
      width: 200px;
      background: white;
      border: 1px solid #ddd;
      z-index: 1200;
      border-radius: 5px;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }

    .accordion-menu.active {
      display: block;
    }

    .accordion-menu button {
      width: 100%;
      padding: 10px;
      background: transparent;
      border: none;
      text-align: left;
      cursor: pointer;
    }

    .accordion-menu button:hover {
      background: #f0f0f0;
    }

    #inputs-wrapper.shrinked {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #inputs-wrapper.shrinked #inputs,
    #inputs-wrapper.shrinked .autocomplete-box,
    #inputs-wrapper.shrinked button {
      display: none;
    }

    #inputs-wrapper.shrinked #expand-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      background: #0078d7;
      color: white;
      font-size: 24px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
    }

    .autocomplete-box {
      position: absolute;
      background: white;
      border: 1px solid #ddd;
      z-index: 2000;
      padding: 5px 0;
      max-height: 150px;
      overflow-y: auto;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }

    .leaflet-routing-container {
      display: none;
    }

    .show-route-chart .leaflet-routing-container {
      display: block;
    }

    @media (max-width: 600px) {
      #inputs-wrapper {
        flex-wrap: nowrap;
      }
      #inputs-wrapper.shrinked #expand-button {
        display: flex;
      }
    }
  </style>
</head>

<body>
  <div id="inputs-wrapper" class="container-fluid py-3">
    <div id="inputs" class="row align-items-center justify-content-center g-2">
      <div class="col-12 col-sm-5 col-md-5 position-relative">
        <input id="start" class="form-control" placeholder="From (A)" value="Moscow, Red Square" autocomplete="off" />
        <div id="start-autocomplete" class="autocomplete-box"></div>
      </div>
      <div class="d-none d-sm-block col-1 text-center">
        <span id="arrow" class="fs-3 text-primary">➡️</span>
      </div>
      <div class="col-12 col-sm-5 col-md-5 position-relative">
        <input id="end" class="form-control" placeholder="To (B)" value="Moscow, Arbat" autocomplete="off" />
        <div id="end-autocomplete" class="autocomplete-box"></div>
      </div>
      <div class="col-12 col-sm-1 text-center position-relative">
        <button id="accordion-button" class="btn btn-primary w-100">☰</button>
        <div id="accordion-menu" class="accordion-menu">
          <button id="toggle-route-chart">Route-Chart</button>
          <button>Some Dummy Selection</button>
          <button>Some Dummy Selection</button>
        </div>
      </div>
    </div>
    <button id="expand-button" style="display: none;">🔍</button>
  </div>

  <div id="map"></div>

  <div id="route-info" class="py-2">
    <span class="mx-3"><strong>Distance:</strong> <span id="distance">Waiting...</span></span>
    <span class="mx-3"><strong>ETA:</strong> <span id="eta">00:00:00</span></span>
  </div>

  <script>
    const map = L.map("map").setView([55.7558, 37.6173], 12);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);

    let routingControl;
    const startInput = document.getElementById("start");
    const endInput = document.getElementById("end");
    const accordionMenu = document.getElementById("accordion-menu");
    const accordionButton = document.getElementById("accordion-button");
    const routeChartButton = document.getElementById("toggle-route-chart");
    const inputsWrapper = document.getElementById("inputs-wrapper");
    const expandButton = document.getElementById("expand-button");

    let isShrinked = false;

    map.on("click", () => {
      if (window.innerWidth <= 600 && !isShrinked) {
        inputsWrapper.classList.add("shrinked");
        expandButton.style.display = "flex";
        isShrinked = true;
      }
    });

    expandButton.addEventListener("click", () => {
      inputsWrapper.classList.remove("shrinked");
      expandButton.style.display = "none";
      isShrinked = false;
    });

    accordionButton.addEventListener("click", () => {
      accordionMenu.classList.toggle("active");
    });

    routeChartButton.addEventListener("click", () => {
      document.body.classList.toggle("show-route-chart");
      accordionMenu.classList.remove("active"); // Auto-close menu after selecting
    });

    async function reverseGeocode(lat, lon) {
      const response = await fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json`);
      const data = await response.json();
      return data.display_name || "Unknown Address";
    }

    const startMarker = L.marker([55.7558, 37.6173], { draggable: true }).addTo(map);
    const endMarker = L.marker([55.7522, 37.5843], { draggable: true }).addTo(map);

    startMarker.on("dragend", async () => {
      const loc = startMarker.getLatLng();
      const address = await reverseGeocode(loc.lat, loc.lng);
      startInput.value = address;
      updateRoute();
    });

    endMarker.on("dragend", async () => {
      const loc = endMarker.getLatLng();
      const address = await reverseGeocode(loc.lat, loc.lng);
      endInput.value = address;
      updateRoute();
    });

    function setupAutocomplete(inputId, autocompleteBoxId, onSelect) {
      const input = document.getElementById(inputId);
      const autocompleteBox = document.getElementById(autocompleteBoxId);

      input.addEventListener("input", async () => {
        const query = input.value.trim();
        if (!query) {
          autocompleteBox.innerHTML = "";
          return;
        }

        const suggestions = await (
          await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=json&limit=5`)
        ).json();

        autocompleteBox.innerHTML = suggestions
          .map(item => `<button class="list-group-item">${item.display_name}</button>`)
          .join("");

        autocompleteBox.querySelectorAll(".list-group-item").forEach((el, idx) => {
          el.addEventListener("click", () => {
            input.value = suggestions[idx].display_name;
            const coords = [suggestions[idx].lat, suggestions[idx].lon];
            onSelect(coords);
            autocompleteBox.innerHTML = "";
          });
        });
      });
    }

    setupAutocomplete("start", "start-autocomplete", coords => {
      startMarker.setLatLng(coords);
      updateRoute();
    });

    setupAutocomplete("end", "end-autocomplete", coords => {
      endMarker.setLatLng(coords);
      updateRoute();
    });

    function updateRoute() {
      if (routingControl) map.removeControl(routingControl);
      routingControl = L.Routing.control({
        waypoints: [startMarker.getLatLng(), endMarker.getLatLng()],
        router: L.Routing.osrmv1(),
        createMarker: () => null,
        lineOptions: { styles: [{ color: "blue", weight: 5 }] },
      }).addTo(map);

      routingControl.on("routesfound", event => {
        const route = event.routes[0];
        const distance = (route.summary.totalDistance / 1000).toFixed(2);
        const totalSeconds = Math.round(route.summary.totalTime);
        const eta = new Date(totalSeconds * 1000).toISOString().substring(11, 19);

        document.getElementById("distance").textContent = `${distance} km`;
        document.getElementById("eta").textContent = eta;
      });
    }

    updateRoute();
  </script>
</body>
</html>

that map route-chart popup after route built should be hidden by default into accordion selection and have a close button if triggered in appearance.

also it is better to remove all +/-, and just do such thing:

three columns with all functionalities and functioning zoom:
[A-input field]>[B-input field]+/-[accordion]

one column and three rows:
then in mobile viewport dimensions it can look as:
[A-input field]
[B-input field]
+/-[accordion]

actual route-chart and plus/minus appears in here:


"""

<div class="leaflet-top leaflet-left"><div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in leaflet-disabled" href="#" title="Zoom in" role="button" aria-label="Zoom in" aria-disabled="true"><span aria-hidden="true">+</span></a><a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out" aria-disabled="false"><span aria-hidden="true">−</span></a></div></div>

""".


need only fullyfledjska code without your nonsenses in intros/outros in responses.