#chat {
  .message {
    background: $c-white url('#{$asset-path}/concrete-seamless.webp');
    font-family: $font-stack-base;

    .message-sender {
      font-family: $font-stack-base;
    }

    .chat-title {
      align-items: center;
      border: 1px solid $ct-gray;
      border-left: 0;
      border-right: 0;
      padding: 4px 0;
    }

    .shift {
      font-weight: bold;

      &.up {
        color: darkred;
      }
      &.down {
        color: red;
      }
    }

    .item-icon {
      flex: 0 0 auto;
      width: 40px;
      height: 40px;
      margin-right: 8px;
      background: rgba(0,0,0,.5);
    }

    .cell__title {
      font-size: var(--font-size-20);
      text-transform: uppercase;
      line-height: 1;
      margin: 0;
      border: 0;
    }

    .cell__subtitle {
      text-transform: uppercase;
      line-height: 1;
      margin: 0;
    }

    &.whisper {
      background: #e0ecff;

      .result-label {
        background: #d0dbed;
      }
    }

    .result {
      margin-bottom: 10px;
    }

    .result-label {
      text-align: center;
      font-size: var(--font-size-18);
      font-weight: bold;
      border: 1px solid #ccc;
      margin: 0;
      padding: 10px;
      background: #efefef;

      &:has(+ .result-details:not(:empty)):hover,
      &:has(+ .result-choices:not(:empty)):hover {
        cursor: pointer;
      }
    }

    .result-details,
    .result-choices {
      padding: 0px 10px;
    }

    .failure {
      color: $c-failure;
    }

    .partial {
      color: $c-partial;
    }

    .success {
      color: $c-success;
    }

    .critical {
      color: $c-critical;
    }

    .card-buttons {
      display: flex;
      margin-bottom: 10px;

      button {
        background: rgba(0, 0, 0, 0.1);
        border: 1px solid var(--color-border-light-2);
      }
    }
  }

  .cell__title {
    font-family: $font-stack-secondary;
    font-weight: bold;
    font-size: var(--font-size-16);
    border-bottom: 2px solid $c-black;
    margin-bottom: 15px;

    &:hover {
      cursor: pointer;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: $font-stack-secondary;
    font-weight: bold;
  }

  .row {
    font-size: var(--font-size-13);
  }

  .row--border {
    margin-top: 10px;
  }

  .dice-roll {
    .dice-formula {
      cursor: pointer;

      &:hover,
      &:focus {
        box-shadow: 0 0 5px rgba($c-navy-up, 0.25);
        background-color: $c-navy-top;
      }
    }
  }
}

#chat-form {
  textarea {
    background: $c-white;
  }
}