// Vagabond RPG - Chat Card Styles
// ================================

// Placeholder - will be expanded in Phase 7
.vagabond.chat-card {
  @include panel;
  overflow: hidden;

  // Card header
  .card-header {
    @include flex-between;
    padding: $spacing-2 $spacing-3;
    background-color: $color-parchment-dark;
    border-bottom: 1px solid $color-border;

    .card-title {
      font-family: $font-family-header;
      font-size: $font-size-base;
      font-weight: $font-weight-bold;
    }

    .card-subtitle {
      font-size: $font-size-sm;
      color: $color-text-muted;
    }
  }

  // Card content
  .card-content {
    padding: $spacing-3;
  }

  // Roll result
  .roll-result {
    @include flex-center;
    gap: $spacing-3;
    padding: $spacing-3;
    background-color: $color-parchment-light;
    border-radius: $radius-md;

    .roll-total {
      font-family: $font-family-header;
      font-size: $font-size-3xl;
      font-weight: $font-weight-bold;
    }

    .roll-formula {
      font-size: $font-size-sm;
      color: $color-text-muted;
    }
  }

  // Result status
  .result-status {
    @include flex-center;
    padding: $spacing-2;
    font-weight: $font-weight-bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: $radius-md;

    &.success {
      background-color: rgba($color-success, 0.2);
      color: $color-success;
    }

    &.failure {
      background-color: rgba($color-danger, 0.2);
      color: $color-danger;
    }

    &.critical {
      background-color: rgba($color-warning, 0.2);
      color: $color-warning;
      animation: pulse 1s ease-in-out;
    }
  }

  // Damage display
  .damage-display {
    @include flex-center;
    gap: $spacing-2;
    margin-top: $spacing-3;
    padding: $spacing-2;
    background-color: rgba($color-danger, 0.1);
    border: 1px solid $color-danger;
    border-radius: $radius-md;

    .damage-label {
      font-size: $font-size-sm;
      color: $color-text-secondary;
    }

    .damage-value {
      font-family: $font-family-header;
      font-size: $font-size-xl;
      font-weight: $font-weight-bold;
      color: $color-danger;
    }

    .damage-type {
      font-size: $font-size-sm;
      color: $color-text-muted;
    }
  }

  // Card buttons (for interactive cards)
  .card-buttons {
    display: flex;
    gap: $spacing-2;
    padding: $spacing-3;
    border-top: 1px solid $color-border;

    button {
      flex: 1;
    }
  }
}

// Spell card specific
.vagabond.chat-card.spell-card {
  .spell-effect {
    padding: $spacing-3;
    font-style: italic;
    border-left: 3px solid $color-accent-primary;
    background-color: $color-parchment-light;
    margin: $spacing-3 0;
  }

  .spell-meta {
    @include grid(2, $spacing-2);
    font-size: $font-size-sm;

    .meta-item {
      @include flex-between;
      padding: $spacing-1;

      .meta-label {
        color: $color-text-muted;
      }
    }
  }
}

// Animation
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}