/* Phosphor icons (phosphoricons.com, MIT) rendered via CSS mask so they
   inherit the link color, hover state included. */
.ai-icon::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.ai-icon-sparkle::before   { -webkit-mask-image: url(../images/sparkle.svg);              mask-image: url(../images/sparkle.svg); }
.ai-icon-summarize::before { -webkit-mask-image: url(../images/list-bullets.svg);         mask-image: url(../images/list-bullets.svg); }
.ai-icon-translate::before { -webkit-mask-image: url(../images/translate.svg);            mask-image: url(../images/translate.svg); }
.ai-icon-draft::before     { -webkit-mask-image: url(../images/chat-teardrop-text.svg);   mask-image: url(../images/chat-teardrop-text.svg); }
.ai-icon-grammar::before   { -webkit-mask-image: url(../images/magic-wand.svg);           mask-image: url(../images/magic-wand.svg); }
.ai-icon-insert::before    { -webkit-mask-image: url(../images/arrow-bend-down-right.svg); mask-image: url(../images/arrow-bend-down-right.svg); }
.ai-icon-close::before     { -webkit-mask-image: url(../images/x.svg);                    mask-image: url(../images/x.svg); }

#redmine-ai-panel { margin-top: 8px; }
#redmine-ai-panel .redmine-ai-buttons a { margin-right: 14px; text-decoration: none; }
#redmine-ai-panel .redmine-ai-title {
  font-weight: bold;
  margin-right: 14px;
}
#redmine-ai-draft-form {
  margin: 6px 0;
  display: flex;
  gap: 6px;
  align-items: flex-end;
  max-width: 900px;
}
#redmine-ai-draft-form textarea {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: inherit;
  font-size: inherit;
  resize: vertical;
}
#redmine-ai-result {
  border: 1px solid #d0d7de;
  border-radius: 4px;
  background: #f8f9fb;
  padding: 8px 12px;
  margin-top: 6px;
}
#redmine-ai-result-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  margin: 0;
}
#redmine-ai-result-actions a { margin-right: 10px; text-decoration: none; }
.redmine-ai-spinner { color: #888; font-style: italic; }
.redmine-ai-grammar { margin-top: 4px; }
.redmine-ai-grammar a { margin-right: 14px; text-decoration: none; }
#redmine-ai-grammar-status { margin-left: 4px; color: #888; }