/* ChatGPT-style composer using Chainlit's stable IDs/classes only. */
#message-composer {
  position: relative;
  min-height: 7rem;
  padding: 0.875rem 1rem;
}

#message-composer #chat-input {
  min-height: 3.25rem;
}

/* Commands live in one compact "+" popover instead of an always-visible row. */
#message-composer .command-popover-wrapper button {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 9999px;
}

#message-composer .command-popover-wrapper button > svg,
#message-composer .command-popover-wrapper button > span {
  display: none;
}

#message-composer .command-popover-wrapper button::before {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
}

/* Native model picker sits beside the submit button, like ChatGPT. */
#message-composer #mode-picker-trigger-model {
  position: absolute;
  right: 3.75rem;
  bottom: 0.75rem;
  max-width: 11rem;
  height: 2rem;
  border-radius: 9999px;
}

/* Reserve room so left-side controls never overlap the model selector. */
#message-composer > div:last-child > div:first-child {
  padding-right: 12rem;
}

@media (max-width: 640px) {
  #message-composer #mode-picker-trigger-model {
    max-width: 8.5rem;
  }

  #message-composer > div:last-child > div:first-child {
    padding-right: 9.5rem;
  }
}