/* Keep selected Assistant actions above the input in every supported layout. */
#assistantForm > #composerContextRow:not([hidden]) {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  align-self: start;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  overflow: visible;
}

#assistantForm > #composerContextRow:not([hidden]) > .selected-action-agent {
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
}

#assistantForm > #composerContextRow:not([hidden]) .selected-action-chip {
  max-width: 100%;
}

#assistantForm:has(> #composerContextRow:not([hidden])) {
  grid-template-rows: auto minmax(40px, auto) !important;
  align-items: end;
}

#assistantForm:has(> #composerContextRow:not([hidden])) > :is(
  #assistantMobileCameraButton,
  #assistantInput,
  .composer-actions,
  .assistant-dictation
),
#assistantForm:has(> #composerContextRow:not([hidden])) :is(
  .composer-tools,
  #actionShortcutBtn,
  #attachShortcutBtn,
  .assistant-mobile-send
) {
  grid-row: 2 !important;
}

/* Files keep their first row; actions follow them and both stay above input. */
#assistantForm:has(> #composerContextRow:not([hidden])):has(> #selectedChatFiles:not([hidden])) {
  grid-template-rows: auto auto minmax(40px, auto) !important;
}

#assistantForm:has(> #composerContextRow:not([hidden])):has(> #selectedChatFiles:not([hidden])) > #selectedChatFiles {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

#assistantForm:has(> #composerContextRow:not([hidden])):has(> #selectedChatFiles:not([hidden])) > #composerContextRow {
  grid-row: 2 !important;
}

#assistantForm:has(> #composerContextRow:not([hidden])):has(> #selectedChatFiles:not([hidden])) > :is(
  #assistantMobileCameraButton,
  #assistantInput,
  .composer-actions,
  .assistant-dictation
),
#assistantForm:has(> #composerContextRow:not([hidden])):has(> #selectedChatFiles:not([hidden])) :is(
  .composer-tools,
  #actionShortcutBtn,
  #attachShortcutBtn,
  .assistant-mobile-send
) {
  grid-row: 3 !important;
}

@media (max-width: 720px),
       (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  #assistantForm > #composerContextRow:not([hidden]) {
    gap: 5px;
  }

  #assistantForm > #composerContextRow:not([hidden]) .selected-action-chip {
    min-height: 30px;
    padding: 4px 6px;
  }

  #assistantForm > #composerContextRow:not([hidden]) .selected-action-marker,
  #assistantForm > #composerContextRow:not([hidden]) .selected-action-chip button {
    width: 20px;
    height: 20px;
  }

  #assistantForm > #composerContextRow:not([hidden]) .selected-action-copy strong {
    font-size: 11px;
  }

  #assistantForm > #composerContextRow:not([hidden]) .selected-action-copy span {
    font-size: 9px;
  }
}