.comment {
  display: flex;
  flex-wrap: wrap;
}
.comment:has(.modal.is-active) {
  position: relative;
  z-index: 99;
}
.comment:not(.is_right) .comment_images {
  padding-left: 32px;
}
.comment .comment_images {
  position: relative;
  z-index: 2;
  width: 100%;
}
.comment .comment_images > .columns {
  --bulma-column-gap: 0;
  border-radius: 1rem 1rem 0 0;
  overflow: hidden;
  border: 2px solid var(--bulma-text-90);
  align-items: stretch;
}
.comment .comment_images > .columns .column > .icon-text:has(img) {
  margin-right: 0 !important;
  height: 100%;
}
.comment .comment_images > .columns .column > .icon-text:has(img) .file_preview {
  height: 100%;
}
.comment .comment_images > .columns .column > .icon-text:has(img) img {
  width: 100%;
  height: 100%;
  max-height: 400px;
  object-fit: cover;
  border-left: 2px solid var(--bulma-text-90);
}
.comment .comment_images > .columns .column:first-child:first-child img {
  border: none;
}
.comment:has(.reply) {
  margin-top: 76px;
}
.comment:has(.reply).is_right .reply {
  right: 0;
  left: auto;
  z-index: 0;
}
.comment:has(.reply).is_right .reply .reply_to {
  margin-left: auto;
}
.comment:has(.reply) .reply {
  top: calc(-86px + 0.5rem);
  position: absolute;
  left: 24px;
  z-index: 0;
}
.comment .comment_avatar {
  border: 1px solid var(--bulma-white);
}
.comment.is_right .comment_detail {
  background: var(--bulma-primary-light);
}
.comment:has(.comment_images) .comment_detail {
  border-radius: 0 0 1rem 1rem;
}
.comment .comment_detail {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 0.5rem 1rem;
  background: var(--bulma-background-hover);
  border-radius: 1rem;
}
.comment:hover .comment_action {
  opacity: 1;
}
.comment .comment_action {
  position: absolute;
  right: -1.5rem;
  bottom: -20px;
  transform: translateY(-50%);
  opacity: 0;
}
.comment .comment_action a {
  display: flex;
}
.comment:hover .comment_action_left {
  opacity: 1;
}
.comment .comment_action_left {
  position: absolute;
  left: -5rem;
  bottom: -20px;
  transform: translateY(-50%);
  opacity: 0;
}
.comment .comment_action_left a {
  display: flex;
}
.comment:hover .comment_action_right {
  opacity: 1;
}
.comment .comment_action_right {
  position: absolute;
  right: -5rem;
  bottom: -20px;
  transform: translateY(-50%);
  opacity: 0;
}
.comment .comment_action_right a {
  display: flex;
}

.reply {
  width: max-content;
}
.reply .reply_content {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
  background: var(--bulma-background);
  max-width: 600px;
  border-radius: 1rem;
}