/* Phone-only bottom dock for the existing M&H toolbar. Desktop/tablet layout is unchanged. */
@media (max-width: 700px) {
  .main {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  .top {
    position: fixed !important;
    top: auto !important;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    min-height: 66px;
    height: auto;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    gap: 5px;
    border-top: 1px solid var(--line);
    border-bottom: 0;
    background: rgba(7,19,28,.985);
    box-shadow: 0 -8px 24px rgba(0,0,0,.22);
  }

  .top .menu-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 46px;
    min-height: 46px;
    margin: 0;
  }

  /* Phone toolbar keeps only menu + action icons. Branding remains in the slide-out nav. */
  .top-brand {
    display: none !important;
  }

  /* Spread the quick actions evenly from the end of the menu button to the right edge. */
  .quick-tools {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(38px, 1fr);
    align-items: center;
    justify-content: stretch;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .quick-tools::-webkit-scrollbar { display: none; }

  .quick-tool {
    width: 100%;
    min-width: 38px;
    min-height: 48px;
    padding: 0 2px;
    justify-self: stretch;
  }

  .quick-tool .tool-icon {
    width: 31px;
    height: 31px;
    border-radius: 9px;
  }

  .quick-tool .tool-icon svg {
    width: 16px;
    height: 16px;
  }

  .quick-tool strong {
    font-size: .52rem;
  }

  /* Keep the slide-out navigation above the bottom dock on phones. */
  .sidebar {
    max-height: calc(100dvh - 66px - env(safe-area-inset-bottom, 0px));
  }

  .workspace-dialog {
    max-height: calc(100dvh - 12px);
  }
}

@media (max-width: 390px) {
  .top {
    padding-left: 5px;
    padding-right: 5px;
    gap: 3px;
  }

  .top .menu-toggle {
    flex-basis: 34px;
    width: 34px;
  }

  .quick-tools {
    grid-auto-columns: minmax(35px, 1fr);
  }

  .quick-tool {
    min-width: 35px;
    padding-inline: 1px;
  }
}