/* The three desk windows as pages of one scroller on a phone.
   On wider screens the wrapper disappears and the grid lays the windows out
   exactly as before. Loaded after app.css. */

#view-assistant .desk-panes {
  display: contents;
}

@media (max-width: 899px) {
  #view-assistant .desk-panes {
    grid-row: 2;
    display: flex;
    gap: 0.55rem;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  #view-assistant .desk-panes::-webkit-scrollbar {
    display: none;
  }

  /* Every window is drawn, side by side; the data-pane rule that hid the others no longer applies. */
  #view-assistant .desk-panes > .desk-pane {
    display: flex;
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* The scroller clips whatever a window draws outside its own box, so a shadow or a blurred
       backdrop would show as a rectangle behind the rounded corners. The window is just its shape. */
    box-shadow: none;
    backdrop-filter: none;
  }

  /* The glass card inside Search ends flush with the window: its bottom corners follow the window's. */
  #view-assistant .desk-main .classic-card {
    border-radius: 22px 22px 27px 27px;
    box-shadow: none;
    backdrop-filter: none;
  }
}