.survey-answer-summary
  margin-bottom: 2rem
  background-color: #fff
  border-radius: 0.5rem
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1)
  padding: 1.5rem
  &__header
    display: flex
    justify-content: space-between
    align-items: center
    flex-wrap: wrap
    gap: 1rem
  &__user, &__date
    display: flex
    align-items: center
    gap: 0.5rem
  &__icon
    color: #6f7b8a
    font-size: 1rem
  &__name
    font-weight: bold
    color: #4a90e2
    text-decoration: none
    &:hover
      text-decoration: underline

.survey-answer-questions
  display: flex
  flex-direction: column
  gap: 1.5rem

.survey-answer-question
  background-color: #fff
  border-radius: 0.5rem
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1)
  overflow: hidden
  &__header
    display: flex
    justify-content: space-between
    align-items: center
    padding: 1rem 1.5rem
    background-color: #f8f9fa
    border-bottom: 1px solid #e9ecef
    flex-wrap: wrap
    gap: 0.5rem
  &__title
    font-size: 1.125rem
    font-weight: bold
    margin: 0
    flex: 1
  &__badge
    display: inline-flex
    align-items: center
    gap: 0.25rem
    font-size: 0.75rem
    padding: 0.25rem 0.5rem
    border-radius: 1rem
    i
      font-size: 0.75rem
    &.is-text
      background-color: #e3f2fd
      color: #0d47a1
    &.is-radio
      background-color: #e8f5e9
      color: #1b5e20
    &.is-checkbox
      background-color: #fff3e0
      color: #e65100
    &.is-scale
      background-color: #f3e5f5
      color: #4a148c
  &__content
    padding: 1.5rem
  &__text
    line-height: 1.6
    color: #212529
  &__choice, &__reason
    margin-bottom: 1rem
    display: flex
    gap: 0.5rem
    flex-wrap: wrap
  &__choice-label, &__reason-label
    font-weight: bold
    min-width: 3rem
  &__choice-value
    color: #212529
  &__reason-text
    color: #495057
    line-height: 1.6
    flex: 1
    width: 100%
    margin-top: 0.5rem

@media (max-width: 767px)
  .survey-answer-question
    &__header
      flex-direction: column
      align-items: flex-start
    &__badge
      margin-top: 0.5rem
    &__choice, &__reason
      flex-direction: column
      gap: 0.25rem
