.composer-toolbars {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--component-gap);
  max-width: 100%;
}
#queue-bar {
  display: flex;
  gap: var(--component-gap);
  max-width: 100%;
  min-width: 0;
}
#queue-bar .block-tools {
  position: static;
  display: flex;
  flex-shrink: 1;
}
#queue-items {
  overflow-x: auto;
  max-width: 240px;
  scrollbar-width: thin;
}
#queue-bar button {
  margin: 0;
}
#queue-items button {
  position: relative;
  font-size: 12px;
}
#queue-items button[aria-pressed='true'] {
  background: var(--control-active-surface);
}
#queue-items button[data-images='true']::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
#queue-items button[data-uncertain='true']:not(:disabled) {
  color: var(--warning);
}
#queue-bar[data-paused='true'] #queue-items {
  border-color: var(--warning);
}
#request-tools {
  position: static;
  flex-shrink: 0;
}
#request-tools button {
  margin: 0;
}
#composer .composer-settings {
  flex: 1 1 auto;
}
@media (max-width: 600px) {
  #composer .composer-actions {
    flex-wrap: wrap;
  }
  #composer .composer-settings {
    flex: 1 1 100%;
    width: 100%;
  }
  #queue-items {
    max-width: 170px;
  }
  .composer-input:has(#queue-bar:not([hidden])) {
    min-height: 180px;
  }
}

#queue-items:empty {
  display: none;
}
#queue-controls {
  flex-shrink: 0;
}
#queue-toggle[aria-pressed='true']:not(:disabled) {
  color: var(--warning);
}