/* Below the supported mobile layout width, shrink text, controls and spacing
   together. CSS zoom participates in layout and retains normal hit testing. */
html.cabinet-compact-viewport #app {
  width: 390px;
  min-width: 390px;
  max-width: 390px;
  zoom: var(--cabinet-viewport-scale, 1);
}

html.cabinet-compact-viewport #app > .mainframe {
  min-height: var(--cabinet-layout-height, 100vh);
}

#app .preview .chat-stage {
  height: auto;
  min-height: 20px;
  max-width: 100%;
  box-sizing: border-box;
}

/* A selected single option may wrap, but the empty search input must not add
   another row underneath it. Keep the input focusable; opening restores the
   library's normal search layout. Empty and multiple selects are unchanged. */
#app .v-select.single:not(.open) .vs__selected-options {
  min-width: 0;
}

#app .v-select.single:not(.open) .selected-tag {
  max-width: calc(100% - 4px);
  height: auto;
}

#app .v-select.single:not(.open) .selected-tag + input[type="search"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  opacity: 0;
}

#app .v-select.single .vs__actions {
  flex-shrink: 0;
  align-items: center;
}